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-22.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/gas/gasReportInspect/gasReportInspect.data.ts

@@ -10,85 +10,42 @@ export const columnsType: BasicColumn[] = [
         title: '监测地点',
         dataIndex: 'jcdd',
         key: 'jcdd',
-        width:180,
+        width:260,
         align: 'center',
     },
     {
-        title: 'O₂最小值(%)',
-        dataIndex: 'o2_min',
-        key: 'o2_min',
+        title: 'O₂(%)',
+        dataIndex: 'o2',
+        key: 'o2',
         align: 'center',
     },
+   
     {
-        title: 'O₂平均值(%)',
-        dataIndex: 'o2_ave',
-        key: 'o2_ave',
+        title: 'CO(ppm)',
+        dataIndex: 'co',
+        key: 'co',
         align: 'center',
     },
+    
     {
-        title: 'CO最大值(ppm)',
-        dataIndex: 'co_max',
-        key: 'co_max',
+        title: 'CO₂(%)',
+        dataIndex: 'co2',
+        key: 'co2',
         align: 'center',
     },
+  
     {
-        title: 'CO平均值(ppm)',
-        dataIndex: 'co_ave',
-        key: 'co_ave',
+        title: 'CH₄(%)',
+        dataIndex: 'ch4',
+        key: 'ch4',
         align: 'center',
     },
+   
+    
     {
-        title: 'CO₂最大值(%)',
-        dataIndex: 'co2_max',
-        key: 'co2_max',
-        align: 'center',
-    },
-    {
-        title: 'CO₂平均值(%)',
-        dataIndex: 'co2_ave',
-        key: 'co2_ave',
-        align: 'center',
-    },
-    {
-        title: 'CH₄最大值(%)',
-        dataIndex: 'ch4_max',
-        key: 'ch4_max',
-        align: 'center',
-    },
-    {
-        title: 'CH₄平均值(%)',
-        dataIndex: 'ch4_ave',
-        key: 'ch4_ave',
-        align: 'center',
-    },
-    {
-        title: 'C₂H₄最大值(ppm)',
-        dataIndex: 'c2h4_max',
-        key: 'c2h4_max',
-        align: 'center',
-    },
-    {
-        title: 'C₂H₄平均值(ppm)',
-        dataIndex: 'c2h4_ave',
-        key: 'c2h4_ave',
-        align: 'center',
-    },
-    {
-        title: 'C₂H₂最大值(ppm)',
-        dataIndex: 'c2h2_max',
-        key: 'c2h2_max',
-        align: 'center',
-    },
-    {
-        title: 'C₂H₂平均值(ppm)',
-        dataIndex: 'c2h2_ave',
-        key: 'c2h2_ave',
-        align: 'center',
-    },
-    {
-        title: '分析次数',
-        dataIndex: 'fxcs',
-        key: 'fxcs',
+        title: '巡检员',
+        dataIndex: 'checkPerson',
+        key: 'checkPerson',
         align: 'center',
     },  
 ];

src/views/vent/gas/gasReportInspect/index.vue

@@ -27,10 +27,10 @@
             </div>
             <div class="right-box">
                 <a-table :columns="columnsType" size="small" :data-source="tableData" :scroll="{ y: 700 }"
-                    class="tableW" :pagination="pagination"></a-table>
+                    class="tableW" :pagination="false"></a-table>
             </div>
         </div>
-    </div>
+    </div>1
 </template>
 
 <script setup lang="ts">
@@ -72,7 +72,7 @@ async function getTreeList(param) {
             isFolder: true,
         })
         tableData.value = JSON.parse(res.content)
-        pagination.total = Math.ceil(tableData.value.length / pagination.pageSize)
+        // pagination.total = Math.ceil(tableData.value.length / pagination.pageSize)
     }
 
 }

src/views/vent/home/clique/components/echart-scene.vue

@@ -57,7 +57,6 @@
           opacity: 0.1,
         },
       };
