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

package.json

@@ -22,12 +22,17 @@
     "@highlightjs/vue-plugin": "^2.1.0",
     "@kjgl77/datav-vue3": "^1.7.3",
     "axios": "^1.7.2",
+    "docxtemplater": "^3.60.2",
     "echarts": "^5.6.0",
     "element-plus": "^2.9.5",
+    "file-saver": "^2.0.5",
     "highlight.js": "^11.11.1",
     "insert-css": "^2.0.0",
+    "install": "^0.13.0",
+    "jszip-utils": "^0.1.0",
     "lib-flexible": "^0.3.2",
     "pinia": "^2.1.7",
+    "pizzip": "^3.1.8",
     "postcss-plugin-px2rem": "^0.8.1",
     "sass": "^1.77.6",
     "sass-loader": "^14.2.1",

pnpm-lock.yaml

@@ -47,24 +47,39 @@ importers:
       axios:
         specifier: ^1.7.2
         version: 1.7.2
+      docxtemplater:
+        specifier: ^3.60.2
+        version: 3.60.2
       echarts:
         specifier: ^5.6.0
         version: 5.6.0
       element-plus:
         specifier: ^2.9.5
         version: 2.9.5(vue@3.4.29(typescript@5.2.2))
+      file-saver:
+        specifier: ^2.0.5
+        version: 2.0.5
       highlight.js:
         specifier: ^11.11.1
         version: 11.11.1
       insert-css:
         specifier: ^2.0.0
         version: 2.0.0
+      install:
+        specifier: ^0.13.0
+        version: 0.13.0
+      jszip-utils:
+        specifier: ^0.1.0
+        version: 0.1.0
       lib-flexible:
         specifier: ^0.3.2
         version: 0.3.2
       pinia:
         specifier: ^2.1.7
         version: 2.1.7(typescript@5.2.2)(vue@3.4.29(typescript@5.2.2))
+      pizzip:
+        specifier: ^3.1.8
+        version: 3.1.8
       postcss-plugin-px2rem:
         specifier: ^0.8.1
         version: 0.8.1
