virtualSimulation/src/views/program/index.vue

<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 120px;
    "
  >
    <div id="container">
      <div id="stencil"></div>

      <div id="graph-container"></div>
    </div>
  </div>

  <!-- el-drawer 弹出框 -->
  <el-drawer
    v-model="drawerVisible"
    title="编辑节点"
    :size="'30%'"
    direction="rtl"
    :before-close="beforeClose"
  >
    <el-form :model="selectedNodeData" label-width="80px">
      <el-form-item label="数值">
        <el-input v-model="selectedNodeData.label"></el-input>
      </el-form-item>
      <!-- <el-form-item label="宽度">
          <el-input-number v-model="selectedNodeData.width" :min="10" :max="500"></el-input-number>
        </el-form-item>
        <el-form-item label="高度">
          <el-input-number v-model="selectedNodeData.height" :min="10" :max="500"></el-input-number>
        </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="saveNodeData">保存</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
  <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>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { Graph, Shape } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";
import { Transform } from "@antv/x6-plugin-transform";
import { Selection } from "@antv/x6-plugin-selection";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { Clipboard } from "@antv/x6-plugin-clipboard";
import { History } from "@antv/x6-plugin-history";
import insertCss from "insert-css";
import Button from "./components/test.vue";
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);

// 为了协助代码演示
const falg = ref(false);

