fix🐛: 添加设备状态

README.md

@@ -1,4 +1,4 @@
-# 博观系统管理平台
+# 爱威后台
 
 ## 🍔 简介
 

package.json

@@ -39,6 +39,7 @@
     "consola": "^2.15.3",
     "dayjs": "^1.11.7",
     "dplayer": "^1.27.1",
+    "echarts": "^6.0.0",
     "element-plus": "^2.6.0",
     "hotkeys-js": "^3.10.1",
     "js-cookie": "^3.0.1",

pnpm-lock.yaml

@@ -37,13 +37,13 @@ importers:
         version: 5.1.0(vue@3.2.47)
       '@vitejs/plugin-legacy':
         specifier: ^4.0.2
-        version: 4.0.2(terser@5.17.1)(vite@4.3.1)
+        version: 4.0.2(terser@5.17.1)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       '@vueuse/core':
         specifier: ^10.0.2
         version: 10.0.2(vue@3.2.47)
       '@vueuse/integrations':
         specifier: ^10.0.2
-        version: 10.0.2(axios@1.3.6)(nprogress@0.2.0)(qrcode@1.5.1)(sortablejs@1.15.0)(vue@3.2.47)
+        version: 10.0.2(async-validator@4.2.5)(axios@1.3.6)(change-case@4.1.2)(nprogress@0.2.0)(qrcode@1.5.1)(sortablejs@1.15.0)(vue@3.2.47)
       '@wcjiang/notify':
         specifier: ^2.1.0
         version: 2.1.0
@@ -62,6 +62,9 @@ importers:
       dplayer:
         specifier: ^1.27.1
         version: 1.27.1
+      echarts:
+        specifier: ^6.0.0
+        version: 6.0.0
       element-plus:
         specifier: ^2.6.0
         version: 2.6.0(vue@3.2.47)
@@ -170,7 +173,7 @@ importers:
         version: 1.1.5
       '@intlify/vite-plugin-vue-i18n':
         specifier: ^7.0.0
-        version: 7.0.0(vite@4.3.1)(vue-i18n@9.2.2)
+        version: 7.0.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))(vue-i18n@9.2.2(vue@3.2.47))
       '@unocss/preset-attributify':
         specifier: ^0.51.5
         version: 0.51.5
@@ -179,13 +182,13 @@ importers:
         version: 0.51.5
       '@vitejs/plugin-basic-ssl':
         specifier: ^1.1.0
-        version: 1.1.0(vite@4.3.1)
+        version: 1.1.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       '@vitejs/plugin-vue':
         specifier: 4.1.0
-        version: 4.1.0(vite@4.3.1)(vue@3.2.47)
+        version: 4.1.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))(vue@3.2.47)
       '@vitejs/plugin-vue-jsx':
         specifier: 3.0.1
-        version: 3.0.1(vite@4.3.1)(vue@3.2.47)
+        version: 3.0.1(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))(vue@3.2.47)
       '@vue/compiler-sfc':
         specifier: ^3.2.47
         version: 3.2.47
@@ -212,7 +215,7 @@ importers:
         version: 8.6.0(eslint@8.33.0)
       eslint-plugin-prettier:
         specifier: ^4.2.1
-        version: 4.2.1(eslint-config-prettier@8.6.0)(eslint@8.33.0)(prettier@2.8.7)
+        version: 4.2.1(eslint-config-prettier@8.6.0(eslint@8.33.0))(eslint@8.33.0)(prettier@2.8.7)
       eslint-plugin-vue:
         specifier: ^9.9.0
         version: 9.9.0(eslint@8.33.0)
@@ -302,16 +305,16 @@ importers:
         version: 5.17.1
       unocss:
         specifier: ^0.51.5
-        version: 0.51.5(postcss@8.4.21)(rollup@3.20.7)(vite@4.3.1)
+        version: 0.51.5(postcss@8.4.21)(rollup@3.20.7)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       unplugin-auto-import:
         specifier: 0.15.3
-        version: 0.15.3(@vueuse/core@10.0.2)(rollup@3.20.7)
+        version: 0.15.3(@vueuse/core@10.0.2(vue@3.2.47))(rollup@3.20.7)
       unplugin-icons:
         specifier: ^0.16.1
         version: 0.16.1(@vue/compiler-sfc@3.2.47)
       unplugin-vue-components:
         specifier: 0.24.1
-        version: 0.24.1(rollup@3.20.7)(vue@3.2.47)
+        version: 0.24.1(@babel/parser@7.21.4)(rollup@3.20.7)(vue@3.2.47)
       vite:
         specifier: ^4.3.1
         version: 4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)
@@ -320,34 +323,34 @@ importers:
         version: 0.7.0
       vite-plugin-compression:
         specifier: ^0.5.1
-        version: 0.5.1(vite@4.3.1)
+        version: 0.5.1(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       vite-plugin-html:
         specifier: ^3.2.0
-        version: 3.2.0(vite@4.3.1)
+        version: 3.2.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       vite-plugin-mock:
         specifier: ^3.0.0
-        version: 3.0.0(esbuild@0.17.17)(mockjs@1.1.0)(vite@4.3.1)
+        version: 3.0.0(esbuild@0.17.17)(mockjs@1.1.0)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       vite-plugin-pwa:
         specifier: ^0.14.7
-        version: 0.14.7(vite@4.3.1)(workbox-build@6.5.4)(workbox-window@6.5.4)
+        version: 0.14.7(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))(workbox-build@6.5.4)(workbox-window@6.5.4)
       vite-plugin-remove-console:
         specifier: ^2.1.0
         version: 2.1.0
       vite-plugin-restart:
         specifier: ^0.3.1
