修改树组件配置

3 days ago · ef9d89936f
parent 3ad157e612
commit ef9d89936f
6 changed files with 80 additions and 47 deletions
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@ -492,6 +492,7 @@
    <div class="center" @drop="onDrop" v-loading="loading">
      <FlowRuler>
        <VueFlow
+          id="flowA"
          :min-zoom="0.01"
          ref="flowRef"
          :snapToGrid="isSnapToGrid"
@ -1682,8 +1683,10 @@
        </div>
      </template>
    </el-dialog>
+
+
    <el-dialog v-model="treeOptionsVisible" title="树设置" fullscreen>
-      <TreeOption :data="nodeAttrForm.treeOptions" :level="nodeAttrForm.level" />
+      <TreeOption :data="nodeAttrForm.treeOptions" :level="nodeAttrForm.level" key="1"/>
    </el-dialog>
  </div>
 </template>
@ -1802,7 +1805,7 @@ const {
  updateNode,
  removeNodes,
  addNodes
-} = useVueFlow();
+} = useVueFlow({ id: 'flowA' });

 const gridSize = 200;

--- a/src/views/boardGenerate/nodes/advancedComponents/tree/nodes/item.vue
+++ b/src/views/boardGenerate/nodes/advancedComponents/tree/nodes/item.vue
@ -10,7 +10,8 @@
        {{props.dimensions}}
      </div>
    </div>
-    <Handle v-show="false" :id="`${props.id}.-t`" type="target" :position="Position.Right" />
+    <Handle :id="`${props.id}.-l`" type="target" :position="Position.Left" />
+    <Handle :id="`${props.id}.-r`" type="target" :position="Position.Right" />
  </div>
 </template>
 <script setup>
@ -63,9 +64,6 @@ const emit = defineEmits(['resize']);
 const resize = (e) => {
  emit('resize', e, props.id);
 };