let graph: any = null;
const nodeName = ref("");
const csedNode = ref<any>(null);
const operations = [];
onMounted(() => {
  preWork();

  // #region 初始化画布
  graph = new Graph({
    container: document.getElementById("graph-container")!,
    grid: true,
    embedding: {
      enabled: true,
      findParent({ node }) {
        const bbox = node.getBBox();
        return this.getNodes().filter((node) => {
          const data = node.getData<any>();
          if (data && data.parent) {
            const targetBBox = node.getBBox();
            return bbox.isIntersectWithRect(targetBBox);
          }
          return false;
        });
      },
    },
    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({ targetMagnet }) {
        return !!targetMagnet;
      },
    },
    highlighting: {
      magnetAdsorbed: {
        name: "stroke",
        args: {
          attrs: {
            fill: "#5F95FF",
            stroke: "#5F95FF",
          },
        },
      },
    },
  });
  // #endregion

  // #region 使用插件
  graph
    .use(
      new Transform({
        resizing: true,
        rotating: true,
      })
    )
    .use(
      new Selection({
        rubberband: true,
        showNodeSelectionBox: true,
      })
    )
    .use(new Snapline())
    .use(new Keyboard())
    .use(new Clipboard())
    .use(new History());
  // #endregion
  // 点击节点时显示编辑框
  graph.on("node:click", ({ cell }: any) => {
    // console.log(cell.store.previous.name);
    // console.log(cell);

    if (
      cell.shape === "deom" ||
      cell.shape === "yibiao" ||
      cell.shape === "rect" ||
      cell.store.previous.name === "wdsz" ||
      cell.store.previous.name === "sdsz"
    )
      return;
    // if (cell.store.previous.name === "qw") {
    falg.value = true;
    // }
    // 获取节点属性
    selectedNodeData.value = {
      id: cell.id,
      name: cell.store.previous.name,
      // width: cell.getAttr('body/width'),
      // height: cell.getAttr('body/height'),
    };
    drawerVisible.value = true; // 打开编辑抽屉
    // cell.addTools([
    //   {
    //     name: "button-remove",
    //     args: {
    //       icon: "delete",
    //     },
    //   },
    // ]);
  });

  graph.on("node:added", ({ node }:any) => {
    const data = {
      type: "add",
      node: node.toJSON(),
    };
    operations.push(data);
    saveToLocalStorage(data);
  });

  graph.on("node:removed", ({ node }:any) => {
    const data = {
      type: "remove",
      id: node.id,
    };
    operations.push(data);
    saveToLocalStorage(data);
  });
  // #region 初始化 stencil
  const stencil = new Stencil({
    title: "组件菜单",
    target: graph,
    stencilGraphWidth: 200,
    stencilGraphHeight: 400,
    collapsable: true,
    groups: [
      {
        title: "组件",
        name: "group1",
      },
      // {
      //   title: '系统设计图',
      //   name: 'group2',
      //   graphHeight: 250,
      //   layoutOptions: {
      //     rowHeight: 70,
      //   },
      // },
    ],
    layoutOptions: {
      columns: 2,
      columnWidth: 80,
      rowHeight: 55,
    },
  });
  document.getElementById("stencil")!.appendChild(stencil.container);
  // #endregion

  // #region 快捷键与事件
  graph.bindKey(["meta+c", "ctrl+c"], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.copy(cells);
    }
    return false;
  });
  graph.bindKey(["meta+x", "ctrl+x"], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.cut(cells);
    }
    return false;
  });
  graph.bindKey(["meta+v", "ctrl+v"], () => {
    if (!graph.isClipboardEmpty()) {
      const cells = graph.paste({ offset: 32 });
      graph.cleanSelection();
      graph.select(cells);
    }
    return false;
  });

  // undo redo
  graph.bindKey(["meta+z", "ctrl+z"], () => {
    if (graph.canUndo()) {
      graph.undo();
    }
    return false;
  });
  graph.bindKey(["meta+shift+z", "ctrl+shift+z"], () => {
    if (graph.canRedo()) {
      graph.redo();
    }
    return false;
  });

  // select all
  graph.bindKey(["meta+a", "ctrl+a"], () => {
    const nodes = graph.getNodes();
    if (nodes) {
      graph.select(nodes);
    }
  });

  // delete
  graph.bindKey("backspace", () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.removeCells(cells);
    }
  });

  // zoom
  graph.bindKey(["ctrl+1", "meta+1"], () => {
    const zoom = graph.zoom();
    if (zoom < 1.5) {
      graph.zoom(0.1);
    }
  });
  graph.bindKey(["ctrl+2", "meta+2"], () => {
    const zoom = graph.zoom();
    if (zoom > 0.5) {
      graph.zoom(-0.1);
    }
  });
  graph.addNode({
    x: 50,
    y: 400,
    width: 240,
    height: 160,
    zIndex: 1,
    label: "加热参数基本设置",
    attrs: {
      body: {
        fill: "#fffbe6",
        stroke: "#ffe7ba",
      },
      label: {
        fontSize: 12,
      },
    },
    data: {
      parent: true,
    },
  });
  graph.addNode({
    shape: "rect",
    x: 750,
    y: 400,
    width: 240,
    height: 160,
    zIndex: 1,
    label: "加湿参数基本设置",
    attrs: {
      body: {
        fill: "#fffbe6",
        stroke: "#ffe7ba",
      },
      label: {
        fontSize: 12,
      },
    },
    data: {
      parent: true,
    },
  });
  register({
    shape: "deom",
    width: 100,
    height: 100,
    component: Button,
    resizable: false,
  });
  register({
    shape: "yibiao",
    width: 100,
    height: 100,
    component: Yibiao,
    resizable: false,
  });
  graph.addNode({
    shape: "deom",
    width: 350,
    height: 300,
    x: 350,
    y: 150,
  });

  graph.addNode({
    shape: "yibiao",
    width: 350,
    height: 300,
    x: 1050,
    y: 350,
  });
  // #endregion

  // #region 初始化图形
  const ports = {
    groups: {},
    items: [],
  };

  Graph.registerNode(
    "custom-text",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "初始温度",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-zl",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "质量kg",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-srmj",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "散热面积",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-jrgl",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "加热功率W",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-wdsz",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "温度数值",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-IP",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "服务器IP地址",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-prot",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "服务器端口号",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-cssd",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "初始湿度%RH",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-jsgl",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "加湿功率W",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-jsmj",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "加湿面积",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  Graph.registerNode(
    "custom-text-sdsz",
    {
      inherit: "rect",
      width: 60,
      height: 30,
      tools: [
        {
          name: "button",
          args: {
            markup: [
              {
                tagName: "text",
                textContent: "湿度数值",
                selector: "icon",
                attrs: {
                  fill: "#fe854f",
                  "font-size": 12,
                  "text-anchor": "middle",
                  "pointer-events": "none",
                  y: "0.3em",
                },
              },
            ],
            x: "50%",
            y: -10,
            // offset: { x: 0, y: 50 },
          },
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#FFFFFF",
          rx: 8,
          ry: 8,
        },
        label: {
          textAnchor: "middle",
          textVerticalAnchor: "middle",
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: { ...ports },
    },
    true
  );
  const inputNode1 = graph.createNode({
    shape: "custom-text",
    label: "初始温度",
    name: "qw",
  });
  const inputNode2 = graph.createNode({
    shape: "custom-text-zl",
    label: "质量",
    name: "zl",
  });
  const inputNode3 = graph.createNode({
    shape: "custom-text-srmj",
    label: "散热面积",
    name: "srmj",
  });
  const inputNode4 = graph.createNode({
    shape: "custom-text-jrgl",
    label: "加热功率",
    name: "jrgl",
  });
  const inputNode5 = graph.createNode({
    shape: "custom-text-wdsz",
    label: "温度数值",
    name: "wdsz",
  });
  const inputNode6 = graph.createNode({
    shape: "custom-text-IP",
    label: "IP",
    name: "ip",
  });
  const inputNode7 = graph.createNode({
    shape: "custom-text-prot",
    label: "端口",
    name: "port",
  });
  const inputNode8 = graph.createNode({
    shape: "custom-text-cssd",
    label: "初始湿度",
    name: "cssd",
  });
  const inputNode9 = graph.createNode({
    shape: "custom-text-jsgl",
    label: "加湿功率",
    name: "jsgl",
  });
  const inputNode10 = graph.createNode({
    shape: "custom-text-jsmj",
    label: "加湿面积",
    name: "jsmj",
  });
  const inputNode11 = graph.createNode({
    shape: "custom-text-sdsz",
    label: "湿度数值",
    name: "sdsz",
  });
  stencil.load(
    [
      inputNode1,
      inputNode2,
      inputNode3,
      inputNode4,
      inputNode5,
      inputNode6,
      inputNode7,
      inputNode8,
      inputNode9,
      inputNode10,
      inputNode11,
    ],
    "group1"
  );
  restoreGraph();
  // clearLocalStorage()
});
// 控制抽屉显示
const drawerVisible = ref(false);