-        version: 0.3.1(vite@4.3.1)
+        version: 0.3.1(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       vite-plugin-spritesmith:
         specifier: ^0.1.1
         version: 0.1.1
       vite-plugin-style-import:
         specifier: ^2.0.0
-        version: 2.0.0(vite@4.3.1)
+        version: 2.0.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       vite-plugin-svg-icons:
         specifier: ^2.0.1
-        version: 2.0.1(vite@4.3.1)
+        version: 2.0.1(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       vite-plugin-vue-setup-extend:
         specifier: ^0.4.0
-        version: 0.4.0(vite@4.3.1)
+        version: 0.4.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       vue-eslint-parser:
         specifier: ^9.1.1
         version: 9.1.1(eslint@8.33.0)
@@ -1314,16 +1317,16 @@ packages:
     resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
     engines: {node: '>= 14'}
 
-  '@intlify/message-compiler@10.0.0-alpha.5':
-    resolution: {integrity: sha512-8Fr+1EsuxaCRWrrj3ZQ22DQU4vQzBxDHMMlLcN/6uM3R3kObTc0+Ip6EFrHXTsNm5LGETxlJlpi328U1dth/aA==}
+  '@intlify/message-compiler@12.0.0-alpha.3':
+    resolution: {integrity: sha512-mDDTN3gfYOHhBnpnlby19UHyvMaOnzdlpsIrxUfs44R/vCATfn8pMOkE8PXD2t410xkocEj3FpDcC9XC/0v4Dg==}
     engines: {node: '>= 16'}
 
   '@intlify/message-compiler@9.2.2':
     resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
     engines: {node: '>= 14'}
 
-  '@intlify/shared@10.0.0-alpha.5':
-    resolution: {integrity: sha512-uCXI2IM9B2fwR7whGJ+DNBGxI02cSgD4E0ItY1ls++Vubrt92rD86o/9AUb9S/6jyK2hy3kFaTzublQIylMAsA==}
+  '@intlify/shared@12.0.0-alpha.3':
+    resolution: {integrity: sha512-ryaNYBvxQjyJUmVuBBg+HHUsmGnfxcEUPR0NCeG4/K9N2qtyFE35C80S15IN6iYFE2MGWLN7HfOSyg0MXZIc9w==}
     engines: {node: '>= 16'}
 
   '@intlify/shared@9.2.2':
@@ -2621,6 +2624,9 @@ packages:
   ecc-jsbn@0.1.2:
     resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==}
 
+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -4845,6 +4851,7 @@ packages:
   source-map@0.8.0-beta.0:
     resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
     engines: {node: '>= 8'}
+    deprecated: The work that was done in this beta branch won't be included in future versions
 
   sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
@@ -5231,6 +5238,9 @@ packages:
       '@swc/wasm':
         optional: true
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tslib@2.5.0:
     resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
 
@@ -5802,6 +5812,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
 snapshots:
 
   '@ampproject/remapping@2.2.0':
@@ -6728,7 +6741,7 @@ snapshots:
       '@types/node': 18.11.18
       chalk: 4.1.2
       cosmiconfig: 8.0.0
-      cosmiconfig-typescript-loader: 4.3.0(@types/node@18.11.18)(cosmiconfig@8.0.0)(ts-node@10.9.1)(typescript@4.9.5)
+      cosmiconfig-typescript-loader: 4.3.0(@types/node@18.11.18)(cosmiconfig@8.0.0)(ts-node@10.9.1(@types/node@18.11.18)(typescript@4.9.5))(typescript@4.9.5)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -6973,14 +6986,15 @@ snapshots:
 
   '@imengyu/vue3-context-menu@1.2.2': {}
 
-  '@intlify/bundle-utils@3.4.0(vue-i18n@9.2.2)':
+  '@intlify/bundle-utils@3.4.0(vue-i18n@9.2.2(vue@3.2.47))':
     dependencies:
-      '@intlify/message-compiler': 10.0.0-alpha.5
-      '@intlify/shared': 10.0.0-alpha.5
+      '@intlify/message-compiler': 12.0.0-alpha.3
+      '@intlify/shared': 12.0.0-alpha.3
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
-      vue-i18n: 9.2.2(vue@3.2.47)
       yaml-eslint-parser: 0.3.2
+    optionalDependencies:
+      vue-i18n: 9.2.2(vue@3.2.47)
 
   '@intlify/core-base@9.2.2':
     dependencies:
@@ -6993,9 +7007,9 @@ snapshots:
     dependencies:
       '@intlify/shared': 9.2.2
 
-  '@intlify/message-compiler@10.0.0-alpha.5':
+  '@intlify/message-compiler@12.0.0-alpha.3':
     dependencies:
-      '@intlify/shared': 10.0.0-alpha.5
+      '@intlify/shared': 12.0.0-alpha.3
       source-map-js: 1.0.2
 
   '@intlify/message-compiler@9.2.2':
@@ -7003,18 +7017,19 @@ snapshots:
       '@intlify/shared': 9.2.2
       source-map: 0.6.1
 
-  '@intlify/shared@10.0.0-alpha.5': {}
+  '@intlify/shared@12.0.0-alpha.3': {}
 
   '@intlify/shared@9.2.2': {}
 
-  '@intlify/vite-plugin-vue-i18n@7.0.0(vite@4.3.1)(vue-i18n@9.2.2)':
+  '@intlify/vite-plugin-vue-i18n@7.0.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))(vue-i18n@9.2.2(vue@3.2.47))':
     dependencies:
-      '@intlify/bundle-utils': 3.4.0(vue-i18n@9.2.2)
-      '@intlify/shared': 10.0.0-alpha.5
+      '@intlify/bundle-utils': 3.4.0(vue-i18n@9.2.2(vue@3.2.47))
+      '@intlify/shared': 12.0.0-alpha.3
       '@rollup/pluginutils': 4.2.1
       debug: 4.3.4
       fast-glob: 3.2.12
       source-map: 0.6.1
+    optionalDependencies:
       vite: 4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)
       vue-i18n: 9.2.2(vue@3.2.47)
     transitivePeerDependencies:
