virtualSimulation/src/views/designRoute/index.vue

<template>
  <div
    style="
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
    "
  >
    <div id="container"></div>
    <div class="setting">
      <el-button @click="onUndo">撤回</el-button>
      <el-button @click="onRedo">恢复</el-button>
      <el-button @click="onSave">保存</el-button>
      <el-button @click="onTip">提示</el-button>
    </div>
  </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>

<script setup>
import { Graph, Shape } from "@antv/x6";
import { onMounted, ref } from "vue";
import { History } from "@antv/x6-plugin-history";
import wenduZK from "./components/wenduZK.vue";
import shiduZK from "./components/shiduZK.vue";
import { register } from "@antv/x6-vue-shape";
import wenBenYu from "./components/wenBenYu.vue";
import wenBenYu2 from "./components/wenBenYu2.vue";
import I from "./components/i.vue";
import number10 from "./components/number10.vue";
import sanjiao from "./components/sanjiao.vue";
import shiduNumber from "./components/shiduNumber.vue";
import wenduNumber from "./components/wenduNumber.vue";
import Wenduji from "./components/wenduji.vue";
import zhuanhuanqi from "./components/zhuanhuanqi.vue";
import number2 from "./components/number2.vue";
import wendu from "./components/wendu.vue";
import wenduYibiao from "./components/wenduYibiao.vue";
import RH from "./components/RH.vue";
import dianchizu from "./components/dianchizu.vue";
import shidu from "./components/shidu.vue";
import du from "./components/du.vue";
import booleanCopm from "./components/booleanCopm.vue";
import swatchComp from "./components/swatch.vue";
import fuwiqiIP from "./components/fuwiqiIP.vue";
import fuwuqiProt from "./components/fuwuqiProt.vue";
import openTCP from "./components/openTCP.vue";
import setTCP from "./components/setTCP.vue";
import TCP from "./components/TCP.vue";
import errorComp from "./components/error.vue";
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";
let graph = null;

// 定义通用的端口配置，避免重复
const portConfig = {
  top: {
    position: "top",
    attrs: {
      circle: { magnet: true, stroke: "#8f8f8f", r: 5 },
    },
    offset: { y: 10 }, // 调整端口位置，避免连接线与节点接触
  },
  bottom: {
    position: "bottom",
    attrs: {
      circle: { magnet: true, stroke: "#8f8f8f", r: 5 },
    },
    offset: { y: -10 }, // 调整端口位置，避免连接线与节点接触
  },
  right: {
    position: "right",
    attrs: {
      circle: { magnet: true, stroke: "#8f8f8f", r: 5 },
    },
    offset: { x: 10 }, // 调整端口位置，避免连接线与节点接触
  },
  left: {
    position: "left",
    attrs: {
      circle: { magnet: true, stroke: "#8f8f8f", r: 5 },
    },
    offset: { x: -10 }, // 调整端口位置，避免连接线与节点接触
  },
};

// 注册自定义节点的通用方法
const registerNode = (shape, component) => {
  register({
    shape,
    width: 120,
    height: 100,
    component,
    attrs: {
      body: {
        stroke: "#8f8f8f",
        strokeWidth: 1,
        fill: "#fff",
        rx: 6,
        ry: 6,
      },
    },
    ports: {
      groups: {
        top: portConfig.top,
        bottom: portConfig.bottom,
        right: portConfig.right,
        left: portConfig.left,
      },
    },
  });
};