// 当前选中的节点数据
const selectedNodeData = ref<any>({
  label: "",
  width: 0,
  height: 0,
  name: "",
});

// 保存节点数据
const saveNodeData = () => {
  const node = graph.getCellById(selectedNodeData.value.id);
  // console.log(nodeName.value);

  if (node) {
    //     node.setAttrs({

    // text: selectedNodeData.value.label,
    //       // body: {
    //       //   width: selectedNodeData.value.width,
    //       //   height: selectedNodeData.value.height,
    //       // },
    //     });
    node.label = selectedNodeData.value.label;
  }
  drawerVisible.value = false;
  // console.log(node, selectedNodeData.value.label);
  if (falg.value) {
    const value = Number(selectedNodeData.value.label);
    // useSettingStore.setqw(value);
    useSettingStore.setValue(value, selectedNodeData.value.name);
    graph.getNodes().forEach((node: any) => {
      // console.log(node.label);

      if (node.label === "温度数值:") {
        node.label = value;
      }
    });
  }
};

// 关闭抽屉之前的回调
const beforeClose = () => {
  selectedNodeData.value = { label: "", width: 0, height: 0, name: "" }; // 清空数据
  drawerVisible.value = false;
};

function preWork() {
  // 这里协助演示的代码，在实际项目中根据实际情况进行调整
  const graphContainer = document.createElement("div");
  graphContainer.id = "graph-container";

  insertCss(`
      #container {
        display: flex;
  
        bord
      }
      #stencil {
       width: 0.9375rem;
        height:  3.125rem;
        position: relative;
       
      }
      #graph-container {
        width: 8.3333rem;
        height: 3.125rem;
      }
      .x6-widget-stencil  {
        background-color: transparent;
      }
      .x6-widget-stencil-title {
        background-color: transparent;
      }
      .x6-widget-stencil-group-title {
        background-color: transparent !important;
      }
      .x6-widget-transform {
        margin: -1px 0 0 -1px;
        padding: 0px;
        border: 1px solid #239edd;
      }
      .x6-widget-transform > div {
        border: 1px solid #239edd;
      }
      .x6-widget-transform > div:hover {
        background-color: #3dafe4;
      }
      .x6-widget-transform-active-handle {
        background-color: #3dafe4;
      }
      .x6-widget-transform-resize {
        border-radius: 0;
      }
      .x6-widget-selection-inner {
        border: 1px solid #239edd;
      }
      .x6-widget-selection-box {
        opacity: 0;
      }
    `);
}
// 撤回操作
const onUndo = () => {
  graph.undo();
};

