Merge branch 'main' of http://182.92.169.222:3000/dlsx/virtualSimulation

src/store/modules/setting.ts

@@ -46,7 +46,7 @@ const settingStore = defineStore("settingStore", {
       }
     },
     calculateTemperature() {
-      this.qw >= 0 ? this.qw=1 : this.qw;
+      this.qw <= 0 ? this.qw=1 : this.qw;
       const a = (100000 * this.zl * this.srmj) / this.jrgl;
       let time = 0;
       let currentTemp = this.qw;

src/store/modules/user.ts

@@ -0,0 +1,14 @@
+import { defineStore } from "pinia";
+import { getToken } from "@/utils/auth";
+const userStore = defineStore("userStore", {
+  state: () => ({
+    token: getToken(),
+    userInfo: {},
+  }),
+  actions: {
+   async logIn(){
+        
+    }
+  },
+});
+export default userStore;

src/utils/setToken.ts

@@ -0,0 +1,11 @@
+const TOKEN_KEY:string = "token";
+const setToken = (token: string): void => {
+  localStorage.setItem(TOKEN_KEY, token);
+};
+const getToken = () => localStorage.getItem(TOKEN_KEY) || "";
+const removeToken = () => localStorage.removeItem(TOKEN_KEY);
+export default {
+  setToken,
+  getToken,
+  removeToken,
+};

src/views/designRoute/index.vue

@@ -35,7 +35,7 @@
 
 <script setup>
 import { Graph, Shape } from "@antv/x6";
-import { onMounted,ref } from "vue";
+import { onMounted, ref } from "vue";
 import { History } from "@antv/x6-plugin-history";
 import wenduZK from "./components/wenduZK.vue";
 import shiduZK from "./components/shiduZK.vue";
@@ -68,7 +68,7 @@ import wenduValueSetting from "./components/wenduValueSetting.vue";
 import shiduValueSetting from "./components/shiduValueSetting.vue";
 import setzijie from "./components/setzijie.vue";
 import { ElMessage } from "element-plus";
-import tipView from  '@/assets/images/guanxitu.png';
+import tipView from "@/assets/images/guanxitu.png";
 let graph = null;
 
 // 定义通用的端口配置，避免重复
@@ -164,9 +164,13 @@ onMounted(() => {
           zIndex: 0,
         });
       },