@@ -7108,6 +7123,7 @@ snapshots:
     dependencies:
       '@rollup/pluginutils': 5.0.2(rollup@3.20.7)
       magic-string: 0.27.0
+    optionalDependencies:
       rollup: 3.20.7
 
   '@rollup/pluginutils@3.1.0(rollup@2.76.0)':
@@ -7127,6 +7143,7 @@ snapshots:
       '@types/estree': 1.0.0
       estree-walker: 2.0.2
       picomatch: 2.3.1
+    optionalDependencies:
       rollup: 3.20.7
 
   '@surma/rollup-plugin-off-main-thread@2.2.3':
@@ -7185,11 +7202,11 @@ snapshots:
 
   '@types/web-bluetooth@0.0.16': {}
 
-  '@unocss/astro@0.51.5(rollup@3.20.7)(vite@4.3.1)':
+  '@unocss/astro@0.51.5(rollup@3.20.7)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))':
     dependencies:
       '@unocss/core': 0.51.5
       '@unocss/reset': 0.51.5
-      '@unocss/vite': 0.51.5(rollup@3.20.7)(vite@4.3.1)
+      '@unocss/vite': 0.51.5(rollup@3.20.7)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
     transitivePeerDependencies:
       - rollup
       - vite
@@ -7304,7 +7321,7 @@ snapshots:
     dependencies:
       '@unocss/core': 0.51.5
 
-  '@unocss/vite@0.51.5(rollup@3.20.7)(vite@4.3.1)':
+  '@unocss/vite@0.51.5(rollup@3.20.7)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))':
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.2(rollup@3.20.7)
@@ -7320,11 +7337,11 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@vitejs/plugin-basic-ssl@1.1.0(vite@4.3.1)':
+  '@vitejs/plugin-basic-ssl@1.1.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))':
     dependencies:
       vite: 4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)
 
-  '@vitejs/plugin-legacy@4.0.2(terser@5.17.1)(vite@4.3.1)':
+  '@vitejs/plugin-legacy@4.0.2(terser@5.17.1)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))':
     dependencies:
       '@babel/core': 7.21.4
       '@babel/preset-env': 7.20.2(@babel/core@7.21.4)
@@ -7338,7 +7355,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.1)(vue@3.2.47)':
+  '@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))(vue@3.2.47)':
     dependencies:
       '@babel/core': 7.20.12
       '@babel/plugin-transform-typescript': 7.20.13(@babel/core@7.20.12)
@@ -7348,7 +7365,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@4.1.0(vite@4.3.1)(vue@3.2.47)':
+  '@vitejs/plugin-vue@4.1.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))(vue@3.2.47)':
     dependencies:
       vite: 4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)
       vue: 3.2.47
@@ -7453,15 +7470,18 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@10.0.2(axios@1.3.6)(nprogress@0.2.0)(qrcode@1.5.1)(sortablejs@1.15.0)(vue@3.2.47)':
+  '@vueuse/integrations@10.0.2(async-validator@4.2.5)(axios@1.3.6)(change-case@4.1.2)(nprogress@0.2.0)(qrcode@1.5.1)(sortablejs@1.15.0)(vue@3.2.47)':
     dependencies:
       '@vueuse/core': 10.0.2(vue@3.2.47)
       '@vueuse/shared': 10.0.2(vue@3.2.47)
+      vue-demi: 0.14.0(vue@3.2.47)
+    optionalDependencies:
+      async-validator: 4.2.5
       axios: 1.3.6
+      change-case: 4.1.2
       nprogress: 0.2.0
       qrcode: 1.5.1
       sortablejs: 1.15.0
-      vue-demi: 0.14.0(vue@3.2.47)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -8200,7 +8220,7 @@ snapshots:
 
   corser@2.0.1: {}
 
