ソースを参照

[Feat 0000] 新增自动调控风门;王洼二矿风门、风窗、测风模型电子屏显示设备安装地点

hongrunxia 5 日 前
コミット
5f58029ddb

+ 252 - 0
src/views/vent/monitorManager/alarmMonitor/common/measurePoint copy.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="content">
+    <div v-if="shown === 'default'" class="content-item">
+      <div class="card-content" v-for="(item, index) in cards" :key="`vmac${index}`">
+        <div class="item-l">
+          <div class="label-l">{{ item.label }}</div>
+          <div class="value-l">{{ item.value }}</div>
+        </div>
+        <div class="item-r">
+          <div class="content-r" v-for="el in item.listR" :key="el.id">
+            <span>{{ `${el.label} : ` }}</span>
+            <span
+              :class="{
+                'status-f': el.label.includes('状态') && el.value == 1,
+                'status-l': el.label.includes('状态') && el.value == 0,
+              }"
+            >
+              {{ el.label.includes('状态') ? (el.value == 1 ? '异常' : el.value == 0 ? '正常' : el.value) : el.value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="shown === 'chart'" class="chart-item">
+      <div v-for="(item, index) in charts" :key="`acmt${index}`" class="chart-content">
+        <div class="text-center">
+          {{ item.label }}
+        </div>
+        <PredictionCurve :style="{ width: chartWidth || '474px' }" style="height: 300px; margin: 15px" :chart="item" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import BaseTab from '../../../gas/components/tab/baseTab.vue';
+  import PredictionCurve from './predictionCurve.vue';
+
+  // well i know this is trash but the time is reaching
+  defineProps<{
+    cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
+    charts: {
+      label: string;
+      time: Date;
+      data: [number, number, number, number];
+    }[];
+    title: string;
+    timeout?: number;
+    chartWidth?: string;
+  }>();
+
+  const shown = ref('default');
+  // const chartsConfig = ref<
+  //   {
+  //     label: string;
+  //     /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
+  //     indexMark: number;
+  //     x: string[];
+  //     y1: number[];
+  //     y2: number[];
+  //     y3: number[];
+  //     y4: number[];
+  //   }[]
+  // >([]);
+
+  // watch(
+  //   () => props.charts,
+  //   () => {
+  //     const arr = new Array(20).fill(0);
+  //     props.charts.forEach((el, i) => {
+  //       if (chartsConfig.value[i]) {
+  //         // 由于上面这些数据都是 20 项组成的,当指针移动到 20 时说明上次更新了最后一项
+  //         // 那么应该按先进后出的队列模式更新数据了
+  //         const val = chartsConfig.value[i];
+  //         if (val.indexMark === 20) {
+  //           val.x.shift();
+  //           val.y1.shift();
+  //           val.y2.shift();
+  //           val.y3.shift();
+  //           val.y4.shift();
+  //           val.indexMark = 19;
+  //         }
+  //         val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
+  //         val.y1[val.indexMark] = el.data[0];
+  //         val.y2[val.indexMark] = el.data[1];
+  //         val.y3[val.indexMark] = el.data[2];
+  //         val.y4[val.indexMark] = el.data[3];
+  //         // 指针向后移动1
+  //         val.indexMark += 1;
+  //       } else {
+  //         // 更新配置
+  //         // 初始化配置数据,按照一项数据,生成一个由 20 项数据组成的数组,该数组由此项数据衍生
+  //         const startFrom = moment(el.time);
+  //         chartsConfig.value[i] = {
+  //           label: el.label,
+  //           indexMark: 1,
+  //           x: arr.map(() => {
+  //             const str = startFrom.format('HH:mm:ss');
+  //             startFrom.add(props.timeout || 3000);
+  //             return str;
+  //           }),
+  //           y1: arr.map(() => {
+  //             return el.data[0];
+  //           }),
+  //           y2: arr.map(() => {
+  //             return el.data[1];
+  //           }),
+  //           y3: arr.map(() => {
+  //             return el.data[2];
+  //           }),
+  //           y4: arr.map(() => {
+  //             return el.data[3];
+  //           }),
+  //         };
+  //       }
+  //     });
+  //   },
+  //   { immediate: true, deep: true }
+  // );
+</script>
+<style lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .content {
+      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
+      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
+    }
+  }
+  .content {
+    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
+    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
+    height: 100%;
+    color: var(--vent-font-color);
+
+    .title {
+      height: 30px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .text {
+        font-family: 'douyuFont';
+        font-size: 14px;
+      }
+    }
+
+    .content-item {
+      display: flex;
+      // justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+
+      .card-content {
+        position: relative;
+        width: 30%;
+        height: 128px;
+        margin: 0px 15px 15px 15px;
+        background: var(--image-bot-area) no-repeat center;
+        background-size: 100% 100%;
+
+        .item-l {
+          position: absolute;
+          left: 32px;
+          top: 50%;
+          transform: translate(0, -50%);
+          width: 89px;
+          height: 98px;
+          background: var(--image-bot-area1) no-repeat center;
+
+          .label-l {
+            position: absolute;
+            left: 50%;
+            top: 7px;
+            color: var(--vent-font-color);
+            font-size: 14px;
+            transform: translate(-50%, 0);
+          }
+
+          .value-l {
+            position: absolute;
+            left: 50%;
+            top: 50px;
+            transform: translate(-50%, 0);
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: var(--vent-table-action-link);
+          }
+        }
+
+        .item-r {
+          position: absolute;
+          left: 132px;
+          top: 50%;
+          transform: translate(0, -50%);
+          height: 128px;
+          padding: 5px 0px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          box-sizing: border-box;
+
+          .content-r {
+            display: flex;
+
+            span {
+              font-size: 14px;
+              color: var(--vent-font-color);
+
+              &:first-child {
+                display: inline-block;
+                width: 68px;
+              }
+
+              &:last-child {
+                display: inline-block;
+                width: calc(100% - 68px);
+              }
+            }
+
+            .status-f {
+              color: #ff0000;
+            }
+
+            .status-l {
+              color: var(--vent-table-action-link);
+            }
+          }
+        }
+      }
+    }
+
+    .chart-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+
+      .chart-content {
+        // border: 1px solid var(--vent-base-border);
+        box-shadow: inset 0px 0px 10px 1px var(--vent-modal-box-shadow);
+        padding: 10px 0;
+        margin: 0 5px 5px 5px;
+      }
+    }
+  }
+</style>

+ 8 - 1
src/views/vent/monitorManager/compressor/components/nitrogenHome_dltj.vue

@@ -720,12 +720,19 @@
     { immediate: true }
   );
 
