Bladeren bron

引入5.5首页

hongrunxia 1 jaar geleden
bovenliggende
commit
f6ba2f6a3c
100 gewijzigde bestanden met toevoegingen van 3810 en 233 verwijderingen
  1. 7 0
      build/vite/plugin/index.ts
  2. 7 3
      index.html
  3. 1 0
      package.json
  4. 160 0
      pnpm-lock.yaml
  5. BIN
      src/assets/images/home-container/device/ccq.png
  6. BIN
      src/assets/images/home-container/device/cf.png
  7. BIN
      src/assets/images/home-container/device/fc.png
  8. BIN
      src/assets/images/home-container/device/fm.png
  9. BIN
      src/assets/images/home-container/device/js.png
  10. BIN
      src/assets/images/home-container/device/penfen.png
  11. BIN
      src/assets/images/home-container/device/penlin.png
  12. BIN
      src/assets/images/home-container/device/pw.png
  13. BIN
      src/assets/images/home-container/device/wasibeng.png
  14. BIN
      src/assets/images/home-container/device/yafeng.png
  15. BIN
      src/assets/images/home-container/device/zhudan.png
  16. BIN
      src/assets/images/home-container/device/zhujiang.png
  17. BIN
      src/assets/images/home-container/device/zhushan.png
  18. BIN
      src/assets/images/home-container/dialog.png
  19. BIN
      src/assets/images/home-container/dialog1.png
  20. BIN
      src/assets/images/home-container/header-nav.png
  21. BIN
      src/assets/images/home-container/home-bg.png
  22. 14 0
      src/assets/images/home-container/internet-bad.svg
  23. BIN
      src/assets/images/home-container/item-value.png
  24. BIN
      src/assets/images/home-container/line-val.png
  25. BIN
      src/assets/images/home-container/pie.png
  26. BIN
      src/assets/images/home-container/three-dialog.png
  27. BIN
      src/assets/images/home-container/three-nav.png
  28. BIN
      src/assets/images/home-container/tobig.png
  29. 7 0
      src/assets/images/home-container/toggle.svg
  30. BIN
      src/assets/images/home-container/warn-icon.png
  31. BIN
      src/assets/images/home-container/warn-icon1.png
  32. BIN
      src/assets/images/home-container/warn-icon2.png
  33. BIN
      src/assets/images/home-container/warn-icon3.png
  34. BIN
      src/assets/images/home-container/warn1.png
  35. BIN
      src/assets/images/home-container/warn7.png
  36. BIN
      src/assets/images/home-container/warn8.png
  37. BIN
      src/assets/images/home-container/wind-door.gif
  38. BIN
      src/assets/images/home-container/wind-window.gif
  39. BIN
      src/assets/images/home-container/work-bd.png
  40. BIN
      src/assets/images/home-container/左下菜单按钮.png
  41. BIN
      src/assets/images/home-container/背景图.png - 快捷方式.lnk
  42. BIN
      src/assets/images/home-container/视频上方数据框.png
  43. 22 0
      src/assets/images/home-container/运行风机图标.svg
  44. 2 1
      src/components/Application/src/AppLogo.vue
  45. 1 1
      src/components/Form/src/BasicForm.vue
  46. 15 1
      src/design/color.less
  47. 1 0
      src/design/index.less
  48. 2 2
      src/design/vent/color.less
  49. 13 13
      src/design/vent/index.less
  50. 1 1
      src/design/vent/modal.less
  51. 46 22
      src/hooks/setting/index.ts
  52. 4 1
      src/hooks/web/usePage.ts
  53. 5 4
      src/layouts/default/content/index.vue
  54. 66 0
      src/layouts/default/header/components/user-dropdown/UpdateHome.vue
  55. 15 3
      src/layouts/default/header/components/user-dropdown/index.vue
  56. 2 1
      src/layouts/default/header/index.less
  57. 7 3
      src/layouts/default/header/index.vue
  58. 21 0
      src/layouts/default/layout.data.ts
  59. 9 18
      src/layouts/default/sider/bottomSideder.vue
  60. 1 0
      src/locales/lang/zh-CN/layout.ts
  61. 1 0
      src/logics/initAppConfig.ts
  62. 1 1
      src/logics/theme/updateBackground.ts
  63. 5 0
      src/main.ts
  64. 6 1
      src/router/guard/index.ts
  65. 15 4
      src/router/guard/permissionGuard.ts
  66. 11 0
      src/router/routes/basic.ts
  67. 9 2
      src/router/routes/index.ts
  68. 2 0
      src/router/routes/modules/dashboard.ts
  69. 5 2
      src/store/modules/multipleTab.ts
  70. 3 3
      src/store/modules/permission.ts
  71. 3 1
      src/store/modules/user.ts
  72. 24 0
      src/utils/env.ts
  73. 2 6
      src/views/vent/comment/EditRowTable.vue
  74. 2 6
      src/views/vent/comment/components/customHeader.vue
  75. 0 1
      src/views/vent/deviceManager/comment/DeviceModal.vue
  76. 2 6
      src/views/vent/deviceManager/comment/NormalTable.vue
  77. 0 1
      src/views/vent/deviceManager/comment/pointTabel/WorkFacePointTable.vue
  78. 13 0
      src/views/vent/home/colliery/clique.api.ts
  79. 86 0
      src/views/vent/home/colliery/clique.data.ts
  80. 346 0
      src/views/vent/home/colliery/components/EchartLineCharacter3.vue
  81. 213 0
      src/views/vent/home/colliery/components/device-warn.vue
  82. 389 0
      src/views/vent/home/colliery/components/fan-monitor.vue
  83. 396 0
      src/views/vent/home/colliery/components/main-monitor.vue
  84. 269 0
      src/views/vent/home/colliery/components/wind-device.vue
  85. 451 0
      src/views/vent/home/colliery/components/wind-line.vue
  86. 259 0
      src/views/vent/home/colliery/components/wind-monitor.vue
  87. 387 0
      src/views/vent/home/colliery/components/work-monitor.vue
  88. 448 78
      src/views/vent/home/colliery/index.vue
  89. 3 7
      src/views/vent/monitorManager/beltTunMonitor/components/beltTunGasHome.vue
  90. 3 6
      src/views/vent/monitorManager/beltTunMonitor/components/beltTunHome.vue
  91. 10 0
      src/views/vent/monitorManager/camera/camera.api.ts
  92. 1 1
      src/views/vent/monitorManager/comment/less/workFace.less
  93. 0 1
      src/views/vent/monitorManager/compressor/index.vue
  94. 0 1
      src/views/vent/monitorManager/deviceMonitor/components/device/index.vue
  95. 0 1
      src/views/vent/monitorManager/deviceMonitor/index.vue
  96. 3 6
      src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceGasHome.vue
  97. 3 6
      src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceHome.vue
  98. 3 6
      src/views/vent/monitorManager/workFaceMonitor/components/workFaceGasHome.vue
  99. 3 6
      src/views/vent/monitorManager/workFaceMonitor/components/workFaceHome.vue
  100. 4 6
      src/views/vent/performance/fileDetail/index.vue

+ 7 - 0
build/vite/plugin/index.ts

@@ -19,6 +19,7 @@ import OptimizationPersist from 'vite-plugin-optimize-persist';
 import PkgConfig from 'vite-plugin-package-config';
 import { resolve } from 'path';
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import topLevelAwait from 'vite-plugin-top-level-await';
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
@@ -43,6 +44,12 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
       svgoOptions: false,
       customDomId: '__webtopo__svgpreview__icons__dom__',
     }),
+    topLevelAwait({
+      // The export name of top-level await promise for each chunk module
+      promiseExportName: '__tla',
+      // The function to generate import names of top-level await promise in each chunk module
+      promiseImportName: i => `__tla_${i}`
+    })
   ];
 
   // vite-plugin-windicss

+ 7 - 3
index.html

@@ -16,7 +16,7 @@
     <script src="/js/adapter.min.js"></script>
     <script type="text/javascript" src="http://182.92.126.35:9050/web-apps/apps/api/documents/api.js"></script>
   </head>
-  <body style="background-color: #09172C">
+  <body>
     <script>
       (() => {
         var htmlRoot = document.getElementById('htmlRoot');
@@ -27,8 +27,9 @@
         }
       })();
     </script>
+    
     <div id="app">
-      <style>
+      <style lang="less">
         html[data-theme='dark'] .app-loading {
           background-color: #2c344a;
         }
@@ -36,6 +37,9 @@
         html[data-theme='dark'] .app-loading .app-loading-title {
           color: rgba(255, 255, 255, 0.85);
         }
