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

src/layouts/default/header/components/user-dropdown/index.vue

@@ -47,7 +47,7 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useModal } from '/@/components/Modal';
-  import { useMessage } from '/src/hooks/web/useMessage';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { useGo } from '/@/hooks/web/usePage';
   import headerImg from '/@/assets/images/header.jpg';
   import { propTypes } from '/@/utils/propTypes';

src/views/vent/monitorManager/alarmMonitor/warn/dustWarn.vue

@@ -2,12 +2,18 @@
   <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 粉尘监测预警 </customHeader>
   <div class="dustWarn">
     <div class="top-dust">
-      <a-button v-if="!hasPermission('dustWarn:return')" preIcon="ant-design:rollback-outlined" type="text" size="small"
-        style="position: absolute; left: 15px; top: 15px; color: #fff" @click="getBack">返回</a-button>
+      <a-button
+        v-if="!hasPermission('dustWarn:return')"
+        preIcon="ant-design:rollback-outlined"
+        type="text"
+        size="small"
+        style="position: absolute; left: 15px; top: 15px; color: #fff"
+        @click="getBack"
+        >返回</a-button
+      >
       <div class="alarm-menu">
         <div class="card-btn">
-          <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
-            @click="cardClick(ind, item)">
+          <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind" @click="cardClick(ind, item)">
             <div class="text">{{ item.name }}</div>
             <div class="warn">{{ item.warn }}</div>
           </div>
@@ -15,8 +21,12 @@
       </div>
       <div class="dust-content">
         <div class="content-left">
-          <div :class="activeIndex == index ? 'content-left-item' : 'content-left-item1'"
-            v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
+          <div
+            :class="activeIndex == index ? 'content-left-item' : 'content-left-item1'"
+            v-for="(item, index) in topAreaList"
+            :key="index"
+            @click="topAreaClick(index)"
+          >
             <div class="content-title">{{ item.title }}</div>
             <div class="content-items" v-for="(ite, ind) in item.content" :key="ind">
               <span>{{ ite.label }}</span>
