三道风门动画风门

src/views/vent/monitorManager/gateMonitor/gate.threejs.qd.ts

@@ -523,7 +523,7 @@ class Fm3 {
         this.addLight();
         // this.deviceDetailCard();
         this.model.animate();
- 
+
         this.backDamperOpenMesh = this.group.getObjectByName('Dampler_open_1');
         if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
         this.backDamperClosedMesh = this.group.getObjectByName('Damper_Closed_1');

src/views/vent/monitorManager/gateMonitor/gate.threejs.three.ts

@@ -362,6 +362,29 @@ class Fm2 {
             this.fmClock.start();
           };
           break;
+
+        case 8: // 打开后门
+          handler = () => {
+            this.clipActionArr.centerDoor.paused = true;
+            this.clipActionArr.centerDoor.reset();
+            this.clipActionArr.centerDoor.time = 1.2;
+            this.clipActionArr.centerDoor.timeScale = timeScale;
+            this.clipActionArr.centerDoor.clampWhenFinished = true;
+            this.clipActionArr.centerDoor.play();
+            this.fmClock.start();
+          };
+          break;
+        case 9: // 关闭后门
+          handler = () => {
+            this.clipActionArr.centerDoor.paused = true;
+            this.clipActionArr.centerDoor.reset();
+            this.clipActionArr.centerDoor.time = 4;
+            this.clipActionArr.centerDoor.timeScale = -timeScale;
+            this.clipActionArr.centerDoor.clampWhenFinished = true;
+            this.clipActionArr.centerDoor.play();
+            this.fmClock.start();
+          };
+          break;
         // case 5: // 打开前后门
         //   handler = () => {
         //     this.clipActionArr.backDoor.paused = true;

src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -4,6 +4,7 @@ import Fm1 from './gate.threejs.yy';
 import Fm3 from './gate.threejs.qd';
 import FmXR from './gate.threejs.xr';
 import Fm2 from './gate.threejs.three';
+import FmTwoSs from './gate.threejs.two.ss';
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
 
@@ -13,6 +14,7 @@ let model,
   fm2: Fm2,
   fm3: Fm3,
   fmXr: FmXR,
+  fmTwoSs: FmTwoSs,
   group: THREE.Object3D,
   fmType = '';
 
@@ -33,6 +35,8 @@ const startAnimation = () => {
       fm3.mouseUpModel.call(fm3);
     } else if (fmType === 'fmXr') {
       fmXr.mouseUpModel.call(fmXr);
+    } else if (fmType === 'fmTwoSs') {
+      fmTwoSs.mouseUpModel.call(fmTwoSs);
     }
   });
 };
@@ -49,6 +53,8 @@ const mouseEvent = (event) => {
         fm3.mousedownModel.call(fm3, intersects);
       } else if (fmType === 'fmXr' && fmXr) {
         fmXr.mousedownModel.call(fmXr, intersects);
+      } else if (fmType === 'fmTwoSs' && fmTwoSs) {
+        fmTwoSs.mousedownModel.call(fmTwoSs, intersects);
       }
     });
     // console.log('摄像头控制信息', model.orbitControls, model.camera);
@@ -64,6 +70,8 @@ export const addMonitorText = (selectData) => {
     return fm3.addMonitorText.call(fm3, selectData);
   } else if (fmType === 'fmXr' && fmXr) {
     return fmXr.addMonitorText.call(fmXr, selectData);
+  } else if (fmType === 'fmTwoSs' && fmTwoSs) {
+    return fmTwoSs.addMonitorText.call(fmTwoSs, selectData);
   }
 };
 
@@ -88,6 +96,8 @@ export const play = (handlerState, flag?) => {
     return fm3.play.call(fm3, handlerState, flag);
   } else if (fmType === 'fmXr' && fmXr) {
     return fmXr.play.call(fmXr, handlerState, flag);
+  } else if (fmType === 'fmTwoSs' && fmTwoSs) {
+    return fmTwoSs.play.call(fmTwoSs, handlerState, flag);
   }
 };
 