-  cosmiconfig-typescript-loader@4.3.0(@types/node@18.11.18)(cosmiconfig@8.0.0)(ts-node@10.9.1)(typescript@4.9.5):
+  cosmiconfig-typescript-loader@4.3.0(@types/node@18.11.18)(cosmiconfig@8.0.0)(ts-node@10.9.1(@types/node@18.11.18)(typescript@4.9.5))(typescript@4.9.5):
     dependencies:
       '@types/node': 18.11.18
       cosmiconfig: 8.0.0
@@ -8480,6 +8500,11 @@ snapshots:
       jsbn: 0.1.1
       safer-buffer: 2.1.2
 
+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
   ee-first@1.1.1: {}
 
   ejs@3.1.8:
@@ -8636,12 +8661,13 @@ snapshots:
     dependencies:
       eslint: 8.33.0
 
-  eslint-plugin-prettier@4.2.1(eslint-config-prettier@8.6.0)(eslint@8.33.0)(prettier@2.8.7):
+  eslint-plugin-prettier@4.2.1(eslint-config-prettier@8.6.0(eslint@8.33.0))(eslint@8.33.0)(prettier@2.8.7):
     dependencies:
       eslint: 8.33.0
-      eslint-config-prettier: 8.6.0(eslint@8.33.0)
       prettier: 2.8.7
       prettier-linter-helpers: 1.0.0
+    optionalDependencies:
+      eslint-config-prettier: 8.6.0(eslint@8.33.0)
 
   eslint-plugin-vue@9.9.0(eslint@8.33.0):
     dependencies:
@@ -10333,9 +10359,10 @@ snapshots:
   pinia@2.0.35(typescript@4.9.5)(vue@3.2.47):
     dependencies:
       '@vue/devtools-api': 6.5.0
-      typescript: 4.9.5
       vue: 3.2.47
       vue-demi: 0.13.11(vue@3.2.47)
+    optionalDependencies:
+      typescript: 4.9.5
 
   pixelsmith@2.6.0:
     dependencies:
@@ -11093,11 +11120,12 @@ snapshots:
 
   stylelint-config-recommended-scss@8.0.0(postcss@8.4.21)(stylelint@14.16.1):
     dependencies:
-      postcss: 8.4.21
       postcss-scss: 4.0.6(postcss@8.4.21)
       stylelint: 14.16.1
       stylelint-config-recommended: 9.0.0(stylelint@14.16.1)
       stylelint-scss: 4.3.0(stylelint@14.16.1)
+    optionalDependencies:
+      postcss: 8.4.21
 
   stylelint-config-recommended-vue@1.4.0(postcss-html@1.5.0)(stylelint@14.16.1):
     dependencies:
@@ -11113,10 +11141,11 @@ snapshots:
 
   stylelint-config-standard-scss@6.1.0(postcss@8.4.21)(stylelint@14.16.1):
     dependencies:
-      postcss: 8.4.21
       stylelint: 14.16.1
       stylelint-config-recommended-scss: 8.0.0(postcss@8.4.21)(stylelint@14.16.1)
       stylelint-config-standard: 29.0.0(stylelint@14.16.1)
+    optionalDependencies:
+      postcss: 8.4.21
 
   stylelint-config-standard-vue@1.0.0(postcss-html@1.5.0)(stylelint@14.16.1):
     dependencies:
@@ -11361,6 +11390,8 @@ snapshots:
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
 
+  tslib@2.3.0: {}
+
   tslib@2.5.0: {}
 
   tunnel-agent@0.6.0:
@@ -11474,9 +11505,9 @@ snapshots:
 
   universalify@2.0.0: {}
 
-  unocss@0.51.5(postcss@8.4.21)(rollup@3.20.7)(vite@4.3.1):
+  unocss@0.51.5(postcss@8.4.21)(rollup@3.20.7)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)):
     dependencies:
-      '@unocss/astro': 0.51.5(rollup@3.20.7)(vite@4.3.1)
+      '@unocss/astro': 0.51.5(rollup@3.20.7)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
       '@unocss/cli': 0.51.5(rollup@3.20.7)
       '@unocss/core': 0.51.5
       '@unocss/extractor-arbitrary-variants': 0.51.5
@@ -11495,7 +11526,7 @@ snapshots:
       '@unocss/transformer-compile-class': 0.51.5
       '@unocss/transformer-directives': 0.51.5
       '@unocss/transformer-variant-group': 0.51.5
-      '@unocss/vite': 0.51.5(rollup@3.20.7)(vite@4.3.1)
+      '@unocss/vite': 0.51.5(rollup@3.20.7)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -11504,16 +11535,17 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin-auto-import@0.15.3(@vueuse/core@10.0.2)(rollup@3.20.7):
+  unplugin-auto-import@0.15.3(@vueuse/core@10.0.2(vue@3.2.47))(rollup@3.20.7):
     dependencies:
       '@antfu/utils': 0.7.2
       '@rollup/pluginutils': 5.0.2(rollup@3.20.7)
-      '@vueuse/core': 10.0.2(vue@3.2.47)
       local-pkg: 0.4.3
       magic-string: 0.30.0
       minimatch: 9.0.0
       unimport: 3.0.6(rollup@3.20.7)
       unplugin: 1.3.1
+    optionalDependencies:
+      '@vueuse/core': 10.0.2(vue@3.2.47)
     transitivePeerDependencies:
       - rollup
 
@@ -11522,15 +11554,16 @@ snapshots:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.2
       '@iconify/utils': 2.1.5