+  watch(
+    () => props.deviceId,
+    async (deviceId) => {
+      if (deviceId) await getCamera(deviceId, playerRef.value);
+    }
+  );
+
   onMounted(async () => {
     await getMonitor(true);
     await mountedThree().then(() => {
       loading.value = false;
     });
-    await getCamera(props.deviceId, playerRef.value);
+    // await getCamera(props.deviceId, playerRef.value);
   });
 
   onUnmounted(() => {

+ 1 - 0
src/views/vent/monitorManager/gateMonitor/gate.threejs.noStation.ts

@@ -81,6 +81,7 @@ class FmNoStation {
     const textArr = [
       {
         text: `远程控制自动风门`,
+        // text: `${selectData.strinstallpos}`,
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',

+ 4 - 2
src/views/vent/monitorManager/gateMonitor/gate.threejs.qd.ts

@@ -4,6 +4,7 @@ import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import UseThree from '../../../../utils/threejs/useThree';
 import { drawHot } from '/@/utils/threejs/util';
 import { useAppStore } from '/@/store/modules/app';
+import { useGlobSetting } from '/@/hooks/setting';
 
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
@@ -70,6 +71,7 @@ class Fm3 {
 
   /* 添加监控数据 */
   addMonitorText(selectData) {
+    const { sysOrgCode } = useGlobSetting();
     if (!this.group) {
       return;
     }
@@ -83,11 +85,11 @@ class Fm3 {
 
     const textArr = [
       {
-        text: `远程控制自动风门`,
+        text: `${sysOrgCode == 'zlnxnywwek' ? selectData.strinstallpos : '远程控制自动风门'}`, //王洼二矿需要特殊处理
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 120,
+        x: sysOrgCode == 'zlnxnywwek' ? (450 - selectData.strinstallpos.length * 22) / 2 : 120,
         y: 100,
       },
       {

+ 156 - 42
src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -5,8 +5,12 @@ 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 FmThreeTl from './gate.threejs.three.tl';
+import FmDc from './gate.threejs.window';
+import FmDcHJG from './gate.threejs.window.hjg';
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
+import { getDictItemsByCode } from '/@/utils/dict';
 import { useGlobSetting } from '/@/hooks/setting';
 
 // 模型对象、 文字对象
@@ -17,6 +21,7 @@ let model,
   fmXr: FmXR, //行人风门
   fmTwoSs, //
   fmThreeTl, // 三道推拉
+  fmWindowHjg, // 带风窗
   fmWindow, // 带风窗
   group: THREE.Object3D,
   fmType = '',
@@ -56,6 +61,8 @@ const startAnimation = () => {
       fmTwoSs?.mouseUpModel.call(fmTwoSs);
     } else if (fmType === 'fmWindow') {
       fmWindow.mouseUpModel.call(fmWindow);
+    } else if (fmType === 'fmWindowHjg') {
+      fmWindowHjg.mouseUpModel();
     }
   });
 };
@@ -78,6 +85,8 @@ const mouseEvent = (event) => {
         fmThreeTl?.mousedownModel.call(fmThreeTl, intersects);
       } else if (fmType === 'fmWindow' && fmWindow) {
         fmWindow.mousedownModel.call(fmWindow, intersects);
+      } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+        fmWindowHjg.mousedownModel(intersects);
       }
     });
     console.log('摄像头控制信息', model.orbitControls, model.camera);
@@ -99,6 +108,8 @@ export const addMonitorText = (selectData) => {
     fmThreeTl?.addMonitorText.call(fmThreeTl, selectData);
   } else if (fmType === 'fmWindow' && fmWindow) {
     fmWindow.addMonitorText.call(fmWindow, selectData);
+  } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+    fmWindowHjg.addMonitorText(selectData);
   }
 };
 
@@ -121,6 +132,8 @@ export const play = (handlerState, flag?) => {
     return fm2.play.call(fm2, handlerState, flag);
   } else if (fmType === 'fmWindow' && fmWindow) {
     return fmWindow.play.call(fmWindow, handlerState, flag);
+  } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+    return fmWindowHjg.play.call(fmWindowHjg, handlerState, flag);
   } else if (fmType === 'fm3' && fm3) {
     return fm3.play.call(fm3, handlerState, flag);
   } else if (fmType === 'fmXr' && fmXr) {
@@ -132,26 +145,22 @@ export const play = (handlerState, flag?) => {
   }
 };
 
-export const playWindow = (rotationParam, flag) => {
-  if (fmType === 'fmWindow' && fmWindow) {
-    return fmWindow.playWindow.call(fmWindow, rotationParam, flag);
-  }
-};
+// export const playWindow = (rotationParam, flag) => {
+//   if (fmType === 'fmWindow' && fmWindow) {
+//     return fmWindow.playWindow.call(fmWindow, rotationParam, flag);
+//   } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+//     return fmWindowHjg.playWindow.call(fmWindowHjg, rotationParam, flag);
+//   }
+// };
 
 export function computePlay(data, maxarea, isFirst = false) {
   // 前门后窗  rearPresentValue1
   // 前门前窗 frontPresentValue1
   // 后门后窗 rearPresentValue2
   // 后门前窗 frontPresentValue2
-  // if (data.OpenDegree1 || data.OpenDegree2) {
-  //   maxarea = 90;
-  //   rotationParam.frontDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree1);
-  //   rotationParam.backDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree2);
-  //   rotationParam.frontDeg1 = (90 / maxarea) * Number(data.OpenDegree1) || 0;
-  //   rotationParam.backDeg1 = (90 / maxarea) * Number(data.OpenDegree2) || 0;
-  //   fm2.playWindow.call(fm3, rotationParam, 1);
-  //   fm2.playWindow.call(fm3, rotationParam, 2);
-  // }
+  // data['frontArea'] = 70;
+  // data['rearArea'] = 40;
+
   if (data.rearPresentValue1 || data.frontPresentValue1 || data.rearPresentValue2 || data.frontPresentValue2) {
     maxarea = 90;
     rotationParam.frontLeftDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.frontPresentValue1);
@@ -162,10 +171,31 @@ export function computePlay(data, maxarea, isFirst = false) {
     rotationParam.backRightDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearPresentValue2);
     rotationParam.backLeftDeg1 = (90 / maxarea) * Number(data.frontPresentValue2) || 0;
     rotationParam.backRightDeg1 = (90 / maxarea) * Number(data.rearPresentValue2) || 0;
-    fmWindow.playWindow(rotationParam, 1);
-    fmWindow.playWindow(rotationParam, 2);
-    fmWindow.playWindow(rotationParam, 3);
-    fmWindow.playWindow(rotationParam, 4);
+
+    // rotationParam.backLeftDeg1 = 90;
+
+    if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+      fmWindowHjg.playWindow(rotationParam, 1);
+      fmWindowHjg.playWindow(rotationParam, 2);
+      fmWindowHjg.playWindow(rotationParam, 3);
+      fmWindowHjg.playWindow(rotationParam, 4);
+    }
+  } else if (data.frontArea && data.rearArea) {
+    maxarea = 90;
+    rotationParam.frontLeftDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.frontArea);
+    rotationParam.frontRightDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.frontArea);
+    rotationParam.frontLeftDeg1 = (90 / maxarea) * Number(data.frontArea) || 0;
+    rotationParam.frontRightDeg1 = (90 / maxarea) * Number(data.frontArea) || 0;
+    rotationParam.backLeftDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearArea);
+    rotationParam.backRightDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearArea);
+    rotationParam.backLeftDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
+    rotationParam.backRightDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
+    if (fmType === 'fmWindow' && fmWindow) {
+      fmWindow.playWindow(rotationParam, 1);
+      fmWindow.playWindow(rotationParam, 2);
+      fmWindow.playWindow(rotationParam, 3);
+      fmWindow.playWindow(rotationParam, 4);
+    }
   }
 }
 
@@ -268,6 +298,35 @@ export const setModelType = (type) => {
           0.6
         );
       }, 300);