@@ -123,6 +133,9 @@ export const setModelType = (type) => {
       if (model.scene.getObjectByName('fmXr')) {
         model.scene.remove(fmXr.group);
       }
+      if (model.scene.getObjectByName('fmTwoSs')) {
+        model.scene.remove(fmTwoSs.group);
+      }
       const oldCameraPosition = { x: -1000, y: 100, z: 500 };
       setTimeout(async () => {
         resolve(null);
@@ -161,6 +174,9 @@ export const setModelType = (type) => {
       if (model.scene.getObjectByName('fmXr')) {
         model.scene.remove(fmXr.group);
       }
+      if (model.scene.getObjectByName('fmTwoSs')) {
+        model.scene.remove(fmTwoSs.group);
+      }
       const oldCameraPosition = { x: -761, y: 569, z: 871 };
       setTimeout(async () => {
         resolve(null);
@@ -202,6 +218,9 @@ export const setModelType = (type) => {
       if (model.scene.getObjectByName('fmXr')) {
         model.scene.remove(fmXr.group);
       }
+      if (model.scene.getObjectByName('fmTwoSs')) {
+        model.scene.remove(fmTwoSs.group);
+      }
       const oldCameraPosition = { x: -1000, y: 100, z: 500 };
       setTimeout(async () => {
         resolve(null);
@@ -242,6 +261,9 @@ export const setModelType = (type) => {
       if (model.scene.getObjectByName('fm3')) {
         model.scene.remove(fm3.group);
       }
+      if (model.scene.getObjectByName('fmTwoSs')) {
+        model.scene.remove(fmTwoSs.group);
+      }
       const oldCameraPosition = { x: -1000, y: 100, z: 500 };
       setTimeout(async () => {
         resolve(null);
@@ -255,6 +277,49 @@ export const setModelType = (type) => {
           0.8
         );
       }, 300);
+    } else if (fmType === 'fmTwoSs' && fmTwoSs && fmTwoSs.group) {
+      if (fmTwoSs.clipActionArr.frontDoor && fmTwoSs.clipActionArr.backDoor) {
+        fmTwoSs.clipActionArr.frontDoor.reset();
+        fmTwoSs.clipActionArr.frontDoor.time = 0.5;
+        fmTwoSs.clipActionArr.backDoor.reset();
+        fmTwoSs.clipActionArr.backDoor.time = 0.5;
+        fmTwoSs.clipActionArr.frontDoor.stop();
+        fmTwoSs.clipActionArr.backDoor.stop();
+      }
+
+      if (fmTwoSs.frontDamperOpenMesh) fmTwoSs.frontDamperOpenMesh.visible = false;
+      if (fmTwoSs.frontDamperClosedMesh) fmTwoSs.frontDamperClosedMesh.visible = true;
+      if (fmTwoSs.backDamperOpenMesh) fmTwoSs.backDamperOpenMesh.visible = false;
+      if (fmTwoSs.backDamperClosedMesh) fmTwoSs.backDamperClosedMesh.visible = true;
+
+      model.startAnimation = fmTwoSs.render.bind(fmTwoSs);
+      group = fmTwoSs.group;
+      group.rotation.y = 0;
+      if (model.scene.getObjectByName('fm2')) {
+        model.scene.remove(fm2.group);
+      }
+      if (model.scene.getObjectByName('fm1')) {
+        model.scene.remove(fm1.group);
+      }
+      if (model.scene.getObjectByName('fm3')) {
+        model.scene.remove(fm3.group);
+      }
+      if (model.scene.getObjectByName('fmXr')) {
+        model.scene.remove(fmXr.group);
+      }
+      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
+      setTimeout(async () => {
+        resolve(null);
+        model.scene.add(fmTwoSs.group);
+        await animateCamera(
+          oldCameraPosition,
+          { x: 0, y: 0, z: 0 },
+          { x: 50.99, y: 69.32, z: 93.61 },
+          { x: -10.04, y: -14.38, z: -31.4 },
+          model,
+          0.8
+        );
+      }, 300);
     }
   });
 };
@@ -287,6 +352,8 @@ export const mountedThree = (playerDom) => {
     fm3.mountedThree(playerDom);
     fmXr = new FmXR(model);
     fmXr.mountedThree(playerDom);
+    fmTwoSs = new FmTwoSs(model);
+    fmTwoSs.mountedThree(playerDom);
     model.animate();
     startAnimation();
   });
@@ -299,10 +366,12 @@ export const destroy = () => {
     if (fm2) fm2.destroy();
     if (fm3) fm3.destroy();
     if (fmXr) fmXr.destroy();
+    if (fmTwoSs) fmTwoSs.destroy();
     fm1 = null;
     fm2 = null;
     fm3 = null;
     fmXr = null;
+    fmTwoSs = null;
     group = null;
     model.mixers = [];
     model.destroy();

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

@@ -25,10 +25,12 @@
       <div class="top-center row">
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(1)">打开前门</div>
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(2)">关闭前门</div>
+        <div v-if="hasPermission('btn:control') && selectData.deviceType == 'gate_ss'" class="button-box" @click="playAnimation(8)">打开中间门</div>
+        <div v-if="hasPermission('btn:control') && selectData.deviceType == 'gate_ss'" class="button-box" @click="playAnimation(9)">关闭中间门</div>
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(3)">打开后门</div>
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(4)">关闭后门</div>
-        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(5)">同时打开</div>
-        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(6)">同时关闭</div>
+        <div v-if="hasPermission('btn:control') && selectData.deviceType != 'gate_ss'" class="button-box" @click="playAnimation(5)">同时打开</div>
+        <div v-if="hasPermission('btn:control') && selectData.deviceType != 'gate_ss'" class="button-box" @click="playAnimation(6)">同时关闭</div>
       </div>
       <div class="top-right row" v-if="hasPermission('btn:remote')">
         <div class="control-type row">
@@ -86,8 +88,17 @@
                 <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == '0'" color="#46C66F"
                   >打开</a-tag
                 >
+                <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
+                  >正在运行</a-tag
+                >
+                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
+                  >关闭</a-tag
+                >
+                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == 1 && record.midGateClose == '0'" color="#46C66F"
+                  >打开</a-tag
+                >
                 <template v-if="column.dataIndex === 'ndoortype'">
-                  <span v-if="record.ndoortype == 0">气动风门</span>
+                  <span v-if="record.ndoortype == '0'">气动风门</span>
                   <span v-else color="default">液压风门</span>
                 </template>
                 <template v-if="column.dataIndex === 'doorUse'">
@@ -104,8 +115,8 @@
                   <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
                   <a-tag v-else color="green">正常</a-tag>
                 </template>
-                <a-tag v-else-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
-                  record.warnFlag == 0 ? '正常' : '报警'
+                <a-tag v-else-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
+                  record.warnFlag == '0' ? '正常' : '报警'
                 }}</a-tag>
                 <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                   record.netStatus == '0' ? '断开' : '连接'
@@ -216,6 +227,7 @@
 
   const frontDoorIsOpen = ref(false); //前门是否开启
   const backDoorIsOpen = ref(false); //后门是否开启
+  const midDoorIsOpen = ref(false); //中间门是否开启
 
   const modalIsShow = ref<boolean>(false); // 是否显示模态框
   const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
@@ -251,6 +263,8 @@
     frontGateClose: '1',
     rearGateOpen: '0',
     rearGateClose: '1',
+    midGateOpen: '0',
+    midGateClose: '1',
     fault: '气源压力超限',
     masterComputer: 0,
     frontGateOpenCtrl: false,
@@ -324,11 +338,11 @@
     const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
     Object.assign(selectData, initData, selectRow, baseData);
     isFrontOpenRunning = false; //开关门动作是否在进行
-    isFrontCloseRunning = false; //开关门动作是否在进行
     isRearOpenRunning = false; //开关门动作是否在进行
-    isRearCloseRunning = false; //开关门动作是否在进行
+    isMidOpenRunning = false; //开关门动作是否在进行
     frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
     rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+    midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
     // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
     let type;
     if (selectData['doorUse'] == 2) {
@@ -338,6 +352,8 @@
         type = 'fm2';
       } else if (selectData.deviceType == 'gate_qd') {
         type = 'fm3';
+      } else if (selectData.deviceType == 'gate_ss_two') {
+        type = 'fmTwoSs';
       } else {
         type = 'fm1'; // 液压
       }
@@ -389,6 +405,24 @@
           message.warning('后门已经关闭或正在关闭,请勿重新操作');
         }
         break;
+      case 8: // 打开中间门
+        if (selectData.midGateOpen == '0' && selectData.midGateClose == '1') {
+          modalTitle.value = '打开中间门';
+          modalType.value = '8';
+          modalIsShow.value = true;
+        } else {
+          message.warning('后门已经打开或正在打开,请勿重新操作');
+        }
+        break;
+      case 9: // 关闭中间门
+        if (selectData.midGateOpen == '1' && selectData.midGateClose == '0') {
+          modalTitle.value = '关闭中间门';
+          modalType.value = '9';
+          modalIsShow.value = true;
+        } else {
+          message.warning('后门已经关闭或正在关闭,请勿重新操作');
+        }
+        break;
       case 5: // 打开前后门
         if (
           selectData.frontGateOpen == '0' &&
@@ -436,11 +470,11 @@
     //   return;
     // }
 
-    if ((isFrontOpenRunning || isFrontCloseRunning) && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
+    if (isOpenRunning && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
       return;
     }
 
-    if ((isRearOpenRunning || isRearCloseRunning) && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
+    if (isOpenRunning && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
       return;
     }
 
@@ -487,6 +521,22 @@
           data.paramcode = 'rearGateClose_S';
         }
         break;
+      case '8': // 打开中间门
+        if (selectData.midGateOpen == '0' && selectData.midGateClose == '1') {
+          handler = () => {
+            midDoorIsOpen.value = true;
+          };
+          data.paramcode = 'midGateOpen_S';
+        }
+        break;
+      case '9': // 关闭中间门
+        if (selectData.midGateOpen == '1' && selectData.midGateClose == '0') {
+          handler = () => {
+            midDoorIsOpen.value = false;
+          };
+          data.paramcode = 'midGateClose_S';
+        }
+        break;
       case '5': // 打开前后门
         if (
           selectData.frontGateOpen == '0' &&
@@ -534,18 +584,21 @@
       });
     }
   }
-
+  let isOpenRunning = false; //开关门动作是否在进行
   /** 开关门动画调用 */
   let isFrontOpenRunning = false; //开关门动作是否在进行
-  let isFrontCloseRunning = false; //开关门动作是否在进行
+  // let isFrontCloseRunning = false; //开关门动作是否在进行
   let isRearOpenRunning = false; //开关门动作是否在进行
-  let isRearCloseRunning = false; //开关门动作是否在进行
+  // let isRearCloseRunning = false; //开关门动作是否在进行
+  let isMidOpenRunning = false; //中间门动作是否在进行
+  // let isMidCloseRunning = false; //中间门动作是否在进行
   let frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
   let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+  let midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
   function monitorAnimation(selectData) {
     const timeScale = 0.003;
 
-    // if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
+    // if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0') {
     //   //正在运行
     //   // if (!isFrontOpenRunning) {
     //   //   frontDoorIsOpen.value = true;
@@ -555,9 +608,17 @@
     //   //   frontDeviceState = 1;
     //   // }
     // }
-
-    if (selectData.frontGateOpen == 1 && selectData.frontGateClose == 0) {
-      isFrontOpenRunning = false;
+    if (
+      (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0') ||
+      (selectData.rearGateOpen == '0' && selectData.rearGateClose == '0') ||
+      (selectData.midGateOpen == '0' && selectData.rearGateClose == '0')
+    ) {
+      isOpenRunning = true;
+    } else {
+      isOpenRunning = false;
+    }
+    if (selectData.frontGateOpen == 1 && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
+      isFrontOpenRunning = true;
       if (frontDeviceState != 1) {
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
         play(1, timeScale);
@@ -566,8 +627,8 @@
         backDoorIsOpen.value = true;
       }
     }
-    if (selectData.frontGateClose == 1 && selectData.frontGateOpen == 0) {
-      isFrontCloseRunning = false;
+    if (selectData.frontGateClose == 1 && selectData.frontGateOpen == '0' && isFrontOpenRunning) {
+      isFrontOpenRunning = false;
       if (frontDeviceState != 2) {
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
         play(2, timeScale);
@@ -576,8 +637,8 @@
         // backDoorIsOpen.value = false
       }
     }
-    if (selectData.rearGateOpen == 1 && selectData.rearGateClose == 0) {
-      isRearOpenRunning = false;
+    if (selectData.rearGateOpen == 1 && selectData.rearGateClose == '0' && !isRearOpenRunning) {
+      isRearOpenRunning = true;
 
       if (rearDeviceState != 3) {
         rearDeviceState = 3;
@@ -588,8 +649,8 @@
       }
     }
 
-    if (selectData.rearGateClose == 1 && selectData.rearGateOpen == 0) {
-      isRearCloseRunning = false;
+    if (selectData.rearGateClose == 1 && selectData.rearGateOpen == '0' && isRearOpenRunning) {
+      isRearOpenRunning = false;
       if (rearDeviceState != 4) {
         rearDeviceState = 4;
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
@@ -597,6 +658,28 @@
         backDoorIsOpen.value = false;
       }
     }
+
+    if (selectData.midGateOpen == 1 && selectData.midGateClose == '0' && !isMidOpenRunning) {
+      isMidOpenRunning = true;
+
+      if (midDeviceState != 8) {
+        midDeviceState = 8;
+        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
+        play(8, timeScale);
+        backDoorIsOpen.value = false;
+        frontDoorIsOpen.value = true;
+      }
+    }
+
+    if (selectData.midGateClose == 1 && selectData.midGateOpen == '0' && isMidOpenRunning) {
+      isMidOpenRunning = false;
+      if (midDeviceState != 9) {
+        midDeviceState = 9;
+        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
+        play(9, timeScale);
+        backDoorIsOpen.value = false;
+      }
+    }
   }
 
   function handleCancel() {

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

@@ -1,7 +1,7 @@
 <template>
   <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
   <div
-    id="compressorCss3D"
+    id="compressorCss3D1"
     class="threejs-Object-CSS"
     style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
   >
@@ -198,7 +198,7 @@
 <script lang="ts" setup name="nitrogenHome">
   import { onMounted, onUnmounted, ref, watch } from 'vue';
   import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-  import { mountedThree, destroy } from '../nitrogen.threejs';
+  import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
   import { list } from '../nitrogen.api';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import { monitorDataGroupNum, airCompressorState, showMonitorData, monitorData } from '../nitrogen.data';
@@ -226,7 +226,7 @@
   }
 
   async function getDataSource() {
-    const res = await list({ devicetype: 'pressurefan', pagetype: 'normal' });
+    const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
     const dataSource = res.msgTxt[0].datalist || [];
     dataSource.forEach((data, index) => {
       const item = data.readData;
@@ -251,18 +251,12 @@
     //   }
     // })
   }
-  function resetDevice(data) {}
 
-  function handlerControlModel(data) {}
-
-  watch(monitorDataGroupNum, (newVal) => {
-    if (newVal) {
-      destroy();
-      mountedThree(newVal);
-    }
-  });
   onMounted(async () => {
-    await getMonitor(true);
+    mountedThree([[1, 2, 3, 4]]).then(async () => {
+      await getMonitor(true);
+      setModelType('compressor0');
+    });
   });
 
   onUnmounted(() => {

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

@@ -1,58 +1,66 @@
 <template>
   <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-  <div
-    id="compressorCss3D"
-    class="threejs-Object-CSS compressorCss3D-box"
-    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
-  >
-    <div v-for="(groupNum, index) in monitorDataGroup" :key="index" class="modal-monitor">
-      <fourBorderBg :class="`kyj${index}`" :id="`nitrogenMonitor${groupNum}`">
-        <div class="title">{{ kyjs[index] }} </div>
-        <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
-          <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
-            <span class="monitor-title">{{ preMonitor.title }}:</span>
-            <span class="monitor-val"
-              ><span class="val">{{
-                monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
-                  ? formatNum(monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
-                  : '-'
-              }}</span
-              ><span class="unit">{{ preMonitor.unit }}</span></span
-            >
-          </div>
-          <div v-else class="signal-item">
-            <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
-              <span class="monitor-title">{{ signal.title }}</span>
-              <span
-                :class="{
-                  'signal-round': true,
-                  'signal-round-run': signal.title != '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
-                  'signal-round-warning': signal.title == '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
-                  'signal-round-gry': monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
-                }"
-              ></span>
+  <template v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
+    <div
+      :id="`compressorCss3D${sysIndex + 1}`"
+      class="threejs-Object-CSS compressorCss3D-box"
+      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
+    >
+    </div>
+  </template>
+  <div v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
+    <div v-show="monitorDataGroupFlag == sysIndex + 1">
+      <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>
+          <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
+            <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
+              <span class="monitor-title">{{ preMonitor.title }}:</span>
+              <span class="monitor-val"
+                ><span class="val">{{
+                  monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
+                    ? formatNum(monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
+                    : '-'
+                }}</span
+                ><span class="unit">{{ preMonitor.unit }}</span></span
+              >
             </div>
-          </div>
-        </template>
-      </fourBorderBg>
-      <fourBorderBg :class="`cqg${index}`" :id="`cqgMonitor${groupNum}`">
-        <div class="title">{{ cqgs[index] }}</div>
-        <template v-for="(cqgMonitor, cqgMonitorIndex) in cqgMonitorList" :key="cqgMonitorIndex">
-          <div class="monitor-item">
-            <span class="monitor-title">{{ cqgMonitor.title }}:</span>
-            <span class="monitor-val"
-              ><span class="val">{{
-                monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[1]}${groupNum}`)]
-                  ? formatNum(monitorData[cqgMonitor.code.replace(prefix[1], `${prefix[1]}${groupNum}`)])
-                  : '-'
-              }}</span
-              ><span class="unit">{{ cqgMonitor.unit }}</span></span
-            >
-          </div>
-        </template>
-      </fourBorderBg>
+            <div v-else class="signal-item">
+              <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
+                <span class="monitor-title">{{ signal.title }}</span>
+                <span
+                  :class="{
+                    'signal-round': true,
+                    'signal-round-run': signal.title != '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
+                    'signal-round-warning':
+                      signal.title == '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
+                    'signal-round-gry': monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
+                  }"
+                ></span>
+              </div>
+            </div>
+          </template>
+        </fourBorderBg>
+        <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
+          <div class="title">{{ cqgs[index] }}</div>
+          <template v-for="(cqgMonitor, cqgMonitorIndex) in cqgMonitorList" :key="cqgMonitorIndex">
+            <div class="monitor-item">
+              <span class="monitor-title">{{ cqgMonitor.title }}:</span>
+              <span class="monitor-val"
+                ><span class="val">{{
+                  monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[1]}${groupNum}`)]
+                    ? formatNum(monitorData[cqgMonitor.code.replace(prefix[1], `${prefix[1]}${groupNum}`)])
+                    : '-'
+                }}</span
+                ><span class="unit">{{ cqgMonitor.unit }}</span></span
+              >
+            </div>
+          </template>
+        </fourBorderBg>
+      </div>
     </div>
   </div>
+
   <div class="nitrogen-home">
     <div style="position: absolute; color: #fff; top: 30px; pointer-events: auto; display: flex">
       <div
@@ -60,7 +68,7 @@
         :key="sysIndex"
         class="tab-button-box"
         :class="{ 'tab-button-box-active': monitorDataGroupFlag == sysIndex + 1 }"
-        @click="setMonitorGroupNum(monitorDataGroup1, sysIndex + 1)"
+        @click="setMonitorGroupNum(sysIndex + 1)"
         >{{ '压风系统' + (sysIndex + 1) }} (运行: <p style="padding: 0 5px"></p
         ><span
           :class="{
@@ -82,8 +90,10 @@
     </div>
     <div class="total-data">
       <div class="vent-flex-row">
-        <div class="item"
-          >总管压力(bar)：<span class="val">{{ monitorData[`MainPipePressure`] ? formatNum(monitorData[`MainPipePressure`]) : '-' }}</span></div
+        <div class="item" v-for="(data, index) in totalData" :key="index"
+          >{{ data.title + '(' + data.unit + ')' }}：<span class="val">{{
+            monitorData[data.code] ? formatNum(monitorData[data.code]) : '-'
+          }}</span></div
         >
       </div>
     </div>
@@ -129,7 +139,7 @@
   </div>
 </template>
 <script lang="ts" setup name="nitrogenHome">
-  import { onMounted, onUnmounted, ref, watch } from 'vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
   import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
   import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
   import { list } from '../nitrogen.api';
@@ -138,26 +148,35 @@
   // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataJj';
   // import type { State } from '../nitrogen.dataJj';
   // 布尔台
-  import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataBet';
-  import type { State } from '../nitrogen.dataBet';
+  // import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } from '../nitrogen.dataBet';
+  // import type { State } from '../nitrogen.dataBet';
   // 活鸡兔
   // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataHjt';
   // import type { State } from '../nitrogen.dataHjt';
   // 大柳塔
-  // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataDlt';
+  // import {
+  //   monitorDataGroupArr,
+  //   preFanMonitorData,
+  //   monitorData,
+  //   preMonitorList,
+  //   cqgMonitorList,
+  //   prefix,
+  //   getSysState,
+  //   totalData,
+  // } from '../nitrogen.dataDlt';
   // import type { State } from '../nitrogen.dataDlt';
   // 窑街三矿
-  // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
-  // import type { State } from '../nitrogen.dataYJ';
+  import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
+  import type { State } from '../nitrogen.dataYJ';
 
   import { formatNum } from '/@/utils/ventutil';
 
   const loading = ref(true);
-  const monitorDataGroupFlag = ref(0);
-  const monitorDataGroup = ref([]);
-  const kyjs = ref([]);
-  const cqgs = ref([]);
-  const monitorData = ref([]);
+  const monitorDataGroupFlag = ref(1);
+  const monitorDataGroup = ref<Number[]>([]);
+  const kyjs = ref<string[]>([]);
+  const cqgs = ref<string[]>([]);
+  const monitorData = ref<Object | []>({});
   const sysStateList = ref<State[]>([]);
 
   // https获取监测数据
@@ -187,8 +206,12 @@
     sysStateList.value = getSysState(monitorData.value);
   }
 
-  function setMonitorGroupNum(num, flag) {
+  function setMonitorGroupNum(flag) {
     monitorDataGroupFlag.value = flag;
+    const monitorGroup = monitorDataGroupArr[flag - 1];
+    changeGroup(monitorGroup);
+    setModelType('compressor' + (flag - 1));
+    monitorDataGroup.value = monitorGroup;
   }
 
   function changeGroup(val) {
@@ -206,17 +229,11 @@
     });
   }
 
-  watch(monitorDataGroupFlag, (newVal) => {
-    const monitorGroup = monitorDataGroupArr[newVal - 1];
-    changeGroup(monitorGroup);
-    monitorDataGroup.value = monitorGroup;
-    setModelType(monitorGroup);
-  });
-
   onMounted(async () => {
-    mountedThree().then(async () => {
+    mountedThree(monitorDataGroupArr).then(async () => {
       await getMonitor(true);
       monitorDataGroupFlag.value = 1;
+      setMonitorGroupNum(1);
     });
   });
 

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

@@ -31,10 +31,7 @@ export const bottomBtnList = ref([
     isHover: false,
   },
 ]);
-export const monitorDataGroupNum1 = [1, 2, 3];
-export const monitorDataGroupNum2 = [4, 5];
-export const monitorDataGroupNum3 = [1, 2, 3, 4];
-export const monitorDataGroupNum = ref(3);
+export const monitorDataGroupNum = ref(4);
 export const airCompressorState = ref([
   {
     id: '',

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

@@ -133,7 +133,6 @@ class Nitrogen {
 
   addCssText = (monitorDataGroup) => {
     if (this.nitrogenNum > 0 && this.group) {
-      this.clearCssText();
       for (let i = 0; i < monitorDataGroup.length; i++) {
         const n = monitorDataGroup[i];
         const compressorModal = this.group.getObjectByName('compressorModal' + i) as THREE.Object3D;
@@ -177,14 +176,10 @@ class Nitrogen {
   };
 
   clearCssText = () => {
-    // const n = 5;
-    // const compressorGroup = this.cssGroupParent.getObjectByName('compressorGroup' + n);
-    // if (compressorGroup) {
-    //   compressorGroup.visible = false;
-    //   compressorGroup.children.forEach((item) => {
-    //     item.visible = false;
-    //   });
-    // }
+    for (let i = 0; i < this.cssGroupParent.children.length; i++) {
+      const item = this.cssGroupParent.children[i];
+      this.cssGroupParent.remove(item);
+    }
   };
 
   /**
@@ -250,29 +245,24 @@ class Nitrogen {
       this.group.name = this.modelName;
       setModalCenter(this.group);
       this.setModalPosition();
-      debugger;
     }
   }
 
-  mountedThree(dom) {
+  mountedThree(monitorDataGroup, dom) {
     return new Promise((resolve) => {
       this.CSSCanvasContainer = document.querySelector(dom);
       if (this.CSSCanvasContainer) {
         this.css3dRender = new CSS3DRenderer() as CSS3DRenderer;
         this.css3dRender.setSize(this.model.canvasContainer.clientWidth, this.model.canvasContainer.clientHeight);
         this.CSSCanvasContainer?.appendChild(this.css3dRender.domElement);
-        // this.css3dRender.render(this.model.scene as THREE.Scene, this.model.camera as THREE.PerspectiveCamera);
       }
-      this.model.renderAnimationScene = () => {
-        this.css3dRender?.render(this.model?.scene as THREE.Scene, this.model?.camera as THREE.PerspectiveCamera);
-      };
       this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
         this.singGltf = gltf[0];
-        // this.setModal(monitorDataGroup.length);
-        // this.addCssText(monitorDataGroup);
-        resolve(null);
+        this.setModal(monitorDataGroup.length);
+        this.addCssText(monitorDataGroup);
         // this.addLight();
-        this.model.scene.add(this.cssGroupParent);
+        this.group.add(this.cssGroupParent);
+        resolve(null);
       });
     });
   }

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

@@ -12,8 +12,9 @@ import { modal } from 'vxe-table';
 // 模型对象、 文字对象
 let model: UseThree | undefined,
   group: THREE.Object3D | undefined,
-  compressorObj: Nitrogen | undefined,
-  modalType = 'compressor';
+  // compressorObj: Nitrogen | undefined,
+  modalType = 'compressor1';
+const compressorObjArr = <Nitrogen[] | undefined[]>[];
 
 const { mouseDownFn, mousemoveFn, mouseUpFn } = useEvent();
 
@@ -23,9 +24,11 @@ const mouseEvent = (event) => {
   if (event.button == 0 && model && group) {
     model.canvasContainer?.addEventListener('mousemove', mousemove);
     mouseDownFn(model, group, event, (intersects) => {
-      if (modalType === 'compressor') {
-        compressorObj?.mousedownModel.call(compressorObj, intersects);
-      }
+      compressorObjArr.forEach((compressorObj, index) => {
+        if (modalType === 'compressor' + index) {
+          compressorObj?.mousedownModel.call(compressorObj, intersects);
+        }
+      });
       console.log('摄像头控制信息', model?.orbitControls, model?.camera);
     });
   }
@@ -54,39 +57,32 @@ const render = () => {
 /* 添加监控数据 */
 export const addText = () => {
   if (!compressorObj) return;
-  // if (modalType === 'compressor1' && compressorObj1) {
-  //   return compressorObj1.addCssText;
-  // } else if (modalType === 'compressor2' && compressorObj2) {
-  //   return compressorObj2.addCssText;
-  // }
-};
-
-export const play = () => {
-  if (modalType === 'compressor' && compressorObj) {
-    return compressorObj.play.call(compressorObj);
-  }
 };
 
 // 切换风窗类型
-export const setModelType = (monitorDataGroup: number[]) => {
+export const setModelType = (modalTypeName) => {
+  modalType = modalTypeName;
   if (group) {
-    // compressorObj?.clearCssText();
     model?.scene?.remove(group);
     // model?.initCSS3Renderer('#compressorCss3D');
   }
 
-  return new Promise((resolve) => {
-    // 显示双道风窗
-
-    if (modalType === 'compressor' && compressorObj && model) {
-      if (monitorDataGroup.length) {
-        model?.scene?.remove(compressorObj.group);
-        model.clearGroup(compressorObj.group);
-        compressorObj.group = undefined;
-        compressorObj.setModal(monitorDataGroup.length);
-        group = compressorObj.group;
-      }
+  let compressorObj;
+  compressorObjArr.forEach((compressor, index) => {
+    if (modalTypeName === 'compressor' + index) {
+      compressorObj = compressor;
+      if (!compressor.CSSCanvasContainer?.contains(compressor.css3dRender.domElement))
+        compressor.CSSCanvasContainer?.appendChild(compressor.css3dRender.domElement);
+    } else {
+      if (compressor.CSSCanvasContainer?.contains(compressor.css3dRender.domElement))
+        compressor.CSSCanvasContainer?.removeChild(compressor.css3dRender.domElement);
     }
+  });
+  model.renderAnimationScene = () => {
+    compressorObj?.css3dRender?.render(model?.scene as THREE.Scene, model?.camera as THREE.PerspectiveCamera);
+  };
+  return new Promise((resolve) => {
+    group = compressorObj.group;
     model?.camera?.position.set(-1000, 100, 500);
     const oldCameraPosition = { x: -1000, y: 100, z: 500 };
     const oldControlsPosition = { x: 0, y: 0, z: 0 };
@@ -116,18 +112,11 @@ export const setModelType = (monitorDataGroup: number[]) => {
       resolve(null);
       if (group) model?.scene?.add(group);
       await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
-      compressorObj?.addCssText(monitorDataGroup);
     }, 300);
   });
 };
 
-export const clearCssText = () => {
-  if (modalType === 'compressor' && compressorObj) {
-    return compressorObj.clearCssText.call(compressorObj);
-  }
-};
-
-export const mountedThree = () => {
+export const mountedThree = (monitorDataGroupArr) => {
   return new Promise(async (resolve) => {
     model = new UseThree('#compressor3D');
     model.setEnvMap('test1');
@@ -135,16 +124,18 @@ export const mountedThree = () => {
     model.camera?.layers.enable(0);
     model.canvasContainer?.addEventListener('mousedown', mouseEvent);
     model.canvasContainer?.addEventListener('pointerup', mouseUp);
+    monitorDataGroupArr.forEach(async (monitorDataGroup, 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);
+      }
+    });
 
-    compressorObj = new Nitrogen(model);
-    await compressorObj.mountedThree('#compressorCss3D');
-    compressorObj.modelName = 'compressor';
-
-    model.renderAnimationScene = () => {
-      compressorObj?.css3dRender?.render(model?.scene as THREE.Scene, model?.camera as THREE.PerspectiveCamera);
-    };
     // render();
-    resolve(null);
+
     model.animate();
   });
 };
@@ -153,7 +144,10 @@ export const destroy = () => {
   if (model) {
     model.isRender = false;
     console.log('场景销毁前信息----------->', model.renderer?.info);
-    compressorObj?.destroy();
+    compressorObjArr.forEach((compressorObj) => {
+      compressorObj?.destroy();
+    });
+
     group = undefined;
     model.destroy();
     model = undefined;

src/views/vent/monitorManager/windrectMonitor/duisheFixed.threejs.ts

@@ -270,13 +270,12 @@ class fixedWindRect {
 
   mountedThree(playerDom) {
     return new Promise((resolve) => {
-      this.model.setGLTFModel([this.modelName]).then((gltf) => {
-        this.group = gltf[0];
+      this.model.setGLTFModel([this.modelName], this.group).then(() => {
         this.setModalPosition();
         this.addLight();
-        resolve(null);
         this.initAnimation();
         this.initCamera(playerDom);
+        resolve(null);
       });
     });
   }

src/views/vent/monitorManager/windrectMonitor/windrect.threejs.ts

@@ -360,15 +360,6 @@ export const mountedThree = (playerDom) => {
     model.setEnvMap('test1');
     model.renderer.toneMappingExposure = 1.0;
     resolve(null);
-    lmWindRectObj = new lmWindRect(model);
-    lmWindRectObj.mountedThree();
-
-    zdWindRectObj = new zdWindRect(model);
-    zdWindRectObj.mountedThree();
-
-    lmWindRectSideObj = new lmWindRectSide(model);
-    lmWindRectSideObj.mountedThree();
-
     ddWindRectObj = new ddWindRect(model);
     ddWindRectObj.mountedThree();
 
@@ -378,6 +369,15 @@ export const mountedThree = (playerDom) => {
     dsWindRectObj = new dsWindRect(model);
     dsWindRectObj.mountedThree();
 
+    zdWindRectObj = new zdWindRect(model);
+    zdWindRectObj.mountedThree();
+
+    lmWindRectSideObj = new lmWindRectSide(model);
+    lmWindRectSideObj.mountedThree();
+
+    lmWindRectObj = new lmWindRect(model);
+    lmWindRectObj.mountedThree();
+
     model.animate();
     startAnimation();
   });

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

@@ -267,7 +267,7 @@ async function getDataSource(systemID) {
   }
 
   junyaInfo.value = res['junyaInfo']
-  workFaceHistorySource.value = res['sysInfo']['history']
+  workFaceHistorySource.value = res['surface_history'][0]
   workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
   
   if(res['warnInfo']['dustS']) warnInfo.dustS = { warningList: res['warnInfo']['dustS']['devices'] || [], dataList: initWarningData(res['warnInfo']['dustS']['devices']) }