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

增加缓存功能
6 changed files with 252 additions and 30 deletions
--- a/src/assets/images/chengxv.png
+++ b/src/assets/images/chengxv.png
--- a/src/store/modules/setting.ts
+++ b/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;
--- a/src/store/modules/user.ts
+++ b/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;
--- a/src/utils/setToken.ts
+++ b/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,
+};
--- a/src/views/designRoute/index.vue
+++ b/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 }) {
-        return !!targetMagnet; // 验证连接点是否有效
-      },
+      validateConnection({ sourceCell, targetCell }) {
+            // 禁止连接到自身
+            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));
-     graph.getEdges(relation.id)[0].color = "red";
-     ElMessage.error(`错误的关系: source=${relation.source}, target=${relation.target}`);
+      console.log(graph.getEdges(relation.id));
+      graph.getEdges(relation.id)[0].color = "red";
+      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>
--- a/src/views/program/index.vue
+++ b/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);
-    if (cell.shape === "deom") return;
-    if (cell.label.includes(":")) return;
-    cell.label = cell.label + ":";
+
+  graph.on("node:added", ({ node }) => {
+    const data = {
+      type: "add",
+      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,
-    y: 300,
+    x: 1050,
+    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({
-      label: selectedNodeData.value.label,
-      // body: {
-      //   width: selectedNodeData.value.width,
-      //   height: selectedNodeData.value.height,
-      // },
-    });
+    //     node.setAttrs({
+
+    // text: selectedNodeData.value.label,
+    //       // body: {
+    //       //   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>
Author	SHA1	Message	Date
JayChou	18a5adc925	Merge branch 'main' of http://182.92.169.222:3000/dlsx/virtualSimulation	3 weeks ago
JayChou	555e2c1c5b	增加缓存功能	3 weeks ago