[Mod 0000] 新增三维模型组件

src/views/vent/home/configurable/components/ModuleCommon.vue

@@ -48,7 +48,7 @@
   const style = computed(() => {
     const size = props.showStyle.size;
     const position = props.showStyle.position;
-    return size + position + 'position: absolute; pointer-events: auto;';
+    return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
   });
 
   const capitalizedPosition = computed(() => {

src/views/vent/home/configurable/components/three3D.vue

@@ -0,0 +1,112 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div id="three3D"></div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onUnmounted } from 'vue';
+  import UseThree from '/@/utils/threejs/useThree';
+  import { animateCamera } from '/@/utils/threejs/util';
+  import * as THREE from 'three';
+  import useEvent from '/@/utils/threejs/useEvent';
+
+  const props = defineProps<{
+    modalName: string;
+  }>();
+
+  let modal, modalGroup;
+
+  const mouseEvent = () => {
+    console.log(modal.camera, modal.orbitControls);
+  };
+  const addMouseEvent = () => {
+    // 定义鼠标点击事件
+    modal.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
+  };
+  const addLight = () => {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(-110, 150, 647);
+    modalGroup?.add(directionalLight);
+  };
+  const setModelType = () => {
+    return new Promise(async (resolve) => {
+      const modalConfigurations = {
+        workFace11: {
+          render: null,
+          group: modalGroup ? modalGroup : null,
+          newP: { x: -2.211555197992825, y: 27.130029732875393, z: 2.3018919451652007 },
+          newT: { x: -2.211555197992825, y: -8.604453425019353, z: 2.301856157557903 },
+        },
+      };
+      await initModal();
+      if (modalConfigurations[props.modalName]) {
+        const oldCameraPosition = { x: 100, y: 0, z: 10 };
+        const config = modalConfigurations[props.modalName];
+
+        setTimeout(async () => {
+          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, config.newP, config.newT, modal);
+          modal.scene?.add(modalGroup);
+          resolve(null);
+        }, 1000);
+      }
+    });
+  };
+
+  const customModal = () => {
+    if (props.modalName == 'workFace11') {
+      const DiXing = modalGroup.getObjectByName('PouMian01')?.getObjectByName('DiXing')?.getObjectByName('DiXing_1');
+      if (DiXing) {
+        DiXing.visible = false;
+      }
+    }
+  };
+
+  const initModal = () => {
+    return new Promise((resolve) => {
+      modal.setGLTFModel(props.modalName).then(async (gltf) => {
+        const gltfModal = gltf[0];
+        modalGroup = gltfModal;
+        console.log('模型文件', gltfModal);
+        addLight();
+        customModal();
+        modal.animate();
+        addMouseEvent();
+        // this.group.name = this.modelName;
+        // setModalCenter(this.group);
+        // this.group.scale.set(2.5, 2.5, 2.5);
+        // this.setThreePlane();
+        // this.setControls();
+        resolve(null);
+      });
+    });
+  };
+
+  watch(
+    () => props.modalName,
+    async (val) => {
+      if (val) {
+        await setModelType();
+      }
+    }
+  );
+
+  onMounted(async () => {
+    modal = new UseThree('#three3D', '');
+    if (modal) {
+      modal.setEnvMap('test1.hdr');
+      modal.renderer.toneMappingExposure = 1.0;
+      modal.renderer.sortObjects = true;
+      modal.orbitControls.update();
+      await setModelType();
+    }
+  });
+</script>
+<style lang="less" scoped>
+  #three3D {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+  }
+</style>

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

@@ -67,6 +67,7 @@
       :visible="true"
       :common-title="commonTitle"
     />
+    <Three3D :modal-name="modalName" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -76,7 +77,9 @@
   import { testConfigTSFire } from './configurable.data.tashan';
   import ModuleCommon from './components/ModuleCommon.vue';
   import ModuleCommonDual from './components/ModuleCommonDual.vue';
+  import Three3D from './components/three3D.vue';
 
+  const modalName = ref('workFace11');
   const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7 && index !== 8));
   const cfgA = computed<any>(() => configs.value[6]);
   const cfgB = computed<any>(() => configs.value[7]);

src/views/vent/monitorManager/balancePressMonitor/balancePress.threejs.ts