+        body{
+          background-color: var(--vent-base-color)
+        }
         .app-loading {
           display: flex;
           width: 100%;
@@ -47,7 +51,7 @@
           background-image: url('./src/assets/images/vent/loading-bg.png');
           background-size: cover;
           background-repeat: no-repeat;
-          background-color: #09172C;
+          background-color: var(--vent-base-color);
         }
 
         .app-loading .app-loading-wrap {

+ 1 - 0
package.json

@@ -183,6 +183,7 @@
     "vite-plugin-pwa": "^0.12.3",
     "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-top-level-await": "^1.3.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vite-plugin-windicss": "^1.8.7",
     "vue-eslint-parser": "^8.3.0",

+ 160 - 0
pnpm-lock.yaml

@@ -137,6 +137,7 @@ specifiers:
   vite-plugin-style-import: ^2.0.0
   vite-plugin-svg-icons: ^2.0.1
   vite-plugin-theme: ^0.8.6
+  vite-plugin-top-level-await: ^1.3.1
   vite-plugin-vue-setup-extend: ^0.4.0
   vite-plugin-windicss: ^1.8.7
   vue: ^3.2.33
@@ -307,6 +308,7 @@ devDependencies:
   vite-plugin-pwa: 0.12.8_x7bmrdf5vv7jofix4vzvx6ucm4
   vite-plugin-style-import: 2.0.0_vite@3.2.5
   vite-plugin-svg-icons: 2.0.1_vite@3.2.5
+  vite-plugin-top-level-await: 1.3.1_rollup@2.79.1+vite@3.2.5
   vite-plugin-vue-setup-extend: 0.4.0_vite@3.2.5
   vite-plugin-windicss: 1.8.8_vite@3.2.5
   vue-eslint-parser: 8.3.0_eslint@8.29.0
@@ -2669,6 +2671,18 @@ packages:
       rollup: 2.79.1
     dev: true
 
+  /@rollup/plugin-virtual/3.0.2_rollup@2.79.1:
+    resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      rollup: 2.79.1
+    dev: true
+
   /@rollup/pluginutils/3.1.0_rollup@2.79.1:
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
@@ -2740,6 +2754,133 @@ packages:
       string.prototype.matchall: 4.0.8
     dev: true
 
+  /@swc/core-darwin-arm64/1.3.95:
+    resolution: {integrity: sha512-VAuBAP3MNetO/yBIBzvorUXq7lUBwhfpJxYViSxyluMwtoQDhE/XWN598TWMwMl1ZuImb56d7eUsuFdjgY7pJw==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-darwin-x64/1.3.95:
+    resolution: {integrity: sha512-20vF2rvUsN98zGLZc+dsEdHvLoCuiYq/1B+TDeE4oolgTFDmI1jKO+m44PzWjYtKGU9QR95sZ6r/uec0QC5O4Q==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-arm-gnueabihf/1.3.95:
+    resolution: {integrity: sha512-oEudEM8PST1MRNGs+zu0cx5i9uP8TsLE4/L9HHrS07Ck0RJ3DCj3O2fU832nmLe2QxnAGPwBpSO9FntLfOiWEQ==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-arm64-gnu/1.3.95:
+    resolution: {integrity: sha512-pIhFI+cuC1aYg+0NAPxwT/VRb32f2ia8oGxUjQR6aJg65gLkUYQzdwuUmpMtFR2WVf7WVFYxUnjo4UyMuyh3ng==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-arm64-musl/1.3.95:
+    resolution: {integrity: sha512-ZpbTr+QZDT4OPJfjPAmScqdKKaT+wGurvMU5AhxLaf85DuL8HwUwwlL0n1oLieLc47DwIJEMuKQkYhXMqmJHlg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-x64-gnu/1.3.95:
+    resolution: {integrity: sha512-n9SuHEFtdfSJ+sHdNXNRuIOVprB8nbsz+08apKfdo4lEKq6IIPBBAk5kVhPhkjmg2dFVHVo4Tr/OHXM1tzWCCw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-x64-musl/1.3.95:
+    resolution: {integrity: sha512-L1JrVlsXU3LC0WwmVnMK9HrOT2uhHahAoPNMJnZQpc18a0paO9fqifPG8M/HjNRffMUXR199G/phJsf326UvVg==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-win32-arm64-msvc/1.3.95:
+    resolution: {integrity: sha512-YaP4x/aZbUyNdqCBpC2zL8b8n58MEpOUpmOIZK6G1SxGi+2ENht7gs7+iXpWPc0sy7X3YPKmSWMAuui0h8lgAA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-win32-ia32-msvc/1.3.95:
+    resolution: {integrity: sha512-w0u3HI916zT4BC/57gOd+AwAEjXeUlQbGJ9H4p/gzs1zkSHtoDQghVUNy3n/ZKp9KFod/95cA8mbVF9t1+6epQ==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-win32-x64-msvc/1.3.95:
+    resolution: {integrity: sha512-5RGnMt0S6gg4Gc6QtPUJ3Qs9Un4sKqccEzgH/tj7V/DVTJwKdnBKxFZfgQ34OR2Zpz7zGOn889xwsFVXspVWNA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core/1.3.95:
+    resolution: {integrity: sha512-PMrNeuqIusq9DPDooV3FfNEbZuTu5jKAc04N3Hm6Uk2Fl49cqElLFQ4xvl4qDmVDz97n3n/C1RE0/f6WyGPEiA==}
+    engines: {node: '>=10'}
+    requiresBuild: true
+    peerDependencies:
+      '@swc/helpers': ^0.5.0
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+    dependencies:
+      '@swc/counter': 0.1.2
+      '@swc/types': 0.1.5
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.3.95
+      '@swc/core-darwin-x64': 1.3.95
+      '@swc/core-linux-arm-gnueabihf': 1.3.95
+      '@swc/core-linux-arm64-gnu': 1.3.95
+      '@swc/core-linux-arm64-musl': 1.3.95
+      '@swc/core-linux-x64-gnu': 1.3.95
+      '@swc/core-linux-x64-musl': 1.3.95
+      '@swc/core-win32-arm64-msvc': 1.3.95
+      '@swc/core-win32-ia32-msvc': 1.3.95
+      '@swc/core-win32-x64-msvc': 1.3.95
+    dev: true
+
+  /@swc/counter/0.1.2:
+    resolution: {integrity: sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==}
+    dev: true
+
+  /@swc/types/0.1.5:
+    resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==}
+    dev: true
+
   /@tootallnate/once/1.1.2:
     resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
     engines: {node: '>= 6'}
@@ -12362,6 +12503,11 @@ packages:
     hasBin: true
     dev: true
 
+  /uuid/9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+    dev: true
+
   /v8-compile-cache-lib/3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
     dev: true
@@ -12611,6 +12757,20 @@ packages:
       - supports-color
     dev: false
 
+  /vite-plugin-top-level-await/1.3.1_rollup@2.79.1+vite@3.2.5:
+    resolution: {integrity: sha512-55M1h4NAwkrpxPNOJIBzKZFihqLUzIgnElLSmPNPMR2Fn9+JHKaNg3sVX1Fq+VgvuBksQYxiD3OnwQAUu7kaPQ==}
+    peerDependencies:
+      vite: '>=2.8'
+    dependencies:
+      '@rollup/plugin-virtual': 3.0.2_rollup@2.79.1
+      '@swc/core': 1.3.95
+      uuid: 9.0.1
+      vite: 3.2.5_57ocsrwjvekxd6jheajt4uyjba
+    transitivePeerDependencies:
+      - '@swc/helpers'
+      - rollup
+    dev: true
+
   /vite-plugin-vue-setup-extend/0.4.0_vite@3.2.5:
     resolution: {integrity: sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==}
     peerDependencies:

BIN
src/assets/images/home-container/device/ccq.png


BIN
src/assets/images/home-container/device/cf.png


BIN
src/assets/images/home-container/device/fc.png


BIN
src/assets/images/home-container/device/fm.png


BIN
src/assets/images/home-container/device/js.png


BIN
src/assets/images/home-container/device/penfen.png


BIN
src/assets/images/home-container/device/penlin.png


BIN
src/assets/images/home-container/device/pw.png


BIN
src/assets/images/home-container/device/wasibeng.png


BIN
src/assets/images/home-container/device/yafeng.png


BIN
src/assets/images/home-container/device/zhudan.png


BIN
src/assets/images/home-container/device/zhujiang.png


BIN
src/assets/images/home-container/device/zhushan.png


BIN
src/assets/images/home-container/dialog.png


BIN
src/assets/images/home-container/dialog1.png


BIN
src/assets/images/home-container/header-nav.png


BIN
src/assets/images/home-container/home-bg.png


+ 14 - 0
src/assets/images/home-container/internet-bad.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.669" height="18.669" viewBox="0 0 18.669 18.669">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#36c7ff"/>
+      <stop offset="1" stop-color="#c2eeff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14251" data-name="组 14251" transform="translate(-0.025 0.443)">
+    <g id="组_14269" data-name="组 14269" transform="translate(-3.195 -0.664)">
+      <path id="椭圆_2488" data-name="椭圆 2488" d="M8.835-.5A9.335,9.335,0,1,1-.5,8.835,9.345,9.345,0,0,1,8.835-.5Zm0,17.669A8.335,8.335,0,1,0,.5,8.835,8.344,8.344,0,0,0,8.835,17.169Z" transform="translate(3.721 0.72)" fill="url(#linear-gradient)"/>
+      <path id="路径_55148" data-name="路径 55148" d="M4.164,6.387,2.106,8.447a1.489,1.489,0,0,1-2.1,0l-.023-.023a1.489,1.489,0,0,1,0-2.1L2.043,4.266a1.489,1.489,0,0,1,2.1,0l.023.023a1.487,1.487,0,0,1,0,2.1ZM8.746,1.8,6.688,3.864a1.489,1.489,0,0,1-2.1,0l-.023-.023a1.489,1.489,0,0,1,0-2.1L6.624-.317a1.489,1.489,0,0,1,2.1,0l.023.023a1.487,1.487,0,0,1,0,2.1ZM3.764,3.165,3.773.92,2.862.61Zm-.6.15L1.208,2.564l.451.9Zm1.8,1.362.305,2.259.6-.766Zm.3.15,1.8,1.043-.451-.9ZM3.012,2.714,2.261,1.662l-.15.752Z" transform="translate(8.191 5.491)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

BIN
src/assets/images/home-container/item-value.png


BIN
src/assets/images/home-container/line-val.png


BIN
src/assets/images/home-container/pie.png


BIN
src/assets/images/home-container/three-dialog.png


BIN
src/assets/images/home-container/three-nav.png


BIN
src/assets/images/home-container/tobig.png


File diff suppressed because it is too large
+ 7 - 0
src/assets/images/home-container/toggle.svg


BIN
src/assets/images/home-container/warn-icon.png


BIN
src/assets/images/home-container/warn-icon1.png


BIN
src/assets/images/home-container/warn-icon2.png


BIN
src/assets/images/home-container/warn-icon3.png


BIN
src/assets/images/home-container/warn1.png


BIN
src/assets/images/home-container/warn7.png


BIN
src/assets/images/home-container/warn8.png


BIN
src/assets/images/home-container/wind-door.gif


BIN
src/assets/images/home-container/wind-window.gif


BIN
src/assets/images/home-container/work-bd.png


BIN
src/assets/images/home-container/左下菜单按钮.png


BIN
src/assets/images/home-container/背景图.png - 快捷方式.lnk


BIN
src/assets/images/home-container/视频上方数据框.png


+ 22 - 0
src/assets/images/home-container/运行风机图标.svg

@@ -0,0 +1,22 @@
+<svg id="组_14254" data-name="组 14254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.195" height="18.195" viewBox="0 0 18.195 18.195">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#36c7ff"/>
+      <stop offset="1" stop-color="#c2eeff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_12385" data-name="组 12385">
+    <g id="组_9332" data-name="组 9332">
+      <g id="图层_2" data-name="图层 2">
+        <g id="图层_1" data-name="图层 1">
+          <g id="组_12446" data-name="组 12446">
+            <g id="组_12442" data-name="组 12442">
+              <path id="路径_55231" data-name="路径 55231" d="M9.1,18.2a9.1,9.1,0,1,1,9.1-9.1,9.124,9.124,0,0,1-9.1,9.1ZM9.1.91A8.188,8.188,0,1,0,17.285,9.1,8.154,8.154,0,0,0,9.1.91Z" fill="url(#linear-gradient)"/>
+              <path id="路径_55232" data-name="路径 55232" d="M334.929,244.545s-7.506-4.208-7.619-4.208c-.682-.227-.91.341-.91.8h0s0,8.3.114,8.3c.227.569.8.569,1.251.341h0s6.937-3.98,7.051-4.094c.341-.227.682-.682.114-1.137Z" transform="translate(-320.6 -236.016)" fill="url(#linear-gradient)"/>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

+ 2 - 1
src/components/Application/src/AppLogo.vue

@@ -50,7 +50,8 @@
   ]);
 
   function goHome() {
-    go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
+    const glob = useGlobSetting();
+    go(glob.homePath || PageEnum.BASE_HOME);
   }
 </script>
 <style lang="less" scoped>

+ 1 - 1
src/components/Form/src/BasicForm.vue

@@ -370,6 +370,6 @@
   :deep(.@{ventSpace}-select-dropdown) {
     left: 0px !important;
     top: 34px !important;
-    background: transparent !important;
+    background: #ffffff !important;
   }
 </style>

+ 15 - 1
src/design/color.less

@@ -3,11 +3,25 @@ html {
   --header-bg-color: #394664;
   --header-bg-hover-color: #273352;
   --header-active-menu-bg-color: #273352;
-
+  
   // sider
   --sider-dark-bg-color: #273352;
   --sider-dark-darken-bg-color: #273352;
   --sider-dark-lighten-bg-color: #273352;
+  
+  --vent-header-bg-color: linear-gradient(#005177, #0a344c);
+  --vent-base-color: #09172c;
+  --vent-btn-primary-border-color: #56b3c96b;
+  --vent-btn-primary-color: #1c638a;
+  --vent-btn-primary-focus-color: #1c638a99;
+  --vent-btn-primary-hover-color: #389bd9;
+
+  // --vent-btn-primary-border-color: #5675c96b;
+  // --vent-btn-primary-color: #2442b1;
+  // --vent-btn-primary-focus-color: #1c3f8a99;
+  // --vent-btn-primary-hover-color: #1c40a1;
+  // --header-bg-color: linear-gradient(#001c77, #001a6a) !important;
+  // --vent-base-color: #003c8f;
 }
 
 @white: #fff;

+ 1 - 0
src/design/index.less

@@ -4,6 +4,7 @@
 @import 'ant/index.less';
 @import './theme.less';
 @import 'vent/index.less';
+@import './color.less';
 
 input:-webkit-autofill,
 

+ 2 - 2
src/design/vent/color.less

@@ -5,8 +5,8 @@
 // @vent-table-no-hover: #00bfff10;
 // @vent-form-item-boder: #3ad8ff77;
 // @ventSpace: zxm;
-@vent-base-color: #09172c;
-// @vent-base-color: #003c8f;
+// @vent-base-color: #09172c;
+@vent-base-color: #297fff;
 @vent-transparent: #ffffff00;
 @vent-font-color: #ffffff;
 @vent-table-hover: #ffffff22;

+ 13 - 13
src/design/vent/index.less

@@ -4,18 +4,21 @@
 @import './comment.less';
 
 .vent {
-  background-color: @vent-base-color !important;
+  background-color: var(--vent-base-color) !important;
 }
 
 
 /* 按钮 */
 .@{ventSpace}-btn-primary {
-  border-color: #56b3c96b !important;
-  background: #1c638a !important;
-  &:hover,
+  border-color: var(--vent-btn-primary-border-color) !important;
+  background: var(--vent-btn-primary-color) !important;
+  &:hover {
+    background: var(--vent-btn-primary-focus-color) !important;
+    border-color: var(--vent-btn-primary-border-color) !important;
+  }
   &:focus {
-    background: #1c638a99 !important;
-    border-color: #56b3c96b !important;
+    background: var(--vent-btn-primary-focus-color) !important;
+    border-color: var(--vent-btn-primary-border-color) !important;
   }
 }
 .@{ventSpace}-btn-dangerous{
@@ -144,20 +147,17 @@
       // border-bottom: 1px solid #ececec66;
       // background: transparent !important;
       border: 1px solid #ececec66;
-      background: #004362 !important;
+      background: #ffffff !important;
       // left: 0px !important;
       backdrop-filter: blur(50px);
 
-      .@{ventSpace}-select-item {
-        color: #fff !important;
-      }
-
       .@{ventSpace}-select-item-option-selected,
       .@{ventSpace}-select-item-option-active {
-        background-color: #00678b66 !important;
+        background-color: #ffffff33 !important;
       }
+    
       .@{ventSpace}-select-item:hover {
-        background-color: #008fc366 !important;
+        background-color: #ffffff33 !important;
       }
     }
     .@{ventSpace}-picker-panel{

+ 1 - 1
src/design/vent/modal.less

@@ -14,7 +14,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    background: @vent-base-color;
+    background: var(--vent-base-color);
   }
   .elementTag{
     pointer-events: none !important;

+ 46 - 22
src/hooks/setting/index.ts

@@ -1,37 +1,60 @@
 import type { GlobConfig } from '/#/config';
 
-import { getAppEnvConfig } from '/@/utils/env';
+import { getAppEnvConfig, getHomePath } from '/@/utils/env';
 // 读取ip地址
 let domainUrl = '',
   logoUrl = '',
+  homePath = '',
   title = '';
 
 const getUrl = () => {
-  fetch(VUE_APP_URL.baseUrl + '/ventanaly-device/safety/orgParams/queryDefault', {
-    method: 'GET',
-    cache: 'no-cache',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-    },
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      title = data.result && data.result['systemTitle'] ? data.result['systemTitle'] : '';
-      logoUrl = data.result && data.result['logoIcon'] ? data.result['logoIcon'] : '';
+  return new Promise((resolve, reject) => {
+    try {
+      fetch(VUE_APP_URL.baseUrl + '/ventanaly-device/safety/orgParams/queryDefault', {
+        method: 'GET',
+        cache: 'no-cache',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          debugger;
+          if (data.result) {
+            title = data.result['systemTitle'] ? data.result['systemTitle'] : '';
+            logoUrl = data.result['logoIcon'] ? data.result['logoIcon'] : '';
+            const homePathKey = data.result['defaultTheme'] ? data.result['defaultTheme'] : '';
+            homePath = getHomePath(homePathKey);
+            const faviconIcon = document.getElementById('faviconIcon');
+            if (faviconIcon) {
+              faviconIcon.setAttribute('href', `${VUE_APP_URL.baseUrl}/sys/common/static/${logoUrl}`);
+            }
+            resolve(null);
+          } else {
+            reject();
+          }
+        });
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
 
-      const faviconIcon = document.getElementById('faviconIcon');
-      if (faviconIcon) {
-        faviconIcon.setAttribute('href', `${VUE_APP_URL.baseUrl}/sys/common/static/${logoUrl}`);
-      }
-    });
+export async function getRemoteSetting(){
+  debugger
+  if (!title) {
+    try {
+      await getUrl();
+    } catch (error) {}
+  }
 };
-if (!title) {
-  try {
-    getUrl();
-  } catch (error) {}
-}
 
 export const useGlobSetting = (): Readonly<GlobConfig> => {
+  if (!title) {
+    try {
+      getUrl();
+    } catch (error) {}
+  }
   const {
     VITE_GLOB_APP_TITLE,
     VITE_GLOB_API_URL,
@@ -69,6 +92,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     uploadUrl: domainUrl,
     viewUrl: VITE_GLOB_ONLINE_VIEW_URL,
     modalUrlArr: VITE_3D_MODAL_ARR,
+    homePath: homePath,
   };
   return glob as Readonly<GlobConfig>;
 };

+ 4 - 1
src/hooks/web/usePage.ts

@@ -7,6 +7,8 @@ import { unref } from 'vue';
 import { useRouter } from 'vue-router';
 import { REDIRECT_NAME } from '/@/router/constant';
 
+import { useGlobSetting } from '/@/hooks/setting';
+
 export type RouteLocationRawEx = Omit<RouteLocationRaw, 'path'> & { path: PageEnum };
 
 function handleError(e: Error) {
@@ -15,12 +17,13 @@ function handleError(e: Error) {
 
 // page switch
 export function useGo(_router?: Router) {
+  const glob = useGlobSetting();
   let router;
   if (!_router) {
     router = useRouter();
   }
   const { push, replace } = _router || router;
-  function go(opt: PageEnum | RouteLocationRawEx | string = PageEnum.BASE_HOME, isReplace = false) {
+  function go(opt: PageEnum | RouteLocationRawEx | string = glob.homePath || PageEnum.BASE_HOME, isReplace = false) {
     if (!opt) {
       return;
     }

+ 5 - 4
src/layouts/default/content/index.vue

@@ -11,7 +11,7 @@
         </div>
       </div>
     </div>
-    <div id="content" class="app-view-box" v-show="openQianKun == 'true' && currentRoute.path.startsWith('/micro-')" :style="{top: getShowFullHeader ? 0 : '48px'}"> </div>
+    <div id="content" class="app-view-box" v-show="openQianKun == 'true' && currentRoute.path.startsWith('/micro-') && !noContentLink.includes(currentRoute.path)" :style="{top: getShowFullHeader ? 0 : '48px'}"> </div>
     <!-- update-end-author:zyf date:20211129 for: qiankun 挂载子应用盒子-->
   </div>
 </template>
@@ -28,6 +28,7 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import { getActions } from '/@/qiankun/state';
   import { nextTick } from 'vue';
+  import { noContentLink } from '../layout.data'
 
   export default defineComponent({
     name: 'LayoutContent',
@@ -58,7 +59,6 @@
         });
       }
       useContentViewHeight();
-
       const resetContent = () => {
         const contentDom = document.getElementById('content')
         if(contentDom && contentDom.firstChild){
@@ -102,7 +102,8 @@
         getPageLoading,
         getShowFullHeader,
         loading,
-        currentRoute
+        currentRoute,
+        noContentLink
       };
     },
   });
@@ -153,7 +154,7 @@
     background-image: url('/@/assets/images/vent/loading-bg.png');
     background-size: cover;
     background-repeat: no-repeat;
-    background-color: @vent-base-color;
+    background-color: var(--vent-base-color);
   }
 
   .app-loading .app-loading-wrap {

+ 66 - 0
src/layouts/default/header/components/user-dropdown/UpdateHome.vue

@@ -0,0 +1,66 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="切换风格" @ok="handleSubmit" width="600px">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import { ref, unref, defineExpose } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { useMessage } from '/@/hooks/web/useMessage';
+// 声明Emits
+const emit = defineEmits(['register']);
+const $message = useMessage();
+const formRef = ref();
+//表单配置
+const [registerForm, { validate }] = useForm({
+  schemas: [
+    {
+      label: '页面风格',
+      field: 'pageType',
+      component: 'RadioGroup',
+      defaultValue: 1,
+      componentProps: {
+        options: [
+          {
+            label: '6.0',
+            value: 1,
+          },
+          {
+            label: '5.5',
+            value: 0,
+          },
+        ],
+      },
+    },
+  ],
+  showActionButtonGroup: false,
+});
+//表单赋值
+const [registerModal, { setModalProps, closeModal }] = useModalInner();
+
+//表单提交事件
+async function handleSubmit() {
+  try {
+    const values = await validate();
+    setModalProps({ confirmLoading: true });
+    //设置页面风格
+    if(values['pageType'] == 1){
+      // 6.0页面
+    }else if(values['pageType'] == 0) {
+      // 5.5页面
+    }
+    closeModal();
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+
+async function show() {
+  await setModalProps({ visible: true });
+}
+
+defineExpose({
+  show,
+});
+</script>

+ 15 - 3
src/layouts/default/header/components/user-dropdown/index.vue

@@ -11,9 +11,10 @@
 
     <template #overlay>
       <Menu @click="handleMenuClick">
-        <MenuItem key="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" />
-        <MenuDivider v-if="getShowDoc" />
-        <MenuItem key="account" :text="t('layout.header.dropdownItemSwitchAccount')" icon="ant-design:setting-outlined" />
+        <!-- <MenuItem key="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" />
+        <MenuDivider v-if="getShowDoc" /> -->
+        <!-- <MenuItem key="account" :text="t('layout.header.dropdownItemSwitchAccount')" icon="ant-design:setting-outlined" /> -->
+        <!-- <MenuItem key="home" :text="t('layout.header.dropdownItemSwitchHome')" icon="ant-design:edit-outlined" /> -->
         <MenuItem key="password" :text="t('layout.header.dropdownItemSwitchPassword')" icon="ant-design:edit-outlined" />
         <MenuItem key="depart" :text="t('layout.header.dropdownItemSwitchDepart')" icon="ant-design:cluster-outlined" />
         <MenuItem key="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline" />
@@ -30,6 +31,7 @@
   <LockAction @register="register" />
   <DepartSelect ref="loginSelectRef" />
   <UpdatePassword ref="updatePasswordRef" />
+  <!-- <UpdateHome ref="updateHomeRef" /> -->
 </template>
 <script lang="ts">
   // components
@@ -69,6 +71,7 @@
       LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
       DepartSelect: createAsyncComponent(() => import('./DepartSelect.vue')),
       UpdatePassword: createAsyncComponent(() => import('./UpdatePassword.vue')),
+      UpdateHome: createAsyncComponent(() => import('./UpdateHome.vue')),
     },
     props: {
       theme: propTypes.oneOf(['dark', 'light']),
@@ -136,6 +139,11 @@
         updatePasswordRef.value.show(userStore.getUserInfo.username);
       }
 
+      const updateHomeRef = ref();
+      function updateHome() {
+        updateHomeRef.value.show();
+      }
+
       function handleMenuClick(e: { key: MenuEvent }) {
         switch (e.key) {
           case 'logout':
@@ -159,6 +167,9 @@
           case 'account':
             go(`/page-demo/account/setting`);
             break;
+          case 'home':
+            updateHome()
+            break;
         }
       }
 
@@ -173,6 +184,7 @@
         getUseLockPage,
         loginSelectRef,
         updatePasswordRef,
+        updateHomeRef
       };
     },
   });

+ 2 - 1
src/layouts/default/header/index.less

@@ -184,7 +184,8 @@
 
     // background: linear-gradient(#02050c 0%, #03114c 100%);
     // border: none;
-    background: linear-gradient(#005177, #0a344c);
+    background: var(--vent-header-bg-color);
+    // background: linear-gradient(#005177, #0a344c);
     border-bottom: 1px solid #81aabf01;
     padding-bottom: 2px;
     box-shadow: 0 0 20px #44caff55 inset;

+ 7 - 3
src/layouts/default/header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Header v-if="!getShowFullHeader || (currentRoute.path.startsWith('/micro-vent-3dModal/modelchannel/') && !currentRoute.path.endsWith('home')) " 
+  <Header v-if="!getShowFullHeader || (currentRoute.path.startsWith('/micro-vent-3dModal/modelchannel/') && !noHeadeLink.includes(currentRoute.path)  && !currentRoute.path.endsWith('home')) " 
     :class="[...getHeaderClass, { 'vent-header': currentRoute.path.startsWith('/monitorChannel/monitor-'), 'normal-header': !currentRoute.path.startsWith('/monitorChannel/monitor-'), 'no-header': currentRoute.path.endsWith('home') }]">
     <!-- left start -->
     <div :class="`${prefixCls}-left`">
@@ -38,7 +38,7 @@
       </div>
     </div>
   </Header>
-  <div v-if="currentRoute.path.endsWith('home') || currentRoute.path.startsWith('micro-need-air')" :class="`${prefixCls}-action`"  style="position: fixed; top: 30px; right: 20px; z-index: 999;">
+  <div v-else :class="`${prefixCls}-action`"  style="position: fixed; top: 30px; right: 20px; z-index: 999;">
     <div class="right-position">
       <UserDropDown :theme="getHeaderTheme" />
     </div>
@@ -76,6 +76,8 @@
   import { useUserStore } from '/@/store/modules/user';
   import { useRouter } from 'vue-router';
 
+  import { noHeadeLink } from '../layout.data'
+
   export default defineComponent({
     name: 'LayoutHeader',
     components: {
@@ -224,6 +226,7 @@
         currentRoute,
         title,
         getShowFullHeader,
+        noHeadeLink
       };
     },
   });
@@ -271,7 +274,8 @@
   .normal-header{
     height: 52px !important;
     line-height: 52px !important;
-    background: linear-gradient(#005177,#0a344c) !important;
+    background: var(--vent-header-bg-color) !important;
+    // background: linear-gradient(#005177,#0a344c) !important;
     border-bottom: 1px solid #81aabf01 !important;
     padding-bottom: 2px !important;
     box-shadow: 0 0 20px #44caff55 inset !important;

+ 21 - 0
src/layouts/default/layout.data.ts

@@ -0,0 +1,21 @@
+export const noHeadeLink = ['/micro-vent-3dModal/dashboard/analysis', '/micro-vent-3dModal/modelchannel/model3D'];
+export const noContentLink = ['/micro-vent-3dModal/modelchannel/model3D'];
+export const ThemeModel = {
+  theme5_5: {
+    'vent-base-color': '#022d6a',
+    // 'header-bg-color': 'linear-gradient(#001c77, #001a6a) !important',
+    'vent-header-bg-color': 'linear-gradient(#004377, #00266a)',
+    'vent-btn-primary-hover-color': '#1c40a1',
+    'vent-btn-primary-focus-color': '#2473b199',
+    'vent-btn-primary-color': '#2473b1',
+    'vent-btn-primary-border-color': '#5675c96b',
+  },
+  theme6_0: {
+    'vent-base-color': '#09172c',
+    'vent-header-bg-color': 'linear-gradient(#005177, #0a344c)',
+    'vent-btn-primary-hover-color': '#389bd9',
+    'vent-btn-primary-focus-color': '#1c638a99',
+    'vent-btn-primary-color': '#1c638a',
+    'vent-btn-primary-border-color': '#56b3c96b',
+  },
+};

+ 9 - 18
src/layouts/default/sider/bottomSideder.vue

@@ -64,6 +64,8 @@
   import { useGo } from '/@/hooks/web/usePage';
   import { useRouter } from 'vue-router';
   import { getActions } from '/@/qiankun/state';
+  import { PageEnum } from '/@/enums/pageEnum';
+  import { useGlobSetting } from '/@/hooks/setting';
 
   export default defineComponent({
     name: 'BottomSider',
@@ -77,26 +79,16 @@
       const { currentRoute } = router;
       const route = unref(currentRoute);
       const go = useGo();
+      const glob = useGlobSetting();
+
       function selectMenu(programMenu) {
         currentParentRoute.value = programMenu;
       }
 
       function handleMenuClick(path: Menu) {
         if (route.path.startsWith('/micro-')) { 
-          if (route.path.startsWith('/micro-vent-3dModal/dashboard/analysis')){
-            
-            // if(!path.path.startsWith('/micro-vent-3dModal/dashboard/analysis')){
-            //   // window.open(href, '_blank')
-            //   router.replace(path.path)
-            // }else{
-            //   const { query } = router.resolve(path.path)
-            //   if(query){
-            //     const { type, deviceType } = query
-            //     if(type && deviceType)actions.setGlobalState({ pageObj: { pageType: type, deviceType } });
-            //   }
-            //   go(path.path);
-            // }
-            if (!path.path.startsWith('/micro-vent-3dModal/dashboard/analysis')) {
+          if (route.path.startsWith(glob.homePath || PageEnum.BASE_HOME)){
+            if (!path.path.startsWith(glob.homePath || PageEnum.BASE_HOME)) {
               // const { href } = router.resolve(path.path)
               // window.open(href, '_blank')
               router.replace(path.path)
@@ -110,7 +102,6 @@
             }
           }else {
             actions.setGlobalState({ pageObj: { pageType: 'home' } });
-            // history.pushState({}, '', path.path);
             go(path.path);
           }
         } else {
@@ -126,11 +117,11 @@
       }
       function geHome() {
         isShowMenu.value = 0;
-        if(route.path == '/micro-vent-3dModal/dashboard/analysis'){
+        if(route.path == glob.homePath || PageEnum.BASE_HOME){
           actions.setGlobalState({ pageObj: { pageType: 'home' } });
-          go('/micro-vent-3dModal/dashboard/analysis')
+          go(glob.homePath || PageEnum.BASE_HOME)
         }else{
-          go('/micro-vent-3dModal/dashboard/analysis')
+          go(glob.homePath || PageEnum.BASE_HOME)
         }
       }
       function closeMenu() {

+ 1 - 0
src/locales/lang/zh-CN/layout.ts

@@ -5,6 +5,7 @@ export default {
     dropdownItemDoc: '官网',
     dropdownItemLoginOut: '退出系统',
     dropdownItemSwitchPassword: '密码修改',
+    // dropdownItemSwitchHome: '切换风格',
     dropdownItemSwitchDepart: '切换部门',
     dropdownItemRefreshCache: '刷新缓存',
     dropdownItemSwitchAccount: '账户设置',

+ 1 - 0
src/logics/initAppConfig.ts

@@ -22,6 +22,7 @@ import { Persistent } from '/@/utils/cache/persistent';
 import { deepMerge } from '/@/utils';
 import { ThemeEnum } from '/@/enums/appEnum';
 
+
 // Initial project configuration
 export function initAppConfigStore() {
   const localeStore = useLocaleStore();

+ 1 - 1
src/logics/theme/updateBackground.ts

@@ -3,7 +3,7 @@ import { useAppStore } from '/@/store/modules/app';
 import { ThemeEnum } from '/@/enums/appEnum';
 import { setCssVar } from './util';
 
-const HEADER_BG_COLOR_VAR = '--header-bg-color';
+const HEADER_BG_COLOR_VAR = '--vent-header-bg-color';
 const HEADER_BG_HOVER_COLOR_VAR = '--header-bg-hover-color';
 const HEADER_MENU_ACTIVE_BG_COLOR_VAR = '--header-active-menu-bg-color';
 

+ 5 - 0
src/main.ts

@@ -10,8 +10,10 @@ import 'virtual:windi-utilities.css';
 import 'virtual:windi-devtools';
 // 注册图标
 import 'virtual:svg-icons-register';
+
 import App from './App.vue';
 import { createApp } from 'vue';
+import { getRemoteSetting } from '/@/hooks/setting';
 import { initAppConfigStore } from '/@/logics/initAppConfig';
 import { setupErrorHandle } from '/@/logics/error-handle';
 import { router, setupRouter } from '/@/router';
@@ -31,6 +33,8 @@ if (import.meta.env.DEV) {
   import('ant-design-vue/dist/antd.less');
 }
 
+await getRemoteSetting();
+
 async function bootstrap() {
   // 创建应用实例
   const app = createApp(App);
@@ -80,6 +84,7 @@ async function bootstrap() {
     // 你的全局配置
     simulatedPassword: VENT_PARAM['simulatedPassword'],
     History_Type: History_Type['type'],
+    pageType: '',
   });
 
   // 挂载应用

+ 6 - 1
src/router/guard/index.ts

@@ -13,6 +13,9 @@ import { createStateGuard } from './stateGuard';
 import nProgress from 'nprogress';
 import projectSetting from '/@/settings/projectSetting';
 import { createParamMenuGuard } from './paramMenuGuard';
+import { RootRoute } from '/@/router/routes';
+import { useGlobSetting } from '/@/hooks/setting';
+import { PageEnum } from '/@/enums/pageEnum';
 
 // Don't change the order of creation
 export function setupRouterGuard(router: Router) {
@@ -26,12 +29,14 @@ export function setupRouterGuard(router: Router) {
   createParamMenuGuard(router); // must after createPermissionGuard (menu has been built.)
   createStateGuard(router);
 }
-
+const glob = useGlobSetting();
+RootRoute.redirect = glob.homePath || PageEnum.BASE_HOME;
 /**
  * Hooks for handling page state
  */
 function createPageGuard(router: Router) {
   const loadedPageMap = new Map<string, boolean>();
+ 
   router.beforeEach(async (to) => {
     // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
     to.meta.loaded = !!loadedPageMap.get(to.path);

+ 15 - 4
src/router/guard/permissionGuard.ts

@@ -10,6 +10,9 @@ import { PAGE_NOT_FOUND_ROUTE, QIANKUN_ROUTE } from '/@/router/routes/basic';
 import { RootRoute } from '/@/router/routes';
 
 import { isOAuth2AppEnv } from '/@/views/sys/login/useLogin';
+
+import { useGlobSetting } from '/@/hooks/setting';
+
 import _ from 'lodash';
 
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
@@ -21,19 +24,23 @@ const ROOT_PATH = RootRoute.path;
 //update-begin---author:wangshuai ---date:20220629  for:[issues/I5BG1I]vue3不支持auth2登录------------
 const whitePathList: PageEnum[] = [LOGIN_PATH, OAUTH2_LOGIN_PAGE_PATH];
 //update-end---author:wangshuai ---date:20220629  for:[issues/I5BG1I]vue3不支持auth2登录------------
+const glob = useGlobSetting();
 
 export function createPermissionGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
+
   router.beforeEach(async (to, from, next) => {
+    RootRoute.redirect = glob.homePath || PageEnum.BASE_HOME;
+
     if (_.isEmpty(history.state.current)) {
       _.assign(history.state, { current: from.fullPath });
     }
     if (
       from.path === ROOT_PATH &&
-      to.path === PageEnum.BASE_HOME &&
+      to.path === (glob.homePath || PageEnum.BASE_HOME) &&
       userStore.getUserInfo.homePath &&
-      userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
+      userStore.getUserInfo.homePath !== (glob.homePath || PageEnum.BASE_HOME)
     ) {
       next(userStore.getUserInfo.homePath);
       return;
@@ -80,7 +87,7 @@ export function createPermissionGuard(router: Router) {
           next({ path: OAUTH2_LOGIN_PAGE_PATH });
         } else {
           //在免登录白名单,直接进入
-          
+
           next();
         }
       } else {
@@ -105,7 +112,11 @@ export function createPermissionGuard(router: Router) {
       return;
     }
     // Jump to the 404 page after processing the login
-    if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_ROUTE.name && to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)) {
+    if (
+      from.path === LOGIN_PATH &&
+      to.name === PAGE_NOT_FOUND_ROUTE.name &&
+      to.fullPath !== (userStore.getUserInfo.homePath || glob.homePath || PageEnum.BASE_HOME)
+    ) {
       next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
       return;
     }

+ 11 - 0
src/router/routes/basic.ts

@@ -22,8 +22,10 @@ export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
         hideBreadcrumb: true,
         hideMenu: true,
       },
+      ver: '1',
     },
   ],
+  ver: '1',
 };
 
 export const DeviceTableRoute: AppRouteRecordRaw = {
@@ -46,8 +48,10 @@ export const DeviceTableRoute: AppRouteRecordRaw = {
         hideBreadcrumb: true,
         hideMenu: true,
       },
+      ver: '1',
     },
   ],
+  ver: '1',
 };
 
 export const QIANKUN_ROUTE: AppRouteRecordRaw = {
@@ -69,6 +73,7 @@ export const QIANKUN_ROUTE: AppRouteRecordRaw = {
         hideBreadcrumb: true,
         hideMenu: true,
       },
+      ver: '1',
     },
     {
       path: '/micro-fire-front/:path(.*)*',
@@ -79,8 +84,10 @@ export const QIANKUN_ROUTE: AppRouteRecordRaw = {
         hideBreadcrumb: true,
         hideMenu: true,
       },
+      ver: '1',
     },
   ],
+  ver: '1',
 };
 
 export const REDIRECT_ROUTE: AppRouteRecordRaw = {
@@ -101,8 +108,10 @@ export const REDIRECT_ROUTE: AppRouteRecordRaw = {
         title: REDIRECT_NAME,
         hideBreadcrumb: true,
       },
+      ver: '1',
     },
   ],
+  ver: '1',
 };
 
 export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
@@ -125,6 +134,8 @@ export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
         hideBreadcrumb: true,
         currentActiveMenu: '/error-log',
       },
+      ver: '1',
     },
   ],
+  ver: '1',
 };

+ 9 - 2
src/router/routes/index.ts

@@ -6,6 +6,7 @@ import { LAYOUT } from '/@/router/constant';
 import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
+import { useGlobSetting, getRemoteSetting } from '/@/hooks/setting';
 
 const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
 
@@ -18,15 +19,18 @@ Object.keys(modules).forEach((key) => {
   routeModuleList.push(...modList);
 });
 
+await getRemoteSetting();
+const glob = useGlobSetting();
 export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, QIANKUN_ROUTE, ...routeModuleList];
-
+debugger
 export const RootRoute: AppRouteRecordRaw = {
   path: '/',
   name: 'Root',
-  redirect: PageEnum.BASE_HOME,
+  redirect: glob.homePath || PageEnum.BASE_HOME,
   meta: {
     title: 'Root',
   },
+  ver: '1',
 };
 
 export const LoginRoute: AppRouteRecordRaw = {
@@ -36,6 +40,7 @@ export const LoginRoute: AppRouteRecordRaw = {
   meta: {
     title: t('routes.basic.login'),
   },
+  ver: '1',
 };
 
 //update-begin---author:wangshuai ---date:20220629  for:auth2登录页面路由------------
@@ -46,6 +51,7 @@ export const Oauth2LoginRoute: AppRouteRecordRaw = {
   meta: {
     title: t('routes.oauth2.login'),
   },
+  ver: '1',
 };
 //update-end---author:wangshuai ---date:20220629  for:auth2登录页面路由------------
 
@@ -60,6 +66,7 @@ export const TokenLoginRoute: AppRouteRecordRaw = {
     title: '带token登录页面',
     ignoreAuth: true,
   },
+  ver: '1',
 };
 
 // Basic routing without permission

+ 2 - 0
src/router/routes/modules/dashboard.ts

@@ -22,6 +22,7 @@ const dashboard: AppRouteModule = {
         // affix: true,
         title: t('routes.dashboard.analysis'),
       },
+      ver: '1',
     },
     {
       path: 'workbench',
@@ -30,6 +31,7 @@ const dashboard: AppRouteModule = {
       meta: {
         title: t('routes.dashboard.workbench'),
       },
+      ver: '1',
     },
   ],
 };

+ 5 - 2
src/store/modules/multipleTab.ts

@@ -20,6 +20,7 @@ export interface MultipleTabState {
   tabList: RouteLocationNormalized[];
   lastDragEndIndex: number;
 }
+import { useGlobSetting } from '/@/hooks/setting';
 
 function handleGotoPage(router: Router) {
   const go = useGo(router);
@@ -35,6 +36,7 @@ const getToTarget = (tabItem: RouteLocationNormalized) => {
 };
 
 const cacheTab = projectSetting.multiTabsSetting.cache;
+const glob = useGlobSetting();
 
 export const useMultipleTabStore = defineStore({
   id: 'app-multiple-tab',
@@ -100,11 +102,12 @@ export const useMultipleTabStore = defineStore({
       this.clearCacheTabs();
     },
     goToPage(router: Router) {
+      
       const go = useGo(router);
       const len = this.tabList.length;
       const { path } = unref(router.currentRoute);
 
-      let toPath: PageEnum | string = PageEnum.BASE_HOME;
+      let toPath: PageEnum | string = glob.homePath || PageEnum.BASE_HOME;
 
       if (len > 0) {
         const page = this.tabList[len - 1];
@@ -197,7 +200,7 @@ export const useMultipleTabStore = defineStore({
         // There is only one tab, then jump to the homepage, otherwise jump to the right tab
         if (this.tabList.length === 1) {
           const userStore = useUserStore();
-          toTarget = userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
+          toTarget = userStore.getUserInfo.homePath || glob.homePath || PageEnum.BASE_HOME;
         } else {
           //  Jump to the right tab
           const page = this.tabList[index + 1];

+ 3 - 3
src/store/modules/permission.ts

@@ -24,6 +24,7 @@ import { getPermCode } from '/@/api/sys/user';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { PageEnum } from '/@/enums/pageEnum';
 import { cloneDeep } from 'lodash-es';
+import { useGlobSetting } from '/@/hooks/setting';
 
 // 系统权限
 interface AuthItem {
@@ -157,8 +158,9 @@ export const usePermissionStore = defineStore({
        * @description 根据设置的首页path,修正routes中的affix标记(固定首页)
        * */
       const patchHomeAffix = (routes: AppRouteRecordRaw[]) => {
+        const glob = useGlobSetting();
         if (!routes || routes.length === 0) return;
-        let homePath: string = userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
+        let homePath: string = userStore.getUserInfo.homePath || glob.homePath || PageEnum.BASE_HOME;
         function patcher(routes: AppRouteRecordRaw[], parentPath = '') {
           if (parentPath) parentPath = parentPath + '/';
           routes.forEach((route: AppRouteRecordRaw) => {
@@ -227,7 +229,6 @@ export const usePermissionStore = defineStore({
             for (const menuItem of routeList) {
               // 条件1:判断组件是否是 layouts/default/index
               if (!hasIndex) {
-
                 hasIndex = menuItem.component === 'layouts/default/index' || menuItem.path === '/dashboard/analysis';
               }
               // 条件2:判断图标是否带有 冒号
@@ -264,7 +265,6 @@ export const usePermissionStore = defineStore({
           // 动态引入组件
           routeList = transformObjToRoute(routeList);
 
-
           // 构建后台路由菜单
           const backMenuList = transformRouteToMenu(routeList);
           this.setBackMenuList(backMenuList);

+ 3 - 1
src/store/modules/user.ts

@@ -19,6 +19,7 @@ import { useGlobSetting } from '/@/hooks/setting';
 import { JDragConfigEnum } from '/@/enums/jeecgEnum';
 import { useSso } from '/@/hooks/web/useSso';
 import { getActions } from '/@/qiankun/state';
+import { useGlobSetting } from '/@/hooks/setting';
 
 interface UserState {
   userInfo: Nullable<UserInfo>;
@@ -150,6 +151,7 @@ export const useUserStore = defineStore({
      * @param goHome
      */
     async afterLoginAction(goHome?: boolean, data?: any): Promise<any | null> {
+      const glob = useGlobSetting();
       if (!this.getToken) return null;
 
       //获取用户信息
@@ -172,7 +174,7 @@ export const useUserStore = defineStore({
         //update-begin-author:liusq date:2022-5-5 for:登录成功后缓存拖拽模块的接口前缀
         localStorage.setItem(JDragConfigEnum.DRAG_BASE_URL, useGlobSetting().domainUrl);
         //update-end-author:liusq date:2022-5-5 for: 登录成功后缓存拖拽模块的接口前缀
-        goHome && (await router.replace((userInfo && userInfo.homePath) || PageEnum.BASE_HOME));
+        goHome && (await router.replace((userInfo && userInfo.homePath) || glob.homePath || PageEnum.BASE_HOME));
       }
       if (useGlobSetting().openQianKun) {
         const actions = getActions();

+ 24 - 0
src/utils/env.ts

@@ -3,6 +3,7 @@ import type { GlobEnvConfig } from '/#/config';
 import { warn } from '/@/utils/log';
 import pkg from '../../package.json';
 import { getConfigFileName } from '../../build/getConfigFileName';
+import { ThemeModel } from '/@/layouts/default/layout.data';
 
 export function getCommonStoragePrefix() {
   const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
@@ -93,3 +94,26 @@ export function isDevMode(): boolean {
 export function isProdMode(): boolean {
   return import.meta.env.PROD;
 }
+
+export function getHomePath(key): string {
+  let homePath = '';
+  switch (key) {
+    case 'styleOne':
+      // 显示6.0
+      homePath = '/micro-vent-3dModal/dashboard/analysis';
+      switchTheme(ThemeModel.theme6_0);
+      break;
+    case 'styleTwo':
+      // 显示5.5
+      homePath = '/micro-vent-3dModal/modelchannel/model3D';
+      switchTheme(ThemeModel.theme5_5);
+      break;
+  }
+  return homePath;
+}
+
+function switchTheme(obj) {
+  for (let key in obj) {
+    document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key]);
+  }
+}

+ 2 - 6
src/views/vent/comment/EditRowTable.vue

@@ -265,17 +265,13 @@
     }
   }
   :deep(.@{ventSpace}-select-dropdown) {
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
-
     .@{ventSpace}-select-item-option-selected,
     .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
+      background-color: #ffffff33 !important;
     }
 
     .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
+      background-color: #ffffff33 !important;
     }
   }
 </style>

+ 2 - 6
src/views/vent/comment/components/customHeader.vue

@@ -59,17 +59,13 @@ export default defineComponent({
 @import '/@/design/vent/modal.less';
 
 .@{ventSpace}-select-dropdown {
-  .@{ventSpace}-select-item {
-    color: #fff !important;
-  }
-
   .@{ventSpace}-select-item-option-selected,
   .@{ventSpace}-select-item-option-active {
-    background-color: #00678b66 !important;
+    background-color: #ffffff33 !important;
   }
 
   .@{ventSpace}-select-item:hover {
-    background-color: #008fc366 !important;
+    background-color: #ffffff33 !important;
   }
 }
 </style>

+ 0 - 1
src/views/vent/deviceManager/comment/DeviceModal.vue

@@ -90,7 +90,6 @@
     //重置表单
     setModalProps({ confirmLoading: false });
     Object.assign(record, data.record);
-    debugger
     // 判断是否是关键阻力路线
     
   });

+ 2 - 6
src/views/vent/deviceManager/comment/NormalTable.vue

@@ -278,17 +278,13 @@
     }
   }
   :deep(.@{ventSpace}-select-dropdown) {
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
-
     .@{ventSpace}-select-item-option-selected,
     .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
+      background-color: #ffffff33 !important;
     }
 
     .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
+      background-color: #ffffff33 !important;
     }
   }
 </style>

+ 0 - 1
src/views/vent/deviceManager/comment/pointTabel/WorkFacePointTable.vue

@@ -246,7 +246,6 @@
       }
 
       watch(() => props.columns, (columns) => {
-        debugger
         // linkColumns.value = columns
         // reload()
         setColumns(columns)

+ 13 - 0
src/views/vent/home/colliery/clique.api.ts

@@ -0,0 +1,13 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/ventanaly-device/safety/ventanalyDevice/homedata',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+
+

+ 86 - 0
src/views/vent/home/colliery/clique.data.ts

@@ -0,0 +1,86 @@
+export const airVolumeMonitorKey = [
+  {
+    code: 'name',
+    value: '矿井名称',
+  },
+  {
+    code: 'jin',
+    value: '总进风量',
+  },
+  {
+    code: 'hui',
+    value: '总回风量',
+  },
+  {
+    code: 'xufeng',
+    value: '总需风量',
+  },
+];
+export const airVolumeMonitor = [
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+  {
+    name: '大柳塔1111',
+    jin: 10215,
+    hui: 10215,
+    xufeng: 10215,
+  },
+];

+ 346 - 0
src/views/vent/home/colliery/components/EchartLineCharacter3.vue

@@ -0,0 +1,346 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <!-- <div id="echartsMain" style="width: 100%; height: 100%"></div> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+   import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  // import Utils from '@/utils/utils'
+  // const echarts = require('echarts')
+  import * as echarts from 'echarts';
+
+  let props = defineProps({
+    setid: String,
+  });
+  
+  let myChart=ref<any>(null)
+  let title1=ref<any>('')
+  let title2=ref('')
+  let legend=reactive(['风阻', '负压'])
+  let min= 0
+  let yname=ref('负压(Pa)')
+  let xname=ref('风量\r\n(m³/min)\r\n')
+  let ymax=ref( 3000)
+  let ymax2=ref(200)
+  let xMax=ref(300)
+  let xMin=ref(0)
+  let xdata1=reactive([])
+  let xdata2=reactive([])
+  let xdata3=reactive([])
+  let xdata4=reactive([])
+  let xdata5=reactive([])
+  let xdata6=reactive([])
+  let ynametextcolor=ref( '#3df6ff')
+  let linecolor=ref( '#0092d5')
+  let gridlinecolor=ref('#006c9d')
+  let textcolor=ref('#ffffff')
+  let myWidth=ref( window.innerWidth - 500 + 'px')
+  let padding=reactive( ['auto', 'auto', '40', '50'])
+
+
+        // 风速曲线图各种参数设置
+  function optionFun() {
+    var option = {
+      title: {
+        textStyle: {
+          color: textcolor.value,
+          fontSize: 14 // 字体颜色
+        },
+        text:title.value
+      },
+      grid: {
+        top: '20%',
+        left: '3%',
+        right: '16%',
+        bottom: '5%',
+        containLabel: true
+      },
+      legend: {
+        // x:'right',
+        top: '1%',
+        textStyle: {
+          color: '#ffffff',
+          fontSize: 14// 字体颜色
+        },
+        data: legend
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        textStyle: {
+          color: textcolor.value,
+          fontSize: 14 // 字体颜色
+        },
+        formatter: function (params, ticket, callback) {
+          console.log(params,'params1')
+          // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
+          // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
+          var res = '风量' + ' : ' + params.data[0]*60 + '(m³/min)<br/>'
+          res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>'
+          res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>'
+          // lxh
+          // var res = '风量' + ' : ' + 13600 + '(m³/min)<br/>'
+          // res = res + '&emsp;&emsp;&emsp;' + (13600 / 60).toFixed(2) + '(m³/s)<br/>'
+          // res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>'
+
+          return res
+        },
+        trigger: 'item'
+      },
+      color: ['#00bb00',
+        '#ffbb00',
+        '#ff0000',
+        '#0000ff'],
+      xAxis: [{
+        name: xname.value,
+        nameTextStyle: {
+          color: ynametextcolor.value,
+          fontSize: 14
+        },
+        axisLine: {
+          lineStyle: {
+            color: linecolor.value,
+            width: 1 // 这里是为了突出显示加上的
+          }
+        },
+        splitLine: {
+          show: false, // 网格线
+          lineStyle: {
+            color: gridlinecolor.value,
+            type: 'dashed' // 设置网格线类型 dotted:虚线   solid:实线
+          }
+        },
+        axisLabel: {
+          show: true,
+          position: 'bottom',
+          textStyle: {
+            color:textcolor.value,
+            fontSize: 14
+          }
+        },
+        type: 'value',
+        min: xMin.value * 60,
+        max: xMax.value * 60
+      },
+      {
+        name: '',
+        nameTextStyle: {
+          color: ynametextcolor.value,
+          fontSize: 14
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color:linecolor.value,
+            width: 1 // 这里是为了突出显示加上的
+          }
+        },
+        splitLine: {
+          show: false, // 网格线
+          lineStyle: {
+            color: gridlinecolor.value,
+            type: 'dashed' // 设置网格线类型 dotted:虚线   solid:实线
+          }
+        },
+        axisLabel: {
+          show: false,
+          textStyle: {
+            color: textcolor.value,
+            fontSize: 14
+          }
+        },
+        type: 'value',
+        min: xMin.value,
+        max: xMax.value
+      }
+      ],
+      yAxis: [{
+        name: yname.value,
+        splitNumber: 5,
+        nameTextStyle: {
+          color: ynametextcolor.value,
+          fontSize: 14
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color:linecolor.value,
+            width: 1 // 这里是为了突出显示加上的
+          }
+        },
+        splitLine: {
+          show: true, // 网格线
+          lineStyle: {
+            color: gridlinecolor.value,
+            type: 'dashed' // 设置网格线类型 dotted:虚线   solid:实线
+          }
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: textcolor.value,
+            fontSize: 14
+          }
+        },
+        type: 'value',
+        min: 0,
+        max: ymax.value
+      }
+      ],
+      series: [
+        {
+          name: legend[0],
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          showSymbol: false,
+          data: xdata1
+        },
+        {
+          name: legend[1],
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          showSymbol: false,
+
+          data: xdata2
+        },
+
+        {
+          name: legend[2],
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          symbolSize: 10,
+          data: xdata3
+        }
+        // {
+        //   name: this.legend[3],
+        //   yAxisIndex: 0,
+        //   type: "line",
+        //   smooth: true,
+        //   animationDuration: 1000,
+        //   showSymbol: false,
+        //   data: this.xdata4
+        // },
+      ]
+    }
+    // 将option返回
+    return option
+  }
+
+
+  function initCharts () {
+    // 图表控件
+    myChart.value = echarts.init(document.getElementById('echartsMain'))
+    // document.getElementById(this.setid).style.width = this.myWidth;
+    // document.getElementById(this.setid).style.height = "100px";
+    // 每个仪表盘参数设置
+  // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption( optionFun())
+  }
+  function setYMax(data, data2) {
+    ymax.value = data
+    ymax2.value = data2
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setLegend (data) {
+    legend = data
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXMax (data) {
+    xMax.value = data
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXMin (data) {
+    xMin.value = data
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData(data) {
+    xdata1 = data
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData1 (data) {
+    xdata1 = data
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData2 (data) {
+    xdata2 = data
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData3 (data) {
+    xdata3 = data
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData4 (data) {
+    xdata4 = data
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function clear () {
+    myChart.value.clear()
+  }
+  function setTextColor (color) {
+    textcolor.value = color
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setTitle (title1) {
+    title1.value = title1
+    // let option = optionFun()
+    // 绘制图表,设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function resize () {
+    myChart.value.resize()
+  }
+
+// computed: {
+//   scale () {
+//     return [
+//       {
+//         dataKey: 'y',
+//         alias: this.yaxisText
+//       }
+//     ]
+//   }
+// },
+
+onMounted (()=>{
+  // initCharts()
+})
+
+defineExpose({
+  setXMax,
+  setYMax,
+  setXData
+});
+</script>

+ 213 - 0
src/views/vent/home/colliery/components/device-warn.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="deviceWarn">
+    <div class="title-top" @click="getDetail">设备预警</div>
+    <div class="toggle-search">
+      <div class="status-yx">
+        <div class="now-name">
+          <i style="margin: 0px 5px 0px 5px">
+            <SvgIcon class="icon" size="14" name="internet-bad" />
+          </i>
+          <span style="color: #fff">{{ nowStatus ? '报警信息' : '网络断开' }}</span>
+        </div>
+
+        <div class="now-status">{{ nowStatus ? nowStatus : 0  }}</div>
+      </div>
+    </div>
+    <div class="warn-contents">
+      <div class="warn-box" v-for="(item, index) in warnList" :key="index">
+        <div class="warn-icon">
+          <img :src="item.icon" alt="" />
+        </div>
+        <div class="warn-text">
+          <div class="text-n">
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="warn-val">
+          <div class="val-n"> {{ item.val }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineProps, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { getAssetURL } from '/@/utils/ui';
+
+  let props = defineProps({
+    warnData: Array,
+  });
+
+  const emit = defineEmits(['goDetail']);
+  let nowStatus = ref<any>(0);
+  let warnList = reactive<any[]>([
+    { name: '报警', icon: getAssetURL('home-container/warn-icon.png'), val: 0 },
+    { name: '重大风险预警', icon: getAssetURL('home-container/warn-icon.png'), val: 0 },
+    { name: '较大风险预警', icon: getAssetURL('home-container/warn-icon1.png'), val: 0 },
+    { name: '一般风险预警', icon: getAssetURL('home-container/warn-icon2.png'), val: 0 },
+    { name: '低风险预警', icon: getAssetURL('home-container/warn-icon3.png'), val: 0 },
+  ]);
+
+  //跳转详情
+  function getDetail() {
+    console.log('跳转详情');
+    emit('goDetail', 'sheb');
+  }
+  watch(
+    () => props.warnData,
+    (val) => {
+      console.log(val, '预警数据');
+      val.forEach((el) => {
+        // nowStatus.value = el.netstatus.val;
+        nowStatus.value=0
+        warnList[0].val = el.red.val;
+        warnList[1].val = el.alarm.val;
+        warnList[2].val = el.orange.val;
+        warnList[3].val = el.yellow.val;
+        warnList[4].val = el.blue.val;
+      });
+    },
+    {
+      deep: true,
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .deviceWarn {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover {
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .status-yx {
+        height: 30px;
+        width: 180px;
+        background-color: rgba(8, 148, 255, 0.3);
+        border: 1px solid #1d80da;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .now-status {
+          margin-right: 5px;
+          padding-top: 3px;
+          font-family: 'douyuFont';
+          color: #3df6ff;
+        }
+      }
+    }
+    .warn-contents {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      height: calc(100% - 66px);
+      width: 100%;
+      padding: 20px 15px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      .warn-box {
+        position: relative;
+        width: 396px;
+        height: 16px;
+        display: flex;
+        background: url('../../../../../assets/images/home-container/warn1.png') no-repeat;
+        .warn-icon {
+          position: absolute;
+          left: 10%;
+          top: -20px;
+          width: 44px;
+          height: 35px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .warn-text {
+          width: 168px;
+          height: 2px;
+          position: absolute;
+          left: 22%;
+          top: -2px;
+          background: url('../../../../../assets/images/home-container/warn7.png') no-repeat;
+          background-size: 100% 100%;
+          .text-n {
+            position: absolute;
+            left: 50%;
+            top: -10px;
+            transform: translate(-50%, 0);
+            color: #fff;
+          }
+        }
+        .warn-val {
+          position: absolute;
+          left: 66%;
+          top: -21px;
+          width: 94px;
+          height: 45px;
+          background: url('../../../../../assets/images/home-container/warn8.png') no-repeat;
+          .val-n {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            font-size: 14px;
+            font-family: 'douyuFont';
+            transform: translate(-50%, -52%);
+          }
+        }
+        &:nth-child(1) .val-n {
+          color: red;
+        }
+        &:nth-child(2) .val-n {
+          color: #f93825;
+        }
+        &:nth-child(3) .val-n {
+          color: #ff9b17;
+        }
+        &:nth-child(4) .val-n {
+          color: #ffff00;
+        }
+        &:nth-child(5) .val-n {
+          color: #31dbfd;
+        }
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

+ 389 - 0
src/views/vent/home/colliery/components/fan-monitor.vue

@@ -0,0 +1,389 @@
+<template>
+  <div class="fanMonitor">
+    <div class="title-top" @click="getDetail">局部通风系统</div>
+    <div class="toggle-search">
+      <i class="icon-search">
+        <SvgIcon class="icon" size="14" name="toggle" />
+      </i>
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="fanTypeList"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
+      <div class="status-yx">
+        <div class="now-name">
+          <i style="margin: 0px 5px 0px 5px">
+            <SvgIcon class="icon" size="14" name="yxfj" />
+          </i>
+          <span style="color: #fff">运行风机</span>
+        </div>
+
+        <div class="now-status">{{ fjStatus }}</div>
+      </div>
+    </div>
+    <div class="fan-contents">
+      <div class="fan" ref="fan"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+  import { useGo } from '/@/hooks/web/usePage';
+  let props = defineProps({
+    fandata: Array,
+  });
+  const emit = defineEmits(['goDetail']);
+  const go = useGo();
+  let searchValue = ref('');
+  let fanList = reactive<any[]>([]);
+  let fanTypeList = reactive<any[]>([]); //下拉列表
+  let fjStatus = ref(''); //运行风机
+
+  //获取dom节点
+  let fan = ref<any>();
+  //echart图表数据
+  let echartData = reactive<any>({
+    xdata: 0,
+    ydata: 0,
+  });
+  //跳转详情
+  function getDetail() {
+    emit('goDetail', 'ju');
+  }
+  //选项切换
+  function changeSelect(val) {
+    switch (val) {
+      case '局扇监测':
+        fjStatus.value =
+          fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan1StartStatus == '1'
+            ? '1号风机'
+            : fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan2StartStatus == '1'
+            ? '2号风机'
+            : '';
+        echartData.xdata = fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.windQuantity1;
+        echartData.ydata = fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.windQuantity2;
+        getOption();
+        break;
+      case '局部通风机系统':
+        fjStatus.value =
+          fanList.filter((v) => v.strinstallpos == '局扇监测')[1].readData.Fan1StartStatus == '1'
+            ? '1号风机'
+            : fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan2StartStatus == '1'
+            ? '2号风机'
+            : '';
+        echartData.xdata = fanList.filter((v) => v.strinstallpos == '局扇监测')[1].readData.windQuantity1;
+        echartData.ydata = fanList.filter((v) => v.strinstallpos == '局扇监测')[1].readData.windQuantity2;
+        getOption();
+        break;
+    }
+  }
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(fan.value);
+      let option = {
+        grid: {
+          top: '20%',
+          left: '7%',
+          bottom: '14%',
+          right: '7%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['吸风量', '供风量'],
+            axisTick: {
+              alignWithLabel: true,
+            },
+            nameTextStyle: {
+              color: 'red',
+            },
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 10,
+                fontSize: 14,
+              },
+              formatter: function (data) {
+                return data;
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            min: 0,
+            name: '(m³/min)',
+            nameTextStyle: {
+              color: '#b3b8cc',
+              fontSize: 12,
+              padding: 0,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(62, 103, 164,.4)',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 14,
+              },
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [60, 16],
+            symbolOffset: [0, -10],
+            symbolPosition: 'end',
+            z: 12,
+            //"barWidth": "20",
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                formatter: '{c}',
+                color: '#fff',
+              },
+            },
+            data: [
+              {
+                value: echartData.xdata,
+                itemStyle: {
+                  color: '#59cb42',
+                },
+              },
+              {
+                value: echartData.ydata,
+                itemStyle: {
+                  color: '#3cefff',
+                },
+              },
+            ],
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [60, 16],
+            symbolOffset: [0, 10],
+            // "barWidth": "20",
+            z: 12,
+            data: [
+              {
+                value: 100,
+                itemStyle: {
+                  color: '#59cb42',
+                },
+              },
+              {
+                value: 100,
+                itemStyle: {
+                  color: '#3cefff',
+                },
+              },
+            ],
+          },
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [90, 30],
+            symbolOffset: [0, 20],
+            z: 10,
+            itemStyle: {
+              normal: {
+                color: 'transparent',
+                borderColor: '#14b1eb',
+                borderType: 'dashed',
+                borderWidth: 5,
+              },
+            },
+            data: [100, 100],
+          },
+          {
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                //color: '#14b1eb',
+                opacity: 0.7,
+              },
+            },
+            //silent: true,
+            barWidth: '60',
+            //barGap: '-100%', // Make series be overlap
+            data: [
+              {
+                value: echartData.xdata,
+                itemStyle: {
+                  color: '#59cb42',
+                },
+              },
+              {
+                value: echartData.ydata,
+                itemStyle: {
+                  color: '#3cefff',
+                },
+              },
+            ],
+            markLine: {
+              symbol: 'none',
+              label: {
+                position: 'middle',
+                formatter: '{b}',
+              },
+              data: [
+                {
+                  name: '目标值',
+                  yAxis: 40, //res.targetTwo,
+                  lineStyle: {
+                    color: 'rgba(0, 119, 233,.8)',
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+
+  watch(
+    () => props.fandata,
+    (val) => {
+      console.log(val, '局部风机数据');
+      fanList = val[0];
+      fanTypeList.length = 0;
+      fanList.forEach((el) => {
+        fanTypeList.push({
+          label: el.strinstallpos,
+          value: el.strinstallpos,
+        });
+      });
+      searchValue.value = fanTypeList[0].value;
+      console.log(searchValue.value, '77777');
+
+      changeSelect(searchValue.value);
+    },
+    {
+      deep: true,
+    }
+  );
+
+  onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .fanMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover {
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
+      }
+      .status-yx {
+        height: 30px;
+        width: 180px;
+        background-color: rgba(8, 148, 255, 0.3);
+        border: 1px solid #1d80da;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .now-status {
+          margin-right: 5px;
+          padding-top: 3px;
+          font-family: 'douyuFont';
+          color: #3df6ff;
+        }
+      }
+    }
+    .fan-contents {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      height: calc(100% - 66px);
+      width: 100%;
+      .fan {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

+ 396 - 0
src/views/vent/home/colliery/components/main-monitor.vue

@@ -0,0 +1,396 @@
+<template>
+  <div class="mainMonitor">
+    <div class="title-top" @click="getDetail">主通风系统</div>
+    <div class="toggle-search">
+      <i class="icon-search">
+        <SvgIcon class="icon" size="14" name="toggle" />
+      </i>
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="mainTypeList"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
+      <div class="status-yx">
+        <div class="now-name">
+          <i style="margin: 0px 5px 0px 5px">
+            <SvgIcon class="icon" size="14" name="yxfj" />
+          </i>
+          <span style="color: #fff">运行风机</span>
+        </div>
+
+        <div class="now-status">主风机</div>
+      </div>
+    </div>
+    <div class="main-contents">
+      <div class="main" ref="main"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+
+  let props = defineProps({
+    maindata: Array,
+  });
+  const emit = defineEmits(['goDetail']);
+  let searchValue = ref('');
+  let mainTypeList = reactive<any>([]); //下拉框
+  let mainList = reactive<any[]>([]); //主风机列表
+
+  //获取dom节点
+  let main = ref<any>();
+  //echart图表数据
+  let echartData = reactive<any>({
+    ydata: [],
+    ydata1: [],
+  });
+
+
+  //跳转详情
+  function getDetail() {
+    console.log('跳转详情');
+    emit('goDetail', 'zhu');
+  }
+  //选项切换
+  function changeSelect(val) {
+    let objParam
+    let objParam1
+    switch (val) {
+      case '1号回风斜井':
+         objParam = {
+          dataQ: mainList[0].readData.m3,
+          dataH: mainList[0].readData.DataPa,
+        }
+         objParam1={
+          dataha0: -0.056,
+          dataha1: 3.6491,
+          dataha2: 434.4,
+          dataha3: 100,
+          dataha4: -1000,
+        }
+        setChart(objParam,objParam1);
+        getOption();
+        break;
+      case '2号回风立井':
+      objParam = {
+          dataQ: mainList[1].readData.m3,
+          dataH: mainList[1].readData.DataPa,
+        }
+         objParam1={
+          dataha0: -0.056,
+          dataha1: 3.6491,
+          dataha2: 434.4,
+          dataha3: 100,
+          dataha4: -1000,
+        }
+        setChart(objParam,objParam1);
+        getOption();
+        break;
+    }
+  }
+
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(main.value);
+      let option = {
+        title: {
+          textStyle: {
+            color: '#3df6ff',
+            fontSize: 14, // 字体颜色
+          },
+          text: '',
+        },
+        grid: {
+          top: '25%',
+          left: '5%',
+          right: '19%',
+          bottom: '8%',
+          containLabel: true,
+        },
+        legend: {
+          // x:'right',
+          top: '5%',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 14, // 字体颜色
+          },
+          data: ['风阻', '负压'],
+        },
+        tooltip: {
+          backgroundColor: 'rgba(0,0,0,0.8)',
+          textStyle: {
+            color: '#3df6ff',
+            fontSize: 14, // 字体颜色
+          },
+          formatter: function (params, ticket, callback) {
+            console.log(params, 'params1');
+            // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
+            // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
+            var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
+            res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
+            res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
+            return res;
+          },
+          trigger: 'item',
+        },
+        color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
+        xAxis: [
+          {
+            name: '风量\r\n(m³/min)\r\n',
+            nameTextStyle: {
+              color: '#3df6ff',
+              fontSize: 12,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#0092d5',
+                width: 1, // 这里是为了突出显示加上的
+              },
+            },
+            splitLine: {
+              show: false, // 网格线
+              lineStyle: {
+                color: '#006c9d',
+                type: 'dashed', // 设置网格线类型 dotted:虚线   solid:实线
+              },
+            },
+            axisLabel: {
+              show: true,
+              position: 'bottom',
+              textStyle: {
+                color: '#b3b8cc',
+                fontSize: 14,
+              },
+            },
+            type: 'value',
+            min: 0,
+            max: 400,
+          },
+          {
+            name: '',
+            nameTextStyle: {
+              color: '#3df6ff',
+              fontSize: 12,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#0092d5',
+                width: 1, // 这里是为了突出显示加上的
+              },
+            },
+            splitLine: {
+              show: false, // 网格线
+              lineStyle: {
+                color: '#006c9d',
+                type: 'dashed', // 设置网格线类型 dotted:虚线   solid:实线
+              },
+            },
+            axisLabel: {
+              show: false,
+              textStyle: {
+                color: '#b3b8cc',
+                fontSize: 14,
+              },
+            },
+            type: 'value',
+            min: 0,
+            max: 400,
+          },
+        ],
+        yAxis: [
+          {
+            name: '负压(Pa)',
+            splitNumber: 5,
+            nameTextStyle: {
+              color: '#3df6ff',
+              fontSize: 12,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#0092d5',
+                width: 1, // 这里是为了突出显示加上的
+              },
+            },
+            splitLine: {
+              show: true, // 网格线
+              lineStyle: {
+                color: '#006c9d',
+                type: 'dashed', // 设置网格线类型 dotted:虚线   solid:实线
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#b3b8cc',
+                fontSize: 14,
+              },
+            },
+            type: 'value',
+            min: 0,
+            max: 4000,
+          },
+        ],
+        series: [
+          {
+            name: '风阻',
+            yAxisIndex: 0,
+            xAxisIndex: 1,
+            type: 'line',
+            smooth: true,
+            animationDuration: 1000,
+            showSymbol: false,
+            data: echartData.ydata,
+          },
+          {
+            name: '负压',
+            yAxisIndex: 0,
+            xAxisIndex: 1,
+            type: 'line',
+            smooth: true,
+            animationDuration: 1000,
+            showSymbol: false,
+
+            data: echartData.ydata1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+
+  // 设置曲线数据
+  function setChart(param, character) {
+    param.dataQ = param.dataQ == null ? 0 : param.dataQ;
+    param.dataH = param.dataH == null ? 0 : param.dataH;
+    let Q1 = Math.round((parseFloat(param.dataQ) / 60) * 100) / 100;
+    let H1 = parseFloat(param.dataH);
+
+    let q = Q1 - character.dataha3;
+    let h = H1 - character.dataha4;
+    // 风压特性曲线1
+    let data = [];
+    // 风压特性曲线2
+    let data2 = [];
+
+    for (let i = 30; i <= 400; i++) {
+      let x = i;
+      let y4 = character.dataha0 * (x - q) * (x - q) + character.dataha1 * (x - q) + character.dataha2 + h;
+      data2.push([x, y4]);
+    }
+    for (let i = 0; i <= 400; i++) {
+      let x = i;
+      let y = (H1 / Q1 / Q1) * x * x;
+      data.push([x, y]);
+    }
+    echartData.ydata=data
+    echartData.ydata1=data2
+  }
+
+  watch(
+    () => props.maindata,
+    (val) => {
+      console.log(val, '主风机数据');
+      mainList = val;
+      mainTypeList.length = 0;
+      mainTypeList.push({
+        label: mainList[0].strinstallpos,
+        value: mainList[0].strinstallpos,
+      });
+      searchValue.value = mainTypeList[0].value;
+      changeSelect(searchValue.value);
+    },
+    {
+      deep: true,
+    }
+  );
+  onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .mainMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover {
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
+      }
+      .status-yx {
+        height: 30px;
+        width: 180px;
+        background-color: rgba(8, 148, 255, 0.3);
+        border: 1px solid #1d80da;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .now-status {
+          margin-right: 5px;
+          padding-top: 3px;
+          font-family: 'douyuFont';
+          color: #3df6ff;
+        }
+      }
+    }
+    .main-contents {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      height: calc(100% - 66px);
+      width: 100%;
+      .main {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

+ 269 - 0
src/views/vent/home/colliery/components/wind-device.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="windDevice">
+    <div class="title-top" @click="getDetail">通风设施远程控制</div>
+    <div class="device-contents">
+      <div class="icons-box" @mouseleave="resetScroll">
+        <div class="icon-item" v-for="(item, key) in iconsMonitor" :key="key">
+          <div class="wrapper">
+            {{ item.text }}
+          </div>
+          <div></div>
+          <img :src="item.url" :alt="item.text" />
+          <div
+            class="level-text"
+            :class="{
+              'level-text-1': item.level == 1,
+              'level-text-2': item.level == 2,
+              'level-text-3': item.level == 3,
+              'level-text-4': item.level == 4,
+              'level-text-5': item.level == 5,
+            }"
+            >{{
+              item.level == 1
+                ? '正常'
+                : item.level == 2
+                ? '低风险'
+                : item.level == 3
+                ? '中风险'
+                : item.level == 4
+                ? '高风险'
+                : item.level == 5
+                ? '报警'
+                : ''
+            }}</div
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive,defineProps, watch } from 'vue';
+  import { getAssetURL } from '/@/utils/ui';
+  let props = defineProps({
+    devicedata: Object,
+  });
+  const emit = defineEmits(['goDetail'])
+  let iconsMonitor = reactive({
+    1: {
+      url: getAssetURL('home-container/device/zhushan.png'),
+      level: 1,
+      text: '主风机',
+    },
+    2: {
+      url: getAssetURL('home-container/device/js.png'),
+      level: 1,
+      text: '局部风机',
+    },
+    3: {
+      url: getAssetURL('home-container/device/fm.png'),
+      level: 1,
+      text: '风门',
+    },
+    4: {
+      url: getAssetURL('home-container/device/fc.png'),
+      level: 1,
+      text: '风窗',
+    },
+    5: {
+      url: getAssetURL('home-container/device/cf.png'),
+      level: 1,
+      text: '测风装置',
+    },
+    6: {
+      url: getAssetURL('home-container/device/yafeng.png'),
+      level: 1,
+      text: '压风装置',
+    },
+    7: {
+      url: getAssetURL('home-container/device/penlin.png'),
+      level: 1,
+      text: '喷淋',
+    },
+    8: {
+      url: getAssetURL('home-container/device/penfen.png'),
+      level: 1,
+      text: '喷粉',
+    },
+    9: {
+      url: getAssetURL('home-container/device/zhudan.png'),
+      level: 1,
+      text: '注氮',
+    },
+    10: {
+      url: getAssetURL('home-container/device/zhujiang.png'),
+      level: 1,
+      text: '注浆',
+    },
+    11: {
+      url: getAssetURL('home-container/device/pw.png'),
+      level: 1,
+      text: '跟机喷雾',
+    },
+    12: {
+      url: getAssetURL('home-container/device/ccq.png'),
+      level: 1,
+      text: '除尘器',
+    },
+    13: {
+      url: getAssetURL('home-container/device/wasibeng.png'),
+      level: 1,
+      text: '瓦斯泵',
+    },
+    14: {
+      url: getAssetURL('home-container/device/js.png'),
+      level: 1,
+      text: '瓦斯抽采管路',
+    },
+  });
+
+  const resetScroll = (e: Event) => {
+    if (e.target && e.target) (e.target as Element).scrollTop = 0;
+  };
+
+  //跳转详情
+  function getDetail() {
+    console.log('跳转详情');
+    emit('goDetail', 'fl')
+  }
+
+  watch(
+    () => props.devicedata,
+    (val) => {
+      console.log(val, '设备数据');
+     
+    },
+    {
+      deep: true,
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .windDevice {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover {
+        color: #66ffff;
+      }
+    }
+
+    .device-contents {
+      position: absolute;
+      top: 30px;
+      left: 0;
+      height: calc(100% - 30px);
+      padding: 10px 15px;
+      box-sizing: border-box;
+      width: 100%;
+      .icons-box {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        height: 100%;
+        overflow-y: hidden;
+        // align-items: start ;
+        &:hover {
+          overflow-y: auto;
+          & > .icon-item {
+            animation-play-state: paused;
+            animation: move1 2s linear;
+          }
+        }
+        .icon-item {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 3px;
+          animation: move 10s linear infinite;
+
+          .level-text {
+            position: absolute;
+            top: 42px;
+            right: 25px;
+            color: #fff;
+            font-family: 'douyuFont';
+            font-size: 12px;
+          }
+          .level-text-1 {
+            color: rgb(0, 242, 255);
+            text-shadow: 2px 2px 4px #001c22;
+          }
+          .level-text-2 {
+            color: #ffff35;
+            text-shadow: 2px 2px 4px #313100;
+          }
+          .level-text-3 {
+            color: #ffbe69;
+            text-shadow: 2px 2px 4px #271600;
+          }
+          .level-text-4 {
+            color: #ff6f00;
+            // color: #09caff;
+            text-shadow: 2px 2px 4px #060200;
+          }
+          .level-text-5 {
+            color: #ff0000;
+            text-shadow: 2px 2px 4px #200000;
+          }
+          img {
+            width: 210px;
+            height: 69px;
+          }
+        }
+        @keyframes move {
+          0% {
+            transform: translateY(0px);
+          }
+          100% {
+            transform: translateY(-269px);
+          }
+        }
+
+        @keyframes move1 {
+          0% {
+            transform: translateY(0px);
+          }
+        }
+        .wrapper {
+          position: absolute;
+          top: 40px;
+          left: 82px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
+        }
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

+ 451 - 0
src/views/vent/home/colliery/components/wind-line.vue

@@ -0,0 +1,451 @@
+<template>
+  <div class="windLine">
+    <div class="title-top" @click="getDetail">关键路线通风</div>
+    <div class="toggle-search">
+      <i class="icon-search">
+        <SvgIcon class="icon" size="14" name="toggle" />
+      </i>
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="lineTypeList"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
+    </div>
+    <div class="line-echart">
+      <div class="line" ref="line"></div>
+      <div class="pic">
+        <img src="../../../../../assets/images/home-container/pie.png" alt="" />
+      </div>
+      <div class="percent">
+        <div class="percent-box">
+          <span>{{ percentF }}</span>
+          <span class="dw">%</span>
+        </div>
+        <div class="percent-box">
+          <span>{{ percentT }}</span>
+          <span class="dw">%</span>
+        </div>
+        <div class="percent-box">
+          <span>{{ percentE }}</span>
+          <span class="dw">%</span>
+        </div>
+      </div>
+    </div>
+    <div class="line-card">
+      <div class="card-item" v-for="(item, index) in tabList" :key="index">
+        <div class="item-s">
+          <div class="item-label">{{ item.name }}</div>
+          <div class="item-val">{{ item.val }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+  const emit = defineEmits(['goDetail'])
+
+  let props = defineProps({
+    lineList: Array,
+  });
+
+  //获取dom节点
+  let line = ref<any>();
+  let lineData = reactive<any[]>([]);
+  let searchValue = ref('');
+  const lineTypeList = reactive<any[]>([]);
+
+  let echartData = reactive<any[]>([
+    { name: '进风区', value: 0 },
+    { name: '用风区', value: 0 },
+    { name: '回风区', value: 0 },
+  ]);
+  let xData = reactive<any[]>([]);
+  let yData = reactive<any[]>([]);
+  let percentE = ref<any>(0);
+  let percentF = ref<any>(0);
+  let percentT = ref<any>(0);
+
+  let tabList = reactive<any[]>([
+    { name: '总风量(m³/min)', val: 0 },
+    { name: '总阻力(Pa)', val: 0 },
+    { name: '等积孔(m²)', val: 0 },
+  ]);
+  //跳转详情
+  function getDetail() {
+    console.log('跳转详情');
+    emit('goDetail', 'line')
+  }
+  //选项切换
+  function changeSelect(val) {
+    switch (val) {
+      case '1号回风斜井':
+        // echartData[0].value = lineData[0].majorpath.drag_1;
+        // echartData[1].value = lineData[0].majorpath.drag_2;
+        // echartData[2].value = lineData[0].majorpath.drag_3;
+        // tabList[0].val = lineData[0].majorpath.drag_total;
+        // tabList[1].val = lineData[0].majorpath.m3_total;
+        echartData[0].value = Math.floor(Math.random()*(629-620+1))+620;
+        echartData[1].value =  Math.floor(Math.random()*(949-940+1))+940;
+        echartData[2].value =  Math.floor(Math.random()*(855-850+1))+850;
+        tabList[0].val =  Math.floor(Math.random()*(10700-10600+1))+10600;
+        tabList[1].val =  Math.floor(Math.random()*(2433-2423+1))+2423;
+        tabList[2].val = 0.56;
+        percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        getOption();
+        break;
+      case '2号回风立井':
+        // echartData[0].value = lineData[1].majorpath.drag_1;
+        // echartData[1].value = lineData[1].majorpath.drag_2;
+        // echartData[2].value = lineData[1].majorpath.drag_3;
+        // tabList[0].val = lineData[1].majorpath.drag_total;
+        // tabList[1].val = lineData[1].majorpath.m3_total;
+        echartData[0].value = Math.floor(Math.random()*(830-820+1))+820;
+        echartData[1].value =  Math.floor(Math.random()*(620-600+1))+600;
+        echartData[2].value =  Math.floor(Math.random()*(860-800+1))+800;
+        tabList[0].val =  Math.floor(Math.random()*(10100-10000+1))+10000;
+        tabList[1].val =  Math.floor(Math.random()*(2310-2210+1))+2210;
+        tabList[2].val = 0.78;
+        percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        getOption();
+        break;
+    }
+  }
+
+  function getOption() {
+    nextTick(() => {
+      function deepCopy(obj) {
+        if (typeof obj !== 'object') {
+          return obj;
+        }
+        var newobj = {};
+        for (var attr in obj) {
+          newobj[attr] = obj[attr];
+        }
+        return newobj;
+      }
+
+      echartData.map((a, b) => {
+        xData.push(a.name);
+        yData.push(a.value);
+      });
+      var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
+      var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
+      var RealData = [];
+      var borderData = [];
+      echartData.map((item, index) => {
+        var newobj = deepCopy(item);
+        var newobj1 = deepCopy(item);
+        RealData.push(newobj);
+        borderData.push(newobj1);
+      });
+      RealData.map((item, index) => {
+        item.itemStyle = {
+          normal: {
+            color: startColor[index],
+          },
+        };
+      });
+      borderData.map((item, index) => {
+        item.itemStyle = {
+          normal: {
+            color: borderStartColor[index],
+          },
+        };
+      });
+      const myChart = echarts.init(line.value);
+
+      let option = {
+        legend: [
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '12%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
+            data: ['进风区'],
+          },
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '42%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
+            data: ['用风区'],
+          },
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '70%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
+            data: ['回风区'],
+          },
+        ],
+        tooltip: {
+          formatter: '{b}:{c}',
+        },
+        series: [
+          // 主要展示层的
+          {
+            radius: ['40%', '80%'],
+            center: ['25%', '50%'],
+            type: 'pie',
+            z: 10,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                borderColor: 'rgba(2, 39, 115)',
+              },
+            },
+            data: RealData,
+          },
+          // 边框的设置
+          {
+            radius: ['45%', '52%'],
+            center: ['25%', '50%'],
+            type: 'pie',
+            z: 5,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+
+            animation: false,
+            tooltip: {
+              show: false,
+            },
+            data: borderData,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+
+  watch(
+    () => props.lineList,
+    (val) => {
+      console.log(val, '关键路线数据');
+      lineData = val;
+      lineTypeList.length = 0;
+      lineData.forEach((el) => {
+        lineTypeList.push({
+          label: el.deviceName,
+          value: el.deviceName,
+        });
+      });
+      searchValue.value = lineTypeList[0].value;
+
+      changeSelect(searchValue.value);
+    },
+    {
+      deep: true,
+    }
+  );
+
+  onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+  }
+  .windLine {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover {
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
+      }
+    }
+    .line-echart {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      width: 100%;
+      height: 120px;
+      .line {
+        width: 100%;
+        height: 100%;
+      }
+      .pic {
+        height: 100%;
+        position: absolute;
+        left: 45%;
+        top: 0;
+        display: flex;
+        align-items: center;
+        img {
+          height: 60%;
+        }
+      }
+      .percent {
+        position: absolute;
+        left: 75%;
+        top: 0;
+        width: 45px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        // justify-content: space-between;
+        align-items: center;
+        .percent-box {
+          font-size: 14px;
+          // color: #b3b8cc;
+          &:nth-child(1) {
+            position: absolute;
+            top: 12%;
+            color: #ffe01c;
+          }
+          &:nth-child(2) {
+            position: absolute;
+            top: 42%;
+            color: #1ff8fb;
+          }
+          &:nth-child(3) {
+            position: absolute;
+            top: 70%;
+            color: #9affa8;
+          }
+          .dw {
+            color: #b3b8cc;
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+    .line-card {
+      position: absolute;
+      top: 186px;
+      left: 0;
+      width: 100%;
+      height: calc(100% - 186px);
+      padding: 0px 15px 15px 15px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .card-item {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        .item-s {
+          position: relative;
+          width: 105px;
+          height: 58px;
+          margin-top: 20px;
+          background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
+          background-size: 100% 90%;
+          .item-label {
+            width: 100%;
+            text-align: center;
+            color: #b3b8cc;
+            font-size: 12px;
+          }
+          .item-val {
+            position: absolute;
+            left: 50%;
+            top: 26px;
+            font-size: 14px;
+            font-family: 'douyuFont';
+            color: #fff;
+            transform: translate(-50%, 0);
+          }
+        }
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

+ 259 - 0
src/views/vent/home/colliery/components/wind-monitor.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="windMonitor">
+    <div class="title-top" @click="getDetail">风量监测</div>
+    <div class="wind-contents">
+      <div class="wind-bar" ref="windBar"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
+  import * as echarts from 'echarts';
+  const emit = defineEmits(['goDetail'])
+
+  let props = defineProps({
+    flList: Array,
+  });
+
+  //获取dom节点
+  let windBar = ref<any>();
+  //echart数据
+  let echartData = reactive<any>({ ydata: [], xdata: [] });
+  //跳转详情
+  function getDetail() {
+    emit('goDetail', 'wind')
+  }
+  function getOption() {
+    nextTick(() => {
+      const color = '#66ffff';
+      const barWidth = 0.1; // 柱条占比
+
+      function renderItem(params, api) {
+        const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
+        const width = api.size([0, 1])[0] * barWidth; // 宽度
+        const ballRadius = width * 0.8;
+        return {
+          type: 'group',
+          children: [
+            {
+              // 圆形装饰
+              type: 'circle',
+              shape: {
+                cx: topCenter[0],
+                cy: topCenter[1],
+                r: ballRadius,
+              },
+              style: api.style({
+                fill: '#66ffff',
+                stroke: color,
+                lineWidth: 2,
+              }),
+            },
+          ],
+        };
+      }
+
+      const myChart = echarts.init(windBar.value);
+      let option = {
+        color: [color],
+        tooltip: {
+          trigger: 'item',
+          show: true,
+          formatter: function (p) {
+            console.info(p);
+            return p.marker + p.name + ' : ' + p.value;
+          },
+        },
+
+        grid: {
+          left: '8%',
+          top: '15%',
+          bottom: '32%',
+          right: '8%',
+          // containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: echartData.xdata,
+          axisLabel: {
+            formatter: function (params) {
+              var newParamsName = ''; // 最终拼接成的字符串
+              var paramsNameNumber = params.length; // 实际标签的个数
+              var provideNumber = 6; // 每行能显示的字的个数
+              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话,需要显示几行,向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber > provideNumber) {
+                /** 循环每一行,p表示行 */
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = ''; // 表示每一次截取的字符串
+                  var start = p * provideNumber; // 开始截取的位置
+                  var end = start + provideNumber; // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p == rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n';
+                  }
+                  newParamsName += tempStr; // 最终拼成的字符串
+                }
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName = params;
+              }
+              //将最终的字符串返回
+              return newParamsName;
+            },
+            fontSize: 14,
+            margin: 10,
+            interval: 0,
+            textStyle: {
+              color: '#b3b8cc',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: 'value',
+          name: '(m³/min)',
+          max: 10000,
+          axisLabel: {
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
+          },
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164,.4)',
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: echartData.ydata,
+            type: 'bar',
+            barWidth: barWidth * 100 + '%',
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(85, 255, 237, 1)', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(66, 142, 255, 0.1)', // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                position: ['-7', '-28'],
+                formatter: [' {a|{c}}'].join(','),
+                rich: {
+                  a: {
+                    color: '#fff',
+                    align: 'center',
+                  },
+                },
+              },
+            },
+          },
+          {
+            data: echartData.ydata,
+            type: 'custom',
+            renderItem: renderItem,
+            zlevel: 2,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+
+  watch(
+    () => props.flList,
+    (val) => {
+      console.log(val, '测风数据');
+      echartData.xdata.length = 0;
+      echartData.ydata.length = 0;
+      val.forEach((el) => {
+        echartData.xdata.push(el.strinstallpos);
+        echartData.ydata.push(el.readData.m3);
+      });
+      getOption();
+    },
+    {
+      deep: true,
+    }
+  );
+
+  onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  .windMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover {
+        color: #66ffff;
+      }
+    }
+    .wind-contents {
+      position: absolute;
+      left: 0;
+      top: 36px;
+      width: 100%;
+      height: calc(100% - 36px);
+      .wind-bar {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+</style>

+ 387 - 0
src/views/vent/home/colliery/components/work-monitor.vue

@@ -0,0 +1,387 @@
+<template>
+  <div class="workMonitor">
+    <div class="title-top" @click="getDetail">工作面智能管控</div>
+    <div class="toggle-search">
+      <i class="icon-search">
+        <SvgIcon class="icon" size="14" name="toggle" />
+      </i>
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="workTypeList"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
+    </div>
+    <div class="work-echart">
+      <div class="work" ref="work"></div>
+    </div>
+    <div class="work-card">
+      <div class="card-item" v-for="(item, index) in tabList" :key="index">
+        <div class="item-s">
+          <div class="item-label">{{ item.name }}</div>
+          <div class="item-val">{{ item.val }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+
+  let props = defineProps({
+    workList: Array,
+  });
+  const emit = defineEmits(['goDetail']);
+  let workData = reactive<any[]>([]);
+  let searchValue = ref('');
+  const workTypeList = reactive<any[]>([]);
+
+  let tabList = reactive<any[]>([
+    { name: '进风量(m³/min)', val: null },
+    { name: '回风量(m³/min)', val: null },
+    { name: '需风量(m³/min)', val: null },
+  ]);
+
+  let work = ref<any>();
+  let echartData = reactive({
+    xdata: [],
+    ydata: [],
+    ydata1: [],
+  });
+  //跳转详情
+  function getDetail() {
+    console.log('跳转详情');
+    emit('goDetail', 'work');
+  }
+  //选项切换
+  function changeSelect(val) {
+    switch (val) {
+      case '15212工作面':
+        tabList[0].val = workData[0].jin;
+        tabList[1].val = workData[0].hui;
+        tabList[2].val = workData[0].xufengliang;
+        echartData.xdata.length = 0;
+        echartData.ydata.length = 0;
+        echartData.ydata1.length = 0;
+        workData[0].history.forEach((el) => {
+          echartData.xdata.push(el.time);
+          echartData.ydata.push(el.jin);
+          echartData.ydata1.push(el.hui);
+        });
+
+        getOption();
+        break;
+      case '采煤工作面':
+        tabList[0].val = workData[1].jin;
+        tabList[1].val = workData[1].hui;
+        tabList[2].val = workData[1].xufengliang;
+        echartData.xdata.length = 0;
+        echartData.ydata.length = 0;
+        echartData.ydata1.length = 0;
+        workData[1].history.forEach((el) => {
+          echartData.xdata.push(el.time);
+          echartData.ydata.push(el.jin);
+          echartData.ydata1.push(el.hui);
+        });
+        getOption();
+        break;
+    }
+  }
+
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(work.value);
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          },
+        },
+
+        legend: {
+          align: 'left',
+          right: '4%',
+          top: '6%',
+          type: 'plain',
+          textStyle: {
+            color: '#7ec7ff',
+            fontSize: 12,
+          },
+          // icon:'rect',
+          itemGap: 25,
+          itemWidth: 18,
+          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+          data: [
+            {
+              name: '工作面进风',
+            },
+            {
+              name: '工作面回风',
+            },
+            // {
+            //   name: '工作面需风'
+            // }
+          ],
+        },
+
+        grid: {
+          top: '28%',
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+          containLabel: true,
+        },
+
+        xAxis: [
+          {
+            type: 'category',
+            // boundaryGap: false,
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 12,
+              },
+              formatter: function (data) {
+                return data;
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: echartData.xdata,
+          },
+        ],
+
+        yAxis: [
+          {
+            name: 'm³/s',
+            nameTextStyle: {
+              color: '#b3b8cc',
+              fontSize: 12,
+              padding: -10,
+            },
+            min: 0,
+            splitNumber: 3,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164,.4)',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 12,
+              },
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '工作面进风',
+            type: 'line',
+            yAxisIndex: 0,
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: 'orange', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: 'orange',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartData.ydata,
+          },
+          {
+            name: '工作面回风',
+            type: 'line',
+            yAxisIndex: 0,
+            symbolSize: 6,
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#1891de', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: '#1891de',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartData.ydata1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+
+  watch(
+    () => props.workList,
+    (val) => {
+      console.log(val, '工作面数据');
+      workData = val;
+      workTypeList.length = 0;
+      workData.forEach((el) => {
+        workTypeList.push({
+          label: el.deviceName,
+          value: el.deviceName,
+        });
+      });
+      searchValue.value = workTypeList[0].value;
+
+      changeSelect(searchValue.value);
+    },
+    {
+      deep: true,
+    }
+  );
+
+  onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  .workMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+      &:hover {
+        color: #66ffff;
+      }
+    }
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
+      display: flex;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
+      }
+    }
+    .work-echart {
+      position: absolute;
+      top: 66px;
+      left: 0;
+      height: 120px;
+      margin: 5px 0px;
+      padding: 0px 20px;
+      box-sizing: border-box;
+      width: 100%;
+      .work {
+        height: 100%;
+        background: url('../../../../../assets/images/home-container/work-bd.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    .work-card {
+      position: absolute;
+      top: 186px;
+      left: 0;
+      width: 100%;
+      height: calc(100% - 186px);
+      padding: 0px 15px 15px 15px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .card-item {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        .item-s {
+          position: relative;
+          width: 105px;
+          height: 58px;
+          margin-top: 20px;
+          background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
+          background-size: 100% 90%;
+          .item-label {
+            width: 100%;
+            text-align: center;
+            color: #b3b8cc;
+            font-size: 12px;
+          }
+          .item-val {
+            position: absolute;
+            left: 50%;
+            top: 28px;
+            font-size: 14px;
+            font-family: 'douyuFont';
+            color: #fff;
+            transform: translate(-50%, 0);
+          }
+        }
+      }
+    }
+  }
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+</style>

+ 448 - 78
src/views/vent/home/colliery/index.vue

@@ -1,116 +1,486 @@
 <template>
-  <div class="header">1111</div>
-  <div class="container-box">
-    <div class="left-box lr-box">
-      <div class="lr-top air-monitor">
-        
+  <div style="position: relative; width: 100%; height: 100%">
+    <div class="home-container" v-if="pageType == 'home'">
+      <div class="header">
+        <div class="head-time">
+          <span>{{ nowTime }}</span>
+          <span>{{ weeks }}</span>
+          <span>{{ timeDate }}</span>
+        </div>
+        <div class="main-title">通防智能管控系统</div>
       </div>
-      <div class="lr-bottom warning-monitor"></div>
-    </div>
-    <div class="center-box ">
-      <div class="center-container file-list"></div>
-    </div>
-    <div class="right-box lr-box">
-      <div class="lr-top scene-monitor"></div>
-      <div class="lr-bottom tunnel-statistic">
-
+      <div class="home-contents">
+        <div class="left-content">
+          <!-- 主通风机 -->
+          <div class="monitor-box">
+            <mainMonitor :maindata="mainList" @goDetail="goDetail" />
+          </div>
+          <!-- 局部通风机 -->
+          <div class="monitor-box monitor-box1">
+            <fanMonitor @goDetail="goDetail" :fandata="fanLocalList" />
+          </div>
+          <!-- 通风设备远程控制 -->
+          <div class="monitor-box">
+            <windDevice :devicedata="deviceData" @goDetail="goDetail" />
+          </div>
+        </div>
+        <div class="center-content">
+          <!-- 三维模型 -->
+          <div class="three-box">
+            <div class="three-nav">
+              <div class="nav-item" v-for="(item, index) in navList" :key="index">
+                <div class="item-label">{{ item.name }}</div>
+                <div class="item-value">
+                  <div v-if="item.isShow" class="bg-box" v-for="(ite, ind) in item.valList" :key="ind">
+                    <div class="box-line"></div>
+                    <div class="value-text">{{ ite.val }}</div>
+                  </div>
+                  <div v-else class="value-text1">{{ item.val }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="three-modal" id="modalBox">
+              <div class="btn-icon"></div>
+              <!-- <iframe
+                id="iframe"
+                ref="iframe"
+                src="http://182.92.126.35:8091/user/autologin"
+                scrolling="auto"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe> -->
+            </div>
+          </div>
+          <!-- 风量监测 -->
+          <div class="wind-box">
+            <windMonitor :flList="flList" @goDetail="goDetail" />
+          </div>
+        </div>
+        <div class="right-content">
+          <!-- 关键通风路线 -->
+          <div class="monitor-box">
+            <windLine :lineList="lineList" @goDetail="goDetail" />
+          </div>
+          <!-- 工作面智能管控 -->
+          <div class="monitor-box monitor-box1">
+            <workMonitor :workList="workList" @goDetail="goDetail" />
+          </div>
+          <!-- 设备预警 -->
+          <div class="monitor-box">
+            <deviceWarn :warnData="warnData" @goDetail="goDetail" />
+          </div>
+        </div>
       </div>
     </div>
+    <DeviceMonitor v-else-if="pageType" :pageType="pageType" @goHome="goHome" />
+    <div id="content" style="width: 100%; height: 100%; position: fixed"></div>
   </div>
 </template>
 <script lang="ts" setup>
+import { reactive, onMounted, ref, nextTick, computed } from 'vue';
+import fanMonitor from './components/fan-monitor.vue';
+import mainMonitor from './components/main-monitor.vue';
+import windDevice from './components/wind-device.vue';
+import windMonitor from './components/wind-monitor.vue';
+import windLine from './components/wind-line.vue';
+import workMonitor from './components/work-monitor.vue';
+import deviceWarn from './components/device-warn.vue';
+import { useGlobSetting } from '/@/hooks/setting';
+import { list } from './clique.api';
+import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue';
+import { useRouter } from 'vue-router';
+// import { Modal } from 'ant-design-vue';
+// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import moment from 'moment';
+
+let timer: NodeJS.Timeout | null = null;
+let fanLocalList = reactive<any[]>([]); //局部风机数据
+let mainList = ref<any[]>([]); //主通风机数据
+let centerList = reactive<any[]>([]); //中间区域数据
+let flList = ref<any[]>([]); //风量监测数据
+let lineList = ref<any>([]); //关键路线数据
+let workList = ref<any>([]); //工作面数据
+let warnData = ref<any>([]); //预警数据
+let deviceData = ref<any>({}); //设备监测数据
+let navList = reactive([
+  { name: '总风量(m³/min)', isShow: true, valList: [] },
+  { name: '需风量(m³/min)', isShow: true, valList: [] },
+  { name: '等积孔(m²)', isShow: true, valList: [{ val: '1' }, { val: '0' }, { val: '.' }, { val: '5' }, { val: '4' }] },
+  { name: '外部漏风率', isShow: false, val: 0 },
+  { name: '有效风量率', isShow: false, val: 0 },
+]);
+
+const globSetting = useGlobSetting();
+const pageType = ref('home');
+let router = useRouter();
+
+function goDetail(deviceType) {
+  // Modal.confirm({
+  //   content: () => '暂未连接井下设备!',
+  //   icon: () => createVNode(ExclamationCircleOutlined),
+  //   title: '消息提示',
+  //   onOk() {
+  //     return new Promise((resolve, reject) => {
+  //       setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+  //     }).catch(() => console.log('Oops errors!'));
+  //   },
+  //   cancelText: () => '取消',
+  //   onCancel() {
+  //     Modal.destroyAll();
+  //   },
+  // });
+
+  //lxh
+  // pageType.value = deviceType;
+  // changeModalBox();
+  if (deviceType == 'zhu') {
+    router.push('/monitorChannel/monitor-fan-main');
+  } else if (deviceType == 'ju') {
+    router.push('/monitorChannel/monitor-fan-local');
+  } else {
+    router.push('/monitorChannel/monitor-gate');
+  }
+}
+function goHome() {
+  pageType.value = 'home';
+  nextTick(() => {
+    changeModalBox();
+  });
+}
+function changeModalBox() {
+  if (pageType.value === 'home') {
+    const dom = document.getElementById('modalBox') as HTMLElement;
+    if (dom && dom.parentElement) {
+      const contentDom = document.getElementById('content') as HTMLElement;
+      contentDom?.setAttribute(
+        'style',
+        `top: ${dom.parentElement.offsetTop + 20}px; left: ${dom.parentElement.offsetLeft + 20}px; width: ${dom.offsetWidth - 40}px; height: ${dom.offsetHeight - 40
+        }px; position: fixed;`
+      );
+    }
+  } else {
+    const dom = document.getElementById('modalBox') as HTMLElement;
+    if (dom && dom.parentElement) {
+      const contentDom = document.getElementById('content') as HTMLElement;
+      contentDom?.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed;`);
+    }
+  }
+}
+function getList() {
+  list({}).then((res) => {
+    console.log(res, 'res-----------');
+    fanLocalList.length = 0;
+    fanLocalList.push(res.fanlocal);
+    mainList.value = res.fanmain;
+    centerList = res.midinfo[0].sysdata;
+    navList[0].valList = centerList.zongfengliang
+      ? centerList.zongfengliang.split('').map((el) => {
+        return { val: el };
+      })
+      : [];
+    navList[1].valList = centerList.xufengliang
+      ? centerList.xufengliang
+        .toString()
+        .split('')
+        .map((el) => {
+          return { val: el };
+        })
+      : [];
+
+    if (centerList.zongfengliang && centerList.zonghuifeng) {
+      navList[3].val =
+        (((parseFloat(centerList.zongfengliang) - parseFloat(centerList.zonghuifeng)) / parseFloat(centerList.zonghuifeng)) * 100).toFixed(2) + '%';
+      navList[4].val = ((centerList.xufengliang / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) + '%';
+    } else {
+      navList[3].val = '0%';
+      navList[4].val = '0%';
+    }
 
+    flList.value = res.windrect;
+    lineList.value = res.sys_majorpath;
+    workList.value = res.sys_surface_caimei;
+    warnData.value = res.warn;
+    deviceData.value = res.device;
+  });
+}
+let weeks = computed(() => {
+  let week = moment(new Date().getTime()).day();
+  switch (week) {
+    case 0:
+      return '星期日';
+      break;
+    case 1:
+      return '星期一';
+      break;
+    case 2:
+      return '星期二';
+      break;
+    case 3:
+      return '星期三';
+      break;
+    case 4:
+      return '星期四';
+      break;
+    case 5:
+      return '星期五';
+      break;
+    case 6:
+      return '星期六';
+      break;
+  }
+});
+let nowTime = computed(() => {
+  return moment().format('YYYY/MM/DD');
+});
+let timeDate = computed(() => {
+  return moment().format('HH:MM:SS');
+});
+onMounted(() => {
+  getList();
+  changeModalBox();
+  const renderModal = () => {
+    const element = document.getElementById('__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__');
+    if (element) {
+      element?.setAttribute('style', 'width: 100%; height: 100%');
+    } else {
+      setTimeout(() => {
+        renderModal();
+      }, 2000);
+    }
+  };
+  renderModal();
+  timer = Number(
+    setInterval(() => {
+      getList();
+    }, 10000)
+  );
+});
 </script>
+
 <style lang="less" scoped>
-.header {
-  width: 100%;
-  height: 100px;
-  background-color: #ffffff11;
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
 }
 
-.container-box {
-  height: calc(100% - 32px);
-  display: flex;
-  margin: 16px 10px;
+@font-face {
+  font-family: 'yjsz';
+  src: url('../../../../assets/font/yjsz.TTF');
+}
 
-  .lr-box {
-    width: 400px;
-    height: calc(100% - 50px);
+.home-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .header {
+    width: 100%;
+    height: 76px;
     position: relative;
-    top: -50px;
-    background-color: #ffffff11;
-  }
+    background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
 
-  .center-box {
-    flex: 1;
-    margin: 0 16px;
+    .head-time {
+      position: absolute;
+      top: 14px;
+      left: 15px;
+      color: #b5c9e9;
+      font-size: 14px;
 
-    .center-container {
-      height: 500px;
-      position: fixed;
-      bottom: 0;
-      background-color: #ffffff11;
+      span {
+        margin-right: 20px;
+        letter-spacing: 2px;
+      }
+    }
+
+    .main-title {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: #fff;
+      font-size: 24px;
+      font-family: 'douyuFont';
     }
   }
 
-  .air-monitor {
-    .column-header {
-      width: 100%;
+  .home-contents {
+    display: flex;
+    justify-content: space-between;
+    height: calc(100% - 76px);
+    padding: 10px;
+    box-sizing: border-box;
+
+    .left-content {
       display: flex;
-      justify-content: center;
-      color: aqua;
-      height: 80px;
-      line-height: 80px;
-
-      .header-item {
-        width: 25%;
-        text-align: center;
+      flex-direction: column;
+      flex: 1;
+      justify-content: space-between;
+      height: 100%;
+
+      .monitor-box {
+        display: flex;
+        flex: 1;
+        width: 100%;
+        background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .monitor-box1 {
+        margin: 10px 0px;
       }
     }
 
-    .column-container {
-      height: 400px;
-      overflow-y: auto;
+    .center-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 2;
+      height: 100%;
+      margin: 0px 10px;
+
+      .three-box {
+        position: relative;
+        display: flex;
+        background-color: #fff;
+        flex: 2;
+        width: 100%;
+        margin-bottom: 15px;
+        background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
+        background-size: 100% 100%;
 
-      &:hover {
-        overflow-y: auto;
+        .three-nav {
+          position: absolute;
+          z-index: 9999;
+          left: 50%;
+          top: 38px;
+          transform: translate(-50%, 0);
+          width: 812px;
+          height: 89px;
+          padding: 0px 20px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
 
-        &>.column-item {
-          animation-play-state: paused;
-          // animation: move1 2s linear;
+          .nav-item {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+            height: 80%;
+
+            .item-label {
+              color: #98f5ff;
+            }
+
+            .item-value {
+              position: relative;
+              width: 125px;
+              height: 37px;
+              padding: 0px 5px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              background: url('../../../../assets/images/home-container/item-value.png') no-repeat;
+
+              .bg-box {
+                position: relative;
+                width: 20px;
+                height: 26px;
+                border-bottom: 2px solid #063493;
+                background: linear-gradient(to right, rgba(1, 194, 249), rgba(0, 125, 252));
+
+                .box-line {
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translate(0, -50%);
+                  height: 1px;
+                  width: 100%;
+                  background-color: rgba(6, 52, 147, 0.6);
+                }
+
+                .value-text {
+                  position: absolute;
+                  left: 50%;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
+                  color: #fff;
+                  font-size: 22px;
+                  font-family: 'yjsz';
+                  font-weight: 500;
+                }
+              }
+
+              .value-text1 {
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                font-size: 22px;
+                font-family: 'yjsz';
+                font-weight: 500;
+              }
+            }
+          }
+        }
+
+        .three-modal {
+          width: 100%;
+          height: 100%;
+          padding: 20px 17px 20px 15px;
+          box-sizing: border-box;
+          position: relative;
+
+          .btn-icon {
+            width: 34px;
+            height: 34px;
+            background: url('../../../../assets/assets/image/home/tobig.png') center no-repeat;
+            background-size: 100% 100%;
+            position: absolute;
+            z-index: 99999;
+            bottom: 0;
+            right: 0;
+          }
         }
       }
 
-      .column-item {
-        width: 100%;
+      .wind-box {
         display: flex;
-        justify-content: center;
-        color: #fff;
-        height: 60px;
-        animation: move 10s linear infinite;
-
-        .item-column {
-          width: 25%;
-          text-align: center;
-        }
+        flex: 1;
+        width: 100%;
+        background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
+        background-size: 100% 100%;
       }
     }
 
-    @keyframes move {
-      0% {
-        transform: translateY(0px);
-      }
+    .right-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+      height: 100%;
 
-      100% {
-        transform: translateY(-269px);
+      .monitor-box {
+        display: flex;
+        flex: 1;
+        width: 100%;
+        background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
+        background-size: 100% 100%;
       }
-    }
 
-    @keyframes move1 {
-      0% {
-        transform: translateY(0px);
+      .monitor-box1 {
+        margin: 10px 0px;
       }
     }
-
   }
-}</style>
+}
+
+
+// #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
+//   width: 100% !important;
+//   height: 100% !important;
+// }</style>

+ 3 - 7
src/views/vent/monitorManager/beltTunMonitor/components/beltTunGasHome.vue

@@ -227,20 +227,16 @@ onUnmounted(() => {
   @import '/@/design/vent/modal.less';
 
   .@{ventSpace}-select-dropdown {
-    background: transparent !important;
+    background: #ffffff !important;
     border-bottom: 1px solid rgba(236, 236, 236, 0.4);
     backdrop-filter: blur(10px);
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
-
     .@{ventSpace}-select-item-option-selected,
     .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
+      background-color: #ffffff33 !important;
     }
 
     .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
+      background-color: #ffffff33 !important;
     }
   }
 </style>

+ 3 - 6
src/views/vent/monitorManager/beltTunMonitor/components/beltTunHome.vue

@@ -314,20 +314,17 @@ onUnmounted(() => {
   @import '/@/design/vent/modal.less';
 
   .@{ventSpace}-select-dropdown {
-    background: transparent !important;
+    background: #ffffff !important;
     border-bottom: 1px solid rgba(236, 236, 236, 0.4);
     backdrop-filter: blur(10px);
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
 
     .@{ventSpace}-select-item-option-selected,
     .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
+      background-color: #ffffff33 !important;
     }
 
     .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
+      background-color: #ffffff33 !important;
     }
   }
 </style>

+ 10 - 0
src/views/vent/monitorManager/camera/camera.api.ts

@@ -0,0 +1,10 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/ventanaly-device/safety/ventanalyCamera/list',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });

+ 1 - 1
src/views/vent/monitorManager/comment/less/workFace.less

@@ -688,5 +688,5 @@
 }
 
 :deep(.zxm-select-dropdown) {
-  background: transparent !important;
+  background: #ffffff !important;
 }

+ 0 - 1
src/views/vent/monitorManager/compressor/index.vue

@@ -102,7 +102,6 @@ async function getSelectRow(deviceID) {
 
 // 获取模型类型
 function changeModalType(currentData) {
-  debugger
   optionType.value = currentData['strtype']
   if (currentData['strsystype'] === '1') {
     // 地上

+ 0 - 1
src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -318,7 +318,6 @@ const onSelect: TreeProps['onSelect'] = (keys, e) => {
   }
   selectedKeys.value = keys
   treeNodeTitle.value = e.node.title
-  debugger
   dataSource.value = []
 };
 

+ 0 - 1
src/views/vent/monitorManager/deviceMonitor/index.vue

@@ -29,7 +29,6 @@ const changePageType = (pageType) => {
 }
 
 watch(() => route.fullPath, (fullPath) => {
-  debugger
   // const { type, deviceType } = routeVal.query
   // if (type === 'tunMonitor') {
   //   pageData.value = { pageType: deviceType }

+ 3 - 6
src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceGasHome.vue

@@ -227,20 +227,17 @@ onUnmounted(() => {
   @import '/@/design/vent/modal.less';
 
   .@{ventSpace}-select-dropdown {
-    background: transparent !important;
+    background: #ffffff !important;
     border-bottom: 1px solid rgba(236, 236, 236, 0.4);
     backdrop-filter: blur(10px);
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
 
     .@{ventSpace}-select-item-option-selected,
     .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
+      background-color: #ffffff33 !important;
     }
 
     .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
+      background-color: #ffffff33 !important;
     }
   }
 </style>

+ 3 - 6
src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceHome.vue

@@ -304,20 +304,17 @@ onUnmounted(() => {
   @import '/@/design/vent/modal.less';
 
   .@{ventSpace}-select-dropdown {
-    background: transparent !important;
+    background: #ffffff !important;
     border-bottom: 1px solid rgba(236, 236, 236, 0.4);
     backdrop-filter: blur(10px);
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
 
     .@{ventSpace}-select-item-option-selected,
     .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
+      background-color: #ffffff33 !important;
     }
 
     .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
+      background-color: #ffffff33 !important;
     }
   }
 </style>

+ 3 - 6
src/views/vent/monitorManager/workFaceMonitor/components/workFaceGasHome.vue

@@ -232,20 +232,17 @@ onUnmounted(() => {
   @import '/@/design/vent/modal.less';
 
   .@{ventSpace}-select-dropdown {
-    background: transparent !important;
+    background: #ffffff !important;
     border-bottom: 1px solid rgba(236, 236, 236, 0.4);
     backdrop-filter: blur(10px);
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
 
     .@{ventSpace}-select-item-option-selected,
     .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
+      background-color: #ffffff33 !important;
     }
 
     .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
+      background-color: #ffffff33 !important;
     }
   }
 </style>

+ 3 - 6
src/views/vent/monitorManager/workFaceMonitor/components/workFaceHome.vue

@@ -312,20 +312,17 @@ onUnmounted(() => {
   @import '/@/design/vent/modal.less';
 
   .@{ventSpace}-select-dropdown {
-    background: transparent !important;
+    background: #ffffff !important;
     border-bottom: 1px solid rgba(236, 236, 236, 0.4);
     backdrop-filter: blur(10px);
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
 
     .@{ventSpace}-select-item-option-selected,
     .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
+      background-color: #ffffff33 !important;
     }
 
     .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
+      background-color: #ffffff33 !important;
     }
   }
 </style>

+ 4 - 6
src/views/vent/performance/fileDetail/index.vue

@@ -435,20 +435,18 @@
   }
   :deep(.@{ventSpace}-select-dropdown) {
     border: 1px solid #ececec66;
-    background: #004362 !important;
+    background: #ffffff !important;
     // left: 0px !important;
     backdrop-filter: blur(50px);
 
-    .@{ventSpace}-select-item {
-      color: #fff !important;
-    }
 
     .@{ventSpace}-select-item-option-selected,
     .@{ventSpace}-select-item-option-active {
-      background-color: #00678b66 !important;
+      background-color: #ffffff33 !important;
     }
+
     .@{ventSpace}-select-item:hover {
-      background-color: #008fc366 !important;
+      background-color: #ffffff33 !important;
     }
   }
 

Some files were not shown because too many files changed in this diff