onMounted(() => {
  // 初始化图表
  graph = new Graph({
    container: document.getElementById("container"),
    width: 1442,
    height: 753,
    background: { color: "transparent" },
    grid: true,
    mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
      modifiers: "ctrl",
      minScale: 0.5,
      maxScale: 3,
    },
    connecting: {
      router: "manhattan", // 路由方式
      connector: { name: "rounded", args: { radius: 8 } }, // 连接线样式
      anchor: "center", // 连接点位置
      connectionPoint: "anchor", // 连接点方式
      allowBlank: false,
      snap: { radius: 20 }, // 吸附半径
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: "#A2B1C3",
              strokeWidth: 2,
              targetMarker: { name: "block", width: 12, height: 8 },
            },
          },
          zIndex: 0,
        });
      },
      validateConnection({ sourceCell, targetCell }) {
            // 禁止连接到自身
            if (sourceCell && targetCell && sourceCell.id === targetCell.id) {
                return false;
            }
            return true;
        }
    },
    highlighting: {
      magnetAdsorbed: {
        name: "stroke",
        args: { attrs: { fill: "#5F95FF", stroke: "#5F95FF" } }, // 高亮样式
      },
    },
  });

  // 使用历史插件
  graph.use(new History({ enabled: true }));
  // 注册普通控件
  Graph.registerNode(
    "custom-node-width-port",
    {
      inherit: "rect",
      width: 100,
      height: 40,
      attrs: {
        body: {
          stroke: "#8f8f8f",
          strokeWidth: 1,
          fill: "#fff",
          rx: 6,
          ry: 6,
        },
      },
      ports: {
        groups: {
          top: {
            position: "top",
            attrs: {
              circle: {
                magnet: true,
                stroke: "#8f8f8f",
                r: 5,
              },
            },
          },
          bottom: {
            position: "bottom",
            attrs: {
              circle: {
                magnet: true,
                stroke: "#8f8f8f",
                r: 5,
              },
            },
          },
          right: {
            position: "right",
            attrs: {
              circle: {
                magnet: true,
                stroke: "#8f8f8f",
                r: 5,
              },
            },
          },
          left: {
            position: "left",
            attrs: {
              circle: {
                magnet: true,
                stroke: "#8f8f8f",
                r: 5,
              },
            },
          },
        },
      },
    },
    true
  );
  // 注册自定义节点组件
  registerNode("custom-vue-node", wenduZK);
  registerNode("custom-vue-node-sd", shiduZK);
  registerNode("custom-vue-node-wenBenYu", wenBenYu);
  registerNode("custom-vue-node-wenBenYu2", wenBenYu2);
  registerNode("custom-vue-node-I", I);
  registerNode("custom-vue-node-number10", number10);
  registerNode("custom-vue-node-sanjiao", sanjiao);
  registerNode("custom-vue-node-shiduNumber", shiduNumber);
  registerNode("custom-vue-node-wenduNumber", wenduNumber);
  registerNode("custom-vue-node-Wenduji", Wenduji);
  registerNode("custom-vue-node-zhuanhuanqi", zhuanhuanqi);
  registerNode("custom-vue-node-number2", number2);
  registerNode("custom-vue-node-wendu", wendu);
  registerNode("custom-vue-node-wenduYibiao", wenduYibiao);
  registerNode("custom-vue-node-RH", RH);
  registerNode("custom-vue-node-dianchizu", dianchizu);
  registerNode("custom-vue-node-shidu", shidu);
  registerNode("custom-vue-node-du", du);
  registerNode("custom-vue-node-booleanCopm", booleanCopm);
  registerNode("custom-vue-node-swatchComp", swatchComp);
  registerNode("custom-vue-node-fuwiqiIP", fuwiqiIP);
  registerNode("custom-vue-node-fuwuqiProt", fuwuqiProt);
  registerNode("custom-vue-node-openTCP", openTCP);
  registerNode("custom-vue-node-setTCP", setTCP);
  registerNode("custom-vue-node-TCP", TCP);
  registerNode("custom-vue-node-errorComp", errorComp);
  registerNode("custom-vue-node-wenduValueSetting", wenduValueSetting);
  registerNode("custom-vue-node-shiduValueSetting", shiduValueSetting);
  registerNode("custom-vue-node-setzijie", setzijie);
  // 添加温度参数控件节点
  graph.addNode({
    shape: "custom-vue-node-wenduValueSetting",
    id: "1",
    width: 40,
    height: 40,
    x: 30,
    y: 220,
    label: "温度参数控件",
    ports: {
      items: [{ id: "1", group: "right" }],
    },
  });

  // 添加湿度参数控件节点
  graph.addNode({
    shape: "custom-vue-node-shiduValueSetting",
    id: "2",
    width: 40,
    height: 40,
    x: 30,
    y: 520,
    label: "湿度参数控件",
    ports: {
      items: [{ id: "2", group: "right" }],
    },
  });

  // 添加温度设置控件节点
  graph.addNode({
    shape: "custom-vue-node",
    id: "3",
    width: 120,
    height: 100,
    x: 120,
    y: 190,
    label: "初始温度\n质量\n散热面积\n加热功率",
    ports: {
      items: [
        { id: "3", group: "right" },
        { id: "4", group: "right" },
        { id: "5", group: "right" },
        { id: "6", group: "right" },
        { id: "7", group: "left" },
      ],
    },
  });

  // 添加代码控件1节点
  graph.addNode({
    shape: "custom-vue-node-wenBenYu",
    id:'32',
    width: 210,
    height: 300,
    x: 320,
    y: 80,
    label: "初始温度\n质量\n散热面积\n加热功率",
    ports: {
      items: [
        { id: "8", group: "left" },
        { id: "9", group: "left" },
        { id: "10", group: "left" },
        { id: "11", group: "left" },
        { id: "12", group: "left" },
        { id: "13", group: "right" },
      ],
    },
  });

  // 添加湿度设置控件节点
  graph.addNode({
    shape: "custom-vue-node-sd",
    id: "4",
    width: 110,
    height: 84,
    x: 120,
    y: 490,
    label: "初始温度\n质量\n散热面积\n加热功率",
    ports: {
      items: [
        { id: "14", group: "right" },
        { id: "15", group: "right" },
        { id: "16", group: "right" },
        { id: "17", group: "left" },
      ],
    },
  });

  // 添加代码控件2节点
  graph.addNode({
    shape: "custom-vue-node-wenBenYu2",
    id:'33',
    width: 210,
    height: 300,
    x: 400,
    y: 440,
    label: "初始温度\n质量\n散热面积\n加热功率",
    ports: {
      items: [
        { id: "18", group: "left" },
        { id: "19", group: "left" },
        { id: "20", group: "left" },
        { id: "21", group: "left" },
        { id: "22", group: "right" },
      ],
    },
  });
  // 注册I组件
  graph.addNode({
    shape: "custom-vue-node-I",
    id: "5",
    width: 40,
    height: 40,
    x: 50,
    y: 690,
    label: "",
    ports: {
      items: [
        { id: "23", group: "right" },
        { id: "24", group: "right" },
      ],
    },
  });
  // 注册number10组件1
  graph.addNode({
    shape: "custom-vue-node-number10",
    id: "6",
    width: 40,
    height: 40,
    x: 150,
    y: 710,
    label: "",
    ports: {
      items: [{ id: "25", group: "right" }],
    },
  });
  // 注册number10组件2
  graph.addNode({
    shape: "custom-vue-node-number10",
    id: "7",
    width: 40,
    height: 40,
    x: 150,
    y: 640,
    label: "",
    ports: {
      items: [{ id: "26", group: "right" }],
    },
  });
  // 注册三角组件1
  graph.addNode({
    shape: "custom-vue-node-sanjiao",
    id: "8",
    width: 40,
    height: 40,
    x: 230,
    y: 620,
    label: "",
    ports: {
      items: [
        { id: "27", group: "left" },
        { id: "28", group: "left" },
        { id: "29", group: "right" },
      ],
    },
  });
  // 注册三角组件2
  graph.addNode({
    shape: "custom-vue-node-sanjiao",
    id: "9",
    width: 40,
    height: 40,
    x: 230,
    y: 700,
    label: "",
    ports: {
      items: [
        { id: "30", group: "left" },
        { id: "31", group: "left" },
        { id: "32", group: "right" },
      ],
    },
  });
  // 湿度数值组件
  graph.addNode({
    shape: "custom-vue-node-shiduNumber",
    id: "10",
    width: 40,
    height: 40,
    x: 630,
    y: 520,
    label: "",
    ports: {
      items: [{ id: "33", group: "left" }],
    },
  });

  // 温度数值组件
  graph.addNode({
    shape: "custom-vue-node-wenduNumber",
    id: "11",
    width: 40,
    height: 40,
    x: 600,
    y: 40,
    label: "",
    ports: {
      items: [{ id: "34", group: "left" }],
    },
  });
  // 温度计组件
  graph.addNode({
    shape: "custom-vue-node-Wenduji",
    id: "12",
    width: 40,
    height: 40,
    x: 620,
    y: 120,
    label: "",
    ports: {
      items: [{ id: "35", group: "left" }],
    },
  });

  // 转换器组件
  graph.addNode({
    shape: "custom-vue-node-zhuanhuanqi",
    id: "13",
    width: 40,
    height: 40,
    x: 670,
    y: 260,
    label: "",
    ports: {
      items: [
        { id: "36", group: "left" },
        { id: "37", group: "left" },
        { id: "38", group: "right" },
      ],
    },
  });
  // 数字2组件
  graph.addNode({
    shape: "custom-vue-node-number2",
    id: "14",
    width: 20,
    height: 30,
    x: 600,
    y: 290,
    label: "",
    ports: {
      items: [{ id: "39", group: "right" }],
    },
  });
  // 温度组件
  graph.addNode({
    shape: "custom-vue-node-wendu",
    id: "15",
    width: 60,
    height: 20,
    x: 750,
    y: 120,
    label: "",
    ports: {
      items: [{ id: "40", group: "right" }],
    },
  });
  // 转换器组件2
  graph.addNode({
    shape: "custom-vue-node-zhuanhuanqi",
    id: "16",
    width: 40,
    height: 40,
    x: 700,
    y: 580,
    label: "",
    ports: {
      items: [
        { id: "41", group: "left" },
        { id: "42", group: "left" },
        { id: "43", group: "right" },
      ],
    },
  });
  // 数字2组件2
  graph.addNode({
    shape: "custom-vue-node-number2",
    id: "17",
    width: 20,
    height: 30,
    x: 650,
    y: 610,
    label: "",
    ports: {
      items: [{ id: "44", group: "right" }],
    },
  });
  // 温度仪表
  graph.addNode({
    shape: "custom-vue-node-wenduYibiao",
    id: "18",
    width: 40,
    height: 40,
    x: 759,
    y: 680,
    label: "",
    ports: {
      items: [{ id: "45", group: "left" }],
    },
  });
  // RH组件
  graph.addNode({
    shape: "custom-vue-node-RH",
    id: "19",
    width: 50,
    height: 20,
    x: 800,
    y: 600,
    label: "",
    ports: {
      items: [{ id: "46", group: "right" }],
    },
  });
  // 电池组组件
  graph.addNode({
    shape: "custom-vue-node-dianchizu",
    id: "20",
    width: 40,
    height: 70,
    x: 880,
    y: 400,
    label: "",
    ports: {
      items: [
        { id: "47", group: "left" },
        { id: "48", group: "left" },
        { id: "49", group: "left" },
        { id: "50", group: "left" },
        { id: "51", group: "left" },
        { id: "52", group: "left" },
        { id: "74", group: "right" },
      ],
    },
  });
  // 湿度组件
  graph.addNode({
    shape: "custom-vue-node-shidu",
    id: "21",
    width: 60,
    height: 20,
    x: 750,
    y: 450,
    label: "",
    ports: {
      items: [{ id: "53", group: "right" }],
    },
  });
  // 摄氏度组件
  graph.addNode({
    shape: "custom-vue-node-du",
    id: "22",
    width: 25,
    height: 20,
    x: 759,
    y: 410,
    label: "",
    ports: {
      items: [{ id: "54", group: "right" }],
    },
  });
  // 布尔组件
  graph.addNode({
    shape: "custom-vue-node-booleanCopm",
    id: "23",
    width: 40,
    height: 40,
    x: 1300,
    y: 620,
    label: "",
    ports: {
      items: [{ id: "55", group: "right" }],
    },
  });
  // 开关组件
  graph.addNode({
    shape: "custom-vue-node-swatchComp",
    id: "24",
    width: 20,
    height: 20,
    x: 1350,
    y: 700,
    label: "",
    ports: {
      items: [{ id: "56", group: "left" }],
    },
  });
  // 服务器IP组件
  graph.addNode({
    shape: "custom-vue-node-fuwiqiIP",
    id: "25",
    width: 40,
    height: 40,
    x: 950,
    y: 490,
    label: "",
    ports: {
      items: [{ id: "57", group: "right" }],
    },
  });
  // 服务器端口组件
  graph.addNode({
    shape: "custom-vue-node-fuwuqiProt",
    id: "26",
    width: 40,
    height: 40,
    x: 950,
    y: 580,
    label: "",
    ports: {
      items: [{ id: "58", group: "right" }],
    },
  });
  // 打开TCP组件
  graph.addNode({
    shape: "custom-vue-node-openTCP",
    id: "27",
    width: 40,
    height: 40,
    x: 1050,
    y: 520,
    label: "",
    ports: {
      items: [
        { id: "59", group: "right" },
        { id: "60", group: "right" },
        { id: "61", group: "left" },
        { id: "62", group: "left" },
      ],
    },
  });
  // 写入TCP数据
  graph.addNode({
    shape: "custom-vue-node-setTCP",
    id: "28",
    width: 40,
    height: 40,
    x: 1150,
    y: 410,
    label: "",
    ports: {
      items: [
        { id: "63", group: "right" },
        { id: "64", group: "right" },
        { id: "72", group: "right" },
        { id: "65", group: "left" },
        { id: "66", group: "left" },
        { id: "73", group: "left" },
      ],
    },
  });
  // TCP组件
  graph.addNode({
    shape: "custom-vue-node-setzijie",
    id: "29",
    width: 40,
    height: 40,
    x: 1300,
    y: 320,
    label: "",
    ports: {
      items: [{ id: "71", group: "left" }],
    },
  });
  // TCP组件
  graph.addNode({
    shape: "custom-vue-node-TCP",
    id: "30",
    width: 40,
    height: 40,
    x: 1250,
    y: 410,
    label: "",
    ports: {
      items: [
        { id: "67", group: "right" },
        { id: "68", group: "left" },
        { id: "69", group: "left" },
      ],
    },
  });
  // 错误输出
  graph.addNode({
    shape: "custom-vue-node-errorComp",
    id: "31",
    width: 40,
    height: 40,
    x: 1400,
    y: 410,
    label: "",
    ports: {
      items: [{ id: "70", group: "left" }],
    },
  });
  // 设置连接线的处理事件
  graph.on("connection", ({ edge, sourceView, targetView }) => {
    if (!targetView) edge.remove(); // 如果目标为空，移除连接线
  });

  // 验证连接的有效性
  graph.on("connection:validate", ({ targetView }) => {
    return !!targetView; // 如果目标有效，则允许连接
  });

  // 监听历史记录变化，更新撤回和恢复按钮状态
  graph.on("history:change", () => {
    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();
  // console.log(data);
});

