Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

package.json

@@ -60,6 +60,8 @@
     "mky-svg": "^1.0.2",
     "mockjs": "^1.1.0",
     "moment": "^2.29.4",
+    "mxcad": "^1.0.195",
+    "mxdraw": "^0.1.263",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.1",
     "pinia": "2.1.6",

pnpm-lock.yaml

@@ -122,6 +122,12 @@ dependencies:
   moment:
     specifier: ^2.29.4
     version: 2.30.1
+  mxcad:
+    specifier: ^1.0.195
+    version: 1.0.195(three@0.162.0)
+  mxdraw:
+    specifier: ^0.1.263
+    version: 0.1.263(three@0.162.0)
   nprogress:
     specifier: ^0.2.0
     version: 0.2.0
@@ -207,14 +213,14 @@ dependencies:
     specifier: 3.5.13
     version: 3.5.13
   xgplayer:
-    specifier: ^3.0.13
-    version: 3.0.13(core-js@3.33.1)
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.33.1)
   xgplayer-flv:
-    specifier: ^3.0.13
-    version: 3.0.13(core-js@3.33.1)(xgplayer@3.0.13)
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.33.1)(xgplayer@3.0.14)
   xgplayer-hls:
-    specifier: ^3.0.13
-    version: 3.0.13(core-js@3.33.1)(xgplayer@3.0.13)
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.33.1)(xgplayer@3.0.14)
   xss:
     specifier: ^1.0.14
     version: 1.0.14