-watch(()=>props.dimensions,() => {
-  console.log(JSON.stringify(props.dimensions));
-})
 </script>
 <style scoped>
 .custom-node {
--- a/src/views/boardGenerate/nodes/advancedComponents/tree/option.vue
+++ b/src/views/boardGenerate/nodes/advancedComponents/tree/option.vue
@ -1,7 +1,7 @@
 <template>
  <div style="height: calc(90vh - 111px - 30px);position: relative;">
    <el-card class="moduleCard" shadow="never" :draggable="true"
-             @dragstart="onDragStart($event, 'itemNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+             @dragstart="onDragStart($event, 'itemNode',checkNodeId)" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
             :body-style="{padding:'4px 0'}">
      <template #header>
        <div style="width: 100%;height: 100%;text-align: center">
@ -17,10 +17,11 @@
    </el-card>
    <div class="content" @drop="onDrop">
      <VueFlow
+        id="flowB"
        :min-zoom="0.01"
        :zoomOnScroll="false"
        :panOnDrag="false"
-        ref="flowRef"
+        ref="flowRef1"
        v-model:nodes="nodes"
        v-model:edges="edges"
        fit-view-on-init
@ -35,7 +36,7 @@
        <Background :size="1" :gap="20" pattern-color="#000" style="background-color: #fff" />

        <template #node-itemNode="props">
-          <Item v-bind="props" @resize="(e) => handleResizeStop(e, props)"/>
+          <Item v-bind="props" @resize="(e) => handleResizeStop(e, props)" />
        </template>
      </VueFlow>
    </div>
@ -48,7 +49,6 @@ import tool from './tool.js';
 import { Background } from '@vue-flow/background';

 import Item from './nodes/item.vue';
-import AreaNode from '@/views/print/nodes/areaNode.vue';


 const { onDragStart, onDrop, onDragOver } = tool();
@ -57,8 +57,8 @@ const {
  updateNode,
  removeNodes,
  addNodes
-} = useVueFlow();
-const flowRef = ref();
+} = useVueFlow({ id: 'flowB' });
+const flowRef1 = ref();

 const props = defineProps({
  data: {
@ -72,7 +72,7 @@ const props = defineProps({
 });
 const nodes = ref([]);
 const edges = ref([]);
-
+const checkNodeId = ref('')
 const logEvent = async (eventname, event) => {
  switch (eventname) {
    case 'connect':
@ -92,6 +92,12 @@ const logEvent = async (eventname, event) => {
    case 'paneClick':
      break;
    case 'click':
+      console.log(event.node)
+      if(event.node.id.startsWith("root")){
+        checkNodeId.value = event.node.id
+      }else{
+        checkNodeId.value = ''
+      }
      break;
    case 'nodeDrag':
      break;
@ -113,7 +119,7 @@ const handleResizeStop = (event, node) => {
  });
 };
 onMounted(async () => {
-  flowRef.value.setTransform({
+  flowRef1.value.setTransform({
    x: 0,
    y: 0,
    zoom: 1
@ -121,24 +127,33 @@ onMounted(async () => {
  await nextTick();
  nodes.value = [];
  await nextTick();
-  addNodes({
-    id: `item1`,
-    type: 'itemNode',
-    draggable:false,
-    position: {
-      x: 0,
-      y: 200
-    },
-    dimensions: { 'width': 300, 'height': 200 },
-    data: {}
+  console.log(props.level);
+  Array(props.level).fill(0).forEach((e, index) => {
+    addNodes({
+      id: `root_${index}`,
+      type: 'itemNode',
+      draggable: false,
+      position: {
+        x: index * ((300) + (50)),
+        y: 200
+      },
+      dimensions: { width: 300, height: 200 },
+      data: {}
+    });
+    if (index > 0) {
+      addEdges({
+        id: `edge_${index}`,
+        source: `root_${index - 1}`,
+        target: `root_${index}`,
+        type: 'bezier',
+        animated: true,
+        sourceHandle: `root_${index - 1}.-r`,
+        targetHandle: `root_${index}.-l`,
+        style: { stroke: '#409EFF' }
+      });
+    }
  });
-  setTimeout(() => {
-    console.log(JSON.stringify(nodes.value));
-  }, 1000);
 });
-watch(() => nodes.value, () => {
-  console.log(JSON.stringify(nodes.value));
-}, { deep: true });
 </script>
 <style lang="less" scoped>
 .levelItem {
--- a/src/views/boardGenerate/nodes/advancedComponents/tree/tool.js
+++ b/src/views/boardGenerate/nodes/advancedComponents/tree/tool.js
@ -2,7 +2,7 @@ import { useVueFlow } from '@vue-flow/core';
 import { v4 as uuidv4 } from 'uuid';


-const getId = ( ) => {
+const getId = () => {
  return `${uuidv4().replaceAll('-', '_')}`;
 };

@ -12,7 +12,8 @@ const getNodeSize = (e) => {
 };
 const tool = () => {
  const nodeType = ref('');
-  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
+  const checkNodeId = ref('');
+  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode, getNodes,nodes } = useVueFlow({ id: 'flowB' });
  const onDragStart = (event, type, data) => {
    if (event.dataTransfer) {
      event.dataTransfer.setData('application/vueflow', type);
@ -20,6 +21,7 @@ const tool = () => {
    }

    nodeType.value = type;
+    checkNodeId.value = data || '';
    document.addEventListener('drop', onDragEnd);
  };
  const onDragEnd = () => {
@ -33,7 +35,7 @@ const tool = () => {
      x: event.clientX, y: event.clientY
    });

-    const nodeId = getId( );
+    const nodeId = getId();
    const newNode = {
      id: nodeId,
      draggable: true,
@ -42,6 +44,23 @@ const tool = () => {
      position,
      data: { options: {} }
    };
+    if (checkNodeId.value) {
+      const parentNode = nodes.value.find(n => n.id === checkNodeId.value);
+      console.log(parentNode);
+      const parentPos = parentNode.position;
+      const parentSize = parentNode.dimensions;
+
+      // 转成父节点坐标
+      const relPosition = {
+        x: position.x - parentPos.x,
+        y: position.y - parentPos.y
+      };
+
+      newNode.parentNode = checkNodeId.value;
+      newNode.extent = 'parent';
+      newNode.position = relPosition;
+    }
+    console.log(newNode);


    const { off } = onNodesInitialized(() => {
--- a/src/views/boardGenerate/nodes/board/radarNode.vue
+++ b/src/views/boardGenerate/nodes/board/radarNode.vue
@ -1,7 +1,8 @@
 <template>
  <div
    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
-    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
+                 v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />

    <div class="custom-node"
         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
@ -58,9 +59,7 @@ const props = defineProps({
 });
 const chartRef = ref();
 let chart = null;
-const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
 const getOption = () => {
-  console.log(props.inputData?.x1);
  const chartOption = {
    title: {
      text: props.data.options.title || '',
@ -107,7 +106,7 @@ const getOption = () => {
      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
    },
    radar: {
-      center: ["30%", "50%"],
+      center: ['30%', '50%'],
      radius: '40%',
      shape: 'circle',
      splitNumber: 1,
@ -128,12 +127,12 @@ const getOption = () => {
        rotation: 90,
        rotate: 90,
        fontSize: 8,
-        color: '#ddd',
+        color: '#ddd'
      },
-      indicator:(props.inputData?.x1||[' ']).map(e=>{
+      indicator: (props.inputData?.x1 || [' ']).map(e => {
        return {
-          name:e
-        }
+          name: e
+        };
      })
      // indicator:[
      //   {name: '产品1', max: 100},
@ -154,7 +153,7 @@ const getOption = () => {
        },
        lineStyle: {
          color: '#478EEE',
-          width: 1,
+          width: 1
        },
        data: [
          {
@ -168,10 +167,10 @@ const getOption = () => {
                y: 0.5,
                r: 0.5,
                colorStops: [
-                  {offset: 0, color: '#fff0'},
-                  {offset: 1, color: '#4C92F266'}
+                  { offset: 0, color: '#fff0' },
+                  { offset: 1, color: '#4C92F266' }
                ]
-              },
+              }
            }
          }
        ]
@ -180,7 +179,6 @@ const getOption = () => {
  };
  let xData = [props.inputData?.x1 || []];
  let yData = [props.inputData?.y1 || []];
-  console.log(chartOption);
  let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
  let source = [['product', ...[props.data.options?.yNames?.[0] || ' ']]];
  Array(length).fill(0).forEach((_, i) => {
--- a/src/views/boardGenerate/tool.js
+++ b/src/views/boardGenerate/tool.js
@ -420,7 +420,7 @@ const nameEnum = {
 const tool = () => {
  const nodeType = ref('');
  const customData = ref({ script: '' });
-  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
+  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow({ id: 'flowA' });
  const onDragStart = (event, type, data) => {
    if (event.dataTransfer) {
      event.dataTransfer.setData('application/vueflow', type);