@@ -87,8 +87,8 @@ export const setModelType = (type) => {
           await animateCamera(
             oldCameraPosition,
             { x: 3.9025, y: 0.7782, z: 6.6307 },
-            { x: 1.8177, y: 1.1875, z: 2.3462 },
-            { x: 1.8177, y: 0.0329, z: 0.7698 },
+            { x: 0.2185637607064918, y: 2.476256183591406, z: 2.7017622865334987 },
+            { x: 0.21856376070649214, y: 0.09479035032624854, z: 0.7165903260342672 },
             model,
             1
           );

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

@@ -151,711 +151,716 @@
 </template>
 
 <script setup lang="ts">
-import DeviceEcharts from '../comment/DeviceEcharts.vue';
-import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import MonitorTable from '../comment/MonitorTable.vue';
-import ModalTable from './components/modalTable.vue';
-import HandleModal from './components/modal.vue';
-import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-import ResultTable from './components/resultTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import AlarmNumTable from '../comment/AlarmNumTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import { deviceControlApi } from '/@/api/vent/index';
-import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
-import { list, pathList, deviceList, testWind, exportXls, resetWind } from './windrect.api';
-import { message, Progress } from 'ant-design-vue';
-import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { setDivHeight } from '/@/utils/event';
-import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-import { useRouter } from 'vue-router';
-import { useModal } from '/@/components/Modal';
-import { useCamera } from '/@/hooks/system/useCamera';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { useGlobSetting } from '/@/hooks/setting';
-const { hasPermission } = usePermission();
-
-const globalConfig = inject('globalConfig');
-
-const { sysOrgCode } = useGlobSetting();
-const { currentRoute } = useRouter();
-
-const MonitorDataTable = ref();
-const scroll = reactive({
-  y: 230,
-});
-const modalType = ref('');
-const modalIsShow = ref(false);
-const modalTable = ref();
-const runNum = ref(5); //设备运行数量
-const criticalPathList = ref([]);
-const playerRef = ref();
-const activeKey = ref('1');
-const loading = ref(false);
-// 默认初始是第一行
-const selectRowIndex = ref(-1);
-// 监测数据
-const selectData = reactive({
-  deviceID: '',
-  deviceType: '',
-  strname: '',
-  dataDh: '-', //压差
-  dataDtestq: '-', //测试风量
-  // sourcePressure: '-', //气源压力
-  dataDequivalarea: '-',
-  netStatus: '0', //通信状态
-  fault: '气源压力超限',
-  sign: -1,
-  sensorRight: 0,
-  sensorMiddle: 1,
-  sensorLeft: 0,
-});
-const deviceType = ref('windrect');
-const deviceId = ref('');
-const chartsColumnArr = getTableHeaderColumns('windrect_chart');
-const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
-
-// const dataSource = computed(() => {
-//   const data = [...getRecordList()] || [];
-//   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-//   addMonitorText(selectData);
-//   return data;
-// });
-
-const dataSource = ref([]);
-const [regModal, { openModal }] = useModal();
-
-const { getCamera, removeCamera } = useCamera();
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-  if (activeKeyVal == 1) {
-    nextTick(() => {
-      MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
-    });
-  }
-};
-
-// 设备数据
-const controlType = ref(1);
-//表单赋值
-const [registerModal, { setModalProps, closeModal }] = useModalInner();
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(
-      () => {
-        list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
-          if (res && res.msgTxt[0]) {
-            // dataSource.value = res.msgTxt[0].datalist || [];
-            const getData = res.msgTxt[0].datalist || [];
-            getData.forEach((data) => {
-              if (data.limits) {
-                const limitsKeys = Object.keys(data.limits);
-                limitsKeys.forEach((limitKey) => {
-                  const limit = data.limits[limitKey];
-                  if (limit && Array.isArray(limit.limitlevels)) {
-                    // 确保 data.readData 已初始化
-                    data.readData = data.readData || {};
-                    limit.limitlevels.forEach((item) => {
-                      if (item && item.alarmType) {
-                        // 拼接字段名并存入readData
-                        data.readData[`${item.alarmType}_fmin`] = item.fmin;
-                        data.readData[`${item.alarmType}_fmax`] = item.fmax;
-                      }
-                    });
-                  }
-                });
-                return data;
-              }
-            });
-            dataSource.value = getData;
-            if (dataSource.value.length > 0) {
-              dataSource.value.forEach((data: any) => {
-                const readData = data.readData;
-                data = Object.assign(data, readData);
+  import DeviceEcharts from '../comment/DeviceEcharts.vue';
+  import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import ModalTable from './components/modalTable.vue';
+  import HandleModal from './components/modal.vue';
+  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
+  import ResultTable from './components/resultTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import AlarmNumTable from '../comment/AlarmNumTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
+  import { list, pathList, deviceList, testWind, exportXls, resetWind } from './windrect.api';
+  import { message, Progress } from 'ant-design-vue';
+  import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { setDivHeight } from '/@/utils/event';
+  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+  import { useRouter } from 'vue-router';
+  import { useModal } from '/@/components/Modal';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { useGlobSetting } from '/@/hooks/setting';
+  const { hasPermission } = usePermission();
+
+  const globalConfig = inject('globalConfig');
+
+  const { sysOrgCode } = useGlobSetting();
+  const { currentRoute } = useRouter();
+
+  const MonitorDataTable = ref();
+  const scroll = reactive({
+    y: 230,
+  });
+  const modalType = ref('');
+  const modalIsShow = ref(false);
+  const modalTable = ref();
+  const runNum = ref(5); //设备运行数量
+  const criticalPathList = ref([]);
+  const playerRef = ref();
+  const activeKey = ref('1');
+  const loading = ref(false);
+  // 默认初始是第一行
+  const selectRowIndex = ref(-1);
+  // 监测数据
+  const selectData = reactive({
+    deviceID: '',
+    deviceType: '',
+    strname: '',
+    dataDh: '-', //压差
+    dataDtestq: '-', //测试风量
+    // sourcePressure: '-', //气源压力
+    dataDequivalarea: '-',
+    netStatus: '0', //通信状态
+    fault: '气源压力超限',
+    sign: -1,
+    sensorRight: 0,
+    sensorMiddle: 1,
+    sensorLeft: 0,
+  });
+  const deviceType = ref('windrect');
+  const deviceId = ref('');
+  const chartsColumnArr = getTableHeaderColumns('windrect_chart');
+  const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
+
+  // const dataSource = computed(() => {
+  //   const data = [...getRecordList()] || [];
+  //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
+  //   addMonitorText(selectData);
+  //   return data;
+  // });
+
+  const dataSource = ref([]);
+  const [regModal, { openModal }] = useModal();
+
+  const { getCamera, removeCamera } = useCamera();
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+    if (activeKeyVal == 1) {
+      nextTick(() => {
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      });
+    }
+  };
+
+  // 设备数据
+  const controlType = ref(1);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        () => {
+          list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
+            if (res && res.msgTxt[0]) {
+              // dataSource.value = res.msgTxt[0].datalist || [];
+              const getData = res.msgTxt[0].datalist || [];
+              getData.forEach((data) => {
+                if (data.limits) {
+                  const limitsKeys = Object.keys(data.limits);
+                  limitsKeys.forEach((limitKey) => {
+                    const limit = data.limits[limitKey];
+                    if (limit && Array.isArray(limit.limitlevels)) {
+                      // 确保 data.readData 已初始化
+                      data.readData = data.readData || {};
+                      limit.limitlevels.forEach((item) => {
+                        if (item && item.alarmType) {
+                          // 拼接字段名并存入readData
+                          data.readData[`${item.alarmType}_fmin`] = item.fmin;
+                          data.readData[`${item.alarmType}_fmax`] = item.fmax;
+                        }
+                      });
+                    }
+                  });
+                  return data;
+                }
               });
-              if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
-                // 初始打开页面
-                if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
-                  MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
-                } else {
-                  MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
+              dataSource.value = getData;
+              if (dataSource.value.length > 0) {
+                dataSource.value.forEach((data: any) => {
+                  const readData = data.readData;
+                  data = Object.assign(data, readData);
+                });
+                if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
+                  // 初始打开页面
+                  if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
+                    MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
+                  } else {
+                    MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
+                  }
                 }
-              }
-              const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-              Object.assign(selectData, data);
-              addMonitorText(selectData);
+                const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+                Object.assign(selectData, data);
+                addMonitorText(selectData);
 
-              palyAnimation(selectData);
+                palyAnimation(selectData);
+              }
             }
-          }
-          if (timer) {
-            timer = null;
-          }
-          getMonitor();
-        });
-      },
-      flag ? 0 : 1000
-    );
-  }
-}
-
-let deviceRunState = '',
-  tanTouRunState = '';
-// 根据3个点位分别执行动画
-function palyAnimation(selectData) {
-  if (selectData.deviceType == 'windrect_normal') {
-    if (selectData['apparatusRun'] == 1) {
-      const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-      if (flag) play(flag);
-    } else {
-      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-      if (flag) play(flag, true);
+            if (timer) {
+              timer = null;
+            }
+            getMonitor();
+          });
+        },
+        flag ? 0 : 1000
+      );
     }
   }
