1. 新增Hls格式视频流播放功能

2. 局部风机模型添加回风动画
3. 主风机新增报表录入功能
4. 历史记录由之前一次查询一天改为查询多天

package.json

@@ -25,7 +25,7 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@iconify/iconify": "^3.1.1",
     "@kjgl77/datav-vue3": "^1.4.2",
-    "@liveqing/liveplayer-v3": "^3.1.9",
+    "@liveqing/liveplayer-v3": "^3.7.19",
     "@logicflow/core": "^1.2.12",
     "@logicflow/extension": "^1.2.13",
     "@qiaoqiaoyun/drag-free": "^1.1.4",
@@ -72,7 +72,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "showdown": "^2.1.0",
     "sortablejs": "^1.15.0",
-    "three": "^0.160.0",
+    "three": "^0.162.0",
     "tinymce": "^5.10.3",
     "vditor": "^3.9.5",
     "vue": "^3.3.4",
@@ -88,6 +88,9 @@
     "vxe-table": "4.5.12",
     "vxe-table-plugin-antd": "3.1.0",
     "xe-utils": "3.5.13",
+    "xgplayer": "^3.0.13",
+    "xgplayer-flv": "^3.0.13",
+    "xgplayer-hls": "^3.0.13",
     "xss": "^1.0.14"
   },
   "devDependencies": {
@@ -111,7 +114,7 @@
     "@types/qs": "^6.9.7",
     "@types/showdown": "^2.0.1",
     "@types/sortablejs": "^1.15.1",
-    "@types/three": "^0.155.0",
+    "@types/three": "^0.162.0",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.5.0",
     "@vitejs/plugin-legacy": "^2.0.0",

pnpm-lock.yaml

@@ -18,7 +18,7 @@ dependencies:
     specifier: ^1.4.2
     version: 1.7.1(vue@3.3.6)
   '@liveqing/liveplayer-v3':
-    specifier: ^3.1.9
+    specifier: ^3.7.19
     version: 3.7.19
   '@logicflow/core':
     specifier: ^1.2.12
@@ -159,8 +159,8 @@ dependencies:
     specifier: ^1.15.0
     version: 1.15.0
   three:
-    specifier: ^0.160.0
-    version: 0.160.0
+    specifier: ^0.162.0
+    version: 0.162.0
   tinymce:
     specifier: ^5.10.3
     version: 5.10.8
@@ -206,6 +206,15 @@ dependencies:
   xe-utils:
     specifier: 3.5.13
     version: 3.5.13
+  xgplayer:
+    specifier: ^3.0.13
+    version: 3.0.13(core-js@3.33.1)
+  xgplayer-flv:
+    specifier: ^3.0.13
+    version: 3.0.13(core-js@3.33.1)(xgplayer@3.0.13)
+  xgplayer-hls:
+    specifier: ^3.0.13
+    version: 3.0.13(core-js@3.33.1)(xgplayer@3.0.13)
   xss:
     specifier: ^1.0.14
     version: 1.0.14
@@ -272,8 +281,8 @@ devDependencies:
     specifier: ^1.15.1
     version: 1.15.4
   '@types/three':
-    specifier: ^0.155.0
-    version: 0.155.1
+    specifier: ^0.162.0
+    version: 0.162.0
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.4.1
     version: 6.8.0(@typescript-eslint/parser@6.8.0)(eslint@8.52.0)(typescript@4.9.5)
@@ -3596,8 +3605,8 @@ packages:
   /@tsconfig/node16@1.0.4:
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==, tarball: http://registry.npm.taobao.org/@tsconfig/node16/-/node16-1.0.4.tgz}
 
-  /@tweenjs/tween.js@18.6.4:
-    resolution: {integrity: sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==}
+  /@tweenjs/tween.js@23.1.1:
+    resolution: {integrity: sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==}
     dev: true
 
   /@types/babel__core@7.20.3:
@@ -3796,14 +3805,13 @@ packages:
       '@types/estree': 1.0.3
     dev: true
 
-  /@types/three@0.155.1:
-    resolution: {integrity: sha512-uNUwnz/wWRxahjIqTtDYQ1qdE1R1py21obxfuILkT+kKrjocMwRLQQA1l8nMxfQU7VXb7CXu04ucMo8OqZt4ZA==}
+  /@types/three@0.162.0:
+    resolution: {integrity: sha512-0j5yZcVukVIhrhSIC7+LmBPkkMoMuEJ1AfYBZfgNytdYqYREMuiyXWhYOMeZLBElTEAlJIZn7r2W3vqTIgjWlg==}
     dependencies:
-      '@tweenjs/tween.js': 18.6.4
+      '@tweenjs/tween.js': 23.1.1
       '@types/stats.js': 0.17.2
       '@types/webxr': 0.5.7
       fflate: 0.6.10
-      lil-gui: 0.17.0
       meshoptimizer: 0.18.1
     dev: true
 
@@ -5604,6 +5612,12 @@ packages:
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==, tarball: http://registry.npm.taobao.org/concat-map/-/concat-map-0.0.1.tgz}
 
+  /concat-typed-array@1.0.2:
+    resolution: {integrity: sha512-aC878bxeWSlrY6h60cCDwBUXpKwovZrB7+C4+VHNO1CIXW2gBLxbQ757jWtOXUscLGgYI8R84N6uy9fTJPe+0g==}
+    engines: {node: '>=0.10.0'}
+    deprecated: 'WARNING: This package has been renamed to typed-array-concat.'
+    dev: false
+
   /config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==, tarball: http://registry.npm.taobao.org/config-chain/-/config-chain-1.1.13.tgz}
     dependencies:
@@ -5963,6 +5977,10 @@ packages:
     resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==, tarball: http://registry.npm.taobao.org/crypt/-/crypt-0.0.2.tgz}
     dev: false
 
+  /crypto-es@1.2.7:
+    resolution: {integrity: sha512-UUqiVJ2gUuZFmbFsKmud3uuLcNP2+Opt+5ysmljycFCyhA0+T16XJmo1ev/t5kMChMqWh7IEvURNCqsg+SjZGQ==}
+    dev: false
+
   /crypto-js@4.1.1:
     resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==, tarball: http://registry.npm.taobao.org/crypto-js/-/crypto-js-4.1.1.tgz}
     dev: false
@@ -6324,6 +6342,20 @@ packages:
       d3-zoom: 3.0.0
     dev: false
 
+  /d@1.0.2:
+    resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      es5-ext: 0.10.64
+      type: 2.7.2
+    dev: false
+
+  /danmu.js@1.1.13:
+    resolution: {integrity: sha512-knFd0/cB2HA4FFWiA7eB2suc5vCvoHdqio33FyyCSfP7C+1A+zQcTvnvwfxaZhrxsGj4qaQI2I8XiTqedRaVmg==}
+    dependencies:
+      event-emitter: 0.3.5
+    dev: false
+
   /dargs@7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==, tarball: http://registry.npm.taobao.org/dargs/-/dargs-7.0.0.tgz}
     engines: {node: '>=8'}
@@ -6521,7 +6553,7 @@ packages:
     engines: {node: '>=0.4.0'}
 
   /delegate@3.2.0:
-    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==, tarball: http://registry.npm.taobao.org/delegate/-/delegate-3.2.0.tgz}
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
     dev: false
 
   /deprecation@2.3.1:
@@ -6710,6 +6742,10 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /downloadjs@1.4.7:
+    resolution: {integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==}
+    dev: false
+
   /duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==, tarball: http://registry.npm.taobao.org/duplexer/-/duplexer-0.1.2.tgz}
     dev: true
@@ -6924,6 +6960,33 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /es5-ext@0.10.64:
+    resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
+    engines: {node: '>=0.10'}
+    requiresBuild: true
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.4
+      esniff: 2.0.1
+      next-tick: 1.1.0
+    dev: false
+
+  /es6-iterator@2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      es6-symbol: 3.1.4
+    dev: false
+
+  /es6-symbol@3.1.4:
+    resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      d: 1.0.2
+      ext: 1.7.0
+    dev: false
+
   /esbuild-android-64@0.14.54:
     resolution: {integrity: sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==}
     engines: {node: '>=12'}
@@ -7354,6 +7417,16 @@ packages:
       - supports-color
     dev: true
 
+  /esniff@2.0.1:
+    resolution: {integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      event-emitter: 0.3.5
+      type: 2.7.2
+    dev: false
+
   /esno@0.17.0:
     resolution: {integrity: sha512-w78cQGlptQfsBYfootUCitsKS+MD74uR5L6kNsvwVkJsfzEepIafbvWsx2xK4rcFP4IUftt4F6J8EhagUxX+Bg==, tarball: http://registry.npm.taobao.org/esno/-/esno-0.17.0.tgz}
     hasBin: true
@@ -7410,9 +7483,15 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /event-emitter@0.3.5:
+    resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+    dev: false
+
   /eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==, tarball: http://registry.npm.taobao.org/eventemitter3/-/eventemitter3-4.0.7.tgz}
-    dev: true
 
   /eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==, tarball: http://registry.npm.taobao.org/eventemitter3/-/eventemitter3-5.0.1.tgz}
@@ -7514,6 +7593,12 @@ packages:
       jest-util: 29.7.0
     dev: true
 
+  /ext@1.7.0:
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
+    dependencies:
+      type: 2.7.2
+    dev: false
+
   /extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==, tarball: http://registry.npm.taobao.org/extend-shallow/-/extend-shallow-2.0.1.tgz}
     engines: {node: '>=0.10.0'}
@@ -10051,10 +10136,6 @@ packages:
       type-check: 0.4.0
     dev: true
 
-  /lil-gui@0.17.0:
-    resolution: {integrity: sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==}
-    dev: true
-
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==, tarball: http://registry.npm.taobao.org/lilconfig/-/lilconfig-2.1.0.tgz}
     engines: {node: '>=10'}
@@ -10678,6 +10759,10 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==, tarball: http://registry.npm.taobao.org/neo-async/-/neo-async-2.6.2.tgz}
     dev: true
 
+  /next-tick@1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+    dev: false
+
   /nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==, tarball: http://registry.npm.taobao.org/nice-try/-/nice-try-1.0.5.tgz}
     dev: true
@@ -12722,8 +12807,8 @@ 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@0.160.0:
-    resolution: {integrity: sha512-DLU8lc0zNIPkM7rH5/e1Ks1Z8tWCGRq6g8mPowdDJpw1CFBJMU7UoJjC6PefXW7z//SSl0b2+GCw14LB+uDhng==}
+  /three@0.162.0:
+    resolution: {integrity: sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ==}
     dev: false
 
   /throat@6.0.2:
@@ -13056,6 +13141,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /type@2.7.2:
+    resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
+    dev: false
+
   /typed-array-buffer@1.0.0:
     resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==, tarball: http://registry.npm.taobao.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz}
     engines: {node: '>= 0.4'}
@@ -14009,6 +14098,74 @@ 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==}
+    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)
+    dev: false
+
+  /xgplayer-hls@3.0.13(core-js@3.33.1)(xgplayer@3.0.13):
+    resolution: {integrity: sha512-bOS6ocB8FWRYdKhg08AL4a/QZGNplDE1H2OZJxvuF/DF6muokxIajWC3kyqzxxbGOkUSIdr4wtDiA5rfMV5SJg==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+      xgplayer: '>=3.0.0'
+    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)
+    dev: false
+
+  /xgplayer-streaming-shared@3.0.13(core-js@3.33.1):
+    resolution: {integrity: sha512-ovNk439/+6uVpMBKDzKq00bXMrDX6s+YHVt/Nl1vpawlgM3IoHKxezBki2FETlXvMYXF4X42/KVtbM3qTd2ScA==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.33.1
+      eventemitter3: 4.0.7
+    dev: false
+
+  /xgplayer-subtitles@3.0.13(core-js@3.33.1):
+    resolution: {integrity: sha512-VlcPg6Ne66mwB6uIlE6gT28WG9u2vugMuho0mVMsB/uQ+XOin5xtH3Jpf2Ewx5CTf3SRfg4VmqUCuuMT7Z1qJg==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.33.1
+      eventemitter3: 4.0.7
+    dev: false
+
+  /xgplayer-transmuxer@3.0.13(core-js@3.33.1):
+    resolution: {integrity: sha512-xncc9HYIRK9glHpalQRXlfLoeJkoq7OimvhWZ+CXdJFWYNG2toHCI5ttSRs8R0nRm07X3sxkXzQUJcZy7y6qNA==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      '@babel/runtime': 7.23.2
+      concat-typed-array: 1.0.2
+      core-js: 3.33.1
+      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==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.33.1
+      danmu.js: 1.1.13
+      delegate: 3.2.0
+      downloadjs: 1.4.7
+      eventemitter3: 4.0.7
+      xgplayer-subtitles: 3.0.13(core-js@3.33.1)
+    dev: false
+
   /xlsx@0.17.5:
     resolution: {integrity: sha512-lXNU0TuYsvElzvtI6O7WIVb9Zar1XYw7Xb3VAx2wn8N/n0whBYrCnHMxtFyIiUU1Wjf09WzmLALDfBO5PqTb1g==, tarball: http://registry.npm.taobao.org/xlsx/-/xlsx-0.17.5.tgz}
     engines: {node: '>=0.8'}

public/js/webrtcstreamer.js

@@ -42,18 +42,18 @@ WebRtcStreamer.prototype.connect =async function(videourl, audiourl, options, lo
 	if (!this.iceServers) {
 		console.log("Get IceServers");
 		try {
-			// fetch(this.srvurl + "/api/getIceServers")
-			// 	.then(this._handleHttpErrors)
-			// 	.then((response) => { return response.json() })
-			// 	.then((response) => this.onReceiveGetIceServers(response, videourl, audiourl, options, localstream))
-			// 	.catch((error) => {
-			// 		debugger
-			// 		// new Error('WebRtcStreamer connect error')
-			// 		return this.onError("getIceServers " + error)
-			// 	})
-			const response = await fetch(this.srvurl + "/api/getIceServers")
-			const res = this._handleHttpErrors(response).json()
-			this.onReceiveGetIceServers(res, videourl, audiourl, options, localstream)
+			fetch(this.srvurl + "/api/getIceServers")
+				.then(this._handleHttpErrors)
+				.then((response) => { return response.json() })
+				.then((response) => this.onReceiveGetIceServers(response, videourl, audiourl, options, localstream))
+				.catch((error) => {
+					debugger
+					// new Error('WebRtcStreamer connect error')
+					return this.onError("getIceServers " + error)
+				})
+			// const response = await fetch(this.srvurl + "/api/getIceServers")
+			// const res = this._handleHttpErrors(response).json()
+			// this.onReceiveGetIceServers(res, videourl, audiourl, options, localstream)
 		} catch (error) {
 			// this.onError("getIceServers " + error)
 			throw new Error('WebRtcStreamer connect error')

src/components/Form/src/jeecg/components/userSelect/UserSelectModal.vue

@@ -35,7 +35,14 @@
         <a-tabs v-model:activeKey="myActiveKey" :centered="true" @change="onChangeTab">
           <!-- 所有用户 -->
           <a-tab-pane key="1" tab="全部" forceRender>
-            <user-list :excludeUserIdList="excludeUserIdList" :dataList="userDataList" :selectedIdList="selectedIdList" depart @selected="onSelectUser" @unSelect="unSelectUser" />
+            <user-list
+              :excludeUserIdList="excludeUserIdList"
+              :dataList="userDataList"
+              :selectedIdList="selectedIdList"
+              depart
+              @selected="onSelectUser"
+              @unSelect="unSelectUser"
+            />
           </a-tab-pane>
 
           <!-- 部门用户 -->
@@ -52,7 +59,13 @@
 
           <!-- 角色用户 -->
           <a-tab-pane key="3" tab="按角色" forceRender>
-            <role-user-list :excludeUserIdList="excludeUserIdList" :searchText="searchText" :selectedIdList="selectedIdList" @selected="onSelectUser" @unSelect="unSelectUser" />
+            <role-user-list
+              :excludeUserIdList="excludeUserIdList"
+              :searchText="searchText"
+              :selectedIdList="selectedIdList"
+              @selected="onSelectUser"
+              @unSelect="unSelectUser"
+            />
           </a-tab-pane>
         </a-tabs>
       </div>
@@ -92,10 +105,10 @@
   const APagination = Pagination;
   import { defHttp } from '/@/utils/http/axios';
 
-  import {computed, ref, toRaw, unref} from 'vue';
+  import { computed, ref, toRaw, unref } from 'vue';
   import { useUserStore } from '/@/store/modules/user';
-  import { mySelfData } from './useUserSelect'
-  
+  import { mySelfData } from './useUserSelect';
+
   export default {
     name: 'UserSelectModal',
     components: {
@@ -123,10 +136,10 @@
         default: false,
       },
       //是否在高级查询中作为条件 可以选择当前用户表达式
-      inSuperQuery:{
+      inSuperQuery: {
         type: Boolean,
         default: false,
-      }
+      },
     },
     emits: ['selected', 'register'],
     setup(props, { emit }) {
@@ -152,9 +165,9 @@
         } else {
           selectedUserList.value = [];
         }
-        if(data.excludeUserIdList){
+        if (data.excludeUserIdList) {
           excludeUserIdList.value = data.excludeUserIdList;
-        }else{
+        } else {
           excludeUserIdList.value = [];
         }
         //如果排除我自己，直接excludeUserIdList.push排除即可
@@ -226,8 +239,8 @@
         if (data.success) {
           let { records, total } = data.result;
           //如果排除的用户id的长度不为0，那么需要改变页数
-          if(unref(excludeUserIdList) && unref(excludeUserIdList).length>0){
-             total = total - unref(excludeUserIdList).length;
+          if (unref(excludeUserIdList) && unref(excludeUserIdList).length > 0) {
+            total = total - unref(excludeUserIdList).length;
           }
           totalRecord.value = total;
           initCurrentUserData(records);
@@ -237,11 +250,11 @@
         }
         console.log('loadUserList', data);
       }
-      
+
       // 往用户列表中添加一个 当前用户选项
       function initCurrentUserData(records) {
-        if(pageNo.value==1 && props.inSuperQuery === true){
-          records.unshift({...mySelfData})
+        if (pageNo.value == 1 && props.inSuperQuery === true) {
+          records.unshift({ ...mySelfData });
         }
       }
       /*--------------加载数据---------------*/
@@ -313,7 +326,7 @@
         selectedIdList,
         onSelectUser,
         unSelectUser,
-        excludeUserIdList
+        excludeUserIdList,
       };
     },
   };

src/design/vent/comment.less

@@ -207,13 +207,17 @@
   .liveVideo{
     height: 208px;
     pointer-events: auto !important;
-    .player {
-        width: 314px;
-        height: 208px;
-        padding: 10px;
-        background: url('/@/assets/images/vent/camera_bg.png');
-        background-size: cover;
-      }
+    width: 314px;
+    padding: 10px;
+    background: url('/@/assets/images/vent/camera_bg.png');
+    background-size: cover;
+    // .player {
+    //     width: 314px;
+    //     height: 208px;
+    //     padding: 10px;
+    //     background: url('/@/assets/images/vent/camera_bg.png');
+    //     background-size: cover;
+    //   }
   }
  
 }

src/hooks/system/useCamera.ts

@@ -1,8 +1,11 @@
 import { defHttp } from '/@/utils/http/axios';
-import { render, h, nextTick } from 'vue';
-import LivePlayer from '@liveqing/liveplayer-v3';
+// import { render, h, nextTick } from 'vue';
+// import LivePlayer from '@liveqing/liveplayer-v3';
 import { useDrag } from '../event/useDrag';
-import { useGlobSetting } from '/@/hooks/setting';
+import Player from 'xgplayer';
+import HlsPlugin from 'xgplayer-hls';
+import FlvPlugin from 'xgplayer-flv';
+import 'xgplayer/dist/index.min.css';
 
 export function useCamera() {
   const cameraList = (params) => defHttp.get({ url: '/safety/ventanalyCamera/list', params });
@@ -10,30 +13,58 @@ export function useCamera() {
   const cameraAddr = (params) => defHttp.get({ url: '/ventanaly-device/camera/queryByCameraCode', params });
 
   let webRtcServer = <any[]>[];
-  let playerDoms = <(HTMLVideoElement | undefined | null)[]>[];
+  const playerList = <any[]>[];
+  const playerDoms = <(HTMLVideoElement | undefined | null)[]>[];
+  const videoParentDomList: (HTMLElement | [string, { name: string; addr: string }])[] = [];
 
   async function getCamera(deviceid, parentPlayerDom?) {
+    removeCamera();
     if (!parentPlayerDom) {
       parentPlayerDom = document.createElement('div');
       parentPlayerDom.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed; z-index: 999;`);
     }
     const res = await cameraList({ deviceid });
     const cameras: [] = res.records || [];
+    // const cameras: [] = [
+    //   {
+    //     name: '1111',
+    //     devicekind: 'toHKRtsp',
+    //   },
+    //   {
+    //     name: '2222',
+    //     devicekind: 'toHKRtsp',
+    //   },
+    //   // {
+    //   //   name: '3333',
+    //   //   devicekind: 'toHKRtsp',
+    //   // },
+    //   // {
+    //   //   name: '4444',
+    //   //   devicekind: 'toHKRtsp',
+    //   // },
+    // ];
     const cameraAddrs: any[] = [],
       cameraNames: string[] = [];
     if (cameras.length > 0) {
-      cameras.forEach(async (item) => {
+      for (let i = 0; i < cameras.length; i++) {
+        const item = cameras[i];
         if (item['devicekind'] === 'toHKRtsp') {
           // 从海康平台接口获取视频流
-          // cameraAddrs.push({ name: item['name'], addr: 'http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8' });
           const data = await cameraAddr({ cameraCode: item['addr'] });
           if (data && data['url']) {
             cameraAddrs.push({ name: item['name'], addr: data['url'] });
           }
+          // // 从海康平台接口获取视频流测试
+          // cameraAddrs.push({
+          //   name: item['name'],
+          //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
+          // });
+        } else if (item['devicekind'] == 'toHKR') {
+          cameraNames.push(item['name']);
         } else {
           cameraAddrs.push({ name: item['name'], addr: item['addr'] });
         }
-      });
+      }
     }
     if (cameraNames.length > 0) {
       // 请求接口从装备院拿数据
@@ -42,15 +73,11 @@ export function useCamera() {
         cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] });
       }
     }
-
-    const obj = await deviceCameraInit(cameraAddrs, parentPlayerDom, webRtcServer);
-    webRtcServer = obj.webRtcServerList;
-    playerDoms = obj.playerDoms;
+    await deviceCameraInit(cameraAddrs, parentPlayerDom);
   }
 
-  function deviceCameraInit(cameraAddrs, player: HTMLElement, webRtcServerList: any[] = []) {
-    const playerDoms: (HTMLVideoElement | undefined | null)[] = [];
-    const webRtcServer: any[] = [];
+  function deviceCameraInit(cameraAddrs, player: HTMLElement) {
+    const newWebRtcServer = [];
     let livePlayerDiv: HTMLElement | null = document.getElementById('LivePlayerBox');
     if (livePlayerDiv) {
       livePlayerDiv.remove();
@@ -62,7 +89,7 @@ export function useCamera() {
       livePlayerDiv = dom;
       player.appendChild(livePlayerDiv);
     }
-    const videoParentDomList: (HTMLElement | [string, { name: string; addr: string }])[] = [];
+
     return new Promise((resolve) => {
       const playCamrea = () => {
         if (cameraAddrs.length > 0) {
@@ -75,7 +102,7 @@ export function useCamera() {
                 cameraUrl.addr = cameraUrl.addr.replace('0.0.0.0', window.location.hostname);
               }
               if (cameraUrl.addr && cameraUrl.addr.startsWith('rtsp://')) {
-                const server = webRtcServerList.shift();
+                const server = webRtcServer?.shift();
                 let videoDom: HTMLVideoElement | null = null;
                 if (server) {
                   try {
@@ -84,7 +111,7 @@ export function useCamera() {
                     const cameraNameDom = videoDom.parentElement?.getElementsByClassName('video-name')[0];
                     if (cameraNameDom) cameraNameDom.innerText = cameraUrl.name;
                     playerDoms.unshift(videoDom);
-                    webRtcServer.unshift(server);
+                    newWebRtcServer.unshift(server);
                     // videoParentDomList.unshift()
                     await server.connect(cameraUrl['addr']);
                     videoDom.play();
@@ -103,7 +130,7 @@ export function useCamera() {
 
                   try {
                     const server = new window['WebRtcStreamer'](videoDom, location.protocol + VUE_APP_URL.webRtcUrl);
-                    webRtcServer.unshift(server);
+                    newWebRtcServer.unshift(server);
                     await server.connect(cameraUrl.addr);
                     videoDom.play();
                     playerDoms.unshift(videoDom);
@@ -132,23 +159,25 @@ export function useCamera() {
                   videoParentDomList.push(videoParentDom);
                 }
               } else {
-                try {
-                  fetch(cameraUrl.addr, {
-                    method: 'get',
-                    mode: 'no-cors',
-                  })
-                    .then(() => {
-                      videoParentDomList.push(['player', cameraUrl]);
-                      childResolve(null);
-                    })
-                    .catch(() => {
-                      videoParentDomList.push(['onPlayer' + index, cameraUrl]);
-                      childResolve(null);
-                    });
-                } catch (error) {
-                  // console.log('可以捕获到异常吗？？？？？');
-                  childResolve(null);
-                }
+                // try {
+                //   fetch(cameraUrl.addr, {
+                //     method: 'get',
+                //     mode: 'no-cors',
+                //   })
+                //     .then(() => {
+                //       videoParentDomList.push(['player', cameraUrl]);
+                //       childResolve(null);
+                //     })
+                //     .catch(() => {
+                //       videoParentDomList.push(['onPlayer' + index, cameraUrl]);
+                //       childResolve(null);
+                //     });
+                // } catch (error) {
+                //   // console.log('可以捕获到异常吗？？？？？');
+                //   childResolve(null);
+                // }
+                videoParentDomList.push(['player' + index, cameraUrl]);
+                childResolve(null);
               }
             });
             promiseList.push(promise);
@@ -162,47 +191,115 @@ export function useCamera() {
       };
       playCamrea();
     }).then(() => {
-      videoParentDomList.forEach((videoParentDom) => {
-        if (typeof videoParentDom[0] === 'string' && livePlayerDiv) {
+      videoParentDomList.forEach((videoParent) => {
+        if (typeof videoParent[0] === 'string' && livePlayerDiv) {
+          const videoParentDom: HTMLElement = document.createElement('div');
+          videoParentDom.setAttribute('class', 'liveVideo');
+          livePlayerDiv?.appendChild(videoParentDom);
+          useDrag(videoParentDom);
           const videoDom: HTMLElement = document.createElement('div');
-          videoDom.setAttribute('class', 'liveVideo');
-          livePlayerDiv?.appendChild(videoDom);
-          useDrag(videoDom);
-
-          if (videoParentDom[0].startsWith('onPlayer')) {
-            render(
-              h(LivePlayer, {
-                class: 'player',
-                id: videoParentDom[0],
-                muted: 'muted',
-                autoplay: true,
-                live: true,
-                videoUrl: videoParentDom[1].addr,
-                videoTitle: videoParentDom[1].name,
-                alt: '无信号',
+          videoDom.setAttribute('id', videoParent[0]);
+          videoParentDom.appendChild(videoDom);
+          if (videoParent[1] && videoParent[1].addr) {
+            const fileExtension = videoParent[1].addr.split('.').pop();
+            let player;
+            if (fileExtension === 'flv') {
+              player = new Player({
+                id: videoParent[0],
+                url: videoParent[1].addr,
+                width: 294,
+                height: 188,
                 poster: '/src/assets/images/vent/noSinge.png',
-              }),
-              videoDom
-            );
-          } else {
-            render(
-              h(LivePlayer, {
-                class: 'player',
-                id: videoParentDom[0],
-                muted: 'muted',
+                plugins: [FlvPlugin],
+                fluid: true,
                 autoplay: true,
-                live: true,
-                videoUrl: videoParentDom[1].addr,
-                videoTitle: videoParentDom[1].name,
-                alt: '无信号',
-                poster: '/src/assets/images/vent/noSinge.png',
-              }),
-              videoDom
-            );
+                isLive: true,
+                playsinline: false,
+                screenShot: true,
+                whitelist: [''],
+                ignores: ['time'],
+                closeVideoClick: true,
+                customConfig: {
+                  isClickPlayBack: false,
+                },
+                flv: {
+                  retryCount: 3, // 重试 3 次，默认值
+                  retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+                  loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+                  fetchOptions: {
+                    // 该参数会透传给 fetch，默认值为 undefined
+                    mode: 'cors',
+                  },
+                  targetLatency: 10, // 直播目标延迟，默认 10 秒
+                  maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
+                  disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+                  maxJumpDistance: 10,
+                },
+              });
+              playerList.push(player);
+            }
+            if (fileExtension === 'm3u8') {
+              let player;
+              if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
+                // 原生支持 hls 播放
+                player = new Player({
+                  id: videoParent[0],
+                  url: videoParent[1].addr,
+                  width: 294,
+                  height: 188,
+                  isLive: true,
+                  autoplay: true,
+                  autoplayMuted: true,
+                  cors: true,
+                  poster: '/src/assets/images/vent/noSinge.png',
+                  hls: {
+                    retryCount: 3, // 重试 3 次，默认值
+                    retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+                    loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+                    fetchOptions: {
+                      // 该参数会透传给 fetch，默认值为 undefined
+                      mode: 'cors',
+                    },
+                    targetLatency: 10, // 直播目标延迟，默认 10 秒
+                    maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
+                    disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+                    maxJumpDistance: 10,
+                  },
+                });
+              } else if (HlsPlugin.isSupported()) {
+                // 第一步
+                player = new Player({
+                  id: videoParent[0],
+                  url: videoParent[1].addr,
+                  width: 294,
+                  height: 188,
+                  isLive: true,
+                  autoplay: true,
+                  autoplayMuted: true,
+                  plugins: [HlsPlugin], // 第二步
+                  poster: '/src/assets/images/vent/noSinge.png',
+                  hls: {
+                    retryCount: 3, // 重试 3 次，默认值
+                    retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+                    loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+                    fetchOptions: {
+                      // 该参数会透传给 fetch，默认值为 undefined
+                      mode: 'cors',
+                    },
+                    targetLatency: 10, // 直播目标延迟，默认 10 秒
+                    maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
+                    disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+                    maxJumpDistance: 10,
+                  },
+                });
+              }
+              playerList.push(player);
+            }
+            playerList.push(player);
           }
         } else {
-          useDrag(videoParentDom as HTMLElement);
-          livePlayerDiv?.appendChild(videoParentDom as Node);
+          useDrag(videoParent as HTMLElement);
+          livePlayerDiv?.appendChild(videoParent as Node);
         }
       });
 
@@ -223,15 +320,30 @@ export function useCamera() {
           }
         }
       }
-      if (webRtcServerList.length > 0) {
-        for (let i = 0; i < webRtcServerList.length; i++) {
-          webRtcServerList[i].videoElement.parentElement.remove();
-          webRtcServerList[i].disconnect();
-          webRtcServerList[i] = undefined;
+      if (webRtcServer.length > 0) {
+        for (let i = 0; i < webRtcServer.length; i++) {
+          webRtcServer[i].videoElement.parentElement.remove();
+          webRtcServer[i].disconnect();
+          webRtcServer[i] = undefined;
         }
       }
-      return { webRtcServerList: webRtcServer, playerDoms };
+      webRtcServer.length = 0;
+      webRtcServer = newWebRtcServer;
+    });
+  }
+
+  function removeCamera() {
+    if (webRtcServer.length > 0) {
+      webRtcServer.forEach((item) => {
+        item.disconnect();
+      });
+      webRtcServer = [];
+    }
+    playerDoms.forEach((dom) => {
+      dom?.remove();
     });
+    videoParentDomList.length = 0;
+    playerDoms.length = 0;
   }
 
   return {
@@ -239,5 +351,6 @@ export function useCamera() {
     webRtcServer,
     playerDoms,
     deviceCameraInit,
+    removeCamera,
   };
 }

src/layouts/page/index.vue

@@ -20,10 +20,10 @@
             <component :is="Component" :key="route.fullPath" />
           </Suspense>
         </keep-alive>
-        <Suspense v-else >
+        <Suspense v-else>
           <component :is="Component" :key="route.fullPath" />
         </Suspense>
-        
+
         <!--      </transition>-->
       </template>
     </RouterView>
@@ -54,7 +54,7 @@
 
       const { getBasicTransition, getEnableTransition } = useTransitionSetting();
       const openCache = computed(() => {
-        return unref(getOpenKeepAlive) && unref(getShowMultipleTab)
+        return unref(getOpenKeepAlive) && unref(getShowMultipleTab);
       });
 
       const getCaches = computed((): string[] => {
@@ -76,7 +76,7 @@
   });
 </script>
 <style scoped lang="less">
-  .page{
+  .page {
     height: 100%;
   }
 </style>

src/utils/threejs/main.worker.ts

@@ -43,7 +43,7 @@ export function initModalWorker() {
     // 'cf/dsmove_2023-06-02.glb',
     // 'cf/fixedCf_2023-11-29.glb',
 
-    'jbfj/jbfj-hd_2023-12-12.glb',
+    'jbfj/jbfj-hd_2024-03-10.glb',
     'jbfj/jbfj-fm_2023-06-02.glb',
     'jbfj/jbfj-fc_2023-06-02.glb',
     'ztfj/dj1_2023-06-02.glb',

src/views/vent/deviceManager/comment/DeviceModal.vue

@@ -36,18 +36,18 @@
         />
       </a-tab-pane>
       <a-tab-pane key="3" tab="设备关联" v-if="deviceType == 'managesys'">
-        <WorkFacePointTable :columns="linkColumns" :deviceId="deviceData.id"  @save="savePointData" @delete="deletePointById" />
+        <WorkFacePointTable :columns="linkColumns" :deviceId="deviceData.id" @save="savePointData" @delete="deletePointById" />
       </a-tab-pane>
-      <a-tab-pane v-if="deviceType == 'managesys'" key = "4" tab="预警条目管理">
-        <ManagerWarningDeviceTable  v-if="activeKey == '4'" :deviceId="deviceData.id" />
+      <a-tab-pane v-if="deviceType == 'managesys'" key="4" tab="预警条目管理">
+        <ManagerWarningDeviceTable v-if="activeKey == '4'" :deviceId="deviceData.id" />
       </a-tab-pane>
       <a-tab-pane key="5" :tab="deviceType !== 'managesys' ? '报警配置' : '配置预警设备'">
         <template v-if="activeKey == '5'">
           <WarningTable v-if="deviceType !== 'managesys'" :deviceId="deviceData.id" :pointType="deviceData.strtype" />
-          <BackWindDeviceTable  v-else :deviceId="deviceData.id" />
+          <BackWindDeviceTable v-else :deviceId="deviceData.id" />
         </template>
       </a-tab-pane>
-      <a-tab-pane v-if="deviceType == 'managesys'" key = "6" tab="配置控制设备">
+      <a-tab-pane v-if="deviceType == 'managesys'" key="6" tab="配置控制设备">
         <template v-if="activeKey == '6'">
           <WarningTable v-if="deviceType !== 'managesys'" :deviceId="deviceData.id" :pointType="deviceData.strtype" />
           <ManagerWarningTable v-else :deviceId="deviceData.id" />
@@ -93,128 +93,128 @@
   const deviceData = inject('formData') as any;
   const deviceType = inject('deviceType') as any;
   const record = reactive({});
-  const activeKey = ref('1')
-  const linkColumns = ref<any[]>([])
-  
+  const activeKey = ref('1');
+  const linkColumns = ref<any[]>([]);
+
   //表单赋值
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     //重置表单
     setModalProps({ confirmLoading: false });
     Object.assign(deviceData, data.record);
     // 判断是否是关键阻力路线
-    
   });
 
   //设置标题
-  const title = computed(
-    () => {
-      if (!unref(isUpdate)) {
-        if (deviceData.strname || deviceData.systemname) {
-          return `新增（${deviceData.strname || deviceData.systemname}）`;
-        }
-        return `新增`;
-      } else {
-        if (deviceData['strtype'] == 'sys_majorpath') {
-          linkColumns.value = [...workFaceColumns, ...[
-          {
-            title: '是否在关键通风路线上',
-            width: 100,
-            dataIndex: 'pathflag',
-            edit: true,
-            editComponent: 'Switch',
-            editValueMap: (value) => {
-              return value ? '是' : '否';
+  const title = computed(() => {
+    if (!unref(isUpdate)) {
+      if (deviceData.strname || deviceData.systemname) {
+        return `新增（${deviceData.strname || deviceData.systemname}）`;
+      }
+      return `新增`;
+    } else {
+      if (deviceData['strtype'] == 'sys_majorpath') {
+        linkColumns.value = [
+          ...workFaceColumns,
+          ...[
+            {
+              title: '是否在关键通风路线上',
+              width: 100,
+              dataIndex: 'pathflag',
+              edit: true,
+              editComponent: 'Switch',
+              editValueMap: (value) => {
+                return value ? '是' : '否';
+              },
+            },
+            {
+              title: '传感器类型',
+              width: 100,
+              dataIndex: 'sensorType',
+              edit: true,
+              editComponent: 'Select',
+              editComponentProps: {
+                options: [
+                  {
+                    label: '多参',
+                    value: '1',
+                  },
+                  {
+                    label: '测风',
+                    value: '2',
+                  },
+                ],
+              },
+            },
+            {
+              title: '风向',
+              width: 100,
+              dataIndex: 'winddir',
+              edit: true,
+              editComponent: 'Select',
+              editComponentProps: {
+                options: [
+                  {
+                    label: '进风',
+                    value: '1',
+                  },
+                  {
+                    label: '用风',
+                    value: '2',
+                  },
+                  {
+                    label: '回风',
+                    value: '3',
+                  },
+                ],
+              },
             },
-          },
-          {
-            title: '传感器类型',
-            width: 100,
-            dataIndex: 'sensorType',
-            edit: true,
-            editComponent: 'Select',
-            editComponentProps: {
-              options: [
-                {
-                  label: '多参',
-                  value: '1',
-                },
-                {
-                  label: '测风',
-                  value: '2',
-                },
-              ],
+            {
+              title: '是否总风量',
+              width: 100,
+              dataIndex: 'windflag',
+              edit: true,
+              editComponent: 'Switch',
+              editValueMap: (value) => {
+                return value ? '是' : '否';
+              },
             },
-          },
-          {
-            title: '风向',
-            width: 100,
-            dataIndex: 'winddir',
-            edit: true,
-            editComponent: 'Select',
-            editComponentProps: {
-              options: [
-                {
-                  label: '进风',
-                  value: '1',
-                },
-                {
-                  label: '用风',
-                  value: '2',
-                },
-                {
-                  label: '回风',
-                  value: '3',
-                },
-              ],
+            {
+              title: '路线名称',
+              width: 100,
+              dataIndex: 'des',
+              edit: true,
+              editComponent: 'Input',
             },
-          },
-          {
-            title: '是否总风量',
-            width: 100,
-            dataIndex: 'windflag',
-            edit: true,
-            editComponent: 'Switch',
-            editValueMap: (value) => {
-              return value ? '是' : '否';
+            {
+              title: ' 阻力值',
+              width: 100,
+              dataIndex: 'testDrag',
+              edit: true,
+              editComponent: 'InputNumber',
             },
-          },
-          {
-            title: '路线名称',
-            width: 100,
-            dataIndex: 'des',
-            edit: true,
-            editComponent: 'Input',
-          },
-          {
-            title: ' 阻力值',
-            width: 100,
-            dataIndex: 'testDrag',
-            edit: true,
-            editComponent: 'InputNumber',
-          },
-          ]]
-        } else {
-          linkColumns.value = [...workFaceColumns]
-        }
-        if (deviceData.strname || deviceData.systemname) {
-          return `编辑（${deviceData.strname || deviceData.systemname}）`;
-        }
-        return `编辑`;
+          ],
+        ];
+      } else {
+        linkColumns.value = [...workFaceColumns];
+      }
+      if (deviceData.strname || deviceData.systemname) {
+        return `编辑（${deviceData.strname || deviceData.systemname}）`;
       }
+      return `编辑`;
     }
-  );  
+  });
 
   const closeModalFn = () => {
-    closeModal()
-    emit('closeModal')
-  }
+    closeModal();
+    emit('closeModal');
+  };
 
   const savePointData = (data) => {
     const record = cloneDeep(data.editValueRefs);
     pointSaveOrUpdate(Object.assign(record, { id: data.id, deviceId: deviceData.id }), data.id);
   };
-  const saveCameraData = (data: any, reload:Function) => {
-    cameraSaveOrUpdate(Object.assign({...data}, { id: data.id, deviceid: deviceData.id }), data.id)
+  const saveCameraData = (data: any, reload: Function) => {
+    cameraSaveOrUpdate(Object.assign({ ...data }, { id: data.id, deviceid: deviceData.id }), data.id);
   };
   const deletePointById = (id, reload) => {
     pointDeleteById({ id: id }, reload);

src/views/vent/home/clique/index.vue

@@ -49,266 +49,267 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, nextTick, onMounted, onUnmounted } from 'vue';
-import mineWind from './components/mine-wind.vue';
-import riskWarn from './components/risk-warn.vue';
-import fileShare from './components/file-share.vue';
-import windRoad from './components/wind-road.vue';
-import sceneKey from './components/scene-key.vue';
-import iconLight from './components/icon-light.vue';
-import dialogModal from './components/dialog-modal.vue';
-import { getHomeData, getList } from './clique.api'
-const dialogModalRef = ref();
-// let mainTitle = ref('国家能源神东煤炭集团');
-let mainTitle = ref('XXXX集团');
-const isShowDialog = ref(false);
+  import { ref, reactive, nextTick, onMounted, onUnmounted } from 'vue';
+  import mineWind from './components/mine-wind.vue';
+  import riskWarn from './components/risk-warn.vue';
+  import fileShare from './components/file-share.vue';
+  import windRoad from './components/wind-road.vue';
+  import sceneKey from './components/scene-key.vue';
+  import iconLight from './components/icon-light.vue';
+  import dialogModal from './components/dialog-modal.vue';
+  import { getHomeData, getList } from './clique.api';
+  const dialogModalRef = ref();
+  // let mainTitle = ref('国家能源神东煤炭集团');
+  let mainTitle = ref('XXXX集团');
+  const isShowDialog = ref(false);
 
-//矿井通风状态数据
-let airKjStatus = reactive<any[]>([])
+  //矿井通风状态数据
+  let airKjStatus = reactive<any[]>([]);
 
-//风险分析与预警数据
-let earlyWarn = ref<any[]>([])
+  //风险分析与预警数据
+  let earlyWarn = ref<any[]>([]);
 
-//通防综合监测数据
-let compositeData = ref<any[]>([])
+  //通防综合监测数据
+  let compositeData = ref<any[]>([]);
 
-//地图区域详情数据
-let centerDetail = ref({})
+  //地图区域详情数据
+  let centerDetail = ref({});
 
-//文件共享中心数据
-let shareData = reactive<any[]>([])
+  //文件共享中心数据
+  let shareData = reactive<any[]>([]);
 
-//通风巷道长度统计数据
-let roadData = reactive({
-  totallength: 0,
-  data: [],
-  data1: []
-})
+  //通风巷道长度统计数据
+  let roadData = reactive({
+    totallength: 0,
+    data: [],
+    data1: [],
+  });
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor() {
-  timer = setTimeout(
-    async () => {
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor() {
+    timer = setTimeout(async () => {
       await getHomeDataList();
-      await getLists()
+      await getLists();
       if (timer) {
         timer = null;
       }
       getMonitor();
-    },
-    5000
-  );
-}
+    }, 5000);
+  }
 
-//获取公司端首页数据
-async function getHomeDataList() {
-  let res = await getHomeData()
-  console.log(res, '公司端首页数据----------')
-  if (res.length != 0) {
-    earlyWarn.value = res
-    roadData.totallength = res[0].sys_data.totallength
-    roadData.data.length = 0
-    roadData.data1.length = 0
-    airKjStatus.length = 0
-    res.forEach(el => {
-      airKjStatus.push({ deviceName: el.sys_data.deviceName, jf: el.sys_data.zongjinfeng, xf: el.sys_data.xufengliang, hf: el.sys_data.zonghuifeng })
-      roadData.data.push(el.sys_data.totallength)
-      roadData.data1.push(el.sys_data.deviceName)
-    })
-    compositeData.value = res[0].majorpath_data
-    centerDetail.value = res[0]
+  //获取公司端首页数据
+  async function getHomeDataList() {
+    let res = await getHomeData();
+    console.log(res, '公司端首页数据----------');
+    if (res.length != 0) {
+      earlyWarn.value = res;
+      roadData.totallength = res[0].sys_data.totallength;
+      roadData.data.length = 0;
+      roadData.data1.length = 0;
+      airKjStatus.length = 0;
+      res.forEach((el) => {
+        airKjStatus.push({
+          deviceName: el.sys_data.deviceName,
+          jf: el.sys_data.zongjinfeng,
+          xf: el.sys_data.xufengliang,
+          hf: el.sys_data.zonghuifeng,
+        });
+        roadData.data.push(el.sys_data.totallength);
+        roadData.data1.push(el.sys_data.deviceName);
+      });
+      compositeData.value = res[0].majorpath_data;
+      centerDetail.value = res[0];
+    }
   }
-}
-//获取文件共享中心数据
-async function getLists() {
-  let res = await getList()
-  if (res.length != 0) {
-    shareData.length = 0
-    res.forEach(el => {
-      shareData.push({ title: el.sysOrgName, value: el.tolalNum, value1: el.approveNum })
-    })
+  //获取文件共享中心数据
+  async function getLists() {
+    let res = await getList();
+    if (res.length != 0) {
+      shareData.length = 0;
+      res.forEach((el) => {
+        shareData.push({ title: el.sysOrgName, value: el.tolalNum, value1: el.approveNum });
+      });
+    }
   }
-}
 
-
-function showDetail(code, leftV, topV) {
-  if (code) {
-    isShowDialog.value = true;
+  function showDetail(code, leftV, topV) {
+    if (code) {
+      isShowDialog.value = true;
+    }
+    nextTick(() => {
+      const tooltipDom = document.getElementById('detailModal') as HTMLElement;
+      tooltipDom.style.left = leftV;
+      tooltipDom.style.top = topV;
+    });
   }
-  nextTick(() => {
-    const tooltipDom = document.getElementById('detailModal') as HTMLElement;
-    tooltipDom.style.left = leftV;
-    tooltipDom.style.top = topV;
-  });
-}
-function closeDialog() {
-  isShowDialog.value = false;
-}
-
-onMounted(() => {
-  getHomeDataList()
-  getLists()
-  getMonitor()
-})
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = null;
+  function closeDialog() {
+    isShowDialog.value = false;
   }
-});
-</script>
-<style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-// @font-face {
-//   font-family: 'yjsz';
-//   src: url('../../../../assets/font/yjsz.TTF');
-// }
-.company-home {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
-  background-size: 100% 100%;
 
-  .top-bg {
-    width: 100%;
-    height: 97px;
-    background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
-    position: absolute;
-    z-index: 1;
-
-    .main-title {
-      height: 96px;
-      color: #fff;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  onMounted(() => {
+    getHomeDataList();
+    getLists();
+    getMonitor();
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
     }
+  });
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
   }
 
-  .company-content {
-    position: absolute;
-    left: 0;
-    top: 0;
+  // @font-face {
+  //   font-family: 'yjsz';
+  //   src: url('../../../../assets/font/yjsz.TTF');
+  // }
+  .company-home {
     width: 100%;
     height: 100%;
-    background: url('../../../../assets/images/company/content-bg.png') no-repeat;
+    position: relative;
+    background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
     background-size: 100% 100%;
 
-    .area-content {
-      position: absolute;
-      top: 45px;
+    .top-bg {
       width: 100%;
-      height: calc(100% - 45px);
-      padding: 0px 20px 20px 20px;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
+      height: 97px;
+      background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
+      position: absolute;
+      z-index: 1;
 
-      .left-area {
-        width: 23%;
-        height: 100%;
-        margin-right: 15px;
+      .main-title {
+        height: 96px;
+        color: #fff;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
         display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
+      }
+    }
 
-        .area-card {
-          width: 100%;
-          height: calc(60% - 15px);
-          margin-bottom: 15px;
-          background: url('../../../../assets/images/company/area-card.png') no-repeat;
-          background-size: 100% 100%;
-        }
+    .company-content {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: url('../../../../assets/images/company/content-bg.png') no-repeat;
+      background-size: 100% 100%;
 
-        .area-card1 {
-          width: 100%;
-          height: 40%;
-          background: url('../../../../assets/images/company/area-card1.png') no-repeat;
-          background-size: 100% 100%;
-        }
-      }
+      .area-content {
+        position: absolute;
+        top: 45px;
+        width: 100%;
+        height: calc(100% - 45px);
+        padding: 0px 20px 20px 20px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
 
-      .center-area {
-        width: calc(54% - 30px);
-        height: 100%;
-        position: relative;
+        .left-area {
+          width: 23%;
+          height: 100%;
+          margin-right: 15px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
 
-        .center-bg {
-          position: absolute;
-          bottom: 269px;
-          left: 50%;
-          transform: translate(-50%, 0);
-          height: calc(100% - 325px);
-          width: 100%;
-          background: url('../../../../assets/images/company/home-dz.png') no-repeat center;
-          background-position: 50% 90%;
+          .area-card {
+            width: 100%;
+            height: calc(60% - 15px);
+            margin-bottom: 15px;
+            background: url('../../../../assets/images/company/area-card.png') no-repeat;
+            background-size: 100% 100%;
+          }
 
-          .bg-map {
+          .area-card1 {
             width: 100%;
-            height: 100%;
-            background: url('../../../../assets/images/company/home-map.png') no-repeat center;
+            height: 40%;
+            background: url('../../../../assets/images/company/area-card1.png') no-repeat;
             background-size: 100% 100%;
           }
         }
 
-        .area-card2 {
-          position: absolute;
-          right: 0;
-          top: 62px;
-          width: 568px;
-          height: 437px;
-          background: url('../../../../assets/images/company/area-card2.png') no-repeat;
-          background-size: 100% 100%;
-          // pointer-events: auto;
-        }
+        .center-area {
+          width: calc(54% - 30px);
+          height: 100%;
+          position: relative;
 
-        .area-card3 {
-          position: absolute;
-          right: 0;
-          bottom: 0px;
-          width: 100%;
-          height: 269px;
-          background: url('../../../../assets/images/company/area-card3.png') no-repeat;
-          background-size: 100% 100%;
-        }
-      }
+          .center-bg {
+            position: absolute;
+            bottom: 269px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            height: calc(100% - 325px);
+            width: 100%;
+            background: url('../../../../assets/images/company/home-dz.png') no-repeat center;
+            background-position: 50% 90%;
 
-      .right-area {
-        width: 23%;
-        height: 100%;
-        margin-left: 15px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
+            .bg-map {
+              width: 100%;
+              height: 100%;
+              background: url('../../../../assets/images/company/home-map.png') no-repeat center;
+              background-size: 100% 100%;
+            }
+          }
+
+          .area-card2 {
+            position: absolute;
+            right: 0;
+            top: 62px;
+            width: 568px;
+            height: 437px;
+            background: url('../../../../assets/images/company/area-card2.png') no-repeat;
+            background-size: 100% 100%;
+            // pointer-events: auto;
+          }
 
-        // pointer-events: auto;
-        .area-card {
-          width: 100%;
-          height: calc(60% - 15px);
-          margin-bottom: 15px;
-          background: url('../../../../assets/images/company/area-card.png') no-repeat;
-          background-size: 100% 100%;
+          .area-card3 {
+            position: absolute;
+            right: 0;
+            bottom: 0px;
+            width: 100%;
+            height: 269px;
+            background: url('../../../../assets/images/company/area-card3.png') no-repeat;
+            background-size: 100% 100%;
+          }
         }
 
-        .area-card1 {
-          width: 100%;
-          height: 40%;
-          background: url('../../../../assets/images/company/area-card1.png') no-repeat;
-          background-size: 100% 100%;
+        .right-area {
+          width: 23%;
+          height: 100%;
+          margin-left: 15px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+
+          // pointer-events: auto;
+          .area-card {
+            width: 100%;
+            height: calc(60% - 15px);
+            margin-bottom: 15px;
+            background: url('../../../../assets/images/company/area-card.png') no-repeat;
+            background-size: 100% 100%;
+          }
+
+          .area-card1 {
+            width: 100%;
+            height: 40%;
+            background: url('../../../../assets/images/company/area-card1.png') no-repeat;
+            background-size: 100% 100%;
+          }
         }
       }
     }
   }
-}
 </style>

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

@@ -147,7 +147,7 @@
           formatter: function (params, ticket, callback) {
             // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
             // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
-            var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/s)<br/>';
+            var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
             res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
             res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
             return res;

src/views/vent/monitorManager/alarmMonitor/fire/gasPage.vue

@@ -10,20 +10,31 @@
         <div class="box-values">
           <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
             <span>{{ `${items.name} : ` }}</span>
-            <span :class="{
-              'box-value': items.val == 0 && items.name == '报警状态',
-              'box-value1': items.val == 101 && items.name == '报警状态',
-              'box-value2': items.val == 102 && items.name == '报警状态',
-              'box-value3': items.val == 103 && items.name == '报警状态',
-              'box-value4': items.val == 104 && items.name == '报警状态',
-              'box-value5': items.val == 201 && items.name == '报警状态',
-            }">{{ items.val == 0 && items.name == '报警状态' ? '正常' : items.val == 101 && items.name == '报警状态'
-  ? '较低风险'
-  : items.val == 102 && items.name == '报警状态' ? '低风险' : items.val == 103 && items.name == '报警状态' ?
-    '中风险' :
-    items.val == 104 && items.name == '报警状态' ? '高风险' : items.val == 201 && items.name == '报警状态' ?
-      '报警' :
-      items.val }}</span>
+            <span
+              :class="{
+                'box-value': items.val == 0 && items.name == '报警状态',
+                'box-value1': items.val == 101 && items.name == '报警状态',
+                'box-value2': items.val == 102 && items.name == '报警状态',
+                'box-value3': items.val == 103 && items.name == '报警状态',
+                'box-value4': items.val == 104 && items.name == '报警状态',
+                'box-value5': items.val == 201 && items.name == '报警状态',
+              }"
+              >{{
+                items.val == 0 && items.name == '报警状态'
+                  ? '正常'
+                  : items.val == 101 && items.name == '报警状态'
+                  ? '较低风险'
+                  : items.val == 102 && items.name == '报警状态'
+                  ? '低风险'
+                  : items.val == 103 && items.name == '报警状态'
+                  ? '中风险'
+                  : items.val == 104 && items.name == '报警状态'
+                  ? '高风险'
+                  : items.val == 201 && items.name == '报警状态'
+                  ? '报警'
+                  : items.val
+              }}</span
+            >
           </div>
         </div>
       </div>
@@ -55,7 +66,6 @@
             }}</div
           >
         </div> -->
-
     </div>
 
     <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
@@ -71,10 +81,13 @@
           <div class="item-r">
             <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
               <span>{{ `${items.label} : ` }}</span>
-              <span :class="{
-                'status-f': items.value == 1,
-                'status-l': items.value == 0,
-              }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span>
+              <span
+                :class="{
+                  'status-f': items.value == 1,
+                  'status-l': items.value == 0,
+                }"
+                >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
+              >
             </div>
           </div>
         </div>
@@ -84,475 +97,479 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
-
-let props = defineProps({
-  listData: Object,
-});
-
-//瓦斯顶部区域数据
-let topAreaListWs = reactive<any[]>([]);
-
-//瓦斯监控列表数据
-let cardListWs = reactive<any[]>([]);
-
-let warnText = ref(0);
-
-watch(
-  () => props.listData,
-  (val) => {
-    console.log(val, '瓦斯详情数据-------');
-    topAreaListWs.length = 0;
-    cardListWs.length = 0;
-    if (JSON.stringify(val.common) != '{}') {
-      warnText.value = val.common.pump.length != 0 && val.common.pump[0].warnLevel != null ? val.common.pump[0].warnLevel : 0;
-      console.log(warnText.value, ' warnText.value-------')
-      val.common.pump.forEach((v) => {
-        topAreaListWs.push({
-          label: v.strinstallpos || '--',
-          list: [
-            // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
-            { name: '报警状态', val: v.warnLevel || 0 },
-            { name: '输入管道内一氧化碳(ppm)', val: v.readData.coVal && v.readData.coVal != '0' ? v.readData.coVal : '-' },
-            { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 != '0' ? v.readData.gas1 : '-' }, //v.readData.gas1 
-            { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 && v.readData.gas2 != '0' ? v.readData.gas2 : '-' }, //v.readData.gas2
-            { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3 != '0' ? v.readData.gas3 : '-' }, //v.readData.gas3
-            { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4 != '0' ? v.readData.gas4 : '-' }, //v.readData.gas4
-            { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic != '0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
-            { name: '输入管道内标况流量(m³/min)', val: v.readData.standardTraffic && v.readData.standardTraffic != '0' ? v.readData.standardTraffic : '-' }, //v.readData.standardTraffic
-            { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage != '0' ? v.readData.totalGasDrainage : '-' },
-          ],
+  import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
+
+  let props = defineProps({
+    listData: Object,
+  });
+
+  //瓦斯顶部区域数据
+  let topAreaListWs = reactive<any[]>([]);
+
+  //瓦斯监控列表数据
+  let cardListWs = reactive<any[]>([]);
+
+  let warnText = ref(0);
+
+  watch(
+    () => props.listData,
+    (val) => {
+      console.log(val, '瓦斯详情数据-------');
+      topAreaListWs.length = 0;
+      cardListWs.length = 0;
+      if (JSON.stringify(val.common) != '{}') {
+        warnText.value = val.common.pump.length != 0 && val.common.pump[0].warnLevel != null ? val.common.pump[0].warnLevel : 0;
+        console.log(warnText.value, ' warnText.value-------');
+        val.common.pump.forEach((v) => {
+          topAreaListWs.push({
+            label: v.strinstallpos || '--',
+            list: [
+              // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
+              { name: '报警状态', val: v.warnLevel || 0 },
+              { name: '输入管道内一氧化碳(ppm)', val: v.readData.coVal && v.readData.coVal != '0' ? v.readData.coVal : '-' },
+              { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 != '0' ? v.readData.gas1 : '-' }, //v.readData.gas1
+              { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 && v.readData.gas2 != '0' ? v.readData.gas2 : '-' }, //v.readData.gas2
+              { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3 != '0' ? v.readData.gas3 : '-' }, //v.readData.gas3
+              { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4 != '0' ? v.readData.gas4 : '-' }, //v.readData.gas4
+              { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic != '0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
+              {
+                name: '输入管道内标况流量(m³/min)',
+                val: v.readData.standardTraffic && v.readData.standardTraffic != '0' ? v.readData.standardTraffic : '-',
+              }, //v.readData.standardTraffic
+              { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage != '0' ? v.readData.totalGasDrainage : '-' },
+            ],
+          });
         });
-      });
-
-      val.common.gas.forEach((el) => {
-        el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
-        cardListWs.push({
-          label: '甲烷',
-          // value: el.readData.gasC || '--',
-          value: 0,
-          listR: [
-            { id: 0, label: '测点类型', value: '瓦斯' },
-            { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
-            { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
-            { id: 3, label: '测点状态', value: el.warnFlag },
-          ],
+
+        val.common.gas.forEach((el) => {
+          el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
+          cardListWs.push({
+            label: '甲烷',
+            // value: el.readData.gasC || '--',
+            value: 0,
+            listR: [
+              { id: 0, label: '测点类型', value: '瓦斯' },
+              { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
+              { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
+              { id: 3, label: '测点状态', value: el.warnFlag },
+            ],
+          });
         });
-      });
-    }
-  },
-  { immediate: true, deep: true }
-);
+      }
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.gasPage {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-
-  .top-area {
-    height: 356px;
-    margin-bottom: 10px;
-    padding: 10px 15px;
-    // display: flex;
-    // justify-content: space-between;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  .gasPage {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
     box-sizing: border-box;
 
-    .title-t {
-      height: 30px;
+    .top-area {
+      height: 356px;
       margin-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .text-t {
-        font-family: 'douyuFont';
-        font-size: 16px;
-      }
-    }
-
-    .top-box {
-      position: relative;
-      width: 724px;
-      height: 276px;
-      background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
+      padding: 10px 15px;
+      // display: flex;
+      // justify-content: space-between;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
       background-size: 100% 100%;
+      box-sizing: border-box;
 
-      .box-label {
-        position: absolute;
-        left: 50%;
-        top: 198px;
-        transform: translate(-50%, 0);
-        width: 80%;
-        font-family: 'douyuFont';
-        font-size: 24px;
+      .title-t {
+        height: 30px;
+        margin-bottom: 10px;
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
-        word-wrap: break-word;
+
+        .text-t {
+          font-family: 'douyuFont';
+          font-size: 16px;
+        }
       }
 
-      .box-values {
-        position: absolute;
-        left: 50%;
-        top: 26px;
-        transform: translate(-50%, 0);
-        width: 84%;
-        // height: 26px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
+      .top-box {
+        position: relative;
+        width: 724px;
+        height: 276px;
+        background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .value-b {
-          width: calc(50% - 10px);
-          height: 25px;
+        .box-label {
+          position: absolute;
+          left: 50%;
+          top: 198px;
+          transform: translate(-50%, 0);
+          width: 80%;
+          font-family: 'douyuFont';
+          font-size: 24px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          word-wrap: break-word;
+        }
+
+        .box-values {
+          position: absolute;
+          left: 50%;
+          top: 26px;
+          transform: translate(-50%, 0);
+          width: 84%;
+          // height: 26px;
           display: flex;
           justify-content: space-between;
           align-items: center;
+          flex-wrap: wrap;
+
+          .value-b {
+            width: calc(50% - 10px);
+            height: 25px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
 
-          span {
-            font-size: 14px;
+            span {
+              font-size: 14px;
 
-            &:last-child {
-              font-family: 'douyuFont';
-              color: rgb(0, 242, 255);
+              &:last-child {
+                font-family: 'douyuFont';
+                color: rgb(0, 242, 255);
+              }
             }
-          }
 
-          .box-value {
-            color: rgb(145, 230, 9) !important;
-          }
+            .box-value {
+              color: rgb(145, 230, 9) !important;
+            }
 
-          .box-value1 {
-            color: rgb(0, 242, 255) !important;
-          }
+            .box-value1 {
+              color: rgb(0, 242, 255) !important;
+            }
 
-          .box-value2 {
-            color: #ffff35 !important;
-          }
+            .box-value2 {
+              color: #ffff35 !important;
+            }
 
-          .box-value3 {
-            color: #ffbe69 !important;
-          }
+            .box-value3 {
+              color: #ffbe69 !important;
+            }
 
-          .box-value4 {
-            color: #ff6f00 !important;
-          }
+            .box-value4 {
+              color: #ff6f00 !important;
+            }
 
-          .box-value5 {
-            color: #ff0000 !important;
+            .box-value5 {
+              color: #ff0000 !important;
+            }
           }
         }
       }
     }
-  }
 
-  .bot-area {
-    height: calc(100% - 356px);
-    padding: 10px 15px 0px 15px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
+    .bot-area {
+      height: calc(100% - 356px);
+      padding: 10px 15px 0px 15px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
 
-    .title-b {
-      height: 30px;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      .title-b {
+        height: 30px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-      .text-b {
-        font-family: 'douyuFont';
-        font-size: 16px;
+        .text-b {
+          font-family: 'douyuFont';
+          font-size: 16px;
+        }
       }
-    }
-
-    .content-b {
-      height: calc(100% - 40px);
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      overflow-y: auto;
-
-      .card-b {
-        position: relative;
-        width: 23%;
-        height: 128px;
-        margin: 0px 15px 15px 15px;
-        background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
-        background-size: 100% 100%;
 
-        .item-l {
-          position: absolute;
-          left: 32px;
-          top: 50%;
-          transform: translate(0, -50%);
-          width: 89px;
-          height: 98px;
-          background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-          .label-l {
-            position: absolute;
-            left: 50%;
-            top: 7px;
-            transform: translate(-50%, 0);
-          }
+      .content-b {
+        height: calc(100% - 40px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        overflow-y: auto;
 
-          .value-l {
-            position: absolute;
-            left: 50%;
-            top: 50px;
-            transform: translate(-50%, 0);
-            font-family: 'douyuFont';
-            font-size: 16px;
-            color: #3df6ff;
-          }
-        }
+        .card-b {
+          position: relative;
+          width: 23%;
+          height: 128px;
+          margin: 0px 15px 15px 15px;
+          background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
+          background-size: 100% 100%;
 
-        @media screen and (max-width: 1920px) {
-          .item-r {
+          .item-l {
             position: absolute;
-            left: 132px;
+            left: 32px;
             top: 50%;
             transform: translate(0, -50%);
-            height: 128px;
-            padding: 5px 0px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            box-sizing: border-box;
+            width: 89px;
+            height: 98px;
+            background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+            .label-l {
+              position: absolute;
+              left: 50%;
+              top: 7px;
+              transform: translate(-50%, 0);
+            }
+
+            .value-l {
+              position: absolute;
+              left: 50%;
+              top: 50px;
+              transform: translate(-50%, 0);
+              font-family: 'douyuFont';
+              font-size: 16px;
+              color: #3df6ff;
+            }
+          }
 
-            .content-r {
+          @media screen and (max-width: 1920px) {
+            .item-r {
+              position: absolute;
+              left: 132px;
+              top: 50%;
+              transform: translate(0, -50%);
+              height: 128px;
+              padding: 5px 0px;
               display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
 
-              span {
-                font-size: 14px;
+              .content-r {
+                display: flex;
 
-                &:first-child {
-                  display: inline-block;
-                  width: 68px;
-                }
+                span {
+                  font-size: 14px;
 
-                &:last-child {
-                  display: inline-block;
-                  width: calc(100% - 68px);
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
+
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
-              }
 
-              .status-f {
-                color: #ff0000;
-              }
+                .status-f {
+                  color: #ff0000;
+                }
 
-              .status-l {
-                color: #3df6ff;
+                .status-l {
+                  color: #3df6ff;
+                }
               }
             }
           }
-        }
 
-        @media screen and (min-width: 1921px) and (max-width: 2560px) {
-          .item-r {
-            position: absolute;
-            left: 138px;
-            top: 50%;
-            transform: translate(0, -50%);
-            width: calc(100% - 138px);
-            height: 128px;
-            padding: 5px 0px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            box-sizing: border-box;
-
-            .content-r {
+          @media screen and (min-width: 1921px) and (max-width: 2560px) {
+            .item-r {
+              position: absolute;
+              left: 138px;
+              top: 50%;
+              transform: translate(0, -50%);
+              width: calc(100% - 138px);
+              height: 128px;
+              padding: 5px 0px;
               display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
 
-              span {
-                font-size: 14px;
+              .content-r {
+                display: flex;
 
-                &:first-child {
-                  display: inline-block;
-                  width: 68px;
-                }
+                span {
+                  font-size: 14px;
 
-                &:last-child {
-                  display: inline-block;
-                  width: calc(100% - 68px);
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
+
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
-              }
 
-              .status-f {
-                color: #ff0000;
-              }
+                .status-f {
+                  color: #ff0000;
+                }
 
-              .status-l {
-                color: #3df6ff;
+                .status-l {
+                  color: #3df6ff;
+                }
               }
             }
           }
         }
       }
     }
-  }
-
-  .bot-area1 {
-    height: 100%;
-    padding: 10px 15px 0px 15px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-
-    .title-b {
-      height: 30px;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
 
-      .text-b {
-        font-family: 'douyuFont';
-        font-size: 16px;
-      }
+    .bot-area1 {
+      height: 100%;
+      padding: 10px 15px 0px 15px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
 
-      // .select-b {
-      //     display: flex;
-      //     justify-content: flex-start;
-      //     align-items: center;
-      // }
-    }
+      .title-b {
+        height: 30px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-    .content-b {
-      height: calc(100% - 40px);
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      overflow-y: auto;
+        .text-b {
+          font-family: 'douyuFont';
+          font-size: 16px;
+        }
 
-      .card-b {
-        position: relative;
-        width: 23%;
-        height: 128px;
-        margin: 0px 15px 15px 15px;
-        background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
-        background-size: 100% 100%;
+        // .select-b {
+        //     display: flex;
+        //     justify-content: flex-start;
+        //     align-items: center;
+        // }
+      }
 
-        .item-l {
-          position: absolute;
-          left: 32px;
-          top: 50%;
-          transform: translate(0, -50%);
-          width: 89px;
-          height: 98px;
-          background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-          .label-l {
-            position: absolute;
-            left: 50%;
-            top: 7px;
-            transform: translate(-50%, 0);
-          }
+      .content-b {
+        height: calc(100% - 40px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        overflow-y: auto;
 
-          .value-l {
-            position: absolute;
-            left: 50%;
-            top: 50px;
-            transform: translate(-50%, 0);
-            font-family: 'douyuFont';
-            font-size: 16px;
-            color: #3df6ff;
-          }
-        }
+        .card-b {
+          position: relative;
+          width: 23%;
+          height: 128px;
+          margin: 0px 15px 15px 15px;
+          background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
+          background-size: 100% 100%;
 
-        @media screen and (max-width: 1920px) {
-          .item-r {
+          .item-l {
             position: absolute;
-            left: 132px;
+            left: 32px;
             top: 50%;
             transform: translate(0, -50%);
-            height: 128px;
-            padding: 5px 0px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            box-sizing: border-box;
+            width: 89px;
+            height: 98px;
+            background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+            .label-l {
+              position: absolute;
+              left: 50%;
+              top: 7px;
+              transform: translate(-50%, 0);
+            }
+
+            .value-l {
+              position: absolute;
+              left: 50%;
+              top: 50px;
+              transform: translate(-50%, 0);
+              font-family: 'douyuFont';
+              font-size: 16px;
+              color: #3df6ff;
+            }
+          }
 
-            .content-r {
+          @media screen and (max-width: 1920px) {
+            .item-r {
+              position: absolute;
+              left: 132px;
+              top: 50%;
+              transform: translate(0, -50%);
+              height: 128px;
+              padding: 5px 0px;
               display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
 
-              span {
-                font-size: 14px;
+              .content-r {
+                display: flex;
 
-                &:first-child {
-                  display: inline-block;
-                  width: 68px;
-                }
+                span {
+                  font-size: 14px;
 
-                &:last-child {
-                  display: inline-block;
-                  width: calc(100% - 68px);
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
+
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
-              }
 
-              .status-f {
-                color: #ff0000;
-              }
+                .status-f {
+                  color: #ff0000;
+                }
 
-              .status-l {
-                color: #3df6ff;
+                .status-l {
+                  color: #3df6ff;
+                }
               }
             }
           }
-        }
 
-        @media screen and (min-width: 1921px) and (max-width: 2560px) {
-          .item-r {
-            position: absolute;
-            left: 138px;
-            top: 50%;
-            transform: translate(0, -50%);
-            width: calc(100% - 138px);
-            height: 128px;
-            padding: 5px 0px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            box-sizing: border-box;
-
-            .content-r {
+          @media screen and (min-width: 1921px) and (max-width: 2560px) {
+            .item-r {
+              position: absolute;
+              left: 138px;
+              top: 50%;
+              transform: translate(0, -50%);
+              width: calc(100% - 138px);
+              height: 128px;
+              padding: 5px 0px;
               display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
 
-              span {
-                font-size: 14px;
+              .content-r {
+                display: flex;
 
-                &:first-child {
-                  display: inline-block;
-                  width: 68px;
-                }
+                span {
+                  font-size: 14px;
+
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
 
-                &:last-child {
-                  display: inline-block;
-                  width: calc(100% - 68px);
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
-              }
 
-              .status-f {
-                color: #ff0000;
-              }
+                .status-f {
+                  color: #ff0000;
+                }
 
-              .status-l {
-                color: #3df6ff;
+                .status-l {
+                  color: #3df6ff;
+                }
               }
             }
           }
@@ -560,5 +577,4 @@ watch(
       }
     }
   }
-}
 </style>

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

@@ -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 : '-' }} </div>
+              <div class="value1"> {{ !item.value && item.value != '0' ? '-' : item.value }} </div>
               <div class="title">{{ item.title }}</div>
             </div>
           </div>
@@ -282,7 +282,7 @@
               <div class="detail-box">
                 <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
                   <div class="">{{ item.label }}</div>
-                  <div class="value">{{ item.value != 0 ? item.value : '-' }}</div>
+                  <div class="value">{{ !item.value && item.value != '0' ? '-' : item.value }}</div>
                 </div>
               </div>
             </div>
@@ -294,7 +294,7 @@
               <div class="detail-box">
                 <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
                   <div class="">{{ item.label }}</div>
-                  <div class="value">{{ item.value1 != 0 ? item.value1 : '-' }}</div>
+                  <div class="value">{{ !item.value && item.value != '0' ? '-' : item.value }}</div>
                 </div>
               </div>
             </div>

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome.vue

@@ -9,13 +9,12 @@
             </template>
             <template #container>
               <div class="vent-flex-row-between auto-control">
-                  <div class="title">自动调节：</div>
-                  <a-radio-group v-model:value="isAutoControl" name="radioGroup"
-                    @change="changeType(isAutoControl)">
-                    <a-radio value="1">关闭</a-radio>
-                    <a-radio value="2">开启</a-radio>
-                  </a-radio-group>
-                </div>
+                <div class="title">自动调节：</div>
+                <a-radio-group v-model:value="isAutoControl" name="radioGroup" @change="changeType(isAutoControl)">
+                  <a-radio value="1">关闭</a-radio>
+                  <a-radio value="2">开启</a-radio>
+                </a-radio-group>
+              </div>
               <div class="input-box">
                 <div class="divider-line">开始条件</div>
                 <div v-for="(item, index) in settingParam1" class="input-item" :key="index">
@@ -36,7 +35,7 @@
                   <div class="unit">{{ item.unit }}</div>
                 </div>
               </div>
-              <div class="btn-box" style="text-align: center;">
+              <div class="btn-box" style="text-align: center">
                 <div class="btn btn1">提交</div>
               </div>
             </template>
@@ -49,16 +48,14 @@
             <template #title>
               <div>CO与O2监测</div>
             </template>
-            <template #container>
-              
-            </template>
+            <template #container> </template>
           </ventBox1>
           <ventBox1 class="vent-margin-t-10">
             <template #title>
               <div>设备监测详情</div>
             </template>
             <template #container>
-              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title"/><span>风窗</span></div>
+              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title" /><span>风窗</span></div>
               <div class="input-box">
                 <div v-for="(item, index) in windowParam" class="input-item" :key="index">
                   <div class="title">{{ item.title }}</div>
@@ -66,7 +63,7 @@
                   <div class="unit">{{ item.unit }}</div>
                 </div>
               </div>
-              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title"/><span>均压局扇</span></div>
+              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title" /><span>均压局扇</span></div>
               <div class="input-box">
                 <div v-for="(item, index) in localFanParam" class="input-item" :key="index">
                   <div class="title">{{ item.title }}</div>
@@ -77,187 +74,184 @@
             </template>
           </ventBox1>
         </div>
-        <div class="item-box vent-margin-t-10" >
-          <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+        <div class="item-box vent-margin-t-10">
+          <LivePlayer id="fm-player1" style="height: 250px" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
         </div>
       </div>
     </div>
   </a-spin>
-
 </template>
-
 <script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
+  import { settingParam1, settingParam2, settingParam3, windowParam, localFanParam } from '../balancePress.data';
+  import { list } from '../balancePress.api';
+  import LivePlayer from '@liveqing/liveplayer-v3';
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { SvgIcon } from '/@/components/Icon';
-import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
-import { settingParam1, settingParam2, settingParam3, windowParam, localFanParam } from '../balancePress.data'
-import { list } from '../balancePress.api';
-import LivePlayer from '@liveqing/liveplayer-v3';
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
 
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
-  }
-})
+  const loading = ref(false);
 
-const loading = ref(false);
+  // 默认初始是第一行
+  const isAutoControl = ref('1');
 
-// 默认初始是第一行
-const isAutoControl = ref('1')
+  // 监测数据
+  const selectData = reactive({
+    frontRearDP: '-',
+    sourcePressure: '-',
+    fault: '-',
+  });
 
-// 监测数据
-const selectData = reactive({
-  frontRearDP: '-',
-  sourcePressure: '-',
-  fault: '-'
-});
+  const changeType = (isAutoControl) => {
+    isAutoControl;
+    //
+  };
 
-const changeType = (isAutoControl) =>{
-  isAutoControl
-  //
-}
+  const flvURL1 = () => {
+    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+    // return ''
+  };
 
-const flvURL1 = () => {
-  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-  // return ''
-};
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+            updateText(selectData);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
-        updateText(selectData)
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID });
+    const result = res.msgTxt;
+    result.forEach((item) => {
+      if (item.type === 'sys') {
+        // 硐室基本
+        // fiberDataSource.value = item.filter((data: any) => {
+        //   const readData = data.readData;
+        //   return Object.assign(data, readData);
+        // })
       }
-      if (timer) {
-        timer = null;
-      }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 : 1000);
+    });
   }
-};
-
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID });
-  const result = res.msgTxt;
-  result.forEach(item => {
 
-    if (item.type === 'sys') {
-      // 硐室基本
-      // fiberDataSource.value = item.filter((data: any) => {
-      //   const readData = data.readData;
-      //   return Object.assign(data, readData);
-      // })
-    }
-  })
-}
-
-// 喷粉操作
-function handleDust() {
-  //
-}
-
-watch(() => props.deviceId, (newVal, oldVal) => {
-  if(newVal && oldVal != undefined){
-    setModelType('balancePressBase')
+  // 喷粉操作
+  function handleDust() {
+    //
   }
-  
-  loading.value = true
-})
 
-onBeforeMount(() => {
+  watch(
+    () => props.deviceId,
+    (newVal, oldVal) => {
+      if (newVal && oldVal != undefined) {
+        setModelType('balancePressBase');
+      }
 
-});
+      loading.value = true;
+    }
+  );
 
-onMounted(() => {
-  // getMonitor()
-  loading.value = true;
-  mountedThree().then(async () => {
-    await setModelType('balancePressBase');
-    loading.value = false;
-    timer = null
-    await getMonitor(true)
-    play('startSmoke', 'top', 30, 'open', 0)
-  });
-});
+  onBeforeMount(() => {});
 
-onUnmounted(() => {
-  destroy();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  onMounted(() => {
+    // getMonitor()
+    loading.value = true;
+    mountedThree().then(async () => {
+      await setModelType('balancePressBase');
+      loading.value = false;
+      timer = null;
+      await getMonitor(true);
+      play('startSmoke', 'top', 30, 'open', 0);
+    });
+  });
 
+  onUnmounted(() => {
+    destroy();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@import '../../comment/less/workFace.less';
-@ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
 
-.lr{
-  width: 340px !important;
-}
-.auto-control{
-  padding: 10px 8px;
-  margin: 0 4px 4px 4px;
-  border-radius: 4px;
-  border: 1px solid #ffffff05;
-  background-image: linear-gradient(to left, #39deff15, #3977e500, #39deff15);
-}
-.divider-line{
-  position: relative;
-  color: aqua;
-  padding-left: 20px;
-  font-size: 14px;
-  &::before{
-    position: absolute;
-    content: '';
-    display: block;
-    top: 10px;
-    left: 0;
-    height: 1px;
-    width: 15px;
-    background-color: #ffffff33;
+  .lr {
+    width: 340px !important;
+  }
+  .auto-control {
+    padding: 10px 8px;
+    margin: 0 4px 4px 4px;
+    border-radius: 4px;
+    border: 1px solid #ffffff05;
+    background-image: linear-gradient(to left, #39deff15, #3977e500, #39deff15);
+  }
+  .divider-line {
+    position: relative;
+    color: aqua;
+    padding-left: 20px;
+    font-size: 14px;
+    &::before {
+      position: absolute;
+      content: '';
+      display: block;
+      top: 10px;
+      left: 0;
+      height: 1px;
+      width: 15px;
+      background-color: #ffffff33;
+    }
+    &::after {
+      position: absolute;
+      content: '';
+      display: block;
+      top: 10px;
+      right: 0;
+      height: 1px;
+      width: calc(100% - 85px);
+      background-color: #ffffff33;
+    }
   }
-  &::after{
-    position: absolute;
-    content: '';
-    display: block;
-    top: 10px;
-    right: 0;
-    height: 1px;
-    width: calc(100% - 85px);
-    background-color: #ffffff33;
+  .input-value {
+    width: 120px !important;
   }
-}
-.input-value{
-  width: 120px !important;
-}
-.unit{
-  text-align: right;
-}
-.btn-box{
-  margin: 10px 4px;
-  .btn1{
-    padding: 4px 0;
+  .unit {
+    text-align: right;
+  }
+  .btn-box {
+    margin: 10px 4px;
+    .btn1 {
+      padding: 4px 0;
+    }
   }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  overflow: auto;
-}
-
-:deep(.@{ventSpace}-input-number) {
-  border-color: #ffffff88 !important;
-}
 
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
 
+  :deep(.@{ventSpace}-input-number) {
+    border-color: #ffffff88 !important;
+  }
 </style>

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

@@ -1,51 +1,142 @@
 <template>
-  <div class="vent-flex-row-wrap camera-box">
-    <div v-for="(item, index) in addrList" :key="index" class="player-box">
-      <div class="player-name">{{ item.name }}</div>
-      <div>
-        <template v-if="item.addr.startsWith('rtsp://')">
-          <video :id="`video${index}`" muted autoplay></video>
-          <div class="click-box" @dblclick="goFullScreen(`video${index}`)"></div>
-        </template>
-        <template v-else>
-          <LivePlayer :videoUrl="item.addr" muted live loading/>
-        </template>
+  <div v-if="addrList.length > 0">
+    <div class="vent-flex-row-wrap camera-box" >
+      <div v-for="(item, index) in addrList" :key="index" class="player-box">
+        <div class="player-name">{{ item.name }}</div>
+        <div>
+          <template v-if="item.addr.startsWith('rtsp://')">
+            <video :id="`video${index}`" muted autoplay></video>
+            <div class="click-box" @dblclick="goFullScreen(`video${index}`)"></div>
+          </template>
+          <template v-else>
+            <div :id="'player'+index" ></div>
+          </template>
+        </div>
       </div>
     </div>
+    <div class="pagination">
+      <Pagination v-model:current="current" :total="total" show-less-items @change="onChange"/>
+    </div>
+  </div>
+  <div class="camera-box" v-else>
+    <Empty />
   </div>
   
 </template>
 <script lang="ts" setup>
   import {onMounted, onUnmounted, ref } from 'vue';
+  import { Pagination, Empty } from 'ant-design-vue';
   import { list, cameraAddr } from './camera.api'
-  import LivePlayer from '@liveqing/liveplayer-v3';
-  
+  import Player from 'xgplayer';
+  import HlsPlugin from 'xgplayer-hls';
+  import FlvPlugin from 'xgplayer-flv';
+  import 'xgplayer/dist/index.min.css';
+
+  const pageSize = 8
+  const current = ref(1)
+  const total = ref(0)
+  const playerList = ref([])
   const webRtcServerList = <any[]>[]
   let addrList = ref<{ name: string, addr: string }[]>([])
 
   async function getVideoAddrs(){
-    const result = await list({ pageSize: 10000 })
+    clearCamera();
+    playerList.value = []
+    const result = await list({ pageSize: pageSize, pageNo: current.value })
     if(result && result.records && result.records.length > 0){
-      // addrList.value = result.records.map(item => ({ addr: item['addr'].includes('0.0.0.0') ? item['addr'].replace('0.0.0.0', window.location.hostname) :item['addr'] , name: item['name'] }))
+      total.value = result['total']
       const cameraList = <{ name: string, addr: string }[]>[]
-      result.records.forEach(async item => {
-        if (item['devicekind'] == 'toHKRtsp') {
+      const cameras = result.records
+      // const camerasArr: [] = [
+      //   {
+      //     name: '1111',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: '2222',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: '3333',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: '4444',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: '5555',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: '6666',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: '7777',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: '8888',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: '9999',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: 'aaaa',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: 'bbbb',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      //   {
+      //     name: 'cccc',
+      //     devicekind: 'toHKRtsp',
+      //   },
+      // ];
+      // const cameras = []
+      // for (let index = (current.value - 1)*pageSize; index < current.value * pageSize && index < camerasArr.length ; index++) {
+      //   cameras.push(camerasArr[index]) ;
+      // }
+
+      for (let i = 0; i < cameras.length; i++) {
+        const item = cameras[i];
+        
+        if (item['devicekind'] === 'toHKRtsp') {
           // 从海康平台接口获取视频流
           const data = await cameraAddr({ cameraCode: item['addr'] });
           if (data && data['url']) {
             cameraList.push({ name: item['name'], addr: data['url'] });
           }
+          // cameraList.push({
+          //   name: item['name'],
+          //   // addr: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
+          //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
+          // });
         } else {
+          if(item['addr'].includes('0.0.0.0')){
+            item['addr'].replace('0.0.0.0', window.location.hostname)
+          }
           cameraList.push({ name: item['name'], addr: item['addr'] });
         }
-      });
+      }
       addrList.value = cameraList
     }
   }
 
+  function onChange(page) {
+    current.value = page;
+    getVideoAddrs().then(() => {
+      getVideo()
+    })
+  }
+
   function getVideo() {
     const ip = VUE_APP_URL.webRtcUrl;
-    for(let i =0; i < addrList.value.length; i++){
+    for(let i = 0; i < addrList.value.length; i++){
       const item = addrList.value[i]
       if(item.addr.startsWith('rtsp://')){
         const dom = document.getElementById('video' + i) as HTMLVideoElement
@@ -54,9 +145,109 @@
         const webRtcServer = new window['WebRtcStreamer'](dom, location.protocol + ip)
         webRtcServerList.push(webRtcServer)
         webRtcServer.connect(item.addr)
+      }else{
+        setNoRtspVideo('player'+i,item.addr )
+      }
+    }
+  }
+
+  function setNoRtspVideo(id,videoAddr) {
+    const fileExtension = videoAddr.split('.').pop();
+    // const plugins = fileExtension === 'flv' ? [ FlvPlugin ] : [ HlsPlugin ];
+    if(fileExtension === 'flv'){
+      const player = new Player({
+        id: id,
+        url: videoAddr,
+        width:  421,
+        height: 292,
+        poster: '/src/assets/images/vent/noSinge.png',
+        plugins: [ FlvPlugin ] ,
+				fluid: true,
+				autoplay: true,
+				isLive: true,
+				playsinline: false,
+				screenShot: true,
+				whitelist: [''],
+				ignores: ['time'],
+				closeVideoClick: true,
+				customConfig: {
+					isClickPlayBack: false
+				},
+				flv: {
+					retryCount: 3, // 重试 3 次，默认值
+            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+            fetchOptions: {
+                // 该参数会透传给 fetch，默认值为 undefined
+                mode: 'cors'
+            },
+            targetLatency: 10, // 直播目标延迟，默认 10 秒
+            maxLatency:  20, // 直播允许的最大延迟，默认 20 秒
+            disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+            maxJumpDistance: 10,
+				}
+      });
+      playerList.value.push(player)
+    }
+    if(fileExtension === 'm3u8'){
+      let player
+      if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
+        // 原生支持 hls 播放
+        player = new Player({
+          id: id,
+          url: videoAddr,
+          width: 421,
+          height: 292,
+          isLive: true,
+          autoplay: true,
+          autoplayMuted: true,
+          cors: true,
+          poster: '/src/assets/images/vent/noSinge.png',
+          hls: {
+            retryCount: 3, // 重试 3 次，默认值
+            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+            fetchOptions: {
+                // 该参数会透传给 fetch，默认值为 undefined
+                mode: 'cors'
+            },
+            targetLatency: 10, // 直播目标延迟，默认 10 秒
+            maxLatency:  20, // 直播允许的最大延迟，默认 20 秒
+            disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+            maxJumpDistance: 10,
+          }
+          
+        })
+      } else if (HlsPlugin.isSupported()) { // 第一步
+        player = new Player({
+          id: id,
+          url: videoAddr,
+          width: 421,
+          height: 292,
+          isLive: true,
+          autoplay: true,
+          autoplayMuted: true,
+          plugins: [HlsPlugin], // 第二步
+          poster: '/src/assets/images/vent/noSinge.png',
+          hls: {
+            retryCount: 3, // 重试 3 次，默认值
+            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+            fetchOptions: {
+                // 该参数会透传给 fetch，默认值为 undefined
+                mode: 'cors'
+            },
+            targetLatency: 10, // 直播目标延迟，默认 10 秒
+            maxLatency:  20, // 直播允许的最大延迟，默认 20 秒
+            disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+            maxJumpDistance: 10,
+          }
+        })
       }
+      playerList.value.push(player)
     }
   }
+  
 
   function goFullScreen(domId) {
     const videoDom = document.getElementById(domId) as HTMLVideoElement
@@ -75,31 +266,45 @@
     }
   }
 
+  function clearCamera() {
+    const num = webRtcServerList.length
+    for (let i = 0; i < num; i++) {
+      webRtcServerList[i].disconnect()
+      webRtcServerList[i] = null
+    }
+    for(let i = 0; i < playerList.value.length; i++){
+      const player = playerList.value[i]
+      if(player.destroy)player.destroy()
+    }
+  }
+
   onMounted(async() => {
     await getVideoAddrs()
     getVideo()
   })
 
   onUnmounted(() => {
-    const num = webRtcServerList.length
-    for (let i = 0; i < num; i++) {
-      webRtcServerList[i].disconnect()
-      webRtcServerList[i] = null
-    }
+    clearCamera()
   })
 
 </script>
 <style lang="less">
+  
   .camera-box{
+    height: 700px;
     overflow-y: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     .player-box{
-      width: 314px;
-      height: 208px;
+      width: 451px;
+      height: 312px;
       padding: 10px;
       background: url('/@/assets/images/vent/camera_bg.png');
       background-size: cover;
       position: relative;
       margin: 10px;
+      
       .player-name{
         font-size: 14px;
         position: absolute;
@@ -124,6 +329,13 @@
       }
     }
   }
+  .pagination{
+    width: 100%;
+    height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   // :deep(video){
   //   width: 100% !important;
   //   height: 100% !important;

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

@@ -30,7 +30,8 @@
   const loading = ref(false)
   const list = (params) => {
     if(globalConfig.History_Type == 'vent') {
-      return defHttp.get({ url: '/safety/ventanalyMonitorData/list', params })
+      // return defHttp.get({ url: '/safety/ventanalyMonitorData/list', params })
+      return defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params })
     } else {
       return defHttp.post({ url: '/ventanaly-device/history/getHistoryData', params })
     }
@@ -84,6 +85,7 @@
   const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({})
   let deviceOptions = ref([])
   let deviceList = <any[]>[]
+  const deviceTypeStr = ref('')
 
   watch(
     () => {
@@ -180,32 +182,62 @@
             xxl: 4,
           },
           schemas: props.formSchemas.length > 0 ? props.formSchemas : [
+            // {
+            //   label: '查询日期',
+            //   field: 'tData',
+            //   component: 'DatePicker',
+            //   defaultValue: dayjs(),
+            //   colProps: {
+            //     span: 4,
+            //   },
+            //   componentProps: {
+            //     valueFormat: 'YYYY-MM-DD',
+            //   },
+            // },
             {
-              label: '查询日期',
-              field: 'tData',
-              component: 'DatePicker',
-              defaultValue: dayjs(),
-              colProps: {
-                span: 4,
-              },
-              componentProps: {
-                valueFormat: 'YYYY-MM-DD',
-              },
+            field: 'ttime_begin',
+            label: '开始时间',
+            component: 'DatePicker',
+            defaultValue: dayjs().startOf('date'),
+            required: true,
+            componentProps: {
+              showTime: true,
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+              getPopupContainer: getAutoScrollContainer,
             },
-            {
-              label: '时间区间',
-              field: 'tickectDate',
-              component: 'TimeRangePicker',
-              defaultValue: [dayjs().startOf('date').format('HH:mm:ss'), dayjs().format('HH:mm:ss')],
-              componentProps: {
-                placement: 'topLeft',
-                placeholder: ['开始时间', '结束时间'],
-                valueFormat: 'HH:mm:ss',
-              },
-              colProps: {
-                span: 4,
-              },
+            colProps: {
+              span: 4,
             },
+          },
+          {
+            field: 'ttime_end',
+            label: '结束时间',
+            component: 'DatePicker',
+            defaultValue: dayjs(),
+            required: true,
+            componentProps: {
+              showTime: true,
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+              getPopupContainer: getAutoScrollContainer,
+            },
+            colProps: {
+              span: 4,
+            },
+          },
+            // {
+            //   label: '时间区间',
+            //   field: 'tickectDate',
+            //   component: 'TimeRangePicker',
+            //   defaultValue: [dayjs().startOf('date').format('HH:mm:ss'), dayjs().format('HH:mm:ss')],
+            //   componentProps: {
+            //     placement: 'topLeft',
+            //     placeholder: ['开始时间', '结束时间'],
+            //     valueFormat: 'HH:mm:ss',
+            //   },
+            //   colProps: {
+            //     span: 4,
+            //   },
+            // },
             {
               label: '查询设备',
               field: 'gdeviceid',
@@ -216,6 +248,7 @@
                 options: deviceOptions,
                 onChange: (e, option) => {
                   if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind'])) historyType.value = option['strtype'] || option['devicekind']
+                  if(option['strtype']) deviceTypeStr.value = option['strtype']
                 },
               },
               colProps: {
@@ -268,7 +301,7 @@
               },
             },
           ],
-          fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
+          // fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
         },
         fetchSetting: {
           listField:  'datalist',
@@ -281,7 +314,7 @@
           showQuickJumper: false
         },
         beforeFetch(params) {
-          params.strtype = props.deviceType + '*';
+          params.strtype = deviceTypeStr.value ? deviceTypeStr.value : props.deviceType + '*';
           if(props.sysId){
             params.sysId = props.sysId;
           }
@@ -336,6 +369,9 @@
               valueFormat: 'YYYY-MM-DD HH:mm:ss',
               getPopupContainer: getAutoScrollContainer,
             },
+            colProps: {
+              span: 4,
+            },
           },
           {
             field: 'endTime',
@@ -348,6 +384,9 @@
               valueFormat: 'YYYY-MM-DD HH:mm:ss',
               getPopupContainer: getAutoScrollContainer,
             },
+            colProps: {
+              span: 4,
+            },
           },
           {
             label: '查询设备',
@@ -366,6 +405,9 @@
                 if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind'])) historyType.value = option['strtype'] || option['devicekind']
               },
             },
+            colProps: {
+              span: 4,
+            },
             // componentProps: ({ formModel }) => {
             //   return {
             //     options: deviceOptions.value,
@@ -420,6 +462,9 @@
                 },
               ],
             },
+            colProps: {
+              span: 4,
+            },
           },
         ],
       },

src/views/vent/monitorManager/compressor/components/nitrogenHome_dltj.vue

@@ -222,7 +222,7 @@
       dataIndex: 'InputFlux',
     },
   ]);
-  const { getCamera, webRtcServer } = useCamera();
+  const { getCamera, removeCamera } = useCamera();
 
   const monitorData = ref({});
 
@@ -233,18 +233,21 @@
   let timer: null | NodeJS.Timeout = null;
   async function getMonitor(flag?) {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = await setTimeout(
-        async () => {
-          if (props.deviceId) {
-            await getDataSource(props.deviceId);
-          }
-          if (timer) {
-            timer = null;
-          }
-          await getMonitor();
-        },
-        flag ? 0 : 3000
-      );
+      return new Promise(async (resolve) => {
+        timer = await setTimeout(
+          async () => {
+            if (props.deviceId) {
+              await getDataSource(props.deviceId);
+            }
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor();
+          },
+          flag ? 0 : 3000
+        );
+      });
     }
   }
 
@@ -491,11 +494,7 @@
 
   onUnmounted(() => {
     destroy();
-    if (webRtcServer.length > 0) {
-      webRtcServer.forEach((item) => {
-        item.disconnect();
-      });
-    }
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;
@@ -634,7 +633,6 @@
           pointer-events: auto;
           overflow-y: auto;
           overflow-x: hidden;
-          height: calc(100% - 70px);
         }
 
         .item {

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

@@ -111,7 +111,7 @@ function changeModalType(currentData) {
 onMounted(async () => {
   if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
   await getSysDataSource()
-  getSelectRow(optionValue.value)
+  // getSelectRow(optionValue.value)
 });
 
 onUnmounted(() => {

src/views/vent/monitorManager/compressor/nitrogen.api.ts

@@ -6,8 +6,7 @@ enum Api {
   baseList = '/safety/ventanalyManageSystem/list',
   deviceList = '/safety/ventanalyDeviceInfo/list',
 
-  getDevice='/ventanaly-device/monitor/device'
-
+  getDevice = '/ventanaly-device/monitor/device',
 }
 /**
  * 列表接口
@@ -27,4 +26,3 @@ export const getDeviceList = (params) => defHttp.get({ url: Api.deviceList, para
 
 //地下注氮系统-监测数据
 export const getDevice = (params) => defHttp.post({ url: Api.getDevice, params });
-

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

@@ -218,7 +218,7 @@ export const majorColumns: BasicColumn[] = [
   {
     title: '风量(m³/min)',
     align: 'center',
-    dataIndex: 'm³',
+    dataIndex: 'm3',
     width: 110,
   },
 

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

@@ -21,7 +21,8 @@ let model: UseThree | undefined,
   player1,
   fanType,
   topSmoke: Smoke | undefined,
-  downSmoke: Smoke | undefined,
+  downSmoke: Smoke | undefined, //
+  returnSmoke: Smoke | undefined,
   topLife: number | undefined,
   downLife: number | undefined,
   playerStartClickTime1 = new Date().getTime();
@@ -97,7 +98,7 @@ export const setModelType = (type) => {
       if (group.getObjectByName('jbfj-fc')) {
         group.remove(fcFanObj.group);
       }
-      childGroup = fmFanObj.group;
+      childGroup = fmFanObj?.group;
       (group?.getObjectByName('text5')).visible = false;
       (group?.getObjectByName('text4')).visible = true;
     } else if (fanType === 'fc' && fmFanObj && fmFanObj.group) {
@@ -105,7 +106,7 @@ export const setModelType = (type) => {
       if (group.getObjectByName('jbfj-fm')) {
         group.remove(fmFanObj.group);
       }
-      childGroup = fcFanObj.group;
+      childGroup = fcFanObj?.group;
       (group?.getObjectByName('text5')).visible = true;
       (group?.getObjectByName('text4')).visible = false;
     }
@@ -130,7 +131,7 @@ export const addText = (selectData) => {
       color: '#009900',
       strokeStyle: '#002200',
       x: 50,
-      y: 110,
+      y: 108,
     },
     {
       text: `供风距离(m):`,
@@ -138,7 +139,7 @@ export const addText = (selectData) => {
       color: '#009900',
       strokeStyle: '#002200',
       x: 0,
-      y: 165,
+      y: 152,
     },
     {
       text: `${
@@ -147,8 +148,8 @@ export const addText = (selectData) => {
       font: 'normal 30px Arial',
       color: '#009900',
       strokeStyle: '#002200',
-      x: 290,
-      y: 165,
+      x: 228,
+      y: 152,
     },
     {
       text: `风筒直径(mm): `,
@@ -156,15 +157,15 @@ export const addText = (selectData) => {
       color: '#009900',
       strokeStyle: '#002200',
       x: 0,
-      y: 220,
+      y: 200,
     },
     {
       text: ` ${selectData.fchimenydiamlimit ? selectData.fchimenydiamlimit : selectData.ductDiameter_merge ? selectData.ductDiameter_merge : '-'}`,
       font: 'normal 30px Arial',
       color: '#009900',
       strokeStyle: '#002200',
-      x: 280,
-      y: 220,
+      x: 220,
+      y: 200,
     },
     {
       text: `故障诊断:`,
@@ -172,15 +173,31 @@ export const addText = (selectData) => {
       color: '#009900',
       strokeStyle: '#002200',
       x: 0,
-      y: 275,
+      y: 245,
     },
     {
       text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
       font: 'normal 30px Arial',
       color: '#009900',
       strokeStyle: '#002200',
-      x: 280,
-      y: 275,
+      x: 220,
+      y: 245,
+    },
+    {
+      text: `型号功率:`,
+      font: 'normal 30px Arial',
+      color: '#009900',
+      strokeStyle: '#002200',
+      x: 0,
+      y: 285,
+    },
+    {
+      text: `${selectData.model_Power_merge ? selectData.model_Power_merge : '-'}`,
+      font: 'normal 26px Arial',
+      color: '#009900',
+      strokeStyle: '#002200',
+      x: 220,
+      y: 285,
     },
     {
       text: History_Type['type'] == 'remote' ? `国能神东煤炭集团监制` : '煤炭科学技术研究院有限公司研制',
@@ -209,7 +226,7 @@ export const addText = (selectData) => {
       planeMesh.name = 'monitorText';
       planeMesh.scale.set(0.0135, 0.0135, 0.0135);
       planeMesh.rotation.y = -Math.PI / 2;
-      planeMesh.position.set(-84.79, 0.82, 17.01);
+      planeMesh.position.set(-84.79, 0.82, 17.0);
       group.add(planeMesh);
     }
   });
@@ -287,8 +304,9 @@ export const addCssText = () => {
 //   }
 // };
 export const playSmoke = (selectData) => {
+  debugger;
   console.log('selectData[Fan1fHz]------------》', selectData['Fan1fHz'], Number(selectData['Fan1fHz']));
-  if (selectData['Fan1StartStatus'] == 1) {
+  if (selectData['Fan1StartStatus'] == '1') {
     // 主风机打开
     // setSmokeFrequency('top', Number(selectData['Fan1fHz']) || 40);
     setSmokeFrequency('top', 40);
@@ -297,7 +315,7 @@ export const playSmoke = (selectData) => {
     // 备风机关闭
     runFly('top', 'close');
   }
-  if (selectData['Fan2StartStatus'] == 1) {
+  if (selectData['Fan2StartStatus'] == '1') {
     // 备风机打开
     // setSmokeFrequency('down', Number(selectData['Fan2fHz']) || 40);
     setSmokeFrequency('down', 40);
@@ -306,6 +324,11 @@ export const playSmoke = (selectData) => {
     // 备风机关闭
     runFly('down', 'close');
   }
+
+  if (selectData['Fan1StartStatus'] != '1' && selectData['Fan2StartStatus'] != '1') {
+    runFly('all', 'close');
+  }
+
   // if (frequency) {
   //   setSmokeFrequency(deviceType, frequency);
   // }
@@ -393,18 +416,52 @@ const initFly = async () => {
     },
   ];
 
+  const returnCurve = [
+    {
+      path0: new THREE.Vector3(93.164, 0.85, -12.962),
+      path1: new THREE.Vector3(86.39, 0.827, -12.962),
+      isSpread: true,
+      spreadDirection: 1,
+    },
+    {
+      path0: new THREE.Vector3(86.39, 0.827, -12.962),
+      path1: new THREE.Vector3(83.341, 0.847, -16.281),
+      isSpread: false,
+      spreadDirection: 0,
+    },
+    {
+      path0: new THREE.Vector3(83.341, 0.847, -16.858),
+      path1: new THREE.Vector3(-29.077, 0.847, -16.227),
+      isSpread: false,
+      spreadDirection: 0,
+    },
+    {
+      path0: new THREE.Vector3(-29.077, 0.847, -16.227),
+      path1: new THREE.Vector3(-29.64, 0.827, -39.047),
+      isSpread: false,
+      spreadDirection: 0,
+    },
+  ];
+
   if (!topSmoke) {
-    topSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.8, 0.5, 400);
+    topSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
     topSmoke.setPath(topCurve);
     await topSmoke.setPoints();
     group?.add(topSmoke.points);
   }
   if (!downSmoke) {
-    downSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.8, 0.5, 400);
+    downSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
     downSmoke.setPath(downCurve);
     await downSmoke.setPoints();
     group?.add(downSmoke.points);
   }
+
+  if (!returnSmoke) {
+    returnSmoke = new Smoke('/model/img/texture-smoke.png', '#777777', 0, 0.8, 0.5, 200);
+    returnSmoke.setPath(returnCurve);
+    await returnSmoke.setPoints();
+    group?.add(returnSmoke.points);
+  }
 };
 
 const runFly = (deviceType, state) => {
@@ -424,6 +481,9 @@ const runFly = (deviceType, state) => {
         downSmoke.startSmoke();
       }
     }
+    if (returnSmoke && !returnSmoke.frameId) {
+      returnSmoke?.startSmoke();
+    }
   } else {
     if (deviceType === 'top') {
       if (topSmoke && topSmoke.frameId) {
@@ -435,6 +495,9 @@ const runFly = (deviceType, state) => {
       }
     }
   }
+  if (deviceType === 'all' && state === 'close') {
+    returnSmoke?.stopSmoke();
+  }
 };
 
 // 调频 30-50 (life 300 - 800) , 25 = （800 - 300）/ 20
@@ -471,6 +534,7 @@ const setSmokeFrequency = (deviceType, frequency) => {
 const clearFly = () => {
   if (topSmoke) topSmoke.clearSmoke();
   if (downSmoke) downSmoke.clearSmoke();
+  if (returnSmoke) returnSmoke.clearSmoke();
 };
 // 初始化事件
 const startAnimation = () => {
@@ -606,6 +670,7 @@ export const destroy = () => {
     clearFly();
     topSmoke = undefined;
     downSmoke = undefined;
+    returnSmoke = undefined;
     if (fcFanObj) fcFanObj.destroy();
     if (fmFanObj) fmFanObj.destroy();
     group = undefined;

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

@@ -74,7 +74,7 @@
       {{ selectData.supplyAirAddr || selectData.strinstallpos || selectData.stationname }}
     </div>
     <div class="data-show-box" v-if="!loading">
-      <div class="data-item">
+      <div class="data-item" v-if="leftColumns.length > 0">
         <div class="item-header">环境监测</div>
         <div class="item-container">
           <div class="tab">
@@ -175,7 +175,7 @@
           </div>
         </div>
       </div>
-      <div class="data-item">
+      <div class="data-item" v-if="rightColumns.length > 0">
         <div class="item-header">设备监测</div>
         <div class="item-container">
           <div class="tab">
@@ -334,6 +334,10 @@
         <div class="label">备风机运行频率（Hz）：</div>
         <a-input-number size="small" v-model:value="fan2FrequencyVal" :min="20" :max="50" :step="0.1" />
       </div>
+      <div class="vent-flex-row input-box" v-if="modalType == 'FanFrequency'">
+        <div class="label">风机运行频率（Hz）：</div>
+        <a-input-number size="small" v-model:value="fan1FrequencyVal" :min="20" :max="50" :step="0.1" />
+      </div>
       <div class="vent-flex-row input-box" v-if="modalType == 'needAir'">
         <div class="label">需风量（单位）：</div>
         <a-input-number size="small" v-model:value="frequencyVal" :min="30" :max="50" :step="0.1" />
@@ -463,6 +467,11 @@
         value: '备机调频',
         permission: 'btn:frequency',
       },
+      {
+        key: 'FanFrequency',
+        value: '风机调频',
+        permission: 'btn:frequencyMerge',
+      },
       {
         key: 'windPower',
         value: '风电闭锁',
@@ -589,7 +598,7 @@
   const headElHeight = ref(0);
   let btnClick = ref(true); // 判断按钮是否可点
 
-  const { getCamera, webRtcServer } = useCamera();
+  const { getCamera, removeCamera } = useCamera();
 
   watch(deviceType, (type) => {
     rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as [];
@@ -654,6 +663,10 @@
         dataArr.forEach((data) => {
           const readData = data.readData;
           data = Object.assign(data, readData);
+          if (data['Fan1StartStatus'] && data['Fan1StartStatus'] === '1.0') data['Fan1StartStatus'] = '1';
+          if (data['Fan2StartStatus'] && data['Fan2StartStatus'] === '1.0') data['Fan2StartStatus'] = '1';
+          if (data['Fan1StartStatus'] && data['Fan1StartStatus'] === '0.0') data['Fan1StartStatus'] = '0';
+          if (data['Fan2StartStatus'] && data['Fan2StartStatus'] === '0.0') data['Fan2StartStatus'] = '0';
           dataSource.value.push(data);
         });
         if (MonitorDataTable.value && selectRowIndex.value == -1) {
@@ -675,6 +688,7 @@
     if (Object.prototype.toString.call(timer) === '[object Null]') {
       timer = await setTimeout(
         async () => {
+          debugger;
           await getDataSource();
           if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
             // 初始打开页面
@@ -687,7 +701,6 @@
           for (const key in selectData) {
             selectData[key] = '';
           }
-
           if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
             deviceType.value = dataSource.value[selectRowIndex.value]['deviceType'];
             if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
@@ -736,12 +749,12 @@
 
       const data = dataSource.value[selectIndex];
       if (data) {
-        if (data['Fan1StartStatus'] == 1) {
+        if (data['Fan1StartStatus'] == '1') {
           mainWindIsShow1.value = 'open';
           mainWindIsShow2.value = 'stop';
           selectDevice('warningMonitorRowIndex', 0);
           selectDevice('dataMonitorRowIndex', 0);
-        } else if (data['Fan2StartStatus'] == 1) {
+        } else if (data['Fan2StartStatus'] == '1') {
           mainWindIsShow2.value = 'open';
           mainWindIsShow1.value = 'stop';
           selectDevice('warningMonitorRowIndex', 1);
@@ -833,7 +846,7 @@
       } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
         // playSmoke(handType, '', frequency, 'stop');
       }
-    } else if (handType === 'Fan1Frequency' || handType === 'Fan2Frequency') {
+    } else if (handType === 'Fan1Frequency' || handType === 'Fan2Frequency' || handType === 'FanFrequency') {
       // 调频
       if (handType === 'Fan1Frequency') {
         data.paramcode = 'Fan1FreqHz';
@@ -841,6 +854,9 @@
       } else if (handType === 'Fan2Frequency') {
         data.paramcode = 'Fan2FreqHz';
         data.value = fan2FrequencyVal.value;
+      } else if (handType === 'FanFrequency') {
+        data.paramcode = 'FreqHz_merge';
+        data.value = fan1FrequencyVal.value;
       }
 
       btnClick.value = false;
@@ -859,7 +875,7 @@
           btnClick.value = true;
         });
     } else if (handType === 'changeSmoke') {
-      if (selectData['Fan1StartStatus'] == 0 || !selectData['Fan1StartStatus']) {
+      if (selectData['Fan1StartStatus'] == '0' || !selectData['Fan1StartStatus']) {
         data.paramcode = 'CtrlFan1Start';
         btnClick.value = false;
         deviceControlApi(data)
@@ -878,7 +894,7 @@
           .catch((err) => {
             btnClick.value = true;
           });
-      } else if (selectData['Fan2StartStatus'] == 0 || !selectData['Fan2StartStatus']) {
+      } else if (selectData['Fan2StartStatus'] == '0' || !selectData['Fan2StartStatus']) {
         data.paramcode = 'CtrlFan2Start';
         btnClick.value = false;
         deviceControlApi(data)
@@ -991,15 +1007,11 @@
 
   onUnmounted(() => {
     destroy();
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;
     }
-    if (webRtcServer.length > 0) {
-      webRtcServer.forEach((item) => {
-        item.disconnect();
-      });
-    }
   });
 </script>
 <style scoped lang="less">

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

@@ -239,7 +239,7 @@
   const deviceBaseList = ref([]); // 设备基本信息
   const [registerModal, { openModal, closeModal }] = useModal();
 
-  const { getCamera, webRtcServer } = useCamera();
+  const { getCamera, removeCamera } = useCamera();
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
@@ -598,7 +598,7 @@
   let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
   let midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
   function monitorAnimation(selectData) {
-    const timeScale = 0.003;
+    const timeScale = 0.005;
 
     // if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0') {
     //   //正在运行
@@ -722,16 +722,12 @@
   });
 
   onUnmounted(() => {
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;
     }
     destroy();
-    if (webRtcServer.length > 0) {
-      webRtcServer.forEach((item) => {
-        item.disconnect();
-      });
-    }
   });
 </script>
 ,

src/views/vent/monitorManager/groutMonitor/components/groutHomeJj.vue

@@ -26,20 +26,16 @@
         </div>
       </div>
     </div>
+    <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; height: 100%; margin: auto; pointer-events: none"> </div>
   </div>
-  <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" />
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount, ref, onMounted, onUnmounted, shallowRef, defineProps, ComponentOptions, reactive } from 'vue';
+  import { watch, ref, onMounted, onUnmounted, defineProps, reactive } from 'vue';
   import { mountedThree, destroy, setModelType } from '../grout.threejs';
-  import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-  import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import RunParameterModal from './runParameter.modal.vue';
-  import WarningParameterModal from './warningParameter.modal.vue';
   import { deviceMonitorList } from '../grout.data';
   import { list } from '../grout.api';
-  import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
+  import { useCamera } from '/@/hooks/system/useCamera';
 
   const props = defineProps({
     deviceId: {
@@ -51,81 +47,58 @@
       require: true,
     },
   });
-  const left: string = '0px';
-  const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
-  const modalVisible = ref<Boolean>(false); // 模态框是否可见
+
   const loading = ref(false);
   const monitorData = ref({});
-  // 默认初始是第一行
-  const dataSource = ref([
-    {
-      waterSupply: '-',
-      beltVla: '-',
-      density: '-',
-      pressure: '-',
-      liquidLevel: '-',
-      flowRate: '-',
-      readTime: '',
-    },
-    {
-      waterSupply: '-',
-      beltVla: '-',
-      density: '-',
-      pressure: '-',
-      liquidLevel: '-',
-      flowRate: '-',
-      readTime: '',
-    },
-  ]); //dusting
-
-  const flvURL1 = () => {
-    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-    // return ''
-  };
-  const openModal = (modalName) => {
-    modalVisible.value = true;
-    if (modalName == 'RunParameterModal') {
-      currentModal.value = RunParameterModal;
-    } else {
-      currentModal.value = WarningParameterModal;
-    }
-  };
+  // 监测数据
+  const selectData = reactive({});
+
+  const playerRef = ref();
+  const { getCamera, removeCamera } = useCamera();
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   function getMonitor(flag?) {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(
-        async () => {
-          await getDataSource();
-          if (timer) {
-            timer = null;
-          }
-          await getMonitor();
-        },
-        flag ? 0 : 1000
-      );
+      return new Promise((resolve) => {
+        timer = setTimeout(
+          async () => {
+            if (props.deviceId) {
+              await getDataSource(props.deviceId);
+            }
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor();
+          },
+          flag ? 0 : 1000
+        );
+      });
     }
   }
 
-  async function getDataSource() {
-    const res = await list({ devicetype: 'pulping_auto', pagetype: 'normal' });
-    if (res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist[0]) {
-      monitorData.value = Object.assign(res.msgTxt[0].datalist[0], res.msgTxt[0].datalist[0]['readData']);
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      if (item.type.startsWith('pulping')) {
+        monitorData.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+      }
+
+      loading.value = false;
     }
-    // const dataList = res.msgTxt[0].datalist || [];
-    // dataSource.value = dataList.filter((data) => {
-    //   const item = data.readData;
-    //   Object.assign(data, item);
-    //   return item
-    // });
-    // monitorData.value =
   }
 
-  function handlerDevice(param: string | Object) {}
-  function controlDevice(flag) {}
-
-  onBeforeMount(() => {});
+  watch(
+    () => props.deviceId,
+    async (deviceId) => {
+      if (deviceId) {
+        await getCamera(deviceId, playerRef.value);
+      }
+    }
+  );
 
   onMounted(() => {
     loading.value = true;
@@ -134,11 +107,14 @@
       await setModelType('bertaiBase');
       loading.value = false;
       timer = null;
-      await getMonitor(true);
+      getMonitor(true)?.then(async () => {
+        if (props.deviceId) await getCamera(props.deviceId, playerRef.value);
+      });
     });
   });
   onUnmounted(() => {
     destroy();
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;

src/views/vent/monitorManager/groutMonitor/grout.api.ts

@@ -1,8 +1,10 @@
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
-  list = '/ventanaly-device/monitor/device',
-  baseList = '/safety/ventanalyDeviceInfo/list',
+  systemList = '/ventanaly-device/monitor/device',
+  list = '/ventanaly-device/monitor/system',
+  baseList = '/safety/ventanalyManageSystem/list',
+  deviceList = '/safety/ventanalyDeviceInfo/list',
 }
 /**
  * 列表接口
@@ -10,8 +12,12 @@ enum Api {
  */
 export const list = (params) => defHttp.post({ url: Api.list, params });
 
+export const systemList = (params) => defHttp.post({ url: Api.systemList, params });
+
 /**
  * 保存或者更新用户
  * @param params
  */
 export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });
+
+export const getDeviceList = (params) => defHttp.get({ url: Api.deviceList, params });

src/views/vent/monitorManager/groutMonitor/grout.data.ts

@@ -317,10 +317,10 @@ export function getMonitorComponent() {
       groutHome = defineAsyncComponent(() => import('./components/groutHomeJj.vue'));
       return groutHome;
     case 'sdmtjtdltmkhjtj': // 活鸡兔井
-      // groutHome = defineAsyncComponent(() => import('./components/groutHomeHjt.vue'));
+      groutHome = defineAsyncComponent(() => import('./components/groutHomeHjt.vue'));
       return groutHome;
     default:
-      groutHome = defineAsyncComponent(() => import('./components/groutHome.vue'));
+      groutHome = defineAsyncComponent(() => import('./components/groutHomeHjt.vue'));
       return groutHome;
   }
 }

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

@@ -17,7 +17,7 @@
     </div> -->
   </div>
   <div class="scene-box">
-    <customHeader :fieldNames="{ label: 'strinstallpos', value: 'deviceID', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">智能注浆系统</customHeader>
+    <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">智能注浆系统</customHeader>
     <div class="center-container">
       <groutHome v-if="activeKey == 'monitor'" :deviceId = 'optionValue' :device-type="currentDeviceType" />
       <div v-else class="history-group">
@@ -36,7 +36,7 @@
 <script setup lang="ts">
 import customHeader from '/@/views/vent/comment/components/customHeader.vue';
 import { ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
-import { list } from './grout.api';
+import { systemList, getTableList } from './grout.api';
 import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
 import {getMonitorComponent} from './grout.data'
 import groutHistory from './components/groutHistory.vue';
@@ -80,7 +80,7 @@ function deviceChange(index) {
 
 // 查询关联设备列表
 async function getDeviceList() {
-  const res = await list({ devicetype: 'sys', systemID: optionValue.value });
+  const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
   const result = res.msgTxt;
   const deviceArr = <DeviceType[]>[]
   result.forEach(item => {
@@ -100,44 +100,54 @@ async function getDeviceList() {
 };
 
 async function getSysDataSource() {
-  const res = await list({ devicetype: 'pulping', pagetype: 'normal' });
-  dataSource.value = res.msgTxt[0].datalist || [];
-  dataSource.value.forEach((data: any) => {
-    const readData = data.readData;
-    data = Object.assign(data, readData);
-  });
-
+  const res = await getTableList({ strtype: 'sys_pulping', pagetype: 'normal' });
   if (!options.value) {
     // 初始时选择第一条数据
-    options.value = dataSource.value
+    options.value = res.records || [];
     if (!optionValue.value) {
-      optionValue.value = dataSource.value[0]['deviceID']
-      Object.assign(selectData, dataSource.value[0])
-    } else {
-      const currentData = dataSource.value.find(item => item['deviceID'] === optionValue.value) || {}
-      Object.assign(selectData, currentData)
+      optionValue.value = options.value[0]['id']
     }
+    getSelectRow(optionValue.value)
+    getDeviceList()
   }
-  const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-  return data;
+  // dataSource.value = res.msgTxt[0].datalist || [];
+  // dataSource.value.forEach((data: any) => {
+  //   const readData = data.readData;
+  //   data = Object.assign(data, readData);
+  // });
+
+  // if (!options.value) {
+  //   // 初始时选择第一条数据
+  //   options.value = dataSource.value
+  //   if (!optionValue.value) {
+  //     optionValue.value = dataSource.value[0]['deviceID']
+  //     Object.assign(selectData, dataSource.value[0])
+  //   } else {
+  //     const currentData = dataSource.value.find(item => item['deviceID'] === optionValue.value) || {}
+  //     Object.assign(selectData, currentData)
+  //   }
+  // }
+  // const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+  // return data;
 };
 
 // 切换检测数据
 function getSelectRow(deviceID) {
-  const currentData = dataSource.value.find((item: any) => {
-    return item.deviceID == deviceID
-  })
-  if (currentData) {
-    optionValue.value = currentData['deviceID']
-    currentDeviceType.value = currentData['deviceType']
-    Object.assign(selectData, currentData)
-  }
+  optionValue.value = deviceID;
+  getDeviceList()
+  // const currentData = dataSource.value.find((item: any) => {
+  //   return item.deviceID == deviceID
+  // })
+  // if (currentData) {
+  //   optionValue.value = currentData['deviceID']
+  //   currentDeviceType.value = currentData['deviceType']
+  //   Object.assign(selectData, currentData)
+  // }
 }
 
 onMounted(async() => {
   if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
   await getSysDataSource()
-  await getDeviceList()
 });
 
 onUnmounted(() => {

src/views/vent/monitorManager/mainFanMonitor/components/DetailModal.vue

@@ -1,39 +1,27 @@
 <template>
   <BasicModal @register="register" title="预警详情" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
-    <div>
-      1223
-    </div>
+    <div> 1223 </div>
   </BasicModal>
 </template>
 <script lang="ts" setup>
+  import { onMounted, ref, defineEmits, onUnmounted, watch } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
 
-import { onMounted, ref, defineEmits, onUnmounted, watch } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
+  const emit = defineEmits(['close', 'register']);
+  const props = defineProps({});
 
-const emit = defineEmits(['close', 'register'])
-const props = defineProps({
-  
-})
+  // 注册 modal
+  const [register, { closeModal }] = useModalInner();
 
+  async function onSubmit() {
+    emit('close');
+    closeModal();
+  }
 
-// 注册 modal
-const [register, { closeModal }] = useModalInner();
-
-async function onSubmit() {
-  emit('close')
-  closeModal();
-}
-
-onMounted(async () => {
-
-});
-onUnmounted(() => {
-
-});
+  onMounted(async () => {});
+  onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-
   @import '/@/design/vent/color.less';
   @import '/@/design/vent/modal.less';
-  
 </style>

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

@@ -262,6 +262,7 @@
               columnsType="fanmain_monitor"
               @selectRow="getSelectRow"
               :scroll="{ y: scroll.y - (headElHeight - 56) }"
+              :is-action="true"
             >
               <template #bodyCell="{ column, record }">
                 <!-- <a-tag :color="record.netStatus == '0' ? '#f00' : 'green'">{{ record.netStatus == '1' ? '报警' : '正常' }}</a-tag> -->
@@ -397,6 +398,7 @@
   </a-modal>
   <!-- 工况辅助决策 -->
   <ConditionAssistance @register="registerModal" />
+  <DeviceBaseInfo @register="registerModalDeviceEdit" :device-type="selectData['deviceType']" />
 </template>
 
 <script setup lang="ts">
@@ -424,9 +426,11 @@
   import { useModal } from '/@/components/Modal';
   import type { BasicColumn } from '/@/components/Table/src/types/table';
   import { useCamera } from '/@/hooks/system/useCamera';
+  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
   const globalConfig = inject('globalConfig');
 
   const [registerModal, { openModal, closeModal }] = useModal();
+  const [registerModalDeviceEdit, { openModal: openModalDeviceEdit }] = useModal();
   const { currentRoute } = useRouter();
 
   const { createMessage } = useMessage();
@@ -509,7 +513,7 @@
     ['sourcePressure', '气源压力'],
   ]);
 
-  const { getCamera, webRtcServer } = useCamera();
+  const { getCamera, removeCamera } = useCamera();
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
@@ -895,7 +899,7 @@
 
   function deviceEdit(e: Event, type: string, record) {
     e.stopPropagation();
-    openModal(true, {
+    openModalDeviceEdit(true, {
       type,
       deviceId: record['deviceID'],
     });
@@ -920,15 +924,11 @@
 
   onUnmounted(() => {
     destroy();
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;
     }
-    if (webRtcServer.length > 0) {
-      webRtcServer.forEach((item) => {
-        if (item) item.disconnect();
-      });
-    }
   });
 </script>
 

src/views/vent/monitorManager/nitrogen/components/nitrogenHome.vue

@@ -9,7 +9,7 @@
     </div>
   </template>
   <div v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
-    <div v-show="monitorDataGroupFlag == sysIndex + 1">
+    <div v-show="monitorDataGroupFlag == sysIndex + 1" :id="`nitrogenMonitorBox${sysIndex}`">
       <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
         <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
           <div class="title">{{ kyjs[index] }} </div>
@@ -134,6 +134,7 @@
             </div>
           </div>
         </div>
+        <div ref="playerRef" class="playerBox"> </div>
       </div>
     </div>
   </div>
@@ -147,6 +148,7 @@
   import { getMonitorData } from '../nitrogen.data.1';
   import type { State } from '../nitrogen.data.1';
   import { formatNum } from '/@/utils/ventutil';
+  import { useCamera } from '/@/hooks/system/useCamera';
 
   const { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } = getMonitorData();
   const loading = ref(true);
@@ -156,21 +158,27 @@
   const cqgs = ref<string[]>([]);
   const monitorData = ref<Object | []>({});
   const sysStateList = ref<State[]>([]);
+  const playerRef = ref();
+
+  const { getCamera, removeCamera } = useCamera();
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   async function getMonitor(flag?) {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = await setTimeout(
-        async () => {
-          await getDataSource();
-          if (timer) {
-            timer = null;
-          }
-          await getMonitor(false);
-        },
-        flag ? 0 : 1000
-      );
+      return new Promise(async (resolve) => {
+        timer = await setTimeout(
+          async () => {
+            await getDataSource();
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor(false);
+          },
+          flag ? 0 : 1000
+        );
+      });
     }
   }
 
@@ -178,47 +186,33 @@
     const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
     let dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : [];
     if (dataSource) {
-      monitorData.value = Object.assign(dataSource, dataSource.readData);
+      Object.assign(monitorData.value, dataSource, dataSource.readData);
     }
     loading.value = false;
     sysStateList.value = getSysState(monitorData.value);
   }
 
   function setMonitorGroupNum(flag) {
-    monitorDataGroupFlag.value = flag;
+    if (flag != monitorDataGroupFlag.value) monitorDataGroupFlag.value = flag;
     const monitorGroup = monitorDataGroupArr[flag - 1];
-    changeGroup(monitorGroup);
     setModelType('compressor' + (flag - 1));
     monitorDataGroup.value = monitorGroup;
   }
 
-  function changeGroup(val) {
-    kyjs.value = val.map((item) => `${item}号空压机`);
-    cqgs.value = val.map((item) => `${item}号储气罐`);
-    monitorData.value = new Array(val.length).fill({
-      strName: '空压机',
-      compressGroupName: '',
-      compressExhaustPressF1: '-',
-      compressSeparatePressF1: '-',
-      compressHostTempF1: '-',
-      compressCrewTempF1: '-',
-      compressRunTimeF1: '-',
-      controlModel: 'LOC',
-    });
-  }
-
   onMounted(async () => {
     setTimeout(() => {
-      monitorDataGroupFlag.value = 1;
       mountedThree(monitorDataGroupArr).then(async () => {
         setMonitorGroupNum(1);
-        await getMonitor(true);
+        getMonitor(true).then(async () => {
+          if (monitorData.value && monitorData.value['deviceID']) await getCamera(monitorData.value['deviceID'], playerRef.value);
+        });
       });
     }, 0);
   });
 
   onUnmounted(() => {
     destroy();
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;
@@ -750,6 +744,26 @@
         }
       }
     }
+    .playerBox {
+      z-index: 9999;
+      position: fixed;
+      top: 100px;
+      right: 15px;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      margin: auto;
+      pointer-events: none;
+      display: flex;
+      justify-content: end;
+      &:deep(#LivePlayerBox) {
+        width: auto !important;
+        height: auto !important;
+        display: flex;
+        flex-flow: column;
+        justify-content: end;
+      }
+    }
   }
   .tab-button-box {
     display: inline-block;

src/views/vent/monitorManager/nitrogen/components/nitrogenHomeBLT.vue

@@ -169,6 +169,7 @@
             </div>
           </div>
         </div>
+        <div ref="playerRef" style="z-index: 9999; position: fixed; top: 180px; right: 15px; height: 100%; pointer-events: none"> </div>
       </div>
     </div>
   </div>
@@ -184,6 +185,8 @@
   import type { State } from '../nitrogen.dataBLT';
 
   import { formatNum } from '/@/utils/ventutil';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  const playerRef = ref();
 
   const loading = ref(true);
   const monitorDataGroupFlag = ref(0);
@@ -195,22 +198,26 @@
   const sysStateList1 = ref<State[]>([]);
   let preFanMonitorData, preMonitorList, cqgMonitorList, totalData;
 
+  const { getCamera, removeCamera } = useCamera();
   /// forcFan_north 北风井  /// forcFan_south 南风井
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   async function getMonitor(flag?) {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = await setTimeout(
-        async () => {
-          await getDataSource();
-          if (timer) {
-            timer = null;
-          }
-          await getMonitor(false);
-        },
-        flag ? 0 : 1000
-      );
+      new Promise(async (resolve) => {
+        timer = await setTimeout(
+          async () => {
+            await getDataSource();
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor(false);
+          },
+          flag ? 0 : 1000
+        );
+      });
     }
   }
 
@@ -273,16 +280,19 @@
   }
 
   onMounted(async () => {
-    mountedThree(monitorDataGroupArr).then(async () => {
-      await getMonitor(true);
-      monitorDataGroupFlag.value = 1;
-      setMonitorGroupNum(1);
-      getMonitorPro(1);
+    mountedThree(monitorDataGroupArr).then(() => {
+      getMonitor(true).then(async () => {
+        if (monitorData.value && monitorData.value['deviceID']) await getCamera(monitorData.value['deviceID'], playerRef.value);
+        monitorDataGroupFlag.value = 1;
+        setMonitorGroupNum(1);
+        getMonitorPro(1);
+      });
     });
   });
 
   onUnmounted(() => {
     destroy();
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;

src/views/vent/monitorManager/nitrogen/nitrogen.data.1.ts

@@ -141,14 +141,23 @@ export function getMonitorData() {
         totalData: totalData_Ji,
       };
     default: //默认锦界
+      // return {
+      //   monitorDataGroupArr: monitorDataGroupArr_Bet,
+      //   preFanMonitorData: preFanMonitorData_Bet,
+      //   preMonitorList: preMonitorList_Bet,
+      //   cqgMonitorList: cqgMonitorList_Bet,
+      //   prefix: prefix_Bet,
+      //   getSysState: getSysState_Bet,
+      //   totalData: totalData_Bet,
+      // };
       return {
-        monitorDataGroupArr: monitorDataGroupArr_Bet,
-        preFanMonitorData: preFanMonitorData_Bet,
-        preMonitorList: preMonitorList_Bet,
-        cqgMonitorList: cqgMonitorList_Bet,
-        prefix: prefix_Bet,
-        getSysState: getSysState_Bet,
-        totalData: totalData_Bet,
+        monitorDataGroupArr: monitorDataGroupArr_Dlt,
+        preFanMonitorData: preFanMonitorData_Dlt,
+        preMonitorList: preMonitorList_Dlt,
+        cqgMonitorList: cqgMonitorList_Dlt,
+        prefix: prefix_Dlt,
+        getSysState: getSysState_Dlt,
+        totalData: totalData_Dlt,
       };
   }
 }

src/views/vent/monitorManager/nitrogen/nitrogen.threejs.ts

@@ -124,18 +124,14 @@ export const mountedThree = (monitorDataGroupArr) => {
     model.camera?.layers.enable(0);
     model.canvasContainer?.addEventListener('mousedown', mouseEvent);
     model.canvasContainer?.addEventListener('pointerup', mouseUp);
-    monitorDataGroupArr.forEach(async (monitorDataGroup, i) => {
+    for (let i = 0; i < monitorDataGroupArr.length; i++) {
+      const monitorDataGroup = monitorDataGroupArr[i];
       const compressorObj = new Nitrogen(model);
       await compressorObj.mountedThree(monitorDataGroup, '#compressorCss3D' + (i + 1));
       compressorObj.modelName = 'compressor' + (i + 1);
       compressorObjArr.push(compressorObj);
-      if (i == monitorDataGroupArr.length - 1) {
-        resolve(null);
-      }
-    });
-
-    // render();
-
+    }
+    resolve(null);
     model.animate();
   });
 };
@@ -146,6 +142,7 @@ export const destroy = () => {
     console.log('场景销毁前信息----------->', model.renderer?.info);
     compressorObjArr.forEach((compressorObj) => {
       compressorObj?.destroy();
+      compressorObj = undefined;
     });
     compressorObjArr.length = 0;
     group = undefined;

src/views/vent/monitorManager/obfurageMonitor/components/obfurageHome.vue

@@ -3,7 +3,7 @@
     <div class="monitor-container">
       <div class="lr left-box">
         <div class="warning-group">
-          <div class="fire-analysis1 ">
+          <div class="fire-analysis1">
             <div class="analysis-item warning3">
               <div class="title">火灾风险预警</div>
               <div class="value">高风险</div>
@@ -15,7 +15,7 @@
             </template>
             <template #container>
               <div class="monitor-box">
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>报警信息</span></div>
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon" /><span>报警信息</span></div>
                 <div class="item-group">
                   <div class="item-col">
                     <SvgIcon class="icon" size="24" name="alarm-fire" />
@@ -25,7 +25,7 @@
                   <div class="item-col">
                     <SvgIcon class="icon" size="24" name="alarm-smoke" />
                     <span class="title">烟雾传感器</span>
-                    <span class="value" style="color: #FF3823; font-weight: 600;">15</span>
+                    <span class="value" style="color: #ff3823; font-weight: 600">15</span>
                   </div>
                   <div class="item-col">
                     <SvgIcon class="icon" size="24" name="alarm-temperature" />
@@ -35,7 +35,7 @@
                 </div>
               </div>
               <div class="monitor-box">
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="warning-icon"/><span>预警信息</span></div>
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="warning-icon" /><span>预警信息</span></div>
                 <div class="item-group">
                   <div class="item-col">
                     <SvgIcon class="icon" size="22" name="warning-fire" />
@@ -45,7 +45,7 @@
                   <div class="item-col">
                     <SvgIcon class="icon" size="22" name="warning-smoke" />
                     <span class="title">烟雾传感器</span>
-                    <span class="value" style="color: #FF9B17; font-weight: 600;">15</span>
+                    <span class="value" style="color: #ff9b17; font-weight: 600">15</span>
                   </div>
                   <div class="item-col">
                     <SvgIcon class="icon" size="22" name="warning-temperature" />
@@ -70,7 +70,9 @@
             </template>
             <template #container>
               <div class="temperature-box">
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title"/><span>光纤测温系统</span></div>
+                <div class="parameter-title group-parameter-title"
+                  ><SvgIcon class="icon" size="14" name="fiber-title" /><span>光纤测温系统</span></div
+                >
                 <div class="temperature-group">
                   <div class="light-group">
                     <div class="light-bg"></div>
@@ -114,35 +116,37 @@
                 </div>
               </div>
               <div>
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="beamTube-title"/><span>束管监测系统</span></div>
+                <div class="parameter-title group-parameter-title"
+                  ><SvgIcon class="icon" size="14" name="beamTube-title" /><span>束管监测系统</span></div
+                >
                 <div class="state-item" v-for="(data, index) in beamTubeColumns" :key="index">
                   <div class="item-col">
                     <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                    <span class="state-val">{{ (bundleTubeDataSource[Object.keys(data)[0]])
-                      >= 0 ? bundleTubeDataSource[Object.keys(data)[0]] : '-' }}</span>
+                    <span class="state-val">{{
+                      bundleTubeDataSource[Object.keys(data)[0]] >= 0 ? bundleTubeDataSource[Object.keys(data)[0]] : '-'
+                    }}</span>
                   </div>
                   <div class="item-col" v-if="Object.keys(data)[1]">
                     <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                    <span class="state-val">{{ (bundleTubeDataSource[Object.keys(data)[1]])
-                      >= 0 ? bundleTubeDataSource[Object.keys(data)[1]] : '-' }}</span>
+                    <span class="state-val">{{
+                      bundleTubeDataSource[Object.keys(data)[1]] >= 0 ? bundleTubeDataSource[Object.keys(data)[1]] : '-'
+                    }}</span>
                   </div>
                 </div>
               </div>
               <div>
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title"/><span>注浆系统</span></div>
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title" /><span>注浆系统</span></div>
                 <div class="state-item" v-for="(data, index) in groutColumns" :key="index">
                   <div class="item-col">
                     <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                    <span class="state-val">{{ (pulpingDataSource[Object.keys(data)[0]])
-                      >= 0 ? pulpingDataSource[Object.keys(data)[0]] : '-' }}</span>
+                    <span class="state-val">{{ pulpingDataSource[Object.keys(data)[0]] >= 0 ? pulpingDataSource[Object.keys(data)[0]] : '-' }}</span>
                   </div>
                   <div class="item-col" v-if="Object.keys(data)[1]">
                     <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                    <span class="state-val">{{ (pulpingDataSource[Object.keys(data)[1]])
-                      >= 0 ? pulpingDataSource[Object.keys(data)[1]] : '-' }}</span>
+                    <span class="state-val">{{ pulpingDataSource[Object.keys(data)[1]] >= 0 ? pulpingDataSource[Object.keys(data)[1]] : '-' }}</span>
                   </div>
                 </div>
-                <div class="input-item vent-flex-row" style="margin-bottom: 15px;">
+                <div class="input-item vent-flex-row" style="margin-bottom: 15px">
                   <div>设备控制：</div>
                   <div class="vent-flex-row btn-box">
                     <div class="btn btn1">一键启动</div>
@@ -151,17 +155,19 @@
                 </div>
               </div>
               <div>
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="nitrogen-title"/><span>注氮系统</span></div>
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="nitrogen-title" /><span>注氮系统</span></div>
                 <div class="state-item" v-for="(data, index) in nitrogenColumns" :key="index">
                   <div class="item-col">
                     <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                    <span class="state-val">{{ (nitrogenDataSource[Object.keys(data)[0]])
-                      >= 0 ? nitrogenDataSource[Object.keys(data)[0]] : '-' }}</span>
+                    <span class="state-val">{{
+                      nitrogenDataSource[Object.keys(data)[0]] >= 0 ? nitrogenDataSource[Object.keys(data)[0]] : '-'
+                    }}</span>
                   </div>
                   <div class="item-col" v-if="Object.keys(data)[1]">
                     <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                    <span class="state-val">{{ (nitrogenDataSource[Object.keys(data)[1]])
-                      >= 0 ? nitrogenDataSource[Object.keys(data)[1]] : '-' }}</span>
+                    <span class="state-val">{{
+                      nitrogenDataSource[Object.keys(data)[1]] >= 0 ? nitrogenDataSource[Object.keys(data)[1]] : '-'
+                    }}</span>
                   </div>
                 </div>
                 <div class="input-item vent-flex-row">
@@ -174,7 +180,6 @@
               </div>
             </template>
           </ventBox1>
-          
         </div>
         <!-- <div class="item-box" >
           <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
@@ -182,430 +187,426 @@
       </div>
     </div>
   </a-spin>
-
 </template>
 
 <script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
+  // import MonitorTable from '../comment/MonitorTable.vue';
+  import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { mountedThree, destroy, addChamberText, setModelType } from '../obfurage.threejs';
+  import { SvgIcon } from '/@/components/Icon';
+  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
+  import { beamTubeColumns, groutColumns, nitrogenColumns } from '../obfurage.data';
+  import { list } from '../obfurage.api';
+  import LivePlayer from '@liveqing/liveplayer-v3';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
-// import MonitorTable from '../comment/MonitorTable.vue';
-import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { mountedThree, destroy, addChamberText, setModelType } from '../obfurage.threejs';
-import { SvgIcon } from '/@/components/Icon';
-import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
-import { beamTubeColumns, groutColumns, nitrogenColumns } from '../obfurage.data'
-import { list } from '../obfurage.api';
-import LivePlayer from '@liveqing/liveplayer-v3';
-
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
+  const loading = ref(false);
+
+  // 默认初始是第一行
+  const sprayDataSource = ref([]);
+  const bundleTubeDataSource = ref({});
+  const pulpingDataSource = ref([]);
+  const nitrogenDataSource = ref([]);
+  const fiberDataSource = ref([]);
+
+  // 监测数据
+  const selectData = reactive({});
+
+  const flvURL1 = () => {
+    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+    // return ''
+  };
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
   }
-})
-
-const loading = ref(false);
-
-// 默认初始是第一行
-const sprayDataSource = ref([]);
-const bundleTubeDataSource = ref({});
-const pulpingDataSource = ref([]);
-const nitrogenDataSource = ref([]);
-const fiberDataSource = ref([]);
-
-// 监测数据
-const selectData = reactive({});
-
-const flvURL1 = () => {
-  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-  // return ''
-};
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data); 
+
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID });
+    const result = res.msgTxt;
+
+    result.forEach((item) => {
+      if (item.type.startsWith('spray_auto')) {
+        // 喷淋
+        sprayDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      if (timer) {
-        timer = null;
+      if (item.type.startsWith('"bundletube_auto"')) {
+        // 束管
+        bundleTubeDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+      }
+      if (item.type === 'pulping_auto') {
+        // 注浆
+        pulpingDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+      }
+      if (item.type === 'nitrogen_auto') {
+        // 注氮
+        nitrogenDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+      }
+      if (item.type === 'fiber_normal') {
+        // 注氮
+        fiberDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
       }
-      await getMonitor();
-      loading.value = false
-    }, flag? 0 : 1000);
-  }
-};
-
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID });
-  const result = res.msgTxt;
 
-  result.forEach(item => {
+      if (item.type === 'sys') {
+        // 硐室基本
+        // fiberDataSource.value = item.filter((data: any) => {
+        //   const readData = data.readData;
+        //   return Object.assign(data, readData);
+        // })
+      }
+    });
+  }
 
-    if(item.type.startsWith('spray_auto')) {
-      // 喷淋
-      sprayDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type.startsWith('"bundletube_auto"')) {
-      // 束管
-      bundleTubeDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
-    }
-    if (item.type === 'pulping_auto') {
-      // 注浆
-      pulpingDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
-    }
-    if (item.type === 'nitrogen_auto') {
-      // 注氮
-      nitrogenDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
-    }
-    if (item.type === 'fiber_normal') {
-      // 注氮
-      fiberDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
-    }
+  // 喷粉操作
+  function handleDust() {
+    //
+  }
 
-    if (item.type === 'sys') {
-      // 硐室基本
-      // fiberDataSource.value = item.filter((data: any) => {
-      //   const readData = data.readData;
-      //   return Object.assign(data, readData);
-      // })
+  watch(
+    () => props.deviceId,
+    () => {
+      setModelType('obfurageBase');
+      loading.value = true;
     }
-  })
-}
+  );
 
-// 喷粉操作
-function handleDust() {
-  //
-}
+  onBeforeMount(() => {});
 
-watch(() => props.deviceId, () => {
-  setModelType('obfurageBase')
-  loading.value = true
-})
+  onMounted(() => {
+    loading.value = true;
 
-onBeforeMount(() => {
-
-});
-
-onMounted(() => {
-  loading.value = true;
-
-  // getMonitor(true)
-  mountedThree().then(async () => {
-    await setModelType('obfurage');
-    loading.value = false;
-    timer = null
-    await getMonitor(true)
+    // getMonitor(true)
+    mountedThree().then(async () => {
+      await setModelType('obfurage');
+      loading.value = false;
+      timer = null;
+      await getMonitor(true);
+    });
   });
-});
-
-onUnmounted(() => {
-  destroy();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
 
+  onUnmounted(() => {
+    destroy();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@import '../../comment/less/workFace.less';
-@ventSpace: zxm;
-
-.warning-group {
-  padding: 10px 0;
-}
-.monitor-box {
-  width: 100%;
-  margin-bottom: 20px;
-  .parameter-title{
-    position: relative;
-    width: 100%;
-    height: 16px;
-    margin-top: 10px;
-    margin-bottom: 5px;
-    .icon, span{
-      position: absolute;
-      top: -10px;
-    }
-  }
-  .group-parameter-title{
-    // background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
-    .icon{
-      left: -12px;
-      top: -20px;
-    }
-    span{
-      left: 24px;
-    }
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
+
+  .warning-group {
+    padding: 10px 0;
   }
-  .item-group{
-    display: flex;
-    flex-wrap: wrap;
-    .item-col{
-      width: calc(50% - 5px);
-      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
+  .monitor-box {
+    width: 100%;
+    margin-bottom: 20px;
+    .parameter-title {
       position: relative;
-      // display: flex;
-      // align-items: center;
-      &:nth-child(even){
-        margin-left: 10px;
+      width: 100%;
+      height: 16px;
+      margin-top: 10px;
+      margin-bottom: 5px;
+      .icon,
+      span {
+        position: absolute;
+        top: -10px;
       }
-      padding: 2px 0;
-      margin: 3px 0;
-      .title{
-        margin-left: 5px;
+    }
+    .group-parameter-title {
+      // background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+      .icon {
+        left: -12px;
+        top: -20px;
       }
-      .value{
-        position: absolute;
-        right: 10px;
-        top: 5px;
+      span {
+        left: 24px;
+      }
+    }
+    .item-group {
+      display: flex;
+      flex-wrap: wrap;
+      .item-col {
+        width: calc(50% - 5px);
+        background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+        position: relative;
+        // display: flex;
+        // align-items: center;
+        &:nth-child(even) {
+          margin-left: 10px;
+        }
+        padding: 2px 0;
+        margin: 3px 0;
+        .title {
+          margin-left: 5px;
+        }
+        .value {
+          position: absolute;
+          right: 10px;
+          top: 5px;
+        }
       }
     }
   }
-}
-.alarm-box{
-  margin-top: 10px;
-}
-
-
-// .monitor-container {
-//   width: 100%;
-//   height: 100%;
-//   // height: 550px;
-//   // border: 1px solid #fff;
-//   margin-top: 20px;
-//   padding-top: 20px;
-//   display: flex;
-//   justify-content: space-between;
-
-//   .lr {
-//     width: 350px;
-//     height: 100%;
-//     display: flex;
-//     flex-direction: column;
-//     margin-top: 10px;
-//     pointer-events: auto;
-
-//   }
-
-//   .right-box {
-//     width: 320px;
-//   }
-
-//   .left-box {
-//     margin-top: 30px;
-
-//     .monitor-info {
-//       .temperature-group {
-//         width: 100%;
-//         margin-top: 10px;
-//         .light-group{
-//           display: flex;
-//           flex-direction: row;
-//           justify-content: space-between;
-//           position: relative;
-//           .light-bg{
-//             width: 331px;
-//             height: 42px;
-//             background: url('/@/assets/images/vent/plane-bg.png') no-repeat;
-//             background-size: contain;
-//             position: absolute;
-//             z-index: -1;
-//             top: 44px;
-//           }
-//           .temperature-item {
-//             width: 120px;
-//             display: flex;
-//             flex-direction: column;
-//             justify-content: center;
-//             align-items: center;
-//             position: reactive;
-//             .icon {
-//               display: block;
-//               position: absolute;
-//               top: -5px;
-//             }
-
-//             .temperature {
-//               display: flex;
-//               flex-direction: column;
-//               justify-content: center;
-//               align-items: center;
-//               .temperature-icon{
-//                 width: 90px;
-//                 height: 58px;
-//                 background: url('/@/assets/images/vent/ligth-q.png');
-//               }
-//               .temperature-title{
-//                 position: relative;
-//                 top: -15px;
-//               }
-              
-//               .temperature-val-box{
-//                 display: flex;
-//                 flex-direction: column;
-//                 justify-content: center;
-//                 align-items: center;
-//                 position: relative;
-//                 top: -10px;
-//                 .temperature-val-icon{
-//                   width: 2px;
-//                   height: 18px;
-//                   background: #00d8ff;
-//                   position: relative;
-//                   &::after{
-//                     content: '';
-//                     display: block;
-//                     position: absolute;
-//                     width: 6px;
-//                     height: 6px;
-//                     border-radius: 3px;
-//                     background: #00d8ff;
-//                     bottom: -2px;
-//                     left: -2px;
-//                   }
-
-//                 }
-//                 .temperature-val{
-//                   position: relative;
-//                   font-family: 'douyuFont';
-//                   color: #20dbfd;
-//                   text-shadow: 0 0 25px #00d8ff;
-//                   font-size: 13px;
-//                   border: 1px solid #40B7F3;
-//                   padding: 5px 8px 2px 8px;
-//                   top: 2px;
-//                   &::after{
-//                     width: calc(100% - 4px);
-//                     height: calc(100% - 4px);
-//                     content: '';
-//                     position: absolute;
-//                     top: 2px;
-//                     left: 2px;
-//                     display: block;
-//                     border: 1px solid #006EA6;
-//                   }
-//                 }
-//               }
-              
-//             }
-//           }
-//         }
-
-        
-//       }
-
-//     }
-//     .warning-group {
-//       padding: 10px 0;
-//     }
-//     .monitor-box {
-//       width: 100%;
-//       margin-bottom: 20px;
-//       .parameter-title{
-//         position: relative;
-//         width: 100%;
-//         height: 16px;
-//         margin-top: 10px;
-//         margin-bottom: 5px;
-//         .icon, span{
-//           position: absolute;
-//           top: -10px;
-//         }
-//       }
-//       .group-parameter-title{
-//         background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
-        
-//         .icon{
-//           left: -12px;
-//           top: -20px;
-//         }
-//         span{
-//           left: 20px;
-//         }
-        
-//       }
-//       .item-group{
-//         display: flex;
-//         flex-wrap: wrap;
-//         .item-col{
-//           width: calc(50% - 5px);
-//           background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
-//           position: relative;
-//           // display: flex;
-//           // align-items: center;
-//           &:nth-child(even){
-//             margin-left: 10px;
-//           }
-//           padding: 2px 0;
-//           margin: 3px 0;
-//           .title{
-//             margin-left: 5px;
-//           }
-//           .value{
-//             position: absolute;
-//             right: 10px;
-//             top: 5px;
-//           }
-//         }
-//       }
-      
-      
-      
-//     }
-//     .alarm-box{
-//       margin-top: 10px;
-//     }
-//   }
-//   .box-title{
-//     color: #fff;
-//     margin-bottom: 8px;
-//     padding-left: 10px;
-//     position: relative;
-//     font-size: 16px;
-//     &::after{
-//       content: '';
-//       position: absolute;
-//       display: block;
-//       width: 4px;
-//       height: 12px;
-//       top: 7px;
-//       left: 0px;
-//       background: #45d3fd;
-//       border-radius: 4px;
-//     }
-//   }
-
-// }
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  overflow: auto;
-}
-
-// .input-box {
-//   display: flex;
-//   align-items: center;
-//   padding-left: 10px;
-
-//   .input-title {
-//     color: #73e8fe;
-//     width: auto;
-//   }
-
-//   .@{ventSpace}-input-number {
-//     border-color: #ffffff88 !important;
-//   }
-
-//   margin-right: 10px;
-// }
+  .alarm-box {
+    margin-top: 10px;
+  }
+
+  // .monitor-container {
+  //   width: 100%;
+  //   height: 100%;
+  //   // height: 550px;
+  //   // border: 1px solid #fff;
+  //   margin-top: 20px;
+  //   padding-top: 20px;
+  //   display: flex;
+  //   justify-content: space-between;
+
+  //   .lr {
+  //     width: 350px;
+  //     height: 100%;
+  //     display: flex;
+  //     flex-direction: column;
+  //     margin-top: 10px;
+  //     pointer-events: auto;
+
+  //   }
+
+  //   .right-box {
+  //     width: 320px;
+  //   }
+
+  //   .left-box {
+  //     margin-top: 30px;
+
+  //     .monitor-info {
+  //       .temperature-group {
+  //         width: 100%;
+  //         margin-top: 10px;
+  //         .light-group{
+  //           display: flex;
+  //           flex-direction: row;
+  //           justify-content: space-between;
+  //           position: relative;
+  //           .light-bg{
+  //             width: 331px;
+  //             height: 42px;
+  //             background: url('/@/assets/images/vent/plane-bg.png') no-repeat;
+  //             background-size: contain;
+  //             position: absolute;
+  //             z-index: -1;
+  //             top: 44px;
+  //           }
+  //           .temperature-item {
+  //             width: 120px;
+  //             display: flex;
+  //             flex-direction: column;
+  //             justify-content: center;
+  //             align-items: center;
+  //             position: reactive;
+  //             .icon {
+  //               display: block;
+  //               position: absolute;
+  //               top: -5px;
+  //             }
+
+  //             .temperature {
+  //               display: flex;
+  //               flex-direction: column;
+  //               justify-content: center;
+  //               align-items: center;
+  //               .temperature-icon{
+  //                 width: 90px;
+  //                 height: 58px;
+  //                 background: url('/@/assets/images/vent/ligth-q.png');
+  //               }
+  //               .temperature-title{
+  //                 position: relative;
+  //                 top: -15px;
+  //               }
+
+  //               .temperature-val-box{
+  //                 display: flex;
+  //                 flex-direction: column;
+  //                 justify-content: center;
+  //                 align-items: center;
+  //                 position: relative;
+  //                 top: -10px;
+  //                 .temperature-val-icon{
+  //                   width: 2px;
+  //                   height: 18px;
+  //                   background: #00d8ff;
+  //                   position: relative;
+  //                   &::after{
+  //                     content: '';
+  //                     display: block;
+  //                     position: absolute;
+  //                     width: 6px;
+  //                     height: 6px;
+  //                     border-radius: 3px;
+  //                     background: #00d8ff;
+  //                     bottom: -2px;
+  //                     left: -2px;
+  //                   }
+
+  //                 }
+  //                 .temperature-val{
+  //                   position: relative;
+  //                   font-family: 'douyuFont';
+  //                   color: #20dbfd;
+  //                   text-shadow: 0 0 25px #00d8ff;
+  //                   font-size: 13px;
+  //                   border: 1px solid #40B7F3;
+  //                   padding: 5px 8px 2px 8px;
+  //                   top: 2px;
+  //                   &::after{
+  //                     width: calc(100% - 4px);
+  //                     height: calc(100% - 4px);
+  //                     content: '';
+  //                     position: absolute;
+  //                     top: 2px;
+  //                     left: 2px;
+  //                     display: block;
+  //                     border: 1px solid #006EA6;
+  //                   }
+  //                 }
+  //               }
+
+  //             }
+  //           }
+  //         }
+
+  //       }
+
+  //     }
+  //     .warning-group {
+  //       padding: 10px 0;
+  //     }
+  //     .monitor-box {
+  //       width: 100%;
+  //       margin-bottom: 20px;
+  //       .parameter-title{
+  //         position: relative;
+  //         width: 100%;
+  //         height: 16px;
+  //         margin-top: 10px;
+  //         margin-bottom: 5px;
+  //         .icon, span{
+  //           position: absolute;
+  //           top: -10px;
+  //         }
+  //       }
+  //       .group-parameter-title{
+  //         background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+
+  //         .icon{
+  //           left: -12px;
+  //           top: -20px;
+  //         }
+  //         span{
+  //           left: 20px;
+  //         }
+
+  //       }
+  //       .item-group{
+  //         display: flex;
+  //         flex-wrap: wrap;
+  //         .item-col{
+  //           width: calc(50% - 5px);
+  //           background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
+  //           position: relative;
+  //           // display: flex;
+  //           // align-items: center;
+  //           &:nth-child(even){
+  //             margin-left: 10px;
+  //           }
+  //           padding: 2px 0;
+  //           margin: 3px 0;
+  //           .title{
+  //             margin-left: 5px;
+  //           }
+  //           .value{
+  //             position: absolute;
+  //             right: 10px;
+  //             top: 5px;
+  //           }
+  //         }
+  //       }
+
+  //     }
+  //     .alarm-box{
+  //       margin-top: 10px;
+  //     }
+  //   }
+  //   .box-title{
+  //     color: #fff;
+  //     margin-bottom: 8px;
+  //     padding-left: 10px;
+  //     position: relative;
+  //     font-size: 16px;
+  //     &::after{
+  //       content: '';
+  //       position: absolute;
+  //       display: block;
+  //       width: 4px;
+  //       height: 12px;
+  //       top: 7px;
+  //       left: 0px;
+  //       background: #45d3fd;
+  //       border-radius: 4px;
+  //     }
+  //   }
+
+  // }
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
+
+  // .input-box {
+  //   display: flex;
+  //   align-items: center;
+  //   padding-left: 10px;
+
+  //   .input-title {
+  //     color: #73e8fe;
+  //     width: auto;
+  //   }
+
+  //   .@{ventSpace}-input-number {
+  //     border-color: #ffffff88 !important;
+  //   }
 
+  //   margin-right: 10px;
+  // }
 </style>

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

@@ -204,7 +204,7 @@
     return `/video/window.mp4`;
   };
   const [regModal, { openModal }] = useModal();
-  const { getCamera, webRtcServer } = useCamera();
+  const { getCamera, removeCamera } = useCamera();
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
@@ -414,15 +414,11 @@
   });
   onUnmounted(() => {
     destroy();
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;
     }
-    if (webRtcServer && webRtcServer.length > 0) {
-      webRtcServer.forEach((item) => {
-        item.disconnect();
-      });
-    }
   });
 </script>
 <style lang="less" scoped>

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

@@ -260,7 +260,7 @@
 
   const [regModal, { openModal }] = useModal();
 
-  const { getCamera, webRtcServer } = useCamera();
+  const { getCamera, removeCamera } = useCamera();
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
     if (activeKeyVal == 1) {
@@ -742,16 +742,12 @@
   });
 
   onUnmounted(() => {
+    removeCamera();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;
     }
     destroy();
-    if (webRtcServer.length > 0) {
-      webRtcServer.forEach((item) => {
-        item.disconnect();
-      });
-    }
   });
 </script>
 <style scoped lang="less">

src/views/vent/monitorManager/workFaceMonitor/components/workFaceFireHome.vue

@@ -4,7 +4,7 @@
       <div class="lr left-box vent-margin-t-10">
         <div class="monitor-info item-box">
           <div class="fire-analysis">
-            <div class="analysis-item ">
+            <div class="analysis-item">
               <div class="title">内因火灾风险</div>
               <div class="value">低风险</div>
             </div>
@@ -12,14 +12,16 @@
               <div class="title">外因火灾风险</div>
               <div class="value">高风险</div>
             </div>
-          </div>          
+          </div>
           <ventBox1 class="vent-margin-t-20">
             <template #title>
               <div>胶运顺槽火灾分析与控制</div>
             </template>
             <template #container>
               <div class="temperature-box">
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title"/><span>光纤测温系统</span></div>
+                <div class="parameter-title group-parameter-title"
+                  ><SvgIcon class="icon" size="14" name="fiber-title" /><span>光纤测温系统</span></div
+                >
                 <div class="temperature-group">
                   <div class="light-group">
                     <div class="light-bg"></div>
@@ -57,20 +59,19 @@
                       </div>
                     </div>
                   </div>
-              
                 </div>
                 <div class="warning-state-detail">
                   最大值产生于 <span class="state-color">2013-05-24 15:52:42</span> 时刻 <span class="state-color">15212胶运顺槽600m</span> 处
                 </div>
               </div>
               <div class="CO-box">
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="CO-title"/><span>CO传感器</span></div>
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="CO-title" /><span>CO传感器</span></div>
                 <div class="co-param">
                   <div class="light-group">
                     <div class="param-item">
                       <div class="param">
                         <div class="param-icon">
-                          <SvgIcon class="icon" size="30" name="CO-aveg"/>
+                          <SvgIcon class="icon" size="30" name="CO-aveg" />
                           <div class="param-unit">平均(%)</div>
                         </div>
 
@@ -83,7 +84,7 @@
                     <div class="param-item">
                       <div class="param">
                         <div class="param-icon">
-                          <SvgIcon class="icon" size="30" name="CO-top"/>
+                          <SvgIcon class="icon" size="30" name="CO-top" />
                           <div class="param-unit">最高(%)</div>
                         </div>
                         <div class="param-val-box">
@@ -95,7 +96,7 @@
                     <div class="param-item">
                       <div class="param">
                         <div class="param-icon">
-                          <SvgIcon class="icon" size="30" name="CO-low"/>
+                          <SvgIcon class="icon" size="30" name="CO-low" />
                           <div class="param-unit">最低(%)</div>
                         </div>
                         <div class="param-val-box">
@@ -111,7 +112,7 @@
                 </div>
               </div>
               <div class="">
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="smoke-title"/><span>烟雾传感器</span></div>
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="smoke-title" /><span>烟雾传感器</span></div>
                 <div class="warning-container">
                   <div class="warning-item">
                     <SvgIcon class="icon" size="24" name="alarm-smoke" />报警
@@ -125,7 +126,9 @@
                 </div>
               </div>
               <div class="">
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="temperature-title"/><span>温度传感器</span></div>
+                <div class="parameter-title group-parameter-title"
+                  ><SvgIcon class="icon" size="14" name="temperature-title" /><span>温度传感器</span></div
+                >
                 <div class="warning-container">
                   <div class="warning-item">
                     <SvgIcon class="icon" size="24" name="alarm-smoke" />报警
@@ -150,7 +153,9 @@
             </template>
             <template #container>
               <div class="temperature-box">
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title"/><span>光纤测温系统</span></div>
+                <div class="parameter-title group-parameter-title"
+                  ><SvgIcon class="icon" size="14" name="fiber-title" /><span>光纤测温系统</span></div
+                >
                 <div class="temperature-group">
                   <div class="light-group">
                     <div class="light-bg"></div>
@@ -188,42 +193,43 @@
                       </div>
                     </div>
                   </div>
-            
                 </div>
                 <div class="warning-state-detail">
                   最大值产生于 <span class="state-color">2013-05-24 15:52:42</span> 时刻 <span class="state-color">15212胶运顺槽600m</span> 处
                 </div>
               </div>
               <div>
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="beamTube-title"/><span>束管监测系统</span></div>
+                <div class="parameter-title group-parameter-title"
+                  ><SvgIcon class="icon" size="14" name="beamTube-title" /><span>束管监测系统</span></div
+                >
                 <div class="state-item" v-for="(data, index) in beamTubeColumns" :key="index">
                   <div class="item-col">
                     <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                    <span class="state-val">{{ ( bundleTubeDataSource[Object.keys(data)[0]])
-                      >= 0 ? bundleTubeDataSource[Object.keys(data)[0]] : '-' }}</span>
+                    <span class="state-val">{{
+                      bundleTubeDataSource[Object.keys(data)[0]] >= 0 ? bundleTubeDataSource[Object.keys(data)[0]] : '-'
+                    }}</span>
                   </div>
                   <div class="item-col" v-if="Object.keys(data)[1]">
                     <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                    <span class="state-val">{{ (bundleTubeDataSource[Object.keys(data)[1]])
-                      >= 0 ? bundleTubeDataSource[Object.keys(data)[1]] : '-' }}</span>
+                    <span class="state-val">{{
+                      bundleTubeDataSource[Object.keys(data)[1]] >= 0 ? bundleTubeDataSource[Object.keys(data)[1]] : '-'
+                    }}</span>
                   </div>
                 </div>
               </div>
               <div>
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title"/><span>注浆系统</span></div>
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title" /><span>注浆系统</span></div>
                 <div class="state-item" v-for="(data, index) in groutColumns" :key="index">
                   <div class="item-col">
                     <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                    <span class="state-val">{{ (pulpingDataSource[Object.keys(data)[0]])
-                      >= 0 ? pulpingDataSource[Object.keys(data)[0]] : '-' }}</span>
+                    <span class="state-val">{{ pulpingDataSource[Object.keys(data)[0]] >= 0 ? pulpingDataSource[Object.keys(data)[0]] : '-' }}</span>
                   </div>
                   <div class="item-col" v-if="Object.keys(data)[1]">
                     <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                    <span class="state-val">{{ (pulpingDataSource[Object.keys(data)[1]])
-                      >= 0 ? pulpingDataSource[Object.keys(data)[1]] : '-' }}</span>
+                    <span class="state-val">{{ pulpingDataSource[Object.keys(data)[1]] >= 0 ? pulpingDataSource[Object.keys(data)[1]] : '-' }}</span>
                   </div>
                 </div>
-                <div class="input-item vent-flex-row" style="margin-bottom: 15px;">
+                <div class="input-item vent-flex-row" style="margin-bottom: 15px">
                   <div>设备控制：</div>
                   <div class="vent-flex-row btn-box">
                     <div class="btn btn1">一键启动</div>
@@ -232,17 +238,19 @@
                 </div>
               </div>
               <div>
-                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="nitrogen-title"/><span>注氮系统</span></div>
+                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="nitrogen-title" /><span>注氮系统</span></div>
                 <div class="state-item" v-for="(data, index) in nitrogenColumns" :key="index">
                   <div class="item-col">
                     <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                    <span class="state-val">{{ (nitrogenDataSource[Object.keys(data)[0]])
-                      >= 0 ? nitrogenDataSource[Object.keys(data)[0]] : '-' }}</span>
+                    <span class="state-val">{{
+                      nitrogenDataSource[Object.keys(data)[0]] >= 0 ? nitrogenDataSource[Object.keys(data)[0]] : '-'
+                    }}</span>
                   </div>
                   <div class="item-col" v-if="Object.keys(data)[1]">
                     <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                    <span class="state-val">{{ (nitrogenDataSource[Object.keys(data)[1]])
-                      >= 0 ? nitrogenDataSource[Object.keys(data)[1]] : '-' }}</span>
+                    <span class="state-val">{{
+                      nitrogenDataSource[Object.keys(data)[1]] >= 0 ? nitrogenDataSource[Object.keys(data)[1]] : '-'
+                    }}</span>
                   </div>
                 </div>
                 <div class="input-item vent-flex-row">
@@ -267,12 +275,18 @@
                   <div class="btn btn2">一键停止</div>
                 </div>
               </div>
-              <a-table :columns="sprayColumns" :data-source="sprayDataSource" :pagination="false" size="small" maxWidth="340"
-                :scroll="{ x: 'max-content', y: 100 }">
+              <a-table
+                :columns="sprayColumns"
+                :data-source="sprayDataSource"
+                :pagination="false"
+                size="small"
+                maxWidth="340"
+                :scroll="{ x: 'max-content', y: 100 }"
+              >
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.dataIndex === 'warnFlag'">
-                    <span v-if="record['warnFlag'] == '0'" style="color: #00ff00;">链接</span>
-                    <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
+                    <span v-if="record['warnFlag'] == '0'" style="color: #00ff00">链接</span>
+                    <span v-else style="color: #ff0000"> {{ record.warnDes }}</span>
                   </template>
                   <template v-if="column.dataIndex === 'action'">
                     <a-switch v-model:checked="openDust" @change="handleSpray" />
@@ -280,182 +294,176 @@
                 </template>
               </a-table>
             </template>
-          </ventBox1>  
+          </ventBox1>
         </div>
       </div>
     </div>
   </a-spin>
-  
 </template>
 
 <script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
+  import { list } from '../workFace.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { BarsOutlined } from '@ant-design/icons-vue';
+  import { beamTubeColumns, groutColumns, nitrogenColumns, sprayColumns } from '../workFace.data';
+  import { SvgIcon } from '/@/components/Icon';
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
-import { list } from '../workFace.api';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { BarsOutlined } from '@ant-design/icons-vue';
-import { beamTubeColumns, groutColumns, nitrogenColumns, sprayColumns } from '../workFace.data'
-import { SvgIcon } from '/@/components/Icon';
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
 
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
-  }
-})
+  const loading = ref(false);
 
-const loading = ref(false)
+  // 默认初始是第一行
+  const openDust = ref(false);
+  const workFaceSource = ref({});
+  const workFaceHistorySource = ref([]);
+  const sprayDataSource = ref([]);
+  const bundleTubeDataSource = ref({});
+  const pulpingDataSource = ref([]);
+  const nitrogenDataSource = ref([]);
+  const temperatureDataSource = ref([]);
+  const fireDataSource = ref([]);
 
-// 默认初始是第一行
-const openDust = ref(false)
-const workFaceSource = ref({});
-const workFaceHistorySource = ref([])
-const sprayDataSource = ref([]);
-const bundleTubeDataSource = ref({});
-const pulpingDataSource = ref([]);
-const nitrogenDataSource = ref([]);
-const temperatureDataSource = ref([]);
-const fireDataSource = ref([]);
+  // 监测数据
+  const selectData = reactive({});
 
-// 监测数据
-const selectData = reactive({});
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'fireS' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      if (item.type.startsWith('spray_auto')) {
+        // 喷淋
+        sprayDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      if (timer) {
-        timer = null;
+      if (item.type.startsWith('bundletube')) {
+        // 束管
+        bundleTubeDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+      }
+      if (item.type === 'pulping_auto') {
+        // 注浆
+        pulpingDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+      }
+      if (item.type === 'nitrogen_auto') {
+        // 注氮
+        nitrogenDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
       }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 :1000);
-  }
-};
-
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID, type: 'fireS' });
-  const result = res.deviceInfo;
-  for (const key in result) {
-    const item = result[key]
-    if (item.type.startsWith('spray_auto')) {
-      // 喷淋
-      sprayDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type.startsWith('bundletube')) {
-      // 束管
-      bundleTubeDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
-    }
-    if (item.type === 'pulping_auto') {
-      // 注浆
-      pulpingDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
-    }
-    if (item.type === 'nitrogen_auto') {
-      // 注氮
-      nitrogenDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
     }
-    
+    loading.value = false;
+    workFaceHistorySource.value = res['sysInfo']['history'];
+    workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
   }
-  loading.value = false;
-  workFaceHistorySource.value = res['sysInfo']['history']
-  workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
-}
-
-function toDetail() {
-  
-}
 
-function changeType(e:Event, item) {
-  item.value = e.target?.value
-}
+  function toDetail() {}
 
-function handlerDevice(param: string | Object) {
-
-}
-// 喷粉操作
-function handleSpray() {
-  //
-}
+  function changeType(e: Event, item) {
+    item.value = e.target?.value;
+  }
 
-onBeforeMount(() => {
+  function handlerDevice(param: string | Object) {}
+  // 喷粉操作
+  function handleSpray() {
+    //
+  }
 
-});
+  onBeforeMount(() => {});
 
-onMounted(async() => {
-  loading.value = true;
-  timer = null
-  await getMonitor(true)
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@import '../../comment/less/workFace.less';
-@ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
 
-.fire-analysis{
-  display: flex;
-  justify-content: space-between;
-  .analysis-item{
-    width: 154px;
-    height: 104px;
-    text-align: center;
-    background: url('/@/assets/images/vent/alarm/1.png');
-    color: #ffffffdd;
-    margin: 0 4px;
-    .title{
-      margin-top: 46px;
+  .fire-analysis {
+    display: flex;
+    justify-content: space-between;
+    .analysis-item {
+      width: 154px;
+      height: 104px;
+      text-align: center;
+      background: url('/@/assets/images/vent/alarm/1.png');
+      color: #ffffffdd;
+      margin: 0 4px;
+      .title {
+        margin-top: 46px;
+      }
+      .value {
+        margin-top: 7px;
+      }
     }
-    .value{
-      margin-top: 7px;
+    .warning1 {
+      background: url('/@/assets/images/vent/alarm/2.png');
+    }
+    .warning2 {
+      background: url('/@/assets/images/vent/alarm/3.png');
+    }
+    .warning3 {
+      background: url('/@/assets/images/vent/alarm/4.png');
     }
   }
-  .warning1{
-    background: url('/@/assets/images/vent/alarm/2.png');
-  }
-  .warning2{
-    background: url('/@/assets/images/vent/alarm/3.png');
-  }
-  .warning3{
-    background: url('/@/assets/images/vent/alarm/4.png');
-  }
-}
-.warning-container{
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 0;
-  .warning-item{
+  .warning-container {
+    width: 100%;
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    .icon{
-      margin-right: 5px;
-    }
-    .num{
-      margin-left: 14px;
+    padding: 10px 0;
+    .warning-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .icon {
+        margin-right: 5px;
+      }
+      .num {
+        margin-left: 14px;
+      }
     }
-  }
-  .detail{
-    align-self: flex-end;
-    color: #1bf5fd;
-    cursor: pointer;
-    &:hover{
-      color: #1bf5fddd;
+    .detail {
+      align-self: flex-end;
+      color: #1bf5fd;
+      cursor: pointer;
+      &:hover {
+        color: #1bf5fddd;
+      }
     }
   }
-}
 </style>