-      '@vue/compiler-sfc': 3.2.47
       debug: 4.3.4
       kolorist: 1.7.0
       local-pkg: 0.4.3
       unplugin: 1.3.1
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.2.47
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-components@0.24.1(rollup@3.20.7)(vue@3.2.47):
+  unplugin-vue-components@0.24.1(@babel/parser@7.21.4)(rollup@3.20.7)(vue@3.2.47):
     dependencies:
       '@antfu/utils': 0.7.2
       '@rollup/pluginutils': 5.0.2(rollup@3.20.7)
@@ -11543,6 +11576,8 @@ snapshots:
       resolve: 1.22.1
       unplugin: 1.3.1
       vue: 3.2.47
+    optionalDependencies:
+      '@babel/parser': 7.21.4
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -11625,7 +11660,7 @@ snapshots:
 
   vite-plugin-banner@0.7.0: {}
 
-  vite-plugin-compression@0.5.1(vite@4.3.1):
+  vite-plugin-compression@0.5.1(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)):
     dependencies:
       chalk: 4.1.2
       debug: 4.3.4
@@ -11634,7 +11669,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-html@3.2.0(vite@4.3.1):
+  vite-plugin-html@3.2.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       colorette: 2.0.19
@@ -11650,7 +11685,7 @@ snapshots:
       pathe: 0.2.0
       vite: 4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)
 
-  vite-plugin-mock@3.0.0(esbuild@0.17.17)(mockjs@1.1.0)(vite@4.3.1):
+  vite-plugin-mock@3.0.0(esbuild@0.17.17)(mockjs@1.1.0)(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)):
     dependencies:
       '@types/mockjs': 1.0.7
       bundle-require: 4.0.1(esbuild@0.17.17)
@@ -11666,7 +11701,7 @@ snapshots:
       - esbuild
       - supports-color
 
-  vite-plugin-pwa@0.14.7(vite@4.3.1)(workbox-build@6.5.4)(workbox-window@6.5.4):
+  vite-plugin-pwa@0.14.7(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1))(workbox-build@6.5.4)(workbox-window@6.5.4):
     dependencies:
       '@rollup/plugin-replace': 5.0.2(rollup@3.20.7)
       debug: 4.3.4
@@ -11681,7 +11716,7 @@ snapshots:
 
   vite-plugin-remove-console@2.1.0: {}
 
-  vite-plugin-restart@0.3.1(vite@4.3.1):
+  vite-plugin-restart@0.3.1(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)):
     dependencies:
       micromatch: 4.0.5
       vite: 4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)
@@ -11695,7 +11730,7 @@ snapshots:
       spritesheet-templates: 10.5.2
       spritesmith: 3.4.1
 
-  vite-plugin-style-import@2.0.0(vite@4.3.1):
+  vite-plugin-style-import@2.0.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       change-case: 4.1.2
@@ -11706,7 +11741,7 @@ snapshots:
       pathe: 0.2.0
       vite: 4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)
 
-  vite-plugin-svg-icons@2.0.1(vite@4.3.1):
+  vite-plugin-svg-icons@2.0.1(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)):
     dependencies:
       '@types/svgo': 2.6.4
       cors: 2.8.5
@@ -11720,7 +11755,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-setup-extend@0.4.0(vite@4.3.1):
+  vite-plugin-vue-setup-extend@0.4.0(vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1)):
     dependencies:
       '@vue/compiler-sfc': 3.2.47
       magic-string: 0.25.9
@@ -11728,14 +11763,14 @@ snapshots:
 
   vite@4.3.1(@types/node@18.11.18)(sass@1.57.1)(terser@5.17.1):
     dependencies:
-      '@types/node': 18.11.18
       esbuild: 0.17.17
       postcss: 8.4.21
       rollup: 3.20.7
-      sass: 1.57.1
-      terser: 5.17.1
     optionalDependencies:
+      '@types/node': 18.11.18
       fsevents: 2.3.2
+      sass: 1.57.1
+      terser: 5.17.1
 
   vue-demi@0.13.11(vue@3.2.47):
     dependencies:
@@ -12059,3 +12094,7 @@ snapshots:
   yn@3.1.1: {}
 
   yocto-queue@0.1.0: {}
+
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0

src/api/modules/system.js

@@ -127,5 +127,13 @@ export default defineRequest(({ request }) => ({
       method: 'post',
       params
     })
+  },
+  // 获取所有主机信息接口
+  API_HOST_ALL_MSG_GET(params = {}) {
+    return request({
+      url: '/Host/HostAllMsg',
+      method: 'get',
+      params
+    })
   }
 }))

src/router/asyncRoutes.js

@@ -13,6 +13,7 @@ import videoPlatform from './modules/video.platform'
 import TagManagement from './modules/tag.management'
 import AdvancedLinkage from './modules/advanced.linkage'
 import Tour from './modules/tour'