-      console.log(scene.value, 'scene');
       const myChart = echarts.init(scene.value);
       let option = {
         color: ['#4edaff', '#53ffde', '#a696ed'],
@@ -246,14 +245,14 @@
 
   watch(
     () => props.echartData,
-    (newV, oldV) => {
-      console.log(newV, 'newV-----------');
-      percent.jf = newV.jfq;
-      percent.yf = newV.yfq;
-      percent.hf = newV.hfq;
-      percent.jfEcharts = Math.ceil(newV.zf - percent.jf);
-      percent.yfEcharts = Math.ceil(newV.zf - percent.yf);
-      percent.hfEcharts = Math.ceil(newV.zf - percent.hf);
+    ({ jfq, yfq, hfq, zf }) => {
+      const getEchartsNumber = (v: number) => Math.ceil(isNaN(v) ? 0 : v);
+      percent.jf = isNaN(jfq) ? '-' : jfq;
+      percent.yf = isNaN(yfq) ? '-' : yfq;
+      percent.hf = isNaN(hfq) ? '-' : hfq;
+      percent.jfEcharts = getEchartsNumber(zf - percent.jf);
+      percent.yfEcharts = getEchartsNumber(zf - percent.yf);
+      percent.hfEcharts = getEchartsNumber(zf - percent.hf);
       getOption();
     },
     {

src/views/vent/home/clique/components/scene-key.vue

@@ -49,7 +49,7 @@
 
   let sceneTitle = ref('回风系统通风状态监测');
 
-  let sceneList = reactive([
+  let sceneList = reactive<{ label: string; value: number | string }[]>([
     { label: '总阻力', value: 0 },
     // { label: '总进风', value: 0 },
     { label: '总风量', value: 0 },
@@ -79,14 +79,23 @@
       }
       return false;
     });
-    echartData.jfq = data.majorpath.drag_1;
-    echartData.yfq = data.majorpath.drag_2;
-    echartData.hfq = data.majorpath.drag_3;
-    echartData.zf = data.majorpath.drag_total;
+    // 下面的每一个变量可能是：正常的 number、NaN
+    const { drag_1, drag_2, drag_3, drag_total, m3_total } = data.majorpath;
+    echartData.jfq = drag_1;
+    echartData.yfq = drag_2;
+    echartData.hfq = drag_3;
+    echartData.zf = drag_total;
 
-    sceneList[0].value = data.majorpath.drag_total;
-    sceneList[1].value = data.majorpath.m3_total;
-    sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100;
+    if (isNaN(drag_total) || isNaN(m3_total)) {
+      // 如果数据是0，也会展示 '-'
+      sceneList[0].value = drag_total || '-';
+      sceneList[1].value = m3_total || '-';
+      sceneList[2].value = '-';
+    } else {
+      sceneList[0].value = drag_total;
+      sceneList[1].value = m3_total;
+      sceneList[2].value = Math.round(((1.19 * m3_total) / 60 / Math.sqrt(drag_total)) * 100) / 100;
+    }
   }
 
   watch(

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

@@ -156,24 +156,41 @@
       warningList.value = warningListTemp;
       compositeData.value = res.reduce((arr, e) => {
         if (isDataRealTime.value) {
-          return [...arr, ...e.majorpath_data];
+          arr.push(...e.majorpath_data);
         } else {
-          return [
-            ...arr,
-            ...e.majorpath_data.map(({ majorpath, readData }) => {
+          arr.push(
+            ...e.majorpath_data.map((ele) => {
+              const { majorpath, readData } = ele;
+              const { drag_1, drag_2, drag_3, drag_total } = majorpath;
+              const { retM3_merge, fy_merge } = 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 (fy_merge && retM3_merge) {
+                return {
+                  ...ele,
+                  majorpath: {
+                    drag_1: Math.round((drag_1 / drag_total) * parseInt(fy_merge.value)),
+                    drag_2: Math.round((drag_2 / drag_total) * parseInt(fy_merge.value)),
+                    drag_3: Math.round((drag_3 / drag_total) * parseInt(fy_merge.value)),
+                    drag_total: parseInt(fy_merge.value),
+                    m3_total: parseInt(retM3_merge.value),
+                  },
+                };
+              } else {
+                return {
+                  ...ele,
+                  majorpath: {
+                    drag_1: NaN,
+                    drag_2: NaN,
+                    drag_3: NaN,
+                    drag_total: NaN,
+                    m3_total: NaN,
+                  },
+                };
+              }
+            })
+          );
         }
+        return arr;
       }, []);
       centerDetail.value = res.filter((v) => v.orgcode == orgcode.value)[0];
     }

src/views/vent/monitorManager/comment/comment.data.ts

@@ -554,85 +554,42 @@ export const ColumnsReport: BasicColumn[] = [
     title: '监测地点',
     dataIndex: 'jcdd',
     key: 'jcdd',
-    width: 180,
+    width: 260,
     align: 'center',
   },
   {
-    title: 'O₂最小值(%)',
-    dataIndex: 'o2_min',
-    key: 'o2_min',
-    align: 'center',
-  },
-  {
-    title: 'O₂平均值(%)',
-    dataIndex: 'o2_ave',
-    key: 'o2_ave',
-    align: 'center',
-  },
-  {
-    title: 'CO最大值(ppm)',
-    dataIndex: 'co_max',
-    key: 'co_max',
-    align: 'center',
-  },
-  {
-    title: 'CO平均值(ppm)',
-    dataIndex: 'co_ave',
-    key: 'co_ave',
-    align: 'center',
-  },
-  {
-    title: 'CO₂最大值(%)',
-    dataIndex: 'co2_max',
-    key: 'co2_max',
-    align: 'center',
-  },
-  {
-    title: 'CO₂平均值(%)',
-    dataIndex: 'co2_ave',
-    key: 'co2_ave',
-    align: 'center',
-  },
-  {
-    title: 'CH₄最大值(%)',
-    dataIndex: 'ch4_max',
-    key: 'ch4_max',
-    align: 'center',
-  },
-  {
-    title: 'CH₄平均值(%)',
-    dataIndex: 'ch4_ave',
-    key: 'ch4_ave',
-    align: 'center',
-  },
-  {
-    title: 'C₂H₄最大值(ppm)',
-    dataIndex: 'c2h4_max',
-    key: 'c2h4_max',
+    title: 'O₂(%)',
+    dataIndex: 'o2',
+    key: 'o2',
     align: 'center',
   },
+
   {
-    title: 'C₂H₄平均值(ppm)',
-    dataIndex: 'c2h4_ave',
-    key: 'c2h4_ave',
+    title: 'CO(ppm)',
+    dataIndex: 'co',
+    key: 'co',
     align: 'center',
   },
+
   {
-    title: 'C₂H₂最大值(ppm)',
-    dataIndex: 'c2h2_max',
-    key: 'c2h2_max',
+    title: 'CO₂(%)',
+    dataIndex: 'co2',
+    key: 'co2',
     align: 'center',
   },
+
   {
-    title: 'C₂H₂平均值(ppm)',
-    dataIndex: 'c2h2_ave',
-    key: 'c2h2_ave',
+    title: 'CH₄(%)',
+    dataIndex: 'ch4',
+    key: 'ch4',
     align: 'center',
   },
+
+
   {
-    title: '分析次数',
-    dataIndex: 'fxcs',
-    key: 'fxcs',
+    title: '巡检员',
+    dataIndex: 'checkPerson',
+    key: 'checkPerson',
     align: 'center',
   },
   {

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

@@ -62,14 +62,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ExclamationCircleFilled } from '@ant-design/icons-vue';
 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';
-import { useMessage } from '/@/hooks/web/useMessage';
 const props = defineProps({
   data: {
     type: Object,
@@ -83,7 +81,6 @@ const props = defineProps({
   },
 });
 const emit = defineEmits(['close', 'register', 'openModal']);
-const passWord = ref('');
 // 注册 modal
 const [register, { closeModal }] = useModalInner((data) => {
   nextTick(() => {
@@ -96,12 +93,13 @@ const [register, { closeModal }] = useModalInner((data) => {
 const ChartRef = ref();
 const myChart = ref();
 const refresh = ref(true);
-const modalIsShow = ref<boolean>(false); // 是否显示模态框
-const modalTitle = ref('');
 const xData: any[] = [];
 const yDataList: [] = [];
 const echartsData = ref<Record<string, any>[]>([]);
 const monitorData = ref<Record<string, any>>({});
+const modalIsShow = ref<boolean>(false); // 是否显示模态框
+const modalTitle = ref('');
+const passWord = ref('');
 watch(
   () => props.data,
   (newVal) => {
@@ -132,6 +130,7 @@ function initEcharts() {
     });
   }
 }
+
 function onHide() {
   closeModal();
 }

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

@@ -117,13 +117,6 @@ watch(
     echartsData.value = [...echartsData.value, combinedData];
   }
 );
-function onSubmit() {
-  emit('close');
-  closeModal();
-}
-function onCancel() {
-  //
-}
 function initEcharts() {
   if (ChartRef.value) {
     myChart.value = echarts.init(ChartRef.value);
@@ -136,6 +129,13 @@ function initEcharts() {
     });
   }
 }
+function onSubmit() {
+  emit('close');
+  closeModal();
+}
+function onCancel() {
+  //
+}
 function onHide() {
   closeModal();
 }

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,306 @@
+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 * 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) {
+          // setModalCenter(this.group);
+          this.addLight();
+          this.setModelPosition();
+          this.initModules().then(resolve);
+        }
+      });
+    });
+  }
+
+  destroy() {
+    if (!this.model) return;
+    this.elements.forEach((element) => {
+      this.model.clearGroup(element);
+    });
+  }
+
+  // 设置模型位置
+  setModelPosition() {
+    if (!this.group) return;
+    this.group.scale.set(0.6, 0.6, 0.6);
+
+    // const ff = gui.addFolder(`位置调整`);
+    // ff.add(this.group.position, 'x', -100, 100);
+    // ff.add(this.group.position, 'y', -100, 100);
+    // ff.add(this.group.position, 'z', -100, 100);
+    this.group.position.set(0, 0, -60);
+    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.oldOpacityFactor = 0.4;
+      }
+      if (g instanceof CSS3DObject) {
+        g.element.style.setProperty('opacity', '0.5');
+      }
+    });
+  }
+  strongElements(eles: unknown[]) {
+    eles.forEach((g) => {
+      if (g instanceof Smoke) {
+        g.oldOpacityFactor = 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 curveFan1Right = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.685, 4.208, 43.895),
+        new THREE.Vector3(-85.685, 2.208, 41.895),
+        new THREE.Vector3(-85.685, 2.188, 35.327),
+        new THREE.Vector3(-85.685, 0.784, 33.086),
+        new THREE.Vector3(-85.685, 0.784, 27.848),
+        new THREE.Vector3(-85.685, 4.724, 21.565),
+        new THREE.Vector3(-85.685, 4.724, -12.993),
+        new THREE.Vector3(-26.191, 4.724, -13.232),
+        new THREE.Vector3(-25.608, 4.724, -47.022),
+        new THREE.Vector3(80.038, 4.724, -47.022),
+      ],
+      true
+    );
+    // 右侧风机-备风机进风
+    const curveFan2Right = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.685, 1.475, 43.895),
+        new THREE.Vector3(-85.685, -0.525, 41.895),
+        new THREE.Vector3(-85.685, -0.525, 35.327),
+        new THREE.Vector3(-85.685, 0.784, 33.086),
+        new THREE.Vector3(-85.685, 0.784, 27.848),
+        new THREE.Vector3(-85.685, 4.724, 21.565),
+        new THREE.Vector3(-85.685, 4.724, -12.993),
+        new THREE.Vector3(-26.191, 4.724, -13.232),
+        new THREE.Vector3(-25.608, 4.724, -47.022),
+        new THREE.Vector3(80.038, 4.724, -47.022),
+      ],
+      true
+    );
+    // 左侧风机-主风机进风
+    const curveFan1Left = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.685, 4.188, 4.729),
+        new THREE.Vector3(-85.685, 2.188, 2.729),
+        new THREE.Vector3(-85.685, 2.188, -3.84),
+        new THREE.Vector3(-85.685, 0.784, -6.081),
+        new THREE.Vector3(-85.685, 0.784, -12.912),
+        new THREE.Vector3(80.251, 0.784, -12.912),
+      ],
+      true
+    );
+    // 左侧风机-备风机进风
+    const curveFan2Left = this.generateSmokePath(
+      [
+        new THREE.Vector3(-85.685, 1.475, 4.729),
+        new THREE.Vector3(-85.685, -0.525, 2.729),
+        new THREE.Vector3(-85.685, -0.508, -3.84),
+        new THREE.Vector3(-85.685, 0.784, -6.081),
+        new THREE.Vector3(-85.685, 0.784, -12.912),
+        new THREE.Vector3(80.251, 0.784, -12.912),
+      ],
+      true
+    );
+    const group1 = new THREE.Group();
+    const smokeFan1Right = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smokeFan1Right.setPath(curveFan1Right);
+    this.elements.push(smokeFan1Right);
+    const smokeFan2Right = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smokeFan2Right.setPath(curveFan2Right);
+    this.elements.push(smokeFan2Right);
+    const smokeFan1Left = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smokeFan1Left.setPath(curveFan1Left);
+    this.elements.push(smokeFan1Left);
+    const smokeFan2Left = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
+    smokeFan2Left.setPath(curveFan2Left);
+    this.elements.push(smokeFan2Left);
+
+    await smokeFan1Right.setPoints();
+    this.group?.add(smokeFan1Right.points);
+    await smokeFan2Right.setPoints();
+    this.group?.add(smokeFan2Right.points);
+    await smokeFan1Left.setPoints();
+    this.group?.add(smokeFan1Left.points);
+    await smokeFan2Left.setPoints();
+    this.group?.add(smokeFan2Left.points);
+    // 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: 'fan1RightOpen',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.startAnimation([smokeFan1Right]);
+        this.strongElements([smokeFan1Right]);
+      },
+    });
+    this.modules.push({
+      name: 'fan2RightOpen',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.startAnimation([smokeFan2Right]);
+        this.strongElements([smokeFan2Right]);
+      },
+    });
+    this.modules.push({
+      name: 'fan1LeftOpen',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.startAnimation([smokeFan1Left]);
+        this.strongElements([smokeFan1Left]);
+      },
+    });
+    this.modules.push({
+      name: 'fan2LeftOpen',
+      context: group1,
+      behavior: () => {
+        this.weakElements(this.elements);
+        this.startAnimation([smokeFan2Left]);
+        this.strongElements([smokeFan2Left]);
+      },
+    });
+  }
+
+  /** 生成适用于 Smoke 的曲线数据，输入途径点，输出路径，如果是进风类型，首个线段将有扩散效果，出风则是末尾线段有扩散效果 */
+  generateSmokePath(points: THREE.Vector3[], airIn?: boolean, airOut?: boolean) {
+    const result: any[] = [];
+    for (let index = 1; index < points.length; index++) {
+      const path0 = points[index - 1];
+      const path1 = points[index];
+      const path = {
+        path0,
+        path1,
+        isSpread: false,
+        spreadDirection: 0,
+      };
+      if (airIn) {
+        // 首个线段需要扩散，由大变小
+        path.isSpread = index === 1;
+        path.spreadDirection = -1;
+      }
+      if (airOut) {
+        // 首个线段需要扩散，由小变大
+        path.isSpread = index === points.length - 1;
+        path.spreadDirection = 1;
+      }
+      result.push(path);
+    }
+    return result;
+  }
+}
+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));