-      validateConnection({ targetMagnet }) {
+      validateConnection({ sourceCell, targetCell }) {
-        return !!targetMagnet; // 验证连接点是否有效
+            // 禁止连接到自身
-      },
+            if (sourceCell && targetCell && sourceCell.id === targetCell.id) {
+                return false;
+            }
+            return true;
+        }
     },
     highlighting: {
       magnetAdsorbed: {
@@ -274,6 +278,7 @@ onMounted(() => {
   // 添加温度参数控件节点
   graph.addNode({
     shape: "custom-vue-node-wenduValueSetting",
+    id: "1",
     width: 40,
     height: 40,
     x: 30,
@@ -287,6 +292,7 @@ onMounted(() => {
   // 添加湿度参数控件节点
   graph.addNode({
     shape: "custom-vue-node-shiduValueSetting",
+    id: "2",
     width: 40,
     height: 40,
     x: 30,
@@ -300,6 +306,7 @@ onMounted(() => {
   // 添加温度设置控件节点
   graph.addNode({
     shape: "custom-vue-node",
+    id: "3",
     width: 120,
     height: 100,
     x: 120,
@@ -319,6 +326,7 @@ onMounted(() => {
   // 添加代码控件1节点
   graph.addNode({
     shape: "custom-vue-node-wenBenYu",
+    id:'32',
     width: 210,
     height: 300,
     x: 320,
@@ -339,6 +347,7 @@ onMounted(() => {
   // 添加湿度设置控件节点
   graph.addNode({
     shape: "custom-vue-node-sd",
+    id: "4",
     width: 110,
     height: 84,
     x: 120,
@@ -357,6 +366,7 @@ onMounted(() => {
   // 添加代码控件2节点
   graph.addNode({
     shape: "custom-vue-node-wenBenYu2",
+    id:'33',
     width: 210,
     height: 300,
     x: 400,
@@ -375,6 +385,7 @@ onMounted(() => {
   // 注册I组件
   graph.addNode({
     shape: "custom-vue-node-I",
+    id: "5",
     width: 40,
     height: 40,
     x: 50,
@@ -390,6 +401,7 @@ onMounted(() => {
   // 注册number10组件1
   graph.addNode({
     shape: "custom-vue-node-number10",
+    id: "6",
     width: 40,
     height: 40,
     x: 150,
@@ -402,6 +414,7 @@ onMounted(() => {
   // 注册number10组件2
   graph.addNode({
     shape: "custom-vue-node-number10",
+    id: "7",
     width: 40,
     height: 40,
     x: 150,
@@ -414,6 +427,7 @@ onMounted(() => {
   // 注册三角组件1
   graph.addNode({
     shape: "custom-vue-node-sanjiao",
+    id: "8",
     width: 40,
     height: 40,
     x: 230,
@@ -430,6 +444,7 @@ onMounted(() => {
   // 注册三角组件2
   graph.addNode({
     shape: "custom-vue-node-sanjiao",
+    id: "9",
     width: 40,
     height: 40,
     x: 230,
@@ -446,6 +461,7 @@ onMounted(() => {
   // 湿度数值组件
   graph.addNode({
     shape: "custom-vue-node-shiduNumber",
+    id: "10",
     width: 40,
     height: 40,
     x: 630,
@@ -459,6 +475,7 @@ onMounted(() => {
   // 温度数值组件
   graph.addNode({
     shape: "custom-vue-node-wenduNumber",
+    id: "11",
     width: 40,
     height: 40,
     x: 600,
@@ -471,6 +488,7 @@ onMounted(() => {
   // 温度计组件
   graph.addNode({
     shape: "custom-vue-node-Wenduji",
+    id: "12",
     width: 40,
     height: 40,
     x: 620,
@@ -484,6 +502,7 @@ onMounted(() => {
   // 转换器组件
   graph.addNode({
     shape: "custom-vue-node-zhuanhuanqi",
+    id: "13",
     width: 40,
     height: 40,
     x: 670,
@@ -500,6 +519,7 @@ onMounted(() => {
   // 数字2组件
   graph.addNode({
     shape: "custom-vue-node-number2",
+    id: "14",
     width: 20,
     height: 30,
     x: 600,
@@ -512,6 +532,7 @@ onMounted(() => {
   // 温度组件
   graph.addNode({
     shape: "custom-vue-node-wendu",
+    id: "15",
     width: 60,
     height: 20,
     x: 750,
@@ -524,6 +545,7 @@ onMounted(() => {
   // 转换器组件2
   graph.addNode({
     shape: "custom-vue-node-zhuanhuanqi",
+    id: "16",
     width: 40,
     height: 40,
     x: 700,
@@ -540,6 +562,7 @@ onMounted(() => {
   // 数字2组件2
   graph.addNode({
     shape: "custom-vue-node-number2",
+    id: "17",
     width: 20,
     height: 30,
     x: 650,
@@ -552,6 +575,7 @@ onMounted(() => {
   // 温度仪表
   graph.addNode({
     shape: "custom-vue-node-wenduYibiao",
+    id: "18",
     width: 40,
     height: 40,
     x: 759,
@@ -564,6 +588,7 @@ onMounted(() => {
   // RH组件
   graph.addNode({
     shape: "custom-vue-node-RH",
+    id: "19",
     width: 50,
     height: 20,
     x: 800,
@@ -576,6 +601,7 @@ onMounted(() => {
   // 电池组组件
   graph.addNode({
     shape: "custom-vue-node-dianchizu",
+    id: "20",
     width: 40,
     height: 70,
     x: 880,
@@ -596,6 +622,7 @@ onMounted(() => {
   // 湿度组件
   graph.addNode({
     shape: "custom-vue-node-shidu",
+    id: "21",
     width: 60,
     height: 20,
     x: 750,
@@ -608,6 +635,7 @@ onMounted(() => {
   // 摄氏度组件
   graph.addNode({
     shape: "custom-vue-node-du",
+    id: "22",
     width: 25,
     height: 20,
     x: 759,
@@ -620,6 +648,7 @@ onMounted(() => {
   // 布尔组件
   graph.addNode({
     shape: "custom-vue-node-booleanCopm",
+    id: "23",
     width: 40,
     height: 40,
     x: 1300,
@@ -632,6 +661,7 @@ onMounted(() => {
   // 开关组件
   graph.addNode({
     shape: "custom-vue-node-swatchComp",
+    id: "24",
     width: 20,
     height: 20,
     x: 1350,
@@ -644,6 +674,7 @@ onMounted(() => {
   // 服务器IP组件
   graph.addNode({
     shape: "custom-vue-node-fuwiqiIP",
+    id: "25",
     width: 40,
     height: 40,
     x: 950,
@@ -656,6 +687,7 @@ onMounted(() => {
   // 服务器端口组件
   graph.addNode({
     shape: "custom-vue-node-fuwuqiProt",
+    id: "26",
     width: 40,
     height: 40,
     x: 950,
@@ -668,6 +700,7 @@ onMounted(() => {
   // 打开TCP组件
   graph.addNode({
     shape: "custom-vue-node-openTCP",
+    id: "27",
     width: 40,
     height: 40,
     x: 1050,
@@ -685,6 +718,7 @@ onMounted(() => {
   // 写入TCP数据
   graph.addNode({
     shape: "custom-vue-node-setTCP",
+    id: "28",
     width: 40,
     height: 40,
     x: 1150,
@@ -704,6 +738,7 @@ onMounted(() => {
   // TCP组件
   graph.addNode({
     shape: "custom-vue-node-setzijie",
+    id: "29",
     width: 40,
     height: 40,
     x: 1300,
@@ -716,6 +751,7 @@ onMounted(() => {
   // TCP组件
   graph.addNode({
     shape: "custom-vue-node-TCP",
+    id: "30",
     width: 40,
     height: 40,
     x: 1250,
@@ -732,6 +768,7 @@ onMounted(() => {
   // 错误输出
   graph.addNode({
     shape: "custom-vue-node-errorComp",
+    id: "31",
     width: 40,
     height: 40,
     x: 1400,
@@ -756,6 +793,28 @@ onMounted(() => {
     graph.canRedo();
     graph.canUndo();
   });
+  graph.on("edge:connected", ({ edge }) => {
+    const data = {
+        type: "add",
+        edge: edge.toJSON(), // toJSON 会自动包含正确的 port 数据
+    };
+    saveToLocalStorage(data);
+})
+
+  // 记录删除连线
+  graph.on("edge:removed", ({ edge }) => {
+    const data = {
+      type: "remove",
+      id: edge.id,
+    };
+    saveToLocalStorage(data);
+  });
+  setTimeout(() => {
+    restoreGraph()
+  }, 1000);
+  graph.on('edge:added', ({ edge }) => {
+    console.log('新增连线数据:', edge.toJSON());
+})
   // const nodes = graph.getNodes();
   // console.log(nodes);
   //   const data = graph.toJSON();
@@ -772,7 +831,8 @@ const onRedo = () => {
   graph.redo();
 };
 const onSave = () => {
-  if(standardData.length !== formatEdges().length) return ElMessage.error("请完善数据");
+  if (standardData.length !== formatEdges().length)
+    return ElMessage.error("请完善数据");
   validateRelationships(standardData, formatEdges());
   ElMessage.success("保存成功");
   // const data = graph.toJSON();
@@ -999,9 +1059,11 @@ function validateRelationships(correctAnswers, userRelationships) {
   for (const relation of userRelationships) {
     const key = `${relation.source}-${relation.target}`;
     if (!correctSet.has(key)) {
-     console.log( graph.getEdges(relation.id));
+      console.log(graph.getEdges(relation.id));
-     graph.getEdges(relation.id)[0].color = "red";
+      graph.getEdges(relation.id)[0].color = "red";
-     ElMessage.error(`错误的关系: source=${relation.source}, target=${relation.target}`);
+      ElMessage.error(
+        `错误的关系: source=${relation.source}, target=${relation.target}`
+      );
       throw new Error(
         `错误的关系: source=${relation.source}, target=${relation.target}`
       );
@@ -1010,12 +1072,47 @@ function validateRelationships(correctAnswers, userRelationships) {
 
   return true; // 关系校验通过
 }
-const falg = (false);
+const falg = false;
 const preview = ref(null);
 const onTip = () => {
-  preview.value.$el.children[0].click()
+  preview.value.$el.children[0].click();
   console.log(preview.value);
-  
+};
+function restoreGraph() {
+  const operations = loadFromLocalStorage();
+
+    // 先恢复节点
+    operations
+        .filter(op => op.type === 'add' && op.node)
+        .forEach(op => graph.addNode(op.node));
+
+    // 再恢复连线
+    operations
+        .filter(op => op.type === 'add' && op.edge)
+        .forEach(op => {
+            const edgeData = op.edge;
+
+            // 若发现 port 数据缺失，补上默认 port ID
+            if (!edgeData.source.port) edgeData.source.port = "70";
+            if (!edgeData.target.port) edgeData.target.port = "70";
+
+            graph.addEdge(edgeData);
+        });
+}
+const SESSION_KEY = 'graph_operations1';
+
+function saveToLocalStorage(data) {
+    const operations = JSON.parse(localStorage.getItem(SESSION_KEY)) || [];
+    operations.push(data);
+    localStorage.setItem(SESSION_KEY, JSON.stringify(operations));
+}
+
+function loadFromLocalStorage() {
+    return JSON.parse(localStorage.getItem(SESSION_KEY)) || [];
+}
+
+function clearLocalStorage() {
+    localStorage.removeItem(SESSION_KEY);
 }
 </script>
 
@@ -1031,7 +1128,5 @@ const onTip = () => {
   height: 753px !important;
 }
 .tip-view {
-
-
 }
 </style>

src/views/program/index.vue

@@ -42,7 +42,24 @@
   <div class="setting">
     <el-button @click="onUndo">撤回</el-button>
     <el-button @click="onRedo">恢复</el-button>
+    <el-button @click="clearLocalStorage">清除缓存</el-button>
     <el-button @click="onSave">运行</el-button>
+    <el-button @click="onTip">提示</el-button>
+  </div>
+  <div class="tip-view">
+    <el-image
+      style="width: 0; height: 0"
+      :src="tipView"
+      :zoom-rate="1.2"
+      :max-scale="7"
+      :min-scale="0.2"
+      :preview-src-list="[tipView]"
+      show-progress
+      :initial-index="4"
+      fit="cover"
+      ref="preview"
+    />
+    <!-- <img src="../../assets/images/guanxitu.png" alt=""> -->
   </div>
 </template>
 
@@ -62,6 +79,8 @@ import { register, getTeleport } from "@antv/x6-vue-shape";
 import settingStore from "@/store/modules/setting";
 import Yibiao from "./components/yibiao.vue";
 import { ElMessage } from "element-plus";
+import tipView from "@/assets/images/chengxv.png";
+
 const useSettingStore = settingStore();
 // console.log(useSettingStore.qw);
 
@@ -71,6 +90,7 @@ const falg = ref(false);
 let graph: any = null;
 const nodeName = ref("");
 const csedNode = ref(null);
+const operations = [];
 onMounted(() => {
   preWork();
 
@@ -199,11 +219,23 @@ onMounted(() => {
     //   },
     // ]);
   });
-  graph.on("node:mouseenter", ({ cell }: any) => {
+
-    // console.log(cell);
+  graph.on("node:added", ({ node }) => {
-    if (cell.shape === "deom") return;
+    const data = {
-    if (cell.label.includes(":")) return;
+      type: "add",
-    cell.label = cell.label + ":";
+      node: node.toJSON(),
+    };
+    operations.push(data);
+    saveToLocalStorage(data);
+  });
+
+  graph.on("node:removed", ({ node }) => {
+    const data = {
+      type: "remove",
+      id: node.id,
+    };
+    operations.push(data);
+    saveToLocalStorage(data);
   });
   // #region 初始化 stencil
   const stencil = new Stencil({
@@ -369,8 +401,8 @@ onMounted(() => {
     shape: "yibiao",
     width: 350,
     height: 300,
-    x: 1100,
+    x: 1050,
-    y: 300,
+    y: 350,
   });
   // #endregion
 
@@ -990,6 +1022,8 @@ onMounted(() => {
     ],
     "group1"
   );
+  restoreGraph();
+  // clearLocalStorage()
 });
 // 控制抽屉显示
 const drawerVisible = ref(false);
@@ -1008,13 +1042,14 @@ const saveNodeData = () => {
   // console.log(nodeName.value);
 
   if (node) {
-    node.setAttrs({
+    //     node.setAttrs({
-      label: selectedNodeData.value.label,
+
-      // body: {
+    // text: selectedNodeData.value.label,
-      //   width: selectedNodeData.value.width,
+    //       // body: {
-      //   height: selectedNodeData.value.height,
+    //       //   width: selectedNodeData.value.width,
-      // },
+    //       //   height: selectedNodeData.value.height,
-    });
+    //       // },
+    //     });
     node.label = selectedNodeData.value.label;
   }
   drawerVisible.value = false;
@@ -1105,8 +1140,42 @@ const onRedo = () => {
 };
 const sdsz = ref(null);
 const onSave = () => {
-  console.log(graph.getNodes());
+  // console.log(graph.toJSON());
+  graph.toJSON().cells.forEach((item: any) => {
+    console.log(item);
+    
+    switch (item.shape) {
+      case "custom-text":
+        useSettingStore.setValue(parseInt(item.attrs.text.text),item.name, );
+        break;
+      case "custom-text-zl":
+        useSettingStore.setValue(parseInt(item.attrs.text.text),item.name, );
+        break;
+      case "custom-text-srmj":
+        useSettingStore.setValue(parseInt(item.attrs.text.text),item.name, );
+        break;
+      case "custom-text-jrgl":
+        useSettingStore.setValue(parseInt(item.attrs.text.text),item.name, );
+        break;
+      case "custom-text-prot":
+        useSettingStore.setValue(parseInt(item.attrs.text.text),item.name, );
+        break;
+      case "custom-text-cssd":
+        useSettingStore.setValue(parseInt(item.attrs.text.text),item.name, );
+        break;
+    }
+  });
+  // return;
+  clearLocalStorage();
+  const data = graph.toJSON().cells.map((item: any) => {
+    return {
+      node: item,
+      type: "add",
+    };
+  });
+  console.log(data);
 
+  localStorage.setItem(SESSION_KEY, JSON.stringify(data));
   if (
     !hasExactNames(graph.getNodes(), [
       "custom-text",
@@ -1165,6 +1234,39 @@ watch(
     }
   }
 );
+const SESSION_KEY = "graph_operations";
+
+function saveToLocalStorage(data) {
+  const operations = JSON.parse(localStorage.getItem(SESSION_KEY)) || [];
+  operations.push(data);
+  localStorage.setItem(SESSION_KEY, JSON.stringify(operations));
+}
+
+function loadFromLocalStorage() {
+  return JSON.parse(localStorage.getItem(SESSION_KEY)) || [];
+}
+
+function clearLocalStorage() {
+  localStorage.removeItem(SESSION_KEY);
+}
+// 恢复画布状态
+function restoreGraph() {
+  const operations = loadFromLocalStorage();
+
+  operations.forEach((op) => {
+    if (op.type === "add") {
+      graph.addNode(op.node);
+    } else if (op.type === "remove") {
+      const node = graph.getCellById(op.id);
+      if (node) graph.removeCell(node);
+    }
+  });
+}
+const preview = ref();
+const onTip = () => {
+  preview.value.$el.children[0].click();
+  console.log(preview.value);
+};
 </script>
 
 <style scoped>