视频流修改、添加收缩风门

src/components/vent/micro/ventModal.vue

@@ -5,7 +5,7 @@
   <div id="micro-vent-3dModal"></div>
 </template>
 <script lang="ts">
-  import { ref, onMounted, onBeforeUnmount, defineComponent } from 'vue';
+  import { ref, onMounted, onBeforeUnmount, defineComponent, onUnmounted } from 'vue';
   import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
   import { resetMicroContentWH } from '/@/utils/domUtils';
 
@@ -20,7 +20,13 @@
         });
       });
 
-      onBeforeUnmount(async () => {
+      onBeforeUnmount(() => {
+        debugger;
+        unmountMicroApps(['/micro-vent-3dModal']);
+      });
+
+      onUnmounted(() => {
+        debugger;
         unmountMicroApps(['/micro-vent-3dModal']);
       });
       return { loading };

src/hooks/system/useCamera.ts

@@ -42,6 +42,7 @@ export function useCamera() {
   }
 
   function deviceCameraInit(cameraAddrs, player: HTMLElement, webRtcServerList: any[] = []) {
+    debugger;
     const playerDoms: (HTMLVideoElement | undefined | null)[] = [];
     const webRtcServer: any[] = [];
     let livePlayerDiv: HTMLElement | null = document.getElementById('LivePlayerBox');
@@ -69,43 +70,30 @@ export function useCamera() {
               }
               if (cameraUrl.addr && cameraUrl.addr.startsWith('rtsp://')) {
                 const server = webRtcServerList.shift();
+                let videoDom: HTMLVideoElement | null = null;
                 if (server) {
                   try {
-                    const videoElement = server.videoElement as HTMLVideoElement;
-                    videoElement.volume = 0;
-                    const cameraNameDom = videoElement.parentElement?.getElementsByClassName('video-name')[0];
+                    videoDom = server.videoElement as HTMLVideoElement;
+                    videoDom.volume = 0;
+                    const cameraNameDom = videoDom.parentElement?.getElementsByClassName('video-name')[0];
                     if (cameraNameDom) cameraNameDom.innerText = cameraUrl.name;
-                    playerDoms.unshift(videoElement);
+                    playerDoms.unshift(videoDom);
                     webRtcServer.unshift(server);
+                    // videoParentDomList.unshift()
                     await server.connect(cameraUrl['addr']);
-                    videoElement.play();
+                    videoDom.play();
                     childResolve(null);
                   } catch (error) {
                     playerDoms.unshift(undefined);
                     childResolve(null);
                   }
                 } else {
-                  const videoParentDom: HTMLElement = document.createElement('div');
-                  videoParentDom.setAttribute('class', 'video-parent');
-                  const videoDom: HTMLVideoElement = document.createElement('video');
+                  videoDom = document.createElement('video');
                   videoDom.volume = 0;
                   videoDom.setAttribute('class', 'rtspVideo');
                   videoDom.setAttribute('muted', 'muted');
                   videoDom.setAttribute('poster', '/src/assets/images/vent/noSinge.png');
                   videoDom.autoplay = true;
-                  videoParentDom.appendChild(videoDom);
-                  cameraNameDom = document.createElement('div');
-                  cameraNameDom.setAttribute('class', 'video-name');
-                  cameraNameDom.innerText = cameraUrl.name;
-                  videoParentDom.appendChild(cameraNameDom);
-                  videoParentDom.addEventListener('dblclick', () => {
-                    if (videoDom.requestFullscreen) {
-                      videoDom.requestFullscreen();
-                      videoDom.play();
-                    }
-                  });
-
-                  videoParentDomList.push(videoParentDom);
 
                   try {
                     const server = new window['WebRtcStreamer'](videoDom, location.protocol + VUE_APP_URL.webRtcUrl);
@@ -120,6 +108,23 @@ export function useCamera() {
                     childResolve(null);
                   }
                 }
+                if (videoDom) {
+                  const videoParentDom: HTMLElement = document.createElement('div');
+                  videoParentDom.setAttribute('class', 'video-parent');
+                  videoParentDom.appendChild(videoDom);
+                  cameraNameDom = document.createElement('div');
+                  cameraNameDom.setAttribute('class', 'video-name');
+                  cameraNameDom.innerText = cameraUrl.name;
+                  videoParentDom.appendChild(cameraNameDom);
+                  videoParentDom.addEventListener('dblclick', () => {
+                    if (videoDom?.requestFullscreen) {
+                      videoDom.requestFullscreen();
+                      videoDom.play();
+                    }
+                  });
+
+                  videoParentDomList.push(videoParentDom);
+                }
               } else {
                 try {
                   fetch(cameraUrl.addr, {

src/qiankun/index.ts

@@ -56,6 +56,7 @@ const mountMicroApp = (path, toPath?) => {
 
 // 卸载app的方法
 const unmountMicroApps = async (multipleApp) => {
+  debugger;
   for (const key in activeApps) {
     const isExist = multipleApp.some((name) => name == key);
     if (isExist) {

src/utils/threejs/useThree.ts

@@ -293,6 +293,8 @@ class UseThree {
                       }
                     }
                   });
+                } else {
+                  childResolve(null);
                 }
               }
             } catch (error) {

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

@@ -43,7 +43,7 @@
             </div>
             <div class="three-modal" id="modalBox" style="position: relative">
               <div class="btn-icon" @click="goModalDetail"></div>
-              <VentModal style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
+              <VentModal ref="centerModalRef" style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
             </div>
           </div>
           <!-- 风量监测 -->
@@ -69,7 +69,7 @@
     </div>
     <!-- <DeviceMonitor :pageType="pageType" @goHome="goHome" /> -->
   </div>
-  <VentModal v-else style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
+  <VentModal v-if="pageType == 'model3D'" ref="fullModalRef" style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
 </template>
 <script lang="ts" setup>
   import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } from 'vue';
@@ -117,8 +117,11 @@
   let nowTimeWeek = ref('');
   let nowTime = ref('');
 
+  const centerModalRef = ref();
+  const fullModalRef = ref();
+
   const globSetting = useGlobSetting();
-  const pageType = ref('home');
+  const pageType = ref('');
   let router = useRouter();
 
   function goDetail(deviceType) {
@@ -231,7 +234,7 @@
       } else {
         let paramArr: any = [];
         paramArr.push({
-          deviceName: '12204工作面',
+          deviceName: '工作面',
           deviceType: 'sys_surface_caimei',
           deviceID: '11111',
           history: [],
@@ -278,7 +281,6 @@
       let hours = date.getHours();
       let minutes = date.getMinutes();
       let seconds = date.getSeconds();
-      console.log(seconds, 'seconds----');
       if (minutes >= 0 && minutes <= 9) {
         minutes = `0${minutes}`;
       }
@@ -293,13 +295,15 @@
     router.push('/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D');
     // history.pushState({}, '', '/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D');
     // location.reload()
-    pageType.value = 'model3D';
   }
 
   onMounted(() => {
+    debugger;
     const currentRouteObj = unref(currentRoute);
     if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
       pageType.value = 'model3D';
+    } else {
+      pageType.value = 'home';
     }
     getNowTime();
     getList();
@@ -310,10 +314,12 @@
     );
   });
   onBeforeUnmount(() => {
-    actions.setGlobalState({ url: { path: '', query: {} } });
     clearInterval(timer);
     timer = null;
   });
+  onUnmounted(() => {
+    pageType.value = '';
+  });
 </script>
 
 <style lang="less" scoped>

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

@@ -26,7 +26,8 @@
   async function getVideoAddrs(){
     const result = await list({ pageSize: 10000 })
     if(result && result.records && result.records.length > 0){
-      addrList.value = result.records.map(item => ({ addr: item['addr'], name: item['name'] }))
+      debugger;
+      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'] }))
     }
   }
 

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

@@ -1234,6 +1234,18 @@ onUnmounted(() => {
         left: calc(-6px * 16);
       }
 
+      &:nth-child(17) {
+        left: calc(-6px * 17);
+      }
+
+      &:nth-child(18) {
+        left: calc(-6px * 18);
+      }
+
+      &:nth-child(19) {
+        left: calc(-6px * 19);
+      }
+
       &:first-child {
         clip-path: polygon(0 0,
             10px 50%,

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

@@ -184,7 +184,7 @@ class FmTwoSs {
         const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
         planeMesh.name = 'monitorText';
         planeMesh.scale.set(0.002, 0.002, 0.002);
-        planeMesh.position.set(3.685, 0.09, -0.41);
+        planeMesh.position.set(2.975, 0.09, -0.4);
         this.group.add(planeMesh);
       }
       textMap.dispose();
@@ -283,16 +283,16 @@ class FmTwoSs {
 
   /* 提取风门序列帧，初始化前后门动画 */
   initAnimation() {
-    const fmGroup = this.group?.getObjectByName('fmTwoSs');
+    const fmGroup = this.group?.getObjectByName('fmTwoSs-door');
     if (fmGroup && fmGroup.animations[0]) {
       const tracks = fmGroup.animations[0].tracks;
       const fontTracks: any[] = [],
         backTracks: any[] = [];
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i];
-        if (track.name.startsWith('qianmen')) {
+        if (track.name.startsWith('door02')) {
           fontTracks.push(track);
-        } else if (track.name.startsWith('houmen')) {
+        } else if (track.name.startsWith('door03')) {
           backTracks.push(track);
         }
       }
@@ -494,7 +494,7 @@ class FmTwoSs {
         const planeMesh = monitorPlane.clone();
         planeMesh.name = 'noPlayer1';
         planeMesh.scale.set(0.0085, 0.0055, 0.012);
-        planeMesh.position.set(-3.64, 0.01, -0.41);
+        planeMesh.position.set(-2.903, 0.01, -0.4);
         this.group?.add(planeMesh.clone());
       }
     } else if (videoPlayer1) {
@@ -502,7 +502,7 @@ class FmTwoSs {
         const mesh = renderVideo(this.group, videoPlayer1, 'player1');
         if (mesh) {
           mesh?.scale.set(-0.0275, 0.028, 1);
-          mesh?.position.set(-3.643, 0.02, -0.4);
+          mesh?.position.set(-2.903, 0.02, -0.4);
           mesh.rotation.y = -Math.PI;
           this.group.add(mesh);
         }
@@ -516,7 +516,8 @@ class FmTwoSs {
     this.group = new THREE.Object3D();
     this.group.name = this.modelName;
     return new Promise((resolve) => {
-      this.model.setGLTFModel(['fmTwoSs'], this.group).then(() => {
+      this.model.setGLTFModel(['fmTwoSs-door', 'fmTwoSs-wall', 'fmTwoSs-wire'], this.group).then(() => {
+        debugger;
         this.setModalPosition();
         // 初始化左右摇摆动画;
         this.initAnimation();

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

@@ -352,7 +352,7 @@
         type = 'fm2';
       } else if (selectData.deviceType == 'gate_qd') {
         type = 'fm3';
-      } else if (selectData.deviceType == 'gate_ss_two') {
+      } else if (selectData.deviceType == 'gate_ss_two' || selectData.deviceType == 'gate_ss_two1') {
         type = 'fmTwoSs';
       } else {
         type = 'fm1'; // 液压

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

@@ -1,771 +0,0 @@
-<template>
-  <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-  <div
-    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"
-  >
-    <a-spin :spinning="loading" />
-    <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
-      <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
-        <div class="title">{{ groupNum }}号空压机 </div>
-        <div class="monitor-item">
-          <span class="monitor-title">排气压力:</span>
-          <span class="monitor-val"
-            ><span class="val">{{
-              monitorData[groupNum - 1]['compressExhaustPressF1'] ? monitorData[groupNum - 1]['compressExhaustPressF1'] : '-'
-            }}</span
-            ><span class="unit">Mpa</span></span
-          >
-        </div>
-        <div class="monitor-item">
-          <span class="monitor-title">分离压力:</span>
-          <span class="monitor-val"
-            ><span class="val">{{
-              monitorData[groupNum - 1]['compressSeparatePressF1'] ? monitorData[groupNum - 1]['compressSeparatePressF1'] : '-'
-            }}</span
-            ><span class="unit">Mpa</span></span
-          >
-        </div>
-        <div class="monitor-item">
-          <span class="monitor-title">排气温度:</span>
-          <span class="monitor-val"
-            ><span class="val">{{ monitorData[groupNum - 1]['exhaustTemp'] ? monitorData[groupNum - 1]['exhaustTemp'] : '-' }}</span
-            ><span class="unit">℃</span></span
-          >
-        </div>
-        <div class="signal-item">
-          <div class="signal"
-            ><span class="monitor-title">运行信号</span
-            ><span
-              :class="{
-                'signal-round': true,
-                'signal-round-run': monitorData[groupNum - 1]['compressRunSigF1'],
-                'signal-round-gry': !monitorData[groupNum - 1]['compressRunSigF1'],
-              }"
-            ></span>
-          </div>
-          <div class="signal"
-            ><span class="monitor-title">加载信号</span
-            ><span
-              :class="{
-                'signal-round': true,
-                'signal-round-run': monitorData[groupNum - 1]['compressLoadSigF1'],
-                'signal-round-gry': !monitorData[groupNum - 1]['compressLoadSigF1'],
-              }"
-            ></span>
-          </div>
-        </div>
-      </fourBorderBg>
-      <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
-        <div class="title">{{ cqgs[groupNum - 1] }}</div>
-        <div class="monitor-item">
-          <span class="monitor-title">气囊温度:</span>
-          <span class="monitor-val"
-            ><span class="val">{{ monitorData[groupNum - 1]['airReceiverTemp'] ? monitorData[groupNum - 1]['airReceiverTemp'] : '-' }}</span
-            ><span class="unit">℃</span></span
-          >
-        </div>
-        <div class="monitor-item">
-          <span class="monitor-title">气囊压力<span class="unit"></span>:</span>
-          <span class="monitor-val"
-            ><span class="val">{{ monitorData[groupNum - 1]['airReceiverPress'] ? monitorData[groupNum - 1]['airReceiverPress'] : '-' }}</span
-            ><span class="unit">Mpa</span></span
-          >
-        </div>
-        <div class="monitor-item">
-          <span class="monitor-title">气囊流量<span class="unit"></span>:</span>
-          <span class="monitor-val"
-            ><span class="val">{{ monitorData[groupNum - 1]['airReceiverFlow'] ? monitorData[groupNum - 1]['airReceiverFlow'] : '-' }}</span
-            ><span class="unit">m³/k</span></span
-          >
-        </div>
-      </fourBorderBg>
-    </div>
-  </div>
-  <div class="nitrogen-home">
-    <div style="position: absolute; color: #fff; top: 0px"><span>压风系统1</span><span>压风系统2</span></div>
-    <div class="nitrogen-container">
-      <div class="top-box">
-        <!-- 左边监测数据 -->
-        <div class="lr-box left-box">
-          <div class="left-container">
-            <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
-              <div class="monitor-box">
-                <ventBox1>
-                  <template #title>
-                    <div>{{ groupNum }}号空压机组</div>
-                  </template>
-                  <template #container>
-                    <div class="state-item" v-for="(data, index) in showMonitorData" :key="index">
-                      <div class="item-col">
-                        <span class="state-title">{{ Object.values(data)[0] }} :</span>
-                        <span class="state-val">{{
-                          (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
-                            ? monitorData[groupNum - 1][Object.keys(data)[0]]
-                            : '-'
-                        }}</span>
-                      </div>
-                      <div class="item-col">
-                        <span class="state-title">{{ Object.values(data)[1] }} :</span>
-                        <span class="state-val">{{
-                          (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
-                            ? monitorData[groupNum - 1][Object.keys(data)[1]]
-                            : '-'
-                        }}</span>
-                      </div>
-                    </div>
-                  </template>
-                </ventBox1>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 右边控制状态 -->
-        <div class="lr-box right-box">
-          <ventBox1>
-            <template #title>
-              <div>远程控制</div>
-            </template>
-            <template #container>
-              <div class="control-group">
-                <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
-                  <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
-                  <div class="control-item-state">
-                    <a-switch
-                      v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
-                      size="small"
-                      checked-children="开启"
-                      un-checked-children="关闭"
-                      :disabled="airCompressorState[groupNum - 1][`controlModel`]"
-                      @change="handlerDevice(airCompressorState[groupNum - 1])"
-                    />
-                  </div>
-                </div>
-                <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
-                  <div class="control-item-title">{{ cqgs[groupNum - 1] }}</div>
-                  <div class="control-item-state">
-                    <a-switch
-                      v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
-                      size="small"
-                      checked-children="开启"
-                      un-checked-children="关闭"
-                      :disabled="airCompressorState[groupNum - 1][`controlModel`]"
-                      @change="handlerDevice(airCompressorState[groupNum - 1])"
-                    />
-                  </div>
-                </div>
-
-                <a-divider style="height: 1px; background-color: #d7d7d755" />
-                <div class="control-btn-group vent-margin-b-20">
-                  <div class="control-left-box">
-                    <div class="btn-box">
-                      <span @click="handlerDevice({ remote: true })">远程</span>
-                      <span @click="handlerDevice({ remote: false })">就地</span>
-                    </div>
-                    <div class="icon-box" :class="{ 'remote-icon-box': true }">
-                      <div class="icon"></div>
-                    </div>
-                  </div>
-                  <div class="control-right-box">
-                    <div class="control-item-title">是否开启联动</div>
-                    <div class="item-data-box">
-                      <div :class="{ 'state-icon': true, open: monitorData[0].linkState, close: !monitorData[0].linkState }"> </div>
-                      <div>{{ !monitorData[0].linkState ? '不联动' : '联动' }}</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </ventBox1>
-
-          <!-- <div class="control-item">
-              <div class="control-item-l">
-                <span class="round"></span>
-                <span>控制模式</span>
-              </div>
-              <div>
-                <a-switch v-model="airCompressorState[0][`controlModel`]" checked-children="就地" un-checked-children="远程"
-                  @change="handlerControlModel(airCompressorState[0])">
-                </a-switch>
-              </div>
-            </div> -->
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup name="nitrogenHome">
-  import { onMounted, onUnmounted, ref, watch } from 'vue';
-  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-  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';
-
-  const loading = ref(true);
-
-  const kyjs = ['1号空压机', '2号空压机', '3号空压机', '4号空压机'];
-  const cqgs = ['1号储气罐', '2号储气罐', '3号储气罐', '4号储气罐'];
-
-  // 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();
-        },
-        flag ? 0 : 1000
-      );
-    }
-  }
-
-  async function getDataSource() {
-    const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
-    const dataSource = res.msgTxt[0].datalist || [];
-    dataSource.forEach((data, index) => {
-      const item = data.readData;
-      Object.assign(item, data);
-      item.compressRunSigF1 = item.compressRunSigF1 ? true : false;
-      airCompressorState.value[index].id = item.id;
-      airCompressorState.value[index].compressRunSigF1 = item.compressRunSigF1;
-      airCompressorState.value[index].controlModel = item.controlModel === 'LOC' ? true : false;
-      monitorData.value[index] = item;
-    });
-    monitorDataGroupNum.value = monitorData.value.length;
-    loading.value = false;
-  }
-
-  function handlerDevice(data) {
-    // if (data.length < 1) return
-    // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
-    //   if (res.success) {
-    //     message.success('操作成功')
-    //   } else {
-    //     message.warning(data.msg)
-    //   }
-    // })
-  }
-
-  onMounted(async () => {
-    mountedThree([[1, 2, 3, 4]]).then(async () => {
-      await getMonitor(true);
-      setModelType('compressor0');
-    });
-  });
-
-  onUnmounted(() => {
-    destroy();
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-  });
-</script>
-
-<style lang="less" scoped>
-  @ventSpace: zxm;
-
-  .nitrogen-home {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    position: relative;
-  }
-
-  #compressorCss3D {
-    .modal-monitor {
-      position: absolute;
-      left: 0px;
-      top: 0px;
-    }
-
-    &:deep(.win) {
-      margin: 0 !important;
-      background: #00000044;
-    }
-
-    &:deep(.main) {
-      .title {
-        height: 34px;
-        text-align: center;
-        font-weight: 600;
-        color: #7af5ff;
-        // background-image: url('../../../assets/img/yfj/light.png');
-        background-repeat: no-repeat;
-        background-position-x: center;
-        background-position-y: 100%;
-        background-size: 80%;
-        font-size: 16px;
-      }
-
-      .monitor-item {
-        display: flex;
-        flex-direction: row;
-        width: auto;
-        margin-bottom: 3px;
-        .monitor-val {
-          color: #ffb700;
-          display: flex;
-          width: auto;
-
-          .val {
-            width: 80px;
-            font-size: 14px;
-          }
-
-          .unit {
-            color: #ffffffbb;
-            font-size: 14px;
-          }
-        }
-      }
-
-      .monitor-title {
-        width: 100px;
-        color: #7af5ff;
-        font-weight: 400;
-        font-size: 14px;
-      }
-
-      .signal-item {
-        display: flex;
-        justify-content: space-between;
-
-        // margin-bottom: 5px;
-        .signal-round {
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          margin: 0 10px;
-          position: relative;
-
-          &::after {
-            display: block;
-            content: '';
-            position: absolute;
-            width: 12px;
-            height: 12px;
-            top: -2px;
-            left: -2px;
-            border-radius: 50%;
-          }
-        }
-
-        .signal-round-gry {
-          background-color: #858585;
-
-          &::after {
-            background-color: #85858544;
-            box-shadow: 0 0 1px 1px #85858599;
-          }
-        }
-
-        .signal-round-run {
-          background-color: #67fc00;
-
-          &::after {
-            background-color: #67fc0044;
-            box-shadow: 0 0 1px 1px #c6ff77;
-          }
-        }
-
-        .signal-round-warning {
-          background-color: #e9170b;
-
-          &::after {
-            background-color: #e9170b44;
-            box-shadow: 0 0 1px 1px #e9170b;
-          }
-        }
-      }
-    }
-  }
-
-  .nitrogen-home {
-    width: 100%;
-    height: calc(100% - 100px);
-    position: fixed;
-    z-index: 99;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-    top: 100px;
-    .nitrogen-container {
-      width: 100%;
-      height: calc(100%);
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 100px;
-
-      .top-box {
-        width: 100%;
-        padding: 10px;
-        overflow: hidden;
-        display: flex;
-        justify-content: space-between;
-
-        .lr-box {
-          display: flex;
-          flex-direction: column;
-          position: relative;
-          z-index: 9999;
-          pointer-events: auto;
-        }
-
-        .item {
-          width: 285px;
-          height: auto;
-          position: relative;
-          border-radius: 5px;
-          margin-top: 10px;
-          margin-bottom: 0px;
-          pointer-events: auto;
-          color: #fff;
-          overflow: hidden;
-
-          .control-item {
-            height: auto;
-            min-height: 35px;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            padding: 5px;
-            margin: 0 10px 0 3px;
-            pointer-events: auto;
-            background: linear-gradient(to right, #0063cd22, #0063cd04);
-
-            margin-bottom: 5px;
-            border-width: 1px;
-            border-style: dashed;
-
-            border-image: linear-gradient(to right, #008ccd66, #0063cd04) 1 1;
-            border-radius: 5px;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-
-            .control-item-l {
-              display: flex;
-              align-items: center;
-              font-size: 14px;
-
-              .round {
-                display: inline-block;
-                width: 3px;
-                height: 3px;
-                padding: 1px;
-                border-radius: 50%;
-                background-color: #3df6ff;
-                margin-right: 5px;
-                box-shadow: 0 0 1px 1px #64f7ff;
-              }
-            }
-
-            .control-item-r {
-              text-align: right;
-            }
-
-            .button-box {
-              position: relative;
-              padding: 5px;
-              border: 1px transparent solid;
-              background-clip: border-box;
-              border-radius: 5px;
-              margin-left: 8px;
-            }
-
-            .a-button {
-              pointer-events: auto;
-            }
-
-            &::v-deep .a-button--mini {
-              padding: 6px 10px;
-            }
-
-            &::v-deep .a-button--mini.is-round {
-              padding: 6px 10px;
-            }
-          }
-
-          .base-title {
-            width: calc(100% - 60px);
-            text-align: center;
-            color: #00d8ff;
-          }
-
-          .state-item {
-            display: flex;
-            flex-direction: row;
-            padding: 5px;
-
-            .item-col {
-              width: 50%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              padding-right: 4px;
-
-              .state-title {
-                color: #ffffffcc;
-                flex: 9;
-                font-size: 14px;
-
-                .unit {
-                  // color: #ffffffbb;
-                }
-              }
-
-              .state-val {
-                flex: 1;
-                color: #e4a300;
-                margin-right: 5px;
-                text-align: right;
-                font-size: 14px;
-              }
-            }
-          }
-
-          .signal-box {
-            margin: 5px 0;
-            display: flex;
-            align-items: center;
-
-            .signal-title {
-              color: #7af5ff;
-              margin: 0 5px;
-            }
-
-            &:last-child {
-              margin-right: 0px;
-            }
-          }
-
-          .list-item {
-            padding: 0 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .item-data-key {
-              color: #ffffff99;
-            }
-          }
-
-          .item-data-box {
-            color: #fff;
-
-            .state-icon {
-              display: inline-block;
-              width: 12px;
-              height: 12px;
-              border-radius: 12px;
-            }
-
-            .open {
-              border: 5px solid #133a56;
-              background: #4ecb73;
-            }
-
-            .close {
-              border: 5px solid #192961;
-              background: #6d7898;
-            }
-          }
-        }
-
-        .item-l {
-          width: 335px;
-
-          .monitor-box {
-            // width: 335px;
-            background-color: #ffffff05;
-            // margin-left: 2px;
-            // border-radius: 5px;
-            // backdrop-filter: blur(10px);
-          }
-        }
-
-        .right-box {
-          width: 330px;
-          .control-group {
-            display: flex;
-            // justify-content: space-around;
-            flex-wrap: wrap;
-            .control-item {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              padding: 0 4px;
-              .control-item-title {
-                color: #a6dce9;
-                position: relative;
-                top: 5px;
-              }
-              .control-item-state {
-                width: 94px;
-                height: 47px;
-                background: url('/@/assets/images/vent/control-switch-bg.png');
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                color: #fff;
-              }
-
-              .button-box {
-                position: relative;
-                padding: 5px;
-                border: 1px transparent solid;
-                background-clip: border-box;
-                border-radius: 5px;
-                margin-left: 8px;
-              }
-
-              .a-button {
-                pointer-events: auto;
-              }
-
-              &::v-deep .a-button--mini {
-                padding: 6px 10px;
-              }
-
-              &::v-deep .a-button--mini.is-round {
-                padding: 6px 10px;
-              }
-            }
-          }
-          .control-btn-group {
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            .control-left-box {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              padding: 0 20px;
-              .btn-box {
-                width: 100px;
-                color: #fff;
-                display: flex;
-                justify-content: space-between;
-                span {
-                  display: inline-block;
-                  padding: 2px 8px;
-                  background: #007099;
-                  border-radius: 4px;
-                  border: 1px solid rgb(125, 230, 249);
-                  cursor: pointer;
-                  &:hover {
-                    background: #005574;
-                  }
-                }
-              }
-              .icon-box {
-                width: 60px;
-                height: 60px;
-                border-radius: 30px;
-                border: 2px solid #00bcdd;
-                box-shadow: 0 0 20px #ffffff88;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-top: 20px;
-
-                .icon {
-                  width: 18px;
-                  height: 18px;
-                  border-radius: 9px;
-                  border: 3px solid #d7f9ff;
-                  position: relative;
-                  background: #00bcdd;
-                  &::before {
-                    position: absolute;
-                    content: '';
-                    width: 2px;
-                    height: 12px;
-                    background-color: #00bcdd;
-                    left: 6px;
-                    top: -16px;
-                  }
-                  &::after {
-                    position: absolute;
-                    content: '';
-                    width: 2px;
-                    height: 12px;
-                    left: 6px;
-                    top: 17px;
-                    background-color: #00d9ff;
-                  }
-                }
-              }
-              .remote-icon-box {
-                transform: rotate(30deg);
-                animation: iconRotate 1s linear;
-              }
-              .remote-icon-box1 {
-                transform: rotate(-30deg);
-                animation: iconRotate1 1s linear;
-              }
-
-              @keyframes iconRotate {
-                from {
-                  transform: rotate(-30deg);
-                }
-                to {
-                  transform: rotate(30deg);
-                }
-              }
-              @keyframes iconRotate1 {
-                from {
-                  transform: rotate(30deg);
-                }
-                to {
-                  transform: rotate(-30deg);
-                }
-              }
-            }
-            .control-right-box {
-              width: 100px;
-              color: #fff;
-              height: 80px;
-              justify-content: space-between;
-              align-items: center;
-              .btn {
-                margin-bottom: 30px;
-              }
-            }
-          }
-        }
-
-        .left-box {
-          height: calc(100%);
-          overflow-x: hidden;
-          overflow-y: auto;
-          pointer-events: auto;
-          direction: rtl;
-          .left-container {
-            direction: ltr;
-          }
-          .control-item {
-            height: 36px;
-          }
-        }
-      }
-    }
-  }
-</style>

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

@@ -148,22 +148,13 @@
   // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataJj';
   // import type { State } from '../nitrogen.dataJj';
   // 布尔台
-  import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } 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, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } from '../nitrogen.dataHjt';
+  import type { State } from '../nitrogen.dataHjt';
   // 大柳塔
-  // import {
-  //   monitorDataGroupArr,
-  //   preFanMonitorData,
-  //   monitorData,
-  //   preMonitorList,
-  //   cqgMonitorList,
-  //   prefix,
-  //   getSysState,
-  //   totalData,
-  // } from '../nitrogen.dataDlt';
+  // import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } from '../nitrogen.dataDlt';
   // import type { State } from '../nitrogen.dataDlt';
   // 窑街三矿
   // import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';

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

@@ -5,8 +5,8 @@
     <!-- <nitrogenHome v-if="btnActive == 'nitrogen_page'" /> -->
     <!-- 布尔台 -->
     <nitrogenHome1 v-if="btnActive == 'nitrogen_page'" />
-    <!-- 窑街三矿 -->
-    <!-- <nitrogenHomeYJ v-if="btnActive == 'nitrogen_page'" /> -->
+    <!-- 补连塔 -->
+    <!-- <nitrogenHomeBLT v-if="btnActive == 'nitrogen_page'" /> -->
     <nitrogenEcharts v-if="btnActive == 'yfj_monitor_echarts'" />
     <nitrogenHistory v-if="btnActive == 'yfj_history'" />
     <nitrogenHandleHistory v-if="btnActive == 'yfj_handler_history'" />
@@ -18,6 +18,7 @@
   import { ref } from 'vue';
   // import nitrogenHome from './components/nitrogenHome.vue';
   import nitrogenHome1 from './components/nitrogenHome1.vue';
+  // import nitrogenHomeBLT from './components/nitrogenHomeBLT.vue';
   // import nitrogenHomeYJ from './components/nitrogenHomeYJ.vue';
   import nitrogenEcharts from './components/nitrogenEcharts.vue';
   import nitrogenHistory from './components/nitrogenHistory.vue';

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

@@ -103,6 +103,19 @@ export const preFanMonitorData = [
   },
 ];
 
+export const totalData = [
+  {
+    title: '总流量',
+    code: 'TotalInPipeFlow',
+    unit: 'bar',
+  },
+  {
+    title: '总压力',
+    code: 'TotalOutPipePre1',
+    unit: 'bar',
+  },
+];
+
 export type State = {
   isRun: boolean;
   fault: boolean;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="sensor-container">
     <a-spin :spinning="loading">
-      <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange" >
+      <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
         <a-tab-pane key="1" tab="实时监测">
           <div class="box-bg table-box" style="margin-bottom: 10px">
             <div>
@@ -11,10 +11,10 @@
                 :options="deviceTypeOption"
                 :fieldNames="{ label: 'itemText', value: 'itemValue' }"
                 v-model:value="deviceKind"
-                style="width: 200px; margin-bottom: 5px; color: black;"
+                style="width: 200px; margin-bottom: 5px; color: black"
                 placeholder="请选择设备类型"
                 :allowClear="true"
-              ></Select>
+              />
               <MonitorTable
                 ref="SensorMonitorRef"
                 :columnsType="deviceKind + '_monitor'"
@@ -22,7 +22,7 @@
                 design-scope="modelsensor_monitor"
                 @select-row="getSelectRow"
                 :deviceType="deviceKind"
-                :scroll="{ y: chartsColumns.length > 0 ? 300: 600 }"
+                :scroll="{ y: chartsColumns.length > 0 ? 300 : 600 }"
                 size="''"
                 title="传感器监测"
               >
@@ -72,7 +72,6 @@
               />
             </div>
           </div>
-          
         </a-tab-pane>
         <a-tab-pane key="3" tab="报警历史">
           <div class="tab-item box-bg">
@@ -116,7 +115,7 @@
   const detailDataSource = ref<any[]>([]);
   const historyDataSource = ref<any[]>([]);
   const chartsColumns = ref<any[]>([]);
-  const loading = ref(true)
+  const loading = ref(true);
 
   const echartsOption = {
     grid: {
@@ -124,33 +123,29 @@
       left: '10px',
       right: '5px',
       bottom: '5%',
-      containLabel: true
+      containLabel: true,
     },
     toolbox: {
-      feature: {
-
-      }
-    }
-  }
+      feature: {},
+    },
+  };
   const echartsOption1 = {
     grid: {
       top: '20%',
       left: '10px',
       right: '5px',
       bottom: '10%',
-      containLabel: true
+      containLabel: true,
     },
     toolbox: {
-      feature: {
-
-      }
-    }
-}
+      feature: {},
+    },
+  };
 
   const selectData = reactive({
     strname: '',
     deviceType: '',
-    deviceID: ''
+    deviceID: '',
   });
 
   const tabChange = (activeKeyVal) => {
@@ -158,8 +153,8 @@
     detailDataSource.value = [];
     if (activeKeyVal == 1) {
       nextTick(() => {
-        SensorMonitorRef.value.setSelectedRowKeys([selectData.deviceID])
-      })
+        SensorMonitorRef.value.setSelectedRowKeys([selectData.deviceID]);
+      });
     }
   };
 
@@ -167,13 +162,16 @@
   let timer: null | NodeJS.Timeout = null;
   const getMonitor = (flag?) => {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        await getDataSource(deviceKind.value);
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      }, flag? 0 :1000);
+      timer = setTimeout(
+        async () => {
+          await getDataSource(deviceKind.value);
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 1000
+      );
     }
   };
 
@@ -181,13 +179,6 @@
     const type = devicetype ? devicetype : 'modelsensor';
     const res = await list({ devicetype: type, pagetype: 'normal' });
     dataSource.value = res.msgTxt[0].datalist || [];
-    console.log( dataSource.value,' dataSource.value----------')
-    //lxh
-    dataSource.value.forEach(el=>{
-      el.readData.temperature=(Math.random()*(60-50)+50).toFixed(2)
-      el.readData.humidity=(Math.random()*(60-50)+50).toFixed(2)
-      el.readData.pa=(Math.random()*(102000-100000)+100000).toFixed(2)
-    })
     dataSource.value.map((data: any) => {
       const readData = data.readData;
       data = Object.assign(data, readData);
@@ -195,7 +186,7 @@
     });
     const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
     Object.assign(selectData, data);
-    
+
     // if (chartsColumns.value.length <= 0 && selectData.deviceType) {
     //   handleChange(selectData.deviceType);
     // }
@@ -214,8 +205,8 @@
       }
     }
 
-    if(loading.value){
-      loading.value = false
+    if (loading.value) {
+      loading.value = false;
     }
     return data;
   };
@@ -244,12 +235,12 @@
   };
 
   function handleChange(type) {
-    chartsColumns.value = getTableHeaderColumns(type+'_chart')
+    chartsColumns.value = getTableHeaderColumns(type + '_chart');
     console.log('[ type ] >', type, chartsColumns.value);
   }
 
   function handleSensorChange(type) {
-    loading.value = true
+    loading.value = true;
     handleChange(type);
     timer = null;
     dataSource.value = [];
@@ -274,10 +265,9 @@
     const res = await deviceList({ devicetype: 'modelsensor' });
     const obj = res.find((item) => item.itemValue === 'modelsensor');
     deviceTypeOption.value = obj ? obj.children : [];
-    deviceKind.value = deviceTypeOption.value[0]['itemValue'] || 'modelsensor_monitor'
-    handleChange(deviceKind.value)
+    deviceKind.value = deviceTypeOption.value[0]['itemValue'] || 'modelsensor_monitor';
+    handleChange(deviceKind.value);
     await getMonitor(true);
-
   });
   onUnmounted(() => {
     if (timer) {
@@ -385,19 +375,19 @@
       background: #264d8833 !important;
     }
     .@{ventSpace}-table-row-selected {
-      background: #00c0a311  !important;
+      background: #00c0a311 !important;
       td {
         background-color: #00000000 !important;
       }
     }
     .@{ventSpace}-table-thead {
       // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-      background: #3d9dd45d!important;
+      background: #3d9dd45d !important;
 
       & > tr > th,
       .@{ventSpace}-table-column-title {
         // color: #70f9fc !important;
-        border-color: #84f2ff  !important;
+        border-color: #84f2ff !important;
         border-left: none !important;
         border-right: none !important;
         padding: 7px;
@@ -419,7 +409,7 @@
         background-color: #97efff11 !important;
       }
     }
-    :deep(.vent-form){
+    :deep(.vent-form) {
       .@{ventSpace}-select-dropdown {
         color: #000000 !important;
       }

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

@@ -382,7 +382,7 @@ class dsWindRect {
 
   mountedThree() {
     return new Promise((resolve) => {
-      this.model.setGLTFModel([this.modelName, 'dsgd', 'dsmove'], this.group).then(() => {
+      this.model.setGLTFModel([this.modelName, 'dsgd', 'dsmove'], this.group).then((object) => {
         // this.group.name = this.modelName;
         this.setModalPosition();
         this.initAnimation();

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

@@ -206,7 +206,6 @@
   import { setDivHeight } from '/@/utils/event';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
   import { useRouter } from 'vue-router';
-  import { deviceCameraInit } from '/@/utils/ventutil.ts';
   import LivePlayer from '@liveqing/liveplayer-v3';
   import { useModal } from '/@/components/Modal';
   import { useCamera } from '/@/hooks/system/useCamera';
@@ -279,7 +278,7 @@
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   function getMonitor(flag?) {
-    if (timer == null) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
       timer = setTimeout(
         () => {
           list({ devicetype: 'windrect', pagetype: 'normal' }).then((res) => {
@@ -743,11 +742,11 @@
   });
 
   onUnmounted(() => {
-    destroy();
     if (timer) {
       clearTimeout(timer);
       timer = undefined;
     }
+    destroy();
     if (webRtcServer.length > 0) {
       webRtcServer.forEach((item) => {
         item.disconnect();

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

@@ -397,10 +397,12 @@ class lmWindRect {
   mountedThree() {
     return new Promise((resolve) => {
       this.model.setGLTFModel([this.modelName]).then((gltf) => {
-        this.group = gltf[0];
-        this.setModalPosition();
-        this.initAnimation();
-        this.addLight();
+        if (gltf[0]) {
+          this.group = gltf[0];
+          this.setModalPosition();
+          this.initAnimation();
+          this.addLight();
+        }
         resolve(null);
       });
     });

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

@@ -425,12 +425,14 @@ class lmWindRectSide {
   mountedThree() {
     return new Promise((resolve) => {
       this.model.setGLTFModel([this.modelName]).then((gltf) => {
-        this.group = gltf[0];
-        this.setModalPosition();
+        if (gltf[0]) {
+          this.group = gltf[0];
+          this.setModalPosition();
 
-        const probeBar = this.group?.getObjectByName('probe_bar') as THREE.Object3D;
-        probeBar.position.setY(0.35);
-        this.addLight();
+          const probeBar = this.group?.getObjectByName('probe_bar') as THREE.Object3D;
+          probeBar.position.setY(0.35);
+          this.addLight();
+        }
         resolve(null);
       });
     });

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

@@ -351,10 +351,13 @@ class zdWindRect {
   mountedThree() {
     return new Promise((resolve) => {
       this.model.setGLTFModel([this.modelName]).then((gltf) => {
-        this.group = gltf[0];
-        this.setModalPosition();
-        this.initAnimation();
-        this.addLight();
+        if (gltf[0]) {
+          this.group = gltf[0];
+          this.setModalPosition();
+          this.initAnimation();
+          this.addLight();
+        }
+
         resolve(null);
       });
     });