提交新版本

pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       '@zxcvbn-ts/core':
         specifier: ^3.0.2
         version: 3.0.4
+      antd:
+        specifier: ^4.24.2
+        version: 4.24.15(react-dom@18.2.0)(react@18.2.0)
       axios:
         specifier: ^1.4.0
         version: 1.6.2
@@ -519,6 +522,36 @@ packages:
       vue: 3.3.13(typescript@5.3.3)
     dev: true
 
+  /@ant-design/icons@4.8.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-JRAuiqllnMsiZIO8OvBOeFconprC3cnMpJ9MvXrHh+H5co9rlg8/aSHQfLf5jKKe18lUgRaIwC2pz8YxH9VuCA==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-svg': 4.3.1
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      lodash: 4.17.21
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@ant-design/react-slick@1.0.2(react@18.2.0):
+    resolution: {integrity: sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      json2mq: 0.2.0
+      react: 18.2.0
+      resize-observer-polyfill: 1.5.1
+      throttle-debounce: 5.0.0
+    dev: false
+
   /@antfu/install-pkg@0.1.1:
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
     dependencies:
@@ -2342,6 +2375,20 @@ packages:
       '@iconify/iconify': 3.1.1
     dev: true
 
+  /@rc-component/portal@1.1.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@rollup/plugin-alias@5.1.0(rollup@3.29.4):
     resolution: {integrity: sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==}
     engines: {node: '>=14.0.0'}
@@ -3641,6 +3688,59 @@ packages:
       warning: 4.0.3
     dev: true
 
+  /antd@4.24.15(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-pXCNJB8cTSjQdqeW5RNadraiYiJkMec/Qt0Zh+fEKUK9UqwmD4TxIYs/xnEbyQIVtHHwtl0fW684xql73KhCyQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons': 4.8.1(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/react-slick': 1.0.2(react@18.2.0)
+      '@babel/runtime': 7.23.6
+      '@ctrl/tinycolor': 3.6.1
+      classnames: 2.4.0
+      copy-to-clipboard: 3.3.3
+      lodash: 4.17.21
+      moment: 2.30.0
+      rc-cascader: 3.7.3(react-dom@18.2.0)(react@18.2.0)
+      rc-checkbox: 3.0.1(react-dom@18.2.0)(react@18.2.0)
+      rc-collapse: 3.4.2(react-dom@18.2.0)(react@18.2.0)
+      rc-dialog: 9.0.2(react-dom@18.2.0)(react@18.2.0)
+      rc-drawer: 6.3.0(react-dom@18.2.0)(react@18.2.0)
+      rc-dropdown: 4.0.1(react-dom@18.2.0)(react@18.2.0)
+      rc-field-form: 1.38.2(react-dom@18.2.0)(react@18.2.0)
+      rc-image: 5.13.0(react-dom@18.2.0)(react@18.2.0)
+      rc-input: 0.1.4(react-dom@18.2.0)(react@18.2.0)
+      rc-input-number: 7.3.11(react-dom@18.2.0)(react@18.2.0)
+      rc-mentions: 1.13.1(react-dom@18.2.0)(react@18.2.0)
+      rc-menu: 9.8.4(react-dom@18.2.0)(react@18.2.0)
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-notification: 4.6.1(react-dom@18.2.0)(react@18.2.0)
+      rc-pagination: 3.2.0(react-dom@18.2.0)(react@18.2.0)
+      rc-picker: 2.7.6(react-dom@18.2.0)(react@18.2.0)
+      rc-progress: 3.4.2(react-dom@18.2.0)(react@18.2.0)
+      rc-rate: 2.9.3(react-dom@18.2.0)(react@18.2.0)
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-segmented: 2.1.2(react-dom@18.2.0)(react@18.2.0)
+      rc-select: 14.1.18(react-dom@18.2.0)(react@18.2.0)
+      rc-slider: 10.0.1(react-dom@18.2.0)(react@18.2.0)
+      rc-steps: 5.0.0(react-dom@18.2.0)(react@18.2.0)
+      rc-switch: 3.2.2(react-dom@18.2.0)(react@18.2.0)
+      rc-table: 7.26.0(react-dom@18.2.0)(react@18.2.0)
+      rc-tabs: 12.5.10(react-dom@18.2.0)(react@18.2.0)
+      rc-textarea: 0.4.7(react-dom@18.2.0)(react@18.2.0)
+      rc-tooltip: 5.2.2(react-dom@18.2.0)(react@18.2.0)
+      rc-tree: 5.7.12(react-dom@18.2.0)(react@18.2.0)
+      rc-tree-select: 5.5.5(react-dom@18.2.0)(react@18.2.0)
+      rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
+      rc-upload: 4.3.6(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      scroll-into-view-if-needed: 2.2.31
+    dev: false
+
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
     dev: true
@@ -3748,7 +3848,6 @@ packages:
 
   /array-tree-filter@2.1.0:
     resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
-    dev: true
 
   /array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
@@ -3840,7 +3939,6 @@ packages:
 
   /async-validator@4.2.5:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
-    dev: true
 
   /async@2.6.4:
     resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
@@ -4384,6 +4482,10 @@ packages:
       static-extend: 0.1.2
     dev: true
 
+  /classnames@2.4.0:
+    resolution: {integrity: sha512-lWxiIlphgAhTLN657pwU/ofFxsUTOWc2CRIFeoV5st0MGRJHStUnWIUJgDHxjUO/F0mXzGufXIM4Lfu/8h+MpA==}
+    dev: false
+
   /clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
@@ -4562,7 +4664,6 @@ packages:
 
   /compute-scroll-into-view@1.0.20:
     resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
-    dev: true
 
   /computeds@0.0.1:
     resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
@@ -4672,6 +4773,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /copy-to-clipboard@3.3.3:
+    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
+    dependencies:
+      toggle-selection: 1.0.6
+    dev: false
+
   /copy-to@2.0.1:
     resolution: {integrity: sha512-3DdaFaU/Zf1AnpLiFDeNCD4TOWe3Zl2RZaTzUvWiIk5ERzcCodOE20Vqq4fzCbNoHURFHT4/us/Lfq+S2zyY4w==}
     dev: false
@@ -4975,6 +5082,13 @@ packages:
       whatwg-url: 8.7.0
     dev: false
 
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.23.6
+    dev: false
+
   /dayjs@1.11.10:
     resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
 
@@ -5229,7 +5343,6 @@ packages:
 
   /dom-align@1.12.4:
     resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
-    dev: true
 
   /dom-scroll-into-view@2.0.1:
     resolution: {integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==}
@@ -8081,6 +8194,12 @@ packages:
     dev: true
     optional: true
 
+  /json2mq@0.2.0:
+    resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==}
+    dependencies:
+      string-convert: 0.2.1
+    dev: false
+
   /json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -8495,7 +8614,6 @@ packages:
     hasBin: true
     dependencies:
       js-tokens: 4.0.0
-    dev: true
 
   /lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
@@ -8836,6 +8954,10 @@ packages:
     resolution: {integrity: sha512-ySViT69/76t8VhE1xXHK6Ch4NcDd26gx0MzKXLO+F7NOtnqH68d9zF94nT8ZWSxXh8ELOERsnJO/sWt1xZYw5A==}
     dev: true
 
+  /moment@2.30.0:
+    resolution: {integrity: sha512-8XSlYFhOSJvnEJOas6RpDCNU2PYeVC+oE33d3Z9tIsXpD8LIgBeqrHPjP8es4b3fcJpf07D1PJWGDUfdbqDLnQ==}
+    dev: false
+
   /mousetrap@1.6.5:
     resolution: {integrity: sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==}
     dev: false
@@ -10181,10 +10303,559 @@ packages:
       unpipe: 1.0.0
     dev: false
 
+  /rc-align@4.0.15(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      dom-align: 1.12.4
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      resize-observer-polyfill: 1.5.1
+    dev: false
+
+  /rc-cascader@3.7.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-KBpT+kzhxDW+hxPiNk4zaKa99+Lie2/8nnI11XF+FIOPl4Bj9VlFZi61GrnWzhLGA7VEN+dTxAkNOjkySDa0dA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      array-tree-filter: 2.1.0
+      classnames: 2.4.0
+      rc-select: 14.1.18(react-dom@18.2.0)(react@18.2.0)
+      rc-tree: 5.7.12(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-checkbox@3.0.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-k7nxDWxYF+jDI0ZcCvuvj71xONmWRVe5+1MKcERRR9MRyP3tZ69b+yUCSXXh+sik4/Hc9P5wHr2nnUoGS2zBjA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-collapse@3.4.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-jpTwLgJzkhAgp2Wpi3xmbTbbYExg6fkptL67Uu5LCRVEj6wqmy0DHTjjeynsjOLsppHGHu41t1ELntZ0lEvS/Q==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-dialog@9.0.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-s3U+24xWUuB6Bn2Lk/Qt6rufy+uT+QvWkiFhNBcO9APLxcFFczWamaq7x9h8SCuhfc1nHcW4y8NbMsnAjNnWyg==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.4.0
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-drawer@6.3.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-uBZVb3xTAR+dBV53d/bUhTctCw3pwcwJoM7g5aX+7vgwt2zzVzoJ6aqFjYJpBlZ9zp0dVYN8fV+hykFE7c4lig==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.4.0
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-dropdown@4.0.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-OdpXuOcme1rm45cR0Jzgfl1otzmU4vuBVb+etXM8vcaULGokAKVpKlw8p6xzspG7jGd/XxShvq+N3VNEfk/l5g==}
+    peerDependencies:
+      react: '>=16.11.0'
+      react-dom: '>=16.11.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-field-form@1.38.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-O83Oi1qPyEv31Sg+Jwvsj6pXc8uQI2BtIAkURr5lvEYHVggXJhdU/nynK8wY1gbw0qR48k731sN5ON4egRCROA==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      async-validator: 4.2.5
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-image@5.13.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-iZTOmw5eWo2+gcrJMMcnd7SsxVHl3w5xlyCgsULUdJhJbnuI8i/AL0tVOsE7aLn9VfOh1qgDT3mC2G75/c7mqg==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.4.0
+      rc-dialog: 9.0.2(react-dom@18.2.0)(react@18.2.0)
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-input-number@7.3.11(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-aMWPEjFeles6PQnMqP5eWpxzsvHm9rh1jQOWXExUEIxhX62Fyl/ptifLHOn17+waDG1T/YUb6flfJbvwRhHrbA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-input@0.1.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-FqDdNz+fV2dKNgfXzcSLKvC+jEs1709t7nD+WdfjrdSaOcefpgc7BUJYadc3usaING+b7ediMTfKxuJBsEFbXA==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-mentions@1.13.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-FCkaWw6JQygtOz0+Vxz/M/NWqrWHB9LwqlY2RtcuFqWJNFK9njijOOzTSsBGANliGufVUzx/xuPHmZPBV0+Hgw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-menu: 9.8.4(react-dom@18.2.0)(react@18.2.0)
+      rc-textarea: 0.4.7(react-dom@18.2.0)(react@18.2.0)
+      rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-menu@9.8.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lmw2j8I2fhdIzHmC9ajfImfckt0WDb2KVJJBBRIsxPEw2kGkEfjLMUoB1NgiNT/Q5cC8PdjGOGQjHJIJMwyNMw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-overflow: 1.3.2(react-dom@18.2.0)(react@18.2.0)
+      rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-motion@2.9.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-notification@4.6.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-NSmFYwrrdY3+un1GvDAJQw62Xi9LNMSsoQyo95tuaYrcad5Bn9gJUL8AREufRxSQAQnr64u3LtP3EUyLYT6bhw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-overflow@1.3.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-pagination@3.2.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-5tIXjB670WwwcAJzAqp2J+cOBS9W3cH/WU1EiYwXljuZ4vtZXKlY2Idq8FZrnYBz8KhN3vwPo9CoV/SJS6SL1w==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-picker@2.7.6(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-H9if/BUJUZBOhPfWcPeT15JUI3/ntrG9muzERrXDkSoWmDj4yzmBvumozpxYrHwjcKnjyDGAke68d+whWwvhHA==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      date-fns: 2.30.0
+      dayjs: 1.11.10
+      moment: 2.30.0
+      rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-progress@3.4.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-iAGhwWU+tsayP+Jkl9T4+6rHeQTG9kDz8JAHZk4XtQOcYN5fj9H34NXNEdRdZx94VUDHMqCb1yOIvi8eJRh67w==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-rate@2.9.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-2THssUSnRhtqIouQIIXqsZGzRczvp4WsH4WvGuhiwm+LG2fVpDUJliP9O1zeDOZvYfBE/Bup4SgHun/eCkbjgQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-resize-observer@1.4.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      resize-observer-polyfill: 1.5.1
+    dev: false
+
+  /rc-segmented@2.1.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-qGo1bCr83ESXpXVOCXjFe1QJlCAQXyi9KCiy8eX3rIMYlTeJr/ftySIaTnYsitL18SvWf5ZEHsfqIWoX0EMfFQ==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-select@14.1.18(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-4JgY3oG2Yz68ECMUSCON7mtxuJvCSj+LJpHEg/AONaaVBxIIrmI/ZTuMJkyojall/X50YdBe5oMKqHHPNiPzEg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-overflow: 1.3.2(react-dom@18.2.0)(react@18.2.0)
+      rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      rc-virtual-list: 3.11.3(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-slider@10.0.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-igTKF3zBet7oS/3yNiIlmU8KnZ45npmrmHlUUio8PNbIhzMcsh+oE/r2UD42Y6YD2D/s+kzCQkzQrPD6RY435Q==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-steps@5.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-9TgRvnVYirdhbV0C3syJFj9EhCRqoJAsxt4i1rED5o8/ZcSv5TLIYyo4H8MCjLPvbe2R+oBAm/IYBEtC+OS1Rw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-switch@3.2.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-+gUJClsZZzvAHGy1vZfnwySxj+MjLlGRyXKXScrtCTcmiYNPzxDFOxdQ/3pK1Kt/0POvwJ/6ALOR8gwdXGhs+A==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-table@7.26.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-0cD8e6S+DTGAt5nBZQIPFYEaIukn17sfa5uFL98faHlH/whZzD8ii3dbFL4wmUDEL4BLybhYop+QUfZJ4CPvNQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-tabs@12.5.10(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Ay0l0jtd4eXepFH9vWBvinBjqOpqzcsJTerBGwJy435P2S90Uu38q8U/mvc1sxUEVOXX5ZCFbxcWPnfG3dH+tQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-dropdown: 4.0.1(react-dom@18.2.0)(react@18.2.0)
+      rc-menu: 9.8.4(react-dom@18.2.0)(react@18.2.0)
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-textarea@0.4.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-IQPd1CDI3mnMlkFyzt2O4gQ2lxUsnBAeJEoZGJnkkXgORNqyM9qovdrCj9NzcRfpHgLdzaEbU3AmobNFGUznwQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      shallowequal: 1.1.0
+    dev: false
+
+  /rc-tooltip@5.2.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-jtQzU/18S6EI3lhSGoDYhPqNpWajMtS5VV/ld1LwyfrDByQpYmw/LW6U7oFXXLukjfDHQ7Ju705A82PRNFWYhg==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-trigger: 5.3.4(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-tree-select@5.5.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-k2av7jF6tW9bIO4mQhaVdV4kJ1c54oxV3/hHVU+oD251Gb5JN+m1RbJFTMf1o0rAFqkvto33rxMdpafaGKQRJw==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-select: 14.1.18(react-dom@18.2.0)(react@18.2.0)
+      rc-tree: 5.7.12(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-tree@5.7.12(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-LXA5nY2hG5koIAlHW5sgXgLpOMz+bFRbnZZ+cCg0tQs4Wv1AmY7EDi1SK7iFXhslYockbqUerQan82jljoaItg==}
+    engines: {node: '>=10.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      rc-virtual-list: 3.11.3(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-trigger@5.3.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-mQv+vas0TwKcjAO2izNPkqR4j86OemLRmvL2nOzdP9OWNWA1ivoTt5hzFqYNW9zACwmTezRiN8bttrC7cZzYSw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-align: 4.0.15(react-dom@18.2.0)(react@18.2.0)
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-upload@4.3.6(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Bt7ESeG5tT3IY82fZcP+s0tQU2xmo1W6P3S8NboUUliquJLQYLkUcsaExi3IlBVr43GQMCjo30RA2o0i70+NjA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /rc-util@5.38.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 18.2.0
+    dev: false
+
+  /rc-virtual-list@3.11.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@babel/runtime': 7.23.6
+      classnames: 2.4.0
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /react-dom@18.2.0(react@18.2.0):
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+    peerDependencies:
+      react: ^18.2.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.23.0
+    dev: false
+
   /react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: false
 
+  /react-is@18.2.0:
+    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+    dev: false
+
+  /react@18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -10569,11 +11240,16 @@ packages:
       xmlchars: 2.2.0
     dev: false
 
+  /scheduler@0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /scroll-into-view-if-needed@2.2.31:
     resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
     dependencies:
       compute-scroll-into-view: 1.0.20
-    dev: true
 
   /scule@1.1.1:
     resolution: {integrity: sha512-sHtm/SsIK9BUBI3EFT/Gnp9VoKfY6QLvlkvAE6YK7454IF8FSgJEAnJpVdSC7K5/pjI5NfxhzBLW2JAfYA/shQ==}
@@ -10647,6 +11323,10 @@ packages:
     resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
     dev: true
 
+  /shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+    dev: false
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -10939,6 +11619,10 @@ packages:
     engines: {node: '>=0.6.19'}
     dev: true
 
+  /string-convert@0.2.1:
+    resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}
+    dev: false
+
   /string-length@4.0.2:
     resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
     engines: {node: '>=10'}
@@ -11480,7 +12164,6 @@ packages:
   /throttle-debounce@5.0.0:
     resolution: {integrity: sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==}
     engines: {node: '>=12.22'}
-    dev: true
 
   /through2@4.0.2:
     resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
@@ -11547,6 +12230,10 @@ packages:
       safe-regex: 1.1.0
     dev: true
 
+  /toggle-selection@1.0.6:
+    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
+    dev: false
+
   /toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}

src/locales/lang/zh-CN/routes/vent.json

@@ -2,22 +2,24 @@
   "fire": {
     "fire": "火灾",
     "home": "火灾预警监测",
-    "workFace": "工作面监测预警分析",
-    "fireMonitor": "机电硐室防灭火监控系统",
-    "fireCompositeWarn":"综采预警",
+    "fireCompositeWarn":"工作面监测预警分析",
+    "Atomizing":"工作面监测预警分析(1)",
     "goaf": "密闭采空区监测预警分析",
-    "chamber": "变电硐室防灭火监测预警分析",
-    "beltConveyor": "带试运输机放灭火监测预警分析",
-    "securityMonitor": "安全监控系统预警分析",
+    "goaflist": "密闭采空区监测预警分析(1)",
+    "fireMonitor": "变电硐室防灭火监控预警系统",
+    "workFace":"工作面监测预警分析",
+    "beltConveyor": "带试运输机放灭火监测系统",
+    "fireDistributionPoint":"安全监控系统预警分析",
     "nitrogen": "智能注氮系统监测分析",
     "grout": "智能灌浆系统监测分析"
+   
   },
   "dust": {
     "dust": "粉尘",
     "home": "粉尘预警监测",
-    "workFace": "工作面监测预警分析",
     "dustWarnAnalysis":"粉尘监测预警分析",
-    "beltConveyor": "胶带运输转载点监测预警分析",
-    "dustMonitor": "智能喷雾降尘监测系统"
+    "dustWarnAnalysislist":"粉尘监测预警分析(1)",
+    "dustAtomizing":"智能喷雾降尘装置"
+  
   }
 }

src/router/routes/vent/dust.ts

@@ -22,14 +22,7 @@ const dust: AppRouteModule = {
       // component: () => import('@/views/vent/dust/home/index.vue'),
       component: () => import('@/views/vent/dust/dustHome/index.vue'),
     },
-    {
-      path: 'dust-workFace',
-      name: 'dustWorkFace',
-      meta: {
-        title: t('routes.vent.dust.workFace'),
-      },
-      component: () => import('@/views/vent/dust/wokeFace/index.vue'),
-    },
+    
     {
       path: 'dust-warnAnalysis',
       name: 'dustWarnAnalysis',
@@ -38,6 +31,22 @@ const dust: AppRouteModule = {
       },
       component: () => import('@/views/vent/dust/dustWarnAnalysis/index.vue'),
     },
+    {
+      path: 'dust-warnAnalysisList',
+      name: 'dustWarnAnalysisList',
+      meta: {
+        title: t('routes.vent.dust.dustWarnAnalysislist'),
+      },
+      component: () => import('@/views/vent/dust/dustWarnAnalysisList/index.vue'),
+    },
+    {
+      path: 'dust-atomizing',
+      name: 'dustAtomizing',
+      meta: {
+        title: t('routes.vent.dust.dustAtomizing'),
+      },
+      component: () => import('@/views/vent/dust/dustAtomizing/index.vue'),
+    },
   ],
 };
 

src/router/routes/vent/fire.ts

@@ -23,12 +23,36 @@ const fire: AppRouteModule = {
       component: () => import('@/views/vent/fire/fireHome/index.vue'),
     },
     {
-      path: 'fire-workFace',
-      name: 'fireWorkFace',
+      path: 'fire-composite-warn',
+      name: 'fireCompositeWarn',
       meta: {
-        title: t('routes.vent.fire.workFace'),
+        title: t('routes.vent.fire.fireCompositeWarn'),
       },
-      component: () => import('@/views/vent/fire/wokeFace/index.vue'),
+      component: () => import('@/views/vent/fire/compositeWarn/index.vue'),
+    },
+     {
+      path: 'fire-atomizing',
+      name: 'fireAtomizing',
+      meta: {
+        title: t('routes.vent.fire.Atomizing'),
+      },
+      component: () => import('@/views/vent/fire/fireAtomizing/index.vue'),
+    },
+    {
+      path: 'fire-goaf',
+      name: 'fireGoaf',
+      meta: {
+        title: t('routes.vent.fire.goaf'),
+      },
+      component: () => import('@/views/vent/fire/fireGoaf/index.vue'),
+    },
+    {
+      path: 'fire-goafList',
+      name: 'fireGoafList',
+      meta: {
+        title: t('routes.vent.fire.goaflist'),
+      },
+      component: () => import('@/views/vent/fire/fireGoafList/index.vue'),
     },
     {
       path: 'fire-monitor',
@@ -39,13 +63,27 @@ const fire: AppRouteModule = {
       component: () => import('@/views/vent/fire/fireMonitor/index.vue'),
     },
     {
-      path: 'fire-composite-warn',
-      name: 'fireCompositeWarn',
+      path: 'fire-workFace',
+      name: 'fireWorkFace',
       meta: {
-        title: t('routes.vent.fire.fireCompositeWarn'),
+        title: t('routes.vent.fire.beltConveyor'),
       },
-      component: () => import('@/views/vent/fire/compositeWarn/index.vue'),
+      component: () => import('@/views/vent/fire/wokeFace/index.vue'),
+    },
+    {
+      path: 'fire-distributionPoint',
+      name: 'fireDistributionPoint',
+      meta: {
+        title: t('routes.vent.fire.fireDistributionPoint'),
+      },
+      component: () => import('@/views/vent/fire/fireDistributionPoint/index.vue'),
     },
+    
+  
+   
+   
+   
+   
   ],
 };
 

src/views/vent/common/basicEchartLine.vue

@@ -36,7 +36,7 @@
             type: 'line',
             lineStyle: {
               color: {
-                type: 'solid',
+                type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 0,

src/views/vent/common/basicSensor.vue

@@ -9,6 +9,7 @@
         <div class="content-item-bg" :style="{ width: `${widthV}%` }"></div>
         <span>{{ items.name }}</span>
         <span>{{ items.status }}</span>
+        <span>{{ items.warn }}</span>
         <span>{{ items.times }}</span>
       </div>
     </div>
@@ -123,7 +124,7 @@
         justify-content: space-around;
         width: 100%;
         height: 32px;
-        margin-bottom: 10px;
+        margin-bottom: 15px;
         background: url('../../../assets/images/workPlaceWarn/work-bot.png') no-repeat center;
         background-size: 100% 100%;
 

src/views/vent/common/basicTree.vue

@@ -1,17 +1,18 @@
 <template>
     <div class="basicTree">
-        <a-tree :tree-data="treeDatas" show-icon default-expand-all v-model:selectedKeys="selectedKeys"
+        <Tree :tree-data="treeDatas" show-icon default-expand-all v-model:selectedKeys="selectedKeys"
             v-model:expandedKeys="expandedKeys">
             <template #switcherIcon>
                 <CaretDownOutlined />
             </template>
 
-        </a-tree>
+        </Tree>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, defineProps, watch } from 'vue'
+import { Tree } from 'ant-design-vue';
 import { CaretDownOutlined, } from '@ant-design/icons-vue';
 
 let props = defineProps({
@@ -54,36 +55,30 @@ watch(() => props.treeData, (newV, oldV) => {
 
 }, { immediate: true, deep: true })
 
-
-
-
-
-
-
-
 </script>
 
 <style lang="less" scoped>
 .basicTree {
     position: relative;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     padding: 15px 10px;
-    box-sizing: border-box;
 }
 
-:deep(.zxm-tree) {
-    color: #fff;
+:deep(.vMonitor-tree) {
     background-color: transparent;
+    color: #fff;
     letter-spacing: 1px;
 }
 
-:deep(.zxm-tree .zxm-tree-node-content-wrapper.zxm-tree-node-selected) {
+:deep(.vMonitor-tree .vMonitor-tree-node-content-wrapper.vMonitor-tree-node-selected) {
     background-color: transparent;
     color: #02bbe9;
 }
 
-:deep(.zxm-tree .zxm-tree-node-content-wrapper:hover) {
+:deep(.vMonitor-tree .vMonitor-tree-node-content-wrapper:hover) {
     background-color: transparent;
     color: #02bbe9;
-}</style>
+}
+</style>

src/views/vent/common/danelBd.vue

@@ -1,56 +1,40 @@
 <template>
   <div class="danelBd">
-    <div
-      v-if="moduleName"
-      class="dane-title"
-      :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '5px' }"
-    >
+    <div v-if="moduleNames" class="dane-title"
+      :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '5px' }">
       <div :class="commonTitle == 'selected' ? 'common-navL' : 'common-navL1'">
         <img src="@/assets/images/fire/firehome/title-2.png" alt="" />
-        <span>{{ moduleName }}</span>
+        <span>{{ moduleNames }}</span>
+        <CaretDownOutlined v-if="moduleIndex && commonTitle == 'datePikers'" :size="18" @click="toggleModule" />
+        <CaretUpOutlined v-if="!moduleIndex && commonTitle == 'datePikers'" :size="18" @click="toggleModule" />
+
+        <div class="module-select" v-if="moduleIndex">
+          <div class="select-box" v-for="(item, index) in moduleSelects" :key="index" @click="toggleModuleName(item)">{{
+            item.label }}</div>
+        </div>
       </div>
 
       <div :class="commonTitle == 'selected' ? 'common-navR' : 'common-navR1'">
         <!-- 下拉框 -->
         <div class="common-navR-select" v-if="commonTitle == 'selected'">
-          <a-select
-            style="width: 140px"
-            v-model="selectVal"
-            size="small"
-            allowClear
-            class="code-mode-select"
-            placeholder="请选择"
-          >
-            <a-select-option v-for="device in selectList" :key="device.value" :value="device.value"
-              >{{ device.label }}
-            </a-select-option>
-          </a-select>
+
+          <Select style="width: 140px" :options="selectLists" size="small" placeholder="请选择" v-model:value="selectVal"
+            allowClear />
         </div>
         <!-- 日期组件 -->
         <div class="common-navR-date" v-if="commonTitle == 'datePikers'">
-          <a-range-picker
-            size="small"
-            style="width: 100%"
-            :show-time="{ format: 'HH:mm' }"
-            format="YYYY-MM-DD HH:mm"
-            :placeholder="['开始时间', '结束时间']"
-            @change="onChange"
-            @ok="onOk"
-          />
+          <RangePicker size="small" style="width: 100%" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+            :placeholder="['开始时间', '结束时间']" @change="onChange" @ok="onOk" />
         </div>
         <!-- 开关组件 -->
         <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
           <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
-          <a-switch v-model:checked="checked" />
+          <Switch v-model:checked="checked" />
           <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
         </div>
       </div>
     </div>
-    <div
-      v-if="contentStyle.contentH != '0px'"
-      class="dane-content"
-      :style="{ height: contentStyle.contentH }"
-    >
+    <div v-if="contentStyle.contentH != '0px'" class="dane-content" :style="{ height: contentStyle.contentH }">
       <div class="t-line"></div>
       <slot></slot>
     </div>
@@ -58,194 +42,278 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, defineProps } from 'vue';
-
-  let props = defineProps({
-    //标题
-    moduleName: {
-      type: String,
-      default: '',
-    },
-    //样式
-    contentStyle: {
-      type: Object,
-      default: () => {
-        return {
-          contentH: '0px',
-        };
-      },
+import { ref, reactive, defineProps, watch } from 'vue';
+import { Select, RangePicker, Switch } from 'ant-design-vue';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
+
+let props = defineProps({
+  //标题
+  moduleName: {
+    type: String,
+    default: '',
+  },
+  //样式
+  contentStyle: {
+    type: Object,
+    default: () => {
+      return {
+        contentH: '0px',
+      };
     },
-
-    commonTitle: {
-      type: String,
-      default: '',
-    },
-  });
-
-  let selectVal = ref('');
-  let selectList = reactive([{ label: '全部', value: '全部' }]);
-
-  let checked = ref(false);
-
-  //切换时间选项
-  function onChange(value, dateString) {
-    console.log('Selected Time: ', value);
-    console.log('Formatted Selected Time: ', dateString);
-  }
-  function onOk(val) {
-    console.log('onOk: ', val);
+  },
+
+  commonTitle: {
+    type: String,
+    default: '',
+  },
+  //下拉列表数据
+  selectList: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  moduleSelect:{
+    type:Array,
+    default:()=>{
+      return []
+    }
   }
+});
+
+let moduleNames = ref('')
+let selectVal = ref('全部');
+let selectLists = ref<any[]>([])
+
+let checked = ref(false);
+
+let moduleIndex = ref(false)
+
+let moduleSelects=ref<any[]>([])
+
+
+//模块选项弹窗状态切换
+function toggleModule() {
+  moduleIndex.value = !moduleIndex.value
+
+}
+//切换模块选项名称
+function toggleModuleName(item) {
+  moduleNames.value = item.label
+  moduleIndex.value = false
+}
+
+//切换时间选项
+function onChange(value, dateString) {
+  console.log('Selected Time: ', value);
+  console.log('Formatted Selected Time: ', dateString);
+}
+function onOk(val) {
+  console.log('onOk: ', val);
+}
+
+watch(() => props.selectList, (newV, oldV) => {
+  console.log(newV, '下拉列表------')
+  selectLists.value = newV
+}, { immediate: true, deep: true })
+watch(() => props.moduleName, (newM, oldM) => {
+  moduleNames.value = newM
+}, { immediate: true })
+watch(()=>props.moduleSelect,(newS,oldS)=>{
+  console.log(newS,'newS--------')
+  moduleSelects.value=newS
+},{immediate:true,deep:true})
 </script>
 
 <style scoped lang="less">
-  .danelBd {
-    position: relative;
+.danelBd {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .dane-title {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
     width: 100%;
-    height: 100%;
+    height: 43px;
+    padding: 0 10px;
+    background: url('@/assets/images/fire/firehome/title-1.png') no-repeat center;
+    background-size: 100% 100%;
 
-    .dane-title {
+    .common-navL {
       display: flex;
-      box-sizing: border-box;
+      position: relative;
       align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      height: 43px;
-      padding: 0 10px;
-      background: url('@/assets/images/fire/firehome/title-1.png') no-repeat center;
-      background-size: 100% 100%;
-
-      .common-navL {
-        display: flex;
-        align-items: center;
-        width: 70%;
+      width: 70%;
 
-        img {
-          width: 18px;
-          height: 18px;
-        }
-
-        span {
-          margin-left: 10px;
-          color: #a1dff8;
-          font-size: 18px;
-        }
+      img {
+        width: 18px;
+        height: 18px;
       }
 
-      .common-navL1 {
-        display: flex;
-        align-items: center;
-        width: 50%;
+      span {
+        margin-left: 10px;
+        color: #a1dff8;
+        font-size: 18px;
+      }
+    }
 
-        img {
-          width: 18px;
-          height: 18px;
-        }
+    .common-navL1 {
+      display: flex;
+      position: relative;
+      align-items: center;
+      width: 50%;
 
-        span {
-          margin-left: 10px;
-          color: #a1dff8;
-          font-size: 18px;
-        }
+      img {
+        width: 18px;
+        height: 18px;
       }
 
-      .common-navR {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        width: 30%;
+      span {
+        margin-left: 10px;
+        color: #a1dff8;
+        font-size: 18px;
       }
+    }
 
-      .common-navR1 {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        width: 50%;
+    .module-select {
+      display: flex;
+      position: absolute;
+      z-index: 9999;
+      top: 33px;
+      left: 16px;
+      box-sizing: border-box;
+      flex-direction: column;
+      justify-content: flex-start;
+      width: 214px;
+      height: 136px;
+      padding: 10px;
+      overflow-y: auto;
+      border: 1px solid rgb(15 63 88);
+      border-radius: 10px;
+      background-color: #fff;
+
+      .select-box {
+        width: 100%;
+        height: 28px;
+        color: #000;
+        line-height: 28px;
+        text-align: center;
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgb(161 223 248 / 20%);
+        }
       }
 
-      .common-navR-switch {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        width: 70%;
+    }
 
-        .status-text {
-          color: #1fb3f7;
-        }
+    .common-navR {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 30%;
+    }
 
-        .status-text1 {
-          color: #a1dff8;
-        }
-      }
+    .common-navR1 {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 50%;
     }
 
-    .dane-content {
-      position: relative;
-      box-sizing: border-box;
-      width: 100%;
-      padding:10px 15px;
-      background: url('@/assets/images/fire/firehome/title-3.png') no-repeat center;
-      background-size: 100% 100%;
+    .common-navR-switch {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      width: 70%;
 
-      .t-line {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 20px;
-        background: url('@/assets/images/fire/firehome/title-4.png') no-repeat center;
-        background-size: 100% 100%;
+      .status-text {
+        color: #1fb3f7;
+      }
+
+      .status-text1 {
+        color: #a1dff8;
       }
     }
   }
 
-  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-    border: none;
-    background-color: rgb(255 255 255 / 10%);
+  .dane-content {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px 15px;
+    background: url('@/assets/images/fire/firehome/title-3.png') no-repeat center;
+    background-size: 100% 100%;
+
+    .t-line {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 20px;
+      background: url('@/assets/images/fire/firehome/title-4.png') no-repeat center;
+      background-size: 100% 100%;
+    }
   }
+}
 
-  ::v-deep .zxm-select-selection-item {
-    color: #a1dff8 !important;
-  }
 
-  ::v-deep .zxm-select-arrow {
-    color: #a1dff8 !important;
-  }
 
-  ::v-deep .zxm-select-selection-placeholder {
-    color: #a1dff8 !important;
-  }
 
-  ::v-deep .zxm-picker {
-    border: 1px solid #a1dff8 !important;
-    background-color: rgb(255 255 255 / 10%) !important;
-  }
 
-  ::v-deep .zxm-picker-input > input {
-    color: #a1dff8 !important;
-    text-align: center !important;
-  }
 
-  ::v-deep .zxm-picker-separator {
-    color: #a1dff8 !important;
-  }
+:deep(.vMonitor-select-selector) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  color: #a1dff8 !important;
+}
 
-  ::v-deep .zxm-picker-range .zxm-picker-active-bar {
-    display: none !important;
-  }
 
-  ::v-deep .zxm-picker-suffix {
-    color: #a1dff8 !important;
-  }
+:deep(.vMonitor-select-selection-placeholder) {
+  color: #a1dff8 !important;
+}
 
-  ::v-deep .zxm-switch {
-    min-width: 55px !important;
-  }
+:deep(.vMonitor-select-arrow) {
+  color: #a1dff8 !important;
+}
 
-  ::v-deep .zxm-switch-checked {
-    background-color: rgb(8 59 90) !important;
-  }
+:deep(.vMonitor-picker) {
+  border: none !important;
+  background-color: rgb(15 64 88) !important;
+  box-shadow: none;
+  color: #a1dff8 !important;
+}
 
-  ::v-deep .zxm-switch-handle::before {
-    background-color: rgb(33 179 247) !important;
-  }
+:deep(.vMonitor-picker-input >input) {
+  color: #a1dff8 !important;
+  text-align: center !important;
+}
+
+:deep(.vMonitor-picker-separator) {
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-picker-active-bar) {
+  display: none !important;
+}
+
+:deep(.vMonitor-picker-suffix) {
+  color: #a1dff8 !important;
+}
+
+:deep(.vMonitor-switch){
+  min-width: 55px !important;
+  
+}
+
+:deep(.vMonitor-switch-checked)  {
+  background-color: rgb(15 64 89) !important;
+}
+
+:deep(.vMonitor-switch-handle::before)  {
+  background-color: rgb(33 179 247) !important;
+}
 </style>

src/views/vent/dust/dustAtomizing/index.vue

@@ -0,0 +1,407 @@
+<template>
+  <div class="dustAtomizing">
+    <div class="dustAto-left-box">
+      <basicTree :treeData="treeData"></basicTree>
+    </div>
+    <div class="dustAto-right-box">
+      <div class="search-area">
+        <Form :model="formState" :label-col="{ span: 1.5 }">
+          <FormItem label="设备名称 : ">
+            <a-input v-model:value="formState.devicename" clearable placeholder="请输入..."
+              style="width:240px;margin-right: 20px;" />
+          </FormItem>
+          <FormItem label="">
+            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              查询
+            </a-button>
+            <a-button type="primary" style="height: 30px; padding: 2px 15px;background-color: #227fad;">
+              <template #icon>
+                <PlusOutlined />
+              </template>
+              新增
+            </a-button>
+          </FormItem>
+        </Form>
+      </div>
+      <div class="content-area">
+        <Table class="ant-table-striped" size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 720 }"
+          :pagination="false" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)">
+          <template #action="{ record }">
+            <a-button type="link">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              编辑
+            </a-button>
+            <a-button type="link">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              删除
+            </a-button>
+          </template>
+        </Table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import basicTree from '../../common/basicTree.vue'
+import { Form, FormItem, Table } from 'ant-design-vue';
+import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
+
+//查询条件
+let formState = reactive({
+  devicename: ''
+})
+
+//table 数据
+let dataSource = reactive([
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+])
+
+//table 列
+let columns = reactive([
+  {
+    title: '序号',
+    dataIndex: 'Index',
+    key: 'Index',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+    key: 'name',
+
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '安装位置',
+    dataIndex: 'age',
+    key: 'age',
+
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '喷雾状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '链接状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '设备状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '使用状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '控制状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '粉尘浓度',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '电池电量',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '是否定时',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '时间',
+    dataIndex: 'address',
+    key: 'address',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 200,
+    slots: { customRender: 'action' },
+    align: 'center',
+  },
+])
+
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+  { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
+</script>
+
+<style lang="less" scoped>
+.dustAtomizing {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
+
+  .dustAto-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
+  }
+
+  .dustAto-right-box {
+    box-sizing: border-box;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
+
+    .search-area {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      height: 70px;
+      padding: 0 20px;
+
+    }
+
+    .content-area {
+      height: calc(100% - 70px);
+
+    }
+
+  }
+}
+
+:deep(.vMonitor-form) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+:deep(.vMonitor-form-item-label >label) {
+  color: #fff;
+}
+
+:deep(.vMonitor-input) {
+  padding: 2px 11px;
+  border-color: #227fad;
+  background-color: rgb(38 74 96 20%);
+  color: #fff;
+}
+
+
+:deep(.vMonitor-table) {
+  background-color: transparent;
+  color: #fff;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-thead >tr>th) {
+  padding: 4px 0;
+  border-bottom: none;
+  background: rgb(34 127 173/ 50%);
+  color: #04ffdb;
+}
+
+:deep(.vMonitor-table-thead >tr>th:not(:last-child):not(.vMonitor-table-selection-column):not(.vMonitor-table-row-expand-icon-cell):not([colspan])::before) {
+  background: transparent;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-cell-scrollbar:not([rowspan])) {
+  box-shadow: none;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table:not(.vMonitor-table-bordered) .vMonitor-table-tbody >tr >td) {
+  border-top: none;
+}
+
+:deep(.vMonitor-table.vMonitor-table-small .vMonitor-table-tbody>tr>td) {
+  padding: 4px 8px;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr >td.vMonitor-table-cell-row-hover) {
+  background: rgb(38 74 96) !important;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr.vMonitor-table-row:hover>td) {
+  background: rgb(38 74 96) !important;
+}
+
+:deep(.table-striped td){
+  background-color: rgb(3 58 85 / 36%) !important;
+}
+</style>

src/views/vent/dust/dustHome/index.vue

@@ -3,21 +3,14 @@
     <!-- 模型区域 -->
     <!-- <div class="moduleArea"></div> -->
     <div class="main-container">
-      <a-select
-      ref="select"
-      v-model:value="value1"
-      style="width: 120px"
-      :options="options1"
-    
-    >
-    </a-select>
+
       <div class="left-area">
         <!-- 左上区域 -->
         <div class="left-t">
           <div class="tcontent-area">
             <div class="tcontent-l">
               <div>全矿井</div>
-            
+
               <div>监测区域</div>
             </div>
             <div class="tcontent-c">
@@ -28,7 +21,7 @@
         </div>
         <!-- 左中区域 -->
         <div class="left-c">
-          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '570px' }">
+          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '596px' }">
             <workJc :heightT="'26%'" :heightB="'74%'"></workJc>
           </DanelBd>
         </div>
@@ -40,7 +33,7 @@
       </div>
       <div class="center-area">
         <div class="center-b">
-          <DanelBd :moduleName="'81202综放工作面粉尘浓度'" :contentStyle="{ contentH: '332px' }" :commonTitle="'datePikers'">
+          <DanelBd :moduleName="'81202综放工作面粉尘浓度'" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '332px' }" :selectList="selectList" :commonTitle="'datePikers'">
             <multipleDust></multipleDust>
           </DanelBd>
         </div>
@@ -48,19 +41,19 @@
       <div class="right-area">
         <!-- 右上区域 -->
         <div class="right-t">
-          <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '280px' }">
+          <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '290px' }">
             <dustFallDevice></dustFallDevice>
           </DanelBd>
         </div>
         <!-- 右中区域 -->
         <div class="right-c">
-          <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '220px' }" commonTitle="selected">
+          <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '230px' }" >
             <dustGlzb></dustGlzb>
           </DanelBd>
         </div>
         <!-- 右下区域 -->
         <div class="right-b">
-          <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '135px' }" commonTitle="selected">
+          <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '140px' }" >
             <dustJtzb></dustJtzb>
           </DanelBd>
         </div>
@@ -72,7 +65,6 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-
 import DanelBd from '../../common/danelBd.vue'
 import workJc from '../../fire/fireHome/components/workJc.vue'
 import multipleDust from './components/multipleDust.vue'
@@ -80,27 +72,36 @@ import dustFallDevice from './components/dustFallDevice.vue'
 import dustGlzb from './components/dustGlzb.vue'
 import dustJtzb from './components/dustJtzb.vue'
 
-let  value1=ref('lucy')
-const options1 = ref<any[]>([
-      {
-        value: 'jack',
-        label: 'Jack',
-      },
-      {
-        value: 'lucy',
-        label: 'Lucy',
-      },
-      {
-        value: 'disabled',
-        label: 'Disabled',
-        disabled: true,
-      },
-      {
-        value: 'yiminghe',
-        label: 'Yiminghe',
-      },
-    ]);
-  
+let selectList = reactive([
+  { label: '全部', value: '全部' },
+  {
+    value: 'jack',
+    label: 'Jack',
+  },
+  {
+    value: 'lucy',
+    label: 'Lucy',
+  },
+  {
+    value: 'disabled',
+    label: 'Disabled',
+    disabled: true,
+  },
+  {
+    value: 'yiminghe',
+    label: 'Yiminghe',
+  },
+]);
+
+let moduleSelect = reactive([
+  { label: '81202综放工作面粉尘浓度' },
+  { label: '81203综放工作面' },
+  { label: '81206胶' },
+  { label: '81205主撤通道' },
+  { label: '81205辅撤通道' },
+])
+
+
 </script>
 
 <style lang="less" scoped>
@@ -112,8 +113,8 @@ const options1 = ref<any[]>([
 .dustHome {
   position: relative;
   width: calc(100% - 20px);
-  height: calc(100vh - 128px);
-  margin: 15px 10px;
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
 
   .moduleArea {
     width: 100%;

src/views/vent/dust/dustWarnAnalysis/index.vue

@@ -1,20 +1,27 @@
 <template>
   <div class="dustWarnAnalysis">
-    <div class="warn-top-box">
-      <basicCard :cardContentList="cardContentList" />
+    <div class="dustWarn-left-box">
+      <basicTree :treeData="treeData"></basicTree>
     </div>
-    <div class="warn-top-box1">
-      <basicCard1 :cardContentList1="cardContentList1"></basicCard1>
-    </div>
-    <div class="warn-bot-box">
-      <basicEchartLine></basicEchartLine>
+    <div class="dustWarn-right-box">
+      <div class="warn-top-box">
+        <basicCard :cardContentList="cardContentList" />
+      </div>
+      <div class="warn-top-box1">
+        <basicCard1 :cardContentList1="cardContentList1"></basicCard1>
+      </div>
+      <div class="warn-bot-box">
+        <basicEchartLine></basicEchartLine>
+      </div>
     </div>
+
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import { getAssetURL } from '../../../../utils/ui';
+import basicTree from '../../common/basicTree.vue'
 import basicCard from '../../common/basicCard.vue';
 import basicCard1 from '../../common/basicCard1.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
@@ -49,32 +56,67 @@ let cardContentList1 = reactive([
   { label: '呼尘加权容许浓度(mg/m³)', val: '2.5' },
   { label: '爆炸浓度(mg/m³)', val: '35.0' },
 ])
+
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+    { name: "81203综放工作面", value: "111", id: '1', pid: null },
+    { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+    { name: "81203综放工作面", value: "458", id: '2', pid: null },
+    { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+    { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+    { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+    { name: "81203综放工作面", value: "189", id: '3', pid: null },
+    { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+    { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+    { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+    { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
 </script>
 
 <style lang="less" scoped>
 .dustWarnAnalysis {
+  display: flex;
   position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: calc(100vh - 98px);
-  padding: 15px 10px;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
 
-  .warn-top-box {
-    width: 100%;
-    height: 110px;
-    margin-bottom: 15px;
+  .dustWarn-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
   }
 
-  .warn-top-box1 {
-    width: 100%;
-    height: 130px;
-    margin-bottom: 15px;
-  }
+  .dustWarn-right-box {
+    box-sizing: border-box;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
 
-  .warn-bot-box{
-    width: 100%;
-    height: calc(100% - 270px);
-    background-color: rgb(41 49 53 / 80%);
+    .warn-top-box {
+      width: 100%;
+      height: 110px;
+      margin-bottom: 15px;
+    }
+
+    .warn-top-box1 {
+      width: 100%;
+      height: 130px;
+      margin-bottom: 15px;
+    }
+
+    .warn-bot-box {
+      width: 100%;
+      height: calc(100% - 270px);
+      background-color: rgb(41 49 53 / 80%);
+    }
   }
+
+
 }
 </style>

src/views/vent/dust/dustWarnAnalysisList/index.vue

@@ -0,0 +1,407 @@
+<template>
+  <div class="dustWarnAnalysisList">
+    <div class="dustAto-left-box">
+      <basicTree :treeData="treeData"></basicTree>
+    </div>
+    <div class="dustAto-right-box">
+      <div class="search-area">
+        <Form :model="formState" :label-col="{ span: 1.5 }">
+          <FormItem label="设备名称 : ">
+            <a-input v-model:value="formState.devicename" clearable placeholder="请输入..."
+              style="width:240px;margin-right: 20px;" />
+          </FormItem>
+          <FormItem label="">
+            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              查询
+            </a-button>
+            <a-button type="primary" style="height: 30px; padding: 2px 15px;background-color: #227fad;">
+              <template #icon>
+                <PlusOutlined />
+              </template>
+              新增
+            </a-button>
+          </FormItem>
+        </Form>
+      </div>
+      <div class="content-area">
+        <Table class="ant-table-striped" size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 720 }"
+          :pagination="false" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)">
+          <template #action="{ record }">
+            <a-button type="link">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              编辑
+            </a-button>
+            <a-button type="link">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              删除
+            </a-button>
+          </template>
+        </Table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import basicTree from '../../common/basicTree.vue'
+import { Form, FormItem, Table } from 'ant-design-vue';
+import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
+
+//查询条件
+let formState = reactive({
+  devicename: ''
+})
+
+//table 数据
+let dataSource = reactive([
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+])
+
+//table 列
+let columns = reactive([
+  {
+    title: '序号',
+    dataIndex: 'Index',
+    key: 'Index',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+    key: 'name',
+
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '安装位置',
+    dataIndex: 'age',
+    key: 'age',
+
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '喷雾状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '链接状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '设备状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '使用状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '控制状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '粉尘浓度',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '电池电量',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '是否定时',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '时间',
+    dataIndex: 'address',
+    key: 'address',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 200,
+    slots: { customRender: 'action' },
+    align: 'center',
+  },
+])
+
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+  { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
+</script>
+
+<style lang="less" scoped>
+.dustWarnAnalysisList {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
+
+  .dustAto-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
+  }
+
+  .dustAto-right-box {
+    box-sizing: border-box;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
+
+    .search-area {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      height: 70px;
+      padding: 0 20px;
+
+    }
+
+    .content-area {
+      height: calc(100% - 70px);
+
+    }
+
+  }
+}
+
+:deep(.vMonitor-form) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+:deep(.vMonitor-form-item-label >label) {
+  color: #fff;
+}
+
+:deep(.vMonitor-input) {
+  padding: 2px 11px;
+  border-color: #227fad;
+  background-color: rgb(38 74 96 20%);
+  color: #fff;
+}
+
+
+:deep(.vMonitor-table) {
+  background-color: transparent;
+  color: #fff;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-thead >tr>th) {
+  padding: 4px 0;
+  border-bottom: none;
+  background: rgb(34 127 173/ 50%);
+  color: #04ffdb;
+}
+
+:deep(.vMonitor-table-thead >tr>th:not(:last-child):not(.vMonitor-table-selection-column):not(.vMonitor-table-row-expand-icon-cell):not([colspan])::before) {
+  background: transparent;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-cell-scrollbar:not([rowspan])) {
+  box-shadow: none;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table:not(.vMonitor-table-bordered) .vMonitor-table-tbody >tr >td) {
+  border-top: none;
+}
+
+:deep(.vMonitor-table.vMonitor-table-small .vMonitor-table-tbody>tr>td) {
+  padding: 4px 8px;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr >td.vMonitor-table-cell-row-hover) {
+  background: rgb(38 74 96) !important;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr.vMonitor-table-row:hover>td) {
+  background: rgb(38 74 96) !important;
+}
+
+:deep(.table-striped td){
+  background-color: rgb(3 58 85 / 36%) !important;
+}
+</style>

src/views/vent/dust/wokeFace/index.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="wokeFace">
-    <div class="woke-item-box">
-      <basicSensor :sensorTitle="sensorTitle" :sensorList="sensorList" :headList="headList" />
-    </div>
-    <div class="woke-item-box1">
-      <basicSensor :sensorTitle="sensorTitleJj" :sensorList="sensorList" :headList="headList" />
-    </div>
-    <div class="woke-item-box2">
-      <basicSensor :sensorTitle="sensorTitleZys" :sensorList="sensorList" :headList="headList" />
-    </div>
-    <div class="woke-item-box3">
-      <basicSensor :sensorTitle="sensorTitleJD" :sensorList="sensorList" :headList="headList" />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import basicSensor from '../../common/basicSensor.vue';
-
-  let sensorTitle = ref('综放工作面传感器监测');
-  let sensorTitleJj = ref('掘进工作面传感器监测');
-  let sensorTitleZys = ref('主运输系统传感器监测');
-  let sensorTitleJD = ref('机电硐室及配电点传感器监测');
-
-  let headList = reactive([
-    { id: 0, title: '测点位置' },
-    { id: 1, title: '测点值' },
-    { id: 3, title: '时间' },
-  ]);
-
-  let sensorList = reactive([
-    { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  ]);
-</script>
-<style lang="less" scoped>
-  .wokeFace {
-    display: flex;
-    position: relative;
-    box-sizing: border-box;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: 100%;
-    height: calc(100vh - 98px);
-    padding: 15px 10px;
-
-    .woke-item-box {
-      width: calc(50% - 10px);
-      height: calc(50% - 10px);
-      margin-right: 10px;
-      margin-bottom: 20px;
-    }
-
-    .woke-item-box1 {
-      width: calc(50% - 10px);
-      height: calc(50% - 10px);
-      margin-bottom: 20px;
-      margin-left: 10px;
-    }
-
-    .woke-item-box2 {
-      width: calc(50% - 10px);
-      height: calc(50% - 10px);
-      margin-right: 10px;
-    }
-
-    .woke-item-box3 {
-      width: calc(50% - 10px);
-      height: calc(50% - 10px);
-      margin-left: 10px;
-    }
-  }
-</style>

src/views/vent/fire/compositeWarn/index.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="compositeWarn">
-    <div class="composite-top-box">
-      <basicCard3 :card3List="card3List"></basicCard3>
+    <div class="composite-left-box">
+      <basicTree :treeData="treeData"></basicTree>
     </div>
-    <div class="composite-bot-box">
-      <basicEchartLine></basicEchartLine>
+    <div class="composite-right-box">
+      <div class="composite-top-box">
+        <basicCard3 :card3List="card3List"></basicCard3>
+      </div>
+      <div class="composite-bot-box">
+        <basicEchartLine></basicEchartLine>
+      </div>
     </div>
-
   </div>
 </template>
 
@@ -14,37 +18,77 @@
 import { ref, reactive } from 'vue'
 import basicCard3 from '../../common/basicCard3.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
+import basicTree from '../../common/basicTree.vue'
 
 let card3List = reactive([
-  { title: 'O₂', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'N₂', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'CO', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'CO₂', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
-  { title: 'CH₄', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'O2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'N2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'CO(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'CO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'CH4(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'C2H4(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'C2H2(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'H2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'NO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+])
+
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+  { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
 ])
 
 </script>
 
 <style lang="less" scoped>
 .compositeWarn {
+  display: flex;
   position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: calc(100vh - 98px);
-  padding: 15px 10px;
-
-  .composite-top-box {
-    width: 100%;
-    height: 235px;
-    margin-bottom: 15px;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
+
+  .composite-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
   }
 
-  .composite-bot-box {
-    width: 100%;
-    height: calc(100% - 250px);
-    border: 1px solid #1e96cd;
-    background-color: rgb(41 49 53 / 80%);
+  .composite-right-box {
+    box-sizing: border-box;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
 
+    .composite-top-box {
+      width: 100%;
+      height: 235px;
+      margin-bottom: 15px;
+    }
+
+    .composite-bot-box {
+      width: 100%;
+      height: calc(100% - 250px);
+      border: 1px solid #1e96cd;
+      background-color: rgb(41 49 53 / 80%);
+
+    }
   }
+
+
 }
 </style>

src/views/vent/fire/fireAtomizing/index.vue

@@ -0,0 +1,407 @@
+<template>
+  <div class="fireAtomizing">
+    <div class="dustAto-left-box">
+      <basicTree :treeData="treeData"></basicTree>
+    </div>
+    <div class="dustAto-right-box">
+      <div class="search-area">
+        <Form :model="formState" :label-col="{ span: 1.5 }">
+          <FormItem label="设备名称 : ">
+            <a-input v-model:value="formState.devicename" clearable placeholder="请输入..."
+              style="width:240px;margin-right: 20px;" />
+          </FormItem>
+          <FormItem label="">
+            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              查询
+            </a-button>
+            <a-button type="primary" style="height: 30px; padding: 2px 15px;background-color: #227fad;">
+              <template #icon>
+                <PlusOutlined />
+              </template>
+              新增
+            </a-button>
+          </FormItem>
+        </Form>
+      </div>
+      <div class="content-area">
+        <Table class="ant-table-striped" size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 720 }"
+          :pagination="false" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)">
+          <template #action="{ record }">
+            <a-button type="link">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              编辑
+            </a-button>
+            <a-button type="link">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              删除
+            </a-button>
+          </template>
+        </Table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import basicTree from '../../common/basicTree.vue'
+import { Form, FormItem, Table } from 'ant-design-vue';
+import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
+
+//查询条件
+let formState = reactive({
+  devicename: ''
+})
+
+//table 数据
+let dataSource = reactive([
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+])
+
+//table 列
+let columns = reactive([
+  {
+    title: '序号',
+    dataIndex: 'Index',
+    key: 'Index',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+    key: 'name',
+
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '安装位置',
+    dataIndex: 'age',
+    key: 'age',
+
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '喷雾状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '链接状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '设备状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '使用状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '控制状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '粉尘浓度',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '电池电量',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '是否定时',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '时间',
+    dataIndex: 'address',
+    key: 'address',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 200,
+    slots: { customRender: 'action' },
+    align: 'center',
+  },
+])
+
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+  { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
+</script>
+
+<style lang="less" scoped>
+.fireAtomizing {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
+
+  .dustAto-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
+  }
+
+  .dustAto-right-box {
+    box-sizing: border-box;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
+
+    .search-area {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      height: 70px;
+      padding: 0 20px;
+
+    }
+
+    .content-area {
+      height: calc(100% - 70px);
+
+    }
+
+  }
+}
+
+:deep(.vMonitor-form) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+:deep(.vMonitor-form-item-label >label) {
+  color: #fff;
+}
+
+:deep(.vMonitor-input) {
+  padding: 2px 11px;
+  border-color: #227fad;
+  background-color: rgb(38 74 96 20%);
+  color: #fff;
+}
+
+
+:deep(.vMonitor-table) {
+  background-color: transparent;
+  color: #fff;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-thead >tr>th) {
+  padding: 4px 0;
+  border-bottom: none;
+  background: rgb(34 127 173/ 50%);
+  color: #04ffdb;
+}
+
+:deep(.vMonitor-table-thead >tr>th:not(:last-child):not(.vMonitor-table-selection-column):not(.vMonitor-table-row-expand-icon-cell):not([colspan])::before) {
+  background: transparent;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-cell-scrollbar:not([rowspan])) {
+  box-shadow: none;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table:not(.vMonitor-table-bordered) .vMonitor-table-tbody >tr >td) {
+  border-top: none;
+}
+
+:deep(.vMonitor-table.vMonitor-table-small .vMonitor-table-tbody>tr>td) {
+  padding: 4px 8px;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr >td.vMonitor-table-cell-row-hover) {
+  background: rgb(38 74 96) !important;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr.vMonitor-table-row:hover>td) {
+  background: rgb(38 74 96) !important;
+}
+
+:deep(.table-striped td){
+  background-color: rgb(3 58 85 / 36%) !important;
+}
+</style>

src/views/vent/fire/fireDistributionPoint/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="fireDistributionPoint">
+    <div class="fireDis-left-box">
+      <basicTree :treeData="treeData"></basicTree>
+    </div>
+    <div class="fireDis-right-box">
+      <div class="woke-item-box">
+        <basicSensor :sensorTitle="sensorTitle" :sensorList="sensorList" :headList="headList" />
+      </div>
+      <div class="woke-item-box1">
+        <basicSensor :sensorTitle="sensorTitleJj" :sensorList="sensorList" :headList="headList" />
+      </div>
+      <div class="woke-item-box2">
+        <basicSensor :sensorTitle="sensorTitleZys" :sensorList="sensorList" :headList="headList" />
+      </div>
+      <div class="woke-item-box3">
+        <basicSensor :sensorTitle="sensorTitleJD" :sensorList="sensorList" :headList="headList" />
+      </div>
+    </div>
+
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import basicSensor from '../../common/basicSensor.vue';
+import basicTree from '../../common/basicTree.vue'
+
+let sensorTitle = ref('综放工作面传感器监测');
+let sensorTitleJj = ref('掘进工作面传感器监测');
+let sensorTitleZys = ref('主运输系统传感器监测');
+let sensorTitleJD = ref('机电硐室及配电点传感器监测');
+
+let headList = reactive([
+  { id: 0, title: '测点位置' },
+  { id: 1, title: '测点值' },
+  { id: 2, title: '预警级别' },
+  { id: 3, title: '时间' },
+]);
+
+let sensorList = reactive([
+  { id: 0, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+  { id: 1, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+  { id: 2, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+  { id: 0, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+  { id: 1, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+  { id: 2, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+  { id: 0, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+  { id: 1, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+  { id: 2, name: '上仓皮带1515', status: '无烟',warn:'低风险', times: '2023-11-07 16:53:48' },
+]);
+
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+  { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
+</script>
+<style lang="less" scoped>
+.fireDistributionPoint {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
+
+  .fireDis-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
+  }
+
+  .fireDis-right-box {
+    display: flex;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
+
+    .woke-item-box {
+      width: calc(50% - 10px);
+      height: calc(50% - 10px);
+      margin-right: 10px;
+      margin-bottom: 20px;
+    }
+
+    .woke-item-box1 {
+      width: calc(50% - 10px);
+      height: calc(50% - 10px);
+      margin-bottom: 20px;
+      margin-left: 10px;
+    }
+
+    .woke-item-box2 {
+      width: calc(50% - 10px);
+      height: calc(50% - 10px);
+      margin-right: 10px;
+    }
+
+    .woke-item-box3 {
+      width: calc(50% - 10px);
+      height: calc(50% - 10px);
+      margin-left: 10px;
+    }
+  }
+
+
+}
+</style>

src/views/vent/fire/fireGoaf/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="fireGoaf">
+    <div class="composite-left-box">
+      <basicTree :treeData="treeData"></basicTree>
+    </div>
+    <div class="composite-right-box">
+      <div class="composite-top-box">
+        <basicCard3 :card3List="card3List"></basicCard3>
+      </div>
+      <div class="composite-bot-box">
+        <basicEchartLine></basicEchartLine>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import basicCard3 from '../../common/basicCard3.vue';
+import basicEchartLine from '../../common/basicEchartLine.vue';
+import basicTree from '../../common/basicTree.vue'
+
+let card3List = reactive([
+  { title: 'O2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'N2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'CO(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'CO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'CH4(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'C2H4(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'C2H2(ppm)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'H2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+  { title: 'NO2(%)', ndLabel: '浓度 : ', ndVal: '14.79', tLabel: '时间 : ', tVal: '2023-05-14 15:26:24', aLabel: '位置 : ', aVal: '81203综放工作面' },
+])
+
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+  { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
+
+</script>
+
+<style lang="less" scoped>
+.fireGoaf {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
+
+  .composite-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
+  }
+
+  .composite-right-box {
+    box-sizing: border-box;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
+
+    .composite-top-box {
+      width: 100%;
+      height: 235px;
+      margin-bottom: 15px;
+    }
+
+    .composite-bot-box {
+      width: 100%;
+      height: calc(100% - 250px);
+      border: 1px solid #1e96cd;
+      background-color: rgb(41 49 53 / 80%);
+
+    }
+  }
+
+
+}
+</style>

src/views/vent/fire/fireGoafList/index.vue

@@ -0,0 +1,407 @@
+<template>
+  <div class="fireGoafList">
+    <div class="dustAto-left-box">
+      <basicTree :treeData="treeData"></basicTree>
+    </div>
+    <div class="dustAto-right-box">
+      <div class="search-area">
+        <Form :model="formState" :label-col="{ span: 1.5 }">
+          <FormItem label="设备名称 : ">
+            <a-input v-model:value="formState.devicename" clearable placeholder="请输入..."
+              style="width:240px;margin-right: 20px;" />
+          </FormItem>
+          <FormItem label="">
+            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              查询
+            </a-button>
+            <a-button type="primary" style="height: 30px; padding: 2px 15px;background-color: #227fad;">
+              <template #icon>
+                <PlusOutlined />
+              </template>
+              新增
+            </a-button>
+          </FormItem>
+        </Form>
+      </div>
+      <div class="content-area">
+        <Table class="ant-table-striped" size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 720 }"
+          :pagination="false" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)">
+          <template #action="{ record }">
+            <a-button type="link">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              编辑
+            </a-button>
+            <a-button type="link">
+              <template #icon>
+                <SearchOutlined />
+              </template>
+              删除
+            </a-button>
+          </template>
+        </Table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import basicTree from '../../common/basicTree.vue'
+import { Form, FormItem, Table } from 'ant-design-vue';
+import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
+
+//查询条件
+let formState = reactive({
+  devicename: ''
+})
+
+//table 数据
+let dataSource = reactive([
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+])
+
+//table 列
+let columns = reactive([
+  {
+    title: '序号',
+    dataIndex: 'Index',
+    key: 'Index',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+    key: 'name',
+
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '安装位置',
+    dataIndex: 'age',
+    key: 'age',
+
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '喷雾状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '链接状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '设备状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '使用状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '控制状态',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '粉尘浓度',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '电池电量',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '是否定时',
+    dataIndex: 'address',
+    key: 'address',
+    width: 80,
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '时间',
+    dataIndex: 'address',
+    key: 'address',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 200,
+    slots: { customRender: 'action' },
+    align: 'center',
+  },
+])
+
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+  { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
+</script>
+
+<style lang="less" scoped>
+.fireGoafList {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
+
+  .dustAto-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
+  }
+
+  .dustAto-right-box {
+    box-sizing: border-box;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
+
+    .search-area {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      height: 70px;
+      padding: 0 20px;
+
+    }
+
+    .content-area {
+      height: calc(100% - 70px);
+
+    }
+
+  }
+}
+
+:deep(.vMonitor-form) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+:deep(.vMonitor-form-item-label >label) {
+  color: #fff;
+}
+
+:deep(.vMonitor-input) {
+  padding: 2px 11px;
+  border-color: #227fad;
+  background-color: rgb(38 74 96 20%);
+  color: #fff;
+}
+
+
+:deep(.vMonitor-table) {
+  background-color: transparent;
+  color: #fff;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-thead >tr>th) {
+  padding: 4px 0;
+  border-bottom: none;
+  background: rgb(34 127 173/ 50%);
+  color: #04ffdb;
+}
+
+:deep(.vMonitor-table-thead >tr>th:not(:last-child):not(.vMonitor-table-selection-column):not(.vMonitor-table-row-expand-icon-cell):not([colspan])::before) {
+  background: transparent;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-cell-scrollbar:not([rowspan])) {
+  box-shadow: none;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table:not(.vMonitor-table-bordered) .vMonitor-table-tbody >tr >td) {
+  border-top: none;
+}
+
+:deep(.vMonitor-table.vMonitor-table-small .vMonitor-table-tbody>tr>td) {
+  padding: 4px 8px;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr >td.vMonitor-table-cell-row-hover) {
+  background: rgb(38 74 96) !important;
+}
+
+:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr.vMonitor-table-row:hover>td) {
+  background: rgb(38 74 96) !important;
+}
+
+:deep(.table-striped td){
+  background-color: rgb(3 58 85 / 36%) !important;
+}
+</style>

src/views/vent/fire/fireHome/components/emptyJc.vue

@@ -34,7 +34,7 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      background: url('@/assets/images/vent/fire/firehome/empty-qp.png') no-repeat center;
+      background: url('@/assets/images/fire/firehome/empty-qp.png') no-repeat center;
       background-size: 100% 100%;
 
       &:nth-child(1) {

src/views/vent/fire/fireHome/components/fiberBunbleJc.vue

@@ -71,7 +71,7 @@
       position: relative;
       width: 100%;
       height: 58px;
-      background: url('@/assets/images/vent/fire/firehome/fiber-jc.png') no-repeat center;
+      background: url('@/assets/images/fire/firehome/fiber-jc.png') no-repeat center;
       background-size: 100% 100%;
 
       .jc-title {
@@ -83,7 +83,7 @@
         left: 10%;
         width: 36px;
         height: 46px;
-        background: url('@/assets/images/vent/fire/firehome/O₂.png') no-repeat center;
+        background: url('@/assets/images/fire/firehome/O₂.png') no-repeat center;
         background-size: 100% 100%;
       }
 
@@ -92,7 +92,7 @@
         left: 9%;
         width: 56px;
         height: 46px;
-        background: url('@/assets/images/vent/fire/firehome/CH₄.png') no-repeat center;
+        background: url('@/assets/images/fire/firehome/CH₄.png') no-repeat center;
         background-size: 100% 100%;
       }
 
@@ -101,7 +101,7 @@
         left: 9%;
         width: 42px;
         height: 34px;
-        background: url('@/assets/images/vent/fire/firehome/CO.png') no-repeat center;
+        background: url('@/assets/images/fire/firehome/CO.png') no-repeat center;
         background-size: 100% 100%;
       }
 
@@ -110,7 +110,7 @@
         left: 9%;
         width: 56px;
         height: 46px;
-        background: url('@/assets/images/vent/fire/firehome/CO₂.png') no-repeat center;
+        background: url('@/assets/images/fire/firehome/CO₂.png') no-repeat center;
         background-size: 100% 100%;
       }
 

src/views/vent/fire/fireHome/components/outFireJc.vue

@@ -35,7 +35,7 @@
       position: relative;
       width: 157px;
       height: 160px;
-      background: url('@/assets/images/vent/fire/firehome/miehuo.png') no-repeat center;
+      background: url('@/assets/images/fire/firehome/miehuo.png') no-repeat center;
       background-size: 100% 100%;
 
       .outFire-title {
@@ -73,7 +73,7 @@
         left: 54px;
         width: 53px;
         height: 77px;
-        background: url('@/assets/images/vent/fire/firehome/temp.png') no-repeat center;
+        background: url('@/assets/images/fire/firehome/temp.png') no-repeat center;
         background-size: 100% 100%;
       }
 
@@ -83,7 +83,7 @@
         left: 34px;
         width: 89px;
         height: 67px;
-        background: url('@/assets/images/vent/fire/firehome/co1.png') no-repeat center;
+        background: url('@/assets/images/fire/firehome/co1.png') no-repeat center;
         background-size: 100% 100%;
       }
 
@@ -93,7 +93,7 @@
         left: 42px;
         width: 74px;
         height: 74px;
-        background: url('@/assets/images/vent/fire/firehome/smoke.png') no-repeat center;
+        background: url('@/assets/images/fire/firehome/smoke.png') no-repeat center;
         background-size: 100% 100%;
       }
     }

src/views/vent/fire/fireHome/components/safetyJc.vue

@@ -126,7 +126,7 @@
           height: 24px;
           margin-bottom: 10px;
           padding: 0 7px;
-          background: url('@/assets/images/vent/fire/firehome/safety1.png') no-repeat center;
+          background: url('@/assets/images/fire/firehome/safety1.png') no-repeat center;
           background-size: 100% 100%;
 
           span {
@@ -138,7 +138,7 @@
             flex: 2;
             align-items: center;
             justify-content: center;
-            background: url('@/assets/images/vent/fire/firehome/safety2.png') no-repeat center;
+            background: url('@/assets/images/fire/firehome/safety2.png') no-repeat center;
             background-size: 100% 100%;
           }
 

src/views/vent/fire/fireHome/components/substationJc.vue

@@ -189,6 +189,7 @@ onMounted(()=>{
     position: relative;
     width: 100%;
     height: 100%;
+
     .substation-box{
         width: 100%;
         height: 100%;

src/views/vent/fire/fireHome/components/systemJc.vue

@@ -25,7 +25,7 @@
       position: relative;
       width: 222px;
       height: 100%;
-      background: url('@/assets/images/vent/fire/firehome/zu-14578.png') no-repeat center;
+      background: url('@/assets/images/fire/firehome/zu-14578.png') no-repeat center;
       background-size: 100% 100%;
 
       .system-label {

src/views/vent/fire/fireHome/components/workJc.vue

@@ -252,7 +252,7 @@
           width: 100px;
           height: 100px;
           transform: translate(-50%, -50%);
-          background: url('@/assets/images/vent/fire/firehome/zu-e.png') no-repeat center;
+          background: url('@/assets/images/fire/firehome/zu-e.png') no-repeat center;
           background-size: 100% 100%;
         }
 
@@ -263,7 +263,7 @@
           width: 125px;
           height: 125px;
           animation: rotationLine 10s linear infinite;
-          background: url('@/assets/images/vent/fire/firehome/ty-e.png') no-repeat center;
+          background: url('@/assets/images/fire/firehome/ty-e.png') no-repeat center;
           background-size: 100% 100%;
         }
 
@@ -355,7 +355,7 @@
           position: relative;
           width: 100%;
           height: 100px;
-          background: url('@/assets/images/vent/fire/firehome/work-jc.png') no-repeat center;
+          background: url('@/assets/images/fire/firehome/work-jc.png') no-repeat center;
           background-size: 100% 100%;
 
           .card-l-label {

src/views/vent/fire/fireHome/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fireHome">
     <!-- 模型区域 -->
-    <div class="moduleArea"></div>
+    <!-- <div class="moduleArea"></div> -->
     <div class="main-container">
       <div class="left-area">
         <!-- 左上区域 -->
@@ -26,30 +26,18 @@
         </div>
         <!-- 左下区域 -->
         <div class="left-b">
-          <DanelBd
-            :moduleName="'密闭采空区监测系统'"
-            :contentStyle="{ contentH: '180px' }"
-            commonTitle="selected"
-          >
+          <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
             <emptyJc />
           </DanelBd>
         </div>
         <!-- 左底部区域 -->
         <div class="left-f">
-          <DanelBd
-            :moduleName="'GIS重点区域风险监测'"
-            :contentStyle="{ contentH: '0px' }"
-            commonTitle="switchs"
-          />
+          <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
         </div>
       </div>
       <div class="center-area">
         <div class="center-b">
-          <DanelBd
-            :moduleName="'工作面束管监测 | 工作面光钎监测'"
-            :contentStyle="{ contentH: '332px' }"
-            commonTitle="datePikers"
-          >
+          <DanelBd :moduleName="'工作面束管监测'" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '332px' }" commonTitle="datePikers">
             <fiberBunbleJc />
           </DanelBd>
         </div>
@@ -63,21 +51,13 @@
         </div>
         <!-- 右中区域 -->
         <div class="right-c">
-          <DanelBd
-            :moduleName="'带式输送机防灭火监控系统'"
-            :contentStyle="{ contentH: '180px' }"
-            commonTitle="selected"
-          >
+          <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
             <outFireJc />
           </DanelBd>
         </div>
         <!-- 右下区域 -->
         <div class="right-b">
-          <DanelBd
-            :moduleName="'变电硐室防灭火监控系统'"
-            :contentStyle="{ contentH: '180px' }"
-            commonTitle="selected"
-          >
+          <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
             <substationJc />
           </DanelBd>
         </div>
@@ -93,156 +73,163 @@
 </template>
 
 <script setup lang="ts">
-  import DanelBd from '../../common/danelBd.vue';
-  import workJc from './components/workJc.vue';
-  import emptyJc from './components/emptyJc.vue';
-  import fiberBunbleJc from './components/fiberBunbleJc.vue';
-  import systemJc from './components/systemJc.vue';
-  import outFireJc from './components/outFireJc.vue';
-  import substationJc from './components/substationJc.vue';
-  import safetyJc from './components/safetyJc.vue';
+import {ref,reactive} from 'vue'
+import DanelBd from '../../common/danelBd.vue';
+import workJc from './components/workJc.vue';
+import emptyJc from './components/emptyJc.vue';
+import fiberBunbleJc from './components/fiberBunbleJc.vue';
+import systemJc from './components/systemJc.vue';
+import outFireJc from './components/outFireJc.vue';
+import substationJc from './components/substationJc.vue';
+import safetyJc from './components/safetyJc.vue';
+
+let moduleSelect = reactive([
+  { label: '工作面束管监测' },
+  { label: '工作面光钎监测' },
+  
+])
 </script>
 
 <style lang="less" scoped>
-  @font-face {
-    font-family: douyuFont;
-    src: url('@/assets/font/douyuFont.otf');
+@font-face {
+  font-family: douyuFont;
+  src: url('@/assets/font/douyuFont.otf');
+}
+
+.fireHome {
+  position: relative;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+
+  .moduleArea {
+    width: 100%;
+    height: calc(100% - 15px);
   }
 
-  .fireHome {
-    position: relative;
+  .main-container {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    justify-content: space-between;
     width: 100%;
-    height: calc(100% - 88px);
-    margin-top: 88px;
-
-    .moduleArea {
-      width: 100%;
-      height: calc(100% - 15px);
-      margin-bottom: 15px;
-    }
+    height: 100%;
 
-    .main-container {
+    .left-area {
       display: flex;
-      position: relative;
+      flex-direction: column;
+      align-items: center;
       justify-content: space-between;
-      width: 100%;
-      height: calc(100% - 80px);
-      margin: 15px 0;
-
-      .left-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        width: 30%;
-        height: 100%;
-        margin-right: 15px;
-
-        .left-t {
-          position: relative;
+      width: 30%;
+      height: 100%;
+      margin-right: 15px;
+
+      .left-t {
+        position: relative;
+        width: 100%;
+        height: 121px;
+        background: url('@/assets/images/fire/firehome/qkjaq.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .tcontent-area {
+          display: flex;
+          position: absolute;
+          top: 50%;
+          left: 0;
+          box-sizing: border-box;
+          align-items: center;
+          justify-content: space-around;
           width: 100%;
-          height: 121px;
-          background: url('@/assets/images/vent/fire/firehome/qkjaq.png') no-repeat center;
-          background-size: 100% 100%;
+          height: 90px;
+          padding: 0 20px;
+          transform: translate(0, -50%);
 
-          .tcontent-area {
+          .tcontent-l {
             display: flex;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            box-sizing: border-box;
+            flex: 1;
+            flex-direction: column;
             align-items: center;
-            justify-content: space-around;
-            width: 100%;
-            height: 90px;
-            padding: 0 20px;
-            transform: translate(0, -50%);
-
-            .tcontent-l {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              color: #9da5aa;
-              font-size: 16px;
-              letter-spacing: 3px;
-            }
-
-            .tcontent-c {
-              display: flex;
-              flex: 3;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-            }
-
-            .tcontent-r {
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              color: #9da5aa;
-              font-size: 16px;
-              letter-spacing: 3px;
-            }
+            justify-content: center;
+            height: 100%;
+            color: #9da5aa;
+            font-size: 16px;
+            letter-spacing: 3px;
           }
-        }
 
-        .left-c {
-          width: 100%;
-        }
+          .tcontent-c {
+            display: flex;
+            flex: 3;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+          }
 
-        .left-b {
-          width: 100%;
+          .tcontent-r {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: #9da5aa;
+            font-size: 16px;
+            letter-spacing: 3px;
+          }
         }
+      }
 
-        .left-f {
-          width: 100%;
-        }
+      .left-c {
+        width: 100%;
       }
 
-      .center-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-end;
-        width: calc(40% - 40px);
+      .left-b {
+        width: 100%;
+      }
 
-        .center-b {
-          width: 100%;
-        }
+      .left-f {
+        width: 100%;
       }
+    }
 
-      .right-area {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        width: 30%;
-        height: 100%;
-        margin-left: 15px;
+    .center-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      width: calc(40% - 40px);
 
-        .right-t {
-          width: 100%;
-        }
+      .center-b {
+        width: 100%;
+      }
+    }
 
-        .right-c {
-          width: 100%;
-        }
+    .right-area {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      width: 30%;
+      height: 100%;
+      margin-left: 15px;
 
-        .right-b {
-          width: 100%;
-        }
+      .right-t {
+        width: 100%;
+      }
 
-        .right-f {
-          width: 100%;
-        }
+      .right-c {
+        width: 100%;
+      }
+
+      .right-b {
+        width: 100%;
+      }
+
+      .right-f {
+        width: 100%;
       }
     }
   }
+}
 </style>

src/views/vent/fire/fireMonitor/index.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="fireMonitor">
-    <div class="fire-top-box">
-      <basicCard2 :cardContentList2="cardContentList2"></basicCard2>
+    <div class="fireMon-left-box">
+      <basicTree :treeData="treeData"></basicTree>
     </div>
-    <div class="fire-bot-box">
-      <basicEchartLine></basicEchartLine>
+    <div class="fireMon-right-box">
+      <div class="fire-top-box">
+        <basicCard2 :cardContentList2="cardContentList2"></basicCard2>
+      </div>
+      <div class="fire-bot-box">
+        <basicEchartLine></basicEchartLine>
+      </div>
     </div>
+
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
+import basicTree from '../../common/basicTree.vue'
 import basicCard2 from '../../common/basicCard2.vue';
 import basicEchartLine from '../../common/basicEchartLine.vue';
 import { getAssetURL } from '../../../../utils/ui';
@@ -21,19 +28,51 @@ let cardContentList2 = reactive([
   { imgSrcL: getAssetURL('workPlaceWarn/jd-zdwd.png'), labelL: '最低温度(°C)', valL: '25.0', imgSrcR: '', labelR: '位置(m)', valR: '25.0' },
 ])
 
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+  { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
+
 
 
 </script>
 
 <style lang="less" scoped>
 .fireMonitor {
+  display: flex;
   position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: calc(100vh - 98px);
-  padding: 15px 10px;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
+
+  .fireMon-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
+  }
+
+  .fireMon-right-box {
+    box-sizing: border-box;
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
 
-  .fire-top-box {
+    .fire-top-box {
     width: 100%;
     height: 110px;
     margin-bottom: 15px;
@@ -44,5 +83,8 @@ let cardContentList2 = reactive([
     height: calc(100% - 125px);
     background-color: rgb(41 49 53 / 80%);
   }
+  }
+
+ 
 }
 </style>

src/views/vent/fire/wokeFace/index.vue

@@ -1,84 +1,121 @@
 <template>
   <div class="workPlaceWarn">
-    <div class="top-box-card">
-      <basicCard :cardContentList="cardContentList" />
+    <div class="workPlace-left-box">
+      <basicTree :treeData="treeData"></basicTree>
     </div>
-    <div class="top-box-btn">
-      <basicWorkBtn :workBtnList="workBtnList" />
-    </div>
-    <div class="center-box">
-      <basicEchartLine />
-    </div>
-    <div class="bot-box">
-      <div class="bot-box-card" v-for="(item, index) in botCardList" :key="index">
-        <basicSensor :sensorTitle="item.title" :sensorList="sensorList" :headList="headList" />
+    <div class="workPlace-right-box">
+      <div class="top-box-card">
+        <basicCard :cardContentList="cardContentList" />
+      </div>
+      <div class="top-box-btn">
+        <basicWorkBtn :workBtnList="workBtnList" />
+      </div>
+      <div class="center-box">
+        <basicEchartLine />
+      </div>
+      <div class="bot-box">
+        <div class="bot-box-card" v-for="(item, index) in botCardList" :key="index">
+          <basicSensor :sensorTitle="item.title" :sensorList="sensorList" :headList="headList" />
+        </div>
       </div>
     </div>
+
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import { getAssetURL } from '../../../../utils/ui';
-  import basicCard from '../../common/basicCard.vue';
-  import basicWorkBtn from '../../common/basicWorkBtn.vue';
-  import basicEchartLine from '../../common/basicEchartLine.vue';
-  import basicSensor from '../../common/basicSensor.vue';
-
-  let cardContentList = reactive([
-    { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度()', val: '18.1' },
-    { id: 1, imgSrc: getAssetURL('workPlaceWarn/smoke.png'), label: '烟雾', val: '无' },
-    { id: 2, imgSrc: getAssetURL('workPlaceWarn/dsnd.png'), label: '最高CO浓度()', val: '16.3' },
-    {
-      id: 3,
-      imgSrc: getAssetURL('workPlaceWarn/dspl.png'),
-      label: '自动喷淋灭火装置',
-      val: '打开',
-    },
-  ]);
-
-  let workBtnList = reactive([
-    { id: 0, name: '行人侧' },
-    { id: 1, name: '非行人侧' },
-  ]);
-
-  let botCardList = reactive([
-    { title: '烟雾传感器' },
-    { title: '一氧化碳传感器' },
-    { title: '自动喷淋灭火装置' },
-  ]);
-  let headList = reactive([
-    { id: 0, title: '测点位置' },
-    { id: 1, title: '测点值' },
-    { id: 3, title: '时间' },
-  ]);
-
-  let sensorList = reactive([
-    { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-    { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
-  ]);
+import { ref, reactive } from 'vue';
+import { getAssetURL } from '../../../../utils/ui';
+import basicCard from '../../common/basicCard.vue';
+import basicWorkBtn from '../../common/basicWorkBtn.vue';
+import basicEchartLine from '../../common/basicEchartLine.vue';
+import basicSensor from '../../common/basicSensor.vue';
+import basicTree from '../../common/basicTree.vue'
+
+let cardContentList = reactive([
+  { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度(℃)', val: '18.1' },
+  { id: 1, imgSrc: getAssetURL('workPlaceWarn/smoke.png'), label: '烟雾', val: '无' },
+  { id: 2, imgSrc: getAssetURL('workPlaceWarn/dsnd.png'), label: '最高CO浓度(ppm)', val: '16.3' },
+  {
+    id: 3,
+    imgSrc: getAssetURL('workPlaceWarn/dspl.png'),
+    label: '自动喷淋灭火装置',
+    val: '打开',
+  },
+]);
+
+let workBtnList = reactive([
+  { id: 0, name: '行人侧' },
+  { id: 1, name: '非行人侧' },
+]);
+
+let botCardList = reactive([
+  { title: '烟雾传感器' },
+  { title: '一氧化碳传感器' },
+  { title: '自动喷淋灭火装置' },
+]);
+let headList = reactive([
+  { id: 0, title: '测点位置' },
+  { id: 1, title: '测点值' },
+  { id: 3, title: '时间' },
+]);
+
+let sensorList = reactive([
+  { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
+  { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
+  { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
+  { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
+  { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
+  { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
+  { id: 0, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
+  { id: 1, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
+  { id: 2, name: '上仓皮带1515', status: '无烟', times: '2023-11-07 16:53:48' },
+]);
+//数据随便写的，不符合实际情况，因为懒得改
+const treeData = reactive([
+  { name: "81203综放工作面", value: "111", id: '1', pid: null },
+  { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
+  { name: "81203综放工作面", value: "458", id: '2', pid: null },
+  { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
+  { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
+  { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
+  { name: "81203综放工作面", value: "189", id: '3', pid: null },
+  { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
+  { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
+  { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
+  { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
+])
 </script>
 
 <style lang="less" scoped>
-  .workPlaceWarn {
-    position: relative;
+.workPlaceWarn {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 20px);
+  height: calc(100vh - 97px);
+  margin: 65px 10px 15px;
+  background: #282828;
+
+  .workPlace-left-box {
+    width: 220px;
+    height: 100%;
+    background-color: rgb(27 35 39 / 80%);
+  }
+
+  .workPlace-right-box {
     box-sizing: border-box;
-    width: 100%;
-    height: calc(100vh - 98px);
+    width: calc(100% - 230px);
+    height: 100%;
+    margin-left: 10px;
     padding: 15px 10px;
+    background-color: rgb(27 35 39 / 80%);
 
     .top-box-card {
       width: 100%;
       height: 110px;
       margin-bottom: 15px;
-      // background-color: rgba(27, 35, 39, .8);
     }
 
     .top-box-btn {
@@ -106,4 +143,7 @@
       }
     }
   }
+
+
+}
 </style>