411流连线

src/views/vuetree/eltreeGroup.vue

@@ -19,22 +19,25 @@ onMounted(() => {
 <template>
   <!-- <div v-if="props.node.data.label!='模块化'"> -->
   <div v-if="props.node.data!=null" style="height: 100%;">
+    <!-- <div class="custom-node icons  " :id="`node-${node.id}`" >
+      <img v-if="props.node.data.label!='模块化'" :src="props.node.data.image"/>
+      <span>{{props.node.data.label }}</span>
+    </div> -->
     <div class="custom-node icons  " :id="`node-${node.id}`" >
-    <img v-if="props.node.data.label!='模块化'" :src="props.node.data.image"/>
-    <span>{{props.node.data.label }}</span>
-  </div>
-  <Handle  v-if="props.node.data.label!='模块化'"  type="source" id="target-a" :position="Position.Right"  />
-  <Handle id="target-c" type="source" :position="Position.Top"  /> 
-  <Handle  v-if="props.node.data.label!='模块化'"  id="target-b" type="source"  :position="Position.Left" /> 
-  <Handle id="target-d" type="source" :position="Position.Bottom"  /> 
+      <img v-if="props.node.data.label!='模块化'" :src="props.node.data.backgroud"/>
+    </div>
+    <Handle  v-if="props.node.data.label!='模块化'"  type="source" id="target-a" :position="Position.Right"  />
+    <Handle id="target-c" type="source" :position="Position.Top"  /> 
+    <Handle  v-if="props.node.data.label!='模块化'"  id="target-b" type="source"  :position="Position.Left" /> 
+    <Handle id="target-d" type="source" :position="Position.Bottom"  /> 
   </div>
 <!-- </div> -->
 </template>
 <style scoped> 
 
 .icons img{
-    width: 26px;
-
+    width: 180px;
+    height: 160px;
 }
 .icons span{
   display: block;
@@ -53,7 +56,7 @@ onMounted(() => {
 </style>
 <style>
 .vue-flow__node-group{
-  width: 160px;
+  width: 180px;
   height: 160px;
   border-radius: 3px;
   border: 1px solid #409EFF;

src/views/vuetree/index.vue

@@ -376,6 +376,8 @@ onConnect((connection) => {
   const edgeId = `${lineType.value}-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}`;
   connection.id = edgeId;  // 自定义 ID
   connection.type = 'smoothstep';//  smoothstep straight
+  connection.zIndex = lineType.value === 'process' ? 10 : 5; // 逻辑流在上，数据流在下
+  connection.interactionWidth = lineType.value === 'process' ? 5 : 20; // 降低逻辑流窄线判定范围，避免二者重叠无法判定
   if(lineType.value === 'process'){
     connection.markerEnd = MarkerType.ArrowClosed;
   }else if(lineType.value === 'data'){
@@ -1254,7 +1256,7 @@ const linestrokeWidth=(type)=>{
     linecolor.value = '#2267B1';
     lineType.value = 'process';
   }else if(type=='data'){
-    linenum.value=9;
+    linenum.value=6;
     linecolor.value = "rgba(150, 150, 150, 0.2)";
     lineType.value = 'data';
   }

src/views/vuetree/useDnD.js

@@ -27,6 +27,7 @@ import ffd from '@/assets/flowimg/ffd.png'
 import ADflow from '@/assets/flowimg/ADflow.png'
 import tacs from '@/assets/flowimg/TACS.png'
 import fsi from '@/assets/flowimg/fsi.png'
+import fsibackground from '@/assets/flowimg/fsibackg.png'
 import mathfunc from '@/assets/flowimg/MathFunc.png'
 import flight from '@/assets/flowimg/flight.png'
 let nid = 0;
@@ -63,7 +64,7 @@ function imagefun(){
     }else if(nid=='3-12'){
       return datas = {label:'TACS', image:tacs,name:'TACS'}
     }else if(nid=='3-13'){
-      return datas = {label:'FUM to FEM', image:fsi,name:'FSI'}
+      return datas = {label:'FUM to FEM', image:fsi,backgroud:fsibackground , name:'FSI'}
     }else if(nid=='3-14'){
       return datas = {label:'MathFunc', image:mathfunc,name:'MathFunc'}
     }else if(nid=='3-15'){
@@ -240,7 +241,7 @@ export default function useDragAndDrop() {
       // 创建初始的节点数据，不包含 wid
       // FSI为group类型
       if(nid == '3-13'){
-        draggedType.value = 'group'
+        draggedType.value = 'group';
       }
       const newNode = {
         id: nodeId,