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" v-if="!isShowStrring">
    <el-button @click="onUndo">撤回</el-button>
    <el-button @click="onRedo">恢复</el-button>
    <el-button @click="clearLocalStorage">清除缓存</el-button>
    <el-button
      :disabled="
        useSettingStore.experimentPreservation && useSettingStore.isRunning
      "
      @click="onSave"
      >{{ useSettingStore.experimentPreservation ? "运行" : "保存" }}</el-button
    >
    <el-button @click="onTip">提示</el-button>
    <el-button @click="showDialog">填写实验报告</el-button>
  </div>
  <div class="setting" v-else>
    <el-button @click="router.back()">返回</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>
  <el-dialog
    v-model="dialogVisible"
    title="实验报告"
    width="650"
    v-if="dialogVisible"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
     
      <el-form-item label="实验内容">
        <el-input v-model="form.shiyanStep" type="textarea" />
        <div class="tips">实践内容及步骤</div>
      </el-form-item>
      <el-form-item label="实验结果">
        <el-input v-model="form.shiyanJieGuo" type="textarea" />
        <div class="tips">本实践源程序清单及运行结果或实践结论、实践设计图</div>
      </el-form-item>
      <el-form-item label="实践总结">
        <el-input v-model="form.shijianZhongJie" type="textarea" />
        <div class="tips">对本实践结果进行分析，实践心得及改进意见</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="exportWord">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</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";
import { useRouter } from "vue-router";
import { setStepEvent } from "@/utils/setStep";
import { formatDate } from "@/utils";
import JSZipUtils from "jszip-utils";
import JSZip from "pizzip";
import Docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
import { getReport,saveReport}  from '@/api'
const useSettingStore = settingStore();
const router = useRouter();
// console.log(useSettingStore.qw);

