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

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 pnpm-lock.yaml
 node_modules
 dist
+package-lock.json
 dist-ssr
 *.local
 

package.json

@@ -19,10 +19,12 @@
     "@antv/x6-plugin-transform": "^2.1.8",
     "@antv/x6-vue-shape": "^2.1.2",
     "@element-plus/icons-vue": "^2.3.1",
+    "@highlightjs/vue-plugin": "^2.1.0",
     "@kjgl77/datav-vue3": "^1.7.3",
     "axios": "^1.7.2",
     "echarts": "^5.6.0",
-    "element-plus": "^2.9.6",
+    "element-plus": "^2.9.5",
+    "highlight.js": "^11.11.1",
     "insert-css": "^2.0.0",
     "lib-flexible": "^0.3.2",
     "pinia": "^2.1.7",

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       '@element-plus/icons-vue':
         specifier: ^2.3.1
         version: 2.3.1(vue@3.4.29(typescript@5.2.2))
+      '@highlightjs/vue-plugin':
+        specifier: ^2.1.0
+        version: 2.1.0(highlight.js@11.11.1)(vue@3.4.29(typescript@5.2.2))
       '@kjgl77/datav-vue3':
         specifier: ^1.7.3
         version: 1.7.3(vue@3.4.29(typescript@5.2.2))
@@ -50,6 +53,9 @@ importers:
       element-plus:
         specifier: ^2.9.5
         version: 2.9.5(vue@3.4.29(typescript@5.2.2))
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
       insert-css:
         specifier: ^2.0.0
         version: 2.0.0
@@ -344,6 +350,12 @@ packages:
   '@floating-ui/utils@0.2.9':
     resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
 
+  '@highlightjs/vue-plugin@2.1.0':
+    resolution: {integrity: sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==}
+    peerDependencies:
+      highlight.js: ^11.0.1
+      vue: ^3
+
   '@jiaminghi/bezier-curve@0.0.9':
     resolution: {integrity: sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==}
 
@@ -772,6 +784,10 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
@@ -1362,6 +1378,11 @@ snapshots:
 
   '@floating-ui/utils@0.2.9': {}
 
+  '@highlightjs/vue-plugin@2.1.0(highlight.js@11.11.1)(vue@3.4.29(typescript@5.2.2))':
+    dependencies:
+      highlight.js: 11.11.1
+      vue: 3.4.29(typescript@5.2.2)
+
   '@jiaminghi/bezier-curve@0.0.9':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -1847,6 +1868,8 @@ snapshots:
 
   he@1.2.0: {}
 
+  highlight.js@11.11.1: {}
+
   htmlparser2@8.0.2:
     dependencies:
       domelementtype: 2.3.0

src/api/index.ts

@@ -1,14 +1,60 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 export const login = (data: any) => {
-    return request({
+  return request({
-        url: '/sys/login',
+    url: "/sys/login",
-        method: 'post',
+    method: "post",
-        data
+    data,
-    })
+  });
-}
+};
 export const getCode = (time: any) => {
+  return request({
+    url: "/sys/randomImage/" + time,
+  });
+};
+//   获取用户信息
+export const getUserInfo = () => {
+  return request({
+    url: "/sys/user/getUserInfo",
+    method: "get",
+  });
+};
+
+// 实验步骤
+export const setStep = (params: any) => {
+  return request({
+    url: "/experimentrecords/xnExperimentRecords/check",
+    method: "get",
+    params
+  })
+}
+// 获取步骤id
+export const getStepId = () => {
+  return request({
+    url: "/experimentrecords/xnExperimentRecords/getProcedureList",
+    method: "get",
+
+  })
+}
+  //试题表
+  export const subTestapi = () => {
     return request({
-      url: '/sys/randomImage/' + time,
+        url: '/questions/xnQuestions/api/list',
+        method: 'get',
     })
-  }
+}
+//试题回答检查
+export const checkapi = (params:any)=> {
+  return request({
+      url: '/questionrecords/xnQuestionRecords/check',
+      method: 'get',
+      params
+  })
+}
+//获取实验目标
+export const getExperiment = ()=>{
+  return request({
+    url:'/experimental/xnExperimental/selectExperimental',
+    method:'get',
+  })
+}

src/main.ts

@@ -7,7 +7,14 @@ import 'element-plus/dist/index.css'; // 引入 Element Plus 的样式文件
 import '@/utils/rem.js'
 import DataVVue3 from '@kjgl77/datav-vue3'
 import pinia from '@/store/index'
+//引入依赖和语言
+import 'highlight.js/styles/stackoverflow-light.css'
+// import hljs from "highlight.js/lib/core";
+// import hljsVuePlugin from "@highlightjs/vue-plugin";
+// import java from "highlight.js/lib/languages/java";
 const app = createApp(App)
+// hljs.registerLanguage("java", java);
+// app.use(hljsVuePlugin);
 app.use(ElementPlus)
 app.use(pinia)
 app.use(DataVVue3)

src/permissions.ts