@@ -43,622 +53,621 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue';
-import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
-import echartLine from '../common/echartLine.vue';
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-import { useRouter } from 'vue-router';
-import CustomHeader from '/@/components/vent/customHeader.vue';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { useGlobSetting } from '/@/hooks/setting';
-import MeasurePoint from '../common/measurePoint.vue';
-import { getMaxY, getMinY } from '../common.data'
-
-const glob = useGlobSetting();
-const { hasPermission } = usePermission();
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-//左侧数据列表
-let menuList = ref<any[]>([]);
-//当前左侧激活菜单的索引
-let activeIndex1 = ref(0);
-//顶部区域激活选项
-let activeIndex = ref(0);
-//顶部区域数据
-let topAreaList = reactive<any[]>([]);
-let choiceData = reactive<any[]>([]);
-//粉尘图表数据
-let echartDataFc = reactive<any>({
-  maxData: {
-    lengedData: '实时值(mg/m³)',
-    data: [],
-  },
-  minData: {
-    lengedData: '预测值(mg/m³)',
-    data: [],
-  },
-  aveValue: {
-    lengedData: '预警值(mg/m³)',
-    data: [],
-  },
-  xData: [],
-});
-let maxY = ref<any>(0);
-let minY = ref<any>(0)
-let echartDw = ref('(mg/m³)');
-let gridV = reactive({
-  top: '12%',
-  left: '2%',
-  bottom: '5%',
-  right: '5%',
-  containLabel: true,
-});
-const cardListTf = ref<any[]>([]);
-const chartListTf = ref<any[]>([]);
-let router = useRouter();
-let echartNow = ref<any[]>([]);
-let echartYc = reactive<any[]>([]);
-let flag = ref(true);
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  timer = setTimeout(
-    () => {
-      getMenuList();
-      getWindDeviceList();
-      if (timer) {
-        timer = null;
-      }
-      getMonitor(false);
+  import { ref, reactive, onMounted, onUnmounted } from 'vue';
+  import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
+  import echartLine from '../common/echartLine.vue';
+  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+  import { useRouter } from 'vue-router';
+  import CustomHeader from '/@/components/vent/customHeader.vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import MeasurePoint from '../common/measurePoint.vue';
+  import { getMaxY, getMinY } from '../common.data';
+
+  const glob = useGlobSetting();
+  const { hasPermission } = usePermission();
+  const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+  //左侧数据列表
+  let menuList = ref<any[]>([]);
+  //当前左侧激活菜单的索引
+  let activeIndex1 = ref(0);
+  //顶部区域激活选项
+  let activeIndex = ref(0);
+  //顶部区域数据
+  let topAreaList = reactive<any[]>([]);
+  let choiceData = reactive<any[]>([]);
+  //粉尘图表数据
+  let echartDataFc = reactive<any>({
+    maxData: {
+      lengedData: '实时值(mg/m³)',
+      data: [],
     },
-    flag ? 0 : 1000
-  );
-}
-//返回首页
-function getBack() {
-  router.push('/monitorChannel/monitor-alarm-home');
-}
-//菜单选项切换
-function cardClick(ind, item) {
-  clearTimeout(timer);
-  activeIndex1.value = ind;
-  getMonitor(true);
-}
-//顶部区域选项切换
-function topAreaClick(index) {
-  activeIndex.value = index;
-  echartDataFc.maxData.data.length = 0;
-  echartDataFc.minData.data.length = 0;
-  echartDataFc.aveValue.data.length = 0;
-  echartDataFc.xData.length = 0;
-  echartYc.length = 0;
-  flag.value = true;
-  if (flag.value) {
-    echartNow.value = JSON.parse(choiceData[index].readData.expectInfo)['list'];
-    flag.value = false;
-  }
-  echartYc.push({
-    time: JSON.parse(choiceData[index].readData.expectInfo)['nowTime'],
-    value: JSON.parse(choiceData[index].readData.expectInfo)['nowVal'],
+    minData: {
+      lengedData: '预测值(mg/m³)',
+      data: [],
+    },
+    aveValue: {
+      lengedData: '预警值(mg/m³)',
+      data: [],
+    },
+    xData: [],
   });
-  let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
-  setData.forEach((el) => {
-    if (el.value && el.value != '0') {
-      echartDataFc.xData.push(el.time);
-      echartDataFc.maxData.data.push(el.value);
-      echartDataFc.minData.data.push(JSON.parse(choiceData[index].readData.expectInfo)['aveVal']);
-      echartDataFc.aveValue.data.push(
-        JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-          ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-          : 0
-      );
-    }
+  let maxY = ref<any>(0);
+  let minY = ref<any>(0);
+  let echartDw = ref('(mg/m³)');
+  let gridV = reactive({
+    top: '12%',
+    left: '2%',
+    bottom: '5%',
+    right: '5%',
+    containLabel: true,
   });
-}
-//获取左侧菜单列表
-async function getMenuList() {
-  let res = await sysTypeWarnList({ type: 'dust' });
-  if (res.length != 0) {
-    const menuListTemp: any[] = [];
-    res.forEach((el) => {
-      menuListTemp.push({
-        name: el.systemname,
-        warn: el.warnDes,
-        deviceID: el.id,
-        strtype: el.strtype,
-        detail: el.detail,
-      });
-    });
-    menuList.value = menuListTemp;
-    getDetailList(menuList.value[activeIndex1.value].detail);
+  const cardListTf = ref<any[]>([]);
+  const chartListTf = ref<any[]>([]);
+  let router = useRouter();
+  let echartNow = ref<any[]>([]);
+  let echartYc = reactive<any[]>([]);
+  let flag = ref(true);
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    timer = setTimeout(
+      () => {
+        getMenuList();
+        getWindDeviceList();
+        if (timer) {
+          timer = null;
+        }
+        getMonitor(false);
+      },
+      flag ? 0 : 1000
+    );
   }
-}
-//获取右侧详情列表数据
-function getDetailList(param) {
-  topAreaList.length = 0;
-  if (JSON.stringify(param) != '{}') {
-    param.dust.forEach((el) => {
-      topAreaList.push({
-        title: el.strinstallpos,
-        content: [
-          { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
-          { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
-          { ids: 2, label: '喷雾水压(mPa)', value: el.readData.waterPressure || '--' },
-          { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
-        ],
-      });
+  //返回首页
+  function getBack() {
+    router.push('/monitorChannel/monitor-alarm-home');
+  }
+  //菜单选项切换
+  function cardClick(ind, item) {
+    clearTimeout(timer);
+    activeIndex1.value = ind;
+    getMonitor(true);
+  }
+  //顶部区域选项切换
+  function topAreaClick(index) {
+    activeIndex.value = index;
+    echartDataFc.maxData.data.length = 0;
+    echartDataFc.minData.data.length = 0;
+    echartDataFc.aveValue.data.length = 0;
+    echartDataFc.xData.length = 0;
+    echartYc.length = 0;
+    flag.value = true;
+    if (flag.value) {
+      echartNow.value = JSON.parse(choiceData[index].readData.expectInfo)['list'];
+      flag.value = false;
+    }
+    echartYc.push({
+      time: JSON.parse(choiceData[index].readData.expectInfo)['nowTime'],
+      value: JSON.parse(choiceData[index].readData.expectInfo)['nowVal'],
     });
-    choiceData = param.dust;
-
-
-    if (choiceData[activeIndex.value]) {
-      if (flag.value) {
-        echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
-        flag.value = false;
+    let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
+    setData.forEach((el) => {
+      if (el.value && el.value != '0') {
+        echartDataFc.xData.push(el.time);
+        echartDataFc.maxData.data.push(el.value);
+        echartDataFc.minData.data.push(JSON.parse(choiceData[index].readData.expectInfo)['aveVal']);
+        echartDataFc.aveValue.data.push(
+          JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+            ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+            : 0
+        );
       }
-      echartYc.push({
-        time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
-        value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
-      });
-      let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
-      echartDataFc.maxData.data.length = 0;
-      echartDataFc.minData.data.length = 0;
-      echartDataFc.aveValue.data.length = 0;
-      echartDataFc.xData.length = 0;
-      setData.forEach((el) => {
-        if (el.value && el.value != '0') {
-          echartDataFc.xData.push(el.time);
-          echartDataFc.maxData.data.push(el.value);
-          echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
-          echartDataFc.aveValue.data.push(
-            JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-              ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-              : 0
-          );
-        }
-      });
-      let echartD = [echartDataFc.maxData.data, echartDataFc.minData.data]
-      maxY.value = getMaxY(echartD)
-      minY.value = getMinY(echartD)
-      // maxY.value = echartDataFc.maxData.data.reduce((acr, cur) => {
-      //   return acr > cur ? acr : cur;
-      // });
-      // maxY.value =
-      //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
-      // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
-      //   maxY.value = 1;
-      // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
-      //   maxY.value = 10;
-      // } else if (maxY.value.length < 3) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 10;
-      // } else if (maxY.value.length < 4) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 100;
-      // } else if (maxY.value.length < 5) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 1000;
-      // } else if (maxY.value.length < 6) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 10000;
-      // }
-    } else {
-      activeIndex.value = 0;
-      if (flag.value) {
-        echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
-        flag.value = false;
-      }
-      echartYc.push({
-        time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
-        value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
-      });
-      let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
-      echartDataFc.maxData.data.length = 0;
-      echartDataFc.minData.data.length = 0;
-      echartDataFc.aveValue.data.length = 0;
-      echartDataFc.xData.length = 0;
-      setData.forEach((el) => {
-        if (el.value && el.value != '0') {
-          echartDataFc.xData.push(el.time);
-          echartDataFc.maxData.data.push(el.value);
-          echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
-          echartDataFc.aveValue.data.push(
-            JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-              ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-              : 0
-          );
-        }
+    });
+  }
+  //获取左侧菜单列表
+  async function getMenuList() {
+    let res = await sysTypeWarnList({ type: 'dust' });
+    if (res.length != 0) {
+      const menuListTemp: any[] = [];
+      res.forEach((el) => {
+        menuListTemp.push({
+          name: el.systemname,
+          warn: el.warnDes,
+          deviceID: el.id,
+          strtype: el.strtype,
+          detail: el.detail,
+        });
       });
-      let echartD = [echartDataFc.maxData.data, echartDataFc.minData.data]
-      maxY.value = getMaxY(echartD)
-      minY.value = getMinY(echartD)
-      // maxY.value = echartDataFc.maxData.data.reduce((acr, cur) => {
-      //   return acr > cur ? acr : cur;
-      // });
-      // maxY.value =
-      //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
-      // if (maxY.value.length < 2) {
-      //   maxY.value = 10;
-      // } else if (maxY.value.length < 3) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 10;
-      // } else if (maxY.value.length < 4) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 100;
-      // } else if (maxY.value.length < 5) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 1000;
-      // } else if (maxY.value.length < 6) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 10000;
-      // }
+      menuList.value = menuListTemp;
+      getDetailList(menuList.value[activeIndex1.value].detail);
     }
   }
-}
-
-//获取粉尘监控测点信息
-async function getWindDeviceList() {
-  // cardListTf.length = 0;
-  const cardListTfTemp: any[] = [];
-  const chartListTfTemp: any[] = [];
-  let res = await getDevice({ devicetype: 'dusting', pagetype: 'normal' });
-  if (res && res.msgTxt[0]) {
-    let list = res.msgTxt[0].datalist || [];
-    if (list.length > 0) {
-      list.forEach((el: any) => {
-        const readData = el.readData;
-        el = Object.assign(el, readData);
-        cardListTfTemp.push({
-          label: '通信状态',
-          value: el.netStatus == '0' ? '断开' : '连接',
-          listR: [
-            { id: 0, label: '安装位置', dw: '', value: el.strinstallpos || '-' },
-            { id: 1, label: '粉尘浓度', dw: '(mg/m³)', value: el.dustval || '-' },
-            {
-              id: 2,
-              label: '巷道湿度',
-              dw: el.humidity && Number(el.humidity) < 1 ? '(RH)' : el.humidity && Number(el.humidity) > 1 ? '(%RH)' : '',
-              value: el.humidity || '-',
-            },
-            { id: 4, label: '巷道温度', dw: el.humidity ? '(℃)' : '', value: el.temperature || '-' },
-            {
-              id: 3,
-              label: '是否报警',
-              dw: '',
-              value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
-            },
+  //获取右侧详情列表数据
+  function getDetailList(param) {
+    topAreaList.length = 0;
+    if (JSON.stringify(param) != '{}') {
+      param.dust.forEach((el) => {
+        topAreaList.push({
+          title: el.strinstallpos,
+          content: [
+            { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
+            { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
+            { ids: 2, label: '喷雾水压(mPa)', value: el.readData.waterPressure || '--' },
+            { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
           ],
         });
+      });
+      choiceData = param.dust;
 
-        // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
-        const avgParam = el.avgParam || {
-          avg_dusting_value: 0,
-          max_dusting_value: 0,
-          min_dusting_value: 0,
-        };
-        chartListTfTemp.push({
-          label: el.strinstallpos,
-          time: new Date(),
-          data: [avgParam.avg_dusting_value, avgParam.max_dusting_value, avgParam.min_dusting_value, el.readData.dustval],
+      if (choiceData[activeIndex.value]) {
+        if (flag.value) {
+          echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
+          flag.value = false;
+        }
+        echartYc.push({
+          time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
+          value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
         });
-      });
+        let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
+        echartDataFc.maxData.data.length = 0;
+        echartDataFc.minData.data.length = 0;
+        echartDataFc.aveValue.data.length = 0;
+        echartDataFc.xData.length = 0;
+        setData.forEach((el) => {
+          if (el.value && el.value != '0') {
+            echartDataFc.xData.push(el.time);
+            echartDataFc.maxData.data.push(el.value);
+            echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
+            echartDataFc.aveValue.data.push(
+              JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+                ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+                : 0
+            );
+          }
+        });
+        let echartD = [echartDataFc.maxData.data, echartDataFc.minData.data];
+        maxY.value = getMaxY(echartD);
+        minY.value = getMinY(echartD);
+        // maxY.value = echartDataFc.maxData.data.reduce((acr, cur) => {
+        //   return acr > cur ? acr : cur;
+        // });
+        // maxY.value =
+        //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
+        // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
+        //   maxY.value = 1;
+        // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
+        //   maxY.value = 10;
+        // } else if (maxY.value.length < 3) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 10;
+        // } else if (maxY.value.length < 4) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 100;
+        // } else if (maxY.value.length < 5) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 1000;
+        // } else if (maxY.value.length < 6) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 10000;
+        // }
+      } else {
+        activeIndex.value = 0;
+        if (flag.value) {
+          echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
+          flag.value = false;
+        }
+        echartYc.push({
+          time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
+          value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
+        });
+        let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
+        echartDataFc.maxData.data.length = 0;
+        echartDataFc.minData.data.length = 0;
+        echartDataFc.aveValue.data.length = 0;
+        echartDataFc.xData.length = 0;
+        setData.forEach((el) => {
+          if (el.value && el.value != '0') {
+            echartDataFc.xData.push(el.time);
+            echartDataFc.maxData.data.push(el.value);
+            echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
+            echartDataFc.aveValue.data.push(
+              JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+                ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+                : 0
+            );
+          }
+        });
+        let echartD = [echartDataFc.maxData.data, echartDataFc.minData.data];
+        maxY.value = getMaxY(echartD);
+        minY.value = getMinY(echartD);
+        // maxY.value = echartDataFc.maxData.data.reduce((acr, cur) => {
+        //   return acr > cur ? acr : cur;
+        // });
+        // maxY.value =
+        //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
+        // if (maxY.value.length < 2) {
+        //   maxY.value = 10;
+        // } else if (maxY.value.length < 3) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 10;
+        // } else if (maxY.value.length < 4) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 100;
+        // } else if (maxY.value.length < 5) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 1000;
+        // } else if (maxY.value.length < 6) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 10000;
+        // }
+      }
     }
   }
-  cardListTf.value = cardListTfTemp;
-  chartListTf.value = chartListTfTemp;
-}
-onMounted(() => {
-  getMenuList();
-  getMonitor(true);
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
+
+  //获取粉尘监控测点信息
+  async function getWindDeviceList() {
+    // cardListTf.length = 0;
+    const cardListTfTemp: any[] = [];
+    const chartListTfTemp: any[] = [];
+    let res = await getDevice({ devicetype: 'dusting', pagetype: 'normal' });
+    if (res && res.msgTxt[0]) {
+      let list = res.msgTxt[0].datalist || [];
+      if (list.length > 0) {
+        list.forEach((el: any) => {
+          const readData = el.readData;
+          el = Object.assign(el, readData);
+          cardListTfTemp.push({
+            label: '通信状态',
+            value: el.netStatus == '0' ? '断开' : '连接',
+            listR: [
+              { id: 0, label: '安装位置', dw: '', value: el.strinstallpos || '-' },
+              { id: 1, label: '粉尘浓度', dw: '(mg/m³)', value: el.dustval || '-' },
+              {
+                id: 2,
+                label: '巷道湿度',
+                dw: el.humidity && Number(el.humidity) < 1 ? '(RH)' : el.humidity && Number(el.humidity) > 1 ? '(%RH)' : '',
+                value: el.humidity || '-',
+              },
+              { id: 4, label: '巷道温度', dw: el.humidity ? '(℃)' : '', value: el.temperature || '-' },
+              {
+                id: 3,
+                label: '是否报警',
+                dw: '',
+                value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
+              },
+            ],
+          });
+
+          // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
+          const avgParam = el.avgParam || {
+            avg_dusting_value: 0,
+            max_dusting_value: 0,
+            min_dusting_value: 0,
+          };
+          chartListTfTemp.push({
+            label: el.strinstallpos,
+            time: new Date(),
+            data: [avgParam.avg_dusting_value, avgParam.max_dusting_value, avgParam.min_dusting_value, el.readData.dustval],
+          });
+        });
+      }
+    }
+    cardListTf.value = cardListTfTemp;
+    chartListTf.value = chartListTfTemp;
   }
-});
+  onMounted(() => {
+    getMenuList();
+    getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .dustWarn {
+      --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
+      --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
+      --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
+      --image-dust-choice: url('/@/assets/images/themify/deepblue/fire/dust-choice.png');
+      --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
+      --image-dust-choice1: url('/@/assets/images/themify/deepblue/fire/dust-choice1.png');
+      --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
+      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+    }
+  }
 
-@{theme-deepblue} {
   .dustWarn {
-    --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
-    --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
-    --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
-    --image-dust-choice: url('/@/assets/images/themify/deepblue/fire/dust-choice.png');
-    --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
-    --image-dust-choice1: url('/@/assets/images/themify/deepblue/fire/dust-choice1.png');
-    --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
-    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
-  }
-}
-
-.dustWarn {
-  --image-border: url('/@/assets/images/fire/border.png');
-  --image-no-choice: url('/@/assets/images/fire/no-choice.png');
-  --image-choice: url('/@/assets/images/fire/choice.png');
-  --image-dust-choice: url('/@/assets/images/fire/dust-choice.png');
-  --image-dust-content: url('/@/assets/images/fire/dust-content.png');
-  --image-dust-choice1: url('/@/assets/images/fire/dust-choice1.png');
-  --image-dust-content: url('/@/assets/images/fire/dust-content.png');
-  --image-bj1: url('/@/assets/images/fire/bj1.png');
-  width: 100%;
-  height: 100%;
-  padding: 80px 10px 15px 10px;
-  box-sizing: border-box;
-
-  .top-dust {
-    display: flex;
-    justify-content: space-between;
-    height: 50%;
-    margin-bottom: 15px;
-    background: var(--image-border) no-repeat center;
-    background-size: 100% 100%;
-
-    .alarm-menu {
-      height: 100%;
-      width: 15%;
-      padding: 10px;
-      box-sizing: border-box;
+    --image-border: url('/@/assets/images/fire/border.png');
+    --image-no-choice: url('/@/assets/images/fire/no-choice.png');
+    --image-choice: url('/@/assets/images/fire/choice.png');
+    --image-dust-choice: url('/@/assets/images/fire/dust-choice.png');
+    --image-dust-content: url('/@/assets/images/fire/dust-content.png');
+    --image-dust-choice1: url('/@/assets/images/fire/dust-choice1.png');
+    --image-dust-content: url('/@/assets/images/fire/dust-content.png');
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    width: 100%;
+    height: 100%;
+    padding: 80px 10px 15px 10px;
+    box-sizing: border-box;
 
-      .card-btn {
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-
-        .btn {
-          position: relative;
-          width: 81%;
-          height: 24%;
-          margin-bottom: 6%;
-          font-family: 'douyuFont';
-          background: var(--image-no-choice) no-repeat;
-          background-size: 100% 100%;
-          cursor: pointer;
-
-          .text {
-            width: 80%;
-            position: absolute;
-            left: 50%;
-            top: 28px;
-            font-size: 14px;
-            color: var(--vent-table-action-link);
-            text-align: center;
-            transform: translate(-50%, 0);
-          }
+    .top-dust {
+      display: flex;
+      justify-content: space-between;
+      height: 50%;
+      margin-bottom: 15px;
+      background: var(--image-border) no-repeat center;
+      background-size: 100% 100%;
 
-          .warn {
-            width: 100%;
-            position: absolute;
-            left: 50%;
-            bottom: 11px;
-            font-size: 12px;
-            color: #fff;
-            text-align: center;
-            transform: translate(-50%, 0);
-          }
-        }
+      .alarm-menu {
+        height: 100%;
+        width: 15%;
+        padding: 10px;
+        box-sizing: border-box;
 
-        .btn1 {
-          position: relative;
+        .card-btn {
           width: 100%;
-          height: 24%;
-          margin-bottom: 6%;
-          font-family: 'douyuFont';
-          background: var(--image-choice) no-repeat;
-          background-size: 100% 100%;
-          cursor: pointer;
-
-          .text {
-            width: 80%;
-            position: absolute;
-            left: 50%;
-            top: 28px;
-            font-size: 14px;
-            color: var(--vent-table-action-link);
-            text-align: center;
-            transform: translate(-62%, 0);
+          height: 100%;
+          overflow-y: auto;
+
+          .btn {
+            position: relative;
+            width: 81%;
+            height: 24%;
+            margin-bottom: 6%;
+            font-family: 'douyuFont';
+            background: var(--image-no-choice) no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .text {
+              width: 80%;
+              position: absolute;
+              left: 50%;
+              top: 28px;
+              font-size: 14px;
+              color: var(--vent-table-action-link);
+              text-align: center;
+              transform: translate(-50%, 0);
+            }
+
+            .warn {
+              width: 100%;
+              position: absolute;
+              left: 50%;
+              bottom: 11px;
+              font-size: 12px;
+              color: #fff;
+              text-align: center;
+              transform: translate(-50%, 0);
+            }
           }
 
-          .warn {
+          .btn1 {
+            position: relative;
             width: 100%;
-            position: absolute;
-            left: 50%;
-            bottom: 11px;
-            font-size: 14px;
-            color: #fff;
-            text-align: center;
-            transform: translate(-60%, 0);
+            height: 24%;
+            margin-bottom: 6%;
+            font-family: 'douyuFont';
+            background: var(--image-choice) no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .text {
+              width: 80%;
+              position: absolute;
+              left: 50%;
+              top: 28px;
+              font-size: 14px;
+              color: var(--vent-table-action-link);
+              text-align: center;
+              transform: translate(-62%, 0);
+            }
+
+            .warn {
+              width: 100%;
+              position: absolute;
+              left: 50%;
+              bottom: 11px;
+              font-size: 14px;
+              color: #fff;
+              text-align: center;
+              transform: translate(-60%, 0);
+            }
           }
         }
       }
-    }
 
-    .dust-content {
-      display: flex;
-      justify-content: space-between;
-      height: 100%;
-      width: 85%;
-      padding: 10px 0px;
-      box-sizing: border-box;
-
-      .content-left {
-        width: 280px;
-        height: 100%;
+      .dust-content {
         display: flex;
-        flex-direction: column;
-        // justify-content: space-around;
-        align-items: flex-start;
-        overflow-y: auto;
-        overflow-x: hidden;
-
-        .content-left-item {
-          position: relative;
-          width: 272px;
-          height: 173px;
-          flex-shrink: 0;
-          background: var(--image-dust-choice) no-repeat center;
-          background-size: 100% 100%;
-          margin: 5px 0px;
-
-          .content-title {
-            width: 85%;
-            position: absolute;
-            top: 2px;
-            left: 50%;
-            transform: translate(-55%, 0);
-            font-size: 14px;
-            color: #fff;
-            text-align: center;
-          }
+        justify-content: space-between;
+        height: 100%;
+        width: 85%;
+        padding: 10px 0px;
+        box-sizing: border-box;
 
-          .content-items {
-            position: absolute;
-            left: 50%;
-            transform: translate(-54%, 0);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 240px;
-            height: 26px;
-            color: #fff;
-            font-size: 14px;
-            padding: 0px 5px;
-            box-sizing: border-box;
-            background: var(--image-dust-content) no-repeat center;
+        .content-left {
+          width: 280px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          // justify-content: space-around;
+          align-items: flex-start;
+          overflow-y: auto;
+          overflow-x: hidden;
+
+          .content-left-item {
+            position: relative;
+            width: 272px;
+            height: 173px;
+            flex-shrink: 0;
+            background: var(--image-dust-choice) no-repeat center;
             background-size: 100% 100%;
-
-            &:nth-child(2) {
-              top: 32px;
+            margin: 5px 0px;
+
+            .content-title {
+              width: 85%;
+              position: absolute;
+              top: 2px;
+              left: 50%;
+              transform: translate(-55%, 0);
+              font-size: 14px;
+              color: #fff;
+              text-align: center;
             }
 
-            &:nth-child(3) {
-              top: 67px;
+            .content-items {
+              position: absolute;
+              left: 50%;
+              transform: translate(-54%, 0);
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              width: 240px;
+              height: 26px;
+              color: #fff;
+              font-size: 14px;
+              padding: 0px 5px;
+              box-sizing: border-box;
+              background: var(--image-dust-content) no-repeat center;
+              background-size: 100% 100%;
+
+              &:nth-child(2) {
+                top: 32px;
+              }
+
+              &:nth-child(3) {
+                top: 67px;
+              }
+
+              &:nth-child(4) {
+                top: 102px;
+              }
+
+              &:nth-child(5) {
+                top: 136px;
+              }
             }
+          }
 
-            &:nth-child(4) {
-              top: 102px;
+          .content-left-item1 {
+            position: relative;
+            width: 250px;
+            height: 173px;
+            flex-shrink: 0;
+            background: var(--image-dust-choice1) no-repeat center;
+            background-size: 100% 100%;
+            margin: 5px 0px;
+
+            .content-title {
+              width: 85%;
+              position: absolute;
+              top: 2px;
+              left: 50%;
+              transform: translate(-50%, 0);
+              font-size: 14px;
+              color: #fff;
+              text-align: center;
             }
 
-            &:nth-child(5) {
-              top: 136px;
+            .content-items {
+              position: absolute;
+              left: 50%;
+              transform: translate(-54%, 0);
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              width: 215px;
+              height: 26px;
+              color: #fff;
+              font-size: 14px;
+              padding: 0px 5px;
+              box-sizing: border-box;
+              background: var(--image-dust-content) no-repeat center;
+              background-size: 100% 100%;
+
+              &:nth-child(2) {
+                top: 32px;
+              }
+
+              &:nth-child(3) {
+                top: 67px;
+              }
+
+              &:nth-child(4) {
+                top: 102px;
+              }
+
+              &:nth-child(5) {
+                top: 136px;
+              }
             }
           }
         }
 
-        .content-left-item1 {
-          position: relative;
-          width: 250px;
-          height: 173px;
-          flex-shrink: 0;
-          background: var(--image-dust-choice1) no-repeat center;
-          background-size: 100% 100%;
-          margin: 5px 0px;
-
-          .content-title {
-            width: 85%;
-            position: absolute;
-            top: 2px;
-            left: 50%;
-            transform: translate(-50%, 0);
-            font-size: 14px;
-            color: #fff;
-            text-align: center;
-          }
+        .content-right {
+          width: calc(100% - 280px);
+          height: 100%;
 
-          .content-items {
-            position: absolute;
-            left: 50%;
-            transform: translate(-54%, 0);
+          .title-t {
+            height: 30px;
+            margin-bottom: 10px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            width: 215px;
-            height: 26px;
-            color: #fff;
-            font-size: 14px;
-            padding: 0px 5px;
-            box-sizing: border-box;
-            background: var(--image-dust-content) no-repeat center;
-            background-size: 100% 100%;
-
-            &:nth-child(2) {
-              top: 32px;
-            }
-
-            &:nth-child(3) {
-              top: 67px;
-            }
-
-            &:nth-child(4) {
-              top: 102px;
-            }
 
-            &:nth-child(5) {
-              top: 136px;
+            .text-t {
+              font-family: 'douyuFont';
+              font-size: 14px;
+              color: #fff;
             }
           }
-        }
-      }
-
-      .content-right {
-        width: calc(100% - 280px);
-        height: 100%;
 
-        .title-t {
-          height: 30px;
-          margin-bottom: 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .text-t {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
+          .echart-boxd {
+            width: 100%;
+            height: calc(100% - 40px);
           }
         }
 
-        .echart-boxd {
+        .content-right1 {
           width: 100%;
-          height: calc(100% - 40px);
-        }
-      }
-
-      .content-right1 {
-        width: 100%;
-        height: 100%;
+          height: 100%;
 
-        .title-t {
-          height: 30px;
-          margin-bottom: 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+          .title-t {
+            height: 30px;
+            margin-bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
 
-          .text-t {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
+            .text-t {
+              font-family: 'douyuFont';
+              font-size: 14px;
+              color: #fff;
+            }
           }
-        }
 
-        .echart-boxd {
-          width: 100%;
-          height: calc(100% - 40px);
+          .echart-boxd {
+            width: 100%;
+            height: calc(100% - 40px);
+          }
         }
       }
     }
-  }
 
-  .bot-dust {
-    height: calc(50% - 15px);
-    background: var(--image-border) no-repeat center;
-    background-size: 100% 100%;
-    padding: 10px;
-    box-sizing: border-box;
-
-    .bot-area {
-      height: 100%;
-      padding: 10px;
-      background: var(--image-bj1) no-repeat center;
+    .bot-dust {
+      height: calc(50% - 15px);
+      background: var(--image-border) no-repeat center;
       background-size: 100% 100%;
+      padding: 10px;
       box-sizing: border-box;
+
+      .bot-area {
+        height: 100%;
+        padding: 10px;
+        background: var(--image-bj1) no-repeat center;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+      }
     }
   }
-}
 </style>

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

@@ -490,9 +490,6 @@
         case 'gate_qd':
           type = 'fm3';
           break;
-        case 'fmSs':
-          type = 'fm3';
-          break;
         case 'fmtl3':
           type = 'fmThreeTl';
           break;

src/views/vent/monitorManager/windowMonitor/dandaoFcLt.threejs.ts

@@ -0,0 +1,251 @@
+import * as THREE from 'three';
+import { getTextCanvas } from '/@/utils/threejs/util';
+import gsap from 'gsap';
+
+class ddFc_lt {
+  model;
+  modelName = 'ddFc';
+  group: THREE.Object3D = new THREE.Object3D();
+  animationTimer;
+  isLRAnimation = true;
+  direction = 1;
+  windowsActionArr = {
+    frontWindow: [],
+  };
+  player1;
+  player2;
+  playerStartClickTime1 = new Date().getTime();
+  constructor(model) {
+    this.model = model;
+    this.group.name = 'ddFc';
+  }
+  addLight = () => {
+    if (!this.group || !this.group) return;
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
+    directionalLight.position.set(-437, 61, 559);
+    this.group.add(directionalLight);
+
+    const pointLight2 = new THREE.PointLight(0xffffff, 1, 150);
+    pointLight2.position.set(-101, 34, 16);
+    pointLight2.shadow.bias = 0.05;
+    this.group.add(pointLight2);
+
+    const pointLight3 = new THREE.PointLight(0xffffff, 1, 150);
+    pointLight3.position.set(19, 25, -7);
+    pointLight3.shadow.bias = 0.05;
+    this.group.add(pointLight3);
+
+    const pointLight6 = new THREE.PointLight(0xffffff, 1, 300);
+    pointLight6.position.set(51, 51, 9);
+    pointLight6.shadow.bias = 0.05;
+    this.group.add(pointLight6);
+  };
+
+  // 设置模型位置
+  setModalPosition() {
+    this.group?.scale.set(22, 22, 22);
+    this.group?.position.set(-35, 25, 15);
+  }
+
+  addMonitorText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    const screenDownText = VENT_PARAM['modalText']
+      ? VENT_PARAM['modalText']
+      : History_Type['type'] == 'remote'
+      ? `国能神东煤炭集团监制`
+      : '煤炭科学技术研究院有限公司研制';
+
+    const screenDownTextX = 90 - (screenDownText.length - 10) * 6;
+    const textArr = [
+      {
+        text: `远程定量调节自动风窗`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 100,
+        y: 95,
+      },
+      {
+        text: `${selectData.OpenDegree ? '开度值(°)' : selectData.forntArea ? '过风面积(㎡)' : '过风面积(㎡)'}:`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 5,
+        y: 145,
+      },
+      {
+        text: selectData.OpenDegree
+          ? Number(`${selectData.OpenDegree}`).toFixed(2)
+          : selectData.forntArea
+          ? Number(`${selectData.forntArea}`).toFixed(2)
+          : '-',
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 330,
+        y: 145,
+      },
+      {
+        text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速(m/s)' : '通信状态：'}:`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 5,
+        y: 200,
+      },
+      {
+        text: `${
+          selectData.frontRearDP
+            ? selectData.frontRearDP
+            : selectData.windSpeed
+            ? selectData.windSpeed
+            : selectData.netStatus == '0'
+            ? '断开'
+            : '连接'
+        }`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 330,
+        y: 200,
+      },
+      {
+        text: `${selectData.fWindowM3 ? '过风量(m³/min)' : '风窗道数'}: `,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 5,
+        y: 250,
+      },
+      {
+        text: `${selectData.fWindowM3 ? selectData.fWindowM3 : selectData.nwindownum}`,
+        font: 'normal 30px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: 330,
+        y: 250,
+      },
+      {
+        text: screenDownText,
+        font: 'normal 28px Arial',
+        color: '#009900',
+        strokeStyle: '#002200',
+        x: screenDownTextX,
+        y: 300,
+      },
+    ];
+    getTextCanvas(750, 546, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      const textMaterial = new THREE.MeshBasicMaterial({
+        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
+        map: textMap, // 设置纹理贴图
+        transparent: true,
+        side: THREE.DoubleSide, // 这里是双面渲染的意思
+      });
+      textMap.dispose();
+      textMaterial.blending = THREE.CustomBlending;
+      const monitorPlane = this.group?.getObjectByName('monitorText');
+      if (monitorPlane) {
+        monitorPlane.material = textMaterial;
+      } else {
+        const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
+        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
+        planeMesh.name = 'monitorText';
+        planeMesh.scale.set(0.003, 0.0034, 0.004);
+        planeMesh.position.set(4.25, 0.44, -0.27);
+        this.group?.add(planeMesh);
+      }
+    });
+  }
+
+  /* 提取风门序列帧，初始化前后门动画 */
+  initAnimation() {
+    const meshArr01: THREE.Mesh[] = [];
+    const fcGroup = this.group?.getObjectByName('FengChuang_DaLiuTa')?.getObjectByName('FengChuang_DaLiuTa_1')?.getObjectByName('FengChuang_1_17');
+    if (fcGroup) {
+      fcGroup.children.filter((item: THREE.Mesh) => {
+        item.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr01.push(item);
+      });
+    }
+    this.windowsActionArr.frontWindow = meshArr01;
+  }
+
+  play(rotationParam, flag) {
+    if (!this.windowsActionArr.frontWindow) {
+      return;
+    }
+    if (flag === 1) {
+      // 前风窗动画
+      this.windowsActionArr.frontWindow.forEach((mesh: THREE.Mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.frontDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.frontDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 0) {
+      ([...this.windowsActionArr.frontWindow] as THREE.Mesh[]).forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(0),
+          overwrite: true,
+        });
+      });
+    }
+  }
+
+  /* 点击风窗，风窗全屏 */
+  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
+    if (this.animationTimer) {
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
+    }
+    // 判断是否点击到视频
+    intersects.find((intersect) => {
+      const mesh = intersect.object;
+      if (mesh.name === 'player1') {
+        if (new Date().getTime() - this.playerStartClickTime1 < 400) {
+          // 双击，视频放大
+          if (this.player1) {
+            this.player1.requestFullscreen();
+          }
+        }
+        this.playerStartClickTime1 = new Date().getTime();
+        return true;
+      }
+      return false;
+    });
+  }
+
+  mouseUpModel() {}
+
+  /* 风门动画 */
+  render() {
+    if (!this.model) {
+      return;
+    }
+  }
+
+  mountedThree() {
+    return new Promise((resolve) => {
+      this.model.setGLTFModel('ddFc-lt').then((gltf) => {
+        this.group = gltf[0];
+        this.group.name = this.modelName;
+        this.setModalPosition();
+        this.initAnimation();
+        resolve(null);
+      });
+    });
+  }
+
+  destroy() {
+    this.model.clearGroup(this.group);
+    this.windowsActionArr.frontWindow = undefined;
+    this.model = null;
+    this.group = null;
+  }
+}
+export default ddFc_lt;

src/views/vent/monitorManager/windowMonitor/window.threejs.ts

@@ -13,6 +13,7 @@ import ddFc_2 from './dandaoFcBd2.threejs'; // ddFc_2 单道-一个大窗两列
 import ddFc_6 from './dandaoFcHjt.threejs'; // ddFc_6 单道-大窗1列扇叶(活鸡兔)
 import ddFc_7 from './dandaoFcBd3.threejs'; // ddFc_6 单道-大窗1列扇叶(活鸡兔)
 import threeFc_8 from './sandaoFc.threejs'; // ddFc_8 三道-大窗2列门式扇叶(三道沟)
+import ddFc_lt from './dandaoFcLt.threejs';
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
 import { getDictItemsByCode } from '/@/utils/dict';
@@ -34,6 +35,7 @@ let model: UseThree,
   ddFc4: ddFc_4,
   ddFc6: ddFc_6,
   ddFc7: ddFc_7,
+  ddFc8: ddFc_lt,
   threeFc8: threeFc_8,
   singleWindowXkObj: singleWindowXk,
   group: THREE.Object3D,
@@ -69,6 +71,8 @@ const startAnimation = () => {
       ddFc6.mouseUpModel.call(ddFc6);
     } else if (windowType === 'ddFc7' && ddFc7) {
       ddFc7.mouseUpModel.call(ddFc7);
+    } else if (windowType === 'ddFc8' && ddFc8) {
+      ddFc8.mouseUpModel.call(ddFc8);
     } else if (windowType === 'sdFc1' && sdFc1) {
       sdFc1.mouseUpModel.call(sdFc1);
     } else if (windowType === 'sdFc3' && sdFc3) {
@@ -103,6 +107,8 @@ const mouseEvent = (event) => {
         ddFc6.mousedownModel.call(ddFc6, intersects);
       } else if (windowType === 'ddFc7' && ddFc7) {
         ddFc7.mousedownModel.call(ddFc7, intersects);
+      } else if (windowType === 'ddFc8' && ddFc8) {
+        ddFc8.mousedownModel.call(ddFc8, intersects);
       } else if (windowType === 'sdFc1' && sdFc1) {
         sdFc1.mousedownModel.call(sdFc1, intersects);
       } else if (windowType === 'sdFc3' && sdFc3) {
@@ -140,6 +146,8 @@ export const addMonitorText = (selectData) => {
     return ddFc6.addMonitorText.call(ddFc6, selectData);
   } else if (windowType === 'ddFc7' && ddFc7) {
     return ddFc7.addMonitorText.call(ddFc7, selectData);
+  } else if (windowType === 'ddFc8' && ddFc8) {
+    return ddFc8.addMonitorText.call(ddFc8, selectData);
   } else if (windowType === 'sdFc1' && sdFc1) {
     return sdFc1.addMonitorText.call(sdFc1, selectData);
   } else if (windowType === 'sdFc3' && sdFc3) {
@@ -258,6 +266,8 @@ export const play = (rotationParam, flag) => {
     return ddFc6.play.call(ddFc6, rotationParam, flag);
   } else if (windowType === 'ddFc7' && ddFc7) {
     return ddFc7.play.call(ddFc7, rotationParam, flag);
+  } else if (windowType === 'ddFc8' && ddFc8) {
+    return ddFc8.play.call(ddFc8, rotationParam, flag);
   } else if (windowType === 'sdFc1' && sdFc1) {
     return sdFc1.play.call(sdFc1, rotationParam, flag);
   } else if (windowType === 'sdFc3' && sdFc3) {
@@ -304,6 +314,12 @@ export const setModelType = (type) => {
       newP: { x: 66.257, y: 57.539, z: 94.313 },
       newT: { x: 0, y: 0, z: 0 },
     },
+    ddFc8: {
+      render: ddFc8 ? () => ddFc8.render() : null,
+      group: ddFc8 ? ddFc8.group : null,
+      newP: { x: 32.78, y: 64.88, z: 106.78 },
+      newT: { x: -6.12, y: 13.27, z: -4.64 },
+    },
     ddFc1: {
       render: ddFc1 ? () => ddFc1.render() : null,
       group: ddFc1 ? ddFc1.group : null,
@@ -424,6 +440,10 @@ export const mountedThree = () => {
           ddFc7 = new ddFc_7(model);
           await ddFc7.mountedThree();
           break;
+        case 'ddFc8':
+          ddFc8 = new ddFc_lt(model);
+          await ddFc8.mountedThree();
+          break;
         case 'sdFc3':
           sdFc3 = new sdFc_3(model);
           await sdFc3.mountedThree();
@@ -451,7 +471,7 @@ export const mountedThree = () => {
       }
     }
     model.animate();
-    // addMouseEvent();
+    addMouseEvent();
     resolve(null);
   });
 };
@@ -467,6 +487,7 @@ export const destroy = () => {
     if (ddFc4) ddFc4.destroy();
     if (ddFc6) ddFc6.destroy();
     if (ddFc7) ddFc7.destroy();
+    if (ddFc8) ddFc8.destroy();
     if (sdFc1) sdFc1.destroy();
     if (sdFc3) sdFc3.destroy();
     if (sdFc4) sdFc4.destroy();
@@ -485,6 +506,7 @@ export const destroy = () => {
     ddFc4 = null;
     ddFc6 = null;
     ddFc7 = null;
+    ddFc8 = null;
     sdFc1 = null;
     sdFc3 = null;
     sdFc4 = null;