603组件连线拖拽

src/components/layout/header.vue

@@ -24,8 +24,9 @@ import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
     width: 100%;
     height: 32px;
     background-color:#075679 ;
-      overflow: hidden;
+    overflow: hidden;
     padding: 0 10px;
+    text-align: left;
  
     .ve_logo_img {
         height: 100%;

src/store/project.js

@@ -4,18 +4,27 @@ import { ref } from 'vue'
 export const useProjectStore = defineStore('project', () => {
   const pid = ref('');
 
+  const projectInfo = ref(null);
+  // 项目信息
+  const setProjectInfo = (info) => {
+    projectInfo.value = info;
+  }
+
   const setpid = (val) => {
     pid.value = val
   }
 
-  const clearpid = () => {
+  const clearproject = () => {
     pid.value = ''
+    projectInfo.value = null; // 清除项目信息
   }
   
   return {
     pid,
     setpid,
-    clearpid,
+    clearproject,
+    projectInfo,
+    setProjectInfo,
   }
 },{
   persist: true, // 启用持久化

src/utils/request.ts

@@ -184,9 +184,11 @@ const getCode = (channelNo = 'service') => {
 }
 
 // 获取图片Url
-const getImage = (id, channelNo = 'server') => {
-  let token = store.getters.token || getToken();
-  return process.env.VUE_APP_BASE_API + getUrl(channelNo) + "?transCode=B00022&clientToken=" + token + "&id=" + id;
+const getImage = (id, channelNo = 'service') => {
+  if (!id) return '';
+  let token =  getToken() || store.token;
+  let userId = getUserId();
+  return import.meta.env.VITE_BASE_URL + getUrl(channelNo) + "?transCode=B00022&clientToken=" + token + "&userId=" + userId + "&id=" + id;
 }
 
 //加密密码

src/views/model/index.vue

@@ -30,15 +30,17 @@
                   v-for="com in item.coms"
                   :key="com.comId"
                   class="com-item"
+                  @dragstart="onDragStart($event, 'default',com)" 
+                  :draggable="true"
                 >
                   <img
                     
-                    :src="getImgPath('temp.png')"
+                    :src="getImage(com.image) || getImgPath('temp.png')"
                     alt="component image"
                     class="com-image"
                   />
-                <div class="com-name">{{ com.name }}</div>
-              </div>
+                  <div class="com-name">{{ com.name }}</div>
+                </div>
               </div>
               </el-collapse-item>
             </el-collapse>
@@ -76,16 +78,19 @@
 <script setup>
 import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
-import { request } from "@/utils/request";
+import { request, getImage } from "@/utils/request";
 import { ElMessage} from 'element-plus'
 import { useProjectStore } from '@/store/project'
 import { useI18n } from 'vue-i18n'
 import vueflow from "./vueflow/index.vue"
+import useDragAndDrop from './vueflow/useDnD'
 
 const { t, locale } = useI18n()
 
 const projectStore = useProjectStore()
 
+const { onDragStart,onDragLeave,treeobj,onDrop} = useDragAndDrop()
+
 const getImgPath = (url) => {
   return new URL(`../../assets/img/${url}`, import.meta.url).href
 }

src/views/model/vueflow/defaultnode.vue

@@ -20,10 +20,10 @@ onMounted(() => {
   <!-- <div v-if="props.node.data.label!='模块化'"> -->
   <div v-if="props.node.data!=null">
     <div class="custom-node icons  " :id="`node-${node.id}`"  >
-    <img :src="props.node.data.image"/>
-    <span>{{props.node.data.label }}</span>
-  </div>
-  <Handle type="source" id="target-a" :position="Position.Right"  />
+      <img :src="props.node.data.image"/>
+      <span>{{props.node.data.uid }}</span>
+    </div>
+  <Handle id="target-a" type="source" :position="Position.Right"  />
   <Handle id="target-c" type="source" :position="Position.Top"  /> 
   <Handle id="target-b" type="source" :position="Position.Left" /> 
   <Handle id="target-d" type="source" :position="Position.Bottom"  /> 
@@ -48,6 +48,7 @@ onMounted(() => {
   width: 60px;
   height: 58px;
   pointer-events: auto;
+  border: none;
 }
 
 .vue-flow__node-default:not(.selected) {
@@ -59,7 +60,7 @@ onMounted(() => {
 }
 
 .vue-flow__node-default.selected, .vue-flow__node-default.selected:hover, .vue-flow__node-input.selected, .vue-flow__node-input.selected:hover, .vue-flow__node-output.selected, .vue-flow__node-output.selected:hover{
-  box-shadow:none;
+  box-shadow:none !important;
 }
 .vue-flow__node {
           stroke: none; /* 移除节点边框 */

src/views/model/vueflow/index.vue

@@ -1,7 +1,7 @@
 <template>
   <VueFlow ref="vueFlowRef" v-model:nodes="nodes" v-model:edges="edges"  :class="{ dark }"
     class="basic-flow" 
-    :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="2.5" @drop="onDrop"
+    :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="2.5" @drop="customOnDrop"
     @node-contextmenu="onNodeContextMenu" 
     @dragover="onDragOver" @dragleave="onDragLeave" @edge-click="onEdgeClick" @node-double-click="onNodeDoubleClick" 
     @node-click="onNodeClick" @edge-double-click="onEdgeDoubleClick">
@@ -11,6 +11,10 @@
       <defaultnode :node="props" />
     </template>
 
+    <template  #node-point-only="props">
+      <PointOnlyNode :node="props" />
+    </template>
+
     <Background pattern-color="#aaa" :gap="16" 
     />
 
@@ -60,6 +64,7 @@ import { Background } from '@vue-flow/background'
 import { ControlButton, Controls } from '@vue-flow/controls'
 import "./main.css";//重置样式
 import defaultnode from './defaultnode.vue'
+import PointOnlyNode from './pointonlynode.vue'
 import useDragAndDrop from './useDnD';
 import changebak from './changebak.vue'
 import { useProjectStore } from '@/store/project'
@@ -75,6 +80,7 @@ let iconcolor=ref('#000')
 
 const edges = ref([]);
 const nodes = ref([]);
+let mergedObj = ref('');
 
 // 选中节点
 let noid = ref([]);
@@ -82,6 +88,8 @@ let Edgeid = ref();
 let seledge=ref(null);
 // 连线颜色
 let linecolor=ref('#2267B1')
+// 线宽
+let linewidth=ref(1);
 
 
 const projectStore = useProjectStore()
@@ -104,7 +112,24 @@ const toggleDarkMode = () => {
 }
 
 const saveproject = () => {
-
+  let obj = { nodes: toObject().nodes,edges:toObject().edges };
+  mergedObj.value=JSON.stringify(obj);
+
+  const params = {
+    transCode: 'ES0002',
+    pid: pid.value,
+    flow: mergedObj.value,
+    name: projectStore.projectInfo.name || '',
+    remark: projectStore.projectInfo.remark || '',
+    keywords: projectStore.projectInfo.keywords || '',
+  };
+  request(params)
+    .then((res) => {
+      
+    })
+    .catch((error) => {
+      console.error('保存失败:', error);
+    });
 }
 
 const removeNode = () => {
@@ -119,28 +144,226 @@ const confirmDelete = () => {
 
 }
 
-const onNodeContextMenu = ( event,node) => {
-  console.log('右键点击', event, node);
+
+const customOnDrop = (event) => {
+  console.log('自定义拖放事件', event);
+  onDrop(event);
+  saveproject();
 }
 
-const onEdgeClick = (event,edge) => {
-  console.log('边数据:', edge.data);
+
+
+
+const onNodeContextMenu = ( event) => {
+  console.log('右键点击', event);
 }
 
-const onNodeClick = (event, node) => {
-  console.log('节点被单击:', node);
-  // node 是被双击的节点对象，包含 id、position、data 等信息
+const onEdgeClick = (event) => {
+  console.log('边数据:', event);
+}
+
+const onNodeClick = (event) => {
+  console.log('节点被单击:', event);
+  noid.value = event.node;
 };
 
-const onNodeDoubleClick = (event, node) => {
-  console.log('节点被双击:', node);
-  // node 是被双击的节点对象，包含 id、position、data 等信息
+const onNodeDoubleClick = (event) => {
+  console.log('节点被双击:', event);
 };
 
-const onEdgeDoubleClick = (event, edge) => {
-  console.log("连线双击:",edge.data)
+const onEdgeDoubleClick = (event) => {
+  console.log("连线双击:", event);
+  noid.value = event.node;
 }
 
+// 线的类型 default
+let lineType = ref('default');
+
+// 线序号
+let linecount = ref(0);
+
+onConnect(async (connection) => {
+  console.log('线连接', connection);
+
+  if (connection.source === connection.target) {
+    console.warn('禁止节点自连');
+    return;
+  }
+
+  const sourceNode = vueFlowRef.value.getNode(connection.source);
+  const targetNode = vueFlowRef.value.getNode(connection.target);
+
+  // 是否需要中间节点
+  const isCom3 = sourceNode.data.comID === '3' || targetNode.data.comID === '3';
+
+  if (isCom3) {
+    //（comID == 3）
+    const edgeId = `${lineType.value}-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}`;
+    connection.id = edgeId;
+    connection.type = 'smoothstep';
+    connection.color = linecolor.value;
+    connection.style = { strokeWidth: linewidth.value, stroke: linecolor.value };
+    // connection.markerEnd = lineType.value === 'data'
+    //   ? { type: MarkerType.ArrowClosed, width: 6, height: 6, color: linecolor.value }
+    //   : MarkerType.ArrowClosed;
+
+    const sameEdge = edges.value.find(edge => edge.id === edgeId);
+    if (sameEdge) {
+      deleteflow(sameEdge.data?.wid);
+    }
+
+    addEdges(connection);
+    seledge.value = null;
+    linecount.value++;
+    const newName = `Seg${linecount.value}`;
+
+    const pcId1 = sourceNode.data.comID === '3' ? targetNode.data.pcId : sourceNode.data.pcId;
+    const npcId = sourceNode.data.comID === '3' ? sourceNode.data.pcId : targetNode.data.pcId;
+
+    try {
+      const { pccId1 } = await createEdge(pid.value, 0, npcId, pcId1);
+      updateEdgeData(connection.id, {
+        pcid: pccId1,
+        uid: newName,
+        type: lineType.value,
+        frompcId: sourceNode.data.pcId,
+        topcId: targetNode.data.pcId,
+      });
+    } catch (error) {
+      console.error('保存流程失败:', error);
+    }
+  } else {
+    // 添加 point-only 中间节点
+    const pointNodeId = `point-${connection.source}-${connection.target}}`;
+    const sourceCenterX = sourceNode.position.x + (60) / 2;
+    const sourceCenterY = sourceNode.position.y + (58) / 2;
+    const targetCenterX = targetNode.position.x + (60) / 2;
+    const targetCenterY = targetNode.position.y + (58) / 2;
+
+    const midX = (sourceCenterX + targetCenterX) / 2;
+    const midY = (sourceCenterY + targetCenterY) / 2;
+
+    nodes.value.push({
+      id: pointNodeId,
+      type: 'point-only',
+      position: { x: midX, y: midY },
+      data: {
+        comId:'3',
+        label: '节点'
+       },
+    });
+
+    try {
+      // 创建 comID 为 3 的中间组件
+      const npcId = await createCom3(pid.value);
+
+      // edge1: source -> pointNode
+      const edgeId1 = `${lineType.value}-${connection.source}-${connection.sourceHandle}-${pointNodeId}`;
+      const edge1 = {
+        id: edgeId1,
+        source: connection.source,
+        sourceHandle: connection.sourceHandle,
+        target: pointNodeId,
+        targetHandle: 'source-left',
+        type: 'smoothstep',
+        color: linecolor.value,
+        style: { strokeWidth: linewidth.value, stroke: linecolor.value }
+      };
+
+      // edge2: pointNode -> target
+      const edgeId2 = `${lineType.value}-${pointNodeId}-${connection.targetHandle}-${connection.target}`;
+      const edge2 = {
+        id: edgeId2,
+        source: pointNodeId,
+        sourceHandle: 'source-right', // 从中间点的右边出发
+        target: connection.target,
+        targetHandle: connection.targetHandle,
+        type: 'smoothstep',
+        color: linecolor.value,
+        style: { strokeWidth: linewidth.value, stroke: linecolor.value }
+      };
+
+      addEdges([edge1, edge2]);
+      linecount.value++;
+      const newName = `Seg${linecount.value}`;
+
+      // 保存后端 edge 数据（分别对应两条边）
+      const { pccId1, pccId2 } = await createEdge(pid.value, 0, npcId, sourceNode.data.pcId, targetNode.data.pcId);
+
+      updateEdgeData(edgeId1, {
+        pcid: pccId1,
+        uid: newName,
+        type: lineType.value,
+        frompcId: sourceNode.data.pcId,
+        topcId: npcId
+      });
+
+      updateEdgeData(edgeId2, {
+        pcid: pccId2,
+        uid: newName,
+        type: lineType.value,
+        frompcId: npcId,
+        topcId: targetNode.data.pcId
+      });
+
+    } catch (err) {
+      console.error('中间点处理失败:', err);
+    }
+  }
+});
+
+const createEdge = async (pid, type, npcId, pcId1, pcId2) => {
+  const params = {
+    transCode: 'ES0006',
+    pid: pid || '',
+    type: type || 0,
+    npcId: npcId || '',
+    pcId1: pcId1 || '',
+    pcId2: pcId2 || '',
+  };
+
+  try {
+    const res = await request(params);
+    return {
+      pccId1: res.pccId1,
+      pccId2: res.pccId2
+    }; // 返回包含 pccId1 和 pccId2 的对象
+  } catch (err) {
+    // 处理错误
+    ElMessage.error(err.returnMsg || '保存流程失败');
+    throw err; // 可以选择重新抛出错误以便调用者处理
+  }
+};
+
+// 创建特殊节点
+const createCom3 = async (pid) => {
+  const params = {
+    transCode: "ES0004",
+    pid: pid || "",
+    comId:"3", // 节点ID
+  }
+
+  try {
+    const res = await request(params)
+    return res.pcId // 返回新创建的组件在项目中的ID
+  } catch (err) {
+    ElMessage.error(err.returnMsg)
+  }
+}
+
+
+const flowInit=()=>{
+  let nodesflow=JSON.parse(projectStore.projectInfo.flow)
+  nodes.value=nodesflow.nodes;
+  edges.value=nodesflow.edges;
+}
+
+const onMounted = () => {
+  setTimeout(function() {
+    flowInit();
+  }, 1500);
+
+};
 
 
 </script>

src/views/model/vueflow/pointonlynode.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { Handle, Position } from '@vue-flow/core'
+
+const props = defineProps({
+  node: Object
+})
+</script>
+
+<template>
+  <div class="point-only-node" :id="`node-${props.node.id}`">
+    <!-- 连接点 -->
+    <Handle id="source-top" type="source" :position="Position.Top" :style="{ top: '2px' }"/>
+    <Handle id="source-right" type="source" :position="Position.Right" :style="{ right: '2px' }"/>
+    <Handle id="source-bottom" type="source" :position="Position.Bottom" :style="{ bottom: '2px' }"/>
+    <Handle id="source-left" type="source" :position="Position.Left" :style="{ left: '2px' }"/>
+  </div>
+</template>
+
+<style scoped>
+.point-only-node {
+  width: 5px;
+  height: 5px;
+  background-color: #555;
+  border-radius: 50%;
+  position: relative;
+}
+
+.vue-flow__handle {
+  width: 2px;
+  height: 2px;
+  background-color: #555;
+  border-radius: 50%;
+  border: none;
+}
+
+</style>

src/views/model/vueflow/useDnD.js

@@ -1,110 +1,36 @@
 // import { useVueFlow,Position,MarkerType } from '@vue-flow/core';
-import { useVueFlow,Position,MarkerType} from '@vue-flow/core';
-import { ref, watch } from 'vue'
+import { useVueFlow, Position, MarkerType } from "@vue-flow/core"
+import { ref, watch } from "vue"
 import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
-import { request, uploadFile } from "@/utils/request"
+import { request, getImage } from "@/utils/request"
 import emitter from "@/utils/emitter"
-import gc1 from '@/assets/flowimg/gc1.png'
-import gc2 from '@/assets/flowimg/gc2.png'
-import gc3 from '@/assets/flowimg/gc3.png'
-import wen from '@/assets/flowimg/wen.png'
-import xuek1 from '@/assets/flowimg/xuek1.png'
-import xuek0 from '@/assets/flowimg/xuek0.png'
-import xuek2 from '@/assets/flowimg/xuek2.png'
-import xuek3 from '@/assets/flowimg/xuek3.png'
-import xuek4 from '@/assets/flowimg/xuek4.png'
-import xuek5 from '@/assets/flowimg/xuek5.png'
-import xuek6 from '@/assets/flowimg/xuek6.png'
-import xuek7 from '@/assets/flowimg/xuek7.png'
-import xuek8 from '@/assets/flowimg/xuek8.png'
-import xuek9 from '@/assets/flowimg/xuek9.png'
-import xuek10 from '@/assets/flowimg/xuek10.png'
-import xuek11 from '@/assets/flowimg/xuek11.png'
-import xuek12 from '@/assets/flowimg/xuek12.png'
-import r2 from '@/assets/flowimg/mob.png'
-import aero from '@/assets/flowimg/aero.png'
-import csh from '@/assets/flowimg/csh.png'
-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;
-let id=0
-let treeobj=ref([]);
-let datas={}
+import { useProjectStore } from "@/store/project"
+
+import tempic from "@/assets/img/temp.png"
+
+const projectStore = useProjectStore()
+let nid = 0
+// 用于计数
+let id = 0
+let treeobj = ref([])
+let datas = {}
+
+
+// 用于存储组件的临时数据
+let com = {}
+
 
 /**
  * @returns {string} - A unique id.
  */
 function getId() {
   //return `node_${id++}`
-  return `${nid}${id++}`;
+  return `${nid}${id++}`
+}
+function imagefun() {
+  console.log(nid)
+  return (datas = { comId: com.comId ,label: com.name, image: getImage(com.image) || tempic, idCode: com.idCode });
 }
-function imagefun(){
-  console.log(nid);
-  // if(nid=='1-1'){
-  //   return  datas = {label: '优化问题', image:gc1}
-  //   }else if(nid=='1-2'){
-  //     return datas = {label:'分析流程', image:gc2}
-  //   }else if(nid=='1-3'){
-  //     return datas = {label:'优化器', image:gc3}
-    // }else
-     if(nid=='2-1'){
-      return datas = {label:'优化问题', image:wen,name:'Project'}
-    }else if(nid=='3-1'){
-      return datas = {label:'CATIA', image:xuek1,name:'CATIA'}
-    }else if(nid=='3-0'){
-      return datas = {label:'CST', image:xuek0,name:'CST'}
-    }else if(nid=='3-10'){
-      return datas = {label:'FFD', image:ffd,name:'FFD'}
-    }else if(nid=='3-11'){
-      return datas = {label:'ADflow', image:ADflow,name:'ADflow'}
-    }else if(nid=='3-12'){
-      return datas = {label:'TACS', image:tacs,name:'TACS'}
-    }else if(nid=='3-13'){
-      return datas = {label:'FUN 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'){
-      return datas = {label:'Flight', image:flight,name:'Flight'}
-    }
-     else if(nid=='3-2'){
-      return datas = {label:'Excel', image:xuek2,name:'Excel'}
-    }else if(nid=='3-3'){
-      return datas = {label:'Feko', image:xuek3,name:'Feko'}
-    }else if(nid=='3-4'){
-      return datas = {label:'Fluent', image:xuek4,name:'Fluent'}
-    }else if(nid=='3-5'){
-      return datas = {label:'HCFD', image:xuek5,name:'HCFD'}
-    }else if(nid=='3-6'){
-      return datas = {label:'Matlab', image:xuek6,name:'Matlab'}
-    }else if(nid=='3-7'){
-      return datas = {label:'Nastran', image:xuek7,name:'Nastran'}
-    }else if(nid=='3-8'){
-      return datas = {label:'Python', image:xuek8,name:'Python'}
-    }else if(nid=='3-9'){
-      return datas = {label:'Xfoil', image:xuek9,name:'Xfoil'}
-    }else if(nid=='4-1'){
-      return datas = {label:'进化优化器', image:xuek10,name:'optimizer1'}
-    }else if(nid=='4-2'){
-      return datas = {label:'代理优化器', image:xuek11,name:'optimizer3'}
-    }else if(nid=='4-3'){
-      return datas = {label:'梯度优化器', image:xuek12,name:'optimizer2'}
-    }else if(nid=='3-01'){
-      return datas = {label:'优化器', image:r2,name:'optimizer'}
-    }else if(nid=='3-02'){
-      return datas = {label:'参数化', image:csh,name:'参数化'}
-    }else if(nid=='3-03'){
-      return datas = {label:'气动分析', image:aero,name:'气动分析'}
-    }
-    else{
-      return null;
-    }
-
-  }
 
 /**
  * In a real world scenario you'd want to avoid creating refs in a global scope like this as they might not be cleaned up properly.
@@ -116,33 +42,28 @@ const state = {
    */
   draggedType: ref(null),
   isDragOver: ref(false),
-  isDragging: ref(false),
+  isDragging: ref(false)
 }
 
-// 保存流
-const saveflow = async (pid, wid, uid, type, fromuid, touid) => {
+// 组件创建
+const createComponent = async (pid, comId) => {
   const params = {
-    transCode: 'MDO0058',
-    pid: pid || '',
-    wid: wid || '', // 流ID
-    uid: uid || '',
-    type: type || '',
-    fromuid: fromuid || '',
-    touid: touid || '',
-  };
+    transCode: "ES0004",
+    pid: pid || "",
+    comId: comId || "", // 组件ID
+  }
 
   try {
-    const res = await request(params);
-    if (uid.includes('MathFunc')) {
-      console.log("pid:", pid);
-      console.log("wid:", res.wid);
-      emitter.emit("getMfcid", { id: pid, nowid: res.wid });
+    const res = await request(params)
+    return {
+      pcId:res.pcId,
+      ser: res.ser,
+      idCode: res.idCode,
     }
-    return res.wid;
   } catch (err) {
-    ElMessage.error(err.returnMsg);
+    ElMessage.error(err.returnMsg)
   }
-};
+}
 
 // 用来存储每种组件名称出现次数的对象
 const nameCount = {}
@@ -150,29 +71,31 @@ const nameCount = {}
 export default function useDragAndDrop() {
   const { draggedType, isDragOver, isDragging } = state
 
-  const { addNodes, addEdges,screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()
+  const {
+    addNodes,
+    addEdges,
+    screenToFlowCoordinate,
+    onNodesInitialized,
+    updateNode
+  } = useVueFlow()
 
   watch(isDragging, (dragging) => {
-    document.body.style.userSelect = dragging ? 'none' : ''
+    document.body.style.userSelect = dragging ? "none" : ""
   })
 
-  function onDragStart(event, type,id) {
-  
- 
+  function onDragStart(event, type, data) {
     if (event.dataTransfer) {
-     
-      nid=id;
-      event.dataTransfer.setData('application/vueflow', type)
-      event.dataTransfer.effectAllowed = 'move'    
-   
+      com = data
+      nid = data.comId
+      event.dataTransfer.setData("application/vueflow", type)
+      event.dataTransfer.effectAllowed = "move"
     }
 
-    draggedType.value =type;
+    draggedType.value = type
     //draggedType.value = 'smoothstep'
     isDragging.value = true
 
-    document.addEventListener('drop', onDragEnd)
-   
+    document.addEventListener("drop", onDragEnd)
   }
 
   /**
@@ -187,15 +110,12 @@ export default function useDragAndDrop() {
       isDragOver.value = true
 
       if (event.dataTransfer) {
-        event.dataTransfer.dropEffect = 'move'
+        event.dataTransfer.dropEffect = "move"
       }
     }
   }
-  function handleNodeDrop(e){
-  
-  }
+  function handleNodeDrop(e) {}
   function onDragLeave(e) {
-  
     isDragOver.value = false
   }
 
@@ -203,8 +123,8 @@ export default function useDragAndDrop() {
     isDragging.value = false
     isDragOver.value = false
     draggedType.value = null
-    nid=''
-    document.removeEventListener('drop', onDragEnd)
+    nid = ""
+    document.removeEventListener("drop", onDragEnd)
   }
 
   /**
@@ -215,81 +135,75 @@ export default function useDragAndDrop() {
   async function onDrop(event) {
     const position = screenToFlowCoordinate({
       x: event.clientX,
-      y: event.clientY,
+      y: event.clientY
     })
 
-    const savedObj = JSON.parse(sessionStorage.getItem("objlist"));
-    // console.log('objlist',savedObj);
-    const pid = savedObj.pid;
-    const newwid = '';
+    const pid = projectStore.pid
+    console.log('Store:', projectStore)
+    const newpcId = ""
 
     const nodeId = getId()
-    const image1=imagefun();
+    const image1 = imagefun()
     // 获取当前组件的名称
-    const componentName = image1.name;
+    const componentName = image1.idCode
 
     // 如果该组件的名称已存在，给名称添加序号
     if (!nameCount[componentName]) {
-      nameCount[componentName] = 0;
+      nameCount[componentName] = 0
     }
-  
-    nameCount[componentName]++; // 增加计数
-    const newName = `${componentName}${nameCount[componentName]}`; // 新的名称加上序号
- 
-    let snodes=ref([]);
-    let sedges=ref([]);
-
-    if(nid=='4'){
-      // const nodes = ref([])
-      // const edges = ref([])
-
-    }else{
-      // 创建初始的节点数据，不包含 wid
-      // FSI为group类型
-      if(nid == '3-13'){
-        draggedType.value = 'group';
-      }
-      const newNode = {
-        id: nodeId,
-        type: draggedType.value,
-        position,
-        data: { ...image1, uid: newName },
-      };
 
-      snodes.value.push(newNode)
+    nameCount[componentName]++ // 增加计数
+    const newName = `${componentName}${nameCount[componentName]}` // 新的名称加上序号
+
+    let snodes = ref([])
+    let sedges = ref([])
 
-      // 异步保存数据并更新 wid
-      saveflow(pid, newwid, newName, 'com', '', '').then((wid) => {
-        // 更新节点数据中的 wid
-        newNode.data.wid = wid;
+    // 创建初始的节点数据，不包含 pcId
+    const newNode = {
+      id: nodeId,
+      type: draggedType.value,
+      position,
+      data: { ...image1, uid: newName }
+    }
+
+    snodes.value.push(newNode)
+
+    // 异步保存数据并更新 pcId
+    createComponent(pid, nid)
+      .then(({ pcId, ser, idCode }) => {
+        // 更新节点数据中的 pcId
+        newNode.data.pcId = pcId
 
         // 使用 onNodesInitialized 来更新节点数据
         onNodesInitialized(() => {
           // 更新节点的其他数据
           updateNode(nodeId, (node) => ({
-            ...node, 
+            ...node,
             data: {
               ...node.data,
-              wid: newNode.data.wid,  // 更新节点中的 wid
+              pcId: newNode.data.pcId, // 更新节点中的 pcId
             },
-          }));
-        });
-      }).catch((err) => {
-        console.error('保存流程失败:', err.message);
-        ElMessage.error('保存流程失败');
-      });
-    }
+          }))
+        })
+      })
+      .catch((err) => {
+        console.error("添加组件失败:", err.message)
+        ElMessage.error("添加组件失败")
+      })
+
     const { off } = onNodesInitialized(() => {
       updateNode(nodeId, (node) => ({
-        position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },
-        dimensions:{ height:  58, width: 60}
+        position: {
+          x: node.position.x - node.dimensions.width / 2,
+          y: node.position.y - node.dimensions.height / 2
+        },
+        dimensions: { height: 58, width: 60 }
       }))
 
       off()
     })
     addNodes(snodes.value)
-    treeobj.value=snodes.value
-
+    treeobj.value = snodes.value
   }
   return {
     treeobj,
@@ -300,6 +214,6 @@ export default function useDragAndDrop() {
     onDragLeave,
     onDragOver,
     onDrop,
-    handleNodeDrop,
+    handleNodeDrop
   }
 }

src/views/project/index.vue

@@ -276,8 +276,14 @@ const confirmSelected = () => {
 
   // 获取第一个选中项的pid（或根据需要处理多个选中项）
   const pid = selectedRows.value[0].pid
-  projectStore.setpid(pid.value)
-  
+  console.log('选中的项目:', selectedRows.value[0])
+  projectStore.setpid(pid)
+  projectStore.setProjectInfo({
+    name: selectedRows.value[0].name,
+    keywords: selectedRows.value[0].keywords,
+    remark: selectedRows.value[0].remark
+  })
+
   router.push({
     path: '/home',
   })