瓦斯抽采泵模型上增加各种阀门的开关状态标签

src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHome.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="monitor-container">
     <div id="FlowSensor" class="FlowSensor-box" style="position: absolute; display: none">
-      <div class="elementContent" v-if="selectData['deviceType'].startsWith('pump_under') || selectData['deviceType'] == 'pump_n12m2pq'">
+      <!-- <div class="elementContent" v-if="selectData['deviceType'].startsWith('pump_under') || selectData['deviceType'] == 'pump_n12m2pq'">
         <fourBorderBg>
           <template v-for="(item, index) in modelMonitor" :key="index">
             <div class="gas-monitor-row">
@@ -10,7 +10,13 @@
             </div>
           </template>
         </fourBorderBg>
-        <!-- <p style="color: #50c8fc;"><span class="data-title">抽采泵流量(m³)：</span>{{ formatNum(selectData.FlowSensor_InputFlux) }}</p> -->
+      </div> -->
+    </div>
+    <!-- 布尔台新瓦斯泵模型上的数据 -->
+    <div class="elementContent" style="position: absolute; display: none">
+      <div v-for="(tag, index) in modelMonitorTags" :key="index" :id="tag.domId" class="modal-monitor-box">
+        <div class="title">{{ tag.title }}</div
+        ><div class="signal-round" :class="{ 'signal-round-gry': tag.value != 1, 'signal-round-run': tag.value == 1 }"></div>
       </div>
     </div>
     <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
@@ -218,6 +224,7 @@
     waterPumpData,
     dewateringPumpData,
     modelMonitor,
+    modelMonitorTags,
     valveCtrlType,
   } from '../gasPump.data';
   import { list } from '../gasPump.api';
@@ -449,7 +456,17 @@
       }
     }
   }
-
+  .modal-monitor-box {
+    background-color: #000;
+    color: #fff;
+    padding: 0 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .signal-round {
+      margin-left: 5px;
+    }
+  }
   .device-state {
     width: 100%;
     position: absolute;

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.ts

@@ -293,6 +293,65 @@ export const modelMonitor = [
   },
 ];
 
+export const modelMonitorTags = [
+  {
+    domId: 'jsf1',
+    title: '进水阀1#',
+    code: '',
+    value: '0',
+    position: [-5.26, 0.19, 0.6],
+  },
+  {
+    domId: 'jsf2',
+    title: '进水阀2#',
+    code: '',
+    value: '0',
+    position: [-8.72, 0.29, 0.6],
+  },
+  {
+    domId: 'csf1',
+    title: '出水阀1#',
+    code: '',
+    value: '0',
+    position: [-5.74, 0.38, 0.27],
+  },
+  {
+    domId: 'csf2',
+    title: '出水阀2#',
+    code: '',
+    value: '0',
+    position: [-9.42, 0.38, 0.3],
+  },
+  {
+    domId: 'jqf1',
+    title: '进气阀1#',
+    code: '',
+    value: '0',
+    position: [-4.41, 1.46, -0.03],
+  },
+  {
+    domId: 'jqf2',
+    title: '进气阀2#',
+    code: '',
+    value: '0',
+    position: [-7.7, 1.31, -0.14],
+  },
+  {
+    domId: 'cqf1',
+    title: '出气阀1#',
+    code: '',
+    value: '0',
+    position: [-6.2, 1.55, 0.06],
+  },
+  {
+    domId: 'cqf2',
+    title: '出气阀2#',
+    code: '',
+    value: '0',
+    position: [-9.58, 1.55, -0.13],
+  },
+];
+
 export function getComponent() {
   const { sysOrgCode } = useGlobSetting();
   let gasPumpHome;
@@ -301,7 +360,7 @@ export function getComponent() {
       gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHome.vue'));
       return gasPumpHome;
     default:
-      gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeCC.vue'));
+      gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHome.vue'));
       return gasPumpHome;
   }
 }

src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.under.ts

@@ -1,13 +1,10 @@
 import * as THREE from 'three';
