1.优化机器设备在线作价时数据量过大导致的卡顿等性能问题

2.引入Vxe-Table组件以及相关兼容插件

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@amap/amap-jsapi-loader": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
+        "@vxe-ui/plugin-render-element": "^4.0.7",
         "axios": "^1.7.7",
         "element-plus": "^2.8.5",
         "js-cookie": "^3.0.5",
@@ -20,6 +21,8 @@
         "unplugin-vue-components": "^0.27.4",
         "vue": "^3.5.11",
         "vue-router": "^4.4.5",
+        "vxe-pc-ui": "^4.3.40",
+        "vxe-table": "^4.9.33",
         "xlsx": "^0.18.5"
       },
       "devDependencies": {
@@ -1486,6 +1489,23 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vxe-ui/core": {
+      "version": "4.0.23",
+      "resolved": "https://registry.npmmirror.com/@vxe-ui/core/-/core-4.0.23.tgz",
+      "integrity": "sha512-1UfRNEnawaCT+OR6RkBv6YPNqKrVd7dfMJbvhzkKvvKYrS3/0/Xmppxt5zjMEzCnfPq0WtUjXJvutu1eWBI8rQ==",
+      "dependencies": {
+        "dom-zindex": "^1.0.6",
+        "xe-utils": "^3.5.32"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@vxe-ui/plugin-render-element": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/@vxe-ui/plugin-render-element/-/plugin-render-element-4.0.7.tgz",
+      "integrity": "sha512-IF/ogMfvYLZMI6g6pQRVapcrDZGxMpxPHvzeQaGc4v/U6q8Ns8rs0Klm8cPQoLP3wRXeKQQB0bfbcOVLxoEwqw=="
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.12.1.tgz",
@@ -1947,6 +1967,11 @@
       "resolved": "https://registry.npmmirror.com/destr/-/destr-2.0.3.tgz",
       "integrity": "sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ=="
     },
+    "node_modules/dom-zindex": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/dom-zindex/-/dom-zindex-1.0.6.tgz",
+      "integrity": "sha512-FKWIhiU96bi3xpP9ewRMgANsoVmMUBnMnmpCT6dPMZOunVYJQmJhSRruoI0XSPoHeIif3kyEuiHbFrOJwEJaEA=="
+    },
     "node_modules/dotenv": {
       "version": "16.4.5",
       "resolved": "https://registry.npmmirror.com/dotenv/-/dotenv-16.4.5.tgz",
@@ -4115,6 +4140,22 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vxe-pc-ui": {
+      "version": "4.3.40",
+      "resolved": "https://registry.npmmirror.com/vxe-pc-ui/-/vxe-pc-ui-4.3.40.tgz",
+      "integrity": "sha512-rhHBweoK0iiDqtHSogUprXA5dnSFYEHIYjnKwsp4/Tx5loROpYbBnq6+VcrpZSaJRkpwIsAHbbTHzNxsrCpoQA==",
+      "dependencies": {
+        "@vxe-ui/core": "^4.0.23"
+      }
+    },
+    "node_modules/vxe-table": {
+      "version": "4.9.33",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.9.33.tgz",
+      "integrity": "sha512-KhLUYeCSL4319rcSS8SFkWeFf+pzCBtHm8ytmwiGnj45M7pYoXWR2fpmvR10pEdKsQgM8MDHxqrxdMejT6yKyw==",
+      "dependencies": {
+        "vxe-pc-ui": "^4.3.40"
+      }
+    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
@@ -4159,6 +4200,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/xe-utils": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.32.tgz",
+      "integrity": "sha512-R8ZT2lRnRBQO3pchM1za/Aru+/29DVDWD/OmOFODWWGkiQYz0iVIr8Bq8uKXS6zMhEsSqVCrn46bXzfe/Agjcw=="
+    },
     "node_modules/xlsx": {
       "version": "0.18.5",
       "resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz",
@@ -5156,6 +5202,20 @@
         "vue-demi": "*"
       }
     },