+import Dashboard from './modules/dashboard'
 
 /**
  * @description
@@ -29,6 +30,6 @@ export default [
       icon: 'icon-diamonds'
     },
     // children: [UserList, TagManagement, AdvancedLinkage, Tour, Setting]
-    children: [TagManagement, AdvancedLinkage]
+    children: [TagManagement, AdvancedLinkage, Dashboard]
   }
 ]

src/router/modules/dashboard.js

@@ -0,0 +1,32 @@
+/*
+ * @Description:
+ * @Author: zcf
+ * @Date: 2022-02-08 17:24:53
+ * @LastEditTime: 2022-06-17 20:10:32
+ * @LastEditors: zcf
+ */
+// import { i18n } from '@/locales'
+// const {
+//   global: { t }
+// } = i18n
+const Layout = () => import('@/layout/index.vue')
+
+export default {
+  path: '/dashboard_page',
+  component: Layout,
+  name: 'Dashboard',
+  meta: {
+    title: '设备状态',
+    icon: 'icon-user'
+  },
+  children: [
+    {
+      path: '',
+      name: 'dashboard1',
+      component: () => import('@/views/dashboard/index.vue'),
+      meta: {
+        sidebar: false
+      }
+    }
+  ]
+}

src/store/modules/menu.js

@@ -54,6 +54,8 @@ export const useMenuStore = defineStore('menu', {
       } else {
         routes = routeStore.routes
       }
+      console.log(routes);
+
       return routes
     },
     sidebarMenus() {

src/views/dashboard/index.vue

@@ -0,0 +1,480 @@
+<script setup>
+  import { watchDebounced } from '@vueuse/core'
+  import dayjs from 'dayjs'
+  import * as echarts from 'echarts'
+
+  const tF = () => dayjs().subtract(2, 'minute').format('HH:mm:ss')
+  const { API_HOST_ALL_MSG_GET } = useRequest()
+
+  const baseInfo = ref([
+    {
+      name: '设备名称',
+      value: '--',
+      icon: 'i-mingcute:airplay-line'
+    },
+    {
+      name: '序列号',
+      value: '--',
+      icon: 'i-mingcute:barcode-line'
+    },
+    {
+      name: '无线地址',
+      value: '--',
+      icon: 'i-mingcute:link-2-line'
+    },
+    {
+      name: '有线地址',
+      value: '--',
+      icon: 'i-mingcute:link-2-line'
+    },
+    {
+      name: '软件版本',
+      value: 'V0.1.1',
+      icon: 'i-mingcute:version-line'
+    },
+    {
+      name: '硬件版本',
+      value: 'V1.0',
+      icon: 'i-mdi:animation-outline'
+    }
+  ])
+  const revenueChart = ref(null)
+  let revenueChartInstance = null
+  let revenueChartResizeHandler = null
+  const monthlyRadarChart = ref(null)
+  let monthlyRadarChartInstance = null
+  let monthlyRadarChartResizeHandler = null
+  const highestRevenueChart = ref(null)
+  let highestRevenueChartInstance = null
+  let highestRevenueChartResizeHandler = null
+  let collapseResizeTimeout = null
+  const createTooltipConfig = (formatter) =>
+    Object.assign(
+      {
+        trigger: 'axis',
+        backgroundColor: '#fff',
+        borderWidth: 0,
+        padding: 8,
+        extraCssText: 'box-shadow: none;',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12
+        },
+        axisPointer: {
+          type: 'none'
+        }
+      },
+      formatter && { formatter }
+    )
+  const [loading1, loading2, loading3] = [true, true, true]
+  const chartDataManager = {
+    get24HourLine: () => {
+      return new Promise((resolve) => {
+        getStatistics('hour').then((res) => {
+          // 24小时活动分布
+          resolve(res.Periods.map((item) => ({ label: item.Period, value: item.Count })))
+        })
+      })
+    },
+    getLowestWeekLine: () => {
+      return new Promise((resolve) => {
+        getStatistics('day').then((res) => {
+          resolve(res.Periods.map((item) => ({ label: item.Period, value: [item.Count] })))
+        })
+        // resolve([
+        //   {
+        //     label: '周一',
+        //     value: [1000, 5000, 8000, 1000],
+        //   },
+        //   {
+        //     label: '周二',
+        //     value: [4000, 6000, 9000, 1000],
+        //   },
+        //   {
+        //     label: '周三',
+        //     value: [3000, 7000, 10000, 5000],
+        //   },
+        //   {
+        //     label: '周四',
+        //     value: [5000, 8000, 12000, 6000],
+        //   },
+        //   {
+        //     label: '周五',
+        //     value: [4000, 6000, 9000, 1000],
+        //   },
+        //   {
+        //     label: '周六',
+        //     value: [6000, 8000, 10000, 2000],
+        //   },
+        //   {
+        //     label: '周日',
+        //     value: [7000, 9000, 600, 3000],
+        //   },
+        // ])
+      })
+    },
+    getCurrentDayData: () => {
+      return new Promise((resolve) => {
+        resolve([
+          { value: 70, name: '小型鸟类' },
+          { value: 30, name: '中型鸟类' },
+          { value: 20, name: '大型鸟类' },
+          { value: 5, name: '未知' }
+        ])
+      })
+    }
+  }
+  const setOptionOne = (data, color, label) => {
+    const option = {
+      color: ['#409EFF'],
+      // tooltip: {
+      //     trigger: 'axis',
+      //     axisPointer: { // 坐标轴指示器，坐标轴触发有效
+      //         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+      //     }
+      // },
+      grid: {
+        left: '0%',
+        right: '0%',
+        top: '15%',
+        bottom: '20%'
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          data: [label],
+          axisLabel: {
+            color: '#8ac5ff',
+            fontSize: '30',
+            padding: [6, 0]
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        }
+      ],
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        },
+        axisLabel: {
+          show: false
+        }
+      },
+      series: [
+        {
+          tooltip: {
+            show: false
+          },
+          name: 'bg',
+          type: 'pictorialBar',
+          barWidth: '30',
+          silent: true,
+          symbol: 'rect',
+          symbolRepeat: true,
+          symbolMargin: 1,
+          symbolSize: [200, 6],
+          color: '#284997',
+          data: [100]
+        },
+        {
+          type: 'pictorialBar',
+          animation: true,
+          animationDuration: 600,
+          symbol: 'rect',
+          symbolRepeat: true,
+          symbolSize: [200, 6],
+          symbolMargin: 1,
+          barWidth: '30',
+          color,
+          data: [data]
+        }
+      ]
+    }
+    return option
+  }
+  const temperature = ref(0)
+  const initRevenueChartOption = async (chart, temperatureD) => {
+    // const lineData = await chartDataManager.getLowestWeekLine()
+    chart.hideLoading()
+    const { temperature: a } = temperatureD[temperatureD.length - 1]
+    let color
+    if (a >= 80 && a <= 100) {
+      color = '#F5222D'
+    } else if (a >= 60 && a < 80) {
+      color = '#FA8C16'
+    } else {
+      color = '#409EFF'
+    }
+    temperature.value = a
+    const option = setOptionOne(a, color, 'CPU')
+    chart.setOption(option)
+  }
+  async function initRevenueChart(temperature) {
+    if (!revenueChart.value) return
+    const chart = echarts.init(revenueChart.value)
+    chart === null || chart === void 0 ? void 0 : chart.showLoading()
+    initRevenueChartOption(chart, temperature)
+    revenueChartInstance = chart
+    revenueChartResizeHandler = () => chart.resize()
+    window.addEventListener('resize', revenueChartResizeHandler, { passive: true })
+  }
+
+  const initMonthlyRadarChartOption = async (chart) => {
+    const currentDayData = await chartDataManager.getCurrentDayData()
+    chart.hideLoading()
+    const option = {
+      loading1,
+      title: {
+        text: '鸟类分布图',
+        textStyle: {
+          fontSize: 15,
+          color: '#fff',
+          fontWeight: 'normal'
+        }
+      },
+      legend: {
+        left: 'right',
+        icon: 'circle',
+        textStyle: {
+          color: '#fff'
+        }
+      },
+      series: [
+        {
+          name: 'Access From',
+          type: 'pie',
+          top: 30,
+          radius: '65%',
+          data: currentDayData,
+          label: {
+            show: true,
+            color: 'inherit',
+            formatter: '{b}: {d} %'
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    }
+    chart.setOption(option)
+  }
+  async function initMonthlyRadarChart() {
+    if (!monthlyRadarChart.value) return
+    // const now = new Date()
+    // const currentDay = now.getDay()
+    const chart = echarts.init(monthlyRadarChart.value)
+    chart === null || chart === void 0 ? void 0 : chart.showLoading()
+    initMonthlyRadarChartOption(chart)
+    monthlyRadarChartInstance = chart
+    monthlyRadarChartResizeHandler = () => chart.resize()
+    window.addEventListener('resize', monthlyRadarChartResizeHandler, { passive: true })
+  }
+  const percentage = ref(0)
+  const initHighestRevenueChartOption = async (chart, memoryD) => {
+    // const twentyFourHourLine = await chartDataManager.get24HourLine()
+    chart.hideLoading()
+    const { Percentage: a } = memoryD[0]
+    let color
+    if (a >= 80 && a <= 100) {
+      color = '#F5222D'
+    } else if (a >= 60 && a < 80) {
+      color = '#FA8C16'
+    } else {
+      color = '#409EFF'
+    }
+    percentage.value = a
+    const option = setOptionOne(a, color, '内存')
+    chart.setOption(option)
+  }
+  async function initHighestRevenueChart(memory) {
+    if (!highestRevenueChart.value) return
+    const chart = echarts.init(highestRevenueChart.value)
+    chart === null || chart === void 0 ? void 0 : chart.showLoading()
+    initHighestRevenueChartOption(chart, memory)
+    highestRevenueChartInstance = chart
+    highestRevenueChartResizeHandler = () => chart.resize()
+    window.addEventListener('resize', highestRevenueChartResizeHandler, { passive: true })
+  }
+  // hour (24小时) day (7天) month (30天)
+  const getStatistics = (periodType) => {
+    return new Promise((resolve) => {
+      API_ALERT_STATISTICS_GET({ periodType }).then((res) => {
+        resolve(res)
+      })
+    })
+  }
+  const initEcharts = async () => {
+    const { Host, NetPort, Temperature, Memory } = await API_HOST_ALL_MSG_GET()
+
+    baseInfo.value[0].value = Host.hostname
+    baseInfo.value[1].value = Host.hostId
+    baseInfo.value.splice(
+      2,
+      2,
+      ...NetPort.map((v) => ({
+        name: v.name,
+        value: v.hardwareAddr,
+        icon: 'mingcute:link-2-line'
+      }))
+    )
+    initRevenueChart(Temperature)
+    // initMonthlyRadarChart()
+    initHighestRevenueChart(Memory)
+  }
+  let timer = null
+
+  timer = setInterval(() => {
+    initEcharts()
+  }, 30000)
+
+  onMounted(() => {
+    initEcharts()
+  })
+  onUnmounted(() => {
+    if (revenueChartInstance) {
+      if (revenueChartResizeHandler) {
+        window.removeEventListener('resize', revenueChartResizeHandler)
+        revenueChartResizeHandler = null
+      }
+      revenueChartInstance.dispose()
+      revenueChartInstance = null
+    }
+    if (monthlyRadarChartInstance) {
+      if (monthlyRadarChartResizeHandler) {
+        window.removeEventListener('resize', monthlyRadarChartResizeHandler)
+        monthlyRadarChartResizeHandler = null
+      }
+      monthlyRadarChartInstance.dispose()
+      monthlyRadarChartInstance = null
+    }
+    if (highestRevenueChartInstance) {
+      if (highestRevenueChartResizeHandler) {
+        window.removeEventListener('resize', highestRevenueChartResizeHandler)
+        highestRevenueChartResizeHandler = null
+      }
+      highestRevenueChartInstance.dispose()
+      highestRevenueChartInstance = null
+    }
+    if (collapseResizeTimeout !== null) {
+      clearTimeout(collapseResizeTimeout)
+      collapseResizeTimeout = null
+    }
+    if (timer) clearInterval(timer)
+  })
+  function clearCharts() {
+    if (revenueChartInstance) {
+      if (revenueChartResizeHandler) {
+        window.removeEventListener('resize', revenueChartResizeHandler)
+        revenueChartResizeHandler = null
+      }
+      revenueChartInstance.dispose()
+      revenueChartInstance = null
+    }
+    if (monthlyRadarChartInstance) {
+      if (monthlyRadarChartResizeHandler) {
+        window.removeEventListener('resize', monthlyRadarChartResizeHandler)
+        monthlyRadarChartResizeHandler = null
+      }
+      monthlyRadarChartInstance.dispose()
+      monthlyRadarChartInstance = null
+    }
+    if (highestRevenueChartInstance) {
+      if (highestRevenueChartResizeHandler) {
+        window.removeEventListener('resize', highestRevenueChartResizeHandler)
+        highestRevenueChartResizeHandler = null
+      }
+      highestRevenueChartInstance.dispose()
+      highestRevenueChartInstance = null
+    }
+  }
+  function resizeAllCharts() {
+    if (revenueChartInstance) revenueChartInstance.resize()
+    if (monthlyRadarChartInstance) monthlyRadarChartInstance.resize()
+    if (highestRevenueChartInstance) highestRevenueChartInstance.resize()
+  }
+  onMounted(() => {
+    clearCharts()
+    initEcharts()
+    window.addEventListener('resize', resizeAllCharts)
+  })
+  onUnmounted(() => {
+    window.removeEventListener('resize', resizeAllCharts)
+  })
+</script>
+<template>
+  <div class="flex flex-col gap-y-4 max-sm:gap-y-2">
+    <div class="grid grid-cols-1 gap-4 max-sm:gap-2 md:grid-cols-2 lg:grid-cols-2">
+      <div
+        v-for="{ name, value, icon } in baseInfo"
+        :key="name"
+        class="flex items-center justify-between gap-x-4 overflow-hidden rounded bg-naive-card p-6 shadow-xs transition-[background-color]"
+      >
+        <div class="flex-1">
+          <span class="text-sm font-medium text-#fff">{{ name }}</span>
+          <div
+            class="mt-1 mb-1.5 flex items-center gap-x-4 text-2xl text-neutral-700 dark:text-neutral-400"
+          >
+            <!-- <NNumberAnimation
+              :to="value"
+              show-separator
+            /> -->
+            <span class="text-#ccc">{{ value }}</span>
+          </div>
+        </div>
+        <div>
+          <div class="grid place-items-center rounded-full p-3" :class="icon">
+            <span class="size-7" :class="icon" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="grid grid-cols-1 gap-4 overflow-hidden max-sm:gap-2 lg:grid-cols-12">
+      <div class="col-span-1 lg:col-span-6">
+        <div
+          class="relative rounded bg-naive-card px-5 pt-5 pb-4.5 shadow-xs transition-[background-color]"
+          style="height: 400px"
+        >
+          <div
+            class="absolute top-0 left-50% transform-translate-x--50% b-rd-4px px-3 b-solid b-2px b-color-#284997 bg-#28499775"
+          >
+            {{ temperature }}℃
+          </div>
+          <div ref="revenueChart" class="h-full" />
+        </div>
+      </div>
+      <div class="col-span-1 lg:col-span-6">
+        <div
+          class="relative rounded bg-naive-card p-5 shadow-xs transition-[background-color]"
+          style="height: 400px"
+        >
+          <div
+            class="absolute top-0 left-50% transform-translate-x--50% b-rd-4px px-3 b-solid b-2px b-color-#284997 bg-#28499775"
+          >
+            已用{{ percentage.toFixed(2) }}GB
+          </div>
+          <div ref="highestRevenueChart" class="h-full" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>