@@ -2276,6 +2282,12 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@fingerprintjs/fingerprintjs@4.2.2:
+    resolution: {integrity: sha512-scD+pDgNZW78LuFAr7ms2yxmDx2NWC4+K5iiOjPT2ZlTlHFbLsORUzLJI2rcKicxxLtHbvf3A7BU1drVr4iHGg==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /@fullcalendar/common@5.10.1:
     resolution: {integrity: sha512-EumKIJcQTvQdTs75/9dmeREFgjcRVWzqHJS1Xvlz5mNsmB+w9EINCHETRjChtAQg1WD/lTQyVj4sHsKO7vCMSw==, tarball: http://registry.npm.taobao.org/@fullcalendar/common/-/common-5.10.1.tgz}
     dependencies:
@@ -6815,6 +6827,12 @@ packages:
       batch-processor: 1.0.0
     dev: false
 
+  /element-resize-event-polyfill@1.0.5:
+    resolution: {integrity: sha512-HWjhWQIi8Ilw8YWyX5O4b7L2AIQE9SMP+LFoHrr6b1ZLIUIpqybA5eU3v2uWAnE0ptCxyLTT92IgLTehWldIfQ==}
+    dependencies:
+      resize-observer-polyfill: 1.5.1
+    dev: false
+
   /emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==, tarball: http://registry.npm.taobao.org/emittery/-/emittery-0.13.1.tgz}
     engines: {node: '>=12'}
@@ -7491,7 +7509,7 @@ packages:
     dev: false
 
   /eventemitter3@4.0.7:
-    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==, tarball: http://registry.npm.taobao.org/eventemitter3/-/eventemitter3-4.0.7.tgz}
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
   /eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==, tarball: http://registry.npm.taobao.org/eventemitter3/-/eventemitter3-5.0.1.tgz}
@@ -9906,6 +9924,10 @@ packages:
     hasBin: true
     dev: true
 
+  /jquery@3.7.1:
+    resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
+    dev: false
+
   /js-base64@2.6.4:
     resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==, tarball: http://registry.npm.taobao.org/js-base64/-/js-base64-2.6.4.tgz}
     dev: true
@@ -10713,6 +10735,30 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dev: true
 
+  /mxcad@1.0.195(three@0.162.0):
+    resolution: {integrity: sha512-bMQPRMt4jIHvHK4ixWUflHdZYri8u4zIYihA2UDyraLA1IYUeExgRNDtOocOsE/NfuH39L+xSDUtnpEIiS3zHQ==}
+    dependencies:
+      '@fingerprintjs/fingerprintjs': 4.2.2
+      iconv-lite: 0.6.3
+      mxdraw: 0.1.263(three@0.162.0)
+      threebox-plugin: 2.2.7
+    transitivePeerDependencies:
+      - three
+    dev: false
+
+  /mxdraw@0.1.263(three@0.162.0):
+    resolution: {integrity: sha512-pE25TfSc4y3dOCbpyPFHkfFz+UyZHV59yEqMZzYlPkYCUrpHjvbeeWz6A8j3rxzifLMMX2maPT8ocyzlZwuqHA==}
+    engines: {node: '>=6.0.0'}
+    peerDependencies:
+      three: ^0.113.2
+    dependencies:
+      element-resize-event-polyfill: 1.0.5
+      jquery: 3.7.1
+      lodash: 4.17.21
+      three: 0.162.0
+      three-gif-texture: 1.0.15
+    dev: false
+
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -12807,10 +12853,18 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==, tarball: http://registry.npm.taobao.org/text-table/-/text-table-0.2.0.tgz}
     dev: true
 
+  /three-gif-texture@1.0.15:
+    resolution: {integrity: sha512-GzTF6OtgdjqKOF+AtA0WgLguJ8/iqE5u9KQQadmgWLusM2ML82XvQJuoGD6MqQalC33prUeaf2zqTWCP8fR4rw==}
+    dev: false
+
   /three@0.162.0:
     resolution: {integrity: sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ==}
     dev: false
 
+  /threebox-plugin@2.2.7:
+    resolution: {integrity: sha512-H87Nm4w1PfisHPHzavTGXlwIoJpx2+QU57GooQYIhF51lsg+U5A0KGf3Jrv/HWsLCGOwV2BTnv7UTLfpO1EccQ==}
+    dev: false
+
   /throat@6.0.2:
     resolution: {integrity: sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==, tarball: http://registry.npm.taobao.org/throat/-/throat-6.0.2.tgz}
     dev: false
@@ -14098,34 +14152,34 @@ packages:
     resolution: {integrity: sha512-ORT6ghCRk0mUVavMBxetcPzUPskS6NGfntzpWazJ86e+XU0uK4HwHfDhN/jKATiyInrOH5RwQo9SO/+DB8XeBw==, tarball: http://registry.npm.taobao.org/xe-utils/-/xe-utils-3.5.13.tgz}
     dev: false
 
-  /xgplayer-flv@3.0.13(core-js@3.33.1)(xgplayer@3.0.13):
-    resolution: {integrity: sha512-oRQyTCWgV9KKLqnQztkd5l2jChjVwqGSfjBYAN8330XtMCaMgek6WEdHF64C6vP3q72ZbnFvDmTyb3Uot5brHQ==}
+  /xgplayer-flv@3.0.14(core-js@3.33.1)(xgplayer@3.0.14):
+    resolution: {integrity: sha512-9mSBUbbzkJhFjQOaU8SvnEzDj4Y9tkHsW0IaIxCDi/DlDcHzSubdiuuTVNf1A5cgUSTnFHxwDJtzqVm6FhmTeg==}
     peerDependencies:
       core-js: '>=3.12.1'
       xgplayer: '>=3.0.1'
     dependencies:
       core-js: 3.33.1
       eventemitter3: 4.0.7
-      xgplayer: 3.0.13(core-js@3.33.1)
-      xgplayer-streaming-shared: 3.0.13(core-js@3.33.1)
-      xgplayer-transmuxer: 3.0.13(core-js@3.33.1)
+      xgplayer: 3.0.14(core-js@3.33.1)
+      xgplayer-streaming-shared: 3.0.14(core-js@3.33.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.33.1)
     dev: false
 
-  /xgplayer-hls@3.0.13(core-js@3.33.1)(xgplayer@3.0.13):
-    resolution: {integrity: sha512-bOS6ocB8FWRYdKhg08AL4a/QZGNplDE1H2OZJxvuF/DF6muokxIajWC3kyqzxxbGOkUSIdr4wtDiA5rfMV5SJg==}
+  /xgplayer-hls@3.0.14(core-js@3.33.1)(xgplayer@3.0.14):
+    resolution: {integrity: sha512-UiVDiDcIzQ6kiDZitbyXqRx5nX/Pi69S9Vfh5lc+6R8SsA2ZyvxWtGOQ6XfpZyXYHfl56JMbyNObOgMT1iRNLw==}
     peerDependencies:
       core-js: '>=3.12.1'
-      xgplayer: '>=3.0.0'
+      xgplayer: 3.0.14
     dependencies:
       core-js: 3.33.1
       eventemitter3: 4.0.7
-      xgplayer: 3.0.13(core-js@3.33.1)
-      xgplayer-streaming-shared: 3.0.13(core-js@3.33.1)
-      xgplayer-transmuxer: 3.0.13(core-js@3.33.1)
+      xgplayer: 3.0.14(core-js@3.33.1)
+      xgplayer-streaming-shared: 3.0.14(core-js@3.33.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.33.1)
     dev: false
 
-  /xgplayer-streaming-shared@3.0.13(core-js@3.33.1):
-    resolution: {integrity: sha512-ovNk439/+6uVpMBKDzKq00bXMrDX6s+YHVt/Nl1vpawlgM3IoHKxezBki2FETlXvMYXF4X42/KVtbM3qTd2ScA==}
+  /xgplayer-streaming-shared@3.0.14(core-js@3.33.1):
+    resolution: {integrity: sha512-XBXNjnMfFDl15kQfXNgmAkaDqRdN0PhxVFBm7+TezillpTdLmqj+HD90F6BargdZVJ4I20/YHYdb9qBg+hUDhg==}
     peerDependencies:
       core-js: '>=3.12.1'
     dependencies:
@@ -14133,8 +14187,8 @@ packages:
       eventemitter3: 4.0.7
     dev: false
 
-  /xgplayer-subtitles@3.0.13(core-js@3.33.1):
-    resolution: {integrity: sha512-VlcPg6Ne66mwB6uIlE6gT28WG9u2vugMuho0mVMsB/uQ+XOin5xtH3Jpf2Ewx5CTf3SRfg4VmqUCuuMT7Z1qJg==}
+  /xgplayer-subtitles@3.0.14(core-js@3.33.1):
+    resolution: {integrity: sha512-w6H1h+g3kOI477kv2QBRMZe3M/1dHLXttHBwq4LwKTPGVQ19fLIDGwkfn+HeKwe1ocGDaaq96bS+l+BadnP9TA==}
     peerDependencies:
       core-js: '>=3.12.1'
     dependencies:
@@ -14142,8 +14196,8 @@ packages:
       eventemitter3: 4.0.7
     dev: false
 
-  /xgplayer-transmuxer@3.0.13(core-js@3.33.1):
-    resolution: {integrity: sha512-xncc9HYIRK9glHpalQRXlfLoeJkoq7OimvhWZ+CXdJFWYNG2toHCI5ttSRs8R0nRm07X3sxkXzQUJcZy7y6qNA==}
+  /xgplayer-transmuxer@3.0.14(core-js@3.33.1):
+    resolution: {integrity: sha512-lMS2EwuA6tToCC4NuyJ5Ax0UDaaWU/YuaSkI/Bsj+vHkEzO42vgi2EerSPr91Moz05KhG/+4Vt8qMKUVFjhGTw==}
     peerDependencies:
       core-js: '>=3.12.1'
     dependencies:
@@ -14153,8 +14207,8 @@ packages:
       crypto-es: 1.2.7
     dev: false
 
-  /xgplayer@3.0.13(core-js@3.33.1):
-    resolution: {integrity: sha512-tHmwsB49J5mYuGd+JjaILoJB/m+M7F5BxwjBaAWJ/PIEtYuhN69rOkkdph2/pzAg4to1rhwMPVTklIoXYd6xKw==}
+  /xgplayer@3.0.14(core-js@3.33.1):
+    resolution: {integrity: sha512-TPS77hUIcM1zVx6FSpGG+OzfMwjwxxWihd+YxVx82DQ22QK60v8TXWSZlWISbmS1+fAlFneesvXDjwy60tC37w==}
     peerDependencies:
       core-js: '>=3.12.1'
     dependencies:
@@ -14163,7 +14217,7 @@ packages:
       delegate: 3.2.0
       downloadjs: 1.4.7
       eventemitter3: 4.0.7
-      xgplayer-subtitles: 3.0.13(core-js@3.33.1)
+      xgplayer-subtitles: 3.0.14(core-js@3.33.1)
     dev: false
 
   /xlsx@0.17.5:

src/assets/icons/gas-pump.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.537" height="12.534" viewBox="0 0 12.537 12.534">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3df6ff"/>
+      <stop offset="1" stop-color="#b3fff5"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14891" data-name="组 14891" transform="translate(0 -0.341)">
+    <path id="路径_56065" data-name="路径 56065" d="M12.535,766.98v1.794H0V766.98a1.307,1.307,0,0,1,1.233-1.369H4.656a1.671,1.671,0,0,0,2.182,1.158,1.816,1.816,0,0,0,1.044-1.158H11.3a1.307,1.307,0,0,1,1.231,1.369Z" transform="translate(0 -755.9)" fill="url(#linear-gradient)"/>
+    <path id="路径_56066" data-name="路径 56066" d="M98,5.992a1.547,1.547,0,1,1-3.069,0,.45.45,0,0,1,.418-.477.44.44,0,0,1,.418.418V6a.748.748,0,0,0,.7.79.737.737,0,0,0,.693-.708V.815a.449.449,0,0,1,.418-.474.441.441,0,0,1,.418.41V5.993Zm4.184,0a1.544,1.544,0,1,0,3.062,0,.448.448,0,0,0-.423-.469.441.441,0,0,0-.409.406v.063a.749.749,0,0,1-.693.795.731.731,0,0,1-.7-.713V.815A.449.449,0,0,0,102.6.341a.442.442,0,0,0-.418.41V5.993ZM100.04,1.345a.439.439,0,0,1,.418.41V6.881a.449.449,0,0,1-.418.474.439.439,0,0,1-.418-.41V1.822a.449.449,0,0,1,.418-.477Z" transform="translate(-93.765)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/pump.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.736" height="14.569" viewBox="0 0 12.736 14.569">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3df6ff"/>
+      <stop offset="1" stop-color="#b3fff5"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_56062" data-name="路径 56062" d="M148.3,56a4.931,4.931,0,0,1-1.492,4.545l2.436,4.221h-11l2.248-3.9a4.935,4.935,0,1,1,6.931-6.882V51.553h-.793V51.2H149v.353h-.7Zm-.8.746a4.045,4.045,0,0,0-.17-1v0q-.02-.063-.041-.126l-.017-.049q-.021-.058-.043-.115l-.023-.057q-.023-.055-.047-.109l-.026-.058c-.016-.036-.033-.071-.051-.106l-.028-.055c-.018-.035-.037-.071-.056-.106l-.027-.047a4.071,4.071,0,0,0-.228-.355l-.029-.041-.068-.089-.043-.055-.068-.081-.05-.058-.069-.076-.055-.058-.071-.072-.06-.057-.072-.067-.066-.058-.071-.061q-.066-.055-.135-.106l-.067-.049-.082-.058-.072-.047-.083-.053-.074-.044-.086-.05q-.082-.046-.166-.087l-.073-.036-.1-.045-.068-.03-.131-.051-.042-.016q-.086-.032-.175-.059l-.058-.017-.123-.035-.071-.018-.114-.026-.075-.015-.113-.02q-.1-.016-.195-.027l-.074-.008-.13-.01-.064,0q-.1,0-.2,0a4.054,4.054,0,1,0,4.052,4.053c0-.06,0-.12,0-.18Zm-4.048,1.943a1.763,1.763,0,1,1,1.762-1.763,1.763,1.763,0,0,1-1.762,1.763Z" transform="translate(-137.374 -50.7)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/water-pump.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.822" height="10.78" viewBox="0 0 14.822 10.78">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3df6ff"/>
+      <stop offset="1" stop-color="#b3fff5"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14889" data-name="组 14889" transform="translate(-42.667 -170.667)">
+    <path id="路径_56063" data-name="路径 56063" d="M56.983,170.667a.518.518,0,0,0-.505.505v.168h-6.4a4.73,4.73,0,0,0-4.716,4.716,4.669,4.669,0,0,0,.3,1.684H43.677v-.168a.505.505,0,0,0-1.011,0v3.369a.505.505,0,0,0,1.011,0v-.168h6.4a4.73,4.73,0,0,0,4.716-4.716,4.669,4.669,0,0,0-.3-1.684h1.987v.168a.505.505,0,0,0,1.011,0v-3.369A.518.518,0,0,0,56.983,170.667Zm-6.906,8.085a2.695,2.695,0,1,1,2.695-2.695A2.7,2.7,0,0,1,50.078,178.751Z" fill="url(#linear-gradient)"/>
+    <path id="路径_56064" data-name="路径 56064" d="M448.876,409.143a9.659,9.659,0,0,0-.876,2.223,1.011,1.011,0,1,0,2.021,0,9.662,9.662,0,0,0-.876-2.223A.158.158,0,0,0,448.876,409.143Z" transform="translate(-398.933 -234.636)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/components/CADViewer/index.ts

@@ -0,0 +1,4 @@
+import CADViewer from './src/CADViewer.vue';
+
+export { CADViewer };
+export * from './src/types';

src/components/CADViewer/src/CADViewer.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <OperationBar v-if="showOperations" :allowed-operations="allowedOperations" :denied-operations="deniedOperations" />
+    <iframe v-if="iframeMode" :src="iframeSrc" class="w-100% cad-viewer__viewer" :style="{ height: `${height}px` }"></iframe>
+    <BasicViewer v-else class="w-100% cad-viewer__viewer" :style="{ height: `${height}px` }" />
+  </div>
+</template>
+<script setup lang="ts">
+  import OperationBar from './components/OperationBar.vue';
+  import { SupportedOperationName } from './types';
+  import BasicViewer from './components/BasicViewer.vue';
+
+  withDefaults(
+    defineProps<{
+      /** CAD viewer 的高度，注意不是整个组件的高度 */
+      height?: number;
+      showOperations?: boolean;
+      /** 是否使用 iframe 代替客制化 CAD viewer */
+      iframeMode?: boolean;
+      /** CAD viewer 嵌入的 iframe src 描述 */
+      iframeSrc?: string;
+      /** 设置允许展示的操作按钮，优先级高于 deniedOperations */
+      allowedOperations?: SupportedOperationName[];
+      /** 设置拒绝展示的操作按钮，优先级低于 allowedOperations */
+      deniedOperations?: SupportedOperationName[];
+    }>(),
+    {
+      height: 980,
+      iframeMode: true,
+      showOperations: false,
+      iframeSrc: 'http://localhost:3366/',
+    }
+  );
+</script>
+
+<style scoped></style>

src/components/CADViewer/src/components/BasicViewer.vue

@@ -0,0 +1,26 @@
+<template>
+  <!-- Viewer的宽/高等其他样式由使用者定义 -->
+  <div class="overflow-hidden">
+    <canvas id="cad_base_viewer"></canvas>
+  </div>
+</template>
+<script setup lang="ts">
+  import { onMounted } from 'vue';
+  import { createMxCad } from 'mxcad';
+
+  onMounted(() => {
+    // SharedArrayBuffer可以提供多个Worker共享一个内存块的功能，以增强性能
+    const mode = 'SharedArrayBuffer' in window ? '2d' : '2d-st';
+    createMxCad({
+      canvas: '#cad_base_viewer',
+      locateFile: (fileName) => {
+        console.log('debug fileName', fileName);
+        return new URL(`../../../../../node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href;
+      },
+      fontspath: new URL('../../../../../node_modules/mxcad/dist/fonts', import.meta.url).href,
+      fileUrl: new URL('/model/mxweb/demo.mxweb', import.meta.url).href,
+    });
+  });
+</script>
+
+<style scoped></style>

src/components/CADViewer/src/components/OpenFile.vue

@@ -0,0 +1,26 @@
+<template>
+  <Upload
+    v-model:file-list="fileList"
+    accept=".mxweb, .dwg"
+    name="file"
+    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+    :show-upload-list="false"
+    :custom-request="customRequest"
+  >
+    <Button> 选择文件 </Button>
+  </Upload>
+</template>
+<script lang="ts" setup>
+  import { Upload, Button, message } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import { MxCpp } from 'mxcad';
+  import type { UploadProps } from 'ant-design-vue';
+
+  const customRequest: UploadProps['customRequest'] = ({ file }) => {
+    if (typeof file === 'string') return message.warn('不支持所选择的文件', 2000);
+    const filePath = URL.createObjectURL(file);
+    MxCpp.getCurrentMxCAD().openWebFile(filePath);
+  };
+
+  const fileList = ref<UploadProps['fileList']>([]);
+</script>

src/components/CADViewer/src/components/OperationBar.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="p-10px bg-#00000088">
+    <span v-for="item in operationList" :key="item.name" class="mr-5px">
+      <component :is="item.component" v-bind="item.prop" v-on="item.on">{{ item.alias }}</component>
+    </span>
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { SupportedOperationName, SupportedOperation } from '../types';
+  import { operationMap } from '../operationMap';
+
+  const props = defineProps<{
+    /** 设置允许展示的操作项，优先级高于 deniedOperations */
+    allowedOperations?: SupportedOperationName[];
+    /** 设置拒绝展示的操作项，优先级低于 allowedOperations */
+    deniedOperations?: SupportedOperationName[];
+  }>();
+
+  // 筛选最终可以展示到页面上的操作项配置
+  const operationList = computed(() => {
+    if (props.allowedOperations) {
+      return props.allowedOperations.map((op) => {
+        return operationMap.get(op) as SupportedOperation;
+      });
+    }
+    if (props.deniedOperations) {
+      const list: SupportedOperation[] = [];
+      operationMap.forEach((val, key) => {
+        if (!props.deniedOperations?.includes(key)) {
+          list.push(val);
+        }
+      });
+      return list;
+    }
+    return [...operationMap.values()];
+  });
+</script>
+
+<style scoped></style>

src/components/CADViewer/src/operationMap.ts

@@ -0,0 +1,34 @@
+import type { SupportedOperation, SupportedOperationName } from './types';
+import { MxCpp } from 'mxcad';
+import OpenFile from './components/OpenFile.vue';
+
+/** CAD Viewer 所支持的全部操作映射表 */
+const operationMap = new Map<SupportedOperationName, SupportedOperation>();
+
+// 打开 webmx 格式的 CAD 文件
+operationMap.set('open-file', {
+  name: 'open-file',
+  alias: '打开文件',
+  component: OpenFile,
+});
+
+operationMap.set('download-file', {
+  name: 'download-file',
+  alias: '导出文件',
+  component: 'a-button',
+  on: {
+    click() {
+      MxCpp.getCurrentMxCAD().saveFile();
+    },
+  },
+});
+
+export function add(opName: SupportedOperationName, operation: SupportedOperation) {
+  operationMap.set(opName, operation);
+}
+
+export function del(opName: SupportedOperationName) {
+  operationMap.delete(opName);
+}
+
+export { operationMap };

src/components/CADViewer/src/types/index.ts

@@ -0,0 +1,13 @@
+import { Component } from 'vue';
+
+export type SupportedOperationName = 'open-file' | 'download-file';
+export type SupportedOperation = {
+  name: SupportedOperationName;
+  alias: string;
+  /** 操作项使用的组件 */
+  component: string | Component;
+  /** 操作项组件对应的 props，譬如组件为 AButton，prop 可以是 { type: 'primary' } */
+  prop?: any;
+  /** 操作项组件对应的事件，譬如组件为 AButton，on 可以是 { click: () => {} } */
+  on?: any;
+};

src/components/vent/customHeader.vue

@@ -113,22 +113,24 @@
       }
     }
     .container-title {
-      width: 398px;
+      width: 380px;
       height: 34px;
       top: 60px;
-      background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      background: url('/@/assets/images/vent/home/select-bg.png') no-repeat;
       background-size: contain;
-      padding: 0 0 0 180px;
+      padding: 0 0 0 40px;
+      // padding: 0 0 0 180px;
       font-size: 20px;
       pointer-events: auto;
       position: relative;
       z-index: 9999;
       .title-select {
-        width: 228px;
+        width: 340px;
         position: absolute;
 
         top: 0;
-        left: 160px;
+        // left: 160px;
       }
     }
   }

src/components/vent/ventBox1.vue

@@ -2,38 +2,36 @@
   <div class="vent-box1-bg">
     <div class="box1-top">
       <div class="title">
-        <slot name = 'title'></slot>
+        <slot name="title"></slot>
       </div>
     </div>
     <div class="box1-center">
       <div class="box-container">
-        <slot name = 'container'></slot>
-      </div>      
+        <slot name="container"></slot>
+      </div>
     </div>
     <div class="box1-bottom"></div>
   </div>
 </template>
 <script>
-import { defineComponent } from 'vue'
-export default defineComponent ({
-  name: 'ventBox1',
-  setup(){
-
-  }
-})
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'VentBox1',
+    setup() {},
+  });
 </script>
 
 <style lang="less" scoped>
-  .vent-box1-bg{
+  .vent-box1-bg {
     width: 100%;
     min-height: 80px;
     position: relative;
-    .box1-top{
+    .box1-top {
       width: 100%;
       height: 35px;
       background: url('/@/assets/images/vent/border/box1-top.png') no-repeat;
       background-size: 100% 100%;
-      .title{
+      .title {
         width: 100%;
         height: 35px;
         display: flex;
@@ -42,11 +40,11 @@ export default defineComponent ({
         color: #fff;
       }
     }
-    .box1-center{
+    .box1-center {
       width: calc(100% + 0.5px);
       position: relative;
-      
-      .box-container{
+
+      .box-container {
         width: calc(100% - 2px);
         min-height: 50px;
         // position: relative;
@@ -56,7 +54,7 @@ export default defineComponent ({
         background-color: #00213236;
         backdrop-filter: blur(5px);
 
-        &::before{
+        &::before {
           content: '';
           display: block;
           position: absolute;
@@ -64,9 +62,9 @@ export default defineComponent ({
           left: 0;
           width: 1px;
           height: calc(100% - 10px);
-          background-image: linear-gradient(#3DF6FF00, #3DF6FF, #3DF6FF00);
+          background-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
         }
-        &::after{
+        &::after {
           content: '';
           display: block;
           position: absolute;
@@ -74,11 +72,11 @@ export default defineComponent ({
           top: 5px;
           width: 1px;
           height: calc(100% - 10px);
-          background: linear-gradient(#3DF6FF00, #3DF6FF, #3DF6FF00);
+          background: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
         }
       }
     }
-    .box1-bottom{
+    .box1-bottom {
       width: 100%;
       height: 35px;
       background: url('/@/assets/images/vent/border/box1-bottom.png') no-repeat;
@@ -89,5 +87,4 @@ export default defineComponent ({
       pointer-events: none;
     }
   }
-
 </style>

src/design/vent/color.less

@@ -13,4 +13,15 @@
 @vent-table-hover: #0dc3ff22;
 @vent-table-no-hover: #00bfff10;
 @vent-form-item-boder: #3ad8ff77;
-@ventSpace: zxm;
+@ventSpace: zxm;
+// vent/gas 模块下重要文本的颜色
+@vent-gas-primary-text: #00c8d9;
+// vent/gas 模块下Tab相关的颜色
+@vent-gas-tab-bg: #10427a;
+@vent-gas-tab-bg-avtived: #166ab5;
+@vent-gas-tab-border: #2cb6ff;
+// vent/gas 各模块的基准背景色
+@vent-gas-primary-bg: #0091ff;
+@vent-gas-primary-trasparent-bg: #0091ff12;
+// vent/gas 模块下的客制ListItem组件背景色
+@vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);

src/views/vent/gas/gasPumpMonitor/components/customBoard.vue → src/views/vent/gas/components/board/baseBoard.vue

@@ -33,10 +33,10 @@
 </script>
 
 <style lang="less" scoped>
-  @light-blue: aqua;
+  @import '@/design/vent/color.less';
 
   .board {
-    background-image: url('../../../../../assets/images/vent/custom-board.png');
+    background-image: url('@/assets/images/vent/custom-board.png');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 100% auto;
@@ -48,7 +48,7 @@
 
   .board__value_txt {
     font-size: 24px;
-    color: @light-blue;
+    color: @vent-gas-primary-text;
     font-style: italic;
   }
 </style>

src/views/vent/gas/components/board/categoryBoard.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="board">
+    <div class="h-50% flex justify-between items-center pl-30px pr-30px">
+      <div class="board__image_top"></div>
+      <div v-for="(item, i) in categoryTop" :key="`vent-gas-category-board-${i}`" class="text-left">
+        <div class="board__category_content">{{ item.value }}</div>
+        <span class="board__category_title">{{ item.label }}</span>
+      </div>
+    </div>
+    <div class="h-50% flex justify-between items-center pl-30px pr-30px">
+      <div class="board__image_buttom"></div>
+      <div v-for="(item, i) in categoryButtom" :key="`vent-gas-category-board-${i}`" class="text-left">
+        <div class="board__category_content">{{ item.value }}</div>
+        <span class="board__category_title">{{ item.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  withDefaults(
+    defineProps<{
+      /** categoryTop（即右侧）内容，长度需固定为，可用slot */
+      categoryTop?: { label: string; value: string }[];
+      /** categoryButtom（即右侧）内容，长度需固定为，可用slot */
+      categoryButtom?: { label: string; value: string }[];
+    }>(),
+    {
+      prefixImageTop: '',
+      prefixImageButtom: '',
+      categoryTop: () => [],
+      categoryButtom: () => [],
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .board {
+    background-image: url('@/assets/images/vent/gas/category-board-bg.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto 100%;
+    padding: 30px;
+    width: 1048px;
+    height: 231px;
+    text-align: center;
+    color: @white;
+  }
+
+  .board__image_top {
+    background-image: url('@/assets/images/vent/gas/category-board-img2.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto 100%;
+    flex-basis: 82px;
+    width: 82px;
+    height: 56px;
+  }
+  .board__image_buttom {
+    background-image: url('@/assets/images/vent/gas/category-board-img1.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto 100%;
+    flex-basis: 82px;
+    width: 82px;
+    height: 56px;
+  }
+  .board__category_content {
+    font-size: 24px;
+    color: @vent-gas-primary-text;
+    font-weight: bold;
+  }
+  .board__category_title {
+    color: @white;
+  }
+</style>

src/views/vent/gas/components/form/button.vue

@@ -0,0 +1,31 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <span class="button" @click="$emit('click')">
+    <slot></slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  defineEmits(['click']);
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .button {
+    background-image: url('@/assets/images/vent/gas/button.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    padding: 10px 50px;
+    text-align: center;
+    color: @white;
+    cursor: pointer;
+  }
+
+  .button:hover {
+    background-image: url('@/assets/images/vent/gas/button-hover.png');
+  }
+</style>

src/views/vent/gas/components/form/formTitle.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="form-title">
+    <span class="form-title__icon">
+      <slot name="icon">
+        <SvgIcon class="icon" size="18" :name="icon" />
+      </slot>
+    </span>
+    <span class="form-title__text ml-5px">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+  import { SvgIcon } from '/@/components/Icon';
+
+  withDefaults(
+    defineProps<{
+      /** 标题，可用 slot */
+      title?: string | number;
+      /** 标题前缀图标，用法参考 SvgIcon，可用 slot */
+      icon?: string;
+    }>(),
+    {
+      title: '',
+      icon: '',
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .form-title {
+    background-image: url('@/assets/images/vent/home/form-title.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: auto 100%;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 20px;
+  }
+
+  .form-title__text {
+    font-size: 18px;
+  }
+</style>

src/views/vent/gas/components/list/index.vue

@@ -0,0 +1,83 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list">
+    <slot v-if="title" name="list-title">
+      <ListTitle :title="title" :icon="icon" />
+    </slot>
+    <slot name="list-item">
+      <Row>
+        <Col v-for="(item, index) in items" :key="`vent-gas-list-item-${index}`" :span="item.span || defaultSpan">
+          <ListItem
+            class="mb-5px w-100%"
+            :backgrounded="item.backgrounded || backgrounded"
+            :bordered="item.bordered || bordered"
+            :type="item.type || type"
+            :label-width="item.labelWidth || labelWidth"
+            :status="item.status || status"
+            :label="item.label"
+            :value="item.value"
+          />
+        </Col>
+      </Row>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="gas-pump-monitor">
+  // 该组件主要用于常见布局、样式的整合，同时提供slot以供更灵活的使用
+  import { computed, defineProps } from 'vue';
+  import { Row, Col } from 'ant-design-vue';
+  import ListItem from './listItem.vue';
+  import ListTitle from './listTitle.vue';
+
+  const props = withDefaults(
+    defineProps<{
+      /** 布局 */
+      layout?: 'vertical' | 'double-columns';
+      /** 标题 */
+      title?: string | number;
+      /** 标题前缀图标，用法参考 SvgIcon */
+      icon?: string;
+      /** value（即右侧）部分是否有边框 */
+      bordered?: boolean;
+      /** 是否有背景 */
+      backgrounded?: boolean;
+      /** 条目类型 */
+      type?: 'input' | 'default' | 'status-light';
+      /** 输入框的固定宽度 */
+      labelWidth?: number | string;
+      /** 通用状态灯配置，第一项配置激活状态，第二项配置失活状态 */
+      status?: [{ label: string; value: any }, { label: string }];
+      items: {
+        /** value（即右侧）部分是否有边框 */
+        bordered?: boolean;
+        /** 是否有背景 */
+        backgrounded?: boolean;
+        /** label（即左侧）内容，可用slot */
+        label: string;
+        /** value（即右侧）内容，可用slot */
+        value: string;
+        /** 条目类型 */
+        type?: 'input' | 'default' | 'status-light';
+        /** 输入框的固定宽度 */
+        labelWidth?: number | string;
+        /** 状态灯配置，第一项配置激活状态，第二项配置失活状态 */
+        status?: [{ label: string; value: any }, { label: string }];
+        span?: number;
+      }[];
+    }>(),
+    {
+      layout: 'vertical',
+      backgrounded: true,
+    }
+  );
+
+  const defaultSpan = computed(() => {
+    return {
+      vertical: 24,
+      'double-columns': 12,
+    }[props.layout];
+  });
+</script>
+
+<style lang="less" scoped></style>

src/views/vent/gas/components/list/listItem.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="list-item" :class="{ 'list-item__background': backgrounded }">
+    <div class="list-item__label" :style="labelStyle">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="list-item__value" :class="{ 'list-item__border': bordered }">
+      <slot name="value">
+        <!-- 状态灯 -->
+        <div v-if="type === 'status-light'" :class="statusLightConfig.class">
+          {{ statusLightConfig.label }}
+        </div>
+        <!-- 输入框 -->
+        <div v-if="type === 'input'">
+          <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
+        </div>
+        <!-- 默认 -->
+        <div v-if="type === 'default'" class="text-right list-item__text_blue">
+          {{ value }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+  import { Input } from 'ant-design-vue';
+  import { computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      /** value（即右侧）部分是否有边框 */
+      bordered?: boolean;
+      /** 是否有背景 */
+      backgrounded?: boolean;
+      /** label（即左侧）内容，可用slot */
+      label?: string;
+      /** value（即右侧）内容，可用slot */
+      value?: string;
+      /** 条目类型 */
+      type?: 'input' | 'default' | 'status-light';
+      /** 输入框的固定宽度 */
+      labelWidth?: number | string;
+      /** 状态灯配置，第一项配置激活状态，第二项配置失活状态 */
+      status?: [{ label: string; value: any }, { label: string }];
+    }>(),
+    {
+      bordered: false,
+      backgrounded: true,
+      type: 'default',
+      label: '',
+      value: '',
+      labelWidth: 100,
+    }
+  );
+  defineEmits(['update:value']);
+
+  // 状态灯相关的内容
+  const statusLightConfig = computed(() => {
+    if (!props.status) return { label: 'unknown', class: 'list-item__deactived' };
+    const actived = props.value === props.status[0].value;
+
+    return {
+      label: props.status[actived ? 0 : 1].label,
+      class: actived ? 'list-item__actived' : 'list-item__deactived',
+    };
+  });
+
+  const labelStyle = computed(() => {
+    const w = props.labelWidth;
+    const width = typeof w === 'string' ? w : `${w}px`;
+    return { width };
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .list-item {
+    height: 36px;
+    line-height: 36px;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+    color: @white;
+  }
+  // .list-item__label {
+  // }
+  .list-item__value {
+    flex-grow: 1;
+  }
+
+  .list-item__background {
+    background-image: @vent-gas-list-item-bg-img;
+  }
+
+  .list-item__text_blue {
+    color: @vent-gas-primary-text;
+  }
+
+  .list-item__border {
+    border: 1px solid @vent-gas-primary-text;
+    border-radius: 5px;
+  }
+
+  .list-item__actived {
+    padding-left: 20px;
+    background-image: url('@/assets/images/company/home/select-bg.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: 20px 20px;
+  }
+
+  .list-item__deactived {
+    padding-left: 20px;
+    background-image: url('@/assets/images/company/home/unselect-bg.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: 20px 20px;
+  }
+
+  :v-deep(.zxm-input) {
+    color: @white;
+  }
+</style>

src/views/vent/gas/components/list/listTitle.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="list-title">
+    <span class="list-title__icon">
+      <slot name="icon">
+        <SvgIcon class="icon" size="18" :name="icon" />
+      </slot>
+    </span>
+    <span class="list-title__title ml-5px">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+  import { SvgIcon } from '/@/components/Icon';
+
+  withDefaults(
+    defineProps<{
+      /** 标题，可用 slot */
+      title?: string | number;
+      /** 标题前缀图标，用法参考 SvgIcon，可用 slot */
+      icon?: string;
+    }>(),
+    {
+      title: '',
+      icon: '',
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .list-title {
+    background-image: url('@/assets/images/vent/home/tab3.png');
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-size: 100% auto;
+    height: 30px;
+    width: 100%;
+    color: @white;
+  }
+</style>

src/views/vent/gas/components/tab/baseTab.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="tabs w-100% flex text-center">
+    <div
+      v-for="tab in tabs"
+      :key="tab.id"
+      class="flex-1 cursor-pointer pt-5px pb-5px"
+      :class="{ tabs_pane_actived: id === tab.id }"
+      @click="clickHandler(tab.id)"
+    >
+      <slot name="name">
+        {{ tab.name }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="gas-pump-monitor">
+  import { defineProps } from 'vue';
+
+  defineProps<{
+    tabs: { name: string; id: string | number }[];
+    id: string | number;
+  }>();
+  const emit = defineEmits(['change', 'update:id']);
+
+  function clickHandler(id) {
+    emit('change', id);
+    emit('update:id', id);
+  }
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .tabs {
+    font-weight: bold;
+    background-color: @vent-gas-tab-bg;
+    border-radius: 5px 5px 0 0;
+  }
+
+  .tabs_pane_actived {
+    background-color: @vent-gas-tab-bg-avtived;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 5px solid @vent-gas-tab-border;
+  }
+</style>

src/views/vent/gas/gasHome/components/customHeader.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="custom-header flex justify-around">
+    <div
+      v-for="(item, i) in items"
+      :key="`gashome-comp-custom-header-${i}`"
+      class="custom-header__badge"
+      :style="{ backgroundImage: `url(${item.bgSrc})` }"
+    >
+      <div class="custom-header__badge_title"> {{ badges[i].title }}</div>
+      <div class="custom-header__badge_desc"> {{ badges[i].desc }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Badge01Src from '@/assets/images/vent/home/badge01.png';
+  import Badge02Src from '@/assets/images/vent/home/badge02.png';
+  import Badge03Src from '@/assets/images/vent/home/badge03.png';
+  import Badge04Src from '@/assets/images/vent/home/badge04.png';
+  import Badge05Src from '@/assets/images/vent/home/badge05.png';
+  import Badge06Src from '@/assets/images/vent/home/badge06.png';
+
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  defineProps<{
+    /** 描述 Header 中各个徽章的数组，要求6条 */
+    badges: { desc: string; title: string }[];
+  }>();
+
+  const items = [
+    {
+      bgSrc: Badge06Src,
+      color: '#d9e6ec',
+    },
+    {
+      bgSrc: Badge02Src,
+      color: '#aacacd',
+    },
+    {
+      bgSrc: Badge03Src,
+      color: '#9ea890',
+    },
+    {
+      bgSrc: Badge05Src,
+      color: '#d7deea',
+    },
+    {
+      bgSrc: Badge01Src,
+      color: '#dbe0d7',
+    },
+    {
+      bgSrc: Badge04Src,
+      color: '#d8d5e4',
+    },
+  ];
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .custom-header {
+    background-image: url('@/assets/images/vent/home/badge-bg.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    height: 140px;
+    padding: 35px 0;
+    color: @white;
+  }
+
+  .custom-header__badge {
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 185px;
+    height: 70px;
+    padding-left: 80px;
+  }
+
+  .custom-header__badge_title {
+    font-size: 20px;
+  }
+  .custom-header__badge_desc {
+    font-size: 12px;
+  }
+</style>

src/views/vent/gas/gasHome/components/gasMonitor.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="monitor-container" style="margin-top: 20px">
+    <div class="lr left-box" style="margin-top: 0">
+      <ventBox1>
+        <template #title>
+          <div>矿井概况</div>
+        </template>
+        <template #container>
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="矿井名称" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="矿井产量" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="矿井瓦斯等级" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="煤炭储量" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="主采煤层" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="平均煤厚" />
+        </template>
+      </ventBox1>
+      <ventBox1 class="vent-margin-t-10">
+        <template #title>
+          <div>瓦斯抽采泵站概况</div>
+        </template>
+        <template #container>
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="地面泵站数量" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="移动泵站数量" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="抽放泵型号" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="抽采管路" />
+          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="抽放泵运行数量" />
+        </template>
+      </ventBox1>
+    </div>
+    <div class="lr right-box" style="margin-top: 0">
+      <div class="item-box sensor-container">
+        <ventBox1>
+          <template #title>
+            <div>井下抽采区域</div>
+          </template>
+          <template #container>
+            <ListItem class="w-100% mb-5px" :value="activedPump.name" label="回采工作面数量" />
+            <ListItem class="w-100% mb-5px" :value="activedPump.name" label="掘进工作面数量" />
+            <ListItem class="w-100% mb-5px" :value="activedPump.name" label="回采工作面位置" />
+            <ListItem class="w-100% mb-5px" :value="activedPump.name" label="掘进工作面位置" />
+            <ListItem class="w-100% mb-5px" :value="activedPump.name" label="采空区数量" />
+            <ListItem class="w-100% mb-5px" :value="activedPump.name" label="采空区位置" />
+          </template>
+        </ventBox1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="gas-pump-monitor">
+  import { ref, onMounted, defineProps } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+
+  // 抽放泵相关
+  const activedPump = ref<any>({});
+
+  function fetchPump() {
+    const fakePP = { name: 't4', id: 4 };
+    activedPump.value = fakePP;
+  }
+
+  onMounted(async () => {
+    fetchPump();
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '@/views/vent/monitorManager/comment/less/workFace.less';
+  @ventSpace: zxm;
+</style>

src/views/vent/gas/gasHome/index.vue

@@ -1,22 +1,23 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="scene-box">
-    <customHeader
-      :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
-      :options="options"
-      @change="getSelectRow"
-      :optionValue="optionValue"
-      >瓦斯抽采综合管控系统</customHeader
-    >
-    <div class="center-container"> </div>
+    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯抽采综合管控系统 </customHeader>
+    <CustomHeader class="w-1710px ml-100px mt-20px" :badges="headerBadges" />
+    <template v-if="activeKey === 'gasHome'">
+      <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
+      <GasMonitor :deviceId="optionValue" />
+    </template>
     <BottomMenu :navList="navList" @change="changeActive" />
   </div>
 </template>
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
-  import customHeader from '/@/components/vent/customHeader.vue';
+  import CustomHeader from '/@/components/vent/customHeader.vue';
+  import CustomBadges from './components/customHeader.vue';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
   import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
   import { navList } from './gasHome.data';
+  import GasMonitor from './components/gasMonitor.vue';
 
   const activeKey = ref('gasHome');
   const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
@@ -25,6 +26,33 @@
     activeKey.value = activeValue;
   }
 
+  const headerBadges = ref([
+    {
+      title: 'T1',
+      desc: '累积瓦斯抽采量',
+    },
+    {
+      title: 'T2',
+      desc: '平均瓦斯抽采率',
+    },
+    {
+      title: 'T3',
+      desc: '抽采达标工作面数量',
+    },
+    {
+      title: 'T4',
+      desc: '抽采钻孔类型',
+    },
+    {
+      title: 'T5',
+      desc: '回采中工作面数量',
+    },
+    {
+      title: 'T6',
+      desc: '抽采钻孔总进尺',
+    },
+  ]);
+
   onMounted(async () => {
     await getSysDataSource();
   });

src/views/vent/gas/gasPumpMonitor/components/listItem.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="list-item" :class="{ 'list-item__background': hasBackground }">
-    <div class="list-item__label">
-      <slot name="label">
-        {{ label }}
-      </slot>
-    </div>
-    <div class="list-item__value" :class="{ 'list-item__border': hasBorder }">
-      <slot name="value">
-        <div v-if="statusMode" :class="{ 'list-item__actived': matchedStatus.actived, 'list-item__deactived': !matchedStatus.actived }">
-          {{ matchedStatus.label }}
-        </div>
-        <div v-else-if="inputMode">
-          <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
-        </div>
-        <div v-else class="text-right list-item__text_blue">
-          {{ value }}
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
-  import { Input } from 'ant-design-vue';
-  import { computed } from 'vue';
-
-  const props = withDefaults(
-    defineProps<{
-      /** value（即右侧）部分是否有边框 */
-      hasBorder?: boolean;
-      /** 是否有背景 */
-      hasBackground?: boolean;
-      /** label（即左侧）内容，可用slot */
-      label?: string;
-      /** value（即右侧）内容，可用slot */
-      value?: string;
-      /** 是否是状态灯模式，配合statusConfig使用 */
-      statusMode?: boolean;
-      /** 是否是输入框模式，不与状态灯模式兼容 */
-      inputMode?: boolean;
-      /** 状态灯配置，状态灯模式下，成功匹配的条目将按照配置显示 */
-      statusConfig?: { label: string; value: any; actived: boolean }[];
-    }>(),
-    {
-      hasBorder: false,
-      hasBackground: true,
-      label: '',
-      value: '',
-    }
-  );
-  defineEmits(['update:value']);
-
-  const defaultStatusConfig = {
-    value: undefined,
-    label: '未知',
-    actived: false,
-  };
-  const matchedStatus = computed(() => {
-    if (!props.statusConfig) return defaultStatusConfig;
-    return (
-      props.statusConfig.find((cfg) => {
-        return cfg.value === props.value;
-      }) || defaultStatusConfig
-    );
-  });
-</script>
-
-<style lang="less" scoped>
-  @light-blue: aqua;
-
-  .list-item {
-    height: 40px;
-    line-height: 40px;
-    padding: 0 10px;
-    display: flex;
-  }
-  .list-item__label {
-    flex-grow: 1;
-  }
-  .list-item__value {
-    flex-basis: 150px;
-    padding: 0 10px;
-  }
-
-  .list-item__background {
-    background-image: linear-gradient(to right, #0f73bbd8, #0f73bb62);
-  }
-
-  .list-item__text_blue {
-    color: @light-blue;
-  }
-
-  .list-item__border {
-    border: 1px solid @light-blue;
-    border-radius: 5px;
-  }
-
-  .list-item__actived {
-    padding-left: 35px;
-    background-image: url('../../../../../assets/images/company/home/select-bg.png');
-    background-repeat: no-repeat;
-    background-position: left center;
-  }
-
-  .list-item__deactived {
-    padding-left: 35px;
-    background-image: url('../../../../../assets/images/company/home/unselect-bg.png');
-    background-repeat: no-repeat;
-    background-position: left center;
-  }
-
-  ::v-deep(.zxm-input) {
-    color: @white;
-  }
-</style>

src/views/vent/gas/gasPumpMonitor/components/monitor.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="monitor-container">
     <div class="lr left-box">
@@ -6,26 +7,8 @@
           <div>抽采泵信息</div>
         </template>
         <template #container>
-          <div class="pump__tabs w-100% flex text-center">
-            <div
-              v-for="tab in tabs"
-              :key="tab.id"
-              class="flex-1 cursor-pointer pt-5px pb-5px"
-              :class="{ pump__tabs_pane_actived: activedTab === tab.id }"
-              @click="activedTab = tab.id"
-            >
-              {{ tab.name }}
-            </div>
-          </div>
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电压" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电流" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电机前轴温度" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="电机后轴温度" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="泵前轴温度" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="泵后轴温度" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="垂直振幅" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="水平振幅" />
-          <ListItem class="w-100%" :value="activedPump.name" label="运行时间" />
+          <BaseTab :tabs="pumpSelection" v-model:id="activedPumpID" />
+          <List v-bind="pumpListProp" />
         </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
@@ -33,24 +16,29 @@
           <div>泵站环境</div>
         </template>
         <template #container>
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="高位水池液位" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="高位水池液温" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="低位水池液位" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="低位水池液温" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="环境甲烷浓度" />
-          <ListItem class="w-100% mb-5px" :value="activedPump.name" label="泵站室内温度" />
+          <List v-bind="pumpStationListProp">
+            <template #title></template>
+          </List>
         </template>
       </ventBox1>
     </div>
+    <CategoryBoard v-bind="pumpCategoryProp" />
     <div class="lr right-box">
       <div class="item-box sensor-container">
-        <CustomBoard label="累积抽采量" :value="cumulativeExtraction" />
-        <CustomBoard label="累积抽采时间" :value="cumulativeExtractionTime" />
         <ventBox1>
           <template #title>
             <div>自动模式</div>
           </template>
-          <template #container> </template>
+          <template #container>
+            <div class="flex justify-between mt-10px mb-10px">
+              <Button>一键倒机</Button>
+              <Button>一键启停</Button>
+            </div>
+            <List icon="pump" title="抽放泵" layout="double-columns" type="status-light" :label-width="80" v-bind="pumpStatusProp" />
+            <List icon="water-pump" title="水泵" layout="double-columns" type="status-light" :label-width="80" v-bind="waterPumpStatusProp" />
+            <List icon="gas-pump" title="高负压配气泵" layout="double-columns" type="status-light" :label-width="80" v-bind="HPumpStatusProp" />
+            <List icon="gas-pump" title="低负压配气泵" layout="double-columns" type="status-light" :label-width="80" v-bind="LPumpStatusProp" />
+          </template>
         </ventBox1>
       </div>
     </div>
@@ -60,61 +48,103 @@
 <script setup lang="ts" name="gas-pump-monitor">
   import { ref, onMounted, defineProps, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import { Tabs, TabPane } from 'ant-design-vue';
-  import ListItem from './listItem.vue';
-  import CustomBoard from './customBoard.vue';
-  import { string } from 'vue-types';
-  import { PumpCtrlItems } from '../../../monitorManager/gasPumpMonitor/gasPump.data';
+  import List from '@/views/vent/gas/components/list/index.vue';
+  import BaseTab from '@/views/vent/gas/components/tab/baseTab.vue';
+  import Button from '@/views/vent/gas/components/form/button.vue';
+  import CategoryBoard from '@/views/vent/gas/components/board/categoryBoard.vue';
+  import {
+    pumpListConfig,
+    pumpStationListConfig,
+    pumpStatusConfig,
+    waterPumpStatusConfig,
+    HPumpStationListItems,
+    LPumpStationListItems,
+    statusConfig,
+    HPumpCategoryConfig,
+    LPumpCategoryConfig,
+  } from '../gasPumpMonitor.data';
 
-  const props = defineProps({
+  defineProps({
     deviceId: {
       type: String,
       require: true,
     },
   });
 
-  // 抽放泵相关
-  const pumps = ref<any[]>([]);
+  // 抽放泵模块的Tab相关
+  const pumpSelection = ref([
+    { name: 't1', id: 1 },
+    { name: 't2', id: 2 },
+    { name: 't3', id: 3 },
+    { name: 't4', id: 4 },
+  ]);
+  const activedPumpID = ref(1);
 
-  function fetchPumps() {
-    const fakePPS = [
-      { name: 't1', id: 1 },
-      { name: 't2', id: 2 },
-      { name: 't3', id: 3 },
-      { name: 't4', id: 4 },
-    ];
-    pumps.value = fakePPS;
-    activedTab.value = fakePPS[0].id;
+  // const pump = ref({});
+  // 将列表配置项转换为列表可用的prop
+  function transConfigToProp(config) {
+    return config.map((c) => {
+      return {
+        ...c,
+        value: c.label,
+        label: c.label,
+      };
+    });
   }
 
-  // 抽放泵模块的Tab相关
-  const tabs = computed(() => {
-    return pumps.value;
+  // 各个模块的配置项
+  const pumpListProp = computed(() => {
+    return {
+      items: transConfigToProp(pumpListConfig),
+    };
   });
-  const activedTab = ref(0);
-
-  // 已选中的具体的抽放泵
-  const activedPump = computed(() => {
-    return pumps.value.find((e) => e.id === activedTab.value) || {};
+  const pumpStationListProp = computed(() => {
+    return {
+      items: transConfigToProp(pumpStationListConfig),
+    };
+  });
+  const pumpStatusProp = computed(() => {
+    return {
+      status: statusConfig as any,
+      items: transConfigToProp(pumpStatusConfig),
+    };
+  });
+  const waterPumpStatusProp = computed(() => {
+    return {
+      status: statusConfig as any,
+      items: transConfigToProp(waterPumpStatusConfig),
+    };
+  });
+  const HPumpStatusProp = computed(() => {
+    return {
+      status: statusConfig as any,
+      items: transConfigToProp(HPumpStationListItems),
+    };
+  });
+  const LPumpStatusProp = computed(() => {
+    return {
+      status: statusConfig as any,
+      items: transConfigToProp(LPumpStationListItems),
+    };
   });
 
   // 告示板相关字段
-  // 累积抽采量
-  const cumulativeExtraction = ref(121345);
-  // 累积抽采时间
-  const cumulativeExtractionTime = ref(345121);
-
-  onMounted(async () => {
-    fetchPumps();
+  const pumpCategoryProp = computed(() => {
+    return {
+      categoryTop: transConfigToProp(HPumpCategoryConfig),
+      categoryButtom: transConfigToProp(LPumpCategoryConfig),
+    };
   });
+
+  onMounted(async () => {});
 </script>
 
 <style lang="less" scoped>
   @import '@/views/vent/monitorManager/comment/less/workFace.less';
   @ventSpace: zxm;
-  @tab-bg: darkcyan;
-  @tab-pane-bg: blue;
-  @tab-pane-border: lightblue;
+  @tab-bg: #10427a;
+  @tab-pane-bg: #166ab5;
+  @tab-pane-border: #2cb6ff;
 
   .pump__tabs {
     font-weight: bold;
@@ -125,6 +155,6 @@
   .pump__tabs_pane_actived {
     background-color: @tab-pane-bg;
     border-radius: 5px 5px 0 0;
-    border-bottom: 4px solid @tab-pane-border;
+    border-bottom: 5px solid @tab-pane-border;
   }
 </style>

src/views/vent/gas/gasPumpMonitor/gasPumpMonitor.data.ts

@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+
 export const navList = ref([
   {
     title: '设备监测',
@@ -16,3 +17,79 @@ export const navList = ref([
     isHover: false,
   },
 ]);
+
+export const statusConfig = [{ value: true, label: '开启' }, { label: '关闭' }];
+
+/** 抽放泵列表配置项 */
+export const pumpListConfig = [
+  { prop: 'activedPump', label: '电压' },
+  { prop: 'activedPump', label: '电流' },
+  { prop: 'activedPump', label: '电机前轴温度' },
+  { prop: 'activedPump', label: '电机后轴温度' },
+  { prop: 'activedPump', label: '泵前轴温度' },
+  { prop: 'activedPump', label: '泵后轴温度' },
+  { prop: 'activedPump', label: '垂直振幅' },
+  { prop: 'activedPump', label: '水平振幅' },
+  { prop: 'activedPump', label: '运行时间' },
+];
+
+/** 泵站列表配置项 */
+export const pumpStationListConfig = [
+  { prop: 'activedPump', label: '高位水池液位' },
+  { prop: 'activedPump', label: '高位水池液温' },
+  { prop: 'activedPump', label: '低位水池液位' },
+  { prop: 'activedPump', label: '低位水池液温' },
+  { prop: 'activedPump', label: '环境甲烷浓度' },
+  { prop: 'activedPump', label: '泵站室内温度' },
+];
+
+/** 抽采泵状态列表配置项 */
+export const pumpStatusConfig = [
+  { prop: 'activedPump', label: '1#' },
+  { prop: 'activedPump', label: '2#' },
+  { prop: 'activedPump', label: '3#' },
+  { prop: 'activedPump', label: '4#' },
+];
+
+/** 水泵状态列表配置项 */
+export const waterPumpStatusConfig = [
+  { prop: 'activedPump', label: '1#' },
+  { prop: 'activedPump', label: '2#' },
+  { prop: 'activedPump', label: '3#' },
+  { prop: 'activedPump', label: '4#' },
+];
+
+/** 高负压泵状态列表配置项 */
+export const HPumpStationListItems = [
+  { prop: 'activedPump', label: '开度', span: 24, type: 'default' },
+  { prop: 'activedPump', label: '1#进气阀' },
+  { prop: 'activedPump', label: '2#进气阀' },
+  { prop: 'activedPump', label: '3#进气阀' },
+  { prop: 'activedPump', label: '4#进气阀' },
+];
+
+/** 低负压泵状态列表配置项 */
+export const LPumpStationListItems = [
+  { prop: 'activedPump', label: '开度', span: 24, type: 'default' },
+  { prop: 'activedPump', label: '1#进气阀' },
+  { prop: 'activedPump', label: '2#进气阀' },
+  { prop: 'activedPump', label: '3#进气阀' },
+  { prop: 'activedPump', label: '4#进气阀' },
+];
+
+/** 高负压泵监测类别配置项 */
+export const HPumpCategoryConfig = [
+  { prop: 'activedPump', label: '累积抽采率' },
+  { prop: 'activedPump', label: 'CO浓度' },
+  { prop: 'activedPump', label: '高负压浓度' },
+  { prop: 'activedPump', label: '瞬时流量' },
+  { prop: 'activedPump', label: '累计抽采时间' },
+];
+/** 低负压泵监测类别配置项 */
+export const LPumpCategoryConfig = [
+  { prop: 'activedPump', label: '累积抽采率' },
+  { prop: 'activedPump', label: 'CO浓度' },
+  { prop: 'activedPump', label: '低负压浓度' },
+  { prop: 'activedPump', label: '瞬时流量' },
+  { prop: 'activedPump', label: '累计抽采时间' },
+];

src/views/vent/gas/gasPumpMonitor/index.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="scene-box">
     <customHeader

src/views/vent/gas/gasPumpSetting/components/settingForm.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="setting-form">
+    <div class="setting-form__wrapper">
+      <FormTitle icon="gas-pump" title="工作面参数" />
+      <BasicForm :schemas="workSurfaceFormSchema" @register="regWSForm" @submit="submitHandler">
+        <template #input="{ model, field, schema }">
+          <ListItem class="w-100%" v-model:value="model[field]" type="input" :label="schema.label" bordered :label-width="200" />
+        </template>
+      </BasicForm>
+    </div>
+    <div class="setting-form__wrapper">
+      <FormTitle icon="pump" title="抽采单元参数" />
+      <BasicForm :schemas="extractionUnitFormSchema" @register="regEUForm" @submit="submitHandler">
+        <template #input="{ model, field, schema }">
+          <ListItem class="w-100%" v-model:value="model[field]" type="input" :label="schema.label" bordered :label-width="200" />
+        </template>
+      </BasicForm>
+    </div>
+    <div class="setting-form__wrapper">
+      <FormTitle icon="water-pump" title="计算参数" />
+      <BasicForm :schemas="calculationFormSchema" @register="regCCForm" @submit="submitHandler">
+        <template #radio="{ model, field, schema }">
+          <ListItem class="w-100%">
+            <template #label>
+              <Switch v-model:checked="model[field]" size="small" />
+              <span class="ml-10px">{{ schema.label }}</span>
+            </template>
+          </ListItem>
+        </template>
+        <template #input="{ model, field, schema }">
+          <ListItem class="w-100%" v-model:value="model[field]" type="input" :label="schema.label" bordered :label-width="200" />
+        </template>
+      </BasicForm>
+    </div>
+    <div class="text-right">
+      <Button class="mr-10px setting-form__button" type="primary" ghost @click="cancel">取消</Button>
+      <Button class="mr-10px setting-form__button" type="primary" ghost @click="save">保存</Button>
+      <Button class="mr-10px setting-form__button" type="primary" ghost @click="submit">提交</Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Switch, Button } from 'ant-design-vue';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+  import FormTitle from '@/views/vent/gas/components/form/formTitle.vue';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { workSurfaceFormSchema, extractionUnitFormSchema, calculationFormSchema } from '../gasPumpSetting.data';
+  import { ref } from 'vue';
+
+  const emit = defineEmits(['submit', 'save', 'cancel']);
+
+  const defaultFormProp = {
+    //注册表单列
+    showActionButtonGroup: false,
+    labelCol: { span: 0 },
+    wrapperCol: { span: 24 },
+    baseColProps: {
+      flex: '20%',
+    },
+  };
+  const formData = ref<Record<string, string | boolean>>({});
+  const [regWSForm, { submit: submitWSForm }] = useForm(defaultFormProp);
+  const [regEUForm, { submit: submitEUForm }] = useForm(defaultFormProp);
+  const [regCCForm, { submit: submitCCForm }] = useForm(defaultFormProp);
+  function submitHandler(v) {
+    formData.value = {
+      ...formData.value,
+      ...v,
+    };
+  }
+
+  function cancel() {
+    emit('cancel');
+  }
+  function save() {
+    emit('save');
+  }
+
+  function submit() {
+    Promise.all([submitWSForm(), submitEUForm(), submitCCForm()]).then(() => {
+      emit('submit', formData.value);
+    });
+  }
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .setting-form {
+    padding: 0 20px;
+  }
+
+  .setting-form__wrapper {
+    color: #fff;
+    border-top: 3px solid @vent-gas-primary-text;
+    background-color: #0091ff12;
+    padding: 10px 10px 0 10px;
+    margin-bottom: 10px;
+  }
+
+  .setting-form__button {
+    color: @vent-gas-primary-text;
+    border-color: @vent-gas-primary-text;
+    background-color: transparent !important;
+  }
+</style>

src/views/vent/gas/gasPumpSetting/gasPumpSetting.data.ts

@@ -0,0 +1,259 @@
+import { FormSchema } from '@/components/Form';
+
+/** 工作面参数表单配置项 */
+export const workSurfaceFormSchema: FormSchema[] = [
+  {
+    label: '钻孔长度',
+    field: 'zkcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔方位角',
+    field: 'zkfwj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔倾角',
+    field: 'zkqj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔间距',
+    field: 'zkjj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '抽采半径',
+    field: 'ccbj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '管路直径',
+    field: 'glzj',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '残余可解吸瓦斯量',
+    field: 'cykjxwsl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面回采率',
+    field: 'gzmhcl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面长度',
+    field: 'gzmcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '巷道宽度',
+    field: 'hdkd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面采高',
+    field: 'gzmcg',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '最低允许风速',
+    field: 'zdyxfs',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '最大允许风速',
+    field: 'zdyxfs',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '回风流风速',
+    field: 'hflfs',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '单元钻孔抽采时间差异系数',
+    field: 'dyzkccsjcyxs',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面日产量',
+    field: 'gzmrcl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '取样深度',
+    field: 'qysd',
+    component: 'Input',
+    slot: 'input',
+  },
+];
+
+/** 计算参数表单配置项 */
+export const calculationFormSchema: FormSchema[] = [
+  {
+    label: '公式计算',
+    field: 'gsjs',
+    component: 'RadioGroup',
+    slot: 'radio',
+  },
+  {
+    label: '预抽瓦斯达标量',
+    field: 'ycwsdbl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '割煤相对瓦斯涌出量',
+    field: 'gmxdwsycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '放煤相对瓦斯涌出量',
+    field: 'fmxdwsycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '采空区相对瓦斯涌出量',
+    field: 'ckqxdwsycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '邻近层相对瓦斯涌出量',
+    field: 'ljcxdwsycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '邻近层瓦斯排放量',
+    field: 'ljcwspfl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '残余瓦斯压力',
+    field: 'cywsyl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '残余瓦斯含量',
+    field: 'cywshl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '单元钻孔抽采时间差异系数',
+    field: 'dyzkccsjcyxs',
+    component: 'Input',
+    slot: 'input',
+  },
+];
+
+/** 抽采单元参数表单配置项 */
+export const extractionUnitFormSchema: FormSchema[] = [
+  {
+    label: '评价单元煤炭储量',
+    field: 'pjdymtcl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面瓦斯储量',
+    field: 'gzmwscl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '实时支管抽采负压',
+    field: 'sszgccfy',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔施工长度',
+    field: 'zksgcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '钻孔设计长度',
+    field: 'zksjcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '单元原始瓦斯含量',
+    field: 'dyyswshl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '单元原始瓦斯压力',
+    field: 'dyyswsyl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '煤层厚度',
+    field: 'mchd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面切眼长度',
+    field: 'gzmqycd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面走向长度',
+    field: 'gzmzxcd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '个邻近层煤层厚度',
+    field: 'gljcmchd',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面预测相对涌出量',
+    field: 'gzmycxdycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面预测绝对涌出量',
+    field: 'gzmycjdycl',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面有效配风量',
+    field: 'gzmyxpfl',
+    component: 'Input',
+    slot: 'input',
+  },
+];

src/views/vent/gas/gasPumpSetting/index.vue

@@ -0,0 +1,12 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <CustomHeader> 瓦斯抽采达标评判参数设置 </CustomHeader>
+  <SettingForm class="mt-75px" />
+</template>
+
+<script lang="ts" setup>
+  import CustomHeader from '/@/components/vent/customHeader.vue';
+  import SettingForm from './components/settingForm.vue';
+</script>
+
+<style lang="less" scoped></style>

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

@@ -50,7 +50,7 @@
     dataQ: 0,
     dataH: 0,
   });
-  let maxM3 = 150; // 高家梁是150，其他400
+  let maxM3 = 400; // 高家梁是150，其他400
   //风机启动状态
   let runStatus = ref('');
   //获取dom节点

src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -181,7 +181,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">火灾预警监测</span>
-              <span :class="centerData.fire == '正常' ? 'value' : 'value1'">{{ centerData.fire == '正常' ? '低风险' : centerData.fire }}</span>
+              <span :class="centerData.fire ? 'value' : 'value1'">{{ centerData.fire == '正常' ? '低风险' : centerData.fire }}</span>
             </div>
           </div>
           <div class="item item2">
@@ -190,7 +190,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">设备预警监测</span>
-              <span :class="centerData.sb == '正常' ? 'value' : 'value1'">{{ centerData.sb == '正常' ? '低风险' : centerData.sb }}</span>
+              <span :class="centerData.sb ? 'value' : 'value1'">{{ centerData.sb == '正常' ? '低风险' : centerData.sb }}</span>
             </div>
           </div>
           <div class="item item3">
@@ -199,7 +199,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">粉尘预警监测</span>
-              <span :class="centerData.fc == '正常' ? 'value' : 'value1'">{{ centerData.fc == '正常' ? '低风险' : centerData.fc }}</span>
+              <span :class="centerData.fc ? 'value' : 'value1'">{{ centerData.fc == '正常' ? '低风险' : centerData.fc }}</span>
             </div>
           </div>
           <div class="item item4">
@@ -208,7 +208,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">瓦斯预警监测</span>
-              <span :class="centerData.ws == '正常' ? 'value' : 'value1'">{{ centerData.ws == '正常' ? '低风险' : centerData.ws }}</span>
+              <span :class="centerData.ws ? 'value' : 'value1'">{{ centerData.ws == '正常' ? '低风险' : centerData.ws }}</span>
               <div class="">
                 <span class="title">矿井瓦斯鉴定等级监测</span>
                 <span class="value">低瓦斯</span>
@@ -221,7 +221,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">通风预警监测</span>
-              <span :class="centerData.tf == '正常' ? 'value' : 'value1'">{{ centerData.tf == '正常' ? '低风险' : centerData.tf }}</span>
+              <span :class="centerData.tf ? 'value' : 'value1'">{{ centerData.tf == '正常' ? '低风险' : centerData.tf }}</span>
             </div>
           </div>
         </div>
@@ -259,7 +259,7 @@
                 'value6': item.level == 201,
                 'value': item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
               }"> {{ item.value ? item.value : '-' }} </div> -->
-              <div class="value1"> {{ !item.value && item.value != '0' ? '-' : item.value }} </div>
+              <div class="value1"> {{ !item.value && item.value != '0' ? '-' : item.value == '正常' ? '低风险' : item.value }} </div>
               <div class="title">{{ item.title }}</div>
             </div>
           </div>

src/views/vent/monitorManager/comment/HistoryTable.vue

@@ -151,29 +151,35 @@
   async function getDeviceList() {
     if (props.deviceType.split('_')[1] && props.deviceType.split('_')[1] === 'history') return;
     let result;
-    if (globalConfig.History_Type == 'vent') {
-      if (props.deviceListApi && !props.sysId) {
-        const res = await props.deviceListApi();
-        if (res['records'] && res['records'].length > 0) result = res['records'];
-      } else {
+    debugger;
+    if (props.deviceListApi) {
+      const res = await props.deviceListApi();
+      if (res['records'] && res['records'].length > 0) {
+        result = res['records'];
+      } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
+        result = res['msgTxt'][0]['datalist'];
+      }
+    } else {
+      if (globalConfig.History_Type == 'vent') {
         result = await defHttp.get({
           url: '/safety/ventanalyManageSystem/linkdevicelist',
           params: { sysId: props.sysId, deviceType: props.deviceType, pageSize: 9999 },
         });
+      } else {
+        result = await defHttp.get({
+          url: '/safety/ventanalyManageSystem/linkdevicelist',
+          params: { sysId: props.sysId, deviceType: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType, pageSize: 9999 },
+        });
       }
-    } else {
-      result = await defHttp.get({
-        url: '/safety/ventanalyManageSystem/linkdevicelist',
-        params: { sysId: props.sysId, deviceType: props.deviceType.startsWith('vehicle') ? 'location_normal' : props.deviceType },
-      });
     }
+
     if (result) {
       deviceOptions.value = [];
       deviceOptions.value = result.map((item, index) => {
         return {
           label: item['strinstallpos'],
-          value: item['id'],
-          strtype: item['strtype'],
+          value: item['id'] || item['deviceID'],
+          strtype: item['strtype'] || item['deviceType'],
           strinstallpos: item['strinstallpos'],
           devicekind: item['devicekind'],
           stationtype: item['stationtype'],
@@ -399,6 +405,7 @@
   });
 
   onMounted(async () => {
+    debugger;
     await getDeviceList();
     if (deviceOptions.value[0]) {
       stationType.value = deviceOptions.value[0]['stationtype'];

src/views/vent/monitorManager/deviceMonitor/components/device/device.api.ts

@@ -7,7 +7,7 @@ enum Api {
   // deviceTypeList = '/sys/dict/DeviceKind/queryBySystem',
   deviceTypeList = '/safety/ventanalyDeviceInfo/DeviceKind/queryBySystem',
   itemList = '/sys/dictItem/list',
-
+  devPosition = '/sys/dict/getDictItems/devPosVisible',
 }
 /**
  * 列表接口
@@ -24,3 +24,4 @@ export const getDeviceList = (params) => defHttp.get({ url: Api.baseList, params
 export const getDeviceTypeList = (params) => defHttp.get({ url: Api.deviceTypeList, params });
 
 export const itemList = (params) => defHttp.get({ url: Api.itemList, params });
+export const devPosition = (params) => defHttp.get({ url: Api.devPosition, params });

src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -57,9 +57,6 @@ export function getMonitorComponent() {
     case 'sdmtjthlgmk': //哈拉沟
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.vue'));
       break;
-    // case 'sdmtjtbetmk': // 布尔台
-    // case 'sdmtjtbdmk': // 保德
-    // case 'sdmtjtbltmk': // 补连塔
     default:
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal1.vue'));
   }
@@ -67,6 +64,7 @@ export function getMonitorComponent() {
   const gasModal = defineAsyncComponent(() => import('./modal/gas.modal.vue'));//瓦斯巡检
   const DustModal = defineAsyncComponent(() => import('./modal/dust.modal.vue'));
   const BallvalveModal = defineAsyncComponent(() => import('./modal/ballvalve.modal.vue'));
+  // const AtomizingModal = defineAsyncComponent(() => import('./modal/atomizing.modal.vue'));
 
   return { FiberModal, BundleModal,gasModal, DustModal, BallvalveModal };
 }
@@ -320,11 +318,12 @@ export const haveDetailArr = [
   'fanmain',
   'fiber',
   'bundletube',
-  // 'dusting',
+  'dusting',
   'ballvalve',
   'pump',
   'safetymonitor',
   'nitrogen',
+  'atomizing',
 ];
 
 export const locationFormConfig = {

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -281,7 +281,7 @@
                 :sysId="systemID" 
                 :columns-type="`${deviceType}`"
                 :device-type="deviceType"
-                :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID, pageSize: 10000 })"
+                :device-list-api="list.bind(null, { devicetype: deviceType, sysId: systemID, pageSize: 10000 })"
                 designScope="device-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
@@ -314,7 +314,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue'
 import { SendOutlined } from '@ant-design/icons-vue';
-import { list, getDeviceList, getDeviceTypeList } from './device.api'
+import { list, getDeviceList, getDeviceTypeList, devPosition } from './device.api'
 import AlarmHistoryTable from '../../../comment/AlarmHistoryTable.vue';
 import HistoryTable from '../../../comment/HistoryTable.vue';
 import HandlerHistoryTable from '../../../comment/HandlerHistoryTable.vue';
@@ -400,16 +400,18 @@ const onSelect: TreeProps['onSelect'] = (keys, e) => {
   deviceType.value = ''
   systemID.value = ''
   deviceList.value = []
+  const title = e.node.title; // 在
+  debugger;
   if (e.node.parent && (e.node.parent.node.type.toString()).startsWith('sys')) {
     systemType.value = e.node.parent.node.type
     deviceType.value = e.node.parent.node.type
     systemID.value = e.node.type
     // 传递工作面id信息,用于定位
-    actions.setGlobalState({ locationObj: { pageType: deviceType.value, deviceid: systemID.value }, pageObj: null });
+    actions.setGlobalState({ locationObj: { pageType: deviceType.value, deviceid: systemID.value  }, pageObj: null });
   } else {
     systemType.value = e.node.type
     deviceType.value = e.node.type
-    actions.setGlobalState({ locationObj: { pageType: deviceType.value }, pageObj: null });
+    actions.setGlobalState({ locationObj: { pageType: deviceType.value  }, pageObj: null });
   }
   if(timer == null){
     timer = undefined
@@ -633,6 +635,9 @@ function goDetail(record?) {
     } else if (deviceType.value.startsWith('ballvalve')) {
       currentModal.value = BallvalveModal
       modalVisible.value = true;
+    } else if (deviceType.value.startsWith('atomizing')) {
+      currentModal.value = AtomizingModal
+      modalVisible.value = true;
     } else if (deviceType.value.indexOf("gate") != -1) {
       const newPage = router.resolve({ path: '/monitorChannel/monitor-gate', query: { id: activeID.value } })
       window.open(newPage.href, '_blank')
@@ -819,6 +824,8 @@ onMounted(async () => {
   const posShowData = pageObj.locationPlane
   if (posShowData) {
     locationList.value = posShowData
+  }else{
+    locationList.value = await devPosition({})
   }
 })
 

src/views/vent/monitorManager/deviceMonitor/components/device/modal/ballvalve.modal.vue

@@ -283,7 +283,7 @@
         // if (newActiveID != oldActiveID) {
         //   activeDeviceID.value = newActiveID as string;
         // }
-        activeDeviceID.value =  activeDeviceID.value ? activeDeviceID.value :  newActiveID ;
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         deviceList.value = newDataSource?.filter((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
             // activeDeviceID.value = item.deviceID;

src/views/vent/monitorManager/deviceMonitor/components/device/modal/dust.modal.vue

@@ -262,7 +262,7 @@
         // if (newActiveID != oldActiveID) {
         //   activeDeviceID.value = newActiveID as string;
         // }
-        activeDeviceID.value =  activeDeviceID.value ? activeDeviceID.value :  newActiveID ;
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         newDataSource?.forEach((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
             // activeDeviceID.value = item.deviceID;

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.vue

@@ -192,7 +192,7 @@
         // if (newActiveID != oldActiveID) {
         //   activeDeviceID.value = newActiveID as string;
         // }
-        activeDeviceID.value =  activeDeviceID.value ? activeDeviceID.value :  newActiveID ;
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         newDataSource?.forEach((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
             // activeDeviceID.value = item.deviceID;
@@ -222,8 +222,6 @@
         });
       });
 
-     
-
       return {
         register,
         model: modelRef,

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal1.vue

@@ -237,8 +237,8 @@
       watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
         console.log(newDataSource, 'newDataSource--------------');
         deviceList.value = newDataSource as any[];
-       
-        activeDeviceID.value =  activeDeviceID.value ? activeDeviceID.value :  newActiveID ;
+
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
         newDataSource?.forEach((item: any, index) => {
           if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
             // activeDeviceID.value = item.deviceID;

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.three.ts

@@ -126,11 +126,11 @@ export const addText = (selectData) => {
   }
   const textArr = [
     {
-      text: `煤矿巷道远程局部风机系统`,
+      text: `智能局部通风机监测与控制系统`,
       font: 'normal 30px Arial',
       color: '#009900',
       strokeStyle: '#002200',
-      x: 50,
+      x: 20,
       y: 108,
     },
     {

src/views/vent/monitorManager/windowMonitor/dandaoFc.threejs.ts

@@ -47,7 +47,7 @@ class singleWindow {
         y: 90,
       },
       {
-        text: `${selectData.OpenDegree ? '开度值' : selectData.forntArea ? '过风面积(m2)' : '过风面积(m2)'}:`,
+        text: `${selectData.OpenDegree ? '开度值(%)' : selectData.forntArea ? '过风面积(m2)' : '过风面积(m2)'}:`,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
@@ -67,7 +67,7 @@ class singleWindow {
         y: 145,
       },
       {
-        text: `${selectData.frontRearDP ? '风窗压差(Pa)：' : selectData.windSpeed ? '风速：' : '通信状态：'}:`,
+        text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速(m/s)' : '通信状态'}:`,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
@@ -91,7 +91,7 @@ class singleWindow {
         y: 200,
       },
       {
-        text: `${selectData.fWindowM3 ? '过风量(m³/min)：' : '风窗道数：'} `,
+        text: `${selectData.fWindowM3 ? '过风量(m³/min)' : '风窗道数'}: `,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',

src/views/vent/monitorManager/windowMonitor/dandaoFcBet.threejs.ts

@@ -47,7 +47,7 @@ class singleWindowBet {
         y: 95,
       },
       {
-        text: `${selectData.OpenDegree ? '开度值' : selectData.forntArea ? '过风面积(m2)' : '过风面积(m2)'}:`,
+        text: `${selectData.OpenDegree ? '开度值(%)' : selectData.forntArea ? '过风面积(m2)' : '过风面积(m2)'}:`,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
@@ -67,7 +67,7 @@ class singleWindowBet {
         y: 145,
       },
       {
-        text: `${selectData.frontRearDP ? '风窗压差(Pa)：' : selectData.windSpeed ? '风速：' : '通信状态：'}:`,
+        text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速(m/s)' : '通信状态：'}:`,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
@@ -91,7 +91,7 @@ class singleWindowBet {
         y: 200,
       },
       {
-        text: `${selectData.fWindowM3 ? '过风量(m³/min)：' : '风窗道数：'} `,
+        text: `${selectData.fWindowM3 ? '过风量(m³/min)' : '风窗道数'}: `,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',

src/views/vent/monitorManager/windowMonitor/shuangdaoFc.threejs.ts

@@ -42,7 +42,7 @@ class doubleWindow {
         y: 97,
       },
       {
-        text: `${selectData.OpenDegree ? '开度值' : selectData.forntArea ? '过风面积(m2)' : '过风面积(m2)'}:`,
+        text: `${selectData.OpenDegree ? '开度值(%)' : selectData.forntArea ? '过风面积(m2)' : '过风面积(m2)'}:`,
         font: 'normal 28px Arial',
         color: '#009900',
         strokeStyle: '#002200',
@@ -62,7 +62,7 @@ class doubleWindow {
         y: 150,
       },
       {
-        text: `${selectData.frontRearDP ? '风窗压差(Pa)：' : selectData.windSpeed ? '风速：' : '通信状态：'}:`,
+        text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速' : '通信状态'}:`,
         font: 'normal 28px Arial',
         color: '#009900',
         strokeStyle: '#002200',
@@ -86,7 +86,7 @@ class doubleWindow {
         y: 210,
       },
       {
-        text: `${selectData.fWindowM3 ? '过风量(m³/min)：' : '风窗道数：'} `,
+        text: `${selectData.fWindowM3 ? '过风量(m³/min)' : '风窗道数'}: `,
         font: 'normal 28px Arial',
         color: '#009900',
         strokeStyle: '#002200',

src/views/vent/monitorManager/windrectMonitor/index.vue

@@ -76,7 +76,7 @@
                   <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
                     record.isRun == -2 ? '空闲' : '等待'
                   }}</a-tag>
-                  <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
+                  <a-tag v-else-if="record.isRun == 100" color="#4693FF">空闲</a-tag>
                   <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
                 </template>
               </template>
@@ -139,7 +139,7 @@
             </div>
           </a-tab-pane>
           <a-tab-pane key="6" tab="测风结果">
-            <ResultTable deviceType="windrect_list" :scroll="scroll" />
+            <ResultTable v-if="activeKey === '6'" deviceType="windrect_list" :scroll="scroll" />
           </a-tab-pane>
         </a-tabs>
       </dv-border-box8>