+    "@vxe-ui/core": {
+      "version": "4.0.23",
+      "resolved": "https://registry.npmmirror.com/@vxe-ui/core/-/core-4.0.23.tgz",
+      "integrity": "sha512-1UfRNEnawaCT+OR6RkBv6YPNqKrVd7dfMJbvhzkKvvKYrS3/0/Xmppxt5zjMEzCnfPq0WtUjXJvutu1eWBI8rQ==",
+      "requires": {
+        "dom-zindex": "^1.0.6",
+        "xe-utils": "^3.5.32"
+      }
+    },
+    "@vxe-ui/plugin-render-element": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/@vxe-ui/plugin-render-element/-/plugin-render-element-4.0.7.tgz",
+      "integrity": "sha512-IF/ogMfvYLZMI6g6pQRVapcrDZGxMpxPHvzeQaGc4v/U6q8Ns8rs0Klm8cPQoLP3wRXeKQQB0bfbcOVLxoEwqw=="
+    },
     "acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.12.1.tgz",
@@ -5480,6 +5540,11 @@
       "resolved": "https://registry.npmmirror.com/destr/-/destr-2.0.3.tgz",
       "integrity": "sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ=="
     },
+    "dom-zindex": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/dom-zindex/-/dom-zindex-1.0.6.tgz",
+      "integrity": "sha512-FKWIhiU96bi3xpP9ewRMgANsoVmMUBnMnmpCT6dPMZOunVYJQmJhSRruoI0XSPoHeIif3kyEuiHbFrOJwEJaEA=="
+    },
     "dotenv": {
       "version": "16.4.5",
       "resolved": "https://registry.npmmirror.com/dotenv/-/dotenv-16.4.5.tgz",
@@ -6930,6 +6995,22 @@
         "@vue/devtools-api": "^6.6.4"
       }
     },
+    "vxe-pc-ui": {
+      "version": "4.3.40",
+      "resolved": "https://registry.npmmirror.com/vxe-pc-ui/-/vxe-pc-ui-4.3.40.tgz",
+      "integrity": "sha512-rhHBweoK0iiDqtHSogUprXA5dnSFYEHIYjnKwsp4/Tx5loROpYbBnq6+VcrpZSaJRkpwIsAHbbTHzNxsrCpoQA==",
+      "requires": {
+        "@vxe-ui/core": "^4.0.23"
+      }
+    },
+    "vxe-table": {
+      "version": "4.9.33",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.9.33.tgz",
+      "integrity": "sha512-KhLUYeCSL4319rcSS8SFkWeFf+pzCBtHm8ytmwiGnj45M7pYoXWR2fpmvR10pEdKsQgM8MDHxqrxdMejT6yKyw==",
+      "requires": {
+        "vxe-pc-ui": "^4.3.40"
+      }
+    },
     "webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
@@ -6959,6 +7040,11 @@
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true
     },
+    "xe-utils": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.32.tgz",
+      "integrity": "sha512-R8ZT2lRnRBQO3pchM1za/Aru+/29DVDWD/OmOFODWWGkiQYz0iVIr8Bq8uKXS6zMhEsSqVCrn46bXzfe/Agjcw=="
+    },
     "xlsx": {
       "version": "0.18.5",
       "resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
+    "@vxe-ui/plugin-render-element": "^4.0.7",
     "axios": "^1.7.7",
     "element-plus": "^2.8.5",
     "js-cookie": "^3.0.5",
@@ -22,6 +23,8 @@
     "unplugin-vue-components": "^0.27.4",
     "vue": "^3.5.11",
     "vue-router": "^4.4.5",
+    "vxe-pc-ui": "^4.3.40",
+    "vxe-table": "^4.9.33",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/assets/base.css

@@ -104,37 +104,43 @@ body {
   display: inline-block;
   position: relative;
 }
+
 .example-list {
   width: 95%;
   margin-top: 20px;
   border-top: 1.5px #dae1eb solid;
   padding-top: 20px;
 }
+
 .report-item {
   width: 100%;
   margin-bottom: 10px;
   border: none;
 }
+
 .report-item:hover {
-  background: rgb(255,255,255);
-  background: linear-gradient(15deg, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 50%, rgba(255,97,84,0.103876925770308106) 100%);
+  background: rgb(255, 255, 255);
+  background: linear-gradient(15deg, rgba(255, 255, 255, 1) 0%, rgba(252, 252, 252, 1) 50%, rgba(255, 97, 84, 0.103876925770308106) 100%);
 }
+
 .report-icon {
   float: left;
   margin-left: -20px;
 }
+
 .report-text {
   float: left;
   width: 88%;
   margin-left: 2%;
 }
+
 .report-text-type {
   font-size: 18px;
   font-weight: 600;
 }
-.report-text-name {
 
-}
+.report-text-name {}
+
 .report-button {
   float: right;
   width: 50px;
@@ -143,27 +149,31 @@ body {
   margin-top: 0px;
   font-size: 40px;
   text-align: center;
-  border: 1.5px solid #dae1eb ;
+  border: 1.5px solid #dae1eb;
   border-radius: 0.3em;
   color: #dae1eb;
 }
+
 .report-button:hover {
   color: #ff6154;
   border: 1.5px solid #ff6154;
   cursor: pointer;
 }
+
 .report-text-name:hover {
   text-decoration: underline;
   cursor: pointer;
 }
+
 .form-item {
   .el-input--small {
     font-size: 16px;
   }
+
   .el-form-item__label {
     width: 21px;
     font-size: 16px;
-    font-weight:450;
+    font-weight: 450;
     color: rgba(102, 102, 102, 1);
     color: #040000;
     line-height: 16px;
@@ -172,10 +182,12 @@ body {
     align-items: center;
     justify-content: flex-end;
   }
+
   .el-input__inner {
     color: #040000 !important;
     font-size: 16px;
   }
+
   width: 100%;
 
 }
@@ -194,5 +206,8 @@ body {
   cursor: pointer !important;
 }
 
-
-
+/* vxe样式 */
+html[data-vxe-ui-theme="light"] {
+  --vxe-ui-font-color: #606266;
+  --vxe-ui-font-primary-color: #ff6154;
+}

src/main.js

@@ -11,6 +11,15 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
+// Vxe Table 大数据量table优化框架（文档：https://vxetable.cn/#/start/install）
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+import VxeUITable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+// VxeUITable对element-plus的兼容插件（文档：https://vxeui.com/other4/#/plugin-render-element/install）
+import VxeUIPluginRenderElement from '@vxe-ui/plugin-render-element'
+import '@vxe-ui/plugin-render-element/dist/style.css'
+
 const pinia = createPinia()
 // pinia数据持久化
 pinia.use(piniaPluginPersistedstate)
@@ -24,4 +33,7 @@ app.use(ElementPlus, {
   locale: zhCn,
 })
 
-app.use(router).use(pinia).mount('#app')
+// 加载VxeUITable对element-plus的兼容插件
+VxeUI.use(VxeUIPluginRenderElement)
+
+app.use(VxeUI).use(VxeUITable).use(router).use(pinia).mount('#app')

src/views/assets/workbench/calculate/index.vue

@@ -36,18 +36,18 @@ export default {
         obj.style.width = '85%';
         var evaluateDiv = document.getElementById('evaluateDiv');
         if(evaluateDiv) {
-          evaluateDiv.style.width = '80.5%';
+          evaluateDiv.style.width = '82%';
         }
         var uploadDiv = document.getElementById('uploadDiv');
         if(uploadDiv) {
-          uploadDiv.style.width = '18.5%';
+          uploadDiv.style.width = '17%';
         }
       }else {
         var obj = document.getElementById('contrl');
         obj.style.width = '98.9%';
         var evaluateDiv = document.getElementById('evaluateDiv');
         if(evaluateDiv) {
-          evaluateDiv.style.width = '85%';
+          evaluateDiv.style.width = '84.5%';
         }
         var uploadDiv = document.getElementById('uploadDiv');
         if(uploadDiv) {