// 为了协助代码演示
const falg = ref(false);
const isShowStrring = Boolean(localStorage.getItem('falg')) || 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) => {
    if(!isShowStrring) return
    // console.log(cell.store.previous.name);
    console.log(cell);
    if (!useSettingStore.saveRoute) {
      ElMessage({
        message: "请先完成配置",
        type: "warning",
      });
      return;
    }
    if (
      cell.shape === "deom" ||
      cell.shape === "yibiao" ||
      cell.shape === "rect" ||
      cell.shape === "custom-text-wdsz" ||
      cell.shape === "custom-text-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);
    console.log(value, selectedNodeData.value.name);
    switch (node.shape) {
      case "custom-text":
        useSettingStore.setValue(parseInt(node.label), "qw"); //初始温度
        break;
      case "custom-text-zl":
        useSettingStore.setValue(parseInt(node.label), "zl"); // 质量
        break;
      case "custom-text-srmj":
        useSettingStore.setValue(parseInt(node.label), "srmj"); // 散热面积
        break;
      case "custom-text-jrgl":
        useSettingStore.setValue(parseInt(node.label), "jrgl"); // 加热功率
        break;
      case "custom-text-jrmj":
        useSettingStore.setValue(parseInt(node.label), "jrmj"); // 加热面积
        break;
      case "custom-text-prot":
        useSettingStore.setValue(node.label, "port"); // 端口
        break;
      case "custom-text-IP":
        useSettingStore.setValue(node.label, "ip"); // IP
        break;
      case "custom-text-cssd":
        useSettingStore.setValue(parseInt(node.label), "cssd"); // 初始湿度
        break;
      case "custom-text-jsgl":
        useSettingStore.setValue(parseInt(node.label), "jsgl"); // 加湿功率
        break;
      case "custom-text-jsmj":
        useSettingStore.setValue(parseInt(node.label), "jsmj"); // 加湿面积
        break;
    }
    // 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 = async () => {
  if (useSettingStore.isRunCode) {
    await setStepEvent(9, formatDate(new Date()));
useSettingStore.activeStepIndex = 10

  }
  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: "请填写完整信息",
    });
  }
  if (!useSettingStore.experimentPreservation) {
    useSettingStore.setValue(true, "experimentPreservation");
    localStorage.setItem("experimentPreservation", "true");
    if (!useSettingStore.isRunCode) {
      await setStepEvent(2, formatDate(new Date()));
useSettingStore.activeStepIndex = 3

    }

    router.push("/designRoute");
    return;
  }
  graph.toJSON().cells.forEach((item: any) => {
    switch (item.shape) {
      case "custom-text":
        // console.log(parseInt(item.attrs.text.text));
        if (!parseInt(item.attrs.text.text)) {
          ElMessage({
            type: "warning",
            message: "请请填写初始温度信息",
          });
          return;
        }
        useSettingStore.setValue(parseInt(item.attrs.text.text), item.name);
        break;
      case "custom-text-zl":
        // console.log(parseInt(item.attrs.text.text));
        if (!parseInt(item.attrs.text.text)) {
          ElMessage({
            type: "warning",
            message: "请请填写质量信息",
          });
          return;
        }
        useSettingStore.setValue(parseInt(item.attrs.text.text), item.name);
        break;
      case "custom-text-srmj":
        // console.log(parseInt(item.attrs.text.text));
        if (!parseInt(item.attrs.text.text)) {
          ElMessage({
            type: "warning",
            message: "请请填写散热面积信息",
          });
          return;
        }
        useSettingStore.setValue(parseInt(item.attrs.text.text), item.name);
        break;
      case "custom-text-jrgl":
        if (!parseInt(item.attrs.text.text)) {
          ElMessage({
            type: "warning",
            message: "请请填写加热功率信息",
          });
          return;
        }
        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":
        // console.log(parseInt(item.attrs.text.text));
        if (!parseInt(item.attrs.text.text)) {
          ElMessage({
            type: "warning",
            message: "请请填写初始湿度信息",
          });
          return;
        }
        useSettingStore.setValue(parseInt(item.attrs.text.text), item.name);
        break;
      case "custom-text-jsgl":
        // console.log(parseInt(item.attrs.text.text));
        if (!parseInt(item.attrs.text.text)) {
          ElMessage({
            type: "warning",
            message: "请请填写加湿功率信息",
          });
          return;
        }
        useSettingStore.setValue(parseInt(item.attrs.text.text), item.name);
        break;
      case "custom-text-jsmj":
        // console.log(parseInt(item.attrs.text.text));
        if (!parseInt(item.attrs.text.text)) {
          ElMessage({
            type: "warning",
            message: "请请填写加湿面积信息",
          });
          return;
        }
        useSettingStore.setValue(parseInt(item.attrs.text.text), item.name);
        break;
      case "custom-text-IP":
        // console.log(parseInt(item.attrs.text.text));
        if (!parseInt(item.attrs.text.text)) {
          ElMessage({
            type: "warning",
            message: "请请填写ip设置信息",
          });
          return;
        }
        useSettingStore.setValue(parseInt(item.attrs.text.text), item.name);
        break;
      case "custom-text-prot":
        // console.log(parseInt(item.attrs.text.text));
        if (!parseInt(item.attrs.text.text)) {
          ElMessage({
            type: "warning",
            message: "请请填写设定温度信息",
          });
          return;
        }
        useSettingStore.setValue(parseInt(item.attrs.text.text), item.name);
        break;
    }
  });

  if (useSettingStore.experimentPreservation) {
    const arr = [
      useSettingStore.qw,
      useSettingStore.zl,
      useSettingStore.srmj,
      useSettingStore.jrgl,
      useSettingStore.port,
      useSettingStore.cssd,
      useSettingStore.jsmj,
      useSettingStore.jsgl,
      useSettingStore.ip,
    ];
    console.log(
      arr,
      arr.every((item) => item !== 0 && item !== "")
    );

    // 判断全部不能为空
    if (!arr.every((item) => item !== 0 && item !== "")) {
      return ElMessage({
        type: "warning",
        message: "请完善配置信息",
      });
    }

    // console.log(graph.toJSON());

    // return;
    clearLocalStorage(false);
    const data = graph.toJSON().cells.map((item: any) => {
      return {
        node: item,
        type: "add",
      };
    });
    console.log(data);

    localStorage.setItem(SESSION_KEY, JSON.stringify(data));
  }
  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();
  useSettingStore.simulateHeatingAndHumidifying();
  if (!useSettingStore.isRunCode) {
    setStepEvent(4, formatDate(new Date()));
    setStepEvent(5, formatDate(new Date()));
useSettingStore.activeStepIndex = 6

  }

  // 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);
    }
  }
);
watch(
  () => useSettingStore.cssd,
  (newValue: number) => {
    console.log(newValue, "newValue");
    console.log(sdsz.value, "sdsz.value");

    if (sdsz.value) {
      sdsz.value.label = newValue;
    }
  }
);
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(falg=true) {
  localStorage.removeItem(SESSION_KEY);
  if(falg){
  window.location.reload();

  }

}
// 恢复画布状态
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);
};
const dialogVisible = ref(false);
const form = ref({
  shiyanStep: "",
  shiyanJieGuo:'',
  shijianZhongJie:'',
  laoshipingyu:' 非常好',
  sum:100
});
const showDialog = async () => {
  const res:any = await getReport();
  form.value.shijianZhongJie = res.result.summarize;
  form.value.shiyanJieGuo = res.result.result;
  form.value.shiyanStep = res.result.experimentalResult;
  console.log(res);
  
  dialogVisible.value = true;
};
const exportWord = async () => {
  await saveReport({
    experimentalResult:form.value.shiyanStep,
    result:form.value.shiyanJieGuo,
    summarize:form.value.shijianZhongJie
  })
  dialogVisible.value = false;
  ElMessage.success('保存成功')
  await setStepEvent(11, formatDate(new Date()));
  useSettingStore.activeStepIndex = 12
  router.push('/studyPage')
      return 
      JSZipUtils.getBinaryContent("template.docx", function (error:any, content:any) {
        // 抛出异常
        if (error) {
          throw error;
        }
        // 创建一个JSZip实例，内容为模板的内容
        let zip = new JSZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new Docxtemplater().loadZip(zip);
        // 设置模板变量的值


        doc.setData({
         ...form.value,
         shiyanTime:formatDate(new Date())
          // table:_this.table,
        });
        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          // let e = {
          //   message: error.message,
          //   name: error.name,
          //   stack: error.stack,
          //   properties: error.properties,
          // }
        ElMessage.error('导出失败')
          throw error;
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "实验报告.docx");
      });
    }
</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;
}
.tips {
  font-size: 12px;
  color: #999;
}
</style>