// 撤回操作
const onUndo = () => {
  graph.undo();
};

// 恢复操作
const onRedo = () => {
  graph.redo();
};
const onSave = () => {
  if (standardData.length !== formatEdges().length)
    return ElMessage.error("请完善数据");
  validateRelationships(standardData, formatEdges());
  ElMessage.success("保存成功");
  // const data = graph.toJSON();
  // console.log(data);
  // const edges = graph.getEdges();
  // console.log(formatEdges());
};
const formatEdges = () => {
  const edges = graph.getEdges();
  // console.log(edges);
  const data = edges.map((edge) => {
    return {
      id: edge.id,
      source: edge.store.data.source.port,
      target: edge.store.data.target.port,
    };
  });
  return data;
};
const standardData = [
  {
    id: "79065768-7b4f-4dde-af0d-87bb88d8cba7",
    source: "1",
    target: "7",
  },
  {
    id: "a631a3f0-d7e3-4beb-9e4c-8134330630ca",
    source: "3",
    target: "8",
  },
  {
    id: "257ac326-57a8-4e4f-8e2d-62feb28ef17b",
    source: "4",
    target: "9",
  },
  {
    id: "2d2cb463-f07a-49f7-9d3e-40705d394c26",
    source: "5",
    target: "10",
  },
  {
    id: "30584ef3-6b35-47f9-9cb6-0ffedc6cfb63",
    source: "6",
    target: "11",
  },
  {
    id: "68aadd0e-5cd4-4897-ad32-88d20fa1dda8",
    source: "2",
    target: "17",
  },
  {
    id: "6562bd2e-db7e-491b-9dc1-fbcfa6596851",
    source: "14",
    target: "18",
  },
  {
    id: "47a1e94c-a478-470c-b878-354505c16b23",
    source: "15",
    target: "19",
  },
  {
    id: "edcc48d4-59ef-4c1e-9b64-70ee77b2bce6",
    source: "16",
    target: "20",
  },
  {
    id: "d5b8c7bd-bd26-4d72-88fe-ce6675452b43",
    source: "23",
    target: "27",
  },
  {
    id: "2325273e-9d6c-4fdf-9297-907856eb6b62",
    source: "24",
    target: "30",
  },
  {
    id: "7b99f5d1-dad5-4c72-9ec2-a034e1c22f1f",
    source: "26",
    target: "28",
  },
  {
    id: "54c431ec-bfb5-44ac-9237-ac43770e1bae",
    source: "25",
    target: "31",
  },
  {
    id: "050fca1c-aee5-4761-b2ed-74520bbad632",
    source: "29",
    target: "12",
  },
  {
    id: "f23b4dea-bbb2-4b08-96a7-89401f2f90c9",
    source: "32",
    target: "21",
  },
  {
    id: "7f83756a-82c4-40ba-8fdf-ed3bd0a3ddb2",
    source: "34",
    target: "13",
  },
  {
    id: "87e412ec-aa79-4cbe-8225-c41deca62a7a",
    source: "35",
    target: "13",
  },
  {
    id: "014b26c1-b757-4a15-b17f-f556fb07ba66",
    source: "36",
    target: "13",
  },
  {
    id: "437549e0-4907-4c52-8a7b-bd5418372af9",
    source: "37",
    target: "39",
  },
  {
    id: "7d35a00a-9fe4-4cdf-b8f1-5896ea417f34",
    source: "47",
    target: "40",
  },
  {
    id: "a8542099-5723-49d9-b9d2-702e12425874",
    source: "52",
    target: "46",
  },
  {
    id: "4eb83ed7-7478-4391-bc33-da2f5902dcc2",
    source: "48",
    target: "38",
  },
  {
    id: "ec52c1f6-5627-400d-af97-a7c830aa202e",
    source: "49",
    target: "54",
  },
  {
    id: "e7390a41-6a91-45f3-8f0b-59d787b58576",
    source: "50",
    target: "53",
  },
  {
    id: "0529c79b-b8a3-4126-9b13-69ca49ebcf9e",
    source: "51",
    target: "43",
  },
  {
    id: "7fae0dd8-20b4-4f19-86dc-1d1df9aa150a",
    source: "33",
    target: "22",
  },
  {
    id: "5c5af851-5d5a-47fe-9b79-f3bb8c7d9552",
    source: "42",
    target: "44",
  },
  {
    id: "94cd62af-67ae-4d64-83a0-90dae926e261",
    source: "41",
    target: "22",
  },
  {
    id: "c5eb8ed3-57df-40fc-872c-ef1bbbafd7ad",
    source: "45",
    target: "22",
  },
  {
    id: "208b6837-5d27-4285-add7-0ab29f099dae",
    source: "74",
    target: "66",
  },
  {
    id: "d16091c0-aa0e-4d84-bce0-724f2eb8b11d",
    source: "57",
    target: "61",
  },
  {
    id: "e23a2681-a56b-4d8b-81b2-53f9585d3a33",
    source: "58",
    target: "62",
  },
  {
    id: "a4b1be7f-55bd-47ab-86fd-0237cde12f90",
    source: "59",
    target: "65",
  },
  {
    id: "91c6be84-33a6-48d4-8ade-436bfc6faf90",
    source: "60",
    target: "73",
  },
  {
    id: "f5f73059-87e2-4af1-9e67-2dc13595756d",
    source: "63",
    target: "68",
  },
  {
    id: "6b77eaed-3fb0-4ea9-b755-73517cea3cc5",
    source: "64",
    target: "71",
  },
  {
    id: "58699842-8635-4441-bd49-f582933fb6a9",
    source: "72",
    target: "69",
  },
  {
    id: "f6cd847b-517d-48a3-a616-8eef9e60d2b3",
    source: "67",
    target: "70",
  },
  {
    id: "5f5ee82b-e752-494f-8bf4-26e851d5c50e",
    source: "55",
    target: "56",
  },
];
function validateRelationships(correctAnswers, userRelationships) {
  // 使用 Set 存储正确的关系，方便快速查找
  const correctSet = new Set(
    correctAnswers.map((item) => `${item.source}-${item.target}`)
  );

  // 遍历用户提供的关系
  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}`
      );
      throw new Error(
        `错误的关系: source=${relation.source}, target=${relation.target}`
      );
    }
  }

  return true; // 关系校验通过
}
const falg = false;
const preview = ref(null);
const onTip = () => {
  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>

<style scoped>
.setting {
  position: absolute;
  right: 10px;
  top: 10px;
}
#container {
  margin-top: 80px;
  width: 1442px !important;
  height: 753px !important;
}
.tip-view {
}
</style>