@@ -14,7 +14,16 @@ router.beforeEach((to: any, from: any, next: any) => {
   } else {
     const token = getToken();
     if (token) {
-      next();
+        console.log(store.userInfo);
+        
+      if (store.userInfo) {
+        next();
+      } else {
+        store.getUserInfo().then(() => {
+          next();
+        });
+      }
+      //   next();
     } else {
       next("/login");
     }

src/router/index.ts

@@ -19,7 +19,12 @@ const routerList: any = [
         path: "program",
         name: "Program",
         component: () => import("@/views/program/index.vue"),
-      }
+      },
+      {
+        path: "compiler",
+        name: "Compiler",
+        component: () => import("@/views/compiler/index.vue"),
+      },
     ],
   },
   {
@@ -27,6 +32,11 @@ const routerList: any = [
     name: 'SubjectTest',
     component: () => import('@/views/subjectTest/index.vue'),
   },
+  {
+    path: '/target', // 实验目标（简介）
+    name: 'Target',
+    component: () => import('@/views/target/index.vue'),
+  },
   {
     path: '/login',
     name: 'Login',

src/store/modules/setting.ts

@@ -16,6 +16,11 @@ const settingStore = defineStore("settingStore", {
       sdsz: 0, // 湿度数值
       falg: false,
       timer: null,
+      experimentPreservation: false, // 是否设计好实验
+      saveRoute: false, // 是否保存路由
+      stepIds: null,
+      wenduCode: null,
+      shiduCode:null
     };
   },
   actions: {
@@ -27,7 +32,7 @@ const settingStore = defineStore("settingStore", {
 
       this.qw = value;
     },
-    setValue(value: number, name: string) {
+    setValue(value: number | boolean, name: string) {
       this[name] = value;
     },
     openHeating() {
@@ -46,7 +51,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;
@@ -61,6 +66,40 @@ const settingStore = defineStore("settingStore", {
           clearInterval(interval);
         }
 
+        time += 1; // 每秒增加 1s
+      }, 1000);
+    },
+    simulateHeatingAndHumidifying() {
+      // 计算时间常数
+      const a = (100000 * this.zl * this.srmj) / this.jrgl;
+      const b = (10000 * this.jsmj) / this.jsgl;
+
+      let time = 0;
+      let currentTemp = this.qw;
+      let currentHumidity = this.cssd;
+
+      const interval = setInterval(() => {
+        // 计算温度
+        currentTemp = (1 - Math.exp(-time / a)) * 100 + this.qw;
+        if (currentTemp > 100) currentTemp = 100;
+
+        // 计算湿度
+        currentHumidity = (1 - Math.exp(-time / b)) * 100 + this.cssd;
+        if (currentHumidity > 100) currentHumidity = 100;
+
+        console.log(
+          `时间: ${time}s, 温度: ${currentTemp.toFixed(
+            2
+          )}°C, 湿度: ${currentHumidity}%RH`
+        );
+        this.qw = currentTemp >= 100 ? 100 : currentTemp;
+        this.cssd = currentHumidity >= 100 ? 100 : Number(currentHumidity.toFixed(2));
+        // 停止加热 & 加湿
+        if (currentTemp >= 100 && currentHumidity >= 100) {
+          console.log("温度和湿度均达到上限，停止模拟！");
+          clearInterval(interval);
+        }
+
         time += 1; // 每秒增加 1s
       }, 1000);
     },

src/store/modules/user.ts

@@ -1,30 +1,37 @@
 import { defineStore } from "pinia";
-import { getToken,setToken } from "@/utils/auth";
+import { getToken, setToken } from "@/utils/auth";
-import { login } from "@/api";
+import { login, getUserInfo } from "@/api";
 import { ElMessage } from "element-plus";
 const userStore = defineStore("userStore", {
   state: () => ({
     token: getToken(),
-    userInfo: {},
+    userInfo: null,
   }),
   actions: {
     async logIn(form: any) {
       console.log(form);
       const res: any = await login(form);
       // if(res.code === 500) return ElMessage.error(res.msg)
-      if(res.code !== 200) {
+      if (res.code !== 200) {
-        ElMessage.error(res.msg)
+        ElMessage.error(res.msg);
-        return false
+        return false;
       }
       this.token = res.result.token;
       this.userInfo = res.result.userInfo;
       setToken(this.token);
       console.log(res);
-      return true
+      return true;
     },
     clearStatus() {
       this.token = "";
-      this.userInfo = {};
+      this.userInfo = null;
+    },
+    async getUserInfo() {
+      const res:any = await getUserInfo();
+      this.userInfo = res.result.userInfo;
+      console.log(res);
+
+      // this.userInfo = res.result;
     },
   },
 });

src/utils/index.ts

@@ -0,0 +1,12 @@
+// 格式化时间 年月日时分秒
+export function formatDate(date: any) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0"); 
+    console.log(`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);
+    
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}

src/utils/setStep.ts

@@ -0,0 +1,16 @@
+import { setStep, getStepId } from "../api/index";
+import settingStore from "../store/modules/setting";
+import pinia from "@/store";
+const useStore = settingStore(pinia);
+export const setStepEvent = async (step: number, controlsSt: string) => {
+  let id: any = null;
+  if (!useStore.stepIds) {
+    const data: any = await getStepId();
+    useStore.stepIds = data.result.map((item: any) => item.id);
+    id = useStore.stepIds[step - 1];
+    // return id;
+    await setStep({ id, controlsSt });
+  } else {
+    await setStep({ id: useStore.stepIds[step - 1], controlsSt });
+  }
+};

src/views/compiler/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+    <div class="main">
+      <!-- <pre><code ref="editor" class="edit-text html" contenteditable="true" @input="highlightCode">console.log('Hello, World!');</code></pre> -->
+      <div class="edit-text" contenteditable="true" spellcheck="false">
+        <!-- <highlightjs ref="editor" :language="language" :code="code" v-model="code" contenteditable="true" @input="highlightCode"></highlightjs> -->
+        oisafkahsdkjfhasdf sdfhkjsahfdlkjas \n /n sldhfkajshfd salkdhflkasf asfasdf
+      </div>
+    </div>
+    <div class="setting">
+        <el-button>保存</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+
+import hljs from "highlight.js/lib/core";
+
+const editor = ref(null);
+const code = ref('console.log("Hello, World!");');
+const highlightCode = () => {
+  const codeBlock = editor.value;
+  console.log(codeBlock);
+
+  if (codeBlock) {
+    hljs.highlightElement(code);
+  }
+};
+
+onMounted(() => {
+  // highlightCode();
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  margin-top: 100px;
+  /* position: relative; */
+}
+
+.main {
+  width: 1442px;
+  height: 753px;
+  background-color: pink;
+  background: url("../../assets/images/idea.png") no-repeat;
+  background-size: contain;
+  background-position: center center;
+  position: relative;
+}
+
+.edit-text {
+  position: absolute;
+  left: 410px;
+  top: 60px;
+  width: 700px;
+  height: 670px;
+  background-color: #1e1e1e;
+  color: #fff;
+  font-family: "Courier New", monospace;
+  padding: 10px;
+  border-radius: 5px;
+  overflow: auto;
+  outline: none;
+  line-height: 30px;
+}
+.setting{
+    position: absolute;
+    top: 20px;
+    right: 100px;
+}
+</style>

src/views/designRoute/components/wenBenYu.vue

@@ -6,12 +6,31 @@
     <div class="W">W</div>
     <div class="t">t</div>
     <div class="T">T</div>
-    <textarea type="textarea" style="width: 100%;height: 100%;border: none;font-size: 14px;line-height: 30px;" />
+    <textarea
+      type="textarea"
+      @change="wenduCodeChange"
+      style="
+        width: 100%;
+        height: 100%;
+        border: none;
+        font-size: 14px;
+        line-height: 30px;
+      "
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, nextTick, watch, onMounted } from "vue";
+import { ref } from "vue";
+import settingStore from "@/store/modules/setting";
+const useSettingStore = settingStore();
+const value = ref("");
+let code = "float a;a=1000000*M*S/W;T+(1-exp(-t/a))*100+T0;if(T>=100){T=100;}";
+const wenduCodeChange = (e) => {
+  // 将文本去除换行转为字符串
+  useSettingStore.wenduCode = e.target.value.replace(/\n/g, "");
+  // console.log(e.target.value.replace(/\n/g, '') === code);
+};
 </script>
 
 <style scoped>
@@ -27,7 +46,6 @@ import { ref, computed, nextTick, watch, onMounted } from "vue";
   left: -25px;
   border: 1px solid #ccc;
   color: #fff;
-
 }
 .M {
   position: absolute;
@@ -35,7 +53,6 @@ import { ref, computed, nextTick, watch, onMounted } from "vue";
   left: -25px;
   border: 1px solid #ccc;
   color: #fff;
-
 }
 .S {
   position: absolute;
@@ -43,30 +60,26 @@ import { ref, computed, nextTick, watch, onMounted } from "vue";
   left: -17px;
   border: 1px solid #ccc;
   color: #fff;
-
 }
-.W{
+.W {
   position: absolute;
   top: 180px;
   left: -17px;
   border: 1px solid #ccc;
   color: #fff;
-
 }
-.t{
+.t {
   position: absolute;
   top: 240px;
   left: -17px;
   border: 1px solid #ccc;
   color: #fff;
-
 }
-.T{
+.T {
   position: absolute;
   top: 50%;
   right: -17px;
   border: 1px solid #ccc;
   color: #fff;
-
 }
 </style>

src/views/designRoute/components/wenBenYu2.vue

@@ -6,12 +6,18 @@
     <!-- <div class="W">W</div> -->
     <div class="t">t1</div>
     <div class="T">R</div>
-    <textarea type="textarea" style="width: 100%;height: 100%;border: none;font-size: 14px;line-height: 30px;" />
+    <textarea type="textarea" @change="wenduCodeChange" style="width: 100%;height: 100%;border: none;font-size: 14px;line-height: 30px;" />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, nextTick, watch, onMounted } from "vue";
+import { ref } from "vue";
+import settingStore from "@/store/modules/setting";
+const useSettingStore = settingStore();
+const value = ref("");
+const wenduCodeChange = (e) => {
+  useSettingStore.shiduCode = e.target.value.replace(/\n/g, "");
+}
 </script>
 
 <style scoped>

src/views/designRoute/index.vue

@@ -69,8 +69,13 @@ 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 { useRouter } from "vue-router";
+import  useSettingStore  from "@/store/modules/setting";
+import { setStepEvent } from "@/utils/setStep";
+import { formatDate } from "@/utils";
 let graph = null;
-
+const router = useRouter();
+const settingStore = useSettingStore();
 // 定义通用的端口配置，避免重复
 const portConfig = {
   top: {
@@ -165,12 +170,12 @@ onMounted(() => {
         });
       },
       validateConnection({ sourceCell, targetCell }) {
-            // 禁止连接到自身
+        // 禁止连接到自身
-            if (sourceCell && targetCell && sourceCell.id === targetCell.id) {
+        if (sourceCell && targetCell && sourceCell.id === targetCell.id) {
-                return false;
+          return false;
-            }
-            return true;
         }
+        return true;
+      },
     },
     highlighting: {
       magnetAdsorbed: {
@@ -326,7 +331,7 @@ onMounted(() => {
   // 添加代码控件1节点
   graph.addNode({
     shape: "custom-vue-node-wenBenYu",
-    id:'32',
+    id: "32",
     width: 210,
     height: 300,
     x: 320,
@@ -366,7 +371,7 @@ onMounted(() => {
   // 添加代码控件2节点
   graph.addNode({
     shape: "custom-vue-node-wenBenYu2",
-    id:'33',
+    id: "33",
     width: 210,
     height: 300,
     x: 400,
@@ -795,11 +800,11 @@ onMounted(() => {
   });
   graph.on("edge:connected", ({ edge }) => {
     const data = {
-        type: "add",
+      type: "add",
-        edge: edge.toJSON(), // toJSON 会自动包含正确的 port 数据
+      edge: edge.toJSON(), // toJSON 会自动包含正确的 port 数据
     };
     saveToLocalStorage(data);
-})
+  });
 
   // 记录删除连线
   graph.on("edge:removed", ({ edge }) => {
@@ -810,11 +815,11 @@ onMounted(() => {
     saveToLocalStorage(data);
   });
   setTimeout(() => {
-    restoreGraph()
+    restoreGraph();
   }, 1000);
-  graph.on('edge:added', ({ edge }) => {
+  graph.on("edge:added", ({ edge }) => {
-    console.log('新增连线数据:', edge.toJSON());
+    console.log("新增连线数据:", edge.toJSON());
-})
+  });
   // const nodes = graph.getNodes();
   // console.log(nodes);
   //   const data = graph.toJSON();
@@ -830,16 +835,44 @@ const onUndo = () => {
 const onRedo = () => {
   graph.redo();
 };
+const wenduCode = "float a;a=1000000*M*S/W;T+(1-exp(-t/a))*100+T0;if(T>=100){T=100;}";
+const shiduCode = "float b;a=10000*S0/W1;R+(1-exp(-t1/b))*100+R0;if(R>=100){R=100;}";
 const onSave = () => {
-  if (standardData.length !== formatEdges().length)
+  setStepEvent(3, formatDate(new Date()));
+  // console.log(removeDuplicateEdges(formatEdges()), standardData);
+  // return
+  if (standardData.length !== removeDuplicateEdges(formatEdges()).length)
     return ElMessage.error("请完善数据");
   validateRelationships(standardData, formatEdges());
+  if(settingStore.wenduCode != wenduCode){
+    return ElMessage.error("温度代码编写错误");
+  }
+  if(settingStore.shiduCode != shiduCode){
+    return ElMessage.error("湿度代码编写错误");
+  }
   ElMessage.success("保存成功");
+  settingStore.setValue( true,'saveRoute');
+  router.push('/program')
   // const data = graph.toJSON();
   // console.log(data);
   // const edges = graph.getEdges();
   // console.log(formatEdges());
 };
+function removeDuplicateEdges(edges) {
+    const seen = new Set();
+    return edges.filter(edge => {
+        // 生成唯一键，无视 source 和 target 的顺序
+        const key = edge.source < edge.target 
+            ? `${edge.source}-${edge.target}` 
+            : `${edge.target}-${edge.source}`;
+
+        if (seen.has(key)) {
+            return false;
+        }
+        seen.add(key);
+        return true;
+    });
+}
 const formatEdges = () => {
   const edges = graph.getEdges();
   // console.log(edges);
@@ -1081,38 +1114,38 @@ const onTip = () => {
 function restoreGraph() {
   const operations = loadFromLocalStorage();
 
-    // 先恢复节点
+  // 先恢复节点
-    operations
+  operations
-        .filter(op => op.type === 'add' && op.node)
+    .filter((op) => op.type === "add" && op.node)
-        .forEach(op => graph.addNode(op.node));
+    .forEach((op) => graph.addNode(op.node));
 
-    // 再恢复连线
+  // 再恢复连线
-    operations
+  operations
-        .filter(op => op.type === 'add' && op.edge)
+    .filter((op) => op.type === "add" && op.edge)
-        .forEach(op => {
+    .forEach((op) => {
-            const edgeData = op.edge;
+      const edgeData = op.edge;
 
-            // 若发现 port 数据缺失，补上默认 port ID
+      // 若发现 port 数据缺失，补上默认 port ID
-            if (!edgeData.source.port) edgeData.source.port = "70";
+      if (!edgeData.source.port) edgeData.source.port = "70";
-            if (!edgeData.target.port) edgeData.target.port = "70";
+      if (!edgeData.target.port) edgeData.target.port = "70";
 
-            graph.addEdge(edgeData);
+      graph.addEdge(edgeData);
-        });
+    });
 }
-const SESSION_KEY = 'graph_operations1';
+const SESSION_KEY = "graph_operations1";
 
 function saveToLocalStorage(data) {
-    const operations = JSON.parse(localStorage.getItem(SESSION_KEY)) || [];
+  const operations = JSON.parse(localStorage.getItem(SESSION_KEY)) || [];
-    operations.push(data);
+  operations.push(data);
-    localStorage.setItem(SESSION_KEY, JSON.stringify(operations));
+  localStorage.setItem(SESSION_KEY, JSON.stringify(operations));
 }
 
 function loadFromLocalStorage() {
-    return JSON.parse(localStorage.getItem(SESSION_KEY)) || [];
+  return JSON.parse(localStorage.getItem(SESSION_KEY)) || [];
 }
 
 function clearLocalStorage() {
-    localStorage.removeItem(SESSION_KEY);
+  localStorage.removeItem(SESSION_KEY);
 }
 </script>
 

src/views/largeDataScreen/home.vue

@@ -131,6 +131,71 @@
             </div>
           </div>
         </el-popover>
+        <el-popover
+          placement="right"
+          :width="260"
+          trigger="contextmenu"
+          v-if="product"
+          ref="popover2"
+        >
+          <template #reference>
+            <div class="item">
+              <div class="icon">
+                <img
+                  style="width: 100%"
+                  src="@/assets/images/bg14.png"
+                  alt=""
+                  srcset=""
+                />
+              </div>
+              <div class="file-name">LabVIEW2014</div>
+            </div>
+          </template>
+          <div class="setting-list">
+            <div class="item" @click="openSrttingDialog">
+              <div class="icon">
+                <!-- <img src="@/assets/images/home.png" alt="" /> -->
+              </div>
+              <div class="name" style="font-weight: 700">打开</div>
+            </div>
+            <div class="item">
+              <div class="icon">
+                <img src="@/assets/images/home.png" alt="" />
+              </div>
+              <div class="name">管理员身份运行</div>
+            </div>
+            <div class="item">
+              <div class="icon">
+                <img src="@/assets/images/home.png" alt="" />
+              </div>
+              <div class="name">解压到当前文件夹</div>
+            </div>
+            <div class="item">
+              <div class="icon">
+                <img src="@/assets/images/home.png" alt="" />
+              </div>
+              <div class="name">解压到...</div>
+            </div>
+            <div class="item">
+              <div class="icon">
+                <img src="@/assets/images/home.png" alt="" />
+              </div>
+              <div class="name">解压到"LabVIEW2024 (64位)\"</div>
+            </div>
+            <div class="item">
+              <div class="icon">
+                <img src="@/assets/images/home.png" alt="" />
+              </div>
+              <div class="name">其他压缩命令</div>
+            </div>
+            <div class="item">
+              <div class="icon">
+                <img src="@/assets/images/home.png" alt="" />
+              </div>
+              <div class="name">Edit width Notepad++</div>
+            </div>
+          </div>
+        </el-popover>
       </div>
       <div class="openFilesGroupDialg">
         <div class="step1" v-show="step === 1">
@@ -248,22 +313,155 @@
         <div class="title">用户信息</div>
         <div class="tip">请输入以下信息</div>
         <div class="name">
-          <span>全名：</span><el-input style="width: 280px;margin-left: 30px;"></el-input>
+          <span>全名：</span><el-input style="width: 280px;margin-left: 30px;"placeholder="软件安全管家"></el-input>
         </div>
         <div class="unit">
-          <span>单位：</span><el-input style="width: 280px;margin-left: 30px;"></el-input>
+          <span>单位：</span><el-input style="width: 280px;margin-left: 30px;"placeholder="中国大陆"></el-input>
+        </div>
+      </div>
+      <div class="step3" v-show="installationStep === 3">
+        <div class="title">序列号</div>
+        <div class="tip">请输入以下产品序列号</div>
+        <div class="serial">
+          <div class="name" >序列号：</div>
+          <el-form label-width="400px" style="max-width: 720" >
+              <el-form-item label="LabVIEW 2014（基本版 / 完整版 / 专业版）："label-width="307px">
+                <el-input style="width: 300px;margin-left: 95px;" />
+              </el-form-item>
+              <el-form-item label="应用程序生成器 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白：">
+                <el-input style="width: 300px"/>
+              </el-form-item>
+              <el-form-item label="Report Generation 工具包 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白：">
+                <el-input style="width: 300px"/>
+              </el-form-item>
+              <el-form-item label="atabase 工具包 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白）：">
+                <el-input style="width: 300px"/>
+              </el-form-item>
+          </el-form>
         </div>
       </div>
+      <div class="step4" v-show="installationStep === 4">
+        <div class="title">目标目录</div>
+        <div class="tip">选择主安装目录</div>
+        <div class="item">选择 NI 软件的安装文件夹</div>
+        <el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;"/>
+        <el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button>
+        <div class="item">选择NI LabVIEW 2014的安装文件夹</div>
+        <el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;"/>
+        <el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button>
+      </div>
+      <div class="step5" v-show="installationStep === 5">
+        <div class="title">组件</div>
+        <div class="tip">选择需要安装的组件</div>
+        <div class="headers">
+          <div class="header">
+            <div class="item">NI LabVIEW 2014</div>
+            <div class="item">Database Connectivity工具包</div>
+            <div class="item">Report Generation工具包</div>
+            <div class="item">V Package Manager 2014</div>
+            <div class="item">附加组件</div>
+            <div class="item">HI Measurement & Automation Explorer</div>
+            <div class="item">设备驱动程序</div>
+          </div>
+          <div class="image-container">
+              <p style="margin-bottom: 20px;">测量和仪器的图形化编程</p>
+              <img src="@/assets/images/bg13.png" alt="">
+              <p style="margin-top: 20px;">该组件将安装至本地硬盘</p>
+          </div>
+      </div>
+      <div class="name">选择NI LabVIEW 2014的安装文件夹</div>
+        <el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;"/>
+        <el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button>
+      </div>
+      <div class="step6" v-show="installationStep === 6">
+        <div class="title">产品通知</div>
+        <div class="tip">请查看所选配置的相关信息。</div>
+        <div class="item">
+          警告：可能已启用Windows防火墙默认状态下，Windows操作系统启用防火墙。首次打开LabVIEW时，可能会弹出一个对话框，要求您选择是否从网络接收信息。建议选择“解除阻止”，以使用LabVIEW的所有网络功能。详细信息请访问ni.com/info，并输入信息代码expm69查询。
+          <br>产品注意事项
+          <br>安装该产品之前，必须安装Microsoft Office XP或更高版本。“Report Generation工具包-用于Microsoft Office”提供的一组VI可用于创建和编辑Microsoft Word和Microsoft Excel格式的报表。通过报表生成工具，用户可使用Word、Excel或自定义模板创建风格一致的专业报表；减少报表显示、打印或保存前编程的工作量。还可以在*.rd文档和Excel工作表中执行Visual Basic宏，实现自定义的功能。更多关于Report Generation工具包的信息，请访问ni.com/info并输入信息代码report。
+          <br>正在安装自等社过猪保要票影的前我地,是器得品和更新。如执行搜索，则gational Instruments将在遵循保密协议的前提下，使用您的搜索查询来改进搜索结果和相关性。
+        </div>
+      </div>
+      <div class="step6" v-show="installationStep === 7">
+        <div class="title">产品通知</div>
+        <div class="tip">请查看所选配置的相关信息。</div>
+        <div class="item">
+          安装须知：本协议具合同效力。在你方下载软件和/或完成软件安装过程之前，请仔细阅读本协议。一旦你方下载和/或点击相应的按钮，从而完成软件安装过程，即表示你方同意本协议条款并愿意受本协议的约束。若你方不愿意成为本协议的当事方，并不接受本协议所有条款和条件的约束，请点击相应的按钮取消安装过程，即不要安装或使用软件，并在收到软件之日起三十(30)日内将软件(及所有随附书面材料及其包装)退还至获取该软件的地点，所有退还事宜都应遵守退还发生时适用的NI退还政策。.com/info，并输入信息代码expm69查询。
+          <br>定义 在本协议中，下列术语的含义如下本National Instruments许可适用于软件LabVIEW 204
+        </div>
+        <div class="radio-container">
+          <el-radio-group v-model="radio1">
+            <el-radio value="接受" size="large">我接受上述2条许可协议。</el-radio>
+            <el-radio value="不接受" size="large">我不接受某些许可协议。</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="step8" v-show="installationStep === 8">
+        <p class="name">总进度</p>
+        <el-progress :text-inside="true" :stroke-width="20" :percentage="80" style="margin-bottom: 25px"/>
+        <p class="name">复制新文件</p>
+        <el-progress :percentage="100" status="success" :stroke-width="20" />
+      </div>
+      <div class="step8" v-show="installationStep === 9">
+        <p class="name">总进度</p>
+        <el-progress :text-inside="true" :stroke-width="20" :percentage="80" style="margin-bottom: 25px"/>
+        <p class="name">复制新文件</p>
+        <el-progress :percentage="100" status="success" :stroke-width="20" />
+      </div>
+      <div class="step11" v-show="installationStep === 11">
+        <div class="item">必须重新启动计算机才能完成当前操作。<br>如需马上安装硬件，请关闭计算机。如需稍后重启计算机，在重启之前请不要运行该软件。</div>
+      </div>
     </div>
 
     <template #footer>
       <div class="dialog-footer">
         <el-button
+          v-show="installationStep === 11"
+          @click="Installation = false"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+          >稍后重启(A)</el-button
+        >
+        <el-button
+          v-show="installationStep === 11"
+          type="primary"
+          @click="Completed"
+          style="background-color: #0052d9; color: #fff; border: 0"
+        >
+          关闭计算机(S)
+        </el-button>
+        <el-button
+          v-show="installationStep === 11"
+          @click="Installation = false"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+          >重新启动(R)</el-button
+        >
+        <el-button
+          v-show="installationStep === 5"
+          @click="Installation = false"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+          >恢复默认设置</el-button
+        >
+        <el-button
+          v-show="installationStep === 5"
           @click="Installation = false"
-          style="background-color: #f3f3f3; color: #fff; border-color: #ccc"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+          >磁盘占用</el-button
+        >
+        <el-button
+          v-show="installationStep === 6||installationStep === 7||installationStep === 8||installationStep === 9"
+          @click="Installation = false"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+          >保存文件</el-button
+        >
+        <el-button
+          v-if="installationStep === 11 ==false"
+          @click="Installation = false"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
           >上一步</el-button
         >
         <el-button
+          v-if="installationStep === 11 ==false"
           type="primary"
           @click="setInstallationStep"
           style="background-color: #0052d9; color: #fff; border: 0"
@@ -271,15 +469,84 @@
           下一步
         </el-button>
         <el-button
+          v-if="installationStep === 11 ==false"
           type="primary"
           @click="Installation = false"
-          style="background-color: #f3f3f3; color: #fff; border-color: #ccc"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
         >
           取消
         </el-button>
       </div>
     </template>
   </el-dialog>
+  <el-dialog
+            v-model="Popup"
+            width="650px"
+            height="500px"
+            top="10%"
+            style="left: 5%;padding: 0;"
+          >
+          <template #header>
+            <div class="dialog-header" >安装LabVIEW硬件支持</div>
+          </template>
+          <div class="installation-box">
+          <div class="step9" v-show="installationStep === 9">
+            <div style="margin-top: 8px; margin-bottom: 80px;font-size: 16px;line-height: 1.6;letter-spacing: 0.5px;font-weight: bold">如需使LabVIEW支持硬件设备，必须安装相应的设备驱动程序即便以前版本的LabVIEW已经安装相应设备驱动程序，仍需。需为当前版本的LabVIEW重新安装。</div>
+          <div class="item">如所需文件处于其他位置，请在下面输入相应路径。</div>
+          <el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;margin-left: 15px;"/>
+          <el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button>
+          </div>
+          <div class="step10" v-show="installationStep === 10"style="height: 250px;font-weight: bold;font-size: 16px;">
+          安装完成!
+          </div>
+          </div>
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button
+                v-show="installationStep === 9"
+                size="large"
+                @click="Installation = false"
+                style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+                >安装支持</el-button
+              >
+              <el-button
+                v-show="installationStep === 9"
+                type="primary"
+                size="large"
+                @click="setInstallationStep"
+                style="background-color: #0052d9; color: #fff; border: 0"
+              >
+                不需要支持
+              </el-button>
+              <el-button
+                v-show="installationStep === 10"
+                size="large"
+                @click="Installation = false"
+                style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+                >上一步</el-button
+              >
+              <el-button
+                v-show="installationStep === 10"
+                type="primary"
+                size="large"
+                @click="setInstallationStep"
+                style="background-color: #0052d9; color: #fff; border: 0"
+                
+              >
+                下一步
+              </el-button>
+              <el-button
+                v-show="installationStep === 10"
+                size="large"
+                
+                @click="Installation = false"
+                style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+                >完成</el-button
+              >
+            </div>
+          </template>
+        
+        </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -287,11 +554,14 @@ import { ref } from "vue";
 type Falg = boolean;
 type Step = number;
 const falg = ref<Falg>(false);
+const radio1 = ref('接受')
+const product = ref<Falg>(false);
 const step = ref<Step>(0);
 const popover1 = ref<any>(null);
 const popover2 = ref<any>(null);
 const dialogVisible = ref<Falg>(false);
 const Installation = ref<Falg>(false);
+const Popup = ref<Falg>(false);
 const installationStep = ref<Step>(1);
 const checkList = ref<Step[]>([1, 2]);
 const unpack = (): void => {
@@ -316,7 +586,23 @@ const openSrttingDialog = (): void => {
 };
 const setInstallationStep = (): void => {
   installationStep.value++;
+  if(installationStep.value == 9){
+    Popup.value = true
+  }
+  if(installationStep.value == 10){
+    Installation.value = false
+    Popup.value = true
+  }
+  if(installationStep.value == 11){
+    Installation.value = true
+    Popup.value = false
+  }
 };
+const Completed = ():void => {
+  Installation.value = false
+  Popup.value = false
+  product.value = true;
+}
 </script>
 
 <style scoped lang="scss">
@@ -332,8 +618,8 @@ const setInstallationStep = (): void => {
     height: 753px;
     // background-color: pink;
     .app-list {
-      width: 100%;
+      width: 500px;
-      height: 100%;
+      height: 500px;
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
@@ -345,7 +631,7 @@ const setInstallationStep = (): void => {
         display: flex;
         flex-direction: column;
         align-items: center;
-        justify-content: center;
+        // justify-content: center;
         cursor: pointer;
         &:hover {
           border: 1px solid #41d3ff;
@@ -537,28 +823,183 @@ const setInstallationStep = (): void => {
     }
   }
   .step2 {
-    min-height: 230px;
+          min-height: 230px;
-    .title {
+          .title {
-      font-size: 24px;
+            font-size: 24px;
-      color: #585858;
+            color: #585858;
-      font-weight: 700;
+            font-weight: 700;
-      margin-top: 10px;
+            margin-top: 10px;
+          }
+          .tip {
+            font-size: 16px;
+            line-height: 30px;
+            color: #585858;
+
+            margin-top: 10px;
+          }
+          .name,
+          .unit {
+            padding-left: 37px;
+            margin-top: 25px;
+
+          }
+  }
+  .step3{
+              // width: 540px;
+              // height: 500px;
+              // border-radius: 5px;
+              // background-color: #fff;
+              .title {
+                font-size: 25px;
+                font-weight: bold; /* 设置文字加粗 */
+              }
+              .tip{
+                margin-top: 20px;
+                font-size: 15px;
+                font-weight: bold; /* 设置文字加粗 */
+              }
+              .serial{
+                margin-top: 40px;
+                .name{
+                  font-size: 15px;
+                  font-weight: bold; /* 设置文字加粗 */
+                  margin-left: 400px;
+                  margin-bottom: 15px;
+                }
+                :deep(.el-form-item__label ){
+                  text-align: left; /* 设置label左对齐 */
+                  line-height: 20px;
+                }
+              }
     }
-    .tip {
+    .step4{
-      font-size: 16px;
+      .title {
-      line-height: 30px;
+                font-size: 25px;
-      color: #585858;
+                font-weight: bold; /* 设置文字加粗 */
+              }
+      .tip  {
+                margin-top: 20px;
+                font-size: 15px;
+                font-weight: bold; /* 设置文字加粗 */
+              }
+      .item{
+                margin-top: 50px;
+      }
+      .item:before {
+                content: "• "; /* 在内容前添加一个小点和空格 */
+                color: rgb(0, 0, 0); /* 设置小点的颜色 */
+                font-size: 15px; /* 设置小点的大小 */
+                margin-right: 5px; /* 设置小点和文本之间的间距 */
+              }
+    }
+    .step5{
+      .title {
+                font-size: 25px;
+                font-weight: bold; /* 设置文字加粗 */
+              }
+      .tip  {
+                margin-top: 20px;
+                font-size: 15px;
+                font-weight: bold; /* 设置文字加粗 */
+              }
+      .headers{
+                display: flex; /* 使用Flexbox布局 */
+                justify-content: space-between; /* 让子元素在容器中左右对齐 */
+      }
+      .header{
+                display: flex; /* 使用Flexbox布局 */
+                flex-direction: column; /* 设置子元素竖向排列 */
+                align-items: flex-start; /* 对齐方式，让子元素的起始位置对齐 */
+                width: auto;
+      }
+      .item{
+                margin-top: 20px;
+                margin-left: 30px;
+                font-size: 13px;
                 
-      margin-top: 10px;
+      }
+      .item:before {
+                content: '▸ '; /* 在内容前添加一个小点和空格 */
+                color: rgb(0, 0, 0); /* 设置小点的颜色 */
+                font-size: 13px; /* 设置小点的大小 */
+                margin-right: 5px; /* 设置小点和文本之间的间距 */
+              } 
+      .image-container {
+            background-color: #ebebeb;
+            width: 300px; /* 或者根据需要调整宽度 */
+            margin-left: auto; /* 推动到右侧 */
+            padding: 10px;
+            display: flex; /* 启用Flexbox布局 */
+            flex-direction: column; /* 设置子元素竖向排列 */
+            justify-content: center; /* 垂直居中 */
+            align-items: center; /* 水平居中 */
+          }
+      .name{
+        margin-top: 40px;
+      }
+      .name:before {
+                content: "• "; /* 在内容前添加一个小点和空格 */
+                color: rgb(0, 0, 0); /* 设置小点的颜色 */
+                font-size: 15px; /* 设置小点的大小 */
+                margin-right: 5px; /* 设置小点和文本之间的间距 */
+              }       
     }
-    .name,
+    .step6{
-    .unit {
+      position: relative;
-      padding-left: 37px;
+      .title {
-      margin-top: 25px;
+                font-size: 15px;
+                font-weight: bold; /* 设置文字加粗 */
+                color: #f2994a;
+                margin-bottom: 10px;
+              }
+      .item{
+        margin-top: 40px;
+        margin-bottom: 40px;
+        line-height: 1.6; /* 设置行高 */
+        letter-spacing: 0.5px; /* 设置字母间距 */
+      }
+      .radio-container{
+        position: absolute;
+        bottom: -65px;
+        right: -10px;
+      }
 
+      .radio-container .el-radio-group {
+        display: flex;
+        flex-direction: column; /* 设置为列方向 */
+        align-items: flex-start; /* 左对齐 */
+      }
+      .radio-container .el-radio {
+        margin-bottom: -10px; /* 单选按钮之间的间距 */
+      }
     }
+    .step8{
+      padding: 50px;
+      // width: 600px;
+      .name{
+        margin-bottom: 8px;
+        font-size: 15px;
+        font-weight: bold; /* 设置文字加粗 */
+      }
       
-  }
+    }
+    .step9{
+      .item:before {
+                content: "• "; /* 在内容前添加一个小点和空格 */
+                color: rgb(0, 0, 0); /* 设置小点的颜色 */
+                font-size: 15px; /* 设置小点的大小 */
+                margin-right: 5px; /* 设置小点和文本之间的间距 */
+              }
+    }
+    .step11{
+      .item{
+        margin-bottom: 50px;
+        font-size: 15px;
+        font-weight: bold; /* 设置文字加粗 */
+        line-height: 1.5; /* 设置行高 */
+        letter-spacing: 0.5px; /* 设置字母间距 */
+      }
+    }
 }
 .dialog-header {
   padding: 20px;

src/views/program/components/yibiao.vue

@@ -9,7 +9,7 @@ import { onMounted, watch } from "vue";
 import * as echarts from "echarts";
 import settingStore from "@/store/modules/setting";
 const useSettingStore = settingStore();
-var value = useSettingStore.cssd * 100;
+var value = useSettingStore.cssd;
 var myChart = null;
 const initChart = () => {
   const option = {
@@ -187,7 +187,7 @@ const initChart = () => {
           fontSize: 20,
           distance: -70,
           formatter: function (params) {
-            var value = params.toFixed(0);
+            var value = params;
 
             if (value == 0.0) {
               return "0";
@@ -235,7 +235,7 @@ const initChart = () => {
         },
         detail: {
           formatter: function (params) {
-            return params / 100;
+            return params ;
           },
           fontSize: 30,
           color: "#fff",
@@ -261,7 +261,7 @@ onMounted(() => {
 watch(
   () => useSettingStore.cssd,
   (newValue) => {
-    value=newValue * 100
+    value=newValue
     setTimeout(() => {
       initChart();
     }, 100);

src/views/program/index.vue

@@ -43,7 +43,9 @@
     <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="onSave">{{
+      useSettingStore.experimentPreservation ? "运行" : "保存"
+    }}</el-button>
     <el-button @click="onTip">提示</el-button>
   </div>
   <div class="tip-view">
@@ -80,8 +82,11 @@ 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";
 const useSettingStore = settingStore();
+const router = useRouter();
 // console.log(useSettingStore.qw);
 
 // 为了协助代码演示
@@ -189,14 +194,20 @@ onMounted(() => {
   // 点击节点时显示编辑框
   graph.on("node:click", ({ cell }: any) => {
     // console.log(cell.store.previous.name);
-    // console.log(cell);
+    console.log(cell);
-
+    if (!useSettingStore.saveRoute) {
+      ElMessage({
+        message: "请先完成配置",
+        type: "warning",
+      });
+      return;
+    }
     if (
       cell.shape === "deom" ||
       cell.shape === "yibiao" ||
       cell.shape === "rect" ||
-      cell.store.previous.name === "wdsz" ||
+      cell.shape === "custom-text-wdsz" ||
-      cell.store.previous.name === "sdsz"
+      cell.shape === "custom-text-sdsz"
     )
       return;
     // if (cell.store.previous.name === "qw") {
@@ -220,7 +231,7 @@ onMounted(() => {
     // ]);
   });
 
-  graph.on("node:added", ({ node }:any) => {
+  graph.on("node:added", ({ node }: any) => {
     const data = {
       type: "add",
       node: node.toJSON(),
@@ -229,7 +240,7 @@ onMounted(() => {
     saveToLocalStorage(data);
   });
 
-  graph.on("node:removed", ({ node }:any) => {
+  graph.on("node:removed", ({ node }: any) => {
     const data = {
       type: "remove",
       id: node.id,
@@ -1057,7 +1068,40 @@ const saveNodeData = () => {
   if (falg.value) {
     const value = Number(selectedNodeData.value.label);
     // useSettingStore.setqw(value);
-    useSettingStore.setValue(value, selectedNodeData.value.name);
+    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);
 
@@ -1140,42 +1184,6 @@ const onRedo = () => {
 };
 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",
@@ -1196,6 +1204,156 @@ const onSave = () => {
       message: "请填写完整信息",
     });
   }
+  if (!useSettingStore.experimentPreservation) {
+    useSettingStore.setValue(true, "experimentPreservation");
+    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();
+    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");
@@ -1205,7 +1363,10 @@ const onSave = () => {
   console.log(csedNode.value);
   sdsz.value.label = useSettingStore.cssd;
   // useSettingStore.openHeating();
-  useSettingStore.calculateTemperature();
+  // useSettingStore.calculateTemperature();
+  useSettingStore.simulateHeatingAndHumidifying();
+  setStepEvent(4, formatDate(new Date()));
+  
   // const data = graph.toJSON();
   // console.log(data);
   // const edges = graph.getEdges();
@@ -1213,15 +1374,19 @@ const onSave = () => {
 };
 function hasExactNames(arr: any, names: any) {
   // 提取数组中所有的 name 值
-  const nameList = arr.map((obj:any) => obj.shape);
+  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.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);
+  return names.every(
+    (name: any) => nameList.filter((n: any) => n === name).length === 1
+  );
 }
 watch(
   () => useSettingStore.qw,
@@ -1234,10 +1399,22 @@ watch(
     }
   }
 );
+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) {
+function saveToLocalStorage(data: any) {
-  const operations = JSON.parse(localStorage.getItem(SESSION_KEY) as string) || [];
+  const operations =
+    JSON.parse(localStorage.getItem(SESSION_KEY) as string) || [];
   operations.push(data);
   localStorage.setItem(SESSION_KEY, JSON.stringify(operations));
 }
@@ -1253,7 +1430,7 @@ function clearLocalStorage() {
 function restoreGraph() {
   const operations = loadFromLocalStorage();
 
-  operations.forEach((op:any) => {
+  operations.forEach((op: any) => {
     if (op.type === "add") {
       graph.addNode(op.node);
     } else if (op.type === "remove") {

src/views/subjectTest/index.vue

@@ -15,19 +15,19 @@
             <p class="questions">共<span class="questions-count">10</span>题</p>
             <!-- 遍历题目 -->
             <div v-if="currentQuestionIndex < questions.length" class="txt">
-                <span>{{ currentQuestion.question }}</span>
+                <span>{{ currentQuestion }}</span>
             </div>
             <!-- 遍历选项 -->
             <div class="options">
                 <button
-                v-for="option in currentQuestion.options"
+                v-for="option in xnOptionsList"
-                :key="option.option"
+                :key="option.id"
-                :class="{ option: true, selected: selectedOption[currentQuestionIndex] === option.option }"
+                :class="['option', { 'selected': selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid == option.id }]"
-                @click="selectOption(option.option)"
+                @click="selectOption(option.id)"
                 class="option"
                 >
-                    <span class="option-letter">{{ option.option }}</span>
+                    <span class="option-letter">{{ option.optionName }}</span>
-                    {{ option.content  }}
+                    {{ option.optionText  }}
                 </button>
             </div>
             
@@ -46,6 +46,7 @@
 <script lang="ts" setup>
 import resultsAnnounced from '@/views/resultsAnnounced/index.vue'
 import settingStore from "@/store/modules/setting";
+import {subTestapi,checkapi} from '@/api/index.ts'
 import { ref,computed,onMounted, onUnmounted} from "vue"
 import { ElMessage } from 'element-plus'
     const setting = settingStore();
@@ -59,13 +60,15 @@ import { ElMessage } from 'element-plus'
         }
     }
     //右箭头
-    const SubRight =()=>{
+    const SubRight = async()=>{
+        const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
+        // answer.value = res.result;
+        console.log(selectedOption.value);
+        console.log(res,'res')
         // 如果答对了，进入下一题
-        if (selectedOption.value[currentQuestionIndex.value] === currentQuestion.value.correctAnswer) {
+        if (res.result == "success") {
-            if(currentSum.value < questions.length){
+            if(currentSum.value < questions.value.length){
-                setTimeout(() => {
+                currentQuestionIndex.value++; // 更新到下一题
-                    currentQuestionIndex.value++; // 更新到下一题
-                    }, 200); // 延迟0.2秒进入下一题
             }
             else{
                 ElMessage.success('答题已完成，请提交')
@@ -79,82 +82,79 @@ import { ElMessage } from 'element-plus'
             }
         }
     }
-    const questions = [
+    const questions = ref<any[]>([]);
-        {
+    const currentList = async ()=>{
-            //题目
+        const res:any = await subTestapi();
-            question: "根据基尔霍夫电压定律（KVL），下列说法正确的是：",
+        questions.value = res.result
-            //选项
+        console.log(res.result)
-            options: [
+        // console.log(questions.value[0].xnOptionsList[0].id)
-                { option: "A", content: "在任一瞬时，沿任一闭合回路各段电压的代数和为零。" },
+        // console.log(questions.value,'questions1.value')
-                { option: "B", content: "在任一瞬时，沿任一闭合回路各段电压的代数和不为零。" },
+    }
-                { option: "C", content: "在任一瞬时，沿任一闭合回路各段电压的代数和为正。" },
-                { option: "D", content: "在任一瞬时，沿任一闭合回路各段电压的代数和为负。" }
-            ],
-            correctAnswer: "A" // 正确答案
-        },
-        {
-            question: "根据欧姆定律，下列说法正确的是：",
-            options: [
-                { option: "A", content: "电流与电压成反比，与电阻成正比。" },
-                { option: "B", content: "电流与电压成正比，与电阻成反比。" },
-                { option: "C", content: "电流与电压和电阻无关。" },
-                { option: "D", content: "电流与电压成正比，与电阻成正比。" }
-            ],
-            correctAnswer: "B" // 正确答案
-        },
-        {
-            question: "在电路分析中，欧姆定律是一个基本而重要的原理，它描述了电流、电压和电阻之间的关系。根据欧姆定律，通过导体的电流与导体两端的电压成正比，与导体的电阻成反比。请根据这一定律，选择下列哪个选项最准确地描述了这一关系？此外，考虑到实际应用中，导体的电阻可能会受到温度、材料和几何尺寸等因素的影响，这些因素如何改变电流与电压和电阻之间的关系？",
-            options: [
-                { option: "A", content: "电流与电压成正比，与电阻成正比。" },
-                { option: "B", content: "电流与电压成正比，与电阻成反比。" },
-                { option: "C", content: "电流与电压成反比，与电阻无关。" },
-                { option: "D", content: "电流与电压和电阻均无关，仅受外部磁场影响。" }
-            ],
-            correctAnswer: "C" // 正确答案
-            }
-    ];
     // 当前题目的索引
     const currentQuestionIndex = ref(0);
     //计算当前题目的序号（从1开始）
     const currentSum = computed(() => currentQuestionIndex.value + 1);
     // 当前题目
-    const currentQuestion = computed(() => questions[currentQuestionIndex.value]);
+    const currentQuestion = computed(() => {
+        // 确保 questions.value 至少有一个元素
+        if (questions.value.length > 0) {
+            return questions.value[currentQuestionIndex.value].questionText;
+        }
+        return '';
+        });
+    const xnOptionsList =computed(() =>{
+        if (questions.value.length > 0) {
+            return questions.value[currentQuestionIndex.value].xnOptionsList
+        }
+        console.log(selectedOption.value)
+        return [];
+    })
     // 当前选中的按钮索引
-    const selectedOption = ref<string[]>(Array(questions.length).fill(null)); // 初始化数组，默认值为 null
+    // 初始化为一个数组，数组长度与 questions.value 的长度一致，每个元素初始值为 null
+    const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.length).fill(null));
+
     //选中逻辑
-    const selectOption = (option: string) => {
+    const selectOption = (option:any) => {
-        selectedOption.value[currentQuestionIndex.value] = option; // 更新当前题目的选中选项
+        
-        console.log(selectedOption.value);
+        if (questions.value.length > 0) {
-    };
 
+            const currentQuestion = questions.value[currentQuestionIndex.value];
+            selectedOption.value[currentQuestionIndex.value]= {
+                oid: option,
+                qid: currentQuestion.id
+            };
+            console.log(selectedOption.value[currentQuestionIndex.value].oid,option);
+        }
+    }
     const score = ref(0); // 初始化分数为0
     const isVisible = ref (false)     //成绩公布页的显示与否
     // 提交成绩按钮
-    const submitAnswers = () => {
+    const submitAnswers = async() => {
         console.log(selectedOption.value[currentQuestionIndex.value])
         //答完全部题才能提交成绩
-        if(selectedOption.value[questions.length - 1] == null){
+        if(selectedOption.value[questions.value.length - 1] == null){
             ElMessage.warning('请先完成答题')
         }else{
-            if (selectedOption.value[currentQuestionIndex.value] !== currentQuestion.value.correctAnswer){
+            const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
+            if (res.result !== "success"){
                 ElMessage.error('回答错误')
             }else{
                 stopTimer(); // 停止计时
-                score.value = 0;    // 重置分数
+                score.value = 100;    // 重置分数
                 isVisible.value = true;
-                for (let i = 0; i < questions.length; i++) {
+                // for (let i = 0; i < questions.value.length; i++) {
-                    // 如果当前题目的选中选项与正确答案一致，则加10分
+                //     // 如果当前题目的选中选项与正确答案一致，则加10分
-                    if (selectedOption.value[i] === questions[i].correctAnswer) {
+                //     if (res.result == "success") {
-                        score.value += 10;
+                //         // score.value += 10;
-                    }
+                //         score.value == 100
-                }
+                //     }
+                // }
             }
         }
     };
     // 退出答题
     const resetAnswers = () => {
         
-        isVisible.value = false;
     };
     // 计时器相关变量
     const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值
@@ -182,7 +182,7 @@ import { ElMessage } from 'element-plus'
         }
     };
     // 页面加载时开始计时
-    onMounted(() => {startTimer();});
+    onMounted(() => {startTimer();currentList();});
 
     // 页面卸载时停止计时（防止内存泄漏）
     onUnmounted(() => {stopTimer();});
@@ -191,7 +191,7 @@ import { ElMessage } from 'element-plus'
     const handleRecreate = () => {
         console.log(timer.value,"子组件触发了重做事件");
         isVisible.value = false; // 隐藏子组件
-        selectedOption.value = Array(questions.length).fill(null); // 重置所有选中结果
+        selectedOption.value = Array(questions.value.length).fill(null); // 重置所有选中结果
         currentQuestionIndex.value = 0; // 重置到第一题
         stopTimer()//计时器清零
         elapsedTime.value = 0
@@ -277,8 +277,8 @@ import { ElMessage } from 'element-plus'
         letter-spacing: 3px; /* 字符间距 */
         text-align: right;
         position: absolute; /* 使用绝对定位 */
-        top: 24.5%; /* 距离顶部 50% */
+        top: 24.5%; /* 距离顶部 */
-        left: 71%; /* 距离左侧 50% */
+        left: 71.4%; /* 距离左侧 */
     }
     .questions{
         font-size: 23px; /* 字体大小 */

src/views/target/index.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="container-bgc">
+        <div class="top">
+            <div class="title">{{ setting.title }}</div>
+        </div>
+        <!-- 右边箭头 -->
+        <button class="submit-right" @click="SubRight"></button>
+        <!-- 左边按钮 -->
+        <button class="submit-left" @click="SubLeft"></button>
+        <div class="question-body">
+            <div class="question" >实验目标</div>
+            <el-scrollbar height="330px"> <div class="txt" v-html="Text"></div> </el-scrollbar>
+        </div>
+        <div class="submit-buttons">
+        <!-- <button class="submit-btn" @click="reset">退出</button> -->
+        <!-- <button class="submit-btn" @click="enter">进入仿真实验</button> -->
+        <router-link class="submit-btn" to="">退出</router-link>
+        <router-link class="submit-btn" to="/program">进入仿真实验</router-link>
+        </div>
+        
+    </div>
+</template>
+
+<script lang="ts" setup>
+import settingStore from "@/store/modules/setting";
+import {getExperiment} from '@/api/index'
+import { ref,computed,onMounted, onUnmounted} from "vue"
+import { useRouter   } from 'vue-router';
+    const setting = settingStore();
+    //左箭头
+    const SubLeft =()=>{
+        
+    }
+    //右箭头
+    const SubRight =()=>{
+        
+    }
+
+    const Text = ref()
+    const getContent = async()=>{
+        const res:any = await getExperiment();
+        // console.log(res.result.purposeRequirements,'res')
+        Text.value = res.result.purposeRequirements
+        console.log(Text.value);
+        
+    }
+   
+    onMounted(() => {getContent()});
+    
+</script>
+
+<style lang="scss" scoped>
+.container-bgc {
+    position: relative;
+    width: 100%;
+    // height: 1000px;
+    min-height: 100vh;
+    // background-color: #091d22;
+    background: url("@/assets/images/bg3.png") no-repeat;
+    background-size: cover;
+
+    .submit-right{
+        background: url("@/assets/images/right.png") no-repeat;
+        background-size: contain;
+        width: 60px; /* 按钮宽度 */
+        height: 60px; /* 按钮高度 */
+        border: none;
+        cursor: pointer;
+        position: absolute;
+        right: 0; /* 紧靠右部 */
+        top: 40%; /* 垂直居中*/
+    }
+    .submit-left{
+        background: url("@/assets/images/left.png") no-repeat;
+        background-size: contain;
+        width: 60px; /* 按钮宽度 */
+        height: 60px; /* 按钮高度 */
+        border: none;
+        cursor: pointer;
+        position: absolute;
+        left: 0; /* 紧靠左部 */
+        top: 40%; /* 垂直居中*/
+    }
+
+    .top {
+        width: 100%;
+        height: 75px;
+        text-align: center;
+        font-size: 42px;
+        line-height: 75px;
+        font-style: italic;
+        background: url("@/assets/images/topbgc.png") no-repeat;
+        background-size: cover;
+
+        .title {
+            color: #fff;
+        }
+    }
+
+    .question-body {
+        background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; /* 添加 background-position */
+        background-size: contain; /* 确保背景图片覆盖整个元素 */
+        width: 1100px; /* 100% 宽度以确保背景图片完全显示 */
+        height: 500px; /* 固定高度 */
+        margin-top: 100px;
+        margin-left: auto;
+        margin-right: auto;
+        padding-left: 50px;
+        padding-right: 50px;
+        padding-top: 30px;
+
+        .question{
+        font-size: 42px; /* 字体大小 */
+        text-align: center; /* 水平居中 */
+        letter-spacing: 3px; /* 字符间距，单位可以是 px、em 等 */
+        margin-bottom: 30px;
+        color: #fff;
+        }
+        .scrollbar-demo-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 50px;
+        margin: 10px;
+        text-align: center;
+        border-radius: 4px;
+        background: var(--el-color-primary-light-9);
+        color: var(--el-color-primary);
+        }
+        .txt {
+            margin-top: 18px;
+            margin-left: 20px;
+            margin-right: 20px;
+            font-size: 18px; /* 字体大小 */
+            font-family: Consolas, sans-serif; /* 字体样式 */
+            letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */
+            line-height: 1.5; /* 行间距，1.5 表示字体大小的 1.5 倍 */
+            color: #9b9a9a;
+        }
+    }
+    .submit-buttons {
+        display: flex; /* 使用 Flexbox 布局 */
+        flex-direction: row; /* 水平排列按钮 */
+        justify-content: center; /* 水平居中 */
+        gap: 450px; /* 按钮之间的间距 */
+        margin-top: 50px;
+    }
+
+    .submit-btn {
+        background: url("@/assets/images/Button.png") center;
+        background-size: contain; /* 确保背景图片覆盖整个元素 */
+        background-color: transparent; /* 背景颜色设置为透明 */
+        border: none; /* 移除边框 */
+        cursor: pointer; /* 鼠标悬停时显示手型 */
+        width: 300px;
+        height: 41px;     
+        font-size: 17px;
+        font-weight: bold; /* 文字加粗 */
+        color: #fff;
+        display: flex;
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 水平居中 */
+        text-decoration: none
+    }
+    
+}
+</style>