+    } else if (fmType === 'fmWindowHjg' && fmWindowHjg && fmWindowHjg.group) {
+      if (fmWindowHjg.clipActionArr.frontDoor && fmWindowHjg.clipActionArr.backDoor) {
+        fmWindowHjg.clipActionArr.frontDoor.reset();
+        fmWindowHjg.clipActionArr.frontDoor.time = 0.5;
+        fmWindowHjg.clipActionArr.backDoor.reset();
+        fmWindowHjg.clipActionArr.backDoor.time = 0.5;
+
+        fmWindowHjg.clipActionArr.frontDoor.stop();
+        fmWindowHjg.clipActionArr.backDoor.stop();
+      }
+
+      model.startAnimation = fmWindowHjg.render.bind(fmWindowHjg);
+      model.scene.remove(group);
+      group = fmWindowHjg.group;
+      const oldCameraPosition = { x: -761, y: 569, z: 871 };
+      setTimeout(async () => {
+        resolve(null);
+        model.scene.add(fmWindowHjg.group);
+        const position = { x: -2.28, y: -0.91, z: -5.68 };
+
+        await animateCamera(
+          oldCameraPosition,
+          { x: -2.27, y: -0.91, z: -5.67 },
+          { x: 66.257, y: 57.539, z: 94.313 },
+          { x: position.x, y: position.y, z: position.z },
+          model,
+          0.6
+        );
+      }, 300);
     } else if (fmType === 'fmThreeTl' && fmThreeTl && fmThreeTl.group) {
       if (fmThreeTl.clipActionArr.frontDoor && fmThreeTl.clipActionArr.backDoor && fmThreeTl.clipActionArr.centerDoor) {
         fmThreeTl.clipActionArr.frontDoor.reset();
@@ -423,8 +482,8 @@ export const initCameraCanvas = async (playerVal1) => {
 
 export const mountedThree = (playerDom) => {
   const { sysOrgCode } = useGlobSetting();
+  debugger;
   // const sysOrgCode = 'gsgszdek';
-
   return new Promise(async (resolve) => {
     model = new UseThree('#damper3D', '', '#deviceDetail');
     model.setEnvMap('test1.hdr');
@@ -440,42 +499,95 @@ export const mountedThree = (playerDom) => {
         const FmTwoYj = await import('./gate.threejs.two.yj');
         if (FmTwoYj) fmTwoSs = new FmTwoYj.default(model);
         fmTwoSs.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
         break;
-      case 'zmjthjg':
+      case 'zmjthjg': //黄家沟
         const FmNoSubStation = await import('./gate.threejs.noStation');
         if (FmNoSubStation) fm3 = new FmNoSubStation.default(model);
         if (fm3) fm3.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
         break;
-      case 'gsgszdek':
-        const FmDc = await import('./gate.threejs.window');
-        if (FmDc) fmWindow = new FmDc.default(model);
-        if (fmWindow) fmWindow.mountedThree(playerDom);
+      case 'gsgszdek': //大海则
+        fmWindowHjg = new FmDc(model);
+        if (fmWindowHjg) fmWindowHjg.mountedThree(playerDom);
         fm3 = new Fm3(model);
         fm3.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
         break;
-      case 'sdmtjtbltmk':
+      case 'sdmtjtbltmk': //补连塔
         fm3 = new Fm3(model);
         fm3.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
+        // 三道门
+        fmThreeTl = new FmThreeTl(model);
+        if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
         break;
       default:
-        fm3 = new Fm3(model);
-        fm3.mountedThree(playerDom);
-        fmTwoSs = new FmTwoSs(model);
-        fmTwoSs.mountedThree(playerDom);
-        fm2 = new Fm2(model);
-        fm2.mountedThree(playerDom);
-        break;
+        debugger;
+        // 根据字典加载模型
+        const dictCodes = getDictItemsByCode('gateStyle');
+        if (dictCodes.length > 0) {
+          for (let i = 0; i < dictCodes.length; i++) {
+            const dict = dictCodes[i];
+            switch (dict.value) {
+              case 'fmXr':
+                fmXr = new FmXR(model);
+                fmXr.mountedThree(playerDom);
+                break;
+              case 'fmYy':
+                fm1 = new Fm1(model);
+                fm1.mountedThree(playerDom);
+                break;
+              case 'gate_qd':
+                fm3 = new Fm3(model);
+                await fm3.mountedThree();
+                break;
+              case 'fmSs':
+                fmTwoSs = new FmTwoSs(model);
+                await fmTwoSs.mountedThree();
+                break;
+              case 'fmtl3':
+                fmThreeTl = new FmThreeTl(model);
+                await fmThreeTl.mountedThree();
+                break;
+              case 'fmSs3':
+                fm2 = new Fm2(model);
+                await fm2.mountedThree();
+                break;
+              case 'fm_fc_hjg':
+                fmWindowHjg = new FmDcHJG(model);
+                await fmWindowHjg.mountedThree();
+                break;
+              case 'fm_fc':
+                fmWindow = new FmDc(model);
+                await fmWindow.mountedThree();
+                break;
+            }
+          }
+          resolve(null);
+        } else {
+          fm3 = new Fm3(model);
+          fm3.mountedThree(playerDom);
+          fmTwoSs = new FmTwoSs(model);
+          fmTwoSs.mountedThree(playerDom);
+          fm2 = new Fm2(model);
+          fm2.mountedThree(playerDom);
+          // 三道门
+          fmThreeTl = new FmThreeTl(model);
+          if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
+          fmXr = new FmXR(model);
+          fmXr.mountedThree(playerDom);
+          // 液压风门
+          fm1 = new Fm1(model);
+          fm1.mountedThree(playerDom);
+          resolve(null);
+          break;
+        }
     }
-    // 三道门
-    const FmThreeTl = await import('./gate.threejs.three.tl');
-    if (FmThreeTl) fmThreeTl = new FmThreeTl.default(model);
-    if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
-    // 行人风门
-    fmXr = new FmXR(model);
-    fmXr.mountedThree(playerDom);
-    fm1 = new Fm1(model);
-    fm1.mountedThree(playerDom);
-    resolve(null);
 
     model.animate();
     startAnimation();
@@ -490,6 +602,7 @@ export const destroy = () => {
     if (fm3) fm3.destroy();
     if (fmXr) fmXr.destroy();
     if (fmTwoSs) fmTwoSs.destroy();
+    if (fmWindowHjg) fmWindowHjg.destroy();
     if (fmWindow) fmWindow.destroy();
     if (fmThreeTl) fmThreeTl.destroy();
     fm1 = null;
@@ -497,6 +610,7 @@ export const destroy = () => {
     fm3 = null;
     fmXr = null;
     fmWindow = null;
+    fmWindowHjg = null;
     fmThreeTl = null;
     fmTwoSs = null;
     group = null;

+ 543 - 0
src/views/vent/monitorManager/gateMonitor/gate.threejs.window.hjg.ts

@@ -0,0 +1,543 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
+import gsap from 'gsap';
+import { drawHot } from '/@/utils/threejs/util';
+import { useAppStore } from '/@/store/modules/app';
+
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class FmDcHJG {
+  modelName = 'fmDc';
+  model; //
+  group;
+  isLRAnimation = true; // 是否开启左右摇摆动画
+  direction = 1; // 摇摆方向
+  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
+  player1;
+  player2;
+  deviceDetailCSS3D;
+  playerStartClickTime1 = new Date().getTime();
+  playerStartClickTime2 = new Date().getTime();
+
+  fmClock = new THREE.Clock();
+  mixers: THREE.AnimationMixer | undefined;
+  appStore = useAppStore();
+
+  // backLeftDamperOpenMesh;
+  // backLeftDamperClosedMesh;
+  // frontLeftDamperOpenMesh;
+  // frontLeftDamperClosedMesh;
+  // backRightDamperOpenMesh;
+  // backRightDamperClosedMesh;
+  // frontRightDamperOpenMesh;
+  // frontRightDamperClosedMesh;
+
+  clipActionArr = {
+    frontDoor: null as unknown as THREE.AnimationAction,
+    backDoor: null as unknown as THREE.AnimationAction,
+  };
+  windowsActionArr = {
+    frontLeftWindow: <THREE.Mesh[]>[],
+    backLeftWindow: <THREE.Mesh[]>[],
+    frontRightWindow: <THREE.Mesh[]>[],
+    backRightWindow: <THREE.Mesh[]>[],
+  };
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {}
+  // 重置摄像头
+  resetCamera() {
+    this.model.camera.far = 274;
+    this.model.orbitControls?.update();
+    this.model.camera.updateProjectionMatrix();
+  }
+  // 设置模型位置
+  setModalPosition() {
+    this.group?.scale.set(22, 22, 22);
+    this.group?.position.set(-20, 20, 9);
+  }
+
+  /* 添加监控数据 */
+  addMonitorText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    const screenDownText = VENT_PARAM['modalText']
+      ? VENT_PARAM['modalText']
+      : History_Type['type'] == 'remote'
+      ? `国能神东煤炭集团监制`
+      : '煤炭科学技术研究院有限公司研制';
+
+    const screenDownTextX = 80 - (screenDownText.length - 10) * 6;
+
+    const textArr = [
+      {
+        text: `远程控制自动风门`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 120,
+        y: 100,
+      },
+      {
+        text: `净通行高度(m):`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 155,
+      },
+      {
+        text: `${selectData.fclearheight ? selectData.fclearheight : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 290,
+        y: 155,
+      },
+      {
+        text: `净通行宽度(m): `,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 215,
+      },
+      {
+        text: ` ${selectData.fclearwidth ? selectData.fclearwidth : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 215,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 275,
+      },
+      {
+        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 275,
+      },
+      {
+        text: screenDownText,
+        font: 'normal 28px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: screenDownTextX,
+        y: 325,
+      },
+    ];
+    //
+    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      textMap.colorSpace = THREE.SRGBColorSpace;
+      const textMaterial = new THREE.MeshBasicMaterial({
+        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
+        map: textMap, // 设置纹理贴图
+        transparent: true,
+        side: THREE.FrontSide, // 这里是双面渲染的意思
+      });
+      textMaterial.blending = THREE.CustomBlending;
+      const monitorPlane = this.group.getObjectByName('monitorText');
+      if (monitorPlane) {
+        monitorPlane.material = textMaterial;
+      } else {
+        const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
+        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
+        planeMesh.name = 'monitorText';
+        planeMesh.scale.set(0.002, 0.002, 0.002);
+        planeMesh.position.set(4.025, 0.67, -0.27);
+        this.group.add(planeMesh);
+      }
+      textMap.dispose();
+    });
+  }
+
+  /** 添加热点 */
+  drawHots() {
+    const hotPositions = [
+      { x: -0.37, y: 0.26, z: -0.32 },
+      { x: 0.28, y: -0.2, z: -0.43 },
+      { x: 0.55, y: -0.22, z: -0.38 },
+    ];
+    for (let i = 0; i < 3; i++) {
+      const hotPoint = drawHot(0.1);
+      const position = hotPositions[i];
+      hotPoint.scale.set(0.1, 0.1, 0.1);
+      hotPoint.position.set(position.x, position.y, position.z);
+      hotPoint.name = 'hotPoint' + i;
+      this.group?.add(hotPoint);
+    }
+  }
+
+  /* 风门动画 */
+  render() {
+    if (!this.model) {
+      return;
+    }
+
+    if (this.mixers && this.fmClock.running) {
+      this.mixers.update(2);
+    }
+  }
+
+  /* 点击风窗,风窗全屏 */
+  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
+    if (this.animationTimer) {
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
+    }
+  }
+
+  mouseUpModel() {}
+
+  /* 提取风门序列帧,初始化前后门动画 */
+  initAnimation() {
+    const fmGroup = this.group?.getObjectByName('fm-window-hjg');
+    if (fmGroup) {
+      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.includes('_1')) {
+          fontTracks.push(track);
+        } else {
+          backTracks.push(track);
+        }
+      }
+      const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
+      // const frontGroup = parentGroup.getObjectByName('FengMen2');
+      // const backGroup = parentGroup.getObjectByName('FengMen1');
+      this.mixers = new THREE.AnimationMixer(parentGroup);
+
+      const frontDoor = new THREE.AnimationClip('frontDoor', 2.5, fontTracks);
+      const frontClipAction = this.mixers.clipAction(frontDoor, parentGroup);
+      frontClipAction.clampWhenFinished = true;
+      frontClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.frontDoor = frontClipAction;
+
+      const backDoor = new THREE.AnimationClip('backDoor', 2.5, backTracks);
+      const backClipAction = this.mixers.clipAction(backDoor, parentGroup);
+      backClipAction.clampWhenFinished = true;
+      backClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.backDoor = backClipAction;
+    }
+    // 编写风窗
+  }
+  /* 提取风门序列帧,初始化前后门动画 */
+  initWindowAnimation() {
+    const meshArr01: THREE.Object3D[] = []; //front left
+    const meshArr02: THREE.Object3D[] = []; //front right
+    const meshArr03: THREE.Object3D[] = []; //back left
+    const meshArr04: THREE.Object3D[] = []; //back right
+    const windowGroup = new THREE.Group();
+    windowGroup.name = 'hiddenGroup';
+    const fmGroup = this.group?.getObjectByName('fm-window-hjg');
+    const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
+    const frontGroup = parentGroup.getObjectByName('FengMen2');
+    const backGroup = parentGroup.getObjectByName('FengMen');
+    const frontLeftObj = frontGroup.getObjectByName('FengMen_L_1');
+    const frontRightObj = frontGroup.getObjectByName('FengMen_R_1');
+    const backLeftObj = backGroup.getObjectByName('FengMen_L');
+    const backRightObj = backGroup.getObjectByName('FengMen_R');
+    frontLeftObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr01.push(obj);
+      }
+    });
+    frontRightObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr02.push(obj);
+      }
+    });
+    backLeftObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr03.push(obj);
+      }
+    });
+    backRightObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr04.push(obj);
+      }
+    });
+
+    this.windowsActionArr.frontLeftWindow = meshArr01;
+    this.windowsActionArr.frontRightWindow = meshArr02;
+    this.windowsActionArr.backLeftWindow = meshArr03;
+    this.windowsActionArr.backRightWindow = meshArr04;
+    this.group?.add(windowGroup);
+  }
+
+  deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
+    const element = document.getElementById('deviceCard') as HTMLElement;
+    if (element) {
+      this.deviceDetailCSS3D = new CSS2DObject(element);
+      this.deviceDetailCSS3D.name = 'deviceCard';
+      this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
+      this.deviceDetailCSS3D.visible = false;
+      // this.model.scene.add(this.deviceDetailCSS3D);
+      this.group.add(this.deviceDetailCSS3D);
+    }
+  }
+
+  // 播放动画
+  play(handlerState, timeScale = 0.01) {
+    let handler = () => {};
+    if (this.clipActionArr.frontDoor && this.clipActionArr.backDoor) {
+      switch (handlerState) {
+        case 1: // 打开前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset();
+            this.clipActionArr.frontDoor.time = 0;
+            this.clipActionArr.frontDoor.timeScale = timeScale;
+            // this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+
+            // 显示打开前门文字
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = true;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = false;
+          };
+          break;
+        case 2: // 关闭前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset(); //
+            this.clipActionArr.frontDoor.time = 2.5;
+            this.clipActionArr.frontDoor.timeScale = -timeScale;
+            // this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
+          };
+          break;
+        case 3: // 打开后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 0;
+            this.clipActionArr.backDoor.timeScale = timeScale;
+            // this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = true;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = false;
+          };
+          break;
+        case 4: // 关闭后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 2.5;
+            this.clipActionArr.backDoor.timeScale = -timeScale;
+            // this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
+          };
+          break;
+        default:
+      }
+      handler();
+    }
+  }
+
+  playWindow(rotationParam, flag) {
+    if (
+      this.windowsActionArr.frontLeftWindow.length <= 0 ||
+      this.windowsActionArr.frontRightWindow.length <= 0 ||
+      this.windowsActionArr.backLeftWindow.length <= 0 ||
+      this.windowsActionArr.backRightWindow.length <= 0
+    ) {
+      return;
+    }
+    if (flag === 1) {
+      // 前门左风窗动画
+      this.windowsActionArr.frontLeftWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.frontLeftDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.frontLeftDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 2) {
+      // 后门左风窗动画
+      this.windowsActionArr.backLeftWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.backLeftDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.backLeftDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 3) {
+      // 前门右风窗动画
+      this.windowsActionArr.frontRightWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.frontRightDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.frontRightDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 4) {
+      // 后门右风窗动画
+      this.windowsActionArr.backRightWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.backRightDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.backRightDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 0) {
+      (
+        [
+          ...this.windowsActionArr.frontLeftWindow,
+          ...this.windowsActionArr.frontRightWindow,
+          ...this.windowsActionArr.backLeftWindow,
+          ...this.windowsActionArr.backRightWindow,
+        ] as THREE.Mesh[]
+      ).forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: 0,
+          overwrite: true,
+        });
+      });
+    }
+  }
+
+  async initCamera(dom1) {
+    const videoPlayer1 = dom1;
+    this.player1 = dom1;
+    let monitorPlane: THREE.Mesh | null = null;
+    if (!videoPlayer1) {
+      const textArr = [
+        {
+          text: `无信号输入`,
+          font: 'normal 40px Arial',
+          color: '#009900',
+          strokeStyle: '#002200',
+          x: 170,
+          y: 40,
+        },
+      ];
+      const canvas = await getTextCanvas(320, 180, '', 'noSinge.png');
+
+      let textMaterial: THREE.MeshBasicMaterial | null = null;
+      if (canvas) {
+        const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+        textMaterial = new THREE.MeshBasicMaterial({
+          map: textMap, // 设置纹理贴图
+          transparent: true,
+          side: THREE.DoubleSide, // 这里是双面渲染的意思
+        });
+        textMaterial.blending = THREE.CustomBlending;
+
+        const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
+        monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
+
+        textMaterial.dispose();
+        planeGeometry.dispose();
+        textMap.dispose();
+      }
+    }
+    const player1 = this.group.getObjectByName('player1');
+    if (player1) {
+      this.model.clearMesh(player1);
+      this.group.remove(player1);
+    }
+    const noPlayer1 = this.group.getObjectByName('noPlayer1');
+    if (noPlayer1) {
+      this.model.clearMesh(noPlayer1);
+      this.group.remove(noPlayer1);
+    }
+    if (!videoPlayer1 && videoPlayer1 === null) {
+      if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
+        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);
+        this.group?.add(planeMesh.clone());
+      }
+    } else if (videoPlayer1) {
+      try {
+        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.rotation.y = -Math.PI;
+          this.group.add(mesh);
+        }
+      } catch (error) {
+        console.log('视频信号异常');
+      }
+    }
+  }
+
+  mountedThree(playerDom) {
+    this.group = new THREE.Object3D();
+    this.group.name = this.modelName;
+    return new Promise((resolve) => {
+      this.model.setGLTFModel(['fm-window-hjg'], this.group).then(() => {
+        console.log('带风窗风门模型----->', this.group);
+        this.setModalPosition();
+        // 初始化左右摇摆动画;
+        this.initAnimation();
+        this.initWindowAnimation();
+        // this.drawHots();
+        this.addLight();
+        // this.deviceDetailCard();
+        this.model.animate();
+
+        resolve(this.model);
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      if (this.mixers) {
+        this.mixers.uncacheClip(this.clipActionArr.frontDoor.getClip());
+        this.mixers.uncacheClip(this.clipActionArr.backDoor.getClip());
+        this.mixers.uncacheAction(this.clipActionArr.frontDoor.getClip(), this.group);
+        this.mixers.uncacheAction(this.clipActionArr.backDoor.getClip(), this.group);
+        this.mixers.uncacheRoot(this.group);
+
+        if (this.model.animations[0]) this.model.animations[0].tracks = [];
+      }
+      this.model.clearGroup(this.group);
+      this.clipActionArr.backDoor = undefined;
+      this.clipActionArr.frontDoor = undefined;
+
+      this.windowsActionArr.frontWindow = undefined;
+      this.windowsActionArr.backWindow = undefined;
+
+      this.mixers = undefined;
+    }
+  }
+}
+export default FmDcHJG;

+ 14 - 14
src/views/vent/monitorManager/gateMonitor/gate.threejs.window.ts

@@ -98,7 +98,7 @@ class FmDc {
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 290,
+        x: 295,
         y: 155,
       },
       {
@@ -114,7 +114,7 @@ class FmDc {
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 280,
+        x: 290,
         y: 215,
       },
       {
@@ -130,7 +130,7 @@ class FmDc {
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 280,
+        x: 290,
         y: 275,
       },
       {
@@ -139,7 +139,7 @@ class FmDc {
         color: '#00FF00',
         strokeStyle: '#007400',
         x: screenDownTextX,
-        y: 325,
+        y: 320,
       },
     ];
     //
@@ -215,13 +215,13 @@ class FmDc {
         backTracks: any[] = [];
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i];
-        if (track.name.includes('_1')) {
+        if (track.name.includes('Men_1') || track.name.includes('Men_2')) {
           fontTracks.push(track);
-        } else {
+        } else if (track.name.includes('Men_3') || track.name.includes('Men_4')) {
           backTracks.push(track);
         }
       }
-      const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
+      const parentGroup = fmGroup.getObjectByName('QiDongTiaoJieFengMen_1');
       // const frontGroup = parentGroup.getObjectByName('FengMen2');
       // const backGroup = parentGroup.getObjectByName('FengMen1');
       this.mixers = new THREE.AnimationMixer(parentGroup);
@@ -249,13 +249,13 @@ class FmDc {
     const windowGroup = new THREE.Group();
     windowGroup.name = 'hiddenGroup';
     const fmGroup = this.group?.getObjectByName('fm-window');
-    const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
-    const frontGroup = parentGroup.getObjectByName('FengMen2');
-    const backGroup = parentGroup.getObjectByName('FengMen');
-    const frontLeftObj = frontGroup.getObjectByName('FengMen_L_1');
-    const frontRightObj = frontGroup.getObjectByName('FengMen_R_1');
-    const backLeftObj = backGroup.getObjectByName('FengMen_L');
-    const backRightObj = backGroup.getObjectByName('FengMen_R');
+    const parentGroup = fmGroup.getObjectByName('QiDongTiaoJieFengMen_1');
+    const frontGroup = parentGroup.getObjectByName('FengMen_1');
+    const backGroup = parentGroup.getObjectByName('FengMen_2');
+    const frontLeftObj = frontGroup.getObjectByName('Men_2').getObjectByName('shanye_2');
+    const frontRightObj = frontGroup.getObjectByName('Men_1').getObjectByName('shanye_1');
+    const backLeftObj = backGroup.getObjectByName('Men_4').getObjectByName('shanye_4');
+    const backRightObj = backGroup.getObjectByName('Men_3').getObjectByName('shanye_3');
     frontLeftObj.traverse((obj) => {
       if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
         obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);

+ 74 - 31
src/views/vent/monitorManager/gateMonitor/index.vue

@@ -31,8 +31,10 @@
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(4)">关闭后门</div>
         <div v-if="hasPermission('btn:totalControl') || selectData['isShowGatesContrl']" class="button-box" @click="playAnimation(5)">同时打开</div>
         <div v-if="hasPermission('btn:totalControl') || selectData['isShowGatesContrl']" class="button-box" @click="playAnimation(6)">同时关闭</div>
-        <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(10)">A窗控制</div>
-        <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(11)">B窗控制</div>
+        <template v-if="selectData['gateStyle'] && selectData['gateStyle'].includes('fm_fc')">
+          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(10)">A窗控制</div>
+          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(11)">B窗控制</div>
+        </template>
       </div>
       <!-- 控制模式 -->
       <div class="top-right row" v-if="hasPermission('btn:remote')">
@@ -317,7 +319,7 @@
   import AlarmHistoryTableHj from './components/AlarmHistoryTableHj.vue';
   import HandleModal from './modal.vue';
   import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-  import { mountedThree, addMonitorText, play, destroy, setModelType, computePlay, playWindow } from './gate.threejs';
+  import { mountedThree, addMonitorText, play, destroy, setModelType, computePlay } from './gate.threejs';
   import { deviceControlApi } from '/@/api/vent/index';
   import { message } from 'ant-design-vue';
   import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
@@ -332,6 +334,7 @@
   import { getDictItems } from '/@/api/common/api';
   import { render } from '/@/utils/common/renderUtils';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { getDictItemsByCode } from '/@/utils/dict';
 
   const { hasPermission } = usePermission();
   const { sysOrgCode } = useGlobSetting();
@@ -472,27 +475,62 @@
     frontDeviceState = 0; //记录设备状态,为了与下一次监测数据做比较
     rearDeviceState = 0; //记录设备状态,为了与下一次监测数据做比较
     midDeviceState = 0; //记录设备状态,为了与下一次监测数据做比较
-    // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
+
     let type;
-    if (selectData['doorUse'] == 2) {
-      type = 'fmXr';
+    const dictCodes = getDictItemsByCode('gateStyle');
+    if (selectData && dictCodes && dictCodes.length > 0) {
+      const gateStyle = selectData['gateStyle'];
+      switch (gateStyle) {
+        case 'gate_qd':
+          type = 'fm3';
+          break;
+        case 'fmSs':
+          type = 'fm3';
+          break;
+        case 'fmtl3':
+          type = 'fmThreeTl';
+          break;
+        case 'fmSs':
+          type = 'fmTwoSs';
+          break;
+        case 'fm_fc':
+          type = 'fmWindow';
+          break;
+        case 'fmXr':
+          type = 'fmXr';
+          break;
+        case 'fmYy':
+          type = 'fm1';
+          break;
+        case 'fmSs3':
+          type = 'fm2';
+          break;
+        case 'fm_fc_hjg':
+          type = 'fmWindowHjg';
+          break;
+      }
     } else {
-      if (selectData.deviceType == 'gate_ss') {
-        type = 'fm2';
-        // type = 'fmWindow';
-      } else if (selectData.deviceType == 'gate_qd' || selectData.deviceType == 'gate_normal') {
-        type = 'fm3';
-      } else if (selectData.deviceType == 'gate_ss_two' || selectData.deviceType == 'gate_ss_two1') {
-        type = 'fmTwoSs';
-      } else if (selectData.deviceType == 'gate_nomal3' || selectData.ndoorcount == '3') {
+      type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
+      if (selectData['doorUse'] == 2) {
+        type = 'fmXr';
+      } else if (selectData.ndoorcount == '3' || selectData.deviceType == 'gate_nomal3') {
         type = 'fmThreeTl';
-      } else if (selectData.deviceType == 'gate_tj') {
-        type = 'fmWindow';
       } else {
-        type = 'fm1'; // 液压
+        if (selectData.deviceType == 'gate_ss') {
+          type = 'fm2';
+          // type = 'fmWindow';
+        } else if (selectData.deviceType == 'gate_qd' || selectData.deviceType == 'gate_normal') {
+          type = 'fm3';
+        } else if (selectData.deviceType == 'gate_ss_two' || selectData.deviceType == 'gate_ss_two1') {
+          type = 'fmTwoSs';
+        } else if (selectData.deviceType == 'gate_tj') {
+          type = 'fmWindow';
+        } else {
+          type = 'fm1'; // 液压
+        }
       }
     }
-
+    debugger;
     setModelType(type).then(async () => {
       addMonitorText(selectData);
       loading.value = false;
@@ -861,7 +899,7 @@
   function monitorAnimation(selectData) {
     const timeScale = 0.005;
     // 带风窗 风窗动画
-    playWindowAnimation(selectData);
+    if (selectData['gateStyle'] && selectData['gateStyle'].includes('fm_fc')) playWindowAnimation(selectData);
 
     if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
       isFrontOpenRunning = true;
@@ -996,19 +1034,24 @@
     modelList.value = await getDictItems('gateModel');
     loading.value = true;
     const playerDom = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
-    mountedThree(playerDom).then(async () => {
-      if (sysOrgCode != 'zmhjhzmy') {
-        await getMonitor(true);
-        loading.value = false;
-      } else {
-        // 韩咀无风门设备,只有报警历史数据,无其他数据
-        setModelType('fm1').then(async () => {
+    debugger;
+    mountedThree(playerDom)
+      .then(async () => {
+        if (sysOrgCode != 'zmhjhzmy') {
+          await getMonitor(true);
           loading.value = false;
-          dataSource.value = [];
-          addMonitorText(selectData);
-        });
-      }
-    });
+        } else {
+          // 韩咀无风门设备,只有报警历史数据,无其他数据
+          setModelType('fm1').then(async () => {
+            loading.value = false;
+            dataSource.value = [];
+            addMonitorText(selectData);
+          });
+        }
+      })
+      .catch(() => {
+        debugger;
+      });
   });
 
   onBeforeUnmount(() => {

+ 4 - 4
src/views/vent/monitorManager/mainFanMonitor/mainWind.xj.threejs.ts

@@ -549,7 +549,7 @@ class mainXjWindRect {
       if (plane) {
         if (flag == 'open') {
           gsap.to(plane.position, {
-            z: -70,
+            z: -1085.796,
             duration: duration / 2,
             overwrite: true,
             onComplete: function () {
@@ -558,7 +558,7 @@ class mainXjWindRect {
           });
         } else {
           gsap.to(plane.position, {
-            z: 30,
+            z: -544.701, //-1085.796
             duration: duration / 2,
             overwrite: true,
             onComplete: function () {
@@ -794,8 +794,8 @@ class mainXjWindRect {
         //挡板
         this.frontPlane = gltf[0]?.getObjectByName('ChaBan')?.getObjectByName('ChaBan_ban_pCube8') as THREE.Mesh;
         this.backPlane = gltf[0]?.getObjectByName('ChaBan1')?.getObjectByName('ChaBan1_ban_pCube8') as THREE.Mesh;
-        if (this.frontPlane) this.frontPlane.position.setZ(30);
-        if (this.backPlane) this.backPlane.position.setZ(30);
+        if (this.frontPlane) this.frontPlane.position.setZ(-544.701);
+        if (this.backPlane) this.backPlane.position.setZ(-544.701);
 
         const loader = new THREE.TextureLoader();
         this.airTexture = loader.load('/model/img/air.png');

+ 4 - 2
src/views/vent/monitorManager/windowMonitor/shuangdaoFc.threejs.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import gsap from 'gsap';
+import { useGlobSetting } from '/@/hooks/setting';
 
 class sdFc_1 {
   model;
@@ -51,6 +52,7 @@ class sdFc_1 {
   }
 
   addMonitorText(selectData) {
+    const { sysOrgCode } = useGlobSetting();
     if (!this.group) {
       return;
     }
@@ -63,11 +65,11 @@ class sdFc_1 {
     const screenDownTextX = 120 - (screenDownText.length - 10) * 6;
     const textArr = [
       {
-        text: `远程定量调节自动风窗`,
+        text: `${sysOrgCode == 'zlnxnywwek' ? selectData.strinstallpos : '远程控制自动风门'}`, //王洼二矿需要特殊处理
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 95,
+        x: sysOrgCode == 'zlnxnywwek' ? (450 - selectData.strinstallpos.length * 22) / 2 : 120,
         y: 97,
       },
       {

+ 4 - 2
src/views/vent/monitorManager/windrectMonitor/duishe.threejs.ts

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 
 import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import gsap from 'gsap';
+import { useGlobSetting } from '/@/hooks/setting';
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
@@ -84,13 +85,14 @@ class dsWindRect {
     if (!this.group) {
       return;
     }
+    const { sysOrgCode } = useGlobSetting();
     const textArr = [
       {
-        text: `扫描式测风装置`,
+        text: `${sysOrgCode == 'zlnxnywwek' ? selectData.strinstallpos : '远程控制自动风门'}`, //王洼二矿需要特殊处理
         font: 'normal 32px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 140,
+        x: sysOrgCode == 'zlnxnywwek' ? (380 - selectData.strinstallpos.length * 22) / 2 : 120,
         y: 75,
       },
       {

+ 391 - 391
src/views/vent/performance/comment/NormalTable.vue

@@ -18,14 +18,14 @@
           nodeParam.id == '1600000000000000001'
             ? '报表分析'
             : nodeParam.id == '1500000000000000002'
-              ? '报表分析'
-              : nodeParam.id == '1500000000000000003'
-                ? '色谱仪分析'
-                : nodeParam.id == '1400000000000000003' || nodeParam.id == '1400000000000000002'
-                  ? '报表分析'
-                  : ''
+            ? '报表分析'
+            : nodeParam.id == '1500000000000000003'
+            ? '色谱仪分析'
+            : nodeParam.id == '1400000000000000003' || nodeParam.id == '1400000000000000002'
+            ? '报表分析'
+            : ''
         }}</a>
-        <a class="table-action-link"  v-if="hasPermission('editPermiss:return')" @click="handlePermission(record)">权限编辑</a>
+        <a class="table-action-link" v-if="hasPermission('editPermiss:return')" @click="handlePermission(record)">权限编辑</a>
       </template>
 
       <template #bodyCell="{ column, record }">
@@ -39,8 +39,7 @@
       <a-form :model="formStateTj" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
         <a-form-item label="选择审批" :rules="[{ required: true, message: '请选择是否提交' }]">
           <a-select v-model:value="formStateTj.file" style="width: 260px">
-            <a-select-option v-for="file in fileList" :key="file.label" :value="file.value">{{ file.label
-              }}</a-select-option>
+            <a-select-option v-for="file in fileList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
           </a-select>
         </a-form-item>
       </a-form>
@@ -51,20 +50,22 @@
     </a-modal>
     <!-- 审批-撤销申请弹窗 -->
     <a-modal v-model:visible="visibleCx" centered :width="600" title="撤销申请" @ok="handleCxOk" @cancel="handleCxCancel">
-      <a-textarea v-model:value="revokeDes" placeholder="请输入撤回原因..." :rows="4"
-        style="width: 96%; margin: 10px; background-color: transparent; color: #fff" />
+      <a-textarea
+        v-model:value="revokeDes"
+        placeholder="请输入撤回原因..."
+        :rows="4"
+        style="width: 96%; margin: 10px; background-color: transparent; color: #fff"
+      />
     </a-modal>
     <!-- 权限编辑弹窗 -->
-    <a-modal v-model:visible="visiblePermission" width="450px" :footer="null" :title="titlePermission" centered
-      destroyOnClose>
+    <a-modal v-model:visible="visiblePermission" width="450px" :footer="null" :title="titlePermission" centered destroyOnClose>
       <a-form :model="formStateQx" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" autocomplete="off">
         <a-form-item label="选择权限:">
-          <JDictSelectTag v-model:value="formStateQx.filePerm" placeholder="请选择权限" dictCode="file_perm"
-            style="width: 240px" />
+          <JDictSelectTag v-model:value="formStateQx.filePerm" placeholder="请选择权限" dictCode="file_perm" style="width: 240px" />
         </a-form-item>
         <div class="opertion-btn">
           <a-button type="primary" @click="confirmQx">确定</a-button>
-          <a-button type="success" style="margin-left:10px" @click="cancelQx">取消</a-button>
+          <a-button type="success" style="margin-left: 10px" @click="cancelQx">取消</a-button>
         </div>
       </a-form>
     </a-modal>
@@ -72,421 +73,420 @@
 </template>
 
 <script lang="ts" name="system-user" setup>
-//ts语法
-import { ref, provide, reactive, toRaw, defineExpose, unref } from 'vue';
-import { BasicTable, TableAction } from '/@/components/Table';
-import DeviceModal from './DeviceModal.vue';
-import CADModal from './CADModal.vue';
-import HistorySp from './HistorySp.vue';
-import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-import { useModal } from '/@/components/Modal';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { useListPage } from '/@/hooks/system/useListPage';
-import { commit,updataFileParam } from '../fileDetail/fileDetail.api';
-import { historicFlowNew, getHighlightImgNew, getTodoTask, getCancelNew } from './comment.api';
-import { message } from 'ant-design-vue';
-import { useUserStore } from '/@/store/modules/user';
-import { useRouter } from 'vue-router';
-import { usePermission } from '/@/hooks/web/usePermission';
+  //ts语法
+  import { ref, provide, reactive, toRaw, defineExpose, unref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import DeviceModal from './DeviceModal.vue';
+  import CADModal from './CADModal.vue';
+  import HistorySp from './HistorySp.vue';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import { useModal } from '/@/components/Modal';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { commit, updataFileParam } from '../fileDetail/fileDetail.api';
+  import { historicFlowNew, getHighlightImgNew, getTodoTask, getCancelNew } from './comment.api';
+  import { message } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useRouter } from 'vue-router';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
-const props = defineProps({
-  //文件审批-提交信息
-  submitInfo: {
-    type: Array,
-    default: () => {
-      return [];
+  const props = defineProps({
+    //文件审批-提交信息
+    submitInfo: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    //各矿参数
+    selfParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    //查询参数
+    searchParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
-  },
-  //各矿参数
-  selfParam: {
-    type: Object,
-    default: () => {
-      return {};
+    //菜单树传递参数
+    nodeParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
-  },
-  //查询参数
-  searchParam: {
-    type: Object,
-    default: () => {
-      return {};
+    columnsType: {
+      type: String,
+      // required: true,
     },
-  },
-  //菜单树传递参数
-  nodeParam: {
-    type: Object,
-    default: () => {
-      return {};
+    columns: {
+      type: Array,
+      // required: true,
+      default: () => [],
     },
-  },
-  columnsType: {
-    type: String,
-    // required: true,
-  },
-  columns: {
-    type: Array,
-    // required: true,
-    default: () => [],
-  },
 
-  list: {
-    type: Function,
-    required: true,
-  },
-  //下载文件接口
-  downLoad: {
-    type: Function,
-    required: true,
-  },
+    list: {
+      type: Function,
+      required: true,
+    },
+    //下载文件接口
+    downLoad: {
+      type: Function,
+      required: true,
+    },
 
-  deleteById: {
-    type: Function,
-    required: true,
-  },
-  pointList: {
-    type: Function,
-    // required: true,
-  },
-  designScope: {
-    type: String,
-  },
-  title: {
-    type: String,
-  },
-});
-const { hasPermission } = usePermission();
-let router = useRouter(); //路由
-let resetTable = ref(0);
-let fileType = ref(''); //文件类型
-let editID = ref(0); //文件ID
-const isUpdate = ref(false);
-const record = reactive<Record<string, any>>({});
-provide('formData', record);
-const [registerDeviceModal, { openModal, closeModal }] = useModal();
-const columnList = getTableHeaderColumns(props.columnsType);
-//是否显示文件审批弹窗
-let visibleTj = ref(false);
-//文件审批-弹窗参数
-let formStateTj = reactive({
-  file: '',
-  id: '',
-});
-//文件审批-提交信息弹窗下拉选项数据
-let fileList = reactive<any[]>([]);
-//审批详情弹窗数据
-let visibleSp = ref(false);
-let titleSp = ref('审批详情');
-//审批详情历史数据
-let historySpList = reactive<any[]>([]);
-let imgSrc = ref('');
-//审批-是否显示撤回/驳回按钮
-let isShow = ref(true);
-//审批通过/驳回参数信息
-let spInfo = reactive({});
+    deleteById: {
+      type: Function,
+      required: true,
+    },
+    pointList: {
+      type: Function,
+      // required: true,
+    },
+    designScope: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+  });
+  const { hasPermission } = usePermission();
+  let router = useRouter(); //路由
+  let resetTable = ref(0);
+  let fileType = ref(''); //文件类型
+  let editID = ref(0); //文件ID
+  const isUpdate = ref(false);
+  const record = reactive<Record<string, any>>({});
+  provide('formData', record);
+  const [registerDeviceModal, { openModal, closeModal }] = useModal();
+  const columnList = getTableHeaderColumns(props.columnsType);
+  //是否显示文件审批弹窗
+  let visibleTj = ref(false);
+  //文件审批-弹窗参数
+  let formStateTj = reactive({
+    file: '',
+    id: '',
+  });
+  //文件审批-提交信息弹窗下拉选项数据
+  let fileList = reactive<any[]>([]);
+  //审批详情弹窗数据
+  let visibleSp = ref(false);
+  let titleSp = ref('审批详情');
+  //审批详情历史数据
+  let historySpList = reactive<any[]>([]);
+  let imgSrc = ref('');
+  //审批-是否显示撤回/驳回按钮
+  let isShow = ref(true);
+  //审批通过/驳回参数信息
+  let spInfo = reactive({});
 
-//审批-撤销
-let visibleCx = ref(false);
-let revokeDes = ref('');
-let cxInfo = reactive({});
+  //审批-撤销
+  let visibleCx = ref(false);
+  let revokeDes = ref('');
+  let cxInfo = reactive({});
 
-//权限编辑弹窗信息
-let visiblePermission = ref(false)
-let titlePermission = ref('权限编辑')
-let formStateQx = reactive({
-  filePerm: ''
-})
-let permissionId = ref('')
+  //权限编辑弹窗信息
+  let visiblePermission = ref(false);
+  let titlePermission = ref('权限编辑');
+  let formStateQx = reactive({
+    filePerm: '',
+  });
+  let permissionId = ref('');
 
-let userStore = useUserStore(); //获取用户信息
-let userName = unref(userStore.getUserInfo).username;
+  let userStore = useUserStore(); //获取用户信息
+  let userName = unref(userStore.getUserInfo).username;
 
-// 列表页面公共参数、方法
-const { tableContext, doRequest } = useListPage({
-  designScope: props.designScope,
-  tableProps: {
-    title: props.title,
-    api: props.list,
-    columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
-    // size: 'small',
-    bordered: false,
-    scroll: { y: 620 },
-    // formConfig: {
-    //   // labelWidth: 100,
-    //   labelAlign: 'left',
-    //   labelCol: {
-    //     xs: 24,
-    //     sm: 24,
-    //     md: 24,
-    //     lg: 9,
-    //     xl: 7,
-    //     xxl: 5,
-    //   },
-    //   schemas: props.searchFormSchema as any[],
-    // },
-    striped: true,
-    showIndexColumn: true, //是否显示序列号
-    // actionColumn: {
-    //   width: 200,
-    // },
-    showActionColumn: false,
-    useSearchForm: false, //不使用查询条件
-    // pagination: false, //不使用分页组件
-    beforeFetch: (params) => {
-      params.parentId = props.nodeParam.id ? props.nodeParam.id : '';
-      params.selectFlag = props.nodeParam.id ? false : true;
-      params.likeFileName = props.searchParam.fileName ? props.searchParam.fileName : '';
-      params.fileSuffix = props.searchParam.fileType ? '.' + props.searchParam.fileType : '';
-      params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : '';
-      params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : '';
+  // 列表页面公共参数、方法
+  const { tableContext, doRequest } = useListPage({
+    designScope: props.designScope,
+    tableProps: {
+      title: props.title,
+      api: props.list,
+      columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
+      // size: 'small',
+      bordered: false,
+      scroll: { y: 620 },
+      // formConfig: {
+      //   // labelWidth: 100,
+      //   labelAlign: 'left',
+      //   labelCol: {
+      //     xs: 24,
+      //     sm: 24,
+      //     md: 24,
+      //     lg: 9,
+      //     xl: 7,
+      //     xxl: 5,
+      //   },
+      //   schemas: props.searchFormSchema as any[],
+      // },
+      striped: true,
+      showIndexColumn: true, //是否显示序列号
+      // actionColumn: {
+      //   width: 200,
+      // },
+      showActionColumn: false,
+      useSearchForm: false, //不使用查询条件
+      // pagination: false, //不使用分页组件
+      beforeFetch: (params) => {
+        params.parentId = props.nodeParam.id ? props.nodeParam.id : '';
+        params.selectFlag = props.nodeParam.id ? false : true;
+        params.likeFileName = props.searchParam.fileName ? props.searchParam.fileName : '';
+        params.fileSuffix = props.searchParam.fileType ? '.' + props.searchParam.fileType : '';
+        params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : '';
+        params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : '';
+      },
     },
-  },
-});
-
-//注册table数据
-const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
-// 审批提交
-function handleTo(data) {
-  visibleTj.value = true;
-  fileList.length = 0;
-  props.submitInfo.forEach((el) => {
-    fileList.push({ label: el.name, value: el.id });
   });
-  formStateTj.id = data.id;
-}
-//确认提交
-async function handleTjOk() {
-  if (formStateTj.file) {
-    let res = await commit({ procDefId: formStateTj.file, tableId: formStateTj.id, firstGateway: true });
-    if (res == '提交成功') {
+
+  //注册table数据
+  const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
+  // 审批提交
+  function handleTo(data) {
+    visibleTj.value = true;
+    fileList.length = 0;
+    props.submitInfo.forEach((el) => {
+      fileList.push({ label: el.name, value: el.id });
+    });
+    formStateTj.id = data.id;
+  }
+  //确认提交
+  async function handleTjOk() {
+    if (formStateTj.file) {
+      let res = await commit({ procDefId: formStateTj.file, tableId: formStateTj.id, firstGateway: true });
+      if (res == '提交成功') {
+        message.success(res);
+        visibleTj.value = false;
+        resetTable.value = new Date().getTime();
+      } else {
+        message.warning(res.message);
+      }
+    } else {
+      message.warning('请先选择要提交的文件!');
+    }
+  }
+  //取消提交
+  function handleTjCancel() {
+    formStateTj.file = '';
+    visibleTj.value = false;
+  }
+  //审批详情点击
+  function handleSpDetail(data) {
+    visibleSp.value = true;
+    getTodoTaskShow({ tableId: data.id, tableName: data.tableName });
+    getHistoricFlowNewList({ tableId: data.id, tableName: data.tableName });
+    getHighlightImgNewList({ tableId: data.id, tableName: data.tableName });
+  }
+  //审批详情-审批历史列表
+  async function getHistoricFlowNewList(params) {
+    historySpList.length = 0;
+    let res = await historicFlowNew({ ...params });
+    if (res.length != 0) {
+      res.forEach((el) => {
+        historySpList.push({
+          name: el.name,
+          username: el.assignees[0].username,
+          deleteReason: el.deleteReason,
+          comment: el.comment,
+          startTime: el.startTime,
+          endTime: el.endTime,
+          status: el.assignees[0].isExecutor ? '已处理' : '待处理',
+        });
+      });
+    }
+  }
+  //审批详情-流程轨迹
+  async function getHighlightImgNewList(params) {
+    let res = await getHighlightImgNew({ ...params });
+    let imageUrl = window.URL.createObjectURL(res);
+    imgSrc.value = imageUrl;
+  }
+  //判断是否显示撤回/驳回按钮
+  async function getTodoTaskShow(params) {
+    let res = await getTodoTask({ ...params });
+    spInfo = Object.assign({}, res);
+    if (res.result) {
+      isShow.value = true;
+    } else {
+      isShow.value = false;
+    }
+  }
+  //审批通过/驳回弹窗关闭
+  function spClose() {
+    visibleSp.value = false;
+    resetTable.value = new Date().getTime();
+  }
+  //审批-撤回提交
+  function handleSpRevoke(data) {
+    visibleCx.value = true;
+    cxInfo = Object.assign({}, data);
+  }
+  //审批-撤销-确定
+  async function handleCxOk() {
+    let res = await getCancelNew({ reason: revokeDes.value, tableId: cxInfo.id, tableName: cxInfo.tableName });
+    if (res == '操作成功') {
       message.success(res);
-      visibleTj.value = false;
-      resetTable.value = new Date().getTime();
     } else {
       message.warning(res.message);
     }
-  } else {
-    message.warning('请先选择要提交的文件!');
+    visibleCx.value = false;
+    revokeDes.value = '';
+    resetTable.value = new Date().getTime();
   }
-}
-//取消提交
-function handleTjCancel() {
-  formStateTj.file = '';
-  visibleTj.value = false;
-}
-//审批详情点击
-function handleSpDetail(data) {
-  visibleSp.value = true;
-  getTodoTaskShow({ tableId: data.id, tableName: data.tableName });
-  getHistoricFlowNewList({ tableId: data.id, tableName: data.tableName });
-  getHighlightImgNewList({ tableId: data.id, tableName: data.tableName });
-}
-//审批详情-审批历史列表
-async function getHistoricFlowNewList(params) {
-  historySpList.length = 0;
-  let res = await historicFlowNew({ ...params });
-  if (res.length != 0) {
-    res.forEach((el) => {
-      historySpList.push({
-        name: el.name,
-        username: el.assignees[0].username,
-        deleteReason: el.deleteReason,
-        comment: el.comment,
-        startTime: el.startTime,
-        endTime: el.endTime,
-        status: el.assignees[0].isExecutor ? '已处理' : '待处理',
+  //审批-撤销-取消
+  function handleCxCancel() {
+    revokeDes.value = '';
+    visibleCx.value = false;
+  }
+  /**
+   * 编辑事件
+   */
+  function handleEdit(data) {
+    isUpdate.value = true;
+    Object.assign(record, toRaw(data));
+    let index = record.fileSuffix.indexOf('.');
+    fileType.value = record.fileSuffix.substring(index + 1);
+    editID.value = record.id;
+
+    // 根据文件后缀名打开不同的模态框
+    if (['.dwg', '.mxcad'].includes(data.fileSuffix)) {
+      openCADModal(true, {
+        record,
       });
-    });
+    } else {
+      openModal(true, {
+        record,
+      });
+    }
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await props.deleteById({ id: record.id }, reload);
+  }
+  //权限编辑
+  function handlePermission(record) {
+    visiblePermission.value = true;
+    formStateQx.filePerm = record.filePerm;
+    permissionId.value = record.id;
   }
-}
-//审批详情-流程轨迹
-async function getHighlightImgNewList(params) {
-  let res = await getHighlightImgNew({ ...params });
-  let imageUrl = window.URL.createObjectURL(res);
-  imgSrc.value = imageUrl;
-}
-//判断是否显示撤回/驳回按钮
-async function getTodoTaskShow(params) {
-  let res = await getTodoTask({ ...params });
-  spInfo = Object.assign({}, res);
-  if (res.result) {
-    isShow.value = true;
-  } else {
-    isShow.value = false;
+  //编辑权限-确定
+  async function confirmQx() {
+    await updataFileParam({ id: permissionId.value, filePerm: formStateQx.filePerm }, reload);
+    visiblePermission.value = false;
   }
-}
-//审批通过/驳回弹窗关闭
-function spClose() {
-  visibleSp.value = false;
-  resetTable.value = new Date().getTime();
-}
-//审批-撤回提交
-function handleSpRevoke(data) {
-  visibleCx.value = true;
-  cxInfo = Object.assign({}, data);
-}
-//审批-撤销-确定
-async function handleCxOk() {
-  let res = await getCancelNew({ reason: revokeDes.value, tableId: cxInfo.id, tableName: cxInfo.tableName });
-  if (res == '操作成功') {
-    message.success(res);
-  } else {
-    message.warning(res.message);
+  //编辑权限-取消
+  function cancelQx() {
+    visiblePermission.value = false;
+    formStateQx.filePerm = '';
   }
-  visibleCx.value = false;
-  revokeDes.value = '';
-  resetTable.value = new Date().getTime();
-}
-//审批-撤销-取消
-function handleCxCancel() {
-  revokeDes.value = '';
-  visibleCx.value = false;
-}
-/**
- * 编辑事件
- */
-function handleEdit(data) {
-  isUpdate.value = true;
-  Object.assign(record, toRaw(data));
-  let index = record.fileSuffix.indexOf('.');
-  fileType.value = record.fileSuffix.substring(index + 1);
-  editID.value = record.id;
 
-  // 根据文件后缀名打开不同的模态框
-  if (['.dwg', '.mxcad'].includes(data.fileSuffix)) {
-    openCADModal(true, {
-      record,
-    });
-  } else {
-    openModal(true, {
-      record,
+  //下载文件
+  function handleDownLoad(record) {
+    props.downLoad({ id: record.id }).then((res) => {
+      let filename = `${record.fileName}`;
+      downFilePublic(res, filename);
     });
   }
-}
-
-/**
- * 删除事件
- */
-async function handleDelete(record) {
-  await props.deleteById({ id: record.id }, reload);
-}
-//权限编辑
-function handlePermission(record) {
-  visiblePermission.value = true
-  formStateQx.filePerm = record.filePerm  
-  permissionId.value = record.id
-}
-//编辑权限-确定
-async function confirmQx() {
-  await updataFileParam({ id: permissionId.value, filePerm: formStateQx.filePerm },reload)
-  visiblePermission.value = false
-}
-//编辑权限-取消
-function cancelQx() {
-  visiblePermission.value = false
-  formStateQx.filePerm = ''
-}
-
-//下载文件
-function handleDownLoad(record) {
-  props.downLoad({ id: record.id }).then((res) => {
-    let filename = `${record.fileName}`;
-    downFilePublic(res, filename);
-  });
-}
-// 下载公用方法
-function downFilePublic(content, fileName) {
-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-  // 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
-  // IE10以上支持blob但是依然不支持download
-  if ('download' in document.createElement('a')) {
-    // 支持a标签download的浏览器
-    const link = document.createElement('a'); // 创建a标签
-    link.download = fileName; // a标签添加属性
-    link.style.display = 'none';
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click(); // 执行下载
-    URL.revokeObjectURL(link.href); // 释放url
-    document.body.removeChild(link); // 释放标签
-  } else {
-    // 其他浏览器
-    navigator.msSaveBlob(blob, fileName);
+  // 下载公用方法
+  function downFilePublic(content, fileName) {
+    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
+    // 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
+    // IE10以上支持blob但是依然不支持download
+    if ('download' in document.createElement('a')) {
+      // 支持a标签download的浏览器
+      const link = document.createElement('a'); // 创建a标签
+      link.download = fileName; // a标签添加属性
+      link.style.display = 'none';
+      link.href = URL.createObjectURL(blob);
+      document.body.appendChild(link);
+      link.click(); // 执行下载
+      URL.revokeObjectURL(link.href); // 释放url
+      document.body.removeChild(link); // 释放标签
+    } else {
+      // 其他浏览器
+      navigator.msSaveBlob(blob, fileName);
+    }
   }
-}
 
-//报表监测跳转
-function handlerJc(data) {
-  switch (data) {
-    case '1600000000000000001':
-      //粉尘报表
-      router.push('/dustDayReport/home');
-      break;
-    case '1500000000000000002':
-      //束管日报
-      router.push('/bundleDayReport/home');
-      break;
-    case '1500000000000000003':
-      //束管色谱仪
-      router.push('/bundleSpyDayReport/home');
-      break;
-    case '1400000000000000002':
-      //瓦斯日报巡检分析
-      router.push('/gas/gasDayReport/home');
-      break;
-    case '1400000000000000003':
-      //瓦斯日报巡检分析
-      router.push('/gas/gasDayReport/home');
-      break;
+  //报表监测跳转
+  function handlerJc(data) {
+    switch (data) {
+      case '1600000000000000001':
+        //粉尘报表
+        router.push('/dustDayReport/home');
+        break;
+      case '1500000000000000002':
+        //束管日报
+        router.push('/bundleDayReport/home');
+        break;
+      case '1500000000000000003':
+        //束管色谱仪
+        router.push('/bundleSpyDayReport/home');
+        break;
+      case '1400000000000000002':
+        //瓦斯日报巡检分析
+        router.push('/gas/gasDayReport/home');
+        break;
+      case '1400000000000000003':
+        //瓦斯日报巡检分析
+        router.push('/gas/gasDayReport/home');
+        break;
+    }
   }
-}
-// CAD预览相关的逻辑
-const [registerCADModal, { openModal: openCADModal }] = useModal();
+  // CAD预览相关的逻辑
+  const [registerCADModal, { openModal: openCADModal }] = useModal();
 
-defineExpose({
-  doRequest,
-});
+  defineExpose({
+    doRequest,
+  });
 </script>
 
 <style scoped lang="less">
-@ventSpace: zxm;
-
-@vent-table-no-hover: #00bfff10;
+  @ventSpace: zxm;
 
-:deep(.@{ventSpace}-table-cell-row-hover) {
-  background: #264d8833 !important;
-}
+  @vent-table-no-hover: #00bfff10;
 
-:deep(.@{ventSpace}-table-row-selected) {
-  background: #268bc522 !important;
-}
+  :deep(.@{ventSpace}-table-cell-row-hover) {
+    background: #264d8833 !important;
+  }
 
-:deep(.@{ventSpace}-table-tbody > tr > td) {
-  background-color: #0dc3ff05;
-}
+  :deep(.@{ventSpace}-table-row-selected) {
+    background: #268bc522 !important;
+  }
 
-:deep(.jeecg-basic-table-row__striped) {
-  td {
-    background-color: @vent-table-no-hover !important;
+  :deep(.@{ventSpace}-table-tbody > tr > td) {
+    background-color: #0dc3ff05;
   }
-}
 
-::v-deep .zxm-table-title {
-  display: none;
-}
+  :deep(.jeecg-basic-table-row__striped) {
+    td {
+      background-color: @vent-table-no-hover !important;
+    }
+  }
 
-.zxm-form {
-  padding: 20px 0px !important;
-  box-sizing: border-box;
-}
+  ::v-deep .zxm-table-title {
+    display: none;
+  }
 
-.opertion-btn {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  padding: 0px 20px;
+  .zxm-form {
+    padding: 20px 0px !important;
+    box-sizing: border-box;
+  }
 
-}
+  .opertion-btn {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0px 20px;
+  }
 
-a[disabled] {
-  color: #ccc;
-}
+  a[disabled] {
+    color: #ccc;
+  }
 </style>