-import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-// import * as dat from 'dat.gui';
-// const gui = new dat.GUI();
-// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+import { CSS3DObject, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import { modelMonitorTags } from './gasPump.data';
 
 class gasPumpUnder {
   model;
   modelName = 'gas-pump-underground';
-  // modelName = 'gasPumpUnder';gas-pump-underground
   group: THREE.Object3D | null = null;
 
   constructor(model) {
@@ -19,34 +16,39 @@ class gasPumpUnder {
     directionalLight.position.set(-48, 107, 36);
     this.group?.add(directionalLight);
     directionalLight.target = this.group as THREE.Object3D;
-
-    // gui.add(directionalLight.position, 'x', -500, 800);
-    // gui.add(directionalLight.position, 'y', -500, 800);
-    // gui.add(directionalLight.position, 'z', -500, 800);
-
-    // const pointLight2 = new THREE.PointLight(0xffffff, 2, 500);
-    // pointLight2.position.set(-113, 29, 10);
-    // // light2.castShadow = true
-    // pointLight2.shadow.bias = -0.05;
-    // this.group?.add(pointLight2);
-
-    // gui.add(pointLight2.position, 'x', -500, 500);
-    // gui.add(pointLight2.position, 'y', -500, 500);
-    // gui.add(pointLight2.position, 'z', -500, 500);
   }
 
+  // addCssText = () => {
+  //   if (!this.group) return;
+  //   if (!this.group.getObjectByName('text1')) {
+  //     const element = document.getElementById('FlowSensor') as HTMLElement;
+  //     if (element) {
+  //       const parentElement = document.getElementById('gas3DCSS') as HTMLElement;
+  //       parentElement.appendChild(element);
+  //       const fanLocalCSS3D = new CSS3DObject(element);
+  //       fanLocalCSS3D.name = 'text1';
+  //       fanLocalCSS3D.scale.set(0.007, 0.007, 0.007);
+  //       fanLocalCSS3D.position.set(0, 1.6, 0);
+  //       this.group.add(fanLocalCSS3D);
+  //     }
+  //   }
+  // };
+
   addCssText = () => {
     if (!this.group) return;
-    if (!this.group.getObjectByName('text1')) {
-      const element = document.getElementById('FlowSensor') as HTMLElement;
-      if (element) {
-        const parentElement = document.getElementById('gas3DCSS') as HTMLElement;
-        parentElement.appendChild(element);
-        const fanLocalCSS3D = new CSS3DObject(element);
-        fanLocalCSS3D.name = 'text1';
-        fanLocalCSS3D.scale.set(0.007, 0.007, 0.007);
-        fanLocalCSS3D.position.set(0, 1.6, 0);
-        this.group.add(fanLocalCSS3D);
+    const parentElement = document.getElementById('gas3DCSS') as HTMLElement;
+    for (let i = 0; i < modelMonitorTags.length; i++) {
+      const tag = modelMonitorTags[i];
+      if (!this.group.getObjectByName(tag.domId)) {
+        const element = document.getElementById(tag.domId) as HTMLElement;
+        if (element) {
+          parentElement.appendChild(element);
+          const fanLocalCSS3D = new CSS3DSprite(element);
+          fanLocalCSS3D.name = tag.domId;
+          fanLocalCSS3D.scale.set(0.009, 0.009, 0.009);
+          fanLocalCSS3D.position.set(tag.position[0], tag.position[1], tag.position[2]);
+          this.group.add(fanLocalCSS3D);
+        }
       }
     }
   };

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

@@ -2,12 +2,12 @@
   <div class="bg"
     style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
+    <div id="gasPump3D" v-show="activeKey == 'monitor'"
+      style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <div id="gas3DCSS"
       v-show="activeKey == 'monitor' && !loading && (currentDeviceType.startsWith('pump_under') || currentDeviceType == 'pump_n12m2pq')"
-      style="width: 100%; height: 100%; top: 0; left: 0; position: absolute; overflow: hidden">
+      style="width: 100%; height: 100%; top: 0; left: 0; position: absolute; overflow: hidden; pointer-events: none;">
     </div>
-    <div id="gasPump3D" v-show="activeKey == 'monitor'"
-      style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
   </div>
   <div class="scene-box">
     <customHeader :fieldNames="{ label: 'strinstallpos', value: 'deviceID', options: 'children' }" :options="options"