修改组件图片获取存储方式

src/utils/request.ts

@@ -190,6 +190,23 @@ const getImage = (id, channelNo = 'service') => {
   return import.meta.env.VITE_BASE_URL + getUrl(channelNo) + "?transCode=B00022&clientToken=" + token + "&userId=" + userId + "&id=" + id;
 }
 
+// 获取图片Base64
+const getImageBase64 = (id, channelNo = 'service') => {
+  return new Promise((resolve, reject) => {
+    const params = {
+      transCode: "ES0027",
+      fbId: id
+    }
+    request(params)
+      .then((res) => {
+        resolve(res.base64Data);
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}
+
 //加密密码
 const enPassword = (password) => {
   let token =  getToken() || store.token;
@@ -202,5 +219,6 @@ export {
   getCode,
   getImage,
   enPassword,
-  sources
+  sources,
+  getImageBase64
 }

src/views/model/vueflow/index.vue

@@ -89,7 +89,7 @@ import {
   Close
 } from "@element-plus/icons-vue"
 
-import { request, uploadFile } from "@/utils/request"
+import { request, uploadFile, getImageBase64 } from "@/utils/request"
 import { Background } from "@vue-flow/background"
 import { ControlButton, Controls } from "@vue-flow/controls"
 import "./main.css" //重置样式
@@ -105,8 +105,10 @@ import "splitpanes/dist/splitpanes.css"
 import asideData from "./aside/asideData.vue"
 
 import node from "@/assets/img/node.png"
+import nodePoint from "@/assets/img/node.png"
 
 import { debounce } from 'lodash-es'
+import tempic from "@/assets/img/temp.png"
 
 // 获取路由实例
 const router = useRouter()
@@ -280,6 +282,15 @@ const saveproject = async () => {
       nodes: toObject().nodes,
       edges: toObject().edges
     }
+    // 移除每个节点的 image 字段，保留 imageIdentify
+    obj.nodes = obj.nodes.map(node => ({
+      ...node,
+      data: {
+        ...node.data,
+        image: undefined // 移除 image 字段
+      }
+    }))
+    
     mergedObj.value = JSON.stringify(obj)
 
     const params = {
@@ -600,7 +611,8 @@ onConnect(async (connection) => {
       data: {
         comId: "3",
         label: "节点",
-        image: node
+        image: node,
+        imageIdentify: "point-only"
       }
     })
 
@@ -720,15 +732,59 @@ const createCom3 = async (pid) => {
   }
 }
 
-const flowInit = () => {
-  let nodesflow = JSON.parse(
-    projectStore.projectInfo.flow || '{"nodes":[],"edges":[]}'
-  )
+const flowInit = async () => {
+  try {
+    const flow = JSON.parse(projectStore.projectInfo.flow || '{"nodes":[],"edges":[]}')
+    if (!flow.nodes || !flow.edges) {
+      throw new Error("无效的 flow 数据")
+    }
 
-  nodes.value = nodesflow.nodes
-  edges.value = nodesflow.edges
-}
+    const updatedNodes = await Promise.all(
+      flow.nodes.map(async (node) => {
+        if (node.data?.imageIdentify) {
+          if (node.data.imageIdentify === "point-only") {
+            // point-only 节点使用本地图片
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                image: nodePoint
+              }
+            }
+          }
+          // 普通节点调用接口获取图片
+          try {
+            const imageData = await getImageBase64(node.data.imageIdentify)
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                image: imageData || tempic
+              }
+            }
+          } catch (err) {
+            console.error(`获取图片 ${node.data.imageIdentify} 失败:`, err.message)
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                image: tempic
+              }
+            }
+          }
+        }
+        return node // 如果没有 imageIdentify，直接返回
+      })
+    )
+
+    nodes.value = updatedNodes
+    edges.value = flow.edges
 
+    console.log("加载项目成功")
+  } catch (error) {
+    console.error("加载项目失败:", error)
+  }
+}
 const cleanEdgeselect = () => {
   if (seledge.value) {
     // 恢复选中边缘的原始样式

src/views/model/vueflow/useDnD.js

@@ -2,7 +2,7 @@
 import { useVueFlow, Position, MarkerType } from "@vue-flow/core"
 import { ref, watch } from "vue"
 import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
-import { request, getImage } from "@/utils/request"
+import { request, getImage, getImageBase64 } from "@/utils/request"
 import emitter from "@/utils/emitter"
 import { useProjectStore } from "@/store/project"
 import { nextTick } from "vue"
@@ -11,6 +11,7 @@ import tempic from "@/assets/img/temp.png"
 
 const projectStore = useProjectStore()
 let nid = 0
+let imageSer = ""; // 用于存储组件image ID
 // 用于计数
 let nodecount = 0
 let treeobj = ref([])
@@ -26,12 +27,13 @@ function getId() {
   const timestamp = Date.now() // 获取当前时间的毫秒数
   return `${nid}${nodecount++}_${timestamp}`
 }
-function imagefun() {
-  console.log(nid)
+async function imagefun() {
+  const imageData = await getImageBase64(imageSer);
   return (datas = {
     comId: com.comId,
     label: com.name,
-    image: getImage(com.image) || tempic,
+    image: imageData || tempic,
+    imageIdentify: imageSer,
     idCode: com.idCode,
     pcId: "",
     idCodeser: ""
@@ -95,6 +97,8 @@ export default function useDragAndDrop() {
     if (event.dataTransfer) {
       com = data //传递组件数据
       nid = data.comId //传递组件ID
+      
+      imageSer = data.image //传递组件image ID
       event.dataTransfer.setData("application/vueflow", type)
       event.dataTransfer.effectAllowed = "move"
     }
@@ -103,7 +107,7 @@ export default function useDragAndDrop() {
     //draggedType.value = 'smoothstep'
     isDragging.value = true
 
-    document.addEventListener("drop", onDragEnd)
+    // document.addEventListener("drop", onDragEnd)
   }
 
   /**
@@ -128,11 +132,14 @@ export default function useDragAndDrop() {
   }
 
   function onDragEnd() {
+    
     isDragging.value = false
     isDragOver.value = false
     draggedType.value = null
-    nid = ""
-    document.removeEventListener("drop", onDragEnd)
+    nid = "";
+    com = {};
+    imageSer = "";
+    // document.removeEventListener("drop", onDragEnd)
   }
 
   /**
@@ -153,7 +160,8 @@ async function onDrop(event) {
 
   const pid = projectStore.pid;
   const nodeId = getId();
-  const image1 = imagefun();
+  
+  const image1 = await imagefun();
   const componentName = image1.idCode;
 
   if (!nameCount[componentName]) {
@@ -195,6 +203,7 @@ async function onDrop(event) {
 
   // 3. 异步获取 pcId 和 idCodeser，并更新节点
   try {
+    
     const { pcId, ser, idCode } = await createComponent(pid, nid);
     updateNode(nodeId, (node) => ({
       ...node,
@@ -210,6 +219,9 @@ async function onDrop(event) {
     ElMessage.error("添加组件失败");
     // 如果失败，可以考虑移除节点：
     // removeNodes([nodeId]);
+  }finally {
+    // 在 onDrop 完成后调用 onDragEnd
+    onDragEnd();
   }
 }
   return {