修改树组件配置

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;
 

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 {

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();
+} = useVueFlow({ id: 'flowB' });
-const flowRef = ref();
+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({
+  console.log(props.level);
-    id: `item1`,
+  Array(props.level).fill(0).forEach((e, index) => {
-    type: 'itemNode',
+    addNodes({
-    draggable:false,
+      id: `root_${index}`,
-    position: {
+      type: 'itemNode',
-      x: 0,
+      draggable: false,
-      y: 200
+      position: {
-    },
+        x: index * ((300) + (50)),
-    dimensions: { 'width': 300, 'height': 200 },
+        y: 200
-    data: {}
+      },
+      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 {

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(() => {

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: 0, color: '#fff0' },
-                  {offset: 1, color: '#4C92F266'}
+                  { 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) => {

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);