// 恢复操作
const onRedo = () => {
  graph.redo();
};
const sdsz = ref<any>(null);
const onSave = () => {
  // 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",
      "custom-text-zl",
      "custom-text-srmj",
      "custom-text-jrgl",
      "custom-text-wdsz",
      "custom-text-IP",
      "custom-text-prot",
      "custom-text-cssd",
      "custom-text-jsgl",
      "custom-text-jsmj",
      "custom-text-sdsz",
    ])
  ) {
    return ElMessage({
      type: "warning",
      message: "请填写完整信息",
    });
  }
  csedNode.value = graph
    .getNodes()
    .find((node: any) => node.shape === "custom-text-wdsz");
  sdsz.value = graph
    .getNodes()
    .find((node: any) => node.shape === "custom-text-sdsz");
  console.log(csedNode.value);
  sdsz.value.label = useSettingStore.cssd;
  // useSettingStore.openHeating();
  useSettingStore.calculateTemperature();
  // const data = graph.toJSON();
  // console.log(data);
  // const edges = graph.getEdges();
  // console.log(formatEdges());
};
function hasExactNames(arr: any, names: any) {
  // 提取数组中所有的 name 值
  const nameList = arr.map((obj:any) => obj.shape);
  console.log(
    nameList,
    names,
    names.every((name:any) => nameList.filter((n:any) => n === name).length === 1)
  );

  // 检查 names 里的所有元素是否都在 nameList 中，且仅出现一次
  return names.every((name:any) => nameList.filter((n:any) => n === name).length === 1);
}
watch(
  () => useSettingStore.qw,
  (newValue: number) => {
    console.log(newValue.toFixed(2), "newValue");
    console.log(csedNode.value, "csedNode.value");

    if (csedNode.value) {
      csedNode.value.label = newValue.toFixed(2);
    }
  }
);
const SESSION_KEY = "graph_operations";

function saveToLocalStorage(data:any) {
  const operations = JSON.parse(localStorage.getItem(SESSION_KEY) as string) || [];
  operations.push(data);
  localStorage.setItem(SESSION_KEY, JSON.stringify(operations));
}

function loadFromLocalStorage() {
  return JSON.parse(localStorage.getItem(SESSION_KEY) as string) || [];
}

function clearLocalStorage() {
  localStorage.removeItem(SESSION_KEY);
}
// 恢复画布状态
function restoreGraph() {
  const operations = loadFromLocalStorage();

  operations.forEach((op:any) => {
    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>
.setting {
  position: absolute;
  right: 10px;
  top: 10px;
}
#container {
  width: 1600px !important;
  height: 600px !important;
}
#graph-container {
  width: 1438px;
  height: 600px;
}
.x6-graph {
  width: 200px;
  height: 400px;
}
</style>