@@ -410,55 +425,46 @@ packages:
     resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.18.0':
     resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.18.0':
     resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.18.0':
     resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.18.0':
     resolution: {integrity: sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.18.0':
     resolution: {integrity: sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.18.0':
     resolution: {integrity: sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.18.0':
     resolution: {integrity: sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.18.0':
     resolution: {integrity: sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.18.0':
     resolution: {integrity: sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==}
@@ -579,6 +585,10 @@ packages:
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
+  '@xmldom/xmldom@0.9.8':
+    resolution: {integrity: sha512-p96FSY54r+WJ50FIOsCOjyj/wavs8921hG5+kVMmZgKcvIKxMXHTrjNJvRgWa/zuX3B6t2lijLNFaOyuxUH+2A==}
+    engines: {node: '>=14.6'}
+
   acorn@8.14.1:
     resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
     engines: {node: '>=0.4.0'}
@@ -702,6 +712,10 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
+  docxtemplater@3.60.2:
+    resolution: {integrity: sha512-x6p8Vr5FgZn0ibmFJz4IS9u8KANQKLzhrp3EMxMvzBAxFW/c3kYhJKFNN8QzjJzXqKO2+XWCN1KTcaSKjqtnqg==}
+    engines: {node: '>=0.10'}
+
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
@@ -771,6 +785,9 @@ packages:
       picomatch:
         optional: true
 
+  file-saver@2.0.5:
+    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -860,6 +877,10 @@ packages:
   insert-css@2.0.0:
     resolution: {integrity: sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==}
 
+  install@0.13.0:
+    resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==}
+    engines: {node: '>= 0.10'}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -895,6 +916,9 @@ packages:
   jsonfile@2.4.0:
     resolution: {integrity: sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==}
 
+  jszip-utils@0.1.0:
+    resolution: {integrity: sha512-tBNe0o3HAf8vo0BrOYnLPnXNo5A3KsRMnkBFYjh20Y3GPYGfgyoclEMgvVchx0nnL+mherPi74yLPIusHUQpZg==}
+
   less@4.2.2:
     resolution: {integrity: sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==}
     engines: {node: '>=6'}
@@ -996,6 +1020,9 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  pako@2.1.0:
+    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+
   parse-node-version@1.0.1:
     resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
     engines: {node: '>= 0.10'}
@@ -1037,6 +1064,9 @@ packages:
       typescript:
         optional: true
 
+  pizzip@3.1.8:
+    resolution: {integrity: sha512-Nynadaz6/o1cmXDQGKqmTnbeaY10BGNc1PPOZYJMfLcjWfVJQ1ARngpVO+BrrRl/WUNIj0V9uJNrP72mkfsY5A==}
+
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -1083,8 +1113,8 @@ packages:
     resolution: {integrity: sha512-R+LQj3Evbjbpmglo7D0PBVsnAbKP4WSvZEZUnF8RGIpWkIHFeAT+BlDOxxBxKVyMDecmfv9qdzNLTZLMq32osA==}
     hasBin: true
 
-  quansync@0.2.10:
+  quansync@0.2.8:
-    resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
+    resolution: {integrity: sha512-4+saucphJMazjt7iOM27mbFCk+D9dd/zmgMDCzRZ8MEoBfYp7lAvoN38et/phRQF6wOPMy/OROBGgoWeSKyluA==}
 
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
@@ -1255,8 +1285,8 @@ packages:
       '@nuxt/kit':
         optional: true
 
-  unplugin@2.2.1:
+  unplugin@2.2.0:
-    resolution: {integrity: sha512-Q0YDhwViJaSnHf1cxLf+/VKhmfdr/ZAS/RL2GQVO0cAbAfJAVUef2bvNu+veyWcEPNwsTlFmMiFLjf8Xeqog8g==}
+    resolution: {integrity: sha512-m1ekpSwuOT5hxkJeZGRxO7gXbXT3gF26NjQ7GdVHoLoF8/nopLcd/QfPigpCy7i51oFHiRJg/CyHhj4vs2+KGw==}
     engines: {node: '>=18.12.0'}
 
   urix@0.1.0:
@@ -1755,6 +1785,8 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@xmldom/xmldom@0.9.8': {}
+
   acorn@8.14.1: {}
 
   ansi-regex@0.2.1: {}
@@ -1870,6 +1902,10 @@ snapshots:
 
   delayed-stream@1.0.0: {}
 
+  docxtemplater@3.60.2:
+    dependencies:
+      '@xmldom/xmldom': 0.9.8
+
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -1969,6 +2005,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.2
 
+  file-saver@2.0.5: {}
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -2052,6 +2090,8 @@ snapshots:
 
   insert-css@2.0.0: {}
 
+  install@0.13.0: {}
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -2080,6 +2120,8 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  jszip-utils@0.1.0: {}
+
   less@4.2.2:
     dependencies:
       copy-anything: 2.0.6
@@ -2106,7 +2148,7 @@ snapshots:
     dependencies:
       mlly: 1.7.4
       pkg-types: 2.1.0
-      quansync: 0.2.10
+      quansync: 0.2.8
 
   lodash-es@4.17.21: {}
 
@@ -2184,6 +2226,8 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  pako@2.1.0: {}
+
   parse-node-version@1.0.1: {}
 
   path-browserify@1.0.1: {}
@@ -2209,6 +2253,10 @@ snapshots:
     optionalDependencies:
       typescript: 5.2.2
 
+  pizzip@3.1.8:
+    dependencies:
+      pako: 2.1.0
+
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -2271,7 +2319,7 @@ snapshots:
       extend: 3.0.2
       fs-extra: 0.16.5
 
-  quansync@0.2.10: {}
+  quansync@0.2.8: {}
 
   readdirp@3.6.0:
     dependencies:
@@ -2401,7 +2449,7 @@ snapshots:
       scule: 1.3.0
       strip-literal: 3.0.0
       tinyglobby: 0.2.12
-      unplugin: 2.2.1
+      unplugin: 2.2.0
       unplugin-utils: 0.2.4
 
   unplugin-auto-import@19.1.1(@vueuse/core@10.11.0(vue@3.4.29(typescript@5.2.2))):
@@ -2410,7 +2458,7 @@ snapshots:
       magic-string: 0.30.17
       picomatch: 4.0.2
       unimport: 4.1.2
-      unplugin: 2.2.1
+      unplugin: 2.2.0
       unplugin-utils: 0.2.4
     optionalDependencies:
       '@vueuse/core': 10.11.0(vue@3.4.29(typescript@5.2.2))
@@ -2428,7 +2476,7 @@ snapshots:
       magic-string: 0.30.17
       mlly: 1.7.4
       tinyglobby: 0.2.12
-      unplugin: 2.2.1
+      unplugin: 2.2.0
       unplugin-utils: 0.2.4
       vue: 3.4.29(typescript@5.2.2)
     optionalDependencies:
@@ -2436,7 +2484,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  unplugin@2.2.1:
+  unplugin@2.2.0:
     dependencies:
       acorn: 8.14.1
       webpack-virtual-modules: 0.6.2

src/api/index.ts

@@ -51,6 +51,22 @@ export const checkapi = (params:any)=> {
       params
   })
 }
+// 获取实验报告
+export const getReport = () => {
+  return request({
+    url: "/xnRecords/getSummarize",
+    method: "get",
+    
+  })
+}
+// 保存实验报告
+export const saveReport = (data: any) => {
+  return request({
+    url: "/xnRecords/saveSummarize",
+    method: "post",
+    data
+  })}
+  
 //获取实验目标
 export const getExperiment = ()=>{
   return request({

src/router/index.ts

@@ -25,6 +25,11 @@ const routerList: any = [
         name: "Compiler",
         component: () => import("@/views/compiler/index.vue"),
       },
+      {
+        path: "experimentalData",
+        name: "ExperimentalData",
+        component: () => import("@/views/experimentalData/index.vue"),
+      }
     ],
   },
   {
@@ -54,7 +59,8 @@ const routerList: any = [
     path: '/knowledgePage',
     name: 'KnowledgePage',
     component: () => import('@/layout/knowledgePage.vue')
-  }
+  },
+
 
 ];
 const router: any = createRouter({

src/store/modules/setting.ts

@@ -1,4 +1,7 @@
 import { defineStore } from "pinia";
+import { ElMessage } from "element-plus";
+import router from "@/router";
+
 const settingStore = defineStore("settingStore", {
   state: (): any => {
     return {
@@ -16,11 +19,15 @@ const settingStore = defineStore("settingStore", {
       sdsz: 0, // 湿度数值
       falg: false,
       timer: null,
-      experimentPreservation: false, // 是否设计好实验
+      experimentPreservation:
-      saveRoute: false, // 是否保存路由
+        Boolean(localStorage.getItem("experimentPreservation")) || false, // 是否设计好实验
+      saveRoute: Boolean(localStorage.getItem("saveRoute")) || false, // 是否保存路由
       stepIds: null,
       wenduCode: null,
-      shiduCode:null
+      shiduCode: null,
+      isRunning: false,
+      isRunCode: Boolean(localStorage.getItem("isRunCode")) || false,
+      shiyanData: [],
     };
   },
   actions: {
@@ -70,6 +77,11 @@ const settingStore = defineStore("settingStore", {
       }, 1000);
     },
     simulateHeatingAndHumidifying() {
+      // const router = useRouter();
+
+      if (this.isRunning) return; // 如果已经在运行，则直接返回
+      this.isRunning = true;
+      this.shiyanData = [];
       // 计算时间常数
       const a = (100000 * this.zl * this.srmj) / this.jrgl;
       const b = (10000 * this.jsmj) / this.jsgl;
@@ -92,12 +104,34 @@ const settingStore = defineStore("settingStore", {
             2
           )}°C, 湿度: ${currentHumidity}%RH`
         );
+        this.shiyanData.push({
+          time,
+          currentTemp,
+          currentHumidity,
+        });
         this.qw = currentTemp >= 100 ? 100 : currentTemp;
-        this.cssd = currentHumidity >= 100 ? 100 : Number(currentHumidity.toFixed(2));
+        this.cssd =
+          currentHumidity >= 100 ? 100 : Number(currentHumidity.toFixed(2));
+
         // 停止加热 & 加湿
         if (currentTemp >= 100 && currentHumidity >= 100) {
           console.log("温度和湿度均达到上限，停止模拟！");
+          ElMessage.warning("温度和湿度均达到上限，停止模拟");
+          if (this.isRunCode) {
+            router.push({
+              path: "/experimentalData",
+            });
+          } else {
+            router.push({
+              path: "/",
+              query: {
+                idea: true,
+              },
+            });
+          }
+
           clearInterval(interval);
+          this.isRunning = false; // 复位标志，允许再次触发
         }
 
         time += 1; // 每秒增加 1s

src/views/compiler/index.vue

@@ -8,30 +8,26 @@
       </div>
     </div>
     <div class="setting">
-        <el-button>保存</el-button>
+        <el-button @click="saveCode">保存</el-button>
     </div>
   </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
+import { setStepEvent } from "@/utils/setStep";
+import { formatDate } from "@/utils";
+import settingStore from "@/store/modules/setting";
+import { useRouter } from "vue-router";
+const router = useRouter()
+const useSettingStore = settingStore();
 
-import hljs from "highlight.js/lib/core";
+const saveCode = () => {
-
+  useSettingStore.setValue(true, 'isRunCode');
-const editor = ref(null);
+  localStorage.setItem('isRunCode','true')
-const code = ref('console.log("Hello, World!");');
+  setStepEvent(8,formatDate(new Date()))
-const highlightCode = () => {
+  router.push('/program')
-  const codeBlock = editor.value;
+}
-  console.log(codeBlock);
-
-  if (codeBlock) {
-    hljs.highlightElement(code);
-  }
-};
-
-onMounted(() => {
-  // highlightCode();
-});
 </script>
 
 <style scoped>

src/views/designRoute/index.vue

@@ -12,6 +12,8 @@
     <div class="setting">
       <el-button @click="onUndo">撤回</el-button>
       <el-button @click="onRedo">恢复</el-button>
+    <el-button @click="clearLocalStorage">清除缓存</el-button>
+
       <el-button @click="onSave">保存</el-button>
       <el-button @click="onTip">提示</el-button>
     </div>
@@ -852,6 +854,7 @@ const onSave = () => {
   }
   ElMessage.success("保存成功");
   settingStore.setValue( true,'saveRoute');
+  localStorage.setItem('saveRoute',true)
   router.push('/program')
   // const data = graph.toJSON();
   // console.log(data);
@@ -1146,6 +1149,7 @@ function loadFromLocalStorage() {
 
 function clearLocalStorage() {
   localStorage.removeItem(SESSION_KEY);
+  window.location.reload();
 }
 </script>
 

src/views/experimentalData/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="container">
+    <div class="main">
+      <el-table
+        :data="tableData"
+        height="700"
+        style="width: 100%"
+        :style="{ background: 'transparent' }"
+      >
+        <el-table-column prop="time" label="时间(秒)" width="180" >
+          <template #default="{row}">
+            <span style="margin-left: 10px">第{{ row.time + 1 }}秒</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="currentTemp" label="温度" width="180" >
+            <template #default="{row}">
+            <span style="margin-left: 10px">{{ row.currentTemp.toFixed(2) }}摄氏度</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="currentHumidity" label="湿度" >
+            <template #default="{row}">
+            <span style="margin-left: 10px">{{ row.currentHumidity.toFixed(2) }}摄氏度</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+  <div class="settting">
+    <el-button @click="router.back()">返回</el-button>
+  </div>
+</template>
+
+<script setup>
+import settingstore from '@/store/modules/setting'
+import { setStepEvent } from "@/utils/setStep";
+import { formatDate } from "@/utils";
+import {ref} from 'vue'
+import { useRouter } from 'vue-router';
+const router = useRouter()
+const useSettingStore = settingstore()
+const tableData = ref([])
+tableData.value = useSettingStore.shiyanData
+console.log(tableData.valu);
+
+setStepEvent(10,formatDate(new Date()))
+</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-size: contain;
+  background-position: center center;
+  position: relative;
+}
+/* 让整个表格透明 */
+.el-table {
+  background: transparent !important;
+}
+:deep(.el-table th) {
+  background: transparent !important;
+}
+/* 让表头也透明 */
+.el-table th {
+  background: transparent !important;
+}
+
+/* 让每一行背景透明 */
+:deep(.el-table tr) {
+  background: transparent !important;
+  color: #fff;
+  &:hover {
+    color: #000 !important;
+    background-color: pink !important;
+  }
+}
+:deep(.el-table tr:hover) {
+  color: #000 !important;
+  /* background-color: pink !important; */
+}
+
+/* 去掉边框 */
+.el-table::before {
+  background: transparent !important;
+}
+.settting{
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+</style>

src/views/largeDataScreen/home.vue

@@ -152,7 +152,7 @@
             </div>
           </template>
           <div class="setting-list">
-            <div class="item" @click="openSrttingDialog">
+            <div class="item">
               <div class="icon">
                 <!-- <img src="@/assets/images/home.png" alt="" /> -->
               </div>
@@ -162,7 +162,74 @@
               <div class="icon">
                 <img src="@/assets/images/home.png" alt="" />
               </div>
-              <div class="name">管理员身份运行</div>
+              <div class="name" @click="goToLabView">管理员身份运行</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>
+        <el-popover
+          placement="right"
+          :width="260"
+          trigger="contextmenu"
+          ref="popover2"
+          v-if="installationStep === 11"
+        >
+          <template #reference>
+            <div class="item">
+              <div class="icon">
+                <img
+                  style="width: 100%"
+                  src="@/assets/images/ideaicon.png"
+                  alt=""
+                  srcset=""
+                />
+              </div>
+              <div class="file-name" style="text-align: center">
+                IntelliJ IDEA 2020.1 x64
+              </div>
+            </div>
+          </template>
+          <div class="setting-list">
+            <div class="item">
+              <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" @click="goToLabIdea">管理员身份运行</div>
             </div>
             <div class="item">
               <div class="icon">
@@ -313,30 +380,47 @@
         <div class="title">用户信息</div>
         <div class="tip">请输入以下信息</div>
         <div class="name">
-          <span>全名：</span><el-input style="width: 280px;margin-left: 30px;"placeholder="软件安全管家"></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;"placeholder="中国大陆"></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>
+          <div class="name">序列号：</div>
-          <el-form label-width="400px" style="max-width: 720" >
+          <el-form label-width="400px" style="max-width: 720">
-              <el-form-item label="LabVIEW 2014（基本版 / 完整版 / 专业版）："label-width="307px">
+            <el-form-item
-                <el-input style="width: 300px;margin-left: 95px;" />
+              label="LabVIEW 2014（基本版 / 完整版 / 专业版）："
-              </el-form-item>
+              label-width="307px"
-              <el-form-item label="应用程序生成器 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白：">
+            >
-                <el-input style="width: 300px"/>
+              <el-input style="width: 300px; margin-left: 95px" />
-              </el-form-item>
+            </el-form-item>
-              <el-form-item label="Report Generation 工具包 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白：">
+            <el-form-item
-                <el-input style="width: 300px"/>
+              label="应用程序生成器 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白："
-              </el-form-item>
+            >
-              <el-form-item label="atabase 工具包 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白）：">
+              <el-input style="width: 300px" />
-                <el-input style="width: 300px"/>
+            </el-form-item>
-              </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>
@@ -344,11 +428,23 @@
         <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-select
-        <el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button>
+          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-select
-        <el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button>
+          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>
@@ -364,23 +460,34 @@
             <div class="item">设备驱动程序</div>
           </div>
           <div class="image-container">
-              <p style="margin-bottom: 20px;">测量和仪器的图形化编程</p>
+            <p style="margin-bottom: 20px">测量和仪器的图形化编程</p>
-              <img src="@/assets/images/bg13.png" alt="">
+            <img src="@/assets/images/bg13.png" alt="" />
-              <p style="margin-top: 20px;">该组件将安装至本地硬盘</p>
+            <p style="margin-top: 20px">该组件将安装至本地硬盘</p>
           </div>
-      </div>
+        </div>
-      <div class="name">选择NI LabVIEW 2014的安装文件夹</div>
+        <div class="name">选择NI LabVIEW 2014的安装文件夹</div>
-        <el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;"/>
+        <el-select
-        <el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button>
+          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 />产品注意事项 <br />安装该产品之前，必须安装Microsoft Office
-          <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。
+          XP或更高版本。“Report Generation工具包-用于Microsoft
-          <br>正在安装自等社过猪保要票影的前我地,是器得品和更新。如执行搜索，则gational Instruments将在遵循保密协议的前提下，使用您的搜索查询来改进搜索结果和相关性。
+          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">
@@ -399,19 +506,26 @@
       </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"/>
+        <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"/>
+        <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>
@@ -480,92 +594,185 @@
     </template>
   </el-dialog>
   <el-dialog
-            v-model="Popup"
+    v-model="Popup"
-            width="650px"
+    width="650px"
-            height="500px"
+    height="500px"
-            top="10%"
+    top="10%"
-            style="left: 5%;padding: 0;"
+    style="left: 5%; padding: 0"
-          >
+  >
-          <template #header>
+    <template #header>
-            <div class="dialog-header" >安装LabVIEW硬件支持</div>
+      <div class="dialog-header">安装LabVIEW硬件支持</div>
-          </template>
+    </template>
-          <div class="installation-box">
+    <div class="installation-box">
-          <div class="step9" v-show="installationStep === 9">
+      <div v-show="installationStep === 8">
-            <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
-          <div class="item">如所需文件处于其他位置，请在下面输入相应路径。</div>
+          style="
-          <el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;margin-left: 15px;"/>
+            margin-top: 8px;
-          <el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button>
+            margin-bottom: 80px;
-          </div>
+            font-size: 16px;
-          <div class="step10" v-show="installationStep === 10"style="height: 250px;font-weight: bold;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="step9"
+        v-show="installationStep === 9"
+        style="height: 250px; font-weight: bold; font-size: 16px"
+      >
+        安装完成!
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button
+          v-show="installationStep === 8"
+          size="large"
+          @click="Installation = false"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+          >安装支持</el-button
+        >
+        <el-button
+          v-show="installationStep === 8"
+          type="primary"
+          size="large"
+          @click="setInstallationStep"
+          style="background-color: #0052d9; color: #fff; border: 0"
+        >
+          不需要支持
+        </el-button>
+        <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="Installation = false"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+        >
+          下一步
+        </el-button>
+        <el-button
+          v-show="installationStep === 9"
+          size="large"
+          @click="Completed"
+          style="background-color: #0052d9; color: #fff; border: 0"
+          >完成</el-button
+        >
+      </div>
+    </template>
+  </el-dialog>
+  <el-dialog
+    v-model="isShowIdea"
+    width="1000px"
+    height="500px"
+    top="10%"
+    style="left: 5%; padding: 0"
+  >
+    <template #header>
+      <div class="dialog-header">INTELIJ IDEA SETUP</div>
+    </template>
+    <div class="idea-box">
+      <div class="left"></div>
+      <div class="right">
+        <div v-if="installationStep === 10">
+          <div class="title">Welcome to IntelliJ lDEA Setup</div>
+          <div class="description">
+            Setup wil guide you through the installation of Inteli] IDEA. It is
+            recommended that you dose all other applications befonestarting
+            Setup, This will make it possible to update relevantsystem fles
+            wthout having to reboot your computer.<br /> Click Nedt to cantinue.
           </div>
+        </div>
+        <div v-if="installationStep === 11">
+          <div class="title"> Completing inteliJ lDEA Setup </div>
+          <div class="description">
+           lrtel lDEA has been instdlled on your comgarier.Chdk nnish to dose setmp R.n intt3 boEA
           </div>
-          <template #footer>
+        </div>
-            <div class="dialog-footer">
+      </div>
-              <el-button
+      <!-- <div
-                v-show="installationStep === 9"
+        class="step9"
-                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>
+        style="height: 250px; font-weight: bold; font-size: 16px"
+      >
+        安装完成!
+      </div> -->
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button
+          v-show="installationStep === 10"
+          type="primary"
+          size="large"
+          @click="setInstallationStep"
+          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
+        >
+          下一步
+        </el-button>
+        <el-button
+          v-show="installationStep === 11"
+          size="large"
+          @click="insatIdea"
+          style="background-color: #0052d9; color: #fff; border: 0"
+          >完成</el-button
+        >
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { setStepEvent } from "@/utils/setStep";
+import { formatDate } from "@/utils";
+import { useRouter, useRoute } from "vue-router";
+import { onMounted } from "vue";
 type Falg = boolean;
 type Step = number;
-const falg = ref<Falg>(false);
+const falg = ref<Falg>(Boolean(localStorage.getItem("falg")) || false);
-const radio1 = ref('接受')
+const product = ref<Falg>(Boolean(localStorage.getItem("product")) || false);
-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 installationStep = ref<Step>(
+  Number(localStorage.getItem("installationStep")) || 1
+);
+const route = useRoute();
+const router = useRouter();
+const isShowIdea = ref<Boolean>(false);
+console.log(route);
+onMounted(() => {
+  if (route.query.idea) {
+  isShowIdea.value = true;
+  installationStep.value = 10
+}
+})
+
 const checkList = ref<Step[]>([1, 2]);
 const unpack = (): void => {
   falg.value = true;
+  localStorage.setItem("falg", "true");
   console.log(falg);
   popover1.value.hide();
 };
@@ -586,22 +793,38 @@ const openSrttingDialog = (): void => {
 };
 const setInstallationStep = (): void => {
   installationStep.value++;
-  if(installationStep.value == 9){
+  localStorage.setItem("installationStep", installationStep.value.toString());
-    Popup.value = true
+  if (installationStep.value == 8) {
+    Popup.value = true;
   }
-  if(installationStep.value == 10){
+  if (installationStep.value == 9) {
-    Installation.value = false
+    Installation.value = false;
-    Popup.value = true
+    Popup.value = true;
   }
   if(installationStep.value == 11){
-    Installation.value = true
+    // Installation.value = true
     Popup.value = false
   }
 };
-const Completed = ():void => {
+const Completed = (): void => {
-  Installation.value = false
+  Popup.value = false;
-  Popup.value = false
   product.value = true;
+  localStorage.setItem("product", "true");
+};
+
+// 前往labView
+const goToLabView = async () => {
+  await setStepEvent(1, formatDate(new Date()));
+  router.push("/program");
+};
+const goToLabIdea = async () => {
+  await setStepEvent(7,formatDate(new Date()))
+
+  router.push('/compiler')
+}
+const insatIdea = () => {
+  isShowIdea.value = false
+  setStepEvent(6,formatDate(new Date()))
 }
 </script>
 
@@ -823,183 +1046,176 @@ const Completed = ():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 {
+    .tip {
-            font-size: 16px;
+      font-size: 16px;
-            line-height: 30px;
+      line-height: 30px;
-            color: #585858;
+      color: #585858;
-
-            margin-top: 10px;
-          }
-          .name,
-          .unit {
-            padding-left: 37px;
-            margin-top: 25px;
 
-          }
+      margin-top: 10px;
+    }
+    .name,
+    .unit {
+      padding-left: 37px;
+      margin-top: 25px;
+    }
   }
-  .step3{
+  .step3 {
-              // width: 540px;
+    // width: 540px;
-              // height: 500px;
+    // height: 500px;
-              // border-radius: 5px;
+    // border-radius: 5px;
-              // background-color: #fff;
+    // background-color: #fff;
-              .title {
+    .title {
-                font-size: 25px;
+      font-size: 25px;
-                font-weight: bold; /* 设置文字加粗 */
+      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;
-                }
-              }
-    }
-    .step4{
-      .title {
-                font-size: 25px;
-                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;
-                
-      }
-      .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; /* 设置小点和文本之间的间距 */
-              }       
-    }
-    .step6{
-      position: relative;
-      .title {
-                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{
+    .tip {
-      padding: 50px;
+      margin-top: 20px;
-      // width: 600px;
+      font-size: 15px;
-      .name{
+      font-weight: bold; /* 设置文字加粗 */
-        margin-bottom: 8px;
-        font-size: 15px;
-        font-weight: bold; /* 设置文字加粗 */
-      }
-      
     }
-    .step9{
+    .serial {
-      .item:before {
+      margin-top: 40px;
-                content: "• "; /* 在内容前添加一个小点和空格 */
+      .name {
-                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; /* 设置行高 */
+        margin-left: 400px;
-        letter-spacing: 0.5px; /* 设置字母间距 */
+        margin-bottom: 15px;
       }
+      :deep(.el-form-item__label) {
+        text-align: left; /* 设置label左对齐 */
+        line-height: 20px;
+      }
+    }
+  }
+  .step4 {
+    .title {
+      font-size: 25px;
+      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;
+    }
+    .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; /* 设置小点和文本之间的间距 */
+    }
+  }
+  .step6 {
+    .title {
+      font-size: 15px;
+      font-weight: bold; /* 设置文字加粗 */
+      color: #f2994a;
+      margin-bottom: 10px;
+    }
+    .item {
+      margin-top: 40px;
+      line-height: 1.6; /* 设置行高 */
+      letter-spacing: 0.5px; /* 设置字母间距 */
+    }
+  }
+  .step7 {
+    padding: 50px;
+    // width: 600px;
+    .name {
+      margin-bottom: 8px;
+      font-size: 15px;
+      font-weight: bold; /* 设置文字加粗 */
+    }
+    .item:before {
+      content: "• "; /* 在内容前添加一个小点和空格 */
+      color: rgb(0, 0, 0); /* 设置小点的颜色 */
+      font-size: 15px; /* 设置小点的大小 */
+      margin-right: 5px; /* 设置小点和文本之间的间距 */
+    }
+  }
+}
+.idea-box {
+  width: 1000px;
+  height: 400px;
+  display: flex;
+  .left {
+    width: 234px;
+    height: 100%;
+    background: url("../../assets/images/idealeftbgc.png");
+  }
+  .right{
+    flex: 1;
+    margin-left: 30px;
+    .title{
+      font-size: 32px;
+      color: #585858;
+    }
+    .description{
+      margin-top: 50px;
+      line-height: 24px;
+      font-weight: 600;
+    }
+  }
 }
 .dialog-header {
   padding: 20px;

src/views/program/index.vue

@@ -43,10 +43,15 @@
     <el-button @click="onUndo">撤回</el-button>
     <el-button @click="onRedo">恢复</el-button>
     <el-button @click="clearLocalStorage">清除缓存</el-button>
-    <el-button @click="onSave">{{
+    <el-button
-      useSettingStore.experimentPreservation ? "运行" : "保存"
+      :disabled="
-    }}</el-button>
+        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="tip-view">
     <el-image
@@ -63,6 +68,36 @@
     />
     <!-- <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">
@@ -85,6 +120,11 @@ 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);
@@ -1094,10 +1134,10 @@ const saveNodeData = () => {
       case "custom-text-cssd":
         useSettingStore.setValue(parseInt(node.label), "cssd"); // 初始湿度
         break;
-        case "custom-text-jsgl":
+      case "custom-text-jsgl":
         useSettingStore.setValue(parseInt(node.label), "jsgl"); // 加湿功率
         break;
-        case "custom-text-jsmj":
+      case "custom-text-jsmj":
         useSettingStore.setValue(parseInt(node.label), "jsmj"); // 加湿面积
         break;
     }
@@ -1183,7 +1223,10 @@ const onRedo = () => {
   graph.redo();
 };
 const sdsz = ref<any>(null);
-const onSave = () => {
+const onSave = async () => {
+  if (useSettingStore.isRunCode) {
+    await setStepEvent(9, formatDate(new Date()));
+  }
   if (
     !hasExactNames(graph.getNodes(), [
       "custom-text",
@@ -1206,6 +1249,11 @@ const onSave = () => {
   }
   if (!useSettingStore.experimentPreservation) {
     useSettingStore.setValue(true, "experimentPreservation");
+    localStorage.setItem("experimentPreservation", "true");
+    if (!useSettingStore.isRunCode) {
+      await setStepEvent(2, formatDate(new Date()));
+    }
+
     router.push("/designRoute");
     return;
   }
@@ -1245,7 +1293,7 @@ const onSave = () => {
         useSettingStore.setValue(parseInt(item.attrs.text.text), item.name);
         break;
       case "custom-text-jrgl":
-      if (!parseInt(item.attrs.text.text)) {
+        if (!parseInt(item.attrs.text.text)) {
           ElMessage({
             type: "warning",
             message: "请请填写加热功率信息",
@@ -1365,7 +1413,10 @@ const onSave = () => {
   // useSettingStore.openHeating();
   // useSettingStore.calculateTemperature();
   useSettingStore.simulateHeatingAndHumidifying();
-  setStepEvent(4, formatDate(new Date()));
+  if (!useSettingStore.isRunCode) {
+    setStepEvent(4, formatDate(new Date()));
+    setStepEvent(5, formatDate(new Date()));
+  }
 
   // const data = graph.toJSON();
   // console.log(data);
@@ -1425,6 +1476,8 @@ function loadFromLocalStorage() {
 
 function clearLocalStorage() {
   localStorage.removeItem(SESSION_KEY);
+  window.location.reload();
+
 }
 // 恢复画布状态
 function restoreGraph() {
@@ -1444,6 +1497,76 @@ 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()));
+
+      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>
@@ -1464,4 +1587,8 @@ const onTip = () => {
   width: 200px;
   height: 400px;
 }
+.tips {
+  font-size: 12px;
+  color: #999;
+}
 </style>