-  // 运行中是0，运行到达是1
-  if (selectData.deviceType == 'windrect_rect_single') {
-    if (selectData['apparatusRun'] == 1) {
-      // 镜头指向横杆
-      // if(!deviceRunState && !tanTouRunState)playCamera('start')
-      // 正在执行或是开始执行
-
-      //开始执行时，
-      // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
-
-      // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
-      // 2. 探头左移play('left')
-      // 3. 探头右移play('right')
-      // 4. 横杆向中位移动，探头在右边
-      // 5. 探头移到中间play('middle')
-      // 6. 探头移到左边play('left')
-      // 7. 横杆向低位移动，探头在左边
-      // 8. 探头移到中间play('middle')
-      // 9. 探头右移play('right')
-      // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-      if (selectData['poleIncipient'] == 1) {
-        // 横杆在高位，开始执行 或是 执行结束
-        if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
-          // 1. 开始执行
-          deviceRunState = 'up';
-          tanTouRunState = 'middle';
-          play('up', true);
-          play('middle', true);
-        }
-        if (deviceRunState == 'up-m') {
-          play('up', true);
-          play('middle', true);
-          deviceRunState = '';
-          tanTouRunState = '';
-          playCamera('end');
-        }
-        // 初始已经在运行
 
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //2.探头左移play('left')
-          if (tanTouRunState == 'middle') {
-            tanTouRunState = 'left-m';
-            play('left');
+  let deviceRunState = '',
+    tanTouRunState = '';
+  // 根据3个点位分别执行动画
+  function palyAnimation(selectData) {
+    if (selectData.deviceType == 'windrect_normal') {
+      if (selectData['apparatusRun'] == 1) {
+        const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+        if (flag) play(flag);
+      } else {
+        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+        if (flag) play(flag, true);
+      }
+    }
+    // 运行中是0，运行到达是1
+    if (selectData.deviceType == 'windrect_rect_single') {
+      if (selectData['apparatusRun'] == 1) {
+        // 镜头指向横杆
+        // if(!deviceRunState && !tanTouRunState)playCamera('start')
+        // 正在执行或是开始执行
+
+        //开始执行时，
+        // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
+
+        // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
+        // 2. 探头左移play('left')
+        // 3. 探头右移play('right')
+        // 4. 横杆向中位移动，探头在右边
+        // 5. 探头移到中间play('middle')
+        // 6. 探头移到左边play('left')
+        // 7. 横杆向低位移动，探头在左边
+        // 8. 探头移到中间play('middle')
+        // 9. 探头右移play('right')
+        // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+        if (selectData['poleIncipient'] == 1) {
+          // 横杆在高位，开始执行 或是 执行结束
+          if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
+            // 1. 开始执行
+            deviceRunState = 'up';
+            tanTouRunState = 'middle';
+            play('up', true);
+            play('middle', true);
           }
-          //3. 探头右移play('right')
-          if (tanTouRunState == 'left') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (deviceRunState == 'up-m') {
+            play('up', true);
+            play('middle', true);
+            deviceRunState = '';
+            tanTouRunState = '';
+            playCamera('end');
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
-            play('left', true);
+          // 初始已经在运行
+
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //2.探头左移play('left')
+            if (tanTouRunState == 'middle') {
+              tanTouRunState = 'left-m';
+              play('left');
+            }
+            //3. 探头右移play('right')
+            if (tanTouRunState == 'left') {
+              tanTouRunState = 'right-m';
+              play('right');
+            }
           }
-        }
-        if (selectData.sensorRight == 1) {
-          tanTouRunState = 'right';
-          if (!tanTouRunState || tanTouRunState == 'right-m') {
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
+          }
+          if (selectData.sensorRight == 1) {
+            tanTouRunState = 'right';
+            if (!tanTouRunState || tanTouRunState == 'right-m') {
+              play('right', true);
+            }
+          }
+        } else if (selectData['poleMiddle'] == 1) {
+          if (deviceRunState == 'center-m') {
+            play('center', true);
+            deviceRunState = 'center';
+            tanTouRunState = 'right';
+            play('right', true);
+          }
+          if (!deviceRunState) {
+            deviceRunState = 'center';
+            play('center', true);
+          }
+          if (!tanTouRunState) {
             play('right', true);
           }
-        }
-      } else if (selectData['poleMiddle'] == 1) {
-        if (deviceRunState == 'center-m') {
-          play('center', true);
-          deviceRunState = 'center';
-          tanTouRunState = 'right';
-          play('right', true);
-        }
-        if (!deviceRunState) {
-          deviceRunState = 'center';
-          play('center', true);
-        }
-        if (!tanTouRunState) {
-          play('right', true);
-        }
 
-        // 横杆在中位
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //5. 探头移到中间play('middle')
-          if (tanTouRunState == 'right') {
-            tanTouRunState = 'middle-m';
-            play('middle');
+          // 横杆在中位
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //5. 探头移到中间play('middle')
+            if (tanTouRunState == 'right') {
+              tanTouRunState = 'middle-m';
+              play('middle');
+            }
+            //6. 探头移到左边play('left')
+            if (tanTouRunState == 'middle') {
+              tanTouRunState = 'left-m';
+              play('left');
+            }
           }
-          //6. 探头移到左边play('left')
-          if (tanTouRunState == 'middle') {
-            tanTouRunState = 'left-m';
-            play('left');
+          if (selectData.sensorMiddle == 1) {
+            tanTouRunState = 'middle';
+            if (!tanTouRunState || tanTouRunState == 'middle-m') {
+              play('middle', true);
+            }
           }
-        }
-        if (selectData.sensorMiddle == 1) {
-          tanTouRunState = 'middle';
-          if (!tanTouRunState || tanTouRunState == 'middle-m') {
-            play('middle', true);
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
+        } else if (selectData['poleNether'] == 1) {
+          if (deviceRunState == 'down-m') {
+            play('down', true);
+            deviceRunState = 'down';
+            tanTouRunState = 'left';
             play('left', true);
           }
-        }
-      } else if (selectData['poleNether'] == 1) {
-        if (deviceRunState == 'down-m') {
-          play('down', true);
-          deviceRunState = 'down';
-          tanTouRunState = 'left';
-          play('left', true);
-        }
-        if (!deviceRunState) {
-          play('down', true);
-          deviceRunState = 'down';
-        }
-        if (!tanTouRunState) {
-          play('left', true);
-        }
-        // 横杆在低位
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //8. 探头移到中间play('middle')
-          if (tanTouRunState == 'left') {
-            tanTouRunState = 'left-middle-m';
-            play('middle');
+          if (!deviceRunState) {
+            play('down', true);
+            deviceRunState = 'down';
           }
-          //9. 探头右移play('right')
-          if (tanTouRunState == 'middle1') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (!tanTouRunState) {
+            play('left', true);
           }
-          // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-          if (tanTouRunState == 'right') {
-            tanTouRunState = 'right-middle-m';
-            play('middle');
+          // 横杆在低位
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //8. 探头移到中间play('middle')
+            if (tanTouRunState == 'left') {
+              tanTouRunState = 'left-middle-m';
+              play('middle');
+            }
+            //9. 探头右移play('right')
+            if (tanTouRunState == 'middle1') {
+              tanTouRunState = 'right-m';
+              play('right');
+            }
+            // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+            if (tanTouRunState == 'right') {
+              tanTouRunState = 'right-middle-m';
+              play('middle');
+            }
           }
-        }
 
-        if (selectData.sensorMiddle == 1) {
-          if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
-          if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
+          if (selectData.sensorMiddle == 1) {
+            if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
+            if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
 
-          if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
-            play('middle', true);
+            if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
+              play('middle', true);
+            }
           }
-        }
 
-        if (selectData.sensorRight == 1) {
-          tanTouRunState = 'right';
-          if (!tanTouRunState || tanTouRunState == 'right-m') {
-            play('right', true);
+          if (selectData.sensorRight == 1) {
+            tanTouRunState = 'right';
+            if (!tanTouRunState || tanTouRunState == 'right-m') {
+              play('right', true);
+            }
+          }
+        } else {
+          // 横杆正在运行
+          if (deviceRunState == 'up') {
+            deviceRunState = 'center-m';
+            play('center');
+          }
+          if (deviceRunState == 'center') {
+            deviceRunState = 'down-m';
+            play('down');
+          }
+          if (deviceRunState == 'down') {
+            deviceRunState = 'up-m';
+            play('up');
           }
         }
-      } else {
-        // 横杆正在运行
-        if (deviceRunState == 'up') {
-          deviceRunState = 'center-m';
-          play('center');
-        }
-        if (deviceRunState == 'center') {
-          deviceRunState = 'down-m';
-          play('down');
-        }
-        if (deviceRunState == 'down') {
-          deviceRunState = 'up-m';
-          play('up');
-        }
-      }
 
-      // //正在执行时
+        // //正在执行时
 
-      // // 判断上中下是否都为0
-      // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
-      //   // 判断是否有前一个状态值，有的话执行
-      //   //没有前一个状态
+        // // 判断上中下是否都为0
+        // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
+        //   // 判断是否有前一个状态值，有的话执行
+        //   //没有前一个状态
 
-      //   //有前一个状态
+        //   //有前一个状态
 
-      //   // 横杆前状态在上位时，横杆中位移动，探头在右边
+        //   // 横杆前状态在上位时，横杆中位移动，探头在右边
 
-      //   // 横杆前状态在中位时，横杆下位移动，探头在左边
+        //   // 横杆前状态在中位时，横杆下位移动，探头在左边
 
-      //   // 横杆前状态在下位时，横杆上位移动，探头在中间
+        //   // 横杆前状态在下位时，横杆上位移动，探头在中间
 
-      // }else{
-      //   // 判断当前动画停在固定位置
-      //   if(selectData['poleIncipient'] == 1) {
-      //     // 滑杆停在上面，探头在中间
+        // }else{
+        //   // 判断当前动画停在固定位置
+        //   if(selectData['poleIncipient'] == 1) {
+        //     // 滑杆停在上面，探头在中间
 
-      //   }else if (selectData['poleMiddle'] == 1) {
-      //     // 滑杆停在中间面，初始探头在右边
+        //   }else if (selectData['poleMiddle'] == 1) {
+        //     // 滑杆停在中间面，初始探头在右边
 
-      //   } else if (selectData['poleNether'] == 1) {
-      //     // 滑杆停在下面，初始探头在左边
+        //   } else if (selectData['poleNether'] == 1) {
+        //     // 滑杆停在下面，初始探头在左边
 
-      //   }
-      // }
-    } else {
-      // if(selectData['poleIncipient'] == 1){
-      //   deviceRunState = ''
-      //   tanTouRunState = ''
-      // }
+        //   }
+        // }
+      } else {
+        // if(selectData['poleIncipient'] == 1){
+        //   deviceRunState = ''
+        //   tanTouRunState = ''
+        // }
+      }
     }
-  }
 
-  if (selectData.deviceType == 'windrect_rect') {
-    if (selectData['apparatusRun'] == 1) {
-      const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
-      if (flag) play(flag);
-    } else {
-      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
-      if (flag) play(flag, true);
+    if (selectData.deviceType == 'windrect_rect') {
+      if (selectData['apparatusRun'] == 1) {
+        const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
+        if (flag) play(flag);
+      } else {
+        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
+        if (flag) play(flag, true);
+      }
+    }
+
+    if (selectData.deviceType == 'windrect_ds') {
+      if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
+        if (!deviceRunState) {
+          deviceRunState = 'start';
+          play('down');
+        }
+      } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
+        deviceRunState = '';
+        play('up');
+      }
     }
   }
 
-  if (selectData.deviceType == 'windrect_ds') {
-    if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
-      if (!deviceRunState) {
-        deviceRunState = 'start';
+  // 自测动画方法
+  function testPlay(flag) {
+    if (selectData.deviceType == 'windrect_rect') {
+      setTimeout(() => {
+        play('center');
+      }, 0);
+      setTimeout(() => {
         play('down');
+      }, 4000);
+      setTimeout(() => {
+        play('up');
+      }, 10000);
+    }
+    if (selectData.deviceType == 'windrect_normal') {
+      setTimeout(() => {
+        play('up');
+      }, 0);
+      setTimeout(() => {
+        play('center');
+      }, 10000);
+      setTimeout(() => {
+        play('down');
+      }, 18000);
+      setTimeout(() => {
+        play('up');
+      }, 21000);
+    }
+    if (selectData.deviceType == 'windrect_ds') {
+      play('moni');
+    }
+  }
+
+  function clearPlay() {
+    modalType.value = 'autoClear';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
+  }
+
+  function startRun() {
+    modalType.value = 'sing';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
+  }
+  // 切换检测数据
+  async function getSelectRow(selectRow, index) {
+    if (selectRow) {
+      loading.value = true;
+      selectRowIndex.value = index;
+      Object.assign(selectData, selectRow);
+      let type = '';
+      if (selectRow['modelType']) {
+        type = selectRow['modelType'];
+        debugger;
+      } else {
+        if (selectRow.deviceType.startsWith('windrect_rect')) {
+          type = 'lmWindRect';
+        }
+        if (selectRow.deviceType.startsWith('windrect_normal')) {
+          type = 'zdWindRect';
+        }
+        if (selectRow.deviceType.startsWith('windrect_rect_single')) {
+          type = 'lmWindSide';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds')) {
+          type = 'dsWindRect_move';
+          // type = 'duisheFixed';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_four')) {
+          //windrect_ds_two
+          type = 'dsWindRect_four';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_two')) {
+          type = 'dsWindRect_two';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
+          type = 'duisheFixed';
+        }
+        if (
+          selectRow.deviceType.startsWith('windrect_dd') ||
+          selectRow.deviceType == 'windrect_safety' ||
+          selectRow.deviceType == 'windrect_sensor'
+        ) {
+          type = 'ddWindSide';
+        }
       }
-    } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
+
+      // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
+      await setModelType(type);
+      loading.value = false;
       deviceRunState = '';
-      play('up');
+      tanTouRunState = '';
+      await getCamera(selectRow.deviceID, playerRef.value);
     }
   }
-}
-
-// 自测动画方法
-function testPlay(flag) {
-  if (selectData.deviceType == 'windrect_rect') {
-    setTimeout(() => {
-      play('center');
-    }, 0);
-    setTimeout(() => {
-      play('down');
-    }, 4000);
-    setTimeout(() => {
-      play('up');
-    }, 10000);
-  }
-  if (selectData.deviceType == 'windrect_normal') {
-    setTimeout(() => {
-      play('up');
-    }, 0);
-    setTimeout(() => {
-      play('center');
-    }, 10000);
-    setTimeout(() => {
-      play('down');
-    }, 18000);
-    setTimeout(() => {
-      play('up');
-    }, 21000);
+
+  /* 一键测风 */
+  function handleOk() {
+    modalType.value = 'multiple';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
   }
-  if (selectData.deviceType == 'windrect_ds') {
-    play('moni');
+
+  /* 打开一键测风弹窗 */
+  function openModel() {
+    setModalProps({ visible: true });
   }
-}
 
-function clearPlay() {
-  modalType.value = 'autoClear';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function resetHandle() {
+    modalType.value = 'resetWind';
+    modalIsShow.value = true;
   }
-}
 
-function startRun() {
-  modalType.value = 'sing';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function exportExcel(id) {
+    exportXls({ testid: id });
   }
-}
-// 切换检测数据
-async function getSelectRow(selectRow, index) {
-  if (selectRow) {
-    loading.value = true;
-    selectRowIndex.value = index;
-    Object.assign(selectData, selectRow);
-    let type = '';
-    if (selectRow['modelType']) {
-      type = selectRow['modelType'];
-    } else {
-      if (selectRow.deviceType.startsWith('windrect_rect')) {
-        type = 'lmWindRect';
-      }
-      if (selectRow.deviceType.startsWith('windrect_normal')) {
-        type = 'zdWindRect';
-      }
-      if (selectRow.deviceType.startsWith('windrect_rect_single')) {
-        type = 'lmWindSide';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds')) {
-        type = 'dsWindRect_move';
-        // type = 'duisheFixed';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_four')) {
-        //windrect_ds_two
-        type = 'dsWindRect_four';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_two')) {
-        type = 'dsWindRect_two';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
-        type = 'duisheFixed';
-      }
-      if (selectRow.deviceType.startsWith('windrect_dd') || selectRow.deviceType == 'windrect_safety' || selectRow.deviceType == 'windrect_sensor') {
-        type = 'ddWindSide';
-      }
-    }
 
-    // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
-    await setModelType(type);
-    loading.value = false;
-    deviceRunState = '';
-    tanTouRunState = '';
-    await getCamera(selectRow.deviceID, playerRef.value);
+  /* 关闭一键测风弹窗 */
+  function handleCancel() {
+    setModalProps({ visible: false });
+    modalTable.value.clearSelectedRowKeys();
   }
-}
-
-/* 一键测风 */
-function handleOk() {
-  modalType.value = 'multiple';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+
+  /* 关闭一键测风控制*/
+  function handleCancelControl() {
+    modalIsShow.value = false;
   }
-}
-
-/* 打开一键测风弹窗 */
-function openModel() {
-  setModalProps({ visible: true });
-}
-
-function resetHandle() {
-  modalType.value = 'resetWind';
-  modalIsShow.value = true;
-}
-
-function exportExcel(id) {
-  exportXls({ testid: id });
-}
-
-/* 关闭一键测风弹窗 */
-function handleCancel() {
-  setModalProps({ visible: false });
-  modalTable.value.clearSelectedRowKeys();
-}
-
-/* 关闭一键测风控制*/
-function handleCancelControl() {
-  modalIsShow.value = false;
-}
-
-function controlDevice(passWord, type) {
-  try {
-    if (type == 'sing') {
-      testWind({
-        ids: [selectData.deviceID],
-        maxnum: 1000,
-        windnum: 1,
-        password: passWord || globalConfig?.simulatedPassword,
-      }).then((res) => {
-        if (res && res.success === false) {
-          message.error(res.message);
-        } else {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+
+  function controlDevice(passWord, type) {
+    try {
+      if (type == 'sing') {
+        testWind({
+          ids: [selectData.deviceID],
+          maxnum: 1000,
+          windnum: 1,
+          password: passWord || globalConfig?.simulatedPassword,
+        }).then((res) => {
+          if (res && res.success === false) {
+            message.error(res.message);
           } else {
-            message.success('指令已下发成功！');
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           }
-        }
-        modalIsShow.value = false;
-      });
-    } else if (type == 'multiple') {
-      const ids = toRaw(modalTable.value.selectedRowKeys);
-      testWind({
-        ids: ids,
-        maxnum: 1000,
-        windnum: modalTable.value.selectedRowKeys.length,
-        password: passWord || globalConfig?.simulatedPassword,
-      }).then((res) => {
-        if (res && res.success === false) {
-          message.error(res.message);
-        } else {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+          modalIsShow.value = false;
+        });
+      } else if (type == 'multiple') {
+        const ids = toRaw(modalTable.value.selectedRowKeys);
+        testWind({
+          ids: ids,
+          maxnum: 1000,
+          windnum: modalTable.value.selectedRowKeys.length,
+          password: passWord || globalConfig?.simulatedPassword,
+        }).then((res) => {
+          if (res && res.success === false) {
+            message.error(res.message);
           } else {
-            message.success('指令已下发成功！');
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           }
-        }
-        modalIsShow.value = false;
-        setModalProps({ visible: false });
-        modalTable.value.clearSelectedRowKeys();
-      });
-    } else if (type == 'autoClear') {
-      const data = {
-        deviceid: selectData.deviceID,
-        devicetype: selectData.deviceType,
-        paramcode: 'autoClear',
-        value: null,
-        password: passWord || globalConfig?.simulatedPassword,
-        masterComputer: selectData.masterComputer,
-      };
-      deviceControlApi(data).then((res) => {
-        // 模拟时开启
-        if (res.success) {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+          modalIsShow.value = false;
+          setModalProps({ visible: false });
+          modalTable.value.clearSelectedRowKeys();
+        });
+      } else if (type == 'autoClear') {
+        const data = {
+          deviceid: selectData.deviceID,
+          devicetype: selectData.deviceType,
+          paramcode: 'autoClear',
+          value: null,
+          password: passWord || globalConfig?.simulatedPassword,
+          masterComputer: selectData.masterComputer,
+        };
+        deviceControlApi(data).then((res) => {
+          // 模拟时开启
+          if (res.success) {
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           } else {
-            message.success('指令已下发成功！');
+            message.error(res.message);
           }
-        } else {
-          message.error(res.message);
-        }
+          modalIsShow.value = false;
+        });
+      } else if (type == 'resetWind') {
+        resetWind({}).then((res: any) => {
+          message.info(res);
+        });
         modalIsShow.value = false;
-      });
-    } else if (type == 'resetWind') {
-      resetWind({}).then((res: any) => {
-        message.info(res);
-      });
+      }
+    } catch (error) {
+      message.error('测风失败，请联系管理员。。。');
       modalIsShow.value = false;
     }
-  } catch (error) {
-    message.error('测风失败，请联系管理员。。。');
-    modalIsShow.value = false;
   }
-}
 
-/** 避灾路线上的测风装置 */
-async function getPathList() {
-  const pathArr = await pathList({});
-  criticalPathList.value = pathArr.records.filter((item) => {
-    return item.strsystype == 3;
-  });
-}
-
-/* 根据路线选择测风装置 */
-function selectCriticalPath(pathId) {
-  deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
-    const ids: string[] = [];
-    res.records.forEach((item) => {
-      ids.push(item.id);
+  /** 避灾路线上的测风装置 */
+  async function getPathList() {
+    const pathArr = await pathList({});
+    criticalPathList.value = pathArr.records.filter((item) => {
+      return item.strsystype == 3;
     });
-    if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
-  });
-}
+  }
 
-function deviceEdit(e: Event, type: string, record) {
-  e.stopPropagation();
-  openModal(true, {
-    type,
-    deviceId: record['deviceID'],
+  /* 根据路线选择测风装置 */
+  function selectCriticalPath(pathId) {
+    deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
+      const ids: string[] = [];
+      res.records.forEach((item) => {
+        ids.push(item.id);
+      });
+      if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
+    });
+  }
+
+  function deviceEdit(e: Event, type: string, record) {
+    e.stopPropagation();
+    openModal(true, {
+      type,
+      deviceId: record['deviceID'],
+    });
+  }
+
+  onBeforeMount(() => {
+    getPathList();
   });
-}
-
-onBeforeMount(() => {
-  getPathList();
-});
-
-onMounted(async () => {
-  // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
-  // loading.value = true;
-  // mountedThree(playerDom).then(async () => {
-  //   getMonitor(true);
-  //   // loading.value = false;
-  // });
-  const { query } = unref(currentRoute);
-  if (query['deviceType']) deviceType.value = query['deviceType'] as string;
-  loading.value = true;
-  mountedThree(null).then(async () => {
-    await getMonitor(true);
-    loading.value = false;
+
+  onMounted(async () => {
+    // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
+    // loading.value = true;
+    // mountedThree(playerDom).then(async () => {
+    //   getMonitor(true);
+    //   // loading.value = false;
+    // });
+    const { query } = unref(currentRoute);
+    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
+    loading.value = true;
+    mountedThree(null).then(async () => {
+      await getMonitor(true);
+      loading.value = false;
+    });
   });
-});
 
-onUnmounted(() => {
-  removeCamera();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-  destroy();
-});
+  onUnmounted(() => {
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    destroy();
+  });
 </script>
 <style scoped lang="less">
-@import '/@/design/theme.less';
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
-.scene-box {
-  .bottom-tabs-box {
-    height: 350px;
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
   }
-}
-.head-line {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  .button-box {
-    position: relative;
-    padding: 5px;
-    border: 1px transparent solid;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 34px;
-    border: 1px solid var(--vent-base-border);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--vent-font-color);
-    padding: 0 15px;
-    cursor: pointer;
-    pointer-events: auto;
-    &:hover {
-      background: var(--vent-device-manager-control-btn-hover);
+  .scene-box {
+    .bottom-tabs-box {
+      height: 350px;
     }
-    &::before {
-      width: calc(100% - 6px);
-      height: 26px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit; /*important*/
-      background: var(--vent-device-manager-control-btn);
+  }
+  .head-line {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .button-box {
+      position: relative;
+      padding: 5px;
+      border: 1px transparent solid;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 34px;
+      border: 1px solid var(--vent-base-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--vent-font-color);
+      padding: 0 15px;
+      cursor: pointer;
+      pointer-events: auto;
+      &:hover {
+        background: var(--vent-device-manager-control-btn-hover);
+      }
+      &::before {
+        width: calc(100% - 6px);
+        height: 26px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit; /*important*/
+        background: var(--vent-device-manager-control-btn);
+      }
     }
   }
-}
-:deep(.@{ventSpace}-picker-datetime-panel) {
-  height: 200px !important;
-  overflow-y: auto !important;
-}
+  :deep(.@{ventSpace}-picker-datetime-panel) {
+    height: 200px !important;
+    overflow-y: auto !important;
+  }
 </style>

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

@@ -9,6 +9,7 @@ import lmWindRectSide from './longmenSide.threejs';
 import fixedWindRect from './duisheFixed.threejs';
 import useEvent from '../../../../utils/threejs/useEvent';
 import gsap from 'gsap';
+import { getDictItemsByCode } from '/@/utils/dict';
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
@@ -352,25 +353,43 @@ export const mountedThree = (playerDom) => {
     model.setEnvMap('test1.hdr');
     model.renderer.toneMappingExposure = 1.0;
 
-    ddWindRectObj = new ddWindRect(model);
-    await ddWindRectObj.mountedThree();
+    const dictCodes = getDictItemsByCode('windrecModel');
+    for (let i = 0; i < dictCodes.length; i++) {
+      const dict = dictCodes[i];
 
-    fixedWindRectObj = new fixedWindRect(model);
-    await fixedWindRectObj.mountedThree(playerDom);
+      switch (dict.value) {
+        case 'lmWindRect': //
+          debugger;
+          lmWindRectObj = new lmWindRect(model);
+          await lmWindRectObj.mountedThree();
+          break;
+        case 'zdWindRect':
+          zdWindRectObj = new zdWindRect(model);
+          await zdWindRectObj.mountedThree();
+          break;
+        case 'lmWindRectSideObj':
+          lmWindRectSideObj = new lmWindRectSide(model);
+          await lmWindRectSideObj.mountedThree();
+          break;
+        case 'ddWindSide_sensor':
+          ddWindRectObj = new ddWindRect(model);
+          await ddWindRectObj.mountedThree();
+          break;
+        case 'duisheFixed':
+          fixedWindRectObj = new fixedWindRect(model);
+          await fixedWindRectObj.mountedThree(playerDom);
+          break;
+        case 'dsWindRect_two':
+        case 'dsWindRect_four':
+        case 'dsWindRect_move':
+          if (dsWindRectObj) {
+            dsWindRectObj = new dsWindRect(model);
+            await dsWindRectObj.mountedThree();
+          }
 
-    dsWindRectObj = new dsWindRect(model);
-    await dsWindRectObj.mountedThree();
-
-    // 下面模型没有矿用到，为了性能暂时不加载
-
-    // zdWindRectObj = new zdWindRect(model);
-    // await zdWindRectObj.mountedThree();
-
-    // lmWindRectSideObj = new lmWindRectSide(model);
-    // await lmWindRectSideObj.mountedThree();
-
-    // lmWindRectObj = new lmWindRect(model);
-    // await lmWindRectObj.mountedThree();
+          break;
+      }
+    }
     resolve(null);
     model.animate();
     startAnimation();