对接模型数据

build/vite/plugin/theme.ts

@@ -7,7 +7,7 @@ import path from 'path';
 import { viteThemePlugin, antdDarkThemePlugin, mixLighten, mixDarken, tinycolor } from '@rys-fe/vite-plugin-theme';
 import { getThemeColors, generateColors } from '../../config/themeConfig';
 import { generateModifyVars } from '../../generate/generateModifyVars';
-import { antPrefixCls } from '/@/settings/designSetting'
+import { antPrefixCls } from '/@/settings/designSetting';
 
 export function configThemePlugin(isBuild: boolean): PluginOption[] {
   const colors = generateColors({

src/views/vent/home/configurable/configurable.api.ts

@@ -5,7 +5,6 @@ import { useGlobSetting } from '/@/hooks/setting';
 import { reactive } from 'vue';
 import _ from 'lodash';
 
-
 enum Api {
   list = '/safety/ventanalyDevice/homedata2',
   getHomeData = '/safety/ventanalyDevice/homedata',
@@ -19,7 +18,7 @@ enum Api {
   getDisasterProportion = '/safety/ventanalyAlarmLog/getDisasterProportion',
   system = '/ventanaly-device/monitor/device',
   getSystem = '/monitor/deviceForZhuQi',
-  listdays = '/safety/ventanalyMonitorData/listdays'
+  listdays = '/safety/ventanalyMonitorData/listdays',
 }
 
 // 搞这个缓存是由于：目前代码上的设计是多个模块发出多次请求，每个模块自己负责消费前者的响应。
@@ -655,7 +654,7 @@ export const sysCc = (params) => {
 //获取抽采系统数据
 function getCcSystem() {
   return new Promise(async (resolve) => {
-    const result = await sysCc({ devicetype: 'sys', systemID: "2036610034808954882" });
+    const result = await sysCc({ devicetype: 'sys', systemID: '2036610034808954882' });
     resolve(result);
   });
 }
@@ -682,50 +681,50 @@ export const getSystemApi = (params) => {
   return (cache.get(key) as Promise<any>).then(async (res) => {
     //抽采数据
     let pumpData = await getCcSystem();
-    res.pumpData = pumpData.msgTxt[0].datalist[0]
-    let historyDataCc = reactive<any>({})
-    historyDataCc.hourData = await getZqSystem({ gdeviceids: res.pumpData.deviceID, strtype: 'pump_standard', skip: '8' })
-    historyDataCc.minitesData = await getZqSystem({ gdeviceids: res.pumpData.deviceID, strtype: 'pump_standard', skip: '6' })
-    res.historyDataCc = historyDataCc
+    res.pumpData = pumpData.msgTxt[0].datalist[0];
+    let historyDataCc = reactive<any>({});
+    historyDataCc.hourData = await getZqSystem({ gdeviceids: res.pumpData.deviceID, strtype: 'pump_standard', skip: '8' });
+    historyDataCc.minitesData = await getZqSystem({ gdeviceids: res.pumpData.deviceID, strtype: 'pump_standard', skip: '6' });
+    res.historyDataCc = historyDataCc;
     //注气数据
-    let zqData = res.msgTxt.find(v => v.type == 'injection_standard').datalist[0]
-    let co = res.msgTxt.find(v => v.type == 'modelsensor_co').datalist[0]
-    let ch4 = res.msgTxt.find(v => v.type == 'modelsensor_ch4').datalist[0]
-    let o2 = res.msgTxt.find(v => v.type == 'modelsensor_o2').datalist[0]
-    let temp = res.msgTxt.find(v => v.type == 'modelsensor_temperature').datalist[0]
+    let zqData = res.msgTxt.find((v) => v.type == 'injection_standard').datalist[0];
+    let co = res.msgTxt.find((v) => v.type == 'modelsensor_co').datalist[0];
+    let ch4 = res.msgTxt.find((v) => v.type == 'modelsensor_ch4').datalist[0];
+    let o2 = res.msgTxt.find((v) => v.type == 'modelsensor_o2').datalist[0];
+    let temp = res.msgTxt.find((v) => v.type == 'modelsensor_temperature').datalist[0];
     //注气驱替促抽系统状态
     res.zyStatusData = {
       Pressure: zqData.readData.Pressure,
-      paiqiPressure: zqData.readData.paiqiPressure
-    }
+      paiqiPressure: zqData.readData.paiqiPressure,
+    };
     //注气/抽采历史图表数据
-    let historyDataZq = reactive<any>({})
-    historyDataZq.hourData = await getZqSystem({ gdeviceids: zqData.deviceID, strtype: 'injection_standard', skip: '8' })
-    historyDataZq.minitesData = await getZqSystem({ gdeviceids: zqData.deviceID, strtype: 'injection_standard', skip: '6' })
-    res.historyDataZq = historyDataZq
+    let historyDataZq = reactive<any>({});
+    historyDataZq.hourData = await getZqSystem({ gdeviceids: zqData.deviceID, strtype: 'injection_standard', skip: '8' });
+    historyDataZq.minitesData = await getZqSystem({ gdeviceids: zqData.deviceID, strtype: 'injection_standard', skip: '6' });
+    res.historyDataZq = historyDataZq;
     //装备运行状态与控制
     res.deviceStatusControl = {
-      deviceId:zqData.deviceID,
-      devicetype:zqData.deviceType,
+      deviceId: zqData.deviceID,
+      devicetype: zqData.deviceType,
       remoteStatus: zqData.readData.remoteStatus,
       runStatus: zqData.readData.runStatus,
       paramSetting: zqData.readData.paramSetting,
       paiqiStatus: zqData.readData.paiqiStatus,
-    }
+    };
     //注气数据监测
     res.dataMonitor = {
       flowStdInstant: zqData.readData.flowStdInstant,
       flowStdAccum: zqData.readData.flowStdAccum,
       injectionTemperature: zqData.readData.injectionTemperature,
       injectionPressure: zqData.readData.injectionPressure,
-    }
+    };
     //环境监测
     res.environmentData = {
       coVal: co.readData.coval || '-',
       ch4Val: ch4.readData.ch4val || '-',
       o2Val: o2.readData.o2val || '-',
       temperature: temp.readData.temperature || '-',
-    }
+    };
     //装备运行工况监测
     res.deviceGkData = {
       xitongVoltage: zqData.readData.xitongVoltage || '-',
@@ -737,10 +736,9 @@ export const getSystemApi = (params) => {
       paiqiTemp: zqData.readData.paiqiTemp || '-',
       penyouTemp: zqData.readData.penyouTemp || '-',
       youqitongTemp: zqData.readData.youqitongTemp || '-',
-    }
+    };
     //视频监控
-    res.deviceId=zqData.deviceID
-
+    res.deviceId = zqData.deviceID;
 
     return res;
   });

src/views/vent/home/configurable/gasInjection.vue

@@ -35,7 +35,8 @@
         />
       </template>
       <div :class="{ 'vent-modal': menuName == 'zjm', 'vent-modal-1': menuName == 'syq' || menuName == 'zqxt' || menuName == 'ccxt' }">
-        <div class="modal-box" id="modalBox">
+        <a-spin class="spin" :spinning="!isInitModal" tip="正在加载，请稍等..." />
+        <div class="modal-box" id="modalBox" v-if="isInitModal">
           <Three3D ref="three3D" :modalName="'zhuqi'" class="modal-3d" @success="initModalAnimate" />
           <div class="modal-css3d" id="css3dContainer"> </div>
         </div>
@@ -44,7 +45,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, ref, computed, nextTick } from 'vue';
+  import { onMounted, onUnmounted, ref, computed, nextTick, onBeforeMount, watch } from 'vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleGasInject from './components/ModuleGasInject.vue';
   import navMenu from './components/gasInject/navMenu.vue';
@@ -63,6 +64,7 @@
   const three3D = ref(null);
   let interval: number | undefined;
   let menuName = ref('zjm');
+  const isInitModal = ref(false);
 
   //选项切换
   function toggleMenu(param) {
@@ -107,24 +109,29 @@
   }
 
   function initModalAnimate(modal) {
-    console.log('初始化模型', modal);
+    modalAnimate(modal, data);
     modal.isRender = true;
-
-    modalAnimate(modal);
   }
 
   onMounted(() => {
     fetchConfigs('gas_injection').then(() => {
       configs.value = testConfigGasInject;
-      //  updateEnhancedConfigs(configs.value);
       getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
     });
-
-    setInterval(() => {
+    interval = setInterval(() => {
       getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
-    }, 60000);
+    }, 10000);
   });
 
+  watch(
+    () => data.value,
+    (newData, oldData) => {
+      if (newData && !Object.keys(oldData).length) {
+        isInitModal.value = true;
+      }
+    }
+  );
+
   onUnmounted(() => {
     clearInterval(interval);
   });
@@ -302,4 +309,11 @@
   .modal-3d {
     width: 100%;
   }
+  .spin {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 0;
+  }
 </style>

src/views/vent/home/configurable/threejs/gasInjection.ts

@@ -1,3 +1,4 @@
+import { Ref, ref, watch } from 'vue';
 import * as THREE from 'three';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
@@ -7,16 +8,88 @@ import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
 import { PathPointList, PathGeometry } from 'three.path';
 import { modelMouseHandler } from '/@/utils/threejs/useEvent';
 import { panelManager } from './PanelManager';
-import gsap from 'gsap';
-import { e } from 'unocss';
 
-const cgqMarkerList = [];
-const lljMarkerList = [];
+// const cgqMarkerList = [];
+// const lljMarkerList = [];
+const zhuqiPipList = []; // 注气支管
+const zhuqiZkList = []; // 注气钻孔
+const gasUnitList = []; //瓦斯抽采单元
 const pipList = [];
 let mouseoverEvent: any;
 let mouseUpEvent: any;
 let clickSelecteObject: any;
-export function modalAnimate(modal) {
+let pipDataList = [];
+export function modalAnimate(modal, data: Ref<any, any>) {
+  const zhuqiPipDataRef = ref(null);
+  const maxIndex = getPipIndex(data.value) || 0;
+  const zhuqiModal = modal.scene.getObjectByName('zhuqi').getObjectByName('ZhuQiChangJing_1');
+
+  watch(data, (newValue) => {
+    const zhuqiData = newValue.msgTxt.find((item) => item.type.includes('injection'))?.datalist[0];
+    if (zhuqiData) {
+      const readData = zhuqiData.readData;
+      const zzgData = {
+        positionName: '总支管#',
+        flowStdInstant: readData['flowStdInstant'], // 瞬时流量
+        flowStdAccum: readData['flowStdAccum'], // 累计流量
+        injectionTemperature: readData['injectionTemperature'], // 温度
+        injectionPressure: readData['injectionPressure'], // 压力
+        valveOpening: readData['valveOpening'], // 阀门开度
+        paiqiStatus: readData['paiqiStatus'], // 阀门状态
+      };
+      zhuqiPipDataRef.value = zzgData;
+
+      for (let i = 1; i <= maxIndex; i++) {
+        if (pipDataList[i - 1]) {
+          const zzgData = {
+            positionName: `${i}#`,
+            flowStdInstant: readData['flowStdInstant_' + i], // 瞬时流量
+            flowStdAccum: readData['flowStdAccum_' + i], // 累计流量
+            injectionTemperature: readData['injectionTemperature_' + i], // 温度
+            injectionPressure: readData['injectionPressure_' + i], // 压力
+            valveOpening: readData[`valve${i}Opening`], // 阀门开度
+            paiqiStatus: readData['paiqiStatus_' + i], // 阀门状态
+          };
+          pipDataList[i - 1].value = zzgData;
+        } else {
+          const zzgData = ref({
+            positionName: `${i}#`,
+            flowStdInstant: readData['flowStdInstant_' + i], // 瞬时流量
+            flowStdAccum: readData['flowStdAccum_' + i], // 累计流量
+            injectionTemperature: readData['injectionTemperature_' + i], // 温度
+            injectionPressure: readData['injectionPressure_' + i], // 压力
+            valveOpening: readData[`valve${i}Opening`], // 阀门开度
+            paiqiStatus: readData['paiqiStatus_' + i], // 阀门状态
+          });
+          pipDataList[i - 1] = zzgData;
+        }
+        if (i > 4) {
+          zhuqiPipList[i - 1].visible = false;
+          zhuqiZkList[i - 1].visible = false;
+        }
+      }
+    }
+  });
+  initAnimate(modal);
+
+  const zhuqiData = data.value.msgTxt.find((item) => item.type.includes('injection'))?.datalist[0];
+  if (zhuqiData) {
+    const readData = zhuqiData.readData;
+    const zzgData = {
+      positionName: '总支管#',
+      flowStdInstant: readData['flowStdInstant'], // 瞬时流量
+      flowStdAccum: readData['flowStdAccum'], // 累计流量
+      injectionTemperature: readData['injectionTemperature'], // 温度
+      injectionPressure: readData['injectionPressure'], // 压力
+      valveOpening: readData['valveOpening'], // 阀门开度
+      paiqiStatus: readData['paiqiStatus'], // 阀门状态
+    };
+    zhuqiPipDataRef.value = zzgData;
+    initPanel(modal, zhuqiModal, zhuqiPipDataRef);
+  }
+}
+
+function initAnimate(modal) {
   const curveNum = 8;
   const unitNum = 8;
 
@@ -36,18 +109,20 @@ export function modalAnimate(modal) {
 
   const time = Date.now() * 0.001;
 
+  // 绘制注气钻孔
   const arrowObj = addArrow(zhuqiModal, curveNum);
-  const unitObj = addUnit(zhuqiModal, unitNum);
+
+  // 绘制注气支管
   const pipObj = addPip(zhuqiModal, curveNum);
-  console.log('模型对象', zhuqiModal);
+
+  // 绘制抽采单元
+  const unitObj = addUnit(zhuqiModal, unitNum);
 
   initCss2DContainer(modal);
   // 添加鼠标拾取
   initMouseEvent(modal, zhuqiModal);
 
-  initPanel(modal, zhuqiModal);
-
-  const clock = new THREE.Clock();
+  // const clock = new THREE.Clock();
   // 帧刷新
   modal.startAnimation = () => {
     /**气泡运动 - 遍历所有颜色组*/
@@ -105,34 +180,60 @@ export function modalAnimate(modal) {
       texture.offset.x -= 0.1076;
     }
 
-    [...cgqMarkerList, ...lljMarkerList].forEach((marker: THREE.Mesh) => {
-      // 更新水波纹动画
-      const delta = clock.getElapsedTime();
-      if (marker.userData.update) {
-        marker.userData.update(delta);
-      }
-    });
+    // [...cgqMarkerList, ...lljMarkerList].forEach((marker: THREE.Mesh) => {
+    //   // 更新水波纹动画
+    //   const delta = clock.getElapsedTime();
+    //   if (marker.userData.update) {
+    //     marker.userData.update(delta);
+    //   }
+    // });
   };
 }
 
-function initPanel(modal, zhuqiModal) {
+function getPipIndex(data: Ref<any, any>) {
+  if (data && data['msgTxt']) {
+    const zhuqiData = data['msgTxt'].find((item) => item.type.includes('injection'))?.datalist[0];
+    if (zhuqiData) {
+      const readData = zhuqiData.readData;
+      const max = 20;
+      let maxIndex = 0;
+      for (let i = 1; i < max; i++) {
+        if (readData['flowWorkAccum_' + i] !== undefined) {
+          continue;
+        } else {
+          maxIndex = i;
+        }
+      }
+      for (let i = 1; i <= maxIndex; i++) {
+        const zzgData = ref({
+          positionName: `${i}#`,
+          flowStdInstant: readData['flowStdInstant_' + i], // 瞬时流量
+          flowStdAccum: readData['flowStdAccum_' + i], // 累计流量
+          injectionTemperature: readData['injectionTemperature_' + i], // 温度
+          injectionPressure: readData['injectionPressure_' + i], // 压力
+          valveOpening: readData[`valve${i}Opening`], // 阀门开度
+          paiqiStatus: readData['paiqiStatus_' + i], // 阀门状态
+        });
+        pipDataList.push(zzgData);
+      }
+      return maxIndex;
+    }
+  }
+}
+// 初始化主支管面板
+function initPanel(modal, zhuqiModal, zhuqiPipDataRef) {
   const changjingpPipe38 = zhuqiModal.getObjectByName('guandao')?.getObjectByName('changjingpPipe38');
   if (changjingpPipe38) {
     const option = {
       instanceId: changjingpPipe38.name,
-      sensorData: {
-        positionName: '总支管#',
-        temperature: 65,
-        smoke: 80,
-        co: 45,
-      },
+      sensorData: zhuqiPipDataRef,
       threshold: { temperature: 20 },
       position: [],
-      scale: 0.006,
+      scale: 0.005,
     };
     createMonitorPanel3D(modal, changjingpPipe38, option);
     const position = panelManager.getPanel(changjingpPipe38.name)?.vm.cssObject.position.clone();
-    panelManager.getPanel(changjingpPipe38.name)?.vm.cssObject.position.set(position.x, position.y + 1, position.z + 3.5);
+    panelManager.getPanel(changjingpPipe38.name)?.vm.cssObject.position.set(position.x, position.y + 0.6, position.z + 3.5);
   }
 }
 
@@ -179,14 +280,10 @@ function partEvent(intersects, partitionList, modal, event) {
         clickSelecteObject = partitionObj.object;
         const index = clickSelecteObject.name.split('pipLine')[1];
         const name = parseInt(index) + 1 + '#';
+        const pipDataRef = pipDataList.find((item) => item.value.positionName === name);
         const option = {
           instanceId: clickSelecteObject.name,
-          sensorData: {
-            positionName: name,
-            temperature: 65,
-            smoke: 80,
-            co: 45,
-          },
+          sensorData: pipDataRef,
           threshold: { temperature: 20 },
           position: [],
           scale: 0.004,
@@ -211,6 +308,7 @@ function createMonitorPanel3D(modal, partition, options?) {
   box.setFromObject(partition);
   const center = box.getCenter(new THREE.Vector3());
   options.position = [center.x, center.y, center.z];
+  console.log('创建面板', options.position);
 
   panelManager.createPanel(modal.scene, options);
 
@@ -557,11 +655,16 @@ function addArrow(zhuqiModal, curveNum = 8) {
       pCube53.add(mesh);
 
       const geometry1 = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(vec3List), 100, 40, 8, false);
-      const mesh1 = new THREE.Mesh(geometry1, tubeMaterial);
+      const mesh1 = new THREE.Mesh(geometry1, tubeMaterial.clone());
       mesh.name = 'zk' + i;
       pCube53.add(mesh1);
+      pCube53.updateMatrixWorld();
+      pCube53.updateMatrix();
       mesh1.renderOrder = 1;
+      zhuqiZkList.push(mesh1);
     }
+
+    zhuqiZkList.reverse();
     return { texture };
   }
   return null;
@@ -655,7 +758,7 @@ function addUnit(zhuqiModal, unitNum = 8) {
         const material = new THREE.MeshPhongMaterial({
           color: '#f00',
         });
-        const mesh = new THREE.Mesh(geometry, tubeMaterial);
+        const mesh = new THREE.Mesh(geometry, tubeMaterial.clone());
         pCube53.add(mesh);
 
         // p1 p2 p3 p4
@@ -695,9 +798,10 @@ function addUnit(zhuqiModal, unitNum = 8) {
           width: 200,
           arrow: false,
         });
-        const mesh1 = new THREE.Mesh(geometry1, tubeMaterial);
+        const mesh1 = new THREE.Mesh(geometry1, tubeMaterial.clone());
         mesh1.renderOrder = 99;
         pCube53.add(mesh1);
+        gasUnitList.push(mesh1);
       }
     }
     return { arrowTexture: texture };
@@ -731,7 +835,6 @@ function addPip(zhuqiModal, curveNum = 8) {
 
     // 添加点击标识
     zhuqiModal.add(zhuqiguandaoClone);
-    // addMarker(zhuqiguandaoClone);
     zhuqiguandaoList.push(zhuqiguandaoClone);
   }
   zhuqiguandao.visible = false;
@@ -825,10 +928,11 @@ function pipAnimation(zhuqiguandaoList, startP, endP, zhuqiModal) {
       const points = curve.getPoints(30);
 
       const geometry = new THREE.TubeGeometry(new THREE.CatmullRomCurve3([position1, ...points, position3], false, 'chordal'), 20, 6, 10, false);
-      const mesh = new THREE.Mesh(geometry, tubeMaterial);
+      const mesh = new THREE.Mesh(geometry, tubeMaterial.clone());
       mesh.position.copy(zhuqiguandao.position);
       mesh.name = 'pip' + i;
       zhuqiModal.add(mesh);
+      zhuqiPipList.push(mesh);
 
       // 绘制点击区域
       // 鼠标经过时显示线框
@@ -876,6 +980,7 @@ function getMinGapThreshold(len, num) {
   return len / (2 * (num + 1));
 }
 
+/***绘制波纹标识 */
 function createRippleMarker() {
   // 主容器（方便整体控制）
   const marker = new THREE.Group();
@@ -977,3 +1082,4 @@ function addMarker(zhuqiguandao: THREE.Object3D) {
   zhuqiguandao.add(marker_llj);
   lljMarkerList.push(marker_llj);
 }
+/***绘制波纹标识 */