Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/hooks/web/useWebColumns.ts

@@ -10,10 +10,12 @@ const arrToColumns = (tableHeaderColumns = []) => {
   tableHeaderColumns.forEach((item: any) => {
     const columnsItem = {
       title: item.des, //_dictText
-      dataIndex: item.dict ? `${item.monitorcode}_dictText` : item.monitorcode,
+      // dataIndex: item.dict ? `${item.monitorcode}_dictText` : item.monitorcode,
+      dataIndex: item.monitorcode,
       width: item.width || 100,
       defaultHidden: !item.showflag,
       align: 'center',
+      dict: item.dict,
       // sorter: item.sort ? true : false,
       customRender: ({ text }) => {
         return text == null || text == '' || text == undefined ? '-' : text;

src/utils/common/renderUtils.ts

@@ -54,6 +54,24 @@ const render = {
     }
     return isEmpty(text) || !renderTag ? h('span', text) : h(Tag, text);
   },
+
+  /**
+   * 根据字典编码 渲染
+   * @param v 值
+   * @param code 字典编码
+   * @param renderTag 是否使用tag渲染
+   */
+  renderDictText: (v, code) => {
+    let text = '';
+    const array = getDictItemsByCode(code) || [];
+    const obj = array.filter((item) => {
+      return item.value == v;
+    });
+    if (obj.length > 0) {
+      text = obj[0].text;
+    }
+    return text;
+  },
   /**
    * 渲染图片
    * @param text

src/utils/threejs/main.worker.ts

@@ -46,6 +46,7 @@ export function initModalWorker() {
     'jbfj/jbfj-hd_2025-01-09.glb',
     'jbfj/jbfj-fm_2023-06-02.glb',
     'jbfj/jbfj-fc_2023-06-02.glb',
+    'jbfj/jbfj-dual_2025-01-20.glb',
     'ztfj/dj1_2023-06-02.glb',
     'ztfj/dj2_2023-06-02.glb',
     'ztfj/bg_2023-06-02.glb',

src/views/vent/comment/threejs/Smoke.ts

@@ -100,7 +100,6 @@ export default class Smoke {
   }
 
   startSmoke(duration = 15) {
-    debugger;
     if (!this.pathArr && this.frameId && !this.points && !this.points.geometry) {
       return;
     }

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

@@ -162,15 +162,27 @@
             ...arr,
             ...e.majorpath_data.map(({ majorpath, readData }) => {
               // 报表数据只有总数据，按实时数据计算比例然后乘以报表数据
-              return {
-                majorpath: {
-                  drag_1: Math.round((majorpath.drag_1 / majorpath.drag_total) * parseInt(readData.fy_merge.value)),
-                  drag_2: Math.round((majorpath.drag_2 / majorpath.drag_total) * parseInt(readData.fy_merge.value)),
-                  drag_3: Math.round((majorpath.drag_3 / majorpath.drag_total) * parseInt(readData.fy_merge.value)),
-                  drag_total: readData.fy_merge.value,
-                  m3_total: readData.retM3_merge.value,
-                },
-              };
+              if (readData.fy_merge && readData.retM3_merge) {
+                return {
+                  majorpath: {
+                    drag_1: Math.round((majorpath.drag_1 / majorpath.drag_total) * parseInt(readData.fy_merge.value)),
+                    drag_2: Math.round((majorpath.drag_2 / majorpath.drag_total) * parseInt(readData.fy_merge.value)),
+                    drag_3: Math.round((majorpath.drag_3 / majorpath.drag_total) * parseInt(readData.fy_merge.value)),
+                    drag_total: readData.fy_merge.value,
+                    m3_total: readData.retM3_merge.value,
+                  },
+                };
+              } else {
+                return {
+                  majorpath: {
+                    drag_1: '-',
+                    drag_2: '-',
+                    drag_3: '-',
+                    drag_total: '-',
+                    m3_total: '-',
+                  },
+                };
+              }
             }),
           ];
         }

src/views/vent/monitorManager/compressor/components/nitrogenHome_dltj.vue

@@ -173,6 +173,26 @@
       </div>
       <div ref="playerRef" class="player-box" style=""> </div>
     </div>
+    <div class="modal-monitor">
+      <fourBorderBg id="downWindMonitor">
+        <div class="title">下风测监测 </div>
+        <div class="monitor-item" v-for="(data, index) in downWindData" :key="index">
+          <span class="monitor-title">{{ data.title }} :</span>
+          <span class="monitor-val" v-if="!refresh"
+            ><span class="val">
+              {{
+                monitorData.length > 0 && monitorData[0][data.code]
+                  ? data.raw
+                    ? monitorData[0][data.code]
+                    : parseFloat(monitorData[0][data.code]).toFixed(2)
+                  : '-'
+              }}
+            </span>
+            <span class="unit">{{ data.unit }}</span></span
+          >
+        </div>
+      </fourBorderBg>
+    </div>
   </div>
 </template>
 <script lang="ts" setup name="nitrogenHome">
@@ -184,6 +204,7 @@
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
   import { deviceControlApi } from '/@/api/vent/index';
   // import { preMonitorListData, preFanMonitor, nitrogenMonitor } from '../nitrogen.data.dltj';
+  import { downWindData } from '../nitrogen.data';
   import { formatNum } from '/@/utils/ventutil';
   import { useCamera } from '/@/hooks/system/useCamera';
   import { message } from 'ant-design-vue';

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

@@ -245,8 +245,8 @@ export function getMonitorComponent() {
       return nitrogenHome;
     default:
       // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_blt.vue'));
-      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_bet.vue'));
-      // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_blt.vue'));
+      // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_bet.vue'));
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_dltj.vue'));
       return nitrogenHome;
   }
 }

src/views/vent/monitorManager/dedustMonitor/dedust.threejs.ts

@@ -60,7 +60,7 @@ export function setModelType(modelType: 'dedust') {
       if (modelType === type) {
         group = context?.group as THREE.Object3D;
         setTimeout(async () => {
-          if (!model.scene?.getObjectByName(type) && group) {
+          if (!model.scene?.getObjectByName(group.name) && group) {
             model.scene?.add(group);
           }
           const oldCameraPosition = { x: -693, y: 474, z: 398 };

src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -67,7 +67,7 @@ export function getMonitorComponent() {
       break;
     default:
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.sw.vue'));
-      // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.vue'));
+    // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.vue'));
     // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal-Gx.vue'));
     // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.cct.vue'));
   }
@@ -521,11 +521,6 @@ export const haveHandlerArr = [
   'spray',
   'dustdev',
   'gate_linkdlfm',
-  'bundleSpyDayReport',
-  'dustDayReport',
-  'bundleDayReport',
-  // 'gasDayReport',
-
   // 'firemon',
 ]; // table无操作
 export const noWarningArr = [
@@ -543,5 +538,5 @@ export const haveSysDetailArr = ['forcFan', 'pulping']; //有场景详情的
 // export const haveSysDetailArr = ['']; //有场景详情的
 export const noHistoryArr = () =>
   History_Type['type'] == 'remote'
-    ? ['surface_history', 'majorpath', 'gasDayReport', 'dustDayReport', 'bundleDayReport', 'bundleSpyDayReport', 'gate_linkdlfm']
-    : ['majorpath', 'gasDayReport', 'dustDayReport', 'bundleDayReport', 'bundleSpyDayReport', 'gate_linkdlfm'];
+    ? ['surface_history', 'majorpath', 'gasDayReport', 'dustDayReport', 'bundleDayReport', 'bundleSpyDayReport', 'gasDay', 'gate_linkdlfm']
+    : ['majorpath', 'gasDayReport', 'dustDayReport', 'bundleDayReport', 'bundleSpyDayReport', 'gate_linkdlfm', 'gasDay'];

src/views/vent/monitorManager/fanLocalMonitor/components/dischargeGas.vue

@@ -44,213 +44,213 @@
 </template>
 
 <script lang="ts" setup>
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { ref, nextTick, onMounted, watch } from 'vue';
-import { option, chartsColumnListGas, echatsOption1 } from '../fanLocal.data';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { autoAdjust } from '../fanLocal.api';
-import { message } from 'ant-design-vue';
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => {},
-  },
-  gasMax: {
-    type: Number,
-  },
-  fanlocalId: {
-    type: Number,
-  },
-});
-const emit = defineEmits(['close', 'register', 'openModal']);
-// 注册 modal
-const [register, { closeModal }] = useModalInner((data) => {
-  nextTick(() => {
-    if (option['xAxis']) option['xAxis']['data'] = xData;
-    option['series'] = yDataList;
-    initEcharts();
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ref, nextTick, onMounted, watch } from 'vue';
+  import { option, chartsColumnListGas, echatsOption1 } from '../fanLocal.data';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { autoAdjust } from '../fanLocal.api';
+  import { message } from 'ant-design-vue';
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    gasMax: {
+      type: Number,
+    },
+    fanlocalId: {
+      type: Number,
+    },
+  });
+  const emit = defineEmits(['close', 'register', 'openModal']);
+  // 注册 modal
+  const [register, { closeModal }] = useModalInner((data) => {
+    nextTick(() => {
+      if (option['xAxis']) option['xAxis']['data'] = xData;
+      option['series'] = yDataList;
+      initEcharts();
+    });
   });
-});
 
-const ChartRef = ref();
-const myChart = ref();
-const refresh = ref(true);
-const xData: any[] = [];
-const yDataList: [] = [];
-const echartsData = ref<Record<string, any>[]>([]);
-const monitorData = ref<Record<string, any>>({});
-watch(
-  () => props.data,
-  (newVal) => {
-    // 创建新对象，合并 newVal 和 targetVolume
-    const combinedData = {
-      gasT1: newVal.gasT1,
-      gasT2: newVal.gasT2,
-      gasT3: newVal.gasT3,
-      gasT4: newVal.gasT4,
-      readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
-    };
-    monitorData.value = combinedData;
-    if (echartsData.value.length > 20) {
-      echartsData.value.shift();
+  const ChartRef = ref();
+  const myChart = ref();
+  const refresh = ref(true);
+  const xData: any[] = [];
+  const yDataList: [] = [];
+  const echartsData = ref<Record<string, any>[]>([]);
+  const monitorData = ref<Record<string, any>>({});
+  watch(
+    () => props.data,
+    (newVal) => {
+      // 创建新对象，合并 newVal 和 targetVolume
+      const combinedData = {
+        gasT1: newVal.gasT1,
+        gasT2: newVal.gasT2,
+        gasT3: newVal.gasT3,
+        gasT4: newVal.gasT4,
+        readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
+      };
+      monitorData.value = combinedData;
+      if (echartsData.value.length > 20) {
+        echartsData.value.shift();
+      }
+      echartsData.value = [...echartsData.value, combinedData];
+    }
+  );
+  function initEcharts() {
+    if (ChartRef.value) {
+      myChart.value = echarts.init(ChartRef.value);
+      option && myChart.value.setOption(option);
+      refresh.value = false;
+      nextTick(() => {
+        setTimeout(() => {
+          refresh.value = true;
+        }, 0);
+      });
     }
-    echartsData.value = [...echartsData.value, combinedData];
   }
-);
-function initEcharts() {
-  if (ChartRef.value) {
-    myChart.value = echarts.init(ChartRef.value);
-    option && myChart.value.setOption(option);
-    refresh.value = false;
-    nextTick(() => {
-      setTimeout(() => {
-        refresh.value = true;
-      }, 0);
-    });
+  function onHide() {
+    closeModal();
+  }
+  function stop() {
+    const params = { auto: 0, fanlocalId: props.fanlocalId };
+    autoAdjust(params)
+      .then(() => {
+        message.success('指令已下发成功！');
+      })
+      .catch(() => {
+        message.error('指令下发失败');
+      });
+  }
+  onMounted(() => {});
+  function onSubmit() {
+    emit('close');
+    closeModal();
   }
-}
-function onHide() {
-  closeModal();
-}
-function stop() {
-  const params = { auto: 0, fanlocalId: props.fanlocalId };
-  autoAdjust(params)
-    .then(() => {
-      message.success('指令已下发成功！');
-    })
-    .catch(() => {
-      message.error('指令下发失败');
-    });
-}
-onMounted(() => {});
-function onSubmit() {
-  emit('close');
-  closeModal();
-}
 </script>
 
 <style scoped lang="less">
-.modal-box {
-  display: flex;
-  flex-direction: row;
-  background-color: #ffffff05;
-  padding: 10px 8px 0 8px;
-  border: 1px solid #00d8ff22;
-  position: relative;
-  // min-height: 600px;
-  .left-box {
-    flex: 1; /* 占据 3/4 的空间 */
-    background-image: url(../../../../../assets/images/dischargeGas.svg);
-    background-repeat: no-repeat;
-    background-size: contain; /* 确保背景图片完整显示 */
-    background-position: center; /* 确保背景图片居中 */
-  }
-  .right-box {
-    flex: 1; /* 占据 3/4 的空间 */
-    height: 400px;
-    width: 100%;
+  .modal-box {
+    display: flex;
+    flex-direction: row;
+    background-color: #ffffff05;
+    padding: 10px 8px 0 8px;
+    border: 1px solid #00d8ff22;
+    position: relative;
+    // min-height: 600px;
+    .left-box {
+      flex: 1; /* 占据 3/4 的空间 */
+      background-image: url(../../../../../assets/images/dischargeGas.svg);
+      background-repeat: no-repeat;
+      background-size: contain; /* 确保背景图片完整显示 */
+      background-position: center; /* 确保背景图片居中 */
+    }
+    .right-box {
+      flex: 1; /* 占据 3/4 的空间 */
+      height: 400px;
+      width: 100%;
+    }
   }
-}
-.setting-box {
-  width: 100%;
-  height: 70px;
-  margin: 10px 0;
-  background-color: #ffffff05;
-  border: 1px solid #00d8ff22;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .right-inputs {
+  .setting-box {
     width: 100%;
+    height: 70px;
+    margin: 10px 0;
+    background-color: #ffffff05;
+    border: 1px solid #00d8ff22;
     display: flex;
-    height: 40px;
-    margin: 0 10px;
+    align-items: center;
     justify-content: space-between;
-  }
-  .left-buttons {
-    display: flex;
-    height: 40px;
 
-    .btn {
+    .right-inputs {
+      width: 100%;
+      display: flex;
+      height: 40px;
       margin: 0 10px;
+      justify-content: space-between;
     }
-  }
-  .border-clip {
-    width: 1px;
-    height: 25px;
-    border-right: 1px solid #8b8b8b77;
-  }
-  .input-title {
-    max-width: 150px;
-  }
-  .input-box {
-    width: 120px !important;
-    background: transparent !important;
-    border-color: #00d8ff44 !important;
-    margin-right: 20px;
-    color: #fff !important;
-  }
-  .btn {
-    padding: 8px 20px;
-    position: relative;
-    margin: 10px;
-    border-radius: 2px;
-    color: #fff;
-    width: fit-content;
-    cursor: pointer;
-    float: right;
-    &::before {
-      position: absolute;
-      display: block;
-      content: '';
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      top: 2px;
-      left: 2px;
+    .left-buttons {
+      display: flex;
+      height: 40px;
+
+      .btn {
+        margin: 0 10px;
+      }
+    }
+    .border-clip {
+      width: 1px;
+      height: 25px;
+      border-right: 1px solid #8b8b8b77;
+    }
+    .input-title {
+      max-width: 150px;
+    }
+    .input-box {
+      width: 120px !important;
+      background: transparent !important;
+      border-color: #00d8ff44 !important;
+      margin-right: 20px;
+      color: #fff !important;
+    }
+    .btn {
+      padding: 8px 20px;
+      position: relative;
+      margin: 10px;
       border-radius: 2px;
-      z-index: -1;
+      color: #fff;
+      width: fit-content;
+      cursor: pointer;
+      float: right;
+      &::before {
+        position: absolute;
+        display: block;
+        content: '';
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        top: 2px;
+        left: 2px;
+        border-radius: 2px;
+        z-index: -1;
+      }
     }
-  }
 
-  .btn1 {
-    border: 1px solid #5cfaff;
+    .btn1 {
+      border: 1px solid #5cfaff;
 
-    &::before {
-      background-image: linear-gradient(#2effee92, #0cb1d592);
-    }
+      &::before {
+        background-image: linear-gradient(#2effee92, #0cb1d592);
+      }
 
-    &:hover {
-      border: 1px solid #5cfaffaa;
+      &:hover {
+        border: 1px solid #5cfaffaa;
 
-      &::before {
-        background-image: linear-gradient(#2effee72, #0cb1d572);
+        &::before {
+          background-image: linear-gradient(#2effee72, #0cb1d572);
+        }
       }
     }
   }
-}
 
-@keyframes open {
-  0% {
-    height: 0px;
-  }
-  100% {
-    height: fit-content;
+  @keyframes open {
+    0% {
+      height: 0px;
+    }
+    100% {
+      height: fit-content;
+    }
   }
-}
 
-@keyframes close {
-  0% {
-    height: fit-content;
+  @keyframes close {
+    0% {
+      height: fit-content;
+    }
+    100% {
+      height: 0px;
+    }
+  }
+  :deep(.zxm-divider-inner-text) {
+    color: #cacaca88 !important;
   }
-  100% {
-    height: 0px;
+  :deep(.zxm-form-item) {
+    margin-bottom: 10px;
   }
-}
-:deep(.zxm-divider-inner-text) {
-  color: #cacaca88 !important;
-}
-:deep(.zxm-form-item) {
-  margin-bottom: 10px;
-}
 </style>

src/views/vent/monitorManager/fanLocalMonitor/components/supplyAir.vue

@@ -43,218 +43,218 @@
 </template>
 
 <script lang="ts" setup>
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { ref, onMounted, nextTick, watch } from 'vue';
-import echarts from '/@/utils/lib/echarts';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { option, chartsColumnList1, echatsOption1 } from '../fanLocal.data';
-import { autoAdjust } from '../fanLocal.api';
-import { message } from 'ant-design-vue';
-const emit = defineEmits(['close', 'register', 'openModal']);
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => {},
-  },
-  targetVolume: {
-    type: Number,
-  },
-  fanlocalId: {
-    type: String,
-  },
-});
-// 注册 modal
-const [register, { closeModal }] = useModalInner((data) => {
-  nextTick(() => {
-    if (option['xAxis']) option['xAxis']['data'] = xData;
-    option['series'] = yDataList;
-    initEcharts();
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ref, onMounted, nextTick, watch } from 'vue';
+  import echarts from '/@/utils/lib/echarts';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { option, chartsColumnList1, echatsOption1 } from '../fanLocal.data';
+  import { autoAdjust } from '../fanLocal.api';
+  import { message } from 'ant-design-vue';
+  const emit = defineEmits(['close', 'register', 'openModal']);
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    targetVolume: {
+      type: Number,
+    },
+    fanlocalId: {
+      type: String,
+    },
   });
-});
-const ChartRef = ref();
-const myChart = ref();
-const refresh = ref(true);
-const xData: any[] = [];
-const yDataList: [] = [];
-// const echartsData = ref([]);
-// const monitorData = ref({});
-const echartsData = ref<Record<string, any>[]>([]);
-const monitorData = ref<Record<string, any>>({});
-watch(
-  () => props.data,
-  (newVal) => {
-    // 创建新对象，合并 newVal 和 targetVolume
-    const combinedData = {
-      inletAirVolume_merge: newVal.inletAirVolume_merge,
-      targetVolume: props.targetVolume, // 添加目标风量
-      readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
-    };
-    monitorData.value = combinedData;
-    if (echartsData.value.length > 20) {
-      echartsData.value.shift();
-    }
-    echartsData.value = [...echartsData.value, combinedData];
-  }
-);
-function onSubmit() {
-  emit('close');
-  closeModal();
-}
-function onCancel() {
-  //
-}
-function initEcharts() {
-  if (ChartRef.value) {
-    myChart.value = echarts.init(ChartRef.value);
-    option && myChart.value.setOption(option);
-    refresh.value = false;
+  // 注册 modal
+  const [register, { closeModal }] = useModalInner((data) => {
     nextTick(() => {
-      setTimeout(() => {
-        refresh.value = true;
-      }, 0);
+      if (option['xAxis']) option['xAxis']['data'] = xData;
+      option['series'] = yDataList;
+      initEcharts();
     });
+  });
+  const ChartRef = ref();
+  const myChart = ref();
+  const refresh = ref(true);
+  const xData: any[] = [];
+  const yDataList: [] = [];
+  // const echartsData = ref([]);
+  // const monitorData = ref({});
+  const echartsData = ref<Record<string, any>[]>([]);
+  const monitorData = ref<Record<string, any>>({});
+  watch(
+    () => props.data,
+    (newVal) => {
+      // 创建新对象，合并 newVal 和 targetVolume
+      const combinedData = {
+        inletAirVolume_merge: newVal.inletAirVolume_merge,
+        targetVolume: props.targetVolume, // 添加目标风量
+        readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
+      };
+      monitorData.value = combinedData;
+      if (echartsData.value.length > 20) {
+        echartsData.value.shift();
+      }
+      echartsData.value = [...echartsData.value, combinedData];
+    }
+  );
+  function onSubmit() {
+    emit('close');
+    closeModal();
   }
-}
-function onHide() {
-  closeModal();
-}
-function stop() {
-  const params = { auto: 0, fanlocalId: props.fanlocalId };
-  autoAdjust(params)
-    .then(() => {
-      message.success('指令已下发成功！');
-    })
-    .catch(() => {
-      message.error('指令下发失败');
-    });
-}
-onMounted(() => {
-  // initEcharts();
-});
+  function onCancel() {
+    //
+  }
+  function initEcharts() {
+    if (ChartRef.value) {
+      myChart.value = echarts.init(ChartRef.value);
+      option && myChart.value.setOption(option);
+      refresh.value = false;
+      nextTick(() => {
+        setTimeout(() => {
+          refresh.value = true;
+        }, 0);
+      });
+    }
+  }
+  function onHide() {
+    closeModal();
+  }
+  function stop() {
+    const params = { auto: 0, fanlocalId: props.fanlocalId };
+    autoAdjust(params)
+      .then(() => {
+        message.success('指令已下发成功！');
+      })
+      .catch(() => {
+        message.error('指令下发失败');
+      });
+  }
+  onMounted(() => {
+    // initEcharts();
+  });
 </script>
 
 <style scoped lang="less">
-.modal-box {
-  display: flex;
-  flex-direction: row;
-  background-color: #ffffff05;
-  padding: 10px 8px 0 8px;
-  border: 1px solid #00d8ff22;
-  position: relative;
-  // min-height: 600px;
-  .left-box {
-    flex: 1; /* 占据 3/4 的空间 */
-    background-image: url(../../../../../assets/images/supplyAir.svg);
-    background-repeat: no-repeat;
-    background-size: contain; /* 确保背景图片完整显示 */
-    background-position: center; /* 确保背景图片居中 */
-  }
-  .right-box {
-    flex: 1; /* 占据 3/4 的空间 */
-    height: 400px;
-    width: 100%;
+  .modal-box {
+    display: flex;
+    flex-direction: row;
+    background-color: #ffffff05;
+    padding: 10px 8px 0 8px;
+    border: 1px solid #00d8ff22;
+    position: relative;
+    // min-height: 600px;
+    .left-box {
+      flex: 1; /* 占据 3/4 的空间 */
+      background-image: url(../../../../../assets/images/supplyAir.svg);
+      background-repeat: no-repeat;
+      background-size: contain; /* 确保背景图片完整显示 */
+      background-position: center; /* 确保背景图片居中 */
+    }
+    .right-box {
+      flex: 1; /* 占据 3/4 的空间 */
+      height: 400px;
+      width: 100%;
+    }
   }
-}
-.setting-box {
-  width: 100%;
-  height: 70px;
-  margin: 10px 0;
-  background-color: #ffffff05;
-  border: 1px solid #00d8ff22;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .right-inputs {
+  .setting-box {
     width: 100%;
+    height: 70px;
+    margin: 10px 0;
+    background-color: #ffffff05;
+    border: 1px solid #00d8ff22;
     display: flex;
-    height: 40px;
-    margin: 0 10px;
+    align-items: center;
     justify-content: space-between;
-  }
-  .left-buttons {
-    display: flex;
-    height: 40px;
 
-    .btn {
+    .right-inputs {
+      width: 100%;
+      display: flex;
+      height: 40px;
       margin: 0 10px;
+      justify-content: space-between;
     }
-  }
-  .border-clip {
-    width: 1px;
-    height: 25px;
-    border-right: 1px solid #8b8b8b77;
-  }
-  .input-title {
-    max-width: 150px;
-  }
-  .input-box {
-    width: 120px !important;
-    background: transparent !important;
-    border-color: #00d8ff44 !important;
-    margin-right: 20px;
-    color: #fff !important;
-  }
-  .btn {
-    padding: 8px 20px;
-    margin: 10px;
-    position: relative;
-    border-radius: 2px;
-    color: #fff;
-    width: fit-content;
-    cursor: pointer;
+    .left-buttons {
+      display: flex;
+      height: 40px;
 
-    &::before {
-      position: absolute;
-      display: block;
-      content: '';
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      top: 2px;
-      left: 2px;
-      border-radius: 2px;
-      z-index: -1;
+      .btn {
+        margin: 0 10px;
+      }
     }
-  }
-
-  .btn1 {
-    border: 1px solid #5cfaff;
+    .border-clip {
+      width: 1px;
+      height: 25px;
+      border-right: 1px solid #8b8b8b77;
+    }
+    .input-title {
+      max-width: 150px;
+    }
+    .input-box {
+      width: 120px !important;
+      background: transparent !important;
+      border-color: #00d8ff44 !important;
+      margin-right: 20px;
+      color: #fff !important;
+    }
+    .btn {
+      padding: 8px 20px;
+      margin: 10px;
+      position: relative;
+      border-radius: 2px;
+      color: #fff;
+      width: fit-content;
+      cursor: pointer;
 
-    &::before {
-      background-image: linear-gradient(#2effee92, #0cb1d592);
+      &::before {
+        position: absolute;
+        display: block;
+        content: '';
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        top: 2px;
+        left: 2px;
+        border-radius: 2px;
+        z-index: -1;
+      }
     }
 
-    &:hover {
-      border: 1px solid #5cfaffaa;
+    .btn1 {
+      border: 1px solid #5cfaff;
 
       &::before {
-        background-image: linear-gradient(#2effee72, #0cb1d572);
+        background-image: linear-gradient(#2effee92, #0cb1d592);
+      }
+
+      &:hover {
+        border: 1px solid #5cfaffaa;
+
+        &::before {
+          background-image: linear-gradient(#2effee72, #0cb1d572);
+        }
       }
     }
   }
-}
 
-@keyframes open {
-  0% {
-    height: 0px;
-  }
-  100% {
-    height: fit-content;
+  @keyframes open {
+    0% {
+      height: 0px;
+    }
+    100% {
+      height: fit-content;
+    }
   }
-}
 
-@keyframes close {
-  0% {
-    height: fit-content;
+  @keyframes close {
+    0% {
+      height: fit-content;
+    }
+    100% {
+      height: 0px;
+    }
+  }
+  :deep(.zxm-divider-inner-text) {
+    color: #cacaca88 !important;
   }
-  100% {
-    height: 0px;
+  :deep(.zxm-form-item) {
+    margin-bottom: 10px;
   }
-}
-:deep(.zxm-divider-inner-text) {
-  color: #cacaca88 !important;
-}
-:deep(.zxm-form-item) {
-  margin-bottom: 10px;
-}
 </style>

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.three.ts → src/views/vent/monitorManager/fanLocalMonitor/fanLocal.three.bk.ts

@@ -278,7 +278,7 @@ export const addCssText = () => {
       fanLocalCSS3D.name = 'text2';
       fanLocalCSS3D.scale.set(0.1, 0.1, 0.1);
       fanLocalCSS3D.rotation.y = -Math.PI / 2;
-      fanLocalCSS3D.position.set(57.84, 10.54, 0.08);
+      fanLocalCSS3D.position.set(74.63, 13.54, 3.84);
       group.add(fanLocalCSS3D);
     }
   }
@@ -335,7 +335,7 @@ export const addCssText = () => {
       fanLocalCSS3D.name = 'text6';
       fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
       fanLocalCSS3D.rotation.y = -Math.PI / 2;
-      fanLocalCSS3D.position.set(-84.23, 6.01, -0.03);
+      fanLocalCSS3D.position.set(-84.23, 6.89, -4.2);
       group.add(fanLocalCSS3D);
     }
   }

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.threejs.base.ts

@@ -0,0 +1,626 @@
+import * as THREE from 'three';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { animateCamera, getTextCanvas, setModalCenter } from '/@/utils/threejs/util';
+import Smoke from '/@/views/vent/comment/threejs/Smoke';
+import fcFan from './fcfanLocal.three';
+import fmFan from './fmfanLocal.three';
+import gsap from 'gsap';
+// import { setModalCenter } from '/@/utils/threejs/util';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+// 本模型的上下文对象，用于实现本模型的特定功能，代码参考了旧有的 fanLocal.three.ts
+class ModelContext {
+  model;
+  modelName = 'jbfj-hd';
+  group: THREE.Object3D | null = null;
+  fanType?: string;
+  fcFanObj?: fcFan;
+  fmFanObj?: fmFan;
+  topSmoke?: Smoke;
+  downSmoke?: Smoke;
+  returnSmoke?: Smoke;
+  topLife?: number;
+  downLife?: number;
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    // optional implementation
+  }
+
+  mountedThree() {
+    return new Promise((resolve) => {
+      this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
+        this.group = gltf[0];
+        if (this.group) {
+          const Fengtongbu01 = this.group.getObjectByName('Cylinder1054') as THREE.Mesh;
+          const textMaterial = new THREE.MeshBasicMaterial({
+            color: '#000',
+            transparent: true,
+            opacity: 0.3,
+            side: THREE.DoubleSide, // 这里是双面渲染的意思
+          });
+          Fengtongbu01.material = textMaterial;
+          Fengtongbu01.renderOrder = 300;
+
+          setModalCenter(this.group);
+          this.addLight();
+          this.initFly();
+          this.setModalPosition();
+
+          this.fcFanObj = new fcFan(this.model);
+          await this.fcFanObj.mountedThree();
+
+          this.fmFanObj = new fmFan(this.model);
+          await this.fmFanObj.mountedThree();
+          resolve(null);
+        }
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      this.model.isRender = false;
+      this.clearFly();
+      this.topSmoke = undefined;
+      this.downSmoke = undefined;
+      this.returnSmoke = undefined;
+      if (this.fcFanObj) this.fcFanObj.destroy();
+      if (this.fmFanObj) this.fmFanObj.destroy();
+      // @ts-ignore
+      this.group = undefined;
+      this.model.destroy();
+    }
+  }
+
+  async initFly() {
+    const topCurve = [
+      {
+        path0: new THREE.Vector3(-89.84, 2.359, 4.91),
+        path1: new THREE.Vector3(-85.678, 2.359, 3.61),
+        isSpread: true,
+        spreadDirection: -1, //
+      },
+      {
+        path0: new THREE.Vector3(-85.678, 2.352, 3.66),
+        path1: new THREE.Vector3(-85.636, 2.353, -3.829),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.636, 2.353, -3.829),
+        path1: new THREE.Vector3(-85.636, 1.026, -5.881),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.636, 1.026, -5.881),
+        path1: new THREE.Vector3(-85.618, 0.887, -12.862),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.618, 0.827, -12.962),
+        path1: new THREE.Vector3(80.404, 0.827, -12.962),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(80.404, 0.827, -12.962),
+        path1: new THREE.Vector3(93.164, 0.85, -12.962),
+        isSpread: true,
+        spreadDirection: 1, // 1是由小变大，-1是由大变小
+      },
+    ];
+
+    const downCurve = [
+      {
+        path0: new THREE.Vector3(-94.84, -0.388, 3.61),
+        path1: new THREE.Vector3(-85.678, -0.393, 3.61),
+        isSpread: true,
+        spreadDirection: -1, //
+      },
+      {
+        path0: new THREE.Vector3(-85.678, -0.393, 3.275),
+        path1: new THREE.Vector3(-85.636, -0.392, -3.829),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.636, -0.392, -3.829),
+        path1: new THREE.Vector3(-85.636, 0.926, -5.881),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.636, 1.026, -5.881),
+        path1: new THREE.Vector3(-85.618, 0.887, -12.862),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(-85.618, 0.887, -12.962),
+        path1: new THREE.Vector3(80.404, 0.887, -12.962),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(80.404, 0.887, -12.962),
+        path1: new THREE.Vector3(93.164, 0.91, -12.962),
+        isSpread: true,
+        spreadDirection: 1, // 1是由小变大，-1是由大变小
+      },
+    ];
+
+    const returnCurve = [
+      {
+        path0: new THREE.Vector3(93.164, 0.85, -12.962),
+        path1: new THREE.Vector3(86.39, 0.827, -12.962),
+        isSpread: false,
+        spreadDirection: 2,
+      },
+      {
+        path0: new THREE.Vector3(86.39, 0.827, -12.962),
+        path1: new THREE.Vector3(83.341, 0.847, -17.658),
+        isSpread: false,
+        spreadDirection: 2,
+      },
+      {
+        path0: new THREE.Vector3(83.341, 0.847, -17.658),
+        path1: new THREE.Vector3(-29.077, 0.847, -17.658),
+        isSpread: false,
+        spreadDirection: 2,
+      },
+      {
+        path0: new THREE.Vector3(-29.077, 0.847, -17.658),
+        path1: new THREE.Vector3(-29.64, 0.827, -39.047),
+        isSpread: false,
+        spreadDirection: 2,
+      },
+    ];
+
+    if (!this.topSmoke) {
+      this.topSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+      this.topSmoke.setPath(topCurve);
+      await this.topSmoke.setPoints();
+      this.group?.add(this.topSmoke.points);
+    }
+    if (!this.downSmoke) {
+      this.downSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+      this.downSmoke.setPath(downCurve);
+      await this.downSmoke.setPoints();
+      this.group?.add(this.downSmoke.points);
+    }
+
+    if (!this.returnSmoke) {
+      this.returnSmoke = new Smoke('/model/img/texture-smoke.png', '#777777', 0, 0.35, 1.5, 200);
+      this.returnSmoke.setPath(returnCurve);
+      await this.returnSmoke.setPoints();
+      this.group?.add(this.returnSmoke.points);
+    }
+  }
+
+  playSmoke(selectData) {
+    // debugger;
+    // console.log('selectData[Fan1fHz]------------》', selectData['Fan1fHz'], Number(selectData['Fan1fHz']));
+    if (selectData['Fan1StartStatus'] == '1') {
+      // 主风机打开
+      // setSmokeFrequency('top', Number(selectData['Fan1fHz']) || 40);
+      this.setSmokeFrequency('top', 40);
+      this.runFly('top', 'open');
+    } else {
+      // 备风机关闭
+      this.runFly('top', 'close');
+    }
+    if (selectData['Fan2StartStatus'] == '1') {
+      // 备风机打开
+      // setSmokeFrequency('down', Number(selectData['Fan2fHz']) || 40);
+      this.setSmokeFrequency('down', 40);
+      this.runFly('down', 'open');
+    } else {
+      // 备风机关闭
+      this.runFly('down', 'close');
+    }
+
+    if (selectData['Fan1StartStatus'] != '1' && selectData['Fan2StartStatus'] != '1') {
+      this.runFly('all', 'close');
+    }
+
+    // if (frequency) {
+    //   setSmokeFrequency(deviceType, frequency);
+    // }
+    // if (controlType === 'startSmoke') {
+    //   runFly(deviceType, state);
+    // }
+  }
+
+  runFly(deviceType, state) {
+    if (state === 'open') {
+      if (deviceType === 'top') {
+        if (this.downSmoke && this.downSmoke.frameId) {
+          this.downSmoke.stopSmoke();
+        }
+        if (this.topSmoke && !this.topSmoke.frameId) {
+          this.topSmoke.startSmoke();
+        }
+      } else {
+        if (this.topSmoke && this.topSmoke.frameId) {
+          this.topSmoke.stopSmoke();
+        }
+        if (this.downSmoke && !this.downSmoke.frameId) {
+          this.downSmoke.startSmoke();
+        }
+      }
+      if (this.returnSmoke && !this.returnSmoke.frameId) {
+        this.returnSmoke?.startSmoke();
+      }
+    } else {
+      if (deviceType === 'top') {
+        if (this.topSmoke && this.topSmoke.frameId) {
+          this.topSmoke.stopSmoke();
+        }
+      } else {
+        if (this.downSmoke && this.downSmoke.frameId) {
+          this.downSmoke.stopSmoke();
+        }
+      }
+    }
+    if (deviceType === 'all' && state === 'close') {
+      this.returnSmoke?.stopSmoke();
+    }
+  }
+
+  setSmokeFrequency(deviceType, frequency) {
+    const life = (frequency - 30) * 25;
+    let duration = 0;
+    let smoke;
+
+    if (deviceType === 'top') {
+      if (this.topLife == life) {
+        return;
+      }
+      this.topLife = life;
+      smoke = this.topSmoke;
+      duration = (Math.abs(life - smoke.life) / 500) * 25;
+    } else {
+      if (this.downLife == life) {
+        return;
+      }
+      this.downLife = life;
+      smoke = this.downSmoke;
+      duration = (Math.abs(life - smoke.life) / 500) * 25;
+    }
+    if (smoke) {
+      gsap.to(smoke, {
+        life: life,
+        duration: duration,
+        ease: 'easeInCubic',
+        overwrite: true,
+      });
+    }
+  }
+
+  addText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    // @ts-ignore
+    const screenDownText = VENT_PARAM['modalText']
+      ? // @ts-ignore
+        VENT_PARAM['modalText']
+      : // @ts-ignore
+      History_Type['type'] == 'remote'
+      ? `国能神东煤炭集团监制`
+      : '煤炭科学技术研究院有限公司研制';
+
+    const screenDownTextX = 80 - (screenDownText.length - 10) * 6;
+    const textArr = [
+      {
+        text: `智能局部通风机监测与控制系统`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 20,
+        y: 108,
+      },
+      {
+        text: `供风距离(m):`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 152,
+      },
+      {
+        text: `${
+          selectData.fchimenylength ? selectData.fchimenylength : selectData.airSupplyDistence_merge ? selectData.airSupplyDistence_merge : '-'
+        }`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 228,
+        y: 152,
+      },
+      {
+        text: `风筒直径(mm): `,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 200,
+      },
+      {
+        text: ` ${selectData.fchimenydiamlimit ? selectData.fchimenydiamlimit : selectData.ductDiameter_merge ? selectData.ductDiameter_merge : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 220,
+        y: 200,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 245,
+      },
+      {
+        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 220,
+        y: 245,
+      },
+      {
+        text: `型号功率:`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 0,
+        y: 285,
+      },
+      {
+        text: `${selectData.model_Power_merge ? selectData.model_Power_merge : '-'}`,
+        font: 'normal 26px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 220,
+        y: 285,
+      },
+      {
+        text: screenDownText,
+        font: 'normal 28px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: screenDownTextX,
+        y: 325,
+      },
+    ];
+    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      const textMaterial = new THREE.MeshBasicMaterial({
+        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
+        map: textMap, // 设置纹理贴图
+        transparent: true,
+        side: THREE.FrontSide, // 这里是双面渲染的意思
+      });
+      textMaterial.blending = THREE.CustomBlending;
+      const monitorPlane = this.group?.getObjectByName('monitorText');
+      if (monitorPlane) {
+        // @ts-ignore-next-line
+        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.0135, 0.0135, 0.0135);
+        planeMesh.rotation.y = -Math.PI / 2;
+        planeMesh.position.set(-84.79, 0.82, 17.0);
+        this.group?.add(planeMesh);
+      }
+    });
+  }
+
+  addCssText() {
+    if (!this.group) return;
+
+    if (!this.group.getObjectByName('text1')) {
+      const element = document.getElementById('inputBox') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text1';
+        fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-85.68, 5.97, -3.39);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+
+    if (!this.group.getObjectByName('text2')) {
+      const element = document.getElementById('outBox') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text2';
+        fanLocalCSS3D.scale.set(0.1, 0.1, 0.1);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(57.84, 10.54, 0.08);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text3')) {
+      const element = document.getElementById('returnBox') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text3';
+        fanLocalCSS3D.scale.set(0.07, 0.07, 0.07);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-25.97, 9.3, -15.09);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text4')) {
+      const element = document.getElementById('gateBox') as HTMLElement;
+      if (element) {
+        // element.innerHTML = '';
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text4';
+        fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-73.13, 8.44, -23.52);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text5')) {
+      const element = document.getElementById('windownBox') as HTMLElement;
+      if (element) {
+        // element.innerHTML = '';
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text5';
+        fanLocalCSS3D.scale.set(0.07, 0.07, 0.07);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-28.44, 9.78, -40.42);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text7')) {
+      const element = document.getElementById('inputBox0') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text7';
+        fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-84.23, 4.97, -18.92);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text6')) {
+      const element = document.getElementById('inputBox1') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text6';
+        fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-84.23, 6.01, -0.03);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text8')) {
+      const element = document.getElementById('gasBox3') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text8';
+        fanLocalCSS3D.scale.set(0.03, 0.03, 0.03);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-90.04, 6, 5);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text9')) {
+      const element = document.getElementById('gasBox2') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text9';
+        fanLocalCSS3D.scale.set(0.07, 0.07, 0.07);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(-8, 7.46, -35.28);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+    if (!this.group.getObjectByName('text10')) {
+      const element = document.getElementById('gasBox1') as HTMLElement;
+      if (element) {
+        const fanLocalCSS3D = new CSS3DObject(element);
+        fanLocalCSS3D.name = 'text10';
+        fanLocalCSS3D.scale.set(0.1, 0.1, 0.1);
+        fanLocalCSS3D.rotation.y = -Math.PI / 2;
+        fanLocalCSS3D.position.set(80, 9, -43);
+        this.group.add(fanLocalCSS3D);
+      }
+    }
+  }
+
+  /** 设置模型类型并切换，不同的类型通常对应不同的具体模型，在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
+  setModelType(type: 'fm' | 'fc' | string) {
+    this.fanType = type;
+    return new Promise((resolve) => {
+      if (!this.group) return;
+      // 显示双道风窗
+      let childGroup;
+      if (this.fanType === 'fm' && this.fcFanObj && this.fcFanObj.group) {
+        if (this.group?.getObjectByName('jbfj-fc')) {
+          this.group?.remove(this.fcFanObj.group);
+        }
+        childGroup = this.fmFanObj?.group;
+        if (this.group && this.group?.getObjectByName('text5') && this.group?.getObjectByName('text4')) {
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text5')['visible'] = false;
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text4')['visible'] = true;
+        }
+      } else if (this.fanType === 'fc' && this.fmFanObj && this.fmFanObj.group) {
+        // 显示单道风窗
+        if (this.group?.getObjectByName('jbfj-fm')) {
+          this.group?.remove(this.fmFanObj.group);
+        }
+        childGroup = this.fcFanObj?.group;
+        if (this.group && this.group?.getObjectByName('text5') && this.group?.getObjectByName('text4')) {
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text5')['visible'] = true;
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text4')['visible'] = false;
+        }
+      } else {
+        if (this.group?.getObjectByName('jbfj-fc')) {
+          // @ts-ignore-next-line
+          this.group?.remove(this.fcFanObj.group);
+        }
+        if (this.group?.getObjectByName('jbfj-fm')) {
+          // @ts-ignore-next-line
+          this.group?.remove(this.fmFanObj.group);
+        }
+        if (this.group && this.group?.getObjectByName('text5') && this.group?.getObjectByName('text4')) {
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text5')['visible'] = false;
+          // @ts-ignore-next-line
+          this.group.getObjectByName('text4')['visible'] = false;
+        }
+        childGroup = null;
+      }
+      setTimeout(async () => {
+        if (childGroup) this.group?.add(childGroup);
+        const oldCameraPosition = { x: 615, y: 275, z: 744 };
+        await animateCamera(
+          oldCameraPosition,
+          { x: 0, y: 0, z: 0 },
+          { x: 0.08, y: 21.73, z: 78.45 },
+          { x: 0.13, y: -0.82, z: 0.236 },
+          this.model,
+          0.8
+        );
+        resolve(null);
+      }, 300);
+    });
+  }
+
+  clearFly() {
+    if (this.topSmoke) this.topSmoke.clearSmoke();
+    if (this.downSmoke) this.downSmoke.clearSmoke();
+    if (this.returnSmoke) this.returnSmoke.clearSmoke();
+  }
+
+  // 设置模型位置
+  setModalPosition() {
+    if (!this.group) return;
+    this.group.scale.set(0.7, 0.7, 0.7);
+    this.group.position.set(0, 6, -50);
+    this.group.rotation.y = Math.PI / 2;
+  }
+}
+export default ModelContext;

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.threejs.ts

@@ -0,0 +1,172 @@
+import * as THREE from 'three';
+import UseThree from '../../../../utils/threejs/useThree';
+import FanLocal from './fanLocal.threejs.base';
+import FanLocalDual from './fanLocalDual.threejs.base';
+import { animateCamera } from '/@/utils/threejs/util';
+import useEvent from '../../../../utils/threejs/useEvent';
+
+/** 模型总控制器 */
+let model: UseThree;
+/** 当前展示的具体模型的 Object3D 对象 */
+let group: THREE.Object3D;
+/** 当前展示的具体模型及状态组成的判断唯一性的key */
+let cacheKey: string = '';
+/** 具体模型内容列表，包含此模型总控制器下的所有可用的具体模型内容 */
+const modelContextList: {
+  /** 当前模型类型，在控制器下有多个具体模型时分辨它们 */
+  type: string;
+  /** 模型的具体内容，即负责模型导入、绘制的上下文对象，一个控制器可以新建多个 */
+  context?: FanLocal | FanLocalDual;
+}[] = [];
+const { mouseDownFn } = useEvent();
+
+/** 分发鼠标事件到具体实现方法 */
+function dispatchMouseEvent(event) {
+  if (event.button == 0 && model && group) {
+    mouseDownFn(model, group, event, () => {});
+  }
+}
+
+/** 为模型控制器设置非默认的摄像头位置 */
+function setCamera() {
+  // if (!model || !model.camera) return;
+  // model.camera.position.set(0, -2000, 1000);
+  // model.camera.far = 10000;
+  // model.orbitControls?.update();
+  // model.camera.updateProjectionMatrix();
+}
+
+/** 初始化模型CSS展示框的鼠标事件，应该在模型总控制器初始化后调用 */
+function initEventListender() {
+  if (!model) return;
+  model.canvasContainer?.addEventListener('mousedown', (e) => dispatchMouseEvent(e));
+  // model.orbitControls?.addEventListener('change', () => render());
+}
+
+/** 渲染并更新总模型 */
+// function render() {
+//   if (model && model.isRender && model.renderer) {
+//     // model.animationId = requestAnimationFrame(render);
+//     model.css3dRender?.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
+//     model.renderer.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
+//     model.stats?.update();
+//   }
+// }
+
+/** 刷新（再渲染）总模型 */
+// export function refreshModal() {
+//   render();
+//   // modelContextList.forEach((item) => {
+//   //   if (item.context) {
+//   //     item.context.render();
+//   //   }
+//   // });
+// }
+
+/** 设置模型类型并切换，不同的类型通常对应不同的具体模型，在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
+export function setModelType(modelType: 'fanLocal' | 'fanLocalDual' | string, subModelType: string) {
+  return new Promise((resolve, reject) => {
+    if (!model) return reject('模型控制器未初始化');
+    // 判断是否是同一个/类模型
+    if (cacheKey === `${modelType}-${subModelType}`) return resolve(null);
+    cacheKey = `${modelType}-${subModelType}`;
+
+    modelContextList.forEach(({ type, context }) => {
+      if (!context || !context.group) return;
+
+      // 先把模型相关的内容隐藏，另起的隐藏子元素的代码是为了隐藏 CSS 元素
+      context.group.visible = false;
+      context.group.children.forEach((e) => {
+        e.visible = false;
+      });
+
+      if (modelType === type) {
+        group = context?.group as THREE.Object3D;
+        context.setModelType(subModelType);
+
+        setTimeout(async () => {
+          // 还没添加到控制器的添加进去
+          if (!model.scene?.getObjectByName(group.name) && group) {
+            model.scene?.add(group);
+          }
+          group.visible = true;
+          group.children.forEach((e) => {
+            e.visible = true;
+          });
+          const oldCameraPosition = { x: -693, y: 474, z: 398 };
+          const position = { x: 14.826074594663222, y: 16.901762713393836, z: 36.459944037951004 };
+          await animateCamera(
+            oldCameraPosition,
+            { x: 0, y: 0, z: 0 },
+            { x: position.x, y: position.y, z: position.z },
+            { x: 0, y: 0, z: 0 },
+            model,
+            0.8
+          );
+          resolve(null);
+        }, 400);
+      }
+    });
+  });
+}
+
+/** 挂载模型控制器，sceneSelctor表示放置模型的元素选择器，cssSelectors表示放置类似详情框的元素选择器，其中第一项需要是根元素选择器 */
+export function mountedThree(sceneSelctor: string, cssSelectors: string[]) {
+  return new Promise(async (resolve) => {
+    const [rootSelector] = cssSelectors;
+    model = new UseThree(sceneSelctor, rootSelector);
+    model.setEnvMap('test1.hdr');
+    /** @ts-ignore-next-line */
+    model.renderer.toneMappingExposure = 1.0;
+    if (model.renderer) {
+      model.renderer.sortObjects = true;
+    }
+
+    const model1 = new FanLocal(model);
+    await model1.mountedThree();
+    modelContextList.push({
+      type: 'fanLocal',
+      context: model1,
+    });
+    const model2 = new FanLocalDual(model);
+    await model2.mountedThree();
+    modelContextList.push({
+      type: 'fanLocalDual',
+      context: model2,
+    });
+
+    initEventListender();
+    setCamera();
+    model.animate();
+    resolve(null);
+  });
+}
+
+export const destroy = () => {
+  if (!model) return;
+  model.isRender = false;
+  modelContextList.forEach((item) => {
+    if (item.context) item.context.destroy();
+  });
+  model.destroy();
+};
+
+// 为了兼容性而添加的方法导出
+export function addText(d) {
+  if (modelContextList[0]) {
+    // @ts-ignore
+    modelContextList[0].context?.addText(d);
+  }
+}
+export function addCssText() {
+  if (modelContextList[0]) {
+    // @ts-ignore
+    modelContextList[0].context?.addCssText();
+  }
+}
+export function playSmoke(d) {
+  if (modelContextList[0]) {
+    // @ts-ignore
+    modelContextList[0].context?.playSmoke(d);
+  }
+}

src/views/vent/monitorManager/fanLocalMonitor/fanLocalDual.threejs.base.ts

@@ -0,0 +1,190 @@
+import * as THREE from 'three';
+import { setModalCenter } from '/@/utils/threejs/util';
+import Smoke from '../../comment/threejs/Smoke';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+// import { setModalCenter } from '/@/utils/threejs/util';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class ModelContext {
+  model;
+  // modelName = 'jbfj-hd';
+  modelName = 'jbfj-dual';
+  /** 本模型的根3D对象 */
+  group?: THREE.Object3D;
+  /** 本模型所包含的所有元素合集 */
+  private elements: unknown[] = [];
+  /** 本模型支持的 Object3DGroup 模块 */
+  private modules: {
+    /** 模块名称 */
+    name: string;
+    /** 控制该模块所用的上下文 */
+    context: THREE.Object3D;
+    /** 控制时行为声明 */
+    behavior: (context: THREE.Object3D) => void;
+  }[] = [];
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    // optional implementation
+  }
+
+  /** 设置模型类型并切换，不同的类型通常对应不同的具体模型，在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
+  setModelType(modelType: string) {
+    this.modules.forEach(({ name, context, behavior }) => {
+      if (name === modelType) {
+        behavior(context);
+      }
+    });
+  }
+
+  /** 初始化css元素，将css元素选择器传入，该方法会将这些元素按顺序放入传入的锚点中 */
+  initCssElement() {
+    // selectors.forEach((selector, index) => {
+    //   const element = document.querySelector(selector) as HTMLElement;
+    //   if (element) {
+    //     const css3D = new CSS3DSprite(element);
+    //     this.cssSprites.push(css3D);
+    //     css3D.name = selector;
+    //     css3D.scale.set(0.05, 0.05, 0.05);
+    //     // const ff = gui.addFolder(`css元素${index}`);
+    //     // ff.add(css3D.position, 'x', -100, 100);
+    //     // ff.add(css3D.position, 'y', -100, 100);
+    //     // ff.add(css3D.position, 'z', -100, 100);
+    //     if (index < anchors.length) {
+    //       const [x, y, z] = anchors[index];
+    //       css3D.position.set(x, y, z);
+    //       this.group?.add(css3D);
+    //     } else {
+    //       console.warn(`指定的元素${selector}没有合适的位置放置`);
+    //     }
+    //   }
+    // });
+  }
+
+  mountedThree() {
+    return new Promise((resolve) => {
+      this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
+        this.group = gltf[0];
+        if (this.group) {
+          this.addLight();
+          this.setModalPosition();
+          this.initModules();
+          setModalCenter(this.group);
+          resolve(null);
+        }
+      });
+    });
+  }
+
+  destroy() {
+    if (!this.model) return;
+    this.elements.forEach((element) => {
+      this.model.clearGroup(element);
+    });
+  }
+
+  // 设置模型位置
+  setModalPosition() {
+    if (!this.group) return;
+    this.group.scale.set(0.7, 0.7, 0.7);
+    this.group.position.set(0, 6, -50);
+    this.group.rotation.y = Math.PI / 2;
+  }
+
+  // hideElements(eles: THREE.Object3D[]) {
+  //   eles.forEach((g) => {
+  //     g.visible = false;
+  //   });
+  // }
+  // showElements(eles: THREE.Object3D[]) {
+  //   eles.forEach((g) => {
+  //     g.visible = true;
+  //   });
+  // }
+
+  weakElements(eles: unknown[]) {
+    eles.forEach((g) => {
+      if (g instanceof Smoke) {
+        g.opacityFactor = 0.4;
+      }
+      if (g instanceof CSS3DObject) {
+        g.element.style.setProperty('opacity', '0.5');
+      }
+    });
+  }
+  strongElements(eles: unknown[]) {
+    eles.forEach((g) => {
+      if (g instanceof Smoke) {
+        g.opacityFactor = 0.75;
+      }
+      if (g instanceof CSS3DObject) {
+        g.element.style.setProperty('opacity', '1');
+      }
+    });
+  }
+
+  startAnimation(eles: unknown[]) {
+    eles.forEach((g) => {
+      if (g instanceof Smoke) {
+        g.startSmoke();
+      }
+    });
+  }
+  stopAnimation(eles: unknown[]) {
+    eles.forEach((g) => {
+      if (g instanceof Smoke) {
+        g.stopSmoke();
+      }
+    });
+  }
+
+  /** 核心方法，初始化本模型的各个模块，这些模块可以实现特定场景的展示、控制等功能 */
+  async initModules() {
+    if (this.elements.length > 0) return;
+    const curve1 = [
+      {
+        path0: new THREE.Vector3(10, 0, -10),
+        path1: new THREE.Vector3(20, 0, -10),
+        isSpread: false,
+        spreadDirection: 0,
+      },
+      {
+        path0: new THREE.Vector3(10, 0, -10),
+        path1: new THREE.Vector3(10, 0, -20),
+        isSpread: true,
+        spreadDirection: 1, // 1是由小变大，-1是由大变小
+      },
+    ];
+    const group1 = new THREE.Group();
+    const smoke1 = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smoke1.setPath(curve1);
+    await smoke1.setPoints();
+    this.elements.push(smoke1);
+
+    const element = document.getElementById('inputBox') as HTMLElement;
+    if (element) {
+      const fanLocalCSS3D = new CSS3DObject(element);
+      fanLocalCSS3D.name = 'text1';
+      fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+      fanLocalCSS3D.rotation.y = -Math.PI / 2;
+      fanLocalCSS3D.position.set(-85.68, 5.97, -3.39);
+      group1.add(fanLocalCSS3D);
+      this.elements.push(fanLocalCSS3D);
+    }
+
+    this.modules.push({
+      name: 'state1',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.strongElements([smoke1]);
+      },
+    });
+  }
+}
+export default ModelContext;

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

@@ -151,14 +151,10 @@
                   >点位异常</a-tag
                 >
                 <template v-if="column.dataIndex === 'ndoortype'">
-                  <span v-if="record.ndoortype == '0'">气动风门</span>
-                  <span v-else color="default">液压风门</span>
+                  <span>{{ render.renderDictText(record.ndoortype, 'ndoortype') }}</span>
                 </template>
                 <template v-if="column.dataIndex === 'doorUse'">
-                  <span v-if="record.doorUse == 1" color="default">行车风门</span>
-                  <span v-else-if="record.doorUse == 2">行人风门</span>
-                  <span v-else-if="record.doorUse == 3">短路风门</span>
-                  <span v-else-if="record.doorUse == 4">行车/短路风门</span>
+                  <span>{{ render.renderDictText(record.doorUse, 'doorUse') }}</span>
                 </template>
                 <template v-else-if="column.dataIndex === 'warnLevel'">
                   <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
@@ -335,6 +331,7 @@
   import { useCamera } from '/@/hooks/system/useCamera';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { getDictItems } from '/@/api/common/api';
+  import { render } from '/@/utils/common/renderUtils';
 
   const { hasPermission } = usePermission();
 

src/views/vent/monitorManager/mainFanMonitor/components/conditionAssistance.vue

@@ -27,7 +27,8 @@
           <template v-else>
             <div v-for="(item, index) in columns" class="info-item" :key="index">
               <div class="title">{{ item['title'] }}：</div>
-              <div class="value">{{ selectData && selectData[item['dataIndex']] ? selectData[item['dataIndex']] : '-' }}</div>
+              <div v-if="item['dict']" class="value">{{ render.renderDictText(selectData[item['dataIndex']], 'adjustmentMethod') }}</div>
+              <div v-else class="value">{{ selectData && selectData[item['dataIndex']] ? selectData[item['dataIndex']] : '-' }}</div>
             </div>
           </template>
         </div>
@@ -92,6 +93,7 @@
   import { formatNum } from '/@/utils/ventutil';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { render } from '/@/utils/common/renderUtils';
   const { sysOrgCode } = useGlobSetting();
   const props = defineProps({
     deviceType: {

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

@@ -713,7 +713,7 @@
   <!-- 摄像头显示隐藏图标 -->
   <VideoCameraOutlined class="video-icon" :class="{ 'no-play': !showPlay }" @click="changePlay" />
   <!-- 工况辅助决策 -->
-  <ConditionAssistance @register="registerModal" :deviceType="deviceType" :selectData="selectData" />
+  <ConditionAssistance @register="registerModal" :deviceType="deviceType" :selectData="currentData" />
   <DeviceBaseInfo @register="registerModalDeviceEdit" :device-type="selectData['deviceType']" />
 </template>
 
@@ -813,6 +813,7 @@
     otherInfo: '',
     autoRoManual: null,
   });
+  const currentData = ref({});
 
   const deviceType = ref(selectData.deviceType);
   const rightColumns = ref<BasicColumn[]>([]);
@@ -928,7 +929,7 @@
     });
     const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
     Object.assign(selectData, data);
-
+    currentData.value = data;
     // 存放echarts数据
     if (data && data['readTime']) {
       const dataList = cloneDeep(echartsDataList.value);

src/views/vent/monitorManager/windowMonitor/components/gasSupplyAir.vue

@@ -239,7 +239,7 @@
           ];
         } else {
           const random = Math.random() - 0.5;
-          fWindowM3Temp.value = fWindowM3.value + random * 50;
+          fWindowM3Temp.value = fWindowM3.value + random * 10;
           gasTemp.value = gas.value + random * 0.01;
           echartsData.value = [
             ...echartsData.value,
@@ -270,10 +270,8 @@
   );
 
   function mock(maxArea?: number) {
-    debugger;
     if (maxArea) {
       // 每调用一次数据就增减一些
-      // frontWindowAngle 增加一些
       if (frontWindowAngle.value !== undefined && frontWindowAngle.value <= 90) {
         frontWindowAngle.value = Number(Math.min(frontWindowAngle.value + 3, 90).toFixed(0));
       }
@@ -281,7 +279,7 @@
         rearWindowAngle.value = Number(Math.min(rearWindowAngle.value + 3, 90).toFixed(0));
       }
       if (fWindowM3.value !== undefined) {
-        fWindowM3.value += 40 * index;
+        fWindowM3.value = Math.min((fWindowM3.value += 8 * index), 800);
       }
       if (gas.value !== undefined) {
         gas.value -= Number((0.001 * index).toFixed(3));