update

package-lock.json

@@ -8,20 +8,24 @@
       "name": "daping",
       "version": "0.1.0",
       "dependencies": {
+        "@cycjimmy/jsmpeg-player": "^6.0.5",
         "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
         "@iamzzg/data-view": "^2.10.0",
         "@jiaminghi/data-view": "^2.10.0",
         "@tweenjs/tween.js": "^19.0.0",
         "axios": "^1.3.2",
         "core-js": "^3.8.3",
-        "echarts": "^5.4.1",
+        "echarts": "^5.5.0",
         "echarts-liquidfill": "^3.1.0",
         "element-plus": "^2.3.0",
+        "pdfobject": "^2.3.0",
         "pinia": "^2.0.30",
+        "recorder-core": "^1.3.23122400",
         "register-service-worker": "^1.7.2",
         "swiper": "^9.0.5",
         "three": "^0.150.1",
         "vue": "^3.2.13",
+        "vue-echarts": "^6.6.9",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.0.3"
       },
@@ -32,6 +36,8 @@
         "@vue/cli-plugin-typescript": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "patch-package": "^6.5.1",
+        "sass": "^1.79.1",
+        "sass-loader": "^16.0.1",
         "typescript": "~4.5.5"
       }
     },
@@ -1737,6 +1743,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/@cycjimmy/jsmpeg-player": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmmirror.com/@cycjimmy/jsmpeg-player/-/jsmpeg-player-6.0.5.tgz",
+      "integrity": "sha512-bVNHQ7VN9ecKT5AI/6RC7zpW/y4ca68a9txeR5Wiin+jKpUn/7buMe+5NPub89A8NNeNnKPQfrD2+c76ch36mA=="
+    },
     "node_modules/@dataview/datav-vue3": {
       "version": "0.0.0-test.1672506674342",
       "resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
@@ -4010,13 +4021,22 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "dependencies": {
-        "function-bind": "^1.1.1",
+        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.0.2"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/callsites": {
@@ -5046,6 +5066,23 @@
         "clone": "^1.0.2"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -5221,12 +5258,12 @@
       }
     },
     "node_modules/echarts": {
-      "version": "5.4.1",
+      "version": "5.5.0",
-      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
-      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.4.1"
+        "zrender": "5.5.0"
       }
     },
     "node_modules/echarts-liquidfill": {
@@ -5417,6 +5454,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "0.9.3",
       "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
@@ -6111,10 +6169,13 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
@@ -6156,14 +6217,22 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.0",
+      "version": "1.2.4",
-      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dev": true,
       "dependencies": {
-        "function-bind": "^1.1.1",
+        "es-errors": "^1.3.0",
-        "has": "^1.0.3",
+        "function-bind": "^1.1.2",
-        "has-symbols": "^1.0.3"
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/get-own-enumerable-property-symbols": {
@@ -6331,12 +6400,15 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-proto": {
@@ -6375,6 +6447,18 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "dev": true
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
@@ -6637,6 +6721,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8101,10 +8191,16 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.3",
+      "version": "1.13.2",
-      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.2.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/object-keys": {
       "version": "1.1.1",
@@ -8610,6 +8706,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/pdfobject": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pdfobject/-/pdfobject-2.3.0.tgz",
+      "integrity": "sha512-w/9pXDXTDs3IDmOri/w8lM/w6LHR0/F4fcBLLzH+4csSoyshQ5su0TE7k0FLHZO7aOjVLDGecqd1M89+PVpVAA=="
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -9497,6 +9598,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recorder-core": {
+      "version": "1.3.23122400",
+      "resolved": "https://registry.npmmirror.com/recorder-core/-/recorder-core-1.3.23122400.tgz",
+      "integrity": "sha512-oDtV56qlaKFPBkEtYaMbYBC/aiYa76wSBAauJKlLk6fKX5b5I6Fo8EyjxkUkWrCHK9uv1Cf4HVls0EUwoBrKxQ=="
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
@@ -9638,6 +9744,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -9812,6 +9923,91 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.79.1",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.79.1.tgz",
+      "integrity": "sha512-+mA7svoNKeL0DiJqZGeR/ZGUu8he4I8o3jyUcOFyo4eBJrwNgIMmAEwCMo/N2Y3wdjOBcRzoNxZIOtrtMX8EXg==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-16.0.1.tgz",
+      "integrity": "sha512-xACl1ToTsKnL9Ce5yYpRxrLj9QUDCnwZNhzpC7tKiFyA8zXsd3Ap+HGVnbCgkdQcm43E+i6oKAWBsvGA6ZoiMw==",
+      "dev": true,
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.0.tgz",
+      "integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==",
+      "dev": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.0.1.tgz",
+      "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -10027,6 +10223,23 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -10073,14 +10286,21 @@
       "dev": true
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
+      "version": "1.0.6",
-      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
+        "call-bind": "^1.0.7",
-        "get-intrinsic": "^1.0.2",
+        "es-errors": "^1.3.0",
-        "object-inspect": "^1.9.0"
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/signal-exit": {
@@ -11115,6 +11335,52 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "node_modules/vue-echarts": {
+      "version": "6.6.9",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.6.9.tgz",
+      "integrity": "sha512-mojIq3ZvsjabeVmDthhAUDV8Kgf2Rr/X4lV4da7gEFd1fP05gcSJ0j7wa7HQkW5LlFmF2gdCJ8p4Chas6NNIQQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.5",
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.4.1",
+        "vue": "^2.6.12 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -12160,9 +12426,9 @@
       }
     },
     "node_modules/zrender": {
-      "version": "5.4.1",
+      "version": "5.5.0",
-      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
-      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
       "dependencies": {
         "tslib": "2.3.0"
       }
@@ -13356,6 +13622,11 @@
       "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
       "integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ=="
     },
+    "@cycjimmy/jsmpeg-player": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmmirror.com/@cycjimmy/jsmpeg-player/-/jsmpeg-player-6.0.5.tgz",
+      "integrity": "sha512-bVNHQ7VN9ecKT5AI/6RC7zpW/y4ca68a9txeR5Wiin+jKpUn/7buMe+5NPub89A8NNeNnKPQfrD2+c76ch36mA=="
+    },
     "@dataview/datav-vue3": {
       "version": "0.0.0-test.1672506674342",
       "resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
@@ -15255,13 +15526,16 @@
       "dev": true
     },
     "call-bind": {
-      "version": "1.0.2",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "requires": {
-        "function-bind": "^1.1.1",
+        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.0.2"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
       }
     },
     "callsites": {
@@ -16068,6 +16342,17 @@
         "clone": "^1.0.2"
       }
     },
+    "define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "requires": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      }
+    },
     "define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -16212,12 +16497,12 @@
       "dev": true
     },
     "echarts": {
-      "version": "5.4.1",
+      "version": "5.5.0",
-      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
-      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
       "requires": {
         "tslib": "2.3.0",
-        "zrender": "5.4.1"
+        "zrender": "5.5.0"
       },
       "dependencies": {
         "tslib": {
@@ -16386,6 +16671,21 @@
         "which-typed-array": "^1.1.9"
       }
     },
+    "es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.4"
+      }
+    },
+    "es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true
+    },
     "es-module-lexer": {
       "version": "0.9.3",
       "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
@@ -16946,9 +17246,9 @@
       "optional": true
     },
     "function-bind": {
-      "version": "1.1.1",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
       "dev": true
     },
     "function.prototype.name": {
@@ -16982,14 +17282,16 @@
       "dev": true
     },
     "get-intrinsic": {
-      "version": "1.2.0",
+      "version": "1.2.4",
-      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dev": true,
       "requires": {
-        "function-bind": "^1.1.1",
+        "es-errors": "^1.3.0",
-        "has": "^1.0.3",
+        "function-bind": "^1.1.2",
-        "has-symbols": "^1.0.3"
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
       }
     },
     "get-own-enumerable-property-symbols": {
@@ -17127,12 +17429,12 @@
       "dev": true
     },
     "has-property-descriptors": {
-      "version": "1.0.0",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dev": true,
       "requires": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
       }
     },
     "has-proto": {
@@ -17162,6 +17464,15 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "dev": true
     },
+    "hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
@@ -17373,6 +17684,12 @@
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -18539,9 +18856,9 @@
       "dev": true
     },
     "object-inspect": {
-      "version": "1.12.3",
+      "version": "1.13.2",
-      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.2.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
       "dev": true
     },
     "object-keys": {
@@ -18942,6 +19259,11 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "pdfobject": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pdfobject/-/pdfobject-2.3.0.tgz",
+      "integrity": "sha512-w/9pXDXTDs3IDmOri/w8lM/w6LHR0/F4fcBLLzH+4csSoyshQ5su0TE7k0FLHZO7aOjVLDGecqd1M89+PVpVAA=="
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -19550,6 +19872,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recorder-core": {
+      "version": "1.3.23122400",
+      "resolved": "https://registry.npmmirror.com/recorder-core/-/recorder-core-1.3.23122400.tgz",
+      "integrity": "sha512-oDtV56qlaKFPBkEtYaMbYBC/aiYa76wSBAauJKlLk6fKX5b5I6Fo8EyjxkUkWrCHK9uv1Cf4HVls0EUwoBrKxQ=="
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
@@ -19669,6 +19996,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -19807,6 +20139,43 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.79.1",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.79.1.tgz",
+      "integrity": "sha512-+mA7svoNKeL0DiJqZGeR/ZGUu8he4I8o3jyUcOFyo4eBJrwNgIMmAEwCMo/N2Y3wdjOBcRzoNxZIOtrtMX8EXg==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "dependencies": {
+        "chokidar": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.0.tgz",
+          "integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==",
+          "dev": true,
+          "requires": {
+            "readdirp": "^4.0.1"
+          }
+        },
+        "readdirp": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.0.1.tgz",
+          "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==",
+          "dev": true
+        }
+      }
+    },
+    "sass-loader": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-16.0.1.tgz",
+      "integrity": "sha512-xACl1ToTsKnL9Ce5yYpRxrLj9QUDCnwZNhzpC7tKiFyA8zXsd3Ap+HGVnbCgkdQcm43E+i6oKAWBsvGA6ZoiMw==",
+      "dev": true,
+      "requires": {
+        "neo-async": "^2.6.2"
+      }
+    },
     "schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -20001,6 +20370,20 @@
         "send": "0.18.0"
       }
     },
+    "set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      }
+    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -20038,14 +20421,15 @@
       "dev": true
     },
     "side-channel": {
-      "version": "1.0.4",
+      "version": "1.0.6",
-      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.0",
+        "call-bind": "^1.0.7",
-        "get-intrinsic": "^1.0.2",
+        "es-errors": "^1.3.0",
-        "object-inspect": "^1.9.0"
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
       }
     },
     "signal-exit": {
@@ -20868,6 +21252,23 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "vue-echarts": {
+      "version": "6.6.9",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.6.9.tgz",
+      "integrity": "sha512-mojIq3ZvsjabeVmDthhAUDV8Kgf2Rr/X4lV4da7gEFd1fP05gcSJ0j7wa7HQkW5LlFmF2gdCJ8p4Chas6NNIQQ==",
+      "requires": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.11"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -21732,9 +22133,9 @@
       "dev": true
     },
     "zrender": {
-      "version": "5.4.1",
+      "version": "5.5.0",
-      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
-      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
       "requires": {
         "tslib": "2.3.0"
       },

package.json

@@ -17,6 +17,7 @@
     "echarts": "^5.5.0",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.3.0",
+    "pdfobject": "^2.3.0",
     "pinia": "^2.0.30",
     "recorder-core": "^1.3.23122400",
     "register-service-worker": "^1.7.2",
@@ -33,9 +34,9 @@
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "node-sass": "^6.0.1",
     "patch-package": "^6.5.1",
-    "sass-loader": "^10.2.0",
+    "sass": "^1.79.1",
+    "sass-loader": "^16.0.1",
     "typescript": "~4.5.5"
   }
 }

src/assets/css/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4404806 */
-  src: url('iconfont.woff2?t=1704785829971') format('woff2'),
+  src: url('iconfont.woff2?t=1721977017018') format('woff2'),
-       url('iconfont.woff?t=1704785829971') format('woff'),
+       url('iconfont.woff?t=1721977017018') format('woff'),
-       url('iconfont.ttf?t=1704785829971') format('truetype');
+       url('iconfont.ttf?t=1721977017018') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-caijishebeixinxichaxun:before {
+  content: "\e611";
+}
+
+.icon-yuyin:before {
+  content: "\e905";
+}
+
+.icon-luyin1:before {
+  content: "\e610";
+}
+
 .icon-tvoc:before {
   content: "\e753";
 }

src/components/assembly/indexList.vue

@@ -37,7 +37,7 @@ function routerpush(isLink:boolean=false) {
 <style scoped>
 .item {
   width: 20%;
-  height: 27%;
+  height: 267px;
   margin: 30px;
   cursor: pointer;
 }

src/components/charts/percentage.vue

@@ -10,10 +10,12 @@ const chart = ref(null)
 const prop = defineProps({
   title: String,
   color: Array,
-  percentage: Number
+  percentage: Object
 })
 let pieChart = null
 const init = ()=>{
+    let {accomplish,counts} = prop.percentage
+    let rate = Math.floor((accomplish / counts) * 100)
     pieChart = proxy.$echarts.init(chart.value)
     let option = {
     title: {
@@ -103,14 +105,14 @@ const init = ()=>{
         },
         data: [
           {
-            value: prop.percentage,
+            value: rate,
             name: "345",
             title: {},
             detail: {
               // 中心title设置
               offsetCenter: ["0%", "0%"],
               color: "#01F8FF",
-              formatter: "{value}%",
+              formatter: accomplish + "/" + counts,
               // borderColor: '#01F8FF',
               // borderRadius: 20,
               // borderWidth: 1,

src/components/headerBox/header2.vue

@@ -543,7 +543,7 @@ h1 {
 }
 .time {
   position: absolute;
-  width: 350px;
+  width: 360px;
   height: 2rem;
   bottom: 30%;
   left: 4.2rem;

src/components/headerBox/header3.vue

@@ -0,0 +1,584 @@
+<!--
+ * @FilePath: header3.vue
+ * @Author: zz
+ * @Date: 2024-07-19 08:16:33
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-19 09:14:40
+ * @Descripttion: 
+-->
+<!--
+ * @FilePath: \code\gitscreenFront\src\components\headerBox\header2.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-16 11:04:06
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+
+<template>
+  <div class="header2" :style="{ width: props.width, height: props.height }">
+    <h1 :class="langJudge() == '简体中文' ? 'zh-title' : 'en-title'">
+      {{ props.title }}
+    </h1>
+    <div class="slot">
+      <div class="tip" style="display: flex">
+        <span class="tipspan" v-for="item in props.titleTip">
+          <div class="colortip" :style="{ backgroundColor: item.color }"></div>
+          <span class="tipstring">{{ item.name }}</span></span
+        >
+        <slot></slot>
+      </div>
+      <!-- <div v-show="typeObj.comback" class="comeBack" @click="comeBackFun">
+        <i class="iconfont icon-back"></i>
+      </div> -->
+      <div
+        v-show="typeObj.AbnormalData"
+        ref="AbnormalDataRef"
+        class="AbnormalData"
+        @click="AbnormalDataFun"
+      >
+        <dv-scroll-board
+          class="dv-scroll-boardclass"
+          ref="tipList"
+          :config="listdata"
+          style="width: 30rem; height: 50px"
+        />
+        <el-badge :value="AbnormalNum" class="i-badge" :hidden="AbnormalNum == 0">
+          <i
+            :class="
+              AbnormalNum > 0
+                ? 'iconfont icon-baojingxinxi Abnormal-icon-yellow'
+                : 'iconfont icon-baojingxinxi'
+            "
+          ></i>
+        </el-badge>
+      </div>
+      <div v-show="typeObj.time" class="time">
+        <p ref="Timedom">{{ timeHtml }}</p>
+      </div>
+    </div>
+    <el-popover
+      ref="popoverRef"
+      :virtual-ref="AbnormalDataRef"
+      :visible="Abnormalpopovervisible"
+      trigger="click"
+      width="600px"
+      placement="bottom-start"
+      virtual-triggering
+    >
+      <ul class="popoverBOX" ref="popoverliDom" v-click-outside="noClickAbnormalDataFun">
+        <li class="popoverHeader">
+          <!-- <span><i class="iconfont icon-lishijilu lishijilu"></i>历史记录</span> -->
+          <el-button type="primary" :icon="Clock" text @click="showDialog"
+            >历史记录</el-button
+          >
+        </li>
+        <li v-for="item in powerlist" :key="item.deviceId">
+          {{ item.context }}
+        </li>
+        <li class="lookdown" v-show="onloadlist">
+          <span @click="clickNextPageAlarmList">{{ t("messages.加载更多") }}</span>
+        </li>
+      </ul>
+    </el-popover>
+    <HDialog
+      :tableData="dialogdata"
+      v-model:dialogTableVisible="dialogTableVisible"
+      :dialogLoading="dialogLoading"
+      @getDialogdatafun="getDialogdatafun"
+      :type="AbnormalType.type"
+      :total="dialogtotal"
+    ></HDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useNowTime from "@/hook/nowTime";
+import { ClickOutside as vClickOutside } from "element-plus";
+import { useRoute, useRouter } from "vue-router";
+import { devListType } from "@/type/InPlantProducts";
+import { getAlarmListData, getAlarmListHistoryData } from "@/http/index";
+import { onMounted, onUnmounted, reactive, ref, unref, watch, computed } from "vue";
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
+import { useHeaderStore } from "@/store/components/header";
+import { getStoredLanguage } from "@/utils/languageStorage";
+import { useI18n } from "vue-i18n";
+import { Clock } from "@element-plus/icons-vue";
+import HDialog from "./dialog/headerDialog.vue";
+let { t } = useI18n();
+const storeheader = useHeaderStore();
+let { timeHtml } = useNowTime();
+const router = useRouter();
+//刷新数据
+let numkey = ref(0);
+let popoverkey = ref(0);
+//历史数据dom
+let AbnormalDataRef = ref();
+let popoverRef = ref();
+let tipList = ref();
+let popoverliDom = ref();
+//历史报警数据弹窗显示
+let Abnormalpopovervisible = ref(false);
+let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
+//dialog
+let dialogdata = ref([]);
+let dialogTableVisible = ref(false);
+let dialogLoading = ref(true);
+let dialogtotal = ref(0);
+let onloadlist = computed(() => {
+  return storeheader.num > powerlist.length;
+});
+const listdata = reactive<devListType>({
+  data: [],
+  rowNum: 2,
+  oddRowBGC: "#100C2A",
+  evenRowBGC: "#100C2A",
+  hoverPause: true,
+  carousel: "page",
+  waitTime: 3000,
+  align: ["left"],
+});
+let AbnormalNum = ref(0);
+//弹窗历史数据
+let powerlist = reactive([]);
+let props = defineProps<{
+  width: string;
+  height: string;
+  title: string;
+  titleTip: any;
+  typeFun: any[];
+  alarmType: any[];
+}>();
+
+window.document.title = props.title;
+const typeObj = reactive({
+  comback: false,
+  AbnormalData: false,
+  time: false,
+});
+const AbnormalType = reactive({
+  pageSize: 5,
+  pageNum: 1,
+  type: "",
+});
+let comeBackFun = () => {
+  router.go(-1);
+};
+const changeAbnormalData = (val: any) => {
+  tipList.value.updateRows(val.data, { ...val });
+};
+let AbnormalDataFun = () => {
+  //该函数执行优先级低于noClickAbnormalDataFun
+  //Abnormalpopovervisibled代表弹窗是否已经显示
+  // 判断弹窗是否打开如果打开就关闭 关闭就打开
+  if (Abnormalpopovervisible.value) {
+    Abnormalpopovervisible.value = false;
+  } else {
+    //关闭情况下判断是否点击了非弹窗位置如果是则仍然关闭 否则打开
+    if (AbnormalpopovervisibleCtrl.value) {
+      Abnormalpopovervisible.value = false;
+    } else {
+      Abnormalpopovervisible.value = true;
+    }
+  }
+};
+let noClickAbnormalDataFun = () => {
+  //该函数执行优先级高于AbnormalDataFun
+  // 判断弹窗是否打开如果打开并且我点击了非弹窗位置则ctrl为true否则为false
+  if (Abnormalpopovervisible.value) {
+    AbnormalpopovervisibleCtrl.value = true;
+  } else {
+    AbnormalpopovervisibleCtrl.value = false;
+  }
+
+  Abnormalpopovervisible.value ? (Abnormalpopovervisible.value = false) : "";
+};
+function typeStatus() {
+  if (props.typeFun.length == 0) {
+    return;
+  }
+  props.typeFun.forEach((res) => {
+    for (let key in typeObj) {
+      if (res == key) {
+        typeObj[key] = true;
+      }
+    }
+  });
+}
+function langJudge() {
+  let lang = getStoredLanguage();
+  if (lang) {
+    return lang;
+  } else {
+    return "简体中文";
+  }
+}
+function showDialog() {
+  if (dialogTableVisible.value == false) {
+    getDialogdatafun({
+      type: AbnormalType.type,
+      pageSize: 10,
+      pageNum: 1,
+    });
+  }
+  Abnormalpopovervisible.value = false;
+  dialogTableVisible.value = true;
+}
+async function getDialogdatafun(config) {
+  dialogLoading.value = true;
+  let result: any = await getAlarmListHistoryData(config);
+
+  if (result.code == 200) {
+    dialogtotal.value = result.total;
+    dialogdata.value = result.rows;
+    dialogLoading.value = false;
+  } else {
+    setTimeout(() => {
+      if (dialogLoading.value) {
+        dialogLoading.value = false;
+      }
+    }, 0);
+  }
+}
+//判断是否显示对应组件后所做操作
+watch(
+  () => typeObj,
+  (newVal, oldVal) => {
+    if (newVal.AbnormalData) {
+      AbnormalType.type = props.alarmType.join(",");
+      getAlarmListDatafun();
+      // connectWebsocket(null, null, getWebsocket, errWebsocket);
+      setAlarmscrollBoardList();
+    }
+  },
+  { deep: true, flush: "post" }
+);
+//获取异常信息接口数据
+async function getAlarmListDatafun() {
+  let result: any = await getAlarmListData(AbnormalType);
+
+  if (result.code == 200) {
+    storeheader.setDataList(result);
+  }
+}
+//单机显示更多历史报警数据
+function clickNextPageAlarmList() {
+  // if(storeheader.num<=powerlist.length){
+  //   onloadlist.value=false
+  //   return
+  // }
+  AbnormalType.pageNum++;
+  getAlarmListDatafun();
+}
+//接受历史报警数据
+watch(
+  () => storeheader.AlarmpopoverList,
+  (newVal, oldVal) => {
+    newVal.forEach((res) => {
+      powerlist.push(res);
+    });
+  },
+  { deep: true, flush: "post" }
+);
+//接受历史报警数据滚动效果栏
+watch(
+  () => storeheader.AlarmscrollBoardList,
+  (newVal, oldVal) => {
+    // newVal.forEach(res=>{
+    //   let e=res.context.split('，')
+    //   listdata.data.push([e[0]])
+    //   listdata.data.push([e[1]])
+    // })
+    // changeAbnormalData(listdata)
+    // numkey.value++
+  },
+  { deep: true, flush: "post" }
+);
+let AlarmscrollTime = null;
+//每隔15秒钟替换一次组件数据进行轮播
+function setAlarmscrollBoardList() {
+  let start = 0;
+  let end = 4;
+
+  let i = 0;
+  setTimeout(() => {
+    storeheader.AlarmscrollBoardList.slice(0, 5).forEach((element) => {
+      let e = element.context.split("，");
+      listdata.data.push(...[[e[0]], [e[1]]]);
+      i++;
+    });
+
+    end = end + 5;
+    start = i >= 5 ? 5 : storeheader.AlarmscrollBoardList.length - 1;
+    start <= 0 ? (start = 0) : "";
+  }, 1000);
+
+  AlarmscrollTime = setInterval(() => {
+    if (i == 0) {
+      listdata.data = [];
+    }
+    i = 0;
+    if (storeheader.AlarmscrollBoardList.length == 0) {
+      return;
+    }
+
+    if (storeheader.AlarmscrollBoardList.length - 1 < end) {
+      end = storeheader.AlarmscrollBoardList.length - 1;
+    }
+    for (start; start <= end; start++) {
+      // console.log(storeheader.AlarmscrollBoardList[start],start,end);
+      // console.log(storeheader.AlarmscrollBoardList.length-1);
+      let listcontent = storeheader.AlarmscrollBoardList[start]?.context.split("，");
+
+      listdata.data.push(...[[listcontent[0]], [listcontent[1]]]);
+    }
+    changeAbnormalData(listdata);
+    numkey.value++;
+    end = end + 5;
+    //如果下次数据剩一个则只拿一条数据
+    if (start == storeheader.AlarmscrollBoardList.length - 1) {
+      // console.log('进入了2');
+      start = storeheader.AlarmscrollBoardList.length - 1;
+      end = storeheader.AlarmscrollBoardList.length - 1;
+    }
+    //如果剩余数据不足5个则拿出剩余数据
+    if (
+      end > storeheader.AlarmscrollBoardList.length - 1 &&
+      start <= storeheader.AlarmscrollBoardList.length - 1
+    ) {
+      // console.log('进入了3');
+      end = storeheader.AlarmscrollBoardList.length - 1;
+    }
+    // 如果全部超出则从头拿
+    if (
+      start > storeheader.AlarmscrollBoardList.length - 1 &&
+      end > storeheader.AlarmscrollBoardList.length - 1
+    ) {
+      // console.log('进入了4',start,end,storeheader.AlarmscrollBoardList.length-1,storeheader.AlarmscrollBoardList);
+      start = 0;
+      end = 4;
+    }
+  }, 15000);
+}
+//接受历史报警数据量
+watch(
+  () => storeheader.num,
+  (newVal, oldVal) => {
+    AbnormalNum.value = newVal;
+    numkey.value++;
+  },
+  { deep: true, flush: "post" }
+);
+function HeadergetWebsocket(val) {
+  let data = null;
+  try {
+    data = JSON.parse(val);
+  } catch (e) {
+    console.log(e);
+    return;
+  }
+
+  if (
+    props.alarmType.some((e) => {
+      return e == data.type;
+    })
+  ) {
+    // console.log(props.alarmType);
+    // console.log(props.alarmType.some(e=>{return e==data.type}));
+    storeheader.changeDataList(data);
+  }
+}
+function HeadererrWebsocket(val) {
+  // console.log(val);
+}
+onMounted(() => {
+  //判断需要显示出来的数据
+  typeStatus();
+});
+onUnmounted(() => {
+  // closeWebsocket();
+  storeheader.resetData();
+  AlarmscrollTime ? clearInterval(AlarmscrollTime) : "";
+});
+defineExpose({
+  changeAbnormalData,
+  HeadergetWebsocket,
+  HeadererrWebsocket,
+});
+</script>
+
+<style scoped>
+@import "@/assets/css/iconfont.css";
+.header2 {
+  width: 100%;
+  /* background-image: url(@/assets/header/CHT.png); */
+  background-size: 100% 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.header2-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  /* height: 100%; */
+  width: 100%;
+}
+h1 {
+  position: absolute;
+  top: 10px;
+}
+.zh-title {
+  margin-top: 6px;
+  font-size: 2.5rem;
+}
+.en-title {
+  font-size: 2rem;
+  max-width: 600px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  /* line-height: 80px; */
+}
+/* .header2 p {
+  position: absolute;
+  right: 50px;
+  bottom: 20px;
+  font-size: 20px;
+} */
+.slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 50px 10px 10px 10px;
+}
+
+/* .red {
+  background-color: rgb(228, 57, 97);
+}
+.blue {
+  background-color: rgb(32, 174, 197);
+} */
+.colortip {
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+}
+.tipstring {
+  font-size: 20px;
+  color: #fff;
+}
+.tip {
+  margin-top: 15px;
+}
+.tipspan {
+  display: flex;
+  margin-left: 10px;
+  align-items: center;
+}
+.comeBack {
+  position: absolute;
+  /* width: 2rem;
+  height: 2rem; */
+  bottom: 10%;
+  left: 1.5rem;
+  font-size: 3rem;
+  color: #fff;
+  cursor: pointer;
+}
+.comeBack > i {
+  font-size: 3rem;
+}
+.AbnormalData {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  /* width: 2rem;
+  height: 2rem; */
+  bottom: 20%;
+  right: 1%;
+  font-size: 3rem;
+  color: #fff;
+}
+.AbnormalData:hover {
+  cursor: pointer;
+}
+.AbnormalData > span {
+  font-size: 1rem;
+}
+.popoverBOX {
+  max-height: 15rem;
+  font-size: 18px;
+  overflow-y: auto;
+}
+.popoverBOX li {
+  padding: 10px 0 10px 0;
+}
+.lookdown {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1c78c2;
+}
+.lookdown:hover {
+  cursor: pointer;
+}
+.time {
+  position: absolute;
+  width: 350px;
+  height: 2rem;
+  bottom: 30%;
+  left: 4.2rem;
+  font-size: 25px;
+}
+.i-badge {
+  width: 3rem;
+  height: 3rem;
+}
+.i-badge > i {
+  font-size: 3rem;
+  position: relative;
+  top: -5px;
+}
+/* .dv-scroll-board /deep/ .ceil {
+    font-size: 1.2rem;
+} */
+.dv-scroll-boardclass :deep(.ceil) {
+  font-size: 20px;
+}
+.el-popper.is-dark:deep() {
+  background: #14274b !important;
+}
+.el-popover.el-popper:deep() {
+  background: #14274b !important;
+}
+.Abnormal-icon-yellow {
+  color: #ddb14f;
+}
+.lishijilu {
+  font-size: 2rem;
+  color: #fff;
+}
+.popoverHeader {
+  padding: 0 !important;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  line-height: 1.5rem;
+}
+.popoverHeader span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  /* border-radius: 50px;
+  background: linear-gradient(315deg, #404040, #4c4c4c); */
+  /* box-shadow: -20px -20px 60px #3c3c3c, 20px 20px 60px #525252; */
+}
+</style>

src/hook/nowTime.ts

@@ -16,11 +16,13 @@ export default function( ){
     function gettime(){
         var time = new Date();
  
-        var year = time.getFullYear();
+        var year:number|string = time.getFullYear();
         // 1月到12月(0-11)
-        var month = time.getMonth()+1;
+        var month:number|string = time.getMonth()+1;
-        var dates = time.getDate();
+        var dates:number|string = time.getDate();
- 
+        if (year < 10) year = "0" + year;
+        if (month < 10) month = "0" + month;
+        if (dates < 10) dates = "0" + dates;
         // 周日-周六(0-6) 刚好对应数字下标
         var day = time.getDay();
         if (getStoredLanguage() == 'English/USD') {

src/http/changHao/index.ts

@@ -0,0 +1,39 @@
+/*
+ * @FilePath: index.ts
+ * @Author: zz
+ * @Date: 2024-07-29 08:13:59
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-29 16:15:35
+ * @Descripttion: 
+ */
+import {get,post} from "@/utils/http"
+
+// 设备信息
+ export function reqdevicebyid(data:any){
+  return get('/socket/getdevicebyid/'+ data.id)
+ }
+ 
+// 耗电量
+ export function  reqtelectricity(data:any){
+  return get('/socket/getelectricity/' + data.id)
+ }
+
+ // 生产情况列表
+ export function  reqproinfo(data:any){
+  return get('/socket/getproinfo/' + data.id)
+ }
+
+  // 故障时长
+  export function  reqfaultinfo(data:any){
+    return get('/socket/getfaultinfo/' + data.id)
+   }
+
+     // 急停时长
+  export function  reqstopinfo(data:any){
+    return get('/socket/getstopinfo/' + data.id)
+   }
+
+// 设备告警
+  export function reqtalarm(data:any){
+    return get('/socket/getalarm/' + data.id)
+   }

src/locales/lang/Spanish.ts

@@ -298,7 +298,7 @@ export default {
         '效益&效率':'Benefit&Efficiency',
         '效益':'Benefit',
         '效率':'Efficiency',        
-        '微工厂缝纫设备看板':'微工厂缝纫设备看板',
+        '微工厂缝纫设备看板':'Micro factory sewing equipment signboard',
         '工作时间':'工作时间',
         '空闲时间':'空闲时间',
         '智能货架物联管理系统':'智能货架物联管理系统',
@@ -316,10 +316,42 @@ export default {
         '月':'Mes',
         '日':'Fecha',
         "再登软件工况物联系统": "GOATS Working Condition IoT",
-        "富怡立式啧墨切割机": "Richpeace inkjet cutting machine",
+        "富怡立式喷墨切割机": "Richpeace inkjet cutting machine",
         "富怡多功能绣花机": "Richpeace embroidery machine",
         "JUKI高速直驱平缝机": "JUKI lockstitch sewing machine",
         "Yamato包缝机": "Yamato overlock sewing machine",
+        "花样名称": "花样名称",
+        "花样总针数": "花样总针数",
+        "当前针数": "当前针数",
+        "断线提醒": "断线提醒",
+        "冲缝一体机": "冲缝一体机",
+        "再登机器物联管理系统": "再登机器物联管理系统",
+        "工业缝纫机": "工业缝纫机",
+        "剪线次数": "剪线次数",
+        "针数": "针数",
+        "压脚次数": "压脚次数",
+        "能耗": "能耗",
+        "次": "次",
+        "设备稼动率": "设备稼动率",
+        "产出进度": "产出进度",
+        "稼动率说明":"稼动率：实际工作时间/设备开机时间",
+        "已完成":"已完成",
+        "未完成":"未完成",
+        "工作速度":"工作速度",
+        "产品合格率":"产品合格率",
+        "维保信息":"维保信息",
+        '件':'件',
+        "日期":"日期",
+        "工作人员":"工作人员",
+        "操作员编号":"操作员编号",
+        "完成":"完成",
+        "合格率":"合格率",
+        "通知":"通知",
+        "轮播已开启":"轮播已开启",
+        "轮播已关闭":"轮播已关闭",
+        "加工时长":"加工时长",
+        "当日总针数":"Total Stitches Today",
+        "当日工作时长":"Working Time Today",
       },
       "default":{
           '年': 'Year',

src/locales/lang/en.ts

@@ -307,7 +307,7 @@ export default {
         '效益&效率':'Benefit&Efficiency',
         '效益':'Benefit',
         '效率':'Efficiency',        
-        '微工厂缝纫设备看板':'微工厂缝纫设备看板',
+        '微工厂缝纫设备看板':'Micro factory sewing equipment signboard',
         '工作时间':'工作时间',
         '空闲时间':'空闲时间',
         '智能货架物联管理系统':'智能货架物联管理系统',
@@ -325,7 +325,7 @@ export default {
         '月':'Month',
         '日':'Date',
         "再登软件工况物联系统": "GOATS Working Condition IoT",
-        "富怡立式啧墨切割机": "Richpeace inkjet cutting machine",
+        "富怡立式喷墨切割机": "Richpeace inkjet cutting machine",
         "富怡多功能绣花机": "Richpeace embroidery machine",
         "JUKI高速直驱平缝机": "JUKI lockstitch sewing machine",
         "Yamato包缝机": "Yamato overlock sewing machine",
@@ -360,6 +360,8 @@ export default {
         "轮播已关闭":"Carousel has been turned off",
         "加工时长":"Processing Time",
         "合格率":"Qualified Rate",
+        "当日总针数":"Total Stitches Today",
+        "当日工作时长":"Working Time Today",
       },
       "default":{
           '年': 'Year',

src/locales/lang/zh.ts

@@ -324,7 +324,7 @@ export default {
         '月': '月',
         '日': '日',
         "再登软件工况物联系统": "再登软件工况物联系统",
-        "富怡立式啧墨切割机": "富怡立式啧墨切割机",
+        "富怡立式喷墨切割机": "富怡立式喷墨切割机",
         "富怡多功能绣花机": "富怡多功能绣花机",
         "JUKI高速直驱平缝机": "JUKI高速直驱平缝机",
         "Yamato包缝机": "Yamato包缝机",
@@ -358,6 +358,8 @@ export default {
         "轮播已开启":"轮播已开启",
         "轮播已关闭":"轮播已关闭",
         "加工时长":"加工时长",
+        "当日总针数":"当日总针数",
+        "当日工作时长":"当日工作时长",
     },
     "default":{
         '年': '年',

src/router/index.ts

@@ -378,6 +378,13 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import("../views/Exhibition/Germany/loop.vue"),
       },
 
+      // 昌昊大屏
+      {
+        path:"/ChangHaoView_:id",
+        name:"ChangHaoView",
+        component: () => import("../views/ChangHaoView/index.vue"),
+
+      },
 
 
 

src/utils/languageStorage.ts

@@ -1,7 +1,7 @@
 
 //获取用户保存的语言首选项
 export function getStoredLanguage(): string | null {
-  return localStorage.getItem("selectedLanguage");
+  return localStorage.getItem("selectedLanguage")||'简体中文';
 }
 //保存新的语言选择
 export function saveStoredLanguage(language: string): void {

src/utils/time.ts

@@ -9,10 +9,10 @@
  */
 
 import { getStoredLanguage } from "../utils/languageStorage";
-export function gettime(data = null,type = 1) {
+export function gettime(data = null, type = 1) {
         var time
         if (data) {
-                data instanceof Date? time=data : time = new Date(data);
+                data instanceof Date ? time = data : time = new Date(data);
         } else {
                 time = new Date();
         }
@@ -38,14 +38,14 @@ export function gettime(data = null,type = 1) {
         if (minutes < 10) minutes = "0" + minutes;
         if (seconds < 10) seconds = "0" + seconds;
 
-        if(type==1){
+        if (type == 1) {
                 return year + "-" + month + "-" + dates + " " + hours + ':' + minutes + ':' + seconds + ' ' + arr[day];
-        }else if (type == 2){
+        } else if (type == 2) {
                 return year + "-" + month + "-" + dates + " " + hours + ':' + minutes + ':' + seconds;
-        }else{
+        } else {
                 return year + "-" + month + "-" + dates + " " + hours + ':' + minutes + ':' + seconds + ' ' + arr[day];
         }
-       
+
 }
 export function clacendTime(endtime, nowtime) {
         let newDate = Math.abs(endtime - nowtime)
@@ -55,3 +55,17 @@ export function clacendTime(endtime, nowtime) {
         var s = Math.floor(newDate / 1000 % 60)
         return day + '天' + h + '时' + m + '分' + s + '秒'
 }
+
+//时间戳转换
+export function timestampToTime(timestamp) {
+        const startDate = new Date(0); // 0 就是 1970年1月1日
+        const targetDate = new Date(timestamp);
+        const diff = targetDate.getTime() - startDate.getTime(); // 计算时间差（毫秒）
+        // let day = Math.floor(diff / (1000 * 60 * 60 * 24)); // 转换为天数
+        let hour = (Math.floor(diff / (1000 * 60 * 60) % 24)) < 10 ? '0'+(Math.floor(diff / (1000 * 60 * 60) % 24)) :(Math.floor(diff / (1000 * 60 * 60) % 24)); // 转换为小时
+        let minute = Math.floor(diff / (1000 * 60) % 60) < 10 ? '0'+Math.floor(diff / (1000 * 60) % 60) :Math.floor(diff / (1000 * 60) % 60); // 转换为分钟
+        let second = Math.floor(diff / 1000 % 60) < 10 ? '0'+Math.floor(diff / 1000 % 60):Math.floor(diff / 1000 % 60); // 转换为秒
+
+        return `${hour}:${minute}:${second}`;
+}
+

src/views/ChangHaoView/components/Border.vue

@@ -0,0 +1,28 @@
+<!--
+ * @FilePath: Border.vue
+ * @Author: zz
+ * @Date: 2024-07-19 10:10:26
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-20 17:20:58
+ * @Descripttion: 
+-->
+<template>
+  <div class="box" style="text-align: center">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style scoped>
+.box {
+  background: linear-gradient(to top, #2667ab, #2667ab) left top no-repeat,
+    /*上左*/ linear-gradient(to right, #2667ab, #2667ab) left top no-repeat,
+    /*左上*/ linear-gradient(to left, #2667ab, #2667ab) right top no-repeat,
+    /*上右*/ linear-gradient(to bottom, #2667ab, #2667ab) right top no-repeat,
+    /*上右*/ linear-gradient(to left, #2667ab, #2667ab) left bottom no-repeat,
+    /*下左*/ linear-gradient(to bottom, #2667ab, #2667ab) left bottom no-repeat,
+    /*左下*/ linear-gradient(to top, #2667ab, #2667ab) right bottom no-repeat,
+    /*下右*/ linear-gradient(to left, #2667ab, #2667ab) right bottom no-repeat; /*右下*/
+  background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;
+  background-color: rgba(36, 56, 128, 0.04);
+}
+</style>

src/views/ChangHaoView/components/Center.vue

@@ -0,0 +1,105 @@
+<!--
+ * @FilePath: Center.vue
+ * @Author: zz
+ * @Date: 2024-07-19 11:04:25
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-19 11:11:38
+ * @Descripttion: 
+-->
+<template>
+  <Border class="center">
+    <v-chart :option="options" class="line"></v-chart>
+  </Border>
+</template>
+<script setup lang="ts">
+import Border from "./Border.vue";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onUpdated,
+  defineProps,
+  computed,
+} from "vue";
+const { proxy } = getCurrentInstance() as any;
+
+let lineRef = ref();
+let lineChart = null;
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: [],
+  },
+});
+// 折线图配置
+
+let options = computed(() => {
+  return {
+    tooltip: {
+      trigger: "axis",
+    },
+    backgroundColor: "transparent",
+    legend: {
+      data: ["日耗电曲线"],
+      icon: "none",
+      right: "10px",
+      textStyle: {
+        color: "#ff7b12",
+        fontSize: 20,
+        fontWeight: "bold",
+      },
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      // data: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
+      data: props.data.x,
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        formatter: "{value} ",
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "dashed",
+        },
+      },
+    },
+    series: [
+      {
+        name: "日耗电曲线",
+        type: "line",
+        stack: "Total",
+        lineStyle: {
+          color: "#ff7b12",
+        },
+        // data: [120, 135, 101, 134, 90, 230, 210],
+        data: props.data.y,
+        symbol: "none",
+        smooth: true,
+      },
+    ],
+  };
+});
+</script>
+<style scoped>
+.center {
+  height: 30%;
+  width: 94%;
+  margin: 2% 3%;
+}
+.line {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/ChangHaoView/components/CenterBottom.vue

@@ -0,0 +1,128 @@
+<!--
+ * @FilePath: CenterBottom.vue
+ * @Author: zz
+ * @Date: 2024-07-19 11:04:25
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-19 11:08:37
+ * @Descripttion: 
+-->
+<template>
+  <Border class="centerbottom">
+    <h2 class="components-header">
+      <DecorationFadeOut> &nbsp;{{ title }}&nbsp; </DecorationFadeOut>
+    </h2>
+    <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
+  </Border>
+</template>
+<script setup lang="ts">
+import Border from "./Border.vue";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onUpdated,
+  defineProps,
+  computed,
+  reactive,
+  watch,
+} from "vue";
+const { proxy } = getCurrentInstance() as any;
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+import ZdScrollBoard from "@/components/data-view/index.vue";
+const prop = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  data: {
+    type: Object,
+    default: () => ({
+      list: [],
+    }),
+  },
+});
+
+const devList = ref(null);
+let config = reactive({
+  header: [
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "程序名称" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "刀具号" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "加工数量" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "操作模式" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "运行模式" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工周期 " + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "轴状态" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工时间" + "</span>",
+  ],
+
+  headerBGC: "rgba(0, 11, 18, 1)",
+  oddRowBGC: "#0d1625",
+  evenRowBGC: "#000F1D",
+  wrap: [false, false, false, false, false],
+  columnWidth: [130, 120, 130, 120, 130, 160, 130, 160],
+  align: ["center", "center", "center", "center", "center", "center", "center", "center"],
+  rowNum: 3,
+  fontsize: "18px",
+  waitTime: 3000,
+  // data: computed(() => prop.data),
+});
+
+const handleData = () => {
+  let config_data = prop.data.map((item: any) => {
+    let statusString;
+    if (item.axisstatus === 0) {
+      statusString = "***";
+    } else if (item.axisstatus === 1) {
+      statusString = "移动";
+    } else if (item.axisstatus === 2) {
+      statusString = "暂停";
+    } else {
+      // 可选：如果axisstatus不是0、1或2，你可以设置一个默认值或抛出错误
+      statusString = "未知状态";
+    }
+    return [
+      item.procedurename,
+      item.knifenum,
+      item.pronum,
+      item.operate,
+      item.run,
+      item.machining + "min",
+      statusString,
+      item.processingtime + "s",
+    ];
+  });
+  if (devList.value) {
+    devList.value.updateRows(config_data, config);
+  }
+};
+watch(
+  () => prop.data,
+  (newVal, oldVal) => {
+    handleData();
+  },
+  { deep: true }
+);
+onMounted(() => {
+  // console.log(config_data);
+});
+</script>
+<style scoped>
+.centerbottom {
+  height: 30%;
+  width: 94%;
+  margin: 2% 3%;
+}
+.components-header {
+  font-size: 20px;
+  margin-bottom: 20px;
+  color: #00c7ebfc;
+}
+.dev-list {
+  width: 100%;
+  height: 75%;
+}
+:deep(.zd-scroll-board .rows .row-item) {
+  font-size: 18px;
+}
+</style>

src/views/ChangHaoView/components/CenterTop.vue

@@ -0,0 +1,270 @@
+<template>
+  <Border class="centertop">
+    <!-- <div ref="gaugeRef" id="gauge" style="width: 800px; height: 300px"></div> -->
+    <v-chart class="chart" :option="option" style="width: 800px; height: 300px" />
+  </Border>
+</template>
+<script setup lang="ts">
+import Border from "./Border.vue";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onUpdated,
+  defineProps,
+  computed,
+} from "vue";
+const { proxy } = getCurrentInstance() as any;
+let gaugeRef = ref();
+let gaugeChart = null;
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: [],
+  },
+});
+const option = computed(() => {
+  return {
+    tooltip: {
+      formatter: "{a} <br/>{c} {b}",
+    },
+    backgroundColor: "transparent",
+    series: [
+      {
+        name: "稼动率",
+        type: "gauge",
+        z: 3,
+        min: 0,
+        max: 100,
+        radius: "85%",
+        axisLine: {
+          lineStyle: {
+            width: 4,
+            color: [
+              [0.9, "#00b2b9"],
+              [1, "#e60007"],
+            ],
+          },
+        },
+        //指针
+        pointer: {
+          itemStyle: {
+            color: "auto",
+          },
+        },
+        axisTick: {
+          distance: 1,
+          length: 5, //长度
+          splitNumber: 5, //数量
+          lineStyle: { color: "#464646" }, //小刻度
+        },
+        //分隔线
+        splitLine: {
+          distance: -3,
+          length: 14,
+          lineStyle: {
+            color: "auto",
+          },
+        },
+        axisLabel: {
+          color: "#fbffff",
+          distance: 10,
+          fontSize: 16,
+          fontWeight: "bolder",
+        },
+        title: {
+          offsetCenter: ["0", "90%"],
+          textStyle: {
+            fontWeight: "bolder",
+            fontSize: 20,
+            color: "#fbffff",
+          },
+        },
+        detail: {
+          formatter: "{value} %",
+          // formatter(params) {
+          //   return `${params.name}${params.value}h`;
+          // },
+          color: "inherit",
+          fontSize: 40,
+          textStyle: {
+            fontWeight: "bolder",
+          },
+        },
+        // data: [
+        //   {
+        //     value: 45.9,
+        //     name: "稼动率",
+        //   },
+        // ],
+        data: [
+          props.data.find((item) => item.name === "稼动率") || {
+            value: 0,
+            name: "稼动率",
+          },
+        ],
+      },
+      {
+        name: "主轴转速",
+        type: "gauge",
+        center: ["20%", "55%"],
+        radius: "55%",
+        min: 0,
+        max: 100,
+        endAngle: 45,
+        splitNumber: 10,
+        axisLine: {
+          lineStyle: {
+            width: 3,
+            color: [
+              [0.9, "#00b2b9"],
+              [1, "#e60007"],
+            ],
+          },
+        },
+        axisTick: {
+          distance: 1,
+          length: 5, //长度
+          splitNumber: 5, //数量
+          lineStyle: { color: "#464646" }, //小刻度
+        },
+        //分隔线
+        splitLine: {
+          distance: -2,
+          length: 10,
+          lineStyle: {
+            color: "auto",
+          },
+        },
+        axisLabel: {
+          show: false,
+        },
+        title: {
+          offsetCenter: ["0", "115%"],
+          textStyle: {
+            fontWeight: "bolder",
+            fontSize: 20,
+            color: "#fbffff",
+          },
+        },
+        detail: {
+          formatter: "{value}R/Min ",
+          color: "inherit",
+          fontSize: 20,
+          textStyle: {
+            fontWeight: "bolder",
+          },
+        },
+        // data: [
+        //   {
+        //     value: 99.1,
+        //     name: "主轴转速",
+        //   },
+        // ],
+        data: [
+          props.data.find((item) => item.name === "主轴转速") || {
+            value: 0,
+            name: "主轴转速",
+          },
+        ],
+        //指针
+        pointer: {
+          width: 5,
+          itemStyle: {
+            color: "auto",
+          },
+        },
+      },
+      {
+        name: "进给速度",
+        type: "gauge",
+        center: ["80%", "55%"],
+        radius: "55%",
+        min: 0,
+        max: 100,
+        startAngle: 135,
+        endAngle: -45,
+        splitNumber: 7,
+        axisLine: { lineStyle: { width: 8 } },
+        axisLine: {
+          lineStyle: {
+            width: 3,
+            color: [
+              [0.9, "#00b2b9"],
+              [1, "#e60007"],
+            ],
+          },
+        },
+        axisTick: {
+          distance: 1,
+          length: 5, //长度
+          splitNumber: 5, //数量
+          lineStyle: { color: "#464646" }, //小刻度
+        },
+        //分隔线
+        splitLine: {
+          distance: -2,
+          length: 10,
+          lineStyle: {
+            color: "auto",
+          },
+        },
+        axisLabel: {
+          show: false,
+        },
+        title: {
+          offsetCenter: ["0", "115%"],
+          textStyle: {
+            fontWeight: "bolder",
+            fontSize: 20,
+            color: "#fbffff",
+          },
+        },
+        detail: {
+          formatter: "{value}MM/Min",
+          color: "inherit",
+          fontSize: 20,
+          textStyle: {
+            fontWeight: "bolder",
+          },
+        },
+        // data: [
+        //   {
+        //     value: 45.5,
+        //     name: "进给速度",
+        //   },
+        // ],
+        data: [
+          props.data.find((item) => item.name === "进给速度") || {
+            value: 0,
+            name: "进给速度",
+          },
+        ],
+        //指针
+        pointer: {
+          width: 5,
+          itemStyle: {
+            color: "auto",
+          },
+        },
+      },
+    ],
+  };
+});
+</script>
+<style scoped>
+.centertop {
+  height: 30%;
+  width: 94%;
+  margin: 2% 3%;
+}
+.gauge {
+  width: 800px;
+  height: 600px;
+}
+.chart {
+  padding-left: 50px;
+}
+</style>

src/views/ChangHaoView/components/LeftBottom.vue

@@ -0,0 +1,29 @@
+<template>
+  <Border class="leftbottom">
+    <devStatusTip
+      :title="'设备告警'"
+      :tipList="tipList"
+      :label="{ name: '设备名称', alarmcode: '告警代码', alarminfo: '提示' }"
+      :per_view="4"
+    ></devStatusTip>
+  </Border>
+</template>
+<script setup lang="ts">
+import { ref, defineProps } from "vue";
+import Border from "./Border.vue";
+import devStatusTip from "./devStatusTip.vue";
+
+const props = defineProps({
+  tipList: {
+    type: Array as () => Array<{ name: string; alarmcode: string; alarminfo: string }>,
+    required: true,
+  },
+});
+</script>
+<style scoped>
+.leftbottom {
+  margin: 4%;
+  height: 41%;
+  /* width: 480px; */
+}
+</style>

src/views/ChangHaoView/components/LeftTop.vue

@@ -0,0 +1,198 @@
+<template>
+  <Border class="lefttop">
+    <h2 class="components-header">
+      <DecorationFadeOut> &nbsp;{{ title }}&nbsp; </DecorationFadeOut>
+    </h2>
+    <div class="chart-and-status">
+      <div ref="ringRef" class="ring"></div>
+      <!-- 新增的运行时间显示区域 -->
+      <div class="status-display">
+        <ul>
+          <li v-for="(item, index) in data" :key="item.key" class="status-item">
+            <span class="color-bar" :style="{ backgroundColor: colors[index] }"></span>
+            <span class="label">{{ item.name }}:</span>
+            <span class="value" :style="{ color: colors[index] }"
+              >{{ item.value }}min</span
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </Border>
+</template>
+
+<script setup lang="ts">
+import Border from "./Border.vue";
+import * as echarts from "echarts";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onUpdated,
+  defineProps,
+  computed,
+} from "vue";
+const { proxy } = getCurrentInstance() as any;
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+let ringRef = ref();
+let ringChart = null;
+
+const prop = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  data: {
+    type: Array,
+    default: [],
+  },
+  statusList: {
+    type: Array as any,
+    default: () => [],
+  },
+});
+// 生成颜色数组的计算属性
+const colors = computed(() => {
+  const baseColors = ["#44ce81", "#ff4f4e", "#a3a2a7", "#e9ac53", "#ff0700"]; // 示例颜色
+  return prop.data.map((_, index) => {
+    return baseColors[index % baseColors.length]; // 循环使用颜色数组
+  });
+});
+// 环形图配置
+const init = () => {
+  ringChart = proxy.$echarts.init(ringRef.value, "dark");
+  let option = {
+    tooltip: {
+      trigger: "item",
+    },
+    color: ["#44ce81", "#ff4f4e", "#a3a2a7", "#e9ac53", "#ff0700"],
+    backgroundColor: "transparent",
+    legend: {
+      show: false,
+      // type: "scroll",
+      // bottom: "0",
+      // left: "center",
+      // textStyle: {
+      //   color: "#fff",
+      //   fontSize: 16,
+      // },
+    },
+    series: [
+      {
+        name: "",
+        type: "pie",
+        radius: ["40%", "70%"],
+        center: ["50%", "45%"],
+        label: {
+          show: true,
+          formatter(params) {
+            return `${params.name}${params.value}min`;
+          },
+          fontSize: 18,
+          fontWeight: 500,
+        },
+        labelLine: {
+          show: true,
+        },
+        top: "5%",
+        data: prop.data,
+      },
+    ],
+  };
+  ringChart.setOption(option);
+};
+onUpdated(() => {
+  ringChart.setOption({
+    series: [
+      {
+        data: prop.data,
+      },
+    ],
+  });
+});
+
+// 初始化 ECharts 实例
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped>
+.lefttop {
+  margin: 4%;
+  height: 50%;
+  /* width: 480px; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  align-content: space-around;
+}
+.components-header {
+  font-size: 20px;
+  margin-bottom: 20px;
+  color: #00c7ebfc;
+}
+.chart-and-status {
+  width: 100%;
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.ring {
+  width: 100%;
+  height: 100%;
+}
+
+.status-display {
+  width: 90%;
+  color: #f4f4f4;
+  border-radius: 8px;
+  max-width: 600px;
+  margin: 10px auto;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+.color-bar {
+  display: inline-block;
+  width: 5px;
+  height: 20px;
+  margin-right: 1px;
+  vertical-align: middle;
+}
+
+.status-item {
+  display: flex;
+  /* justify-content: space-between; */
+  align-items: center;
+  padding: 5px 0;
+  border-bottom: 1px solid #88beed33;
+  list-style-type: none;
+}
+
+.label {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  display: block;
+  text-align: left !important; /* 使用!important确保左对齐设置被优先考虑 */
+  padding-left: 20px;
+}
+
+.value {
+  font-size: 20px;
+  margin-left: 40%;
+  font-weight: 800;
+}
+
+.status-item:last-child {
+  border-bottom: none;
+}
+</style>

src/views/ChangHaoView/components/Right.vue

@@ -0,0 +1,229 @@
+<!--
+ * @FilePath: Right.vue
+ * @Author: zz
+ * @Date: 2024-07-23 10:17:14
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-29 11:28:49
+ * @Descripttion: 
+-->
+<template>
+  <Border class="righttop">
+    <div class="box-left">
+      <!-- <el-image style="width: 100%; height: 60%" :src="imgSrc" fit="contain"></el-image> -->
+      <div class="iconfont icon-caijishebeixinxichaxun"></div>
+      <div class="device-status">
+        <div
+          class="status-indicator"
+          :style="{ background: status_color[prop.deviceStatus] }"
+        ></div>
+        <span style="margin-left: 10px" :style="{ color: statusTextColor }">{{
+          statusText
+        }}</span>
+      </div>
+    </div>
+    <div class="box-right">
+      <ul style="margin-bottom: 30px">
+        <li v-for="(item, index) in deviceList" :key="item.key" class="device-item">
+          <span class="label">{{ item.label }}&nbsp </span>
+          <span class="value">{{ item.value }}</span>
+        </li>
+      </ul>
+    </div>
+  </Border>
+
+  <Border class="rightcenter">
+    <div class="box-item" style="width: 40%; padding-top: 30px;}">
+      <span class="label">通讯状态:&nbsp&nbsp</span
+      ><span class="value" :style="{ color: comTextColor }">{{ comvalue }}</span>
+    </div>
+    <div class="combox">
+      <div class="top-item1" v-for="(item, index) in comList" :key="item.key">
+        <span class="label">{{ item.label }}:&nbsp&nbsp </span>
+        <span class="value">{{ item.value + item.unit }}</span>
+      </div>
+    </div>
+  </Border>
+
+  <Border class="rightbottom">
+    <div class="box-item" style="width: 40%; padding-top: 30px;}">
+      <span class="label">实时电压、电流</span>
+    </div>
+    <div class="combox">
+      <div class="top-item" v-for="(item, index) in CurList" :key="item.key">
+        <span class="label">{{ item.label }}:&nbsp&nbsp </span>
+        <span class="value">{{ item.value + item.unit }}</span>
+      </div>
+    </div>
+  </Border>
+</template>
+<script setup lang="ts">
+import Border from "./Border.vue";
+import { defineComponent, ref, onMounted, computed } from "vue";
+const prop = defineProps({
+  imgSrc: {
+    type: String,
+    default: "",
+  },
+  deviceList: {
+    type: Array,
+    default: [],
+  },
+  comList: {
+    type: Array,
+    default: [],
+  },
+  CurList: {
+    type: Array,
+    default: [],
+  },
+  communication: {
+    type: Number,
+    default: null,
+  },
+  deviceStatus: {
+    type: Number,
+    default: null,
+  },
+});
+
+// const deviceStatus = ref(1);
+// const communicationValue = ref(5);
+
+const comvalue = computed(() => {
+  switch (prop.communication) {
+    case 5:
+      return "正常";
+    case 15:
+      return "断线";
+    default:
+      return "未知状态";
+  }
+});
+
+const com_color = {
+  "5": "#44ce81",
+  "15": "#c1c1c1",
+};
+const comTextColor = computed(() => {
+  return com_color[prop.communication] || "#000000";
+});
+
+const status_color = {
+  "0": "#FF6E76",
+  "1": "#44ce81",
+};
+
+const statusText = computed(() => {
+  switch (prop.deviceStatus) {
+    case 0:
+      return "停止";
+    case 1:
+      return "运行";
+    default:
+      return "未知状态";
+  }
+});
+const statusTextColor = computed(() => {
+  return status_color[prop.deviceStatus] || "#000000";
+});
+
+// onMounted(() => {
+//   console.log( devStatus.value);
+// }
+</script>
+<style scoped>
+@import url("@/assets/css/iconfont/iconfont.css");
+.righttop {
+  margin: 4%;
+  height: 22%;
+  width: 440px;
+  display: flex; /* 启用 Flexbox 布局 */
+  align-items: center; /* 如果需要，可以在垂直方向上居中对齐子元素 */
+  /* 其他样式，如高度、宽度、边距等 */
+}
+.rightcenter {
+  margin: 4%;
+  height: 40%;
+  width: 440px;
+}
+.rightbottom {
+  margin: 4%;
+  height: 27%;
+  width: 440px;
+}
+.box-left {
+  width: 30%;
+  height: 100%;
+  /* background-color: red; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  align-content: space-around;
+}
+.status-indicator {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: red;
+}
+
+.device-status {
+  width: 80%;
+  font-size: 18px;
+  font-weight: 600;
+  color: #aeeefafe;
+  box-sizing: border-box;
+  padding-left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+.box-right {
+  width: 70%;
+  font-size: 20px;
+}
+.device-item {
+  display: flex;
+  padding: 8px 8px 8px 30px;
+  list-style-type: none;
+}
+.value {
+  color: #5abcfa;
+  font-weight: 700;
+  font-size: 18px;
+}
+.label {
+  font-weight: 800;
+  font-size: 18px;
+}
+/* .comvalue {
+  color: #5abcfa;
+  font-weight: 700;
+  font-size: 20px;
+} */
+.combox {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-top: 10px;
+  vertical-align: middle;
+  .top-item {
+    padding: 10px 10px 10px 20px;
+    width: 40%;
+    display: flex;
+  }
+}
+.top-item1 {
+  padding: 10px 0px 10px 0px;
+  width: 50%;
+  display: flex;
+}
+.iconfont {
+  font-size: 80px;
+  /* color: #00b2b9; */
+}
+</style>

src/views/ChangHaoView/components/devStatusTip.vue

@@ -0,0 +1,241 @@
+<!--
+ * @FilePath: devStatusTip.vue
+ * @Author: zz
+ * @Date: 2024-07-20 17:06:42
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-20 17:57:53
+ * @Descripttion: 
+-->
+<!--
+ * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\devStatusTip.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-06-12 08:52:40
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+  <div style="height: 100%; width: 100%">
+    <h2 class="components-header">
+      <DecorationFadeOut> &nbsp;{{ title }}&nbsp; </DecorationFadeOut>
+    </h2>
+    <div class="components-content" :key="keynum">
+      <swiper-container
+        :slidesPerView="props.per_view"
+        :loop="true"
+        :initialSlide="0"
+        :spaceBetween="0"
+        direction="vertical"
+        :autoplay="{
+          delay: 3000,
+          disableOnInteraction: false,
+        }"
+        autoHeight="true"
+        observer="true"
+        observeParents="true"
+        @progress="onProgress"
+        :loopAdditionalSlides="1"
+        @slidechange="onSlideChange"
+        v-if="props.tipList.length > 0"
+      >
+        <swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
+          <div class="itemclass">
+            <el-row :gutter="5" class="row-flex">
+              <el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px">
+                {{ index + 1 }}
+              </el-col>
+              <el-col
+                :span="18"
+                class="col-flex"
+                style="
+                  flex-direction: column;
+                  font-size: 18px;
+                  color: #fff;
+                  align-items: flex-start;
+                "
+              >
+                <p class="item-name">
+                  <span class="item-name-key">{{ label.name }}：</span
+                  ><span class="item-name-value">{{ res.name }}</span>
+                </p>
+                <p style="margin-top: 10px 0">
+                  <span>{{ label.alarmcode }}：</span
+                  ><span>{{ res.alarmcode }}</span> &nbsp;
+                  <span>{{ label.alarminfo }}：</span><span>{{ res.alarminfo }}</span>
+                </p>
+              </el-col>
+              <el-col
+                :span="4"
+                class="col-flex"
+                style="font-size: 25px; font-weight: bold"
+                :style="{ color: compare[res.status] ? compare[res.status] : 'red' }"
+              >
+                {{ res.status }}
+              </el-col>
+            </el-row>
+          </div>
+        </swiper-slide>
+        <template
+          v-if="
+            props.tipList.length >= props.per_view &&
+            props.tipList.length < props.per_view * 2
+          "
+        >
+          <swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
+            <div class="itemclass">
+              <el-row :gutter="5" class="row-flex">
+                <el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px">
+                  {{ index + 1 }}
+                </el-col>
+                <el-col
+                  :span="18"
+                  class="col-flex"
+                  style="
+                    flex-direction: column;
+                    font-size: 18px;
+                    color: #fff;
+                    align-items: flex-start;
+                  "
+                >
+                  <p class="item-name">
+                    <span class="item-name-key">{{ label.name }}：</span
+                    ><span class="item-name-value">{{ res.name }}</span>
+                  </p>
+                  <p style="margin-top: 10px 0">
+                    <span>{{ label.alarmcode }}：</span
+                    ><span>{{ res.alarmcode }}</span> &nbsp;
+                    <span>{{ label.alarminfo }}：</span><span>{{ res.alarminfo }}</span>
+                  </p>
+                </el-col>
+                <el-col
+                  :span="4"
+                  class="col-flex"
+                  style="font-size: 25px; font-weight: bold"
+                  :style="{ color: compare[res.status] ? compare[res.status] : 'red' }"
+                >
+                  {{ res.status }}
+                </el-col>
+              </el-row>
+            </div>
+          </swiper-slide>
+        </template>
+      </swiper-container>
+      <div
+        v-else
+        style="
+          display: flex;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+        "
+      >
+        <el-empty :image-size="120" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import { register } from "swiper/element/bundle";
+import { useI18n } from "vue-i18n";
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+let { t } = useI18n();
+register();
+const props: any = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  tipList: {
+    type: Array,
+    default: [{ name: "", alarmcode: "", alarminfo: "" }],
+  },
+  label: {
+    type: Object,
+    default: { name: "设备名称", alarmcode: "告警代码", alarminfo: "提示" },
+  },
+  per_view: {
+    type: Number,
+    default: 5,
+  },
+});
+let compare = {
+  进行中: "#83C710",
+  未开始: "#E44610",
+  未进行: "#E54711",
+  故障: "#DA0F10",
+  维修中: "#83C710",
+};
+let useSwiper: any = ref(null);
+let swiperRef = ref(null);
+let listVal = ref([]);
+let keynum = ref(0);
+watch(
+  () => props.tipList,
+  (val) => {
+    keynum.value++;
+  },
+  { deep: true }
+);
+
+const onProgress = (e) => {};
+
+const onSlideChange = (e) => {};
+</script>
+
+<style scoped>
+.components-header {
+  width: 100%;
+  text-align: center;
+  color: #00c7ebfc;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.components-content {
+  height: 90%;
+  width: 100%;
+}
+
+.itemclass {
+  display: flex;
+  height: 100%;
+  width: 120%;
+  align-items: center;
+  /* border-bottom: #0545a1 1px solid; */
+}
+
+.row-flex {
+  width: 100%;
+  height: 100%;
+}
+
+.col-flex {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.swiper,
+swiper-container {
+  width: 100%;
+  height: 100%;
+  display: inline-block !important;
+}
+
+.item-name {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.item-name-key {
+  width: 92px;
+}
+.item-name-value {
+  flex: 1;
+  text-align: left;
+}
+</style>

src/views/ChangHaoView/config.js

@@ -0,0 +1,22 @@
+export const caozuomoshi = {
+  '0': 'MDI',
+  '1':'MEM',
+  '2':'***',
+  '3':'EDIT',
+  '4':'HND',
+  '5':'JOG',
+  '6':'Teach in JOG',
+  '7':'Teaxh in HaNDle ' ,
+  '8':'INC',
+  '9':'REF',
+  '10':'RMF',
+}
+
+export const yunxingmoshi ={
+  '0': '****',
+  '1':'STOP ',
+  '2':'***',
+  '3':'HOLD',
+  '4':'START',
+  '5':'MSTR',
+}

src/views/ChangHaoView/index.vue

@@ -0,0 +1,330 @@
+<!--
+ * @FilePath: index.vue
+ * @Author: zz
+ * @Date: 2024-07-18 17:18:08
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-20 17:23:36
+ * @Descripttion: 
+-->
+<template>
+  <div class="container">
+    <div class="header">
+      <div class="title">
+        <header3
+          ref="headerref"
+          :width="'100%'"
+          :height="'100px'"
+          :title="title"
+          :titleTip="[]"
+          :typeFun="['time', 'comback']"
+          :alarmType="[]"
+        ></header3>
+      </div>
+    </div>
+    <div class="border-box">
+      <dv-border-box-1 class="box-left" style="width: 30%"
+        ><h2 class="title2">设备运行</h2>
+        <LeftTop :data="ringData" :title="'设备实时状态'"></LeftTop>
+        <LeftBottom :tipList="tipList"></LeftBottom>
+      </dv-border-box-1>
+
+      <dv-border-box-1 class="box-center" style="width: 50%"
+        ><h2 class="title2">设备绩效</h2>
+        <CenterTop :data="gaugeData"></CenterTop>
+        <Center :data="lineData"></Center>
+        <CenterBottom :data="prodData" :title="'当日生产情况'"></CenterBottom>
+      </dv-border-box-1>
+
+      <dv-border-box-1 class="box-right" style="width: 30%"
+        ><h2 class="title2">设备信息</h2>
+        <Right
+          :deviceList="deviceList"
+          :comList="comList"
+          :CurList="CurList"
+          :communication="communication"
+          :deviceStatus="deviceStatus"
+        ></Right>
+      </dv-border-box-1>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  watch,
+  onUpdated,
+  computed,
+} from "vue";
+import header3 from "./../../components/headerBox/header3.vue";
+import LeftTop from "./components/LeftTop.vue";
+import LeftBottom from "./components/LeftBottom.vue";
+import CenterTop from "./components/CenterTop.vue";
+import { useRoute } from "vue-router";
+import Center from "./components/Center.vue";
+import CenterBottom from "./components/CenterBottom.vue";
+import Right from "./components/Right.vue";
+import {
+  reqdevicebyid,
+  reqtelectricity,
+  reqproinfo,
+  reqfaultinfo,
+  reqstopinfo,
+  reqtalarm,
+} from "@/http/changHao";
+import { caozuomoshi, yunxingmoshi } from "./config.js";
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
+let route = useRoute();
+let device_id = route.params.id;
+// console.log(device_id, "device_id");
+let timer = null;
+let devnum = reactive({
+  on: 0,
+  off: 0,
+  wait: 0,
+});
+let title = ref("设备云眼");
+let ringData = ref([
+  { key: "a046", name: "运行时长", value: "5" },
+  { key: "a036", name: "故障时长", value: "5" },
+  { key: "a044", name: "停机时长", value: "5" },
+  { key: "idletime", name: "空闲时长", value: "5" },
+  { key: "stoptime", name: "急停时长", value: "5" },
+]);
+
+// let deviceList = ref([]);
+// let comList = ref([]);
+// let CurList = ref([]);
+let communication = ref(5);
+let deviceStatus = ref(0);
+
+let deviceList = ref([
+  { key: "devicenum", label: "设备编号", value: " F-20240723456111" },
+  { key: "serialnumber", label: "设备序列号", value: "iFc023456789154" },
+  { key: "description", label: "设备描述", value: "1600立车" },
+  { key: "modelnumber", label: "设备型号", value: "Series" },
+]);
+function getData() {
+  setTimeout(() => {
+    prodData.value = [
+      {
+        procedurename: "0",
+        knifenum: "0",
+        pronum: "0",
+        operate: "0",
+        run: "0",
+        machining: "1.0",
+        axisstatus: 0,
+        processingtime: "0",
+      },
+    ];
+  }, 0);
+}
+const comList = ref([
+  { key: "a017", label: "主轴伺服温度", unit: "℃", value: "E-2" },
+  { key: "a082", label: "累计待机时长", unit: "分钟", value: "iF" },
+  { key: "a021", label: "X轴DC电压", unit: "V", value: "16" },
+  { key: "a085", label: "累计上电时长", unit: "分钟", value: "Ser" },
+  { key: "a022", label: "Y轴DC电压", unit: "V", value: "E-2" },
+  { key: "a006", label: "主轴转速", unit: "R/min", value: "iF" },
+  { key: "a023", label: "Z轴DC电压", unit: "V", value: "16" },
+  { key: "a007", label: "进给速度", unit: "mm/min", value: "589" },
+  { key: "a083", label: "累计故障时长", unit: "秒", value: "789" },
+  { key: "a084", label: "累计运行时长", unit: "分钟", value: "524" },
+]);
+const CurList = ref([
+  { key: "aphasev", label: "A相电压", unit: "V", value: "6.0" },
+  { key: "aphasea", label: "A相电流", unit: "A", value: "8" },
+  { key: "bphasev", label: "B相电压", unit: "V", value: "2" },
+  { key: "bphasea", label: "B相电流", unit: "A", value: "3" },
+  { key: "cphasev", label: "C相电压", unit: "V", value: "5" },
+  { key: "cphasea", label: "C相电流", unit: "A", value: "4" },
+]);
+// }
+
+// 模设备告警数据
+const tipList = ref([{ name: "设备A", alarmcode: "001", alarminfo: "温度过高" }]);
+// 仪表盘数据
+let gaugeData = ref([
+  { key: "utilizationRate", name: "稼动率", value: "46.9" },
+  { key: "a006", name: "主轴转速", value: "91.1" },
+  { key: "a007", name: "进给速度", value: "31.5" },
+]);
+
+// 折线图数据日耗电曲线
+let lineData = ref({
+  y: [120, 135, 101, 134, 90, 230, 210],
+  x: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
+});
+// 生产情况数据
+let prodData = ref([]);
+let deviceinfo = ref({});
+
+// 设备信息接口数据
+function getdevicebyid() {
+  reqdevicebyid({ id: device_id }).then((res: any) => {
+    if (res.code == 0) {
+      title.value = res.data.name;
+      deviceList.value = [
+        { key: "devicenum", label: "设备编号", value: res.data.devicenum },
+        { key: "serialnumber", label: "设备序列号", value: res.data.serialnumber },
+        { key: "description", label: "设备描述", value: res.data.description },
+        { key: "modelnumber", label: "设备型号", value: res.data.modelnumber },
+      ];
+    }
+  });
+}
+
+//耗电量接口
+function getelectricity() {
+  reqtelectricity({ id: device_id }).then((res: any) => {
+    if (res.code == 0) {
+      lineData.value.x = res.data.x;
+      lineData.value.y = res.data.y;
+    }
+  });
+}
+
+// 生产情况接口
+// function getproinfo() {
+//   reqproinfo({ id: device_id }).then((res: any) => {
+//     if (res.code == 0) {
+//       prodData.value = res.data;
+//     }
+//   });
+// }
+// 设备告警接口
+function getalarm() {
+  reqtalarm({ id: device_id }).then((res: any) => {
+    if (res.code == 0) {
+      tipList.value = res.data;
+    }
+  });
+}
+// 故障时长接口
+function getstopinfo() {
+  reqstopinfo({ id: device_id }).then((res: any) => {
+    if (res.code == 0) {
+      ringData.value = ringData.value.map((item) => {
+        if (item.key == "a036") {
+          item.value = res.data.alltime;
+        }
+        if (item.key == "stoptime") {
+          item.value = res.data.allstoptime;
+        }
+        return item;
+      });
+    }
+  });
+}
+
+let a036 = 0;
+//socket
+function getWebsocket(val) {
+  try {
+    let data = JSON.parse(val);
+    if (data.type == "deviceinfo" && data.msg.id == device_id) {
+      let obj = data.msg;
+      if (obj.a036 != a036) {
+        getalarm();
+        a036 = obj.a036;
+      }
+      // 运行状态
+      ringData.value = ringData.value.map((item) => {
+        item.value = obj[item.key];
+        // item.key
+        return item;
+      });
+      // 仪表盘
+      gaugeData.value = gaugeData.value.map((item) => {
+        item.value = obj[item.key];
+        return item;
+      });
+      // 当日生产情况
+      prodData.value = [
+        {
+          procedurename: obj.a039,
+          knifenum: obj.a008,
+          pronum: obj.a005,
+          operate: caozuomoshi[obj.a032] || "未知状态",
+          run: yunxingmoshi[obj.a033] || "未知状态",
+          machining: obj.cycletimeInMinutes,
+          axisstatus: obj.a034,
+          processingtime: obj.a048,
+        },
+      ];
+      // 通讯状态
+      communication.value = obj.a041;
+
+      let tempcomList = comList.value.map((item) => {
+        item.value = obj[item.key];
+        return item;
+      });
+      comList.value = tempcomList;
+
+      // 设备状态
+      deviceStatus.value = obj.a038;
+      // 电压电流
+    }
+    if (data.type == "electinfo" && data.msg.id == device_id) {
+      let obj = data.msg;
+
+      CurList.value = CurList.value.map((item) => {
+        item.value = obj[item.key];
+        return item;
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+function errWebsocket(val) {
+  // console.log(val);
+}
+onMounted(() => {
+  getdevicebyid();
+  getelectricity();
+  // getData();
+  // getproinfo();
+  getalarm();
+  getstopinfo();
+  timer = setInterval(() => {
+    getstopinfo();
+    getalarm();
+  }, 1800000);
+  connectWebsocket(null, null, getWebsocket, errWebsocket);
+});
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
+<style scoped>
+.container {
+  height: 1080px;
+  width: 1920px;
+  color: #ffffff;
+  background: url("./../../assets/img/CHBJ.png") no-repeat center center / 100% 100%;
+  background-color: #0e0e0e;
+  position: relative;
+}
+.header {
+  height: 100px;
+  width: 1920px;
+}
+.border-box {
+  width: 100%;
+  height: 90%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.title2 {
+  font-size: 20px;
+  font-weight: 600;
+}
+</style>

src/views/Exhibition/Bengal/index.vue

@@ -17,7 +17,7 @@
         </div>
         <div class="content">
             <div class="left">
-                <BorderVue :title="t('messages.富怡立式啧墨切割机')">
+                <BorderVue :title="t('messages.富怡立式喷墨切割机')">
                     <div class="box">
                         <img src="./images/pmqgj.png" class="fzmbj-img" alt="">
                         <div class="devcard-container">

src/views/Exhibition/CHIC/index.vue

@@ -30,7 +30,7 @@
                 </div>
             </div>
             <div class="right">
-                <NewBoder :title="'板房设备'">
+                <NewBoder :title="'版房设备'">
                     <BoardBar :data="banfang.value" :xData="banfang.chart.xData" :seriesData="banfang.chart.series"
                         :rowNum="4"></BoardBar>
                 </NewBoder>

src/views/Exhibition/Cisma/table.vue

@@ -62,7 +62,7 @@ let objList = reactive({
     '裁剪设备': [],
     '一次性拖鞋生产线': [],
     '缝中设备': [],
-    '板房设备': [],
+    '版房设备': [],
     '座椅面套生产线': []
 })
 onMounted(() => {
@@ -101,7 +101,7 @@ async function fetchPlanProduction(): Promise<any> {
                     objList.缝中设备.push(item)
                 } else if (obj.banfang.includes(item.label)) {
                     item.unit = '版'
-                    objList.板房设备.push(item)
+                    objList.版房设备.push(item)
                 } else if (obj.zuoyi.includes(item.label)) {
                     item.unit = '件'
                     objList.座椅面套生产线.push(item)

src/views/InPlantProducts/content/chart/installtable.vue

@@ -32,7 +32,8 @@ const echartsData = reactive<EDataPerson>({
 const setData = (value: any, type: number) => {
   //任务完成百分比
   let percentage = Math.floor((value.accomplish/value.counts)*100)
-
+  let accomplish = value.accomplish
+  let counts = value.counts
   echartsData.installTable!.div = inTable.value;
   echartsData.installTable!.title = props.title;
   echartsData.installTable!.data = {
@@ -130,7 +131,7 @@ const setData = (value: any, type: number) => {
               // 中心title设置
               offsetCenter: ["0%", "0%"],
               color: "#01F8FF",
-              formatter: "{value}%",
+              formatter: accomplish + "/" + counts,
               // borderColor: '#01F8FF',
               // borderRadius: 20,
               // borderWidth: 1,

src/views/MicrofactoryDevOnline/components/RingChart.vue

@@ -5,9 +5,13 @@
                 <div class="status" :class="statusClass">{{ prop.data.status }}</div>
                 <div class="right-top">
                     <div class="num">{{ prop.data.count }}</div>
-                    <div class="name">当日总针数</div>
+                    <div class="name">{{t('messages.当日总针数')}}</div>
                 </div>
-                <div class="chart" ref="chart"></div>
+                <!-- <div class="chart" ref="chart"></div> -->
+                 <div class="online-time">
+                    <span style="font-size:20px; color: #fff;">{{t('messages.当日工作时长')}}</span>
+                    <span>{{ timestampToTime(prop.data.todayWorkTime) }}</span>
+                 </div>
                 <div class="bottom">
                     <text>{{ prop.data.name }}</text>
                     <small>{{ prop.data.label }}</small>
@@ -20,6 +24,9 @@
 
 <script setup lang='ts'>
 import { getCurrentInstance, ref, onMounted,watch, computed } from 'vue';
+import {timestampToTime} from '@/utils/time'
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
 const { proxy } = getCurrentInstance()! as any;
 const chart = ref(null);
 let myChart: any = null;
@@ -43,45 +50,17 @@ const prop = defineProps({
 })
 
 let statusClass = computed(() => {
-    return prop.data.status == '在线' ? 'online' : 'outline'
+    return prop.data.status == t('default.在线') ? 'online' : 'outline'
 })
 
-const init = () => {
+let borderBoxColor = computed(() => {
-    if (!myChart) {
+    return prop.data.status == t('default.在线') ? ['#FF8C00', '#FF8C00'] : ['#999999', '#999999']
-        myChart = proxy.$echarts.init(chart.value);
-    }
-    
-    let option = {
-        tooltip: {
-            trigger: 'item'
-        },
-        color: ['#95A2FF', '#FA8080'],
-        series: [
-            {
-                name: '',
-                type: 'pie',
-                radius: ['35%', '80%'],
-                avoidLabelOverlap: false,
-                label: {
-                    formatter: '{c}小时',
-                    position: 'inside',
-                    color: '#fff',
-                },
-                labelLine: {
-                    show: false
-                },
-                data: prop.data.series
-            }
-        ]
-    };
-    myChart.setOption(option);
-}
-watch(() => prop.data, (newVal, oldVal) => {
-    init();
 })
 
+
+
 onMounted(() => {
-    init();
+    //init();
 })
 </script>
 
@@ -104,9 +83,9 @@ onMounted(() => {
     width: 80px;
     height: 30px;
     line-height: 30px;
-    top: 8px;
+    top: 20px;
     left: 12px;
-    font-size: 16px;
+    font-size: 20px;
 }
 
 .right-top {
@@ -123,21 +102,21 @@ onMounted(() => {
 
 .right-top .num {
     color: #1E90FF;
-    font-size: 18px;
+    font-size: 20px;
 }
 
 .right-top .name {
     color: #fff;
-    font-size: 12px;
+    font-size: 14px;
 }
 
 .bottom {
     width: 100%;
-    height: 50px;
+    height: 75px;
     color: #fff;
     font-weight: bold;
     position: absolute;
-    bottom: 8px;
+    bottom: 20px;
     left: 0;
     text-align: center;
     overflow: hidden;
@@ -160,6 +139,15 @@ onMounted(() => {
     left: 0;
     bottom: 50px;
 }
+.online-time {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 44px;
+}
 
 .online {
     color: rgb(255, 140, 0);

src/views/MicrofactoryDevOnline/index.vue

@@ -21,60 +21,82 @@ import header2 from "@/components/headerBox/header2.vue";
 import RingChart from "./components/RingChart.vue";
 import { ref,onMounted,onUnmounted } from 'vue'
 import {getSewingBoard} from '@/http/device'
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { useI18n } from 'vue-i18n'
+import { getStoredLanguage, saveStoredLanguage } from "@/utils/languageStorage";
 let { t } = useI18n();
-
+const storedLocale = getStoredLanguage()
 document.title = t('messages.微工厂缝纫设备看板');
 let titleTip = [
-  {
+  // {
-    color: "#95A2FF",
+  //   color: "#95A2FF",
-    name: t('messages.工作时间'),
+  //   name: t('messages.工作时间'),
-  },
+  // },
-  {
+  // {
-    color: "#FA8080",
+  //   color: "#FA8080",
-    name: t('messages.空闲时间'),
+  //   name: t('messages.空闲时间'),
-  },
+  // },
 ];
 let timer = null;
 let arr = ref([]);
-
+let arr_num = ref([]);
 function reqSewingBoard() {
   getSewingBoard().then((res:any) => {
     if (res.code == 200) {
+      let nums = []
       arr.value = res.data.map(item=>{
+        nums.push(item.num)
         return {
-          id: '',
+          id: item.id,
-          status: item.status == 'true'? '在线':'离线',
+          num: item.num,
-          name: item.name,
+          status: item.status == 'true'? t('default.在线'):t('messages.offline'),
+          name: !storedLocale ||storedLocale == "简体中文"?item.name:item.ename,
           label: item.label,
-          count: item.pins,
+          count: item.in4TodayCount,
-          series: item.series
+          todayRunTime: item.todayRunTime,
+          todayWorkTime: item.todayWorkTime,
         }
       });
+      arr_num.value = nums;
     }
   })
 }
-// for (let index = 0; index < 21; index++) {
-//   let random = +(Math.random() * 24).toFixed(1);
-//   arr.push({
-//     id: '',
-//     status: '在线',
-//     name: '五线包缝机',
-//     label: 'RP2011158',
-//     count: 0,
-//     series: [
-//       { value: random, name: '工作时间' },
-//       { value: (24-random).toFixed(1), name: '空闲时间' }
-//     ]
-//   })
 
-// }
+function getWebsocket(val) {
+  try {
+    let data = JSON.parse(val);
+
+    //
+    if (data.type == "mDeviceStatus"&&arr_num.value.includes(data.msg.num)) {
+      let msg = arr.value.find(item=>item.num == data.msg.num)
+      msg.status = data.msg.status === 0? t('messages.offline'):t('default.在线')    
+      
+    }
+    if (data.type == "micSwingWorkingTime") {
+      console.log(arr.value,data.msg);
+      
+      let msg = arr.value.find(item=>item.id == data.msg.deviceId)
+      msg.todayWorkTime = data.msg.todayWorkTime
+      msg.count = data.msg.in4TodayCount
+    }
+
+  } catch (err) {
+    console.log(err, "报错了大哥", console.log(val)
+    );
+
+  }
+}
+function errWebsocket(val) {
+  
+  console.log(val);
+}
 
 onMounted(()=>{
   reqSewingBoard()
   timer = setInterval(() => {
     reqSewingBoard()
-  }, 60000);
+  }, 60000 * 60);
+  connectWebsocket(null, null, getWebsocket, errWebsocket);
 })
 onUnmounted(()=>{
   clearInterval(timer);
@@ -94,13 +116,14 @@ onUnmounted(()=>{
   --header: 120px;
   height: calc(1080px - var(--header));
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
 }
 
 .ringchart {
-  width: 260px;
+  width: 250px;
   height: 300px;
+  margin-left: 23px;
 }
 </style>

src/views/Recorder/components/Border.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="newboder">
+        <!-- <img class="borderpng" src="" alt=""> -->
+        <div class="title">
+            <text class="title-text">{{ title }}</text>
+            <div class="hr" v-if="hr_show"></div>
+        </div>
+        
+        <div class="newboder-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+  
+<script setup lang='ts'>
+import { computed } from 'vue'
+let prop = defineProps({
+    title: {
+        type: String,
+        default: '裁剪设备'
+    },
+    hr_show: {
+        type:Boolean,
+        default: false
+    }
+})
+
+// let newTitle = computed(() => {
+//     return prop.title.split('').join(' ')
+// })
+
+</script>
+  
+<style scoped>
+.newboder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background: url(./../image/border.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.borderpng {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.title {
+    position: relative;
+    width: 100%;
+    height: 16%;
+    padding-left: 10%;
+    text-align: left;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 30px;
+    color: rgba(0, 255, 255, 0.996078431372549);
+    display: flex;
+    align-items: center;
+    /* justify-content: center; */
+    
+}
+.hr {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 4px;
+    background: url(./../image/hr.png) no-repeat;
+    background-position: 50%;
+}
+
+.title-text {
+    
+    font-weight: bold;
+}
+
+.newboder-content {
+    width: 100%;
+    height: 84%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+</style>
+  

src/views/Recorder/index.vue

@@ -1,41 +1,69 @@
 <template>
   <div class="container">
     <div class="header">
-            <div class="title">
+      <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'游标卡尺物联'" :titleTip="[]"
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'游标卡尺物联'" :titleTip="[]" :typeFun="['time']"
-                    :typeFun="['time']" :alarmType="[]"></header2>
+          :alarmType="[]"></header2>
-            </div>
+      </div>
-        </div>
+    </div>
     <div class="body-container">
       <div class="left-container">
-        <div class="lt-box">
+        <BorderView :title="'工件图纸'">
-          <el-image :src="workpiece" :preview-src-list="[workpiece]" style="max-width: 100%;height: 500px;"
+          <div v-show='pdfdata' ref="pdfContainer" style="height: 80%;width: 98%;"></div>
-            fit="contain" />
+          <a :href="pdfdata" target="_blank" style="color: #fff;">查看图纸</a>
-            零件图片
+        </BorderView>
-        </div>
+
-        <div class="lb-box">
+
-          <!-- <el-image :src="drawing" :preview-src-list="[drawing]" style="max-width: 100%;height: 500px;" fit="contain" /> -->
+
-           <!-- <showPdf pdfUrl="./image/drawing.pdf" /> -->
-           <a  style="color: #fff;" href="http://8.130.165.100:9015/profile/upload/2024/06/29/drawing_20240629103947A010.pdf" target="_blank">查看图纸</a>
-        </div>
       </div>
       <div class="right-container">
+        <div class="lt-box">
+          <BorderView :title="'工件图片'">
+            <el-image :src="workpiece" :preview-src-list="[workpiece]" style="max-width: 100%;height: 400px;"
+              fit="contain" />
+          </BorderView>
+        </div>
         <div class="input-text">
           <div class="" :style="{ width: '150px' }">关键尺寸:</div>
           <div class="text">
-            <el-input v-model="text" input-style="font-size:20px;color:#fff;box-shadow:'0 0 0 1px #fff'" :rows="5" type="textarea" readonly />
+            <el-input v-model="text" size="large" input-style="font-size:30px;color:#fff;height:60px;" type="text"
+              readonly />
           </div>
         </div>
-        <div style="padding-top:5px;margin-bottom: 10px;"> <!-- 波形绘制区域 -->
+        <!-- 波形绘制区域 -->
+        <!-- <div style="padding-top:5px;margin-bottom: 10px;"> 
           <div style="display:inline-block;vertical-align:bottom">
             <div style="height:300px;width:600px;" ref="recwave"></div>
           </div>
-        </div>
+        </div> -->
-        <div> <!-- 按钮 -->
+        <div class="item-btn"> <!-- 按钮 -->
           <!-- <button @click="recOpen">打开录音,请求权限</button> -->
-          <el-button type="success" size="large" class="btn-class" @mousedown="recOpen"
-            @mouseup="recStop">按住录音</el-button>
           <!-- | <el-button type="primary" size="large" @click="recPlay">本地试听</el-button> -->
+          <div class="audio" :class="{ 'wave-start': is_start }">
+            <div class="wave"></div>
+            <div class="wave"></div>
+            <div class="wave"></div>
+            <div class="wave"></div>
+            <div class="wave"></div>
+          </div>
+          <el-button size="large" class="btn-class" @touchstart="recOpen" @touchend="recStop" v-if="isMobile">
+            <template #icon>
+              <i class="iconfont icon-yuyin" style="font-size: 80px;"></i>
+            </template>
+          </el-button>
+          <el-button size="large" class="btn-class" @mousedown="recOpen" @mouseup="recStop" v-else>
+            <template #icon>
+              <i class="iconfont icon-yuyin" style="font-size: 80px;"></i>
+            </template>
+          </el-button>
+
+          <div class="audio " :class="{ 'wave-start': !!rec }">
+            <div class="wave"></div>
+            <div class="wave"></div>
+            <div class="wave"></div>
+            <div class="wave"></div>
+            <div class="wave"></div>
+          </div>
         </div>
       </div>
     </div>
@@ -44,8 +72,11 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ElMessage } from 'element-plus';
+import PDFObject from 'pdfobject'
 import header2 from "./components/header2.vue";
+import BorderView from './components/Border.vue'
 //必须引入的核心
 import Recorder from 'recorder-core'
 
@@ -66,10 +97,33 @@ let wave: any = null;
 let recwave = ref(null);
 let recBlob: any = null
 let text = ref('')
-
+let is_start = ref(false)
-let workpiece = require('./image/workpiece.jpg')
+let workpiece = require('./image/workpiece.png')
 // let drawing = require('./image/drawing.png')
 
+//pdf相关
+let pdfdata = ref('')
+let pdfContainer = ref(null)
+let pdfOptions = reactive({ //显示的配置信息
+  pdfOpenParams: {
+    toolbar: 0, // 设置为0来隐藏头部工具栏
+    zoom: 80 //大小设置
+  },
+})
+
+let isMobile = ref(false)
+//判断当前环境是PC端还是移动端
+function heckMobile() {
+  isMobile.value = typeof window.orientation !== "undefined" || // 判断是否存在window.orientation属性，此属性在移动设备上一般存在
+        navigator.userAgent.indexOf('IEMobile') !== -1 || // 判断是否为Windows Phone
+        navigator.userAgent.indexOf('iPhone') !== -1 || // 判断是否为iPhone
+        navigator.userAgent.indexOf('Android') !== -1 && navigator.userAgent.indexOf('Mobile') !== -1 || // 判断是否为Android手机
+        navigator.userAgent.indexOf('BlackBerry') !== -1 || // 判断是否为BlackBerry
+        navigator.userAgent.indexOf('Opera Mini') !== -1 // 判断是否为Opera Mini浏览器
+        console.log(isMobile.value,navigator.userAgent);
+        
+}
+
 //打开录音，申请录音权限
 function recOpen() {
   //创建录音对象
@@ -87,11 +141,13 @@ function recOpen() {
   //打开录音，获得权限
   rec.open(() => {
     console.log("录音已打开");
-    if (recwave.value) {//创建音频可视化图形绘制对象
+    //创建音频可视化图形绘制对象
-      wave = Recorder.WaveView({ elem: recwave.value });
+    // if (recwave.value) {
-    }
+    //   wave = Recorder.WaveView({ elem: recwave.value });
+    // }
     rec.start();
     console.log("已开始录音");
+    is_start.value = true
   }, (msg: any, isUserNotAllow: any) => {
     //用户拒绝了录音权限，或者浏览器不支持录音
     alert((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
@@ -111,6 +167,7 @@ function recStart() {
  */
 function recStop() {
   if (!rec) { console.error("未打开录音"); return }
+  is_start.value = false
   rec.stop((blob: any, duration: any) => {
     //blob就是我们要的录音文件对象，可以上传，或者本地播放
     recBlob = blob;
@@ -197,15 +254,43 @@ function recPlay() {
   setTimeout(function () { URL.revokeObjectURL(audio.src) }, 5000);
 }
 
+// function handleWheel(event: any) {
+//   if (event.deltaY < 0) {
+//         console.log('鼠标向上滚动');
+//     } else {
+//         console.log('鼠标向下滚动');        
+//     }
+
+//     // 阻止页面滚动
+//     event.preventDefault();
+// }
+
+function getData() {
+  pdfdata.value = 'http://8.130.165.100:9015/profile/upload/2024/06/29/drawing_20240629103947A010.pdf'
+  //渲染PDF的方法，固定格式
+  if (PDFObject.supportsPDFs) {//检测浏览器是否支持显示pdf
+    PDFObject.embed(pdfdata.value, pdfContainer.value, pdfOptions);
+  } else {
+    ElMessage({
+      message: '该浏览器不支持切换，请更换浏览器',
+      type: 'warning'
+    });
+  }
+}
+
 onMounted(() => {
+  heckMobile()
+  getData()
   // recOpen()
-  document.getElementById('app').style.background = '#fff'
+  //document.getElementById('app').style.background = '#fff'
 })
 onUnmounted(() => {
-  document.getElementById('app').style.background = 'block'
+  //document.getElementById('app').style.background = 'block'
 })
 </script>
-<style scoped>
+<style lang="scss" scoped>
+@import "@/assets/css/iconfont/iconfont.css";
+
 .container {
   width: 1920px;
   height: 1080px;
@@ -217,12 +302,14 @@ onUnmounted(() => {
   font-size: 28px;
   color: #FFFFFF;
   background: url('./../../assets/img/bg.jpg') no-repeat center center / 100% 100%;
-    background-color: #0E0E0E;
+  background-color: #0E0E0E;
 }
+
 .header {
-    height: 100px;
+  height: 100px;
-    width: 1920px;
+  width: 1920px;
 }
+
 .body-container {
   width: 1920px;
   height: 980px;
@@ -231,18 +318,19 @@ onUnmounted(() => {
   align-items: center;
 
 }
+
 .left-container {
-  width: 800px;
+  width: 950px;
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
 }
 
-.left-container .lt-box {
+.right-container .lt-box {
   width: 100%;
-  height: 600px;
+  height: 400px;
   /* border: 1px solid #ccc; */
   display: flex;
   flex-direction: column;
@@ -262,32 +350,117 @@ onUnmounted(() => {
 }
 
 .right-container {
-  width: 800px;
+  width: 950px;
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
 }
 
 .text {
   width: 100%;
-  margin-top: 15px;
   text-align: center;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .btn-class {
-  width: 200px;
+  width: 150px;
-  height: 100px;
+  height: 150px;
   font-size: 24px;
-  font-weight: 700;
+  /* font-weight: 700; */
-  border-radius: 20px;
+  border-radius: 50%;
+  border: 2px solid skyblue;
 }
 
 .input-text {
-  width: 600px;
+  width: 950px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
+.item-btn {
+  width: 100%;
+  height: 240px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.item-btn .wave-start {
+  .wave {
+    animation: audio-wave 2s ease-in-out infinite;
+  }
+}
+
+.item-btn .audio {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 18px;
+  width: 80px;
+  height: 40px;
+
+  .wave {
+    height: 40px;
+    display: block;
+    width: 10px;
+    height: 6px;
+    border-radius: 8px;
+    background: orange;
+
+    &:nth-child(1) {
+      animation-delay: 0.1s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+
+    &:nth-child(4) {
+      animation-delay: 0.4s;
+    }
+
+    &:nth-child(5) {
+      animation-delay: 0.5s;
+    }
+  }
+}
+
+@keyframes audio-wave {
+  0% {
+    height: 6px;
+    transform: translateY(0px);
+    background: #ff8e3a;
+  }
+
+  25% {
+    height: 6px;
+    transform: translateY(0px);
+    background: #9c73f8;
+  }
+
+  50% {
+    height: 30px;
+    transform: translateY(-5px) scaleY(1.5);
+    background: #ed509e;
+  }
+
+  75% {
+    height: 6px;
+    transform: translateY(0px);
+    background: #9c73f8;
+  }
+
+  100% {
+    height: 6px;
+    transform: translateY(0px);
+    background: #0fccce;
+  }
+}
 </style>

src/views/Temp/Large_Format/component/toptip.vue

@@ -18,15 +18,15 @@
       <div>{{ data.countdown }}</div>
     
     </div>
-    <!-- <img :style="{width:itemSize.imgwidth}" :src="data.src" alt=""> -->
+    <img :style="{width:itemSize.imgwidth}" :src="data.src" alt="">
-    <el-image :style="{ width: itemSize.imgwidth, height: '60%' }" :src="data.src ? imgurlAddXhr(data.src) : ''"
+    <!-- <el-image :style="{ width: itemSize.imgwidth, height: '60%' }" :src="data.src ? imgurlAddXhr(data.src) : ''"
       fit="contain">
       <template #error>
         <div class="image-slot">
           <el-icon><icon-picture /></el-icon>
         </div>
       </template>
-    </el-image>
+    </el-image> -->
     <!-- <img :style="{width:itemSize.imgwidth,height:itemSize.imgheight}" src="../../../../assets/img/download.jpg" alt=""> -->
     <!-- <ul class="uldianji">
       <li>

src/views/Temp/Large_Format/index.vue

@@ -89,7 +89,7 @@ function getNextMonth(date) {
   let t2 = year2 + '年' + month2 + '月' + day2 + '日';
   return t2;
 }
-
+let imgage = require("@/assets/img/3c92b5010e6845229311385a05f864aa.jpg");
 async function getDeviceDetailfun() {
   setTimeout(() => {
     let result = {
@@ -146,7 +146,7 @@ async function getDeviceDetailfun() {
         ],
         "imgTip": {
           "realityTime": "",
-          "src": "3c92b5010e6845229311385a05f864aa.png",
+          "src": imgage,
           "deliveryDate": "",
           "prtDeliveryDate": "2023年11月01日",
           "status": "调试中"

src/views/index.vue

@@ -30,8 +30,15 @@
     </div>
 
     <div class="itemlist">
-      <list v-for="res in routerList" :hash="res.hash" :path="res.path" :is-link="res.isLink" :title="res.title"
+      <div class="category" v-for="(value, key) in categoryList">
-        :key="res.id" :url="res.url"></list>
+        <h2 class="category-title">{{ key }}</h2>
+        <div class="category-item">
+          <list v-for="res in value" :hash="res.hash" :path="res.path" :is-link="res.isLink" :title="res.title"
+            :key="res.id" :url="res.url"></list>
+        </div>
+      </div>
+      <!-- <list v-for="res in routerList" :hash="res.hash" :path="res.path" :is-link="res.isLink" :title="res.title"
+        :key="res.id" :url="res.url"></list> -->
     </div>
   </div>
 </template>
@@ -41,7 +48,7 @@ import { ref, reactive, onMounted, onUnmounted } from "vue";
 import list from "@/components/assembly/indexList.vue";
 import { useI18n } from "vue-i18n";
 import { getStoredLanguage, saveStoredLanguage, languageHash } from "@/utils/languageStorage";
-import { useRoute,useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { getScreenByHash } from "@/http/rule/index"
 import { imgurlAddXhr } from "@/utils/devSever"
 let langicon = require("@/assets/svg/language.svg")
@@ -72,8 +79,16 @@ function changelang(val) {
   saveStoredLanguage(languageHash(val))
   location.reload()
 }
-
+function convertChineseToArabic(str) {
-
+  const nums = {
+    零: 0, 一: 1, 二: 2, 两: 2, 三: 3, 四: 4, 五: 5, 六: 6, 七: 7, 八: 8, 九: 9
+  };
+  let result = str.replace(/[零一二两三四五六七八九]/g, (match) => {
+    return nums[match];
+  });
+  return parseInt(result, 10);
+}
+const categoryList: any = ref({})
 async function reqScreenByHash() {
   let hash = sessionStorage.getItem('screen_hash')
   let res: any = await getScreenByHash({ hash });
@@ -88,10 +103,28 @@ async function reqScreenByHash() {
         path: item.path,
         title: item.title,
         url: isTrue ? item.img : imgurlAddXhr(item.img),
-        hash: hash
+        hash: hash,
+        screenType: item.screenType
       }
     })
 
+    routerList.value.forEach(element => {
+      if (element.screenType !== null) {
+        if (categoryList.value.hasOwnProperty(element.screenType)) {
+          categoryList.value[element.screenType].push(element)
+        } else {
+          categoryList.value[element.screenType] = [element]
+        }
+      } else {
+        if (categoryList.value.hasOwnProperty('其他')) {
+          categoryList.value['其他'].push(element)
+        } else {
+          categoryList.value['其他'] = [element]
+        }
+      }
+    });
+    console.log(categoryList.value);
+
   }
 
 }
@@ -123,11 +156,28 @@ onUnmounted(() => { });
   width: 1920px;
   color: #20aec5;
   background-color: #100c2a;
+  overflow: scroll !important;
+}
+
+.category {
+  width: 1920px;
+}
+
+.category-title {
+  padding-left: 40px;
+  font-size: 32px;
+  text-align: left;
+  font-weight: bold;
+  color: whitesmoke;
+
+}
+.category-item {
+  width: 1920px;
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
-  overflow: auto !important;
+
 }
 
 .title {

src/views/legionProducts/index.vue

@@ -73,7 +73,7 @@ let { t } = useI18n();
 const route = useRoute()
 const router = useRouter()
 let severdata = reactive([])
-let percentage = ref(0)
+let percentage = ref({})
 //军团id
 const deptId: any = route.params.deptId
 const title = route.query.title
@@ -87,7 +87,7 @@ let legion: any = {
     '15': '医防军团'
 }
 let scrollBoardConfig = reactive({
-    header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
+    header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.DebugProgress'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
     headerBGC: 'rgb(52, 105, 243)',
     oddRowBGC: '#100c2a',
     evenRowBGC: '#100c2a',
@@ -103,7 +103,7 @@ const getList = (deptId) => {
             let ringObj = {}
             res.data.forEach((item: any, index: number) => {
                 let status = JSON.parse(item.deviceStatus) == true ? '在线' : '离线'
-                let temp = [index + 1, item.name, item.model, item.label, item.typeName, item.status, status, item.assemblyGroup, item.electricGroup, item.inspector, item.deliveryDate]
+                let temp = [index + 1, item.name, item.model, item.label, item.progress + "%", item.status, status, item.assemblyGroup, item.electricGroup, item.inspector, item.deliveryDate]
                 scrollBoardConfig.data.push(temp)
                 item.index = index + 1
                 severdata.push(item)
@@ -131,7 +131,12 @@ const getprogressOfCorpsfun = () => {
 
             res.data.forEach((item: any) => {
                 if (item.deptId == deptId) {
-                    percentage.value = Math.floor((item.accomplish / item.counts) * 100)
+                    percentage.value = {
+                        accomplish: item.accomplish,
+                        counts: item.counts
+                    }
+                    
+                    
                 }
             })
         }

vue.config.js

@@ -1,5 +1,5 @@
 /*
- * @FilePath: \daping\vue.config.js
+ * @FilePath: \screenFront\vue.config.js
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-01-29 15:16:36
@@ -11,12 +11,19 @@ const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig(
   {
     transpileDependencies: true,
+    css: {
+      loaderOptions: {
+        sass: {
+          // 这里的选项会传递给 sass-loader
+        },
+      },
+    },
     devServer: {
       proxy: {
         [process.env.VUE_APP_BASE_API]: {
-          // target: 'http://192.168.2.125:2222',          // 想要请求的url地址
+          target: 'http://192.168.10.98:9015',          // 想要请求的url地址
-          target: 'http://8.130.165.100:9015',
+          // target: 'http://8.130.165.100:9015',
-          // target: 'http://192.168.110.238:9015',
+          // target: 'http://192.168.110.19:8080',
           ws: true,                 // 是否要开启代理
           changeOrigin: true,
           pathRewrite: {
@@ -33,10 +40,19 @@ module.exports = defineConfig(
           // localAddress:"xxx",      // 要为传出连接绑定的本地接口字符串
           // agent:{},                // 传递给http(s).request的对象
           // ssl:{},                  // 传递给https.createServer()的对象
-        }
+        },
+        '/socket/': {
+          // target: 'http://192.168.1.128:9011',          // 想要请求的url地址
+          target: 'http://8.130.165.100:9019',
+          // target: 'http://192.168.110.19:8080',
+          ws: true,                 // 是否要开启代理
+          changeOrigin: true,
+        },
       }
     }
 
+
+
   }