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

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

@@ -0,0 +1,79 @@
+import * as THREE from 'three';
+import gasp from 'gsap';
+
+/**
+ * 箭头流工具类，用于创建箭头流动的相关材质、几何、动画并管理其生命周期
+ */
+export default class ArrowFlow extends THREE.MeshBasicMaterial {
+  /** 箭头流材质 */
+  texture: THREE.Texture;
+  /** 流线起点 */
+  origin: THREE.Vector3;
+  /** 流线终点 */
+  destiny: THREE.Vector3;
+  /** 流线 */
+  path: THREE.LineCurve3;
+  /** 重复次数 */
+  repeat: THREE.Vector2;
+  /** 图形偏移量 */
+  offset: THREE.Vector2;
+  /** 动画控制器 */
+  tween: gsap.core.Tween | null = null;
+
+  constructor(
+    texturePath: '/model/img/blueArrow.png' | '/model/img/greenArrow.png' | '/model/img/redArrow.png',
+    origin: THREE.Vector3,
+    destiny: THREE.Vector3,
+    {
+      repeatX = 20,
+      repeatY = 1,
+      /** 0-1 */
+      offsetX = 0,
+      /** 0-1 */
+      offsetY = 0.5,
+    } = {}
+  ) {
+    const t = new THREE.TextureLoader().load(texturePath);
+    t.wrapS = THREE.RepeatWrapping;
+    t.wrapT = THREE.RepeatWrapping;
+    t.repeat = new THREE.Vector2(repeatX, repeatY);
+    t.offset = new THREE.Vector2(offsetX, offsetY);
+    super({ map: t, transparent: true });
+    this.path = new THREE.LineCurve3(origin, destiny);
+    this.texture = t;
+    this.origin = origin;
+    this.destiny = destiny;
+    this.repeat = t.repeat;
+    this.offset = t.offset;
+  }
+
+  /**
+   * 启动动画效果
+   * @param speed number 类型，配合 offset 使用，越小速度越慢，大于 0
+   * @param offsetX
+   * @param offsetY
+   */
+  startAnimation(speed: number = 1, offsetX: number = -0.01, offsetY: number = 0) {
+    if (this.tween) {
+      this.tween.kill();
+    }
+    this.tween = gasp.to(this, {
+      duration: 1,
+      repeat: -1,
+      onUpdate: () => {
+        this.texture.offset.setX(this.texture.offset.x + offsetX * speed);
+        this.texture.offset.setY(this.texture.offset.y + offsetY * speed);
+      },
+    });
+  }
+
+  pauseAnimation() {
+    if (!this.tween) return;
+    this.tween.pause();
+  }
+
+  stopAnimation() {
+    if (!this.tween) return;
+    this.tween.kill();
+  }
+}

src/views/vent/monitorManager/alarmMonitor/common/echartLine3.vue

@@ -4,22 +4,23 @@
 
 <script lang="ts" setup>
   import * as echarts from 'echarts';
-  import { ref, nextTick, reactive, watch, defineProps } from 'vue';
+  import { ref, nextTick, watch, defineProps } from 'vue';
 
-  let props = defineProps({
-    deviceId: {
-      type: String,
-    },
-  });
+  let props = defineProps<{
+    xData: string[];
+    y1Data: number[];
+    y2Data: number[];
+    y3Data: number[];
+    y4Data: number[];
+    yUnit?: string;
+  }>();
 
   //获取dom元素节点
   let work = ref<any>();
-  let echartDataWds = reactive({});
 
   watch(
-    () => props.deviceId,
-    (data) => {
-      echartDataWds = Object.assign({}, data);
+    () => props.xData,
+    () => {
       getOption();
     },
     { immediate: true, deep: true }
@@ -30,112 +31,69 @@
       const myChart = echarts.init(work.value);
       let option = {
         tooltip: {
-          trigger: 'axis',
+          trigger: 'item',
           backgroundColor: 'rgba(0, 0, 0, .6)',
           textStyle: {
             color: '#fff',
             fontSize: 12,
           },
         },
-
+        grid: {
+          top: '15%',
+          left: '10%',
+          bottom: '10%',
+          right: '2%',
+        },
         legend: {
           align: 'left',
-          right: '50%',
           top: '0%',
           type: 'plain',
           textStyle: {
             color: '#7ec7ff',
             fontSize: 14,
           },
-          // icon:'rect',
-          itemGap: 25,
-          itemWidth: 18,
-          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-          data: [
-            {
-              name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
-            },
-          ],
+          itemGap: 10,
+          itemWidth: 5,
         },
-
-        grid: {
-          top: '20%',
-          left: '4%',
-          right: '4%',
-          bottom: '20%',
-          // containLabel: true
-        },
-
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: true,
-              lineStyle: {
-                color: '#244a94',
-              },
-            },
             axisLabel: {
-              //坐标轴刻度标签的相关设置
               textStyle: {
                 color: '#b3b8cc',
-                padding: 5,
-                fontSize: 14,
-              },
-              formatter: function (data) {
-                return data;
               },
             },
+            // axisLine: {
+            //   lineStyle: {
+            //     color: '#244a94',
+            //   },
+            // },
             splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#0d2973',
-                type: 'dashed',
-              },
+              show: false,
             },
             axisTick: {
               show: false,
             },
-            data: echartDataWds.xData,
+            data: props.xData,
           },
         ],
-
         yAxis: [
           {
-            name: '(℃)',
-            nameTextStyle: {
-              color: '#7ec7ff',
-              fontSize: 14,
-              padding: 0,
-            },
-            min: 0,
-            max: 100,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#0d2973',
-                type: 'dashed',
-              },
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#244a94',
-              },
-            },
+            // boundaryGap: false,
             axisLabel: {
-              show: true,
               textStyle: {
                 color: '#b3b8cc',
-                padding: 5,
               },
-              formatter: function (value) {
-                if (value === 0) {
-                  return value;
-                }
-                return value;
+            },
+            name: props.yUnit,
+            // nameTextStyle: {
+            //   color: '#fff',
+            //   fontSize: 12,
+            //   lineHeight: 10,
+            // },
+            splitLine: {
+              lineStyle: {
+                color: '#0d2973',
               },
             },
             axisTick: {
@@ -145,66 +103,56 @@
         ],
         series: [
           {
-            name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
+            name: '平均值',
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
-            symbolSize: 8,
+            symbolSize: 4,
             lineStyle: {
               normal: {
                 width: 2,
-                color: '#4653fd', // 线条颜色
               },
-              borderColor: 'rgba(0,0,0,.4)',
             },
-            itemStyle: {
-              color: '#4653fd',
-              borderColor: '#646ace',
-              borderWidth: 0,
-            },
-            data: echartDataWds.maxData ? echartDataWds.maxData.data : [],
+            data: props.y1Data,
           },
           {
-            name: echartDataWds.minData ? echartDataWds.minData.lengedData : '',
+            name: '最大值',
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
-            symbolSize: 8,
-
+            symbolSize: 4,
             lineStyle: {
               normal: {
                 width: 2,
-                color: '#46fda8', // 线条颜色
               },
-              borderColor: 'rgba(0,0,0,.4)',
             },
-            itemStyle: {
-              color: '#46fda8',
-              borderColor: '#646ace',
-              borderWidth: 0,
-            },
-            data: echartDataWds.minData ? echartDataWds.minData.data : [],
+            data: props.y2Data,
           },
           {
-            name: echartDataWds.aveaData ? echartDataWds.aveaData.lengedData : '',
+            name: '最小值',
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
-            symbolSize: 8,
-
+            symbolSize: 4,
             lineStyle: {
               normal: {
                 width: 2,
-                color: '#1eb0fc', // 线条颜色
               },
-              borderColor: 'rgba(0,0,0,.4)',
             },
-            itemStyle: {
-              color: '#1eb0fc',
-              borderColor: '#646ace',
-              borderWidth: 0,
+            data: props.y3Data,
+          },
+          {
+            name: '实时值',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 4,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
             },
-            data: echartDataWds.aveaData ? echartDataWds.aveaData.data : [],
+            data: props.y4Data,
           },
         ],
       };

src/views/vent/monitorManager/alarmMonitor/common/fireWork.vue

@@ -35,7 +35,15 @@
     <div class="bot-content">
       <div class="title">
         <div class="text">束管系统监测</div>
-        <div class="select-box">
+        <div class="select-box flex">
+          <BaseTab
+            style="width: 200px; color: var(--vent-font-color); margin-right: 10px"
+            :tabs="[
+              { name: '束管监测', id: 'default' },
+              { name: '预测曲线', id: 'predict' },
+            ]"
+            v-model:id="shownChart"
+          />
           <a-select v-model:value="selectData" style="width: 250px" @change="changeSelect">
             <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
           </a-select>
@@ -60,22 +68,26 @@
         </div>
       </div>
       <div class="echart-box">
-        <echartLine1 :echartDataSg="echartDataSg" :maxY="maxY1" :lengedDataName="echartDataSg.lengedDataName" />
+        <echartLine1 v-if="shownChart === 'default'" :echartDataSg="echartDataSg" :maxY="maxY1" :lengedDataName="echartDataSg.lengedDataName" />
+        <echartLine3 v-if="shownChart === 'predict'" :x-data="[]" :y1-data="[]" :y2-data="[]" :y3-data="[]" :y4-data="[]" />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
+  import { ref, reactive, watch, defineProps } from 'vue';
   import imgUrl from '/@/assets/images/fire/pie.png';
   import echartLine from './echartLine.vue';
   import echartLine1 from './echartLine1.vue';
+  import echartLine3 from './echartLine3.vue';
   import { topList, contentList } from '../common.data';
+  import BaseTab from '../../../gas/components/tab/baseTab.vue';
 
   let props = defineProps({
     listData: Object,
   });
+  const shownChart = ref('default');
   let selectSj = ref<any[]>([]);
   let selectData = ref('');
   let selectList = reactive<any[]>([]);

src/views/vent/monitorManager/alarmMonitor/common/measurePoint.vue

@@ -16,28 +16,36 @@
       />
     </div>
     <div v-if="shown === 'default'" class="content-item">
-      <div class="card-content" v-for="(item, index) in cards" :key="index">
+      <div class="card-content" v-for="(item, index) in cards" :key="`vmac${index}`">
         <div class="item-l">
           <div class="label-l">{{ item.label }}</div>
-          <div class="value-l">{{ `${item.value}%` }}</div>
+          <div class="value-l">{{ item.value }}</div>
         </div>
         <div class="item-r">
-          <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
-            <span>{{ `${items.label} : ` }}</span>
+          <div class="content-r" v-for="el in item.listR" :key="el.id">
+            <span>{{ `${el.label} : ` }}</span>
             <span
               :class="{
-                'status-f': items.value == 1,
-                'status-l': items.value == 0,
+                'status-f': el.value == 1,
+                'status-l': el.value == 0,
               }"
-              >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
             >
+              {{ el.value == 1 ? '异常' : el.value == 0 ? '正常' : el.value }}
+            </span>
           </div>
         </div>
       </div>
     </div>
     <div v-if="shown === 'chart'" class="chart-item">
-      <div v-for="(item, index) in charts" :key="`acmt${index}`">
-        <EchartLine3 style="height: 270px; width: 350px; margin: 0 5px" />
+      <div v-for="(item, index) in chartsConfig" :key="`acmt${index}`">
+        <EchartLine3
+          style="height: 300px; width: 400px; margin: 0 5px"
+          :x-data="item.x"
+          :y1-data="item.y1"
+          :y2-data="item.y2"
+          :y3-data="item.y3"
+          :y4-data="item.y4"
+        />
         <div class="text-center">
           {{ item.label }}
         </div>
@@ -46,17 +54,86 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import EchartLine3 from './echartLine3.vue';
   import BaseTab from '../../../gas/components/tab/baseTab.vue';
+  import moment from 'moment';
 
-  defineProps<{
+  const props = defineProps<{
     cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
-    charts: { label: string; data: { x: string; y: number }[] }[];
+    charts: { label: string; time: Date; data: [number, number, number, number] }[];
     title: string;
+    timeout?: number;
   }>();
 
   const shown = ref('default');
+  const chartsConfig = ref<
+    {
+      label: string;
+      /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
+      indexMark: number;
+      x: string[];
+      y1: number[];
+      y2: number[];
+      y3: number[];
+      y4: number[];
+    }[]
+  >([]);
+
+  watch(
+    () => props.charts,
+    () => {
+      const arr = new Array(20).fill(0);
+      props.charts.forEach((el, i) => {
+        if (chartsConfig.value[i]) {
+          // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
+          // 那么应该按先进后出的队列模式更新数据了
+          const val = chartsConfig.value[i];
+          if (val.indexMark === 20) {
+            val.x.shift();
+            val.y1.shift();
+            val.y2.shift();
+            val.y3.shift();
+            val.y4.shift();
+            val.indexMark = 19;
+          }
+          val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
+          val.y1[val.indexMark] = el.data[0];
+          val.y2[val.indexMark] = el.data[1];
+          val.y3[val.indexMark] = el.data[2];
+          val.y4[val.indexMark] = el.data[3];
+          // 指针向后移动1
+          val.indexMark += 1;
+        } else {
+          // 更新配置
+          // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
+          const startFrom = moment(el.time);
+          chartsConfig.value[i] = {
+            label: el.label,
+            indexMark: 1,
+            x: arr.map(() => {
+              const str = startFrom.format('HH:mm:ss');
+              startFrom.add(props.timeout || 3000);
+              return str;
+            }),
+            y1: arr.map(() => {
+              return el.data[0];
+            }),
+            y2: arr.map(() => {
+              return el.data[1];
+            }),
+            y3: arr.map(() => {
+              return el.data[2];
+            }),
+            y4: arr.map(() => {
+              return el.data[3];
+            }),
+          };
+        }
+      });
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 <style lang="less">
   @import '/@/design/theme.less';

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

@@ -61,6 +61,7 @@
   import CustomHeader from '/@/components/vent/customHeader.vue';
   import { usePermission } from '/@/hooks/web/usePermission';
   import MeasurePoint from '../common/measurePoint.vue';
+  import moment from 'moment';
 
   const { hasPermission } = usePermission();
   const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
@@ -98,7 +99,7 @@
     right: '5%',
     containLabel: true,
   });
-  let cardListTf = reactive<any[]>([]);
+  const cardListTf = reactive<any[]>([]);
   const chartListTf = reactive<any[]>([]);
   let router = useRouter();
   let echartNow = ref<any[]>([]);
@@ -181,6 +182,7 @@
     sysWarn({ sysid: id, type: type }).then((res) => {
       // listData.common = res;
       topAreaList.length = 0;
+      chartListTf.length = 0;
 
       if (JSON.stringify(res) != '{}') {
         res.dust.forEach((el) => {
@@ -193,6 +195,13 @@
               { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
             ],
           });
+
+          // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
+          chartListTf.push({
+            label: el.strinstallpos,
+            time: new Date(),
+            data: [moment().format('ss'), 15, 5, 10],
+          });
         });
         choiceData = res.dust;
 
@@ -287,10 +296,10 @@
       }
     });
   }
+
   //获取粉尘监控测点信息
   async function getWindDeviceList() {
     cardListTf.length = 0;
-    chartListTf.length = 0;
     let res = await getDevice({ devicetype: 'dusting', pagetype: 'normal' });
     if (res && res.msgTxt[0]) {
       let list = res.msgTxt[0].datalist || [];
@@ -319,10 +328,6 @@
               },
             ],
           });
-          chartListTf.push({
-            label: el.strinstallpos,
-            data: [],
-          });
         });
       }
     }

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

@@ -76,7 +76,7 @@
         </div>
 
         <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
-          <MeasurePoint title="安全监控测点信息" :cards="cardListWs" :charts="chartListWs" />
+          <MeasurePoint title="安全监控测点信息" :timeout="1000" :cards="cardListWs" :charts="chartListWs" />
         </div>
       </div>
       <div style="width: 100%; height: 100%" v-else-if="isShow == 'yjzb'">
@@ -101,6 +101,7 @@
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useGlobSetting } from '/@/hooks/setting';
   import MeasurePoint from '../common/measurePoint.vue';
+  import moment from 'moment';
 
   let typeMenuListGas = getMonitorComponent();
   const { sysOrgCode } = useGlobSetting();
@@ -173,7 +174,7 @@
           el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
           cardListWs.push({
             label: '甲烷',
-            value: el.readData.gasC || '--',
+            value: el.readData.gasC + '%' || '--',
             // value: 0,
             listR: [
               { id: 0, label: '测点类型', value: '瓦斯' },
@@ -183,9 +184,11 @@
               { id: 3, label: '测点状态', value: el.warnFlag },
             ],
           });
+          // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
           chartListWs.push({
             label: el.strinstallpos,
-            data: [],
+            time: new Date(),
+            data: [moment().format('ss'), 15, 5, 10],
           });
         });
       }

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

@@ -58,7 +58,7 @@
     </div>
     <div class="ventilate-bottom">
       <div class="bot-area">
-        <MeasurePoint title="通风监控测点信息" :cards="cardListTf" :charts="chartListTf" />
+        <MeasurePoint title="通风监控测点信息" :timeout="1000" :cards="cardListTf" :charts="chartListTf" />
       </div>
     </div>
   </div>
@@ -74,6 +74,7 @@
   import echartLine from '../common/echartLine.vue';
   import { usePermission } from '/@/hooks/web/usePermission';
   import MeasurePoint from '../common/measurePoint.vue';
+  import moment from 'moment';
 
   const { hasPermission } = usePermission();
   const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
@@ -124,7 +125,6 @@
   //获取左侧数据列表
   async function getMenuList() {
     let res = await sysTypeWarnList({ type: 'vent' });
-    console.log(res, '通风预警监测左侧列表数据-------------');
     if (res.length != 0) {
       menuList.length = 0;
       res.forEach((el) => {
@@ -151,12 +151,22 @@
       echartDataFc1.minData.data.length = 0;
       echartDataFc1.aveValue.data.length = 0;
       echartDataFc1.xData.length = 0;
+      chartListTf.length = 0;
       if (JSON.stringify(res) != '{}') {
         ventilateTopList[0].value = res.jin || '--';
         ventilateTopList[1].value = res.hui || '--';
         ventilateTopList[2].value = res.xufengliang || '--';
         ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';
 
+        res.vent.forEach((el) => {
+          // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
+          chartListTf.push({
+            label: el.strinstallpos,
+            time: new Date(),
+            data: [moment().format('ss'), 15, 5, 10],
+          });
+        });
+
         if (res.history.length != 0) {
           res.history.forEach((v) => {
             echartDataFc1.maxData.data.push(parseFloat(v.jin));
@@ -199,7 +209,6 @@
   //获取通风监控测点信息
   async function getWindDeviceList() {
     cardListTf.length = 0;
-    chartListTf.length = 0;
     let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' });
     if (res && res.msgTxt[0]) {
       let list = res.msgTxt[0].datalist || [];
@@ -223,10 +232,6 @@
               },
             ],
           });
-          chartListTf.push({
-            label: el.strinstallpos,
-            data: [],
-          });
         });
       }
     }

src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.ts

@@ -22,7 +22,6 @@ const mouseEvent = (event) => {
         // gasPumpBaseObj.mousedownModel.call(gasPumpBaseObj, intersects);
       }
     });
-    console.log('摄像头控制信息', model?.orbitControls, model?.camera);
   }
 };
 

src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.under.ts

@@ -1,6 +1,10 @@
 import * as THREE from 'three';
 import { CSS3DObject, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 import { modelMonitorTags } from './gasPump.data';
+import ArrowFlow from '../../comment/threejs/ArrowFlow';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 
 class gasPumpUnder {
   model;
@@ -113,6 +117,7 @@ class gasPumpUnder {
           this.initAnimate();
           resolve(null);
           this.addLight();
+          this.addFlows();
         }
       });
     });
@@ -123,5 +128,29 @@ class gasPumpUnder {
     this.model = null;
     this.group = null;
   }
+
+  // 添加箭头流线
+  addFlows() {
+    const arrowflow = new ArrowFlow('/model/img/blueArrow.png', new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-3.909, 0.942, -0.359));
+    // const t = new THREE.TextureLoader().load('/model/img/blueArrow.png');
+    // t.wrapS = THREE.RepeatWrapping;
+    // t.wrapT = THREE.RepeatWrapping;
+    // t.repeat = new THREE.Vector2(10, 1);
+    // t.offset = new THREE.Vector2(0, 0.5);
+    // const b = new THREE.MeshBasicMaterial({ map: t, transparent: true });
+    // const path = new THREE.LineCurve3(new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-3.909, 0.942, -0.359));
+
+    // const a = this.group?.getObjectByName('dian');
+    // const b = this.group?.getObjectByName('dian1');
+    // a?.getWorldPosition(origin);
+    // b?.getWorldPosition(dest);
+
+    const geometry = new THREE.TubeGeometry(arrowflow.path, 1, 0.08, 8, false);
+    const mesh = new THREE.Mesh(geometry, arrowflow);
+
+    arrowflow.startAnimation();
+    mesh.name = 'flow1';
+    this.group?.add(mesh);
+  }
 }
 export default gasPumpUnder;

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

@@ -29,11 +29,11 @@
                   <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                   <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                 </template>
-                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
-                  {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                <a-tag v-if="column.dataIndex === 'exceptionType_str'" :color="record.exceptionType_str == '正常' ? 'green' : '#f00'">
+                  {{ record.exceptionType_str == '正常' ? '正常' : '异常' }}</a-tag
                 >
-                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
-                  record.netStatus == '0' ? '断开' : '连接'
+                <a-tag v-if="column.dataIndex === 'netStatus_str'" :color="record.netStatus_str == '正常' ? 'green' : '#f00'">{{
+                  record.netStatus_str == '正常' ? '正常' : '异常'
                 }}</a-tag>
               </template>
             </MonitorTable>
@@ -62,11 +62,11 @@
                   <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                   <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                 </template>
-                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
-                  {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                <a-tag v-if="column.dataIndex === 'exceptionType_str'" :color="record.exceptionType_str == '正常' ? 'green' : '#f00'">
+                  {{ record.exceptionType_str == '正常' ? '正常' : '异常' }}</a-tag
                 >
-                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
-                  record.netStatus == '0' ? '断开' : '连接'
+                <a-tag v-if="column.dataIndex === 'netStatus_str'" :color="record.netStatus_str == '正常' ? 'green' : '#f00'">{{
+                  record.netStatus_str == '正常' ? '正常' : '异常'
                 }}</a-tag>
               </template>
             </MonitorTable>
@@ -185,466 +185,466 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, inject, unref } from 'vue';
-  import { list, getDeviceList, safetyList, getExportUrl, subStationList, initSubStation } from './safety.api';
-  import AlarmHistoryCommentTable from '../comment/AlarmHistoryTable.vue';
-  import AlarmHistoryTable from './AlarmHistoryTable.vue';
-  import HistoryTable from './HistoryTable.vue';
-  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-  import MonitorTable from '../comment/MonitorTable.vue';
-  import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
-  import { useRouter } from 'vue-router';
-  import { formConfig, isHaveNoAction } from './safety.data';
-  import { getDictItemsByCode } from '/@/utils/dict';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { useMethods } from '/@/hooks/system/useMethods';
-  import { message } from 'ant-design-vue';
-
-  const { sysOrgCode } = useGlobSetting();
-  const { hasPermission } = usePermission();
-  const globalConfig = inject('globalConfig');
-
-  const { handleExportXls } = useMethods();
-
-  // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-
-  // const echartsOption = {
-  //   grid: {
-  //     top: '60px',
-  //     left: '10px',
-  //     right: '25px',
-  //     bottom: '5%',
-  //     containLabel: true,
-  //   },
-  //   toolbox: {
-  //     feature: {},
-  //   },
-  // };
-  // let alive = ref(true)
-
-  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
-
-  const props = defineProps({
-    pageData: {
-      type: Object,
-      default: () => {},
-    },
-  });
-
-  const scroll = {
-    y: 360,
-  };
-  const defSort = {
-    column: 'strinstallpos',
-    order: 'desc',
-  };
-  const monitorTable = ref();
-  const historyTable = ref();
-  const alarmHistoryTable = ref();
-  const handlerHistoryTable = ref();
-
-  const isRefresh = ref(true);
-
-  const activeKey = ref('1'); // tab key
-  const dataSource = shallowRef([]); // 实时监测数据
-  const deviceType = ref(''); // 监测设备类型
-  const subStation = ref('');
-  const subStationOptions = ref([]);
-  // let dataSourceHis = shallowRef([])//历史数据
-
-  //历史数据
-  async function changeHis(data) {
-    // alive.value = false
-    // nextTick(() => {
-    //   dataSourceHis = data
-    //   alive.value = true
-    // })
-  }
-
-  async function tabChange(activeKeyVal) {
-    activeKey.value = activeKeyVal;
-    if (activeKey.value != '1') {
-      if (timer != undefined) {
-        clearTimeout(timer);
-        timer = undefined;
-      }
-    } else {
-      timer = null;
-      await getMonitor(true);
+import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, inject, unref } from 'vue';
+import { list, getDeviceList, safetyList, getExportUrl, subStationList, initSubStation } from './safety.api';
+import AlarmHistoryCommentTable from '../comment/AlarmHistoryTable.vue';
+import AlarmHistoryTable from './AlarmHistoryTable.vue';
+import HistoryTable from './HistoryTable.vue';
+import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+import MonitorTable from '../comment/MonitorTable.vue';
+import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
+import { useRouter } from 'vue-router';
+import { formConfig, isHaveNoAction } from './safety.data';
+import { getDictItemsByCode } from '/@/utils/dict';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useMethods } from '/@/hooks/system/useMethods';
+import { message } from 'ant-design-vue';
+
+const { sysOrgCode } = useGlobSetting();
+const { hasPermission } = usePermission();
+const globalConfig = inject('globalConfig');
+
+const { handleExportXls } = useMethods();
+
+// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+
+// const echartsOption = {
+//   grid: {
+//     top: '60px',
+//     left: '10px',
+//     right: '25px',
+//     bottom: '5%',
+//     containLabel: true,
+//   },
+//   toolbox: {
+//     feature: {},
+//   },
+// };
+// let alive = ref(true)
+
+type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+const props = defineProps({
+  pageData: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const scroll = {
+  y: 360,
+};
+const defSort = {
+  column: 'strinstallpos',
+  order: 'desc',
+};
+const monitorTable = ref();
+const historyTable = ref();
+const alarmHistoryTable = ref();
+const handlerHistoryTable = ref();
+
+const isRefresh = ref(true);
+
+const activeKey = ref('1'); // tab key
+const dataSource = shallowRef([]); // 实时监测数据
+const deviceType = ref(''); // 监测设备类型
+const subStation = ref('');
+const subStationOptions = ref([]);
+// let dataSourceHis = shallowRef([])//历史数据
+
+//历史数据
+async function changeHis(data) {
+  // alive.value = false
+  // nextTick(() => {
+  //   dataSourceHis = data
+  //   alive.value = true
+  // })
+}
+
+async function tabChange(activeKeyVal) {
+  activeKey.value = activeKeyVal;
+  if (activeKey.value != '1') {
+    if (timer != undefined) {
+      clearTimeout(timer);
+      timer = undefined;
     }
+  } else {
+    timer = null;
+    await getMonitor(true);
   }
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(flag?) {
-    if (deviceType.value) {
-      if (timer) timer = null;
-      if (Object.prototype.toString.call(timer) === '[object Null]') {
-        timer = setTimeout(
-          async () => {
-            await getDataSource();
-            if (timer) {
-              getMonitor();
-            }
-          },
-          flag ? 0 : 1000
-        );
-      }
+}
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag?) {
+  if (deviceType.value) {
+    if (timer) timer = null;
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          await getDataSource();
+          if (timer) {
+            getMonitor();
+          }
+        },
+        flag ? 0 : 1000
+      );
     }
   }
-
-  async function getDataSource() {
-    const formData = monitorTable.value.getForm();
-    const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } });
-    if (res.msgTxt.length > 0) {
-      dataSource.value = [];
-      let dataArr = res.msgTxt[0].datalist || [];
-      dataArr.filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      });
-      if (deviceType.value == 'safetymonitor') {
-        // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
-        let dictCodes = getDictItemsByCode('safetynormal');
-        console.log(dictCodes, '111-----------');
-        const searchForm = formData.getFieldsValue();
-
-        if (searchForm && searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
-          console.log(searchForm, '000---------');
-          const tempData = [];
-          const tempData1 = [];
-          for (let i = 0; i < dataArr.length; i++) {
-            const item = dataArr[i];
-            let flag = false;
-            for (let i = 0; i < dictCodes.length; i++) {
-              const dict = dictCodes[i];
-              if (dict['value'] == item['dataTypeName']) {
-                flag = true;
-              }
-            }
-            if (flag) {
-              tempData.push(item);
-            } else {
-              tempData1.push(item);
+}
+
+async function getDataSource() {
+  const formData = monitorTable.value.getForm();
+  const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } });
+  if (res.msgTxt.length > 0) {
+    dataSource.value = [];
+    let dataArr = res.msgTxt[0].datalist || [];
+    dataArr.filter((data: any) => {
+      const readData = data.readData;
+      return Object.assign(data, readData);
+    });
+    if (deviceType.value == 'safetymonitor') {
+      // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
+      let dictCodes = getDictItemsByCode('safetynormal');
+      console.log(dictCodes, '111-----------');
+      const searchForm = formData.getFieldsValue();
+
+      if (searchForm && searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
+        console.log(searchForm, '000---------');
+        const tempData = [];
+        const tempData1 = [];
+        for (let i = 0; i < dataArr.length; i++) {
+          const item = dataArr[i];
+          let flag = false;
+          for (let i = 0; i < dictCodes.length; i++) {
+            const dict = dictCodes[i];
+            if (dict['value'] == item['dataTypeName']) {
+              flag = true;
             }
           }
-          if (sysOrgCode == 'zjtzqctmk' || hasPermission('btn:noGb')) {
-            dataSource.value = [...tempData, ...tempData1];
+          if (flag) {
+            tempData.push(item);
           } else {
-            dataSource.value = [...tempData];
+            tempData1.push(item);
           }
+        }
+        if (sysOrgCode == 'zjtzqctmk' || hasPermission('btn:noGb')) {
+          dataSource.value = [...tempData, ...tempData1];
         } else {
-          dataSource.value = dataArr;
+          dataSource.value = [...tempData];
         }
       } else {
         dataSource.value = dataArr;
       }
     } else {
-      dataSource.value = [];
+      dataSource.value = dataArr;
     }
+  } else {
+    dataSource.value = [];
   }
+}
 
-  async function getSubstation() {
-    const list: [] = await subStationList({ monitorparam: 'safetymonitor*' });
-    subStationOptions.value = list;
-    if (list.length > 0) {
-      subStation.value = list[0]['id'];
-    }
+async function getSubstation() {
+  const list: [] = await subStationList({ monitorparam: 'safetymonitor*' });
+  subStationOptions.value = list;
+  if (list.length > 0) {
+    subStation.value = list[0]['id'];
   }
-  function exportData() {
-    handleExportXls('安全监控导出', getExportUrl);
+}
+function exportData() {
+  handleExportXls('安全监控导出', getExportUrl);
+}
+
+function updateSubstation() {
+  if (subStation.value) {
+    initSubStation({ substationID: subStation.value }).then(() => {
+      message.success('分站同步完成！');
+    });
+  } else {
+    message.warning('请选择分站！');
   }
-
-  function updateSubstation() {
-    if (subStation.value) {
-      initSubStation({ substationID: subStation.value }).then(() => {
-        message.success('分站同步完成！');
-      });
-    } else {
-      message.warning('请选择分站！');
+}
+
+onMounted(async () => {
+  const { currentRoute } = useRouter();
+  if (unref(currentRoute)) {
+    const path = unref(currentRoute).path;
+    if (path) {
+      deviceType.value = path.substring(path.lastIndexOf('/') + 1);
     }
+    await getMonitor(true);
+    await getSubstation();
   }
+});
 
-  onMounted(async () => {
-    const { currentRoute } = useRouter();
-    if (unref(currentRoute)) {
-      const path = unref(currentRoute).path;
-      if (path) {
-        deviceType.value = path.substring(path.lastIndexOf('/') + 1);
-      }
-      await getMonitor(true);
-      await getSubstation();
-    }
-  });
-
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-    timer = undefined;
-  });
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = undefined;
+});
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '/@/design/vent/modal.less';
-  @ventSpace: zxm;
+@import '/@/design/theme.less';
+@import '/@/design/vent/modal.less';
+@ventSpace: zxm;
+
+.device-box {
+  width: 100%;
+  height: calc(100% - 100px);
+  padding-bottom: 10px;
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+
+  .tabs-box {
+    width: calc(100% - 12px) !important;
+    height: 100% !important;
+    bottom: 3px !important;
+  }
 
-  .device-box {
-    width: 100%;
-    height: calc(100% - 100px);
-    padding-bottom: 10px;
-    margin-top: 20px;
+  .device-button-group {
+    position: absolute;
+    top: -30px;
     display: flex;
-    justify-content: center;
-
-    .tabs-box {
-      width: calc(100% - 12px) !important;
-      height: 100% !important;
-      bottom: 3px !important;
-    }
+    width: 100%;
 
-    .device-button-group {
-      position: absolute;
-      top: -30px;
+    .device-button {
+      height: 26px;
+      padding: 0 20px;
+      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
+      clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
       display: flex;
-      width: 100%;
-
-      .device-button {
-        height: 26px;
-        padding: 0 20px;
-        background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #fff;
-        position: relative;
-        cursor: pointer;
-
-        &:nth-child(1) {
-          left: calc(-6px * 1);
-        }
-
-        &:nth-child(2) {
-          left: calc(-6px * 2);
-        }
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      position: relative;
+      cursor: pointer;
 
-        &:nth-child(3) {
-          left: calc(-6px * 3);
-        }
+      &:nth-child(1) {
+        left: calc(-6px * 1);
+      }
 
-        &:nth-child(4) {
-          left: calc(-6px * 4);
-        }
+      &:nth-child(2) {
+        left: calc(-6px * 2);
+      }
 
-        &:nth-child(5) {
-          left: calc(-6px * 5);
-        }
+      &:nth-child(3) {
+        left: calc(-6px * 3);
+      }
 
-        &:nth-child(6) {
-          left: calc(-6px * 6);
-        }
+      &:nth-child(4) {
+        left: calc(-6px * 4);
+      }
 
-        &:nth-child(7) {
-          left: calc(-6px * 7);
-        }
+      &:nth-child(5) {
+        left: calc(-6px * 5);
+      }
 
-        &:nth-child(8) {
-          left: calc(-6px * 8);
-        }
+      &:nth-child(6) {
+        left: calc(-6px * 6);
+      }
 
-        &:nth-child(9) {
-          left: calc(-6px * 9);
-        }
+      &:nth-child(7) {
+        left: calc(-6px * 7);
+      }
 
-        &:nth-child(10) {
-          left: calc(-6px * 10);
-        }
+      &:nth-child(8) {
+        left: calc(-6px * 8);
+      }
 
-        &:nth-child(11) {
-          left: calc(-6px * 11);
-        }
+      &:nth-child(9) {
+        left: calc(-6px * 9);
+      }
 
-        &:nth-child(12) {
-          left: calc(-6px * 12);
-        }
+      &:nth-child(10) {
+        left: calc(-6px * 10);
+      }
 
-        &:nth-child(13) {
-          left: calc(-6px * 13);
-        }
+      &:nth-child(11) {
+        left: calc(-6px * 11);
+      }
 
-        &:nth-child(14) {
-          left: calc(-6px * 14);
-        }
+      &:nth-child(12) {
+        left: calc(-6px * 12);
+      }
 
-        &:nth-child(15) {
-          left: calc(-6px * 15);
-        }
+      &:nth-child(13) {
+        left: calc(-6px * 13);
+      }
 
-        &:first-child {
-          clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
-        }
+      &:nth-child(14) {
+        left: calc(-6px * 14);
       }
 
-      .device-active {
-        background: linear-gradient(45deg, #04e6fb, #0c5cab);
+      &:nth-child(15) {
+        left: calc(-6px * 15);
+      }
 
-        &::before {
-          border-color: #0efcff;
-          box-shadow: 1px 1px 3px 1px #0efcff inset;
-        }
+      &:first-child {
+        clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
       }
     }
 
-    .enter-detail {
-      color: #fff;
-      cursor: pointer;
-      position: absolute;
-      right: 120px;
-      top: -6px;
-      padding: 5px;
-      border-radius: 5px;
-      margin-left: 8px;
-      margin-right: 8px;
-      width: auto;
-      height: 33px !important;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #fff;
-      padding: 5px 15px 5px 15px;
-      cursor: pointer;
-
-      &:hover {
-        background: var(--vent-modal-bg2);
-      }
+    .device-active {
+      background: linear-gradient(45deg, #04e6fb, #0c5cab);
 
       &::before {
-        width: calc(100% - 6px);
-        height: 27px;
-        content: '';
-        position: absolute;
-        top: 3px;
-        right: 0;
-        left: 3px;
-        bottom: 0;
-        z-index: -1;
-        border-radius: inherit;
-        /*important*/
-        background: linear-gradient(#1fa6cb, #127cb5);
+        border-color: #0efcff;
+        box-shadow: 1px 1px 3px 1px #0efcff inset;
       }
     }
   }
-  .right-btn-group {
-    position: absolute;
+
+  .enter-detail {
     color: #fff;
-    right: 20px;
+    cursor: pointer;
+    position: absolute;
+    right: 120px;
+    top: -6px;
+    padding: 5px;
+    border-radius: 5px;
+    margin-left: 8px;
+    margin-right: 8px;
+    width: auto;
+    height: 33px !important;
     display: flex;
-    .export-btn {
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    padding: 5px 15px 5px 15px;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--vent-modal-bg2);
     }
-    .update-btn {
-      margin-right: 10px;
-      display: flex;
-      align-items: center;
-      .btn {
-        background: var(--vent-modal-bg2);
-      }
+
+    &::before {
+      width: calc(100% - 6px);
+      height: 27px;
+      content: '';
+      position: absolute;
+      top: 3px;
+      right: 0;
+      left: 3px;
+      bottom: 0;
+      z-index: -1;
+      border-radius: inherit;
+      /*important*/
+      background: linear-gradient(#1fa6cb, #127cb5);
     }
+  }
+}
+.right-btn-group {
+  position: absolute;
+  color: #fff;
+  right: 20px;
+  display: flex;
+  .export-btn {
+  }
+  .update-btn {
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
     .btn {
-      padding: 8px 20px;
-      position: relative;
-      border-radius: 2px;
-      color: #fff;
-      width: fit-content;
-      cursor: pointer;
+      background: var(--vent-modal-bg2);
+    }
+  }
+  .btn {
+    padding: 8px 20px;
+    position: relative;
+    border-radius: 2px;
+    color: #fff;
+    width: fit-content;
+    cursor: pointer;
 
-      &::before {
-        position: absolute;
-        display: block;
-        content: '';
-        width: calc(100% - 4px);
-        height: calc(100% - 4px);
-        top: 2px;
-        left: 2px;
-        border-radius: 2px;
-        z-index: -1;
-      }
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+      top: 2px;
+      left: 2px;
+      border-radius: 2px;
+      z-index: -1;
     }
+  }
 
-    .btn1 {
-      border: 1px solid var(--vent-btn-primary-border-color);
+  .btn1 {
+    border: 1px solid var(--vent-btn-primary-border-color);
 
-      &::before {
-        background-image: linear-gradient(#2effee92, #0cb1d592);
-      }
+    &::before {
+      background-image: linear-gradient(#2effee92, #0cb1d592);
+    }
 
-      &:hover {
-        border: 1px solid #5cfaffaa;
+    &:hover {
+      border: 1px solid #5cfaffaa;
 
-        &::before {
-          background-image: linear-gradient(#2effee72, #0cb1d572);
-        }
+      &::before {
+        background-image: linear-gradient(#2effee72, #0cb1d572);
       }
     }
   }
-
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    height: 100%;
-    border: 1px solid var(--vent-device-manager-box-border);
-    border-radius: 2px;
-    -webkit-backdrop-filter: blur(8px);
-    box-shadow: 0 0 20px #44b4ff33 inset;
-    background-color: var(--vent-device-manager-box-bg);
-    overflow-y: auto;
+}
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  height: 100%;
+  border: 1px solid var(--vent-device-manager-box-border);
+  border-radius: 2px;
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: 0 0 20px #44b4ff33 inset;
+  background-color: var(--vent-device-manager-box-bg);
+  overflow-y: auto;
+}
+
+:deep(.@{ventSpace}-tabs-card) {
+  .@{ventSpace}-tabs-tab {
+    background: var(--vent-modal-bg2);
+    border-color: var(--vent-btn-primary-border-color);
+    border-radius: 0%;
+
+    &:hover {
+      color: #64d5ff;
+    }
   }
 
-  :deep(.@{ventSpace}-tabs-card) {
-    .@{ventSpace}-tabs-tab {
-      background: var(--vent-modal-bg2);
-      border-color: var(--vent-btn-primary-border-color);
-      border-radius: 0%;
+  .@{ventSpace}-tabs-content {
+    height: 100% !important;
+  }
 
-      &:hover {
-        color: #64d5ff;
-      }
-    }
+  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+    color: var(--vent-font-action-link);
+  }
 
-    .@{ventSpace}-tabs-content {
-      height: 100% !important;
-    }
+  .@{ventSpace}-tabs-nav::before {
+    border-color: var(--vent-btn-primary-border-color);
+  }
 
-    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-      color: var(--vent-font-action-link);
-    }
+  .@{ventSpace}-picker,
+  .@{ventSpace}-select-selector {
+    width: 100% !important;
+    background: #00000017 !important;
+    border: 1px solid @vent-form-item-border !important;
 
-    .@{ventSpace}-tabs-nav::before {
-      border-color: var(--vent-btn-primary-border-color);
+    input,
+    .@{ventSpace}-select-selection-item,
+    .@{ventSpace}-picker-suffix {
+      color: #fff !important;
     }
 
-    .@{ventSpace}-picker,
-    .@{ventSpace}-select-selector {
-      width: 100% !important;
-      background: #00000017 !important;
-      border: 1px solid @vent-form-item-border !important;
-
-      input,
-      .@{ventSpace}-select-selection-item,
-      .@{ventSpace}-picker-suffix {
-        color: #fff !important;
-      }
-
-      .@{ventSpace}-select-selection-placeholder {
-        color: #b7b7b7 !important;
-      }
+    .@{ventSpace}-select-selection-placeholder {
+      color: #b7b7b7 !important;
     }
+  }
 
-    .@{ventSpace}-pagination-next,
-    .action,
-    .@{ventSpace}-select-arrow,
-    .@{ventSpace}-picker-separator {
-      color: #fff !important;
-    }
+  .@{ventSpace}-pagination-next,
+  .action,
+  .@{ventSpace}-select-arrow,
+  .@{ventSpace}-picker-separator {
+    color: #fff !important;
   }
+}
 </style>

src/views/vent/monitorManager/workFaceMonitor/workFaceGas.threejs.base.ts

@@ -0,0 +1,292 @@
+import * as THREE from 'three';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
+import { setModalCenter } from '/@/utils/threejs/util';
+
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class WorkFaceGas {
+  model;
+  modelName = 'workFaceGas';
+  group: THREE.Object3D = new THREE.Object3D();
+  planeGroup: THREE.Group = new THREE.Group();
+  bloomComposer: EffectComposer | null = null;
+  finalComposer: EffectComposer | null = null;
+  outlinePass: OutlinePass | null = null;
+  positions: THREE.Vector3[][] = [];
+  bloomLayer = new THREE.Layers();
+  darkMaterial = new THREE.MeshBasicMaterial({ color: 'black', transparent: true, side: THREE.DoubleSide });
+  materials = {};
+  glob = {
+    ENTIRE_SCENE: 0,
+    BLOOM_SCENE: 10,
+    N: 100,
+  };
+  locationTexture: THREE.Texture | null = null;
+  warningLocationTexture: THREE.Texture | null = null;
+  errorLocationTexture: THREE.Texture | null = null;
+  playerStartClickTime1 = new Date().getTime();
+  playerStartClickTime2 = new Date().getTime();
+  planeNum = 0;
+
+  constructor(model) {
+    this.model = model;
+    this.group.name = this.modelName;
+  }
+  addLight() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(-196, 150, 258);
+    this.group.add(directionalLight);
+    directionalLight.target = this.group;
+  }
+  setControls = () => {
+    if (this.model && this.model.orbitControls) {
+      this.model.orbitControls.panSpeed = 0.5;
+      this.model.orbitControls.rotateSpeed = 0.5;
+      this.model.orbitControls.maxPolarAngle = Math.PI / 3;
+      this.model.orbitControls.minPolarAngle = Math.PI / 4;
+      this.model.orbitControls.minAzimuthAngle = -Math.PI / 3;
+      this.model.orbitControls.maxAzimuthAngle = Math.PI / 4;
+    }
+  };
+
+  render() {
+    this.model.renderer?.render(this.model.scene as THREE.Scene, this.model.camera as THREE.PerspectiveCamera);
+  }
+
+  /* 点击 */
+  mousedownModel(rayCaster: THREE.Raycaster) {
+    const opticalFiber = this.group.getObjectByName('opticalfiber');
+    if (opticalFiber) {
+      const intersects = rayCaster?.intersectObjects([...opticalFiber.children]) as THREE.Intersection[];
+
+      // 判断是否点击到视频
+      intersects.find((intersect) => {
+        const mesh = intersect.object;
+        if (mesh.name.startsWith('optical_fiber_')) {
+          // outlinePass?.selectedObjects.push(mesh);
+          return true;
+        }
+
+        return false;
+      });
+    }
+    this.render();
+  }
+
+  mouseUpModel() {
+    //
+  }
+
+  setThreePlane() {
+    const gltfModal = this.group.getObjectByName('workFace');
+    const PouMian01 = gltfModal?.getObjectByName('WaSiPouMian01');
+    const DiXing = PouMian01?.getObjectByName('DiXing');
+    // 绘制采空区三带
+    // new THREE.Vector3(934.695, -141.85, -365.375),
+    // new THREE.Vector3(934.695, 623.933, -365.375),
+    //-365.355
+    const material1 = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: true });
+    const offeset = 10;
+    const yellowLen = offeset * 8;
+    // 红=》红
+    const curveRed = new THREE.CatmullRomCurve3([new THREE.Vector3(-477.721, -141.83, -365.375), new THREE.Vector3(-477.721, 623.933, -365.375)]);
+    const curve0 = new THREE.CatmullRomCurve3([
+      new THREE.Vector3(-231.811 - 150, -141.83, -365.375),
+      new THREE.Vector3(-121.899 - 150, 67.201, -365.375),
+      new THREE.Vector3(-242.441 - 150, 408.812, -365.375),
+      new THREE.Vector3(-179.811 - 150, 620.836, -365.375),
+    ]);
+    const pointsRed = curveRed.getPoints(80);
+    const points0 = curve0.getPoints(80);
+    const newPointRed: number[] = [];
+    const normalsRed: number[] = [];
+    const colorsRed: number[] = [];
+    for (let i = 0; i < 80; i++) {
+      newPointRed.push(pointsRed[i].x, pointsRed[i].y, pointsRed[i].z);
+      newPointRed.push(points0[i].x, points0[i].y, points0[i].z);
+      newPointRed.push(points0[i + 1].x, points0[i + 1].y, points0[i + 1].z);
+      newPointRed.push(points0[i + 1].x, points0[i + 1].y, points0[i + 1].z);
+      newPointRed.push(pointsRed[i + 1].x, pointsRed[i + 1].y, pointsRed[i + 1].z);
+      newPointRed.push(pointsRed[i].x, pointsRed[i].y, pointsRed[i].z);
+      normalsRed.push(0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
+      colorsRed.push(1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0);
+    }
+    const geometryRed = new THREE.BufferGeometry();
+    geometryRed.setAttribute('position', new THREE.BufferAttribute(new Float32Array(newPointRed), 3));
+    geometryRed.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normalsRed), 3));
+    geometryRed.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colorsRed), 3));
+    const meshRed = new THREE.Mesh(geometryRed, material1);
+    meshRed.position.setZ(-1);
+    DiXing?.add(meshRed);
+
+    // 红=》黄
+
+    const curve1 = new THREE.CatmullRomCurve3([
+      new THREE.Vector3(-231.811 - yellowLen, -141.83, -365.375),
+      new THREE.Vector3(-121.899 - yellowLen, 67.201, -365.375),
+      new THREE.Vector3(-242.441 - yellowLen, 408.812, -365.375),
+      new THREE.Vector3(-179.811 - yellowLen, 620.836, -365.375),
+    ]);
+
+    const points1 = curve1.getPoints(80);
+    const newPoints0: number[] = [];
+    const normals0: number[] = [];
+    const colors0: number[] = [];
+    for (let i = 0; i < 80; i++) {
+      newPoints0.push(points0[i].x, points0[i].y, points0[i].z);
+      newPoints0.push(points1[i].x, points1[i].y, points1[i].z);
+      newPoints0.push(points1[i + 1].x, points1[i + 1].y, points1[i + 1].z);
+      newPoints0.push(points1[i + 1].x, points1[i + 1].y, points1[i + 1].z);
+      newPoints0.push(points0[i + 1].x, points0[i + 1].y, points0[i + 1].z);
+      newPoints0.push(points0[i].x, points0[i].y, points0[i].z);
+      normals0.push(0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
+      colors0.push(1, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0);
+    }
+    const geometry0 = new THREE.BufferGeometry();
+    geometry0.setAttribute('position', new THREE.BufferAttribute(new Float32Array(newPoints0), 3));
+    geometry0.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals0), 3));
+    geometry0.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors0), 3));
+    geometry0.computeBoundingBox();
+
+    // const material1 = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, color: '#fff' });
+    const mesh0 = new THREE.Mesh(geometry0, material1);
+    mesh0.name = 'yellow';
+    mesh0.position.setZ(-1);
+    DiXing?.add(mesh0);
+    // 黄=》黄
+    const curveYellow1 = new THREE.CatmullRomCurve3([
+      new THREE.Vector3(784.664 - yellowLen, 623.933, -365.355),
+      new THREE.Vector3(167.212 - yellowLen, 450.517, -365.355),
+      new THREE.Vector3(7.587 - yellowLen, 262.225, -365.355),
+      new THREE.Vector3(426.499 - yellowLen, 31.416, -365.355),
+      new THREE.Vector3(261.665 - yellowLen, -139.495, -365.355),
+    ]);
+    const curveYellow2 = new THREE.CatmullRomCurve3([
+      new THREE.Vector3(-179.811 - yellowLen, 620.836, -365.375),
+      new THREE.Vector3(-242.441 - yellowLen, 408.812, -365.375),
+      new THREE.Vector3(-121.899 - yellowLen, 67.201, -365.375),
+      new THREE.Vector3(-231.811 - yellowLen, -141.83, -365.375),
+    ]);
+    const pointsYellow1 = curveYellow1.getPoints(80);
+    const pointsYellow2 = curveYellow2.getPoints(80);
+    const newPointYellow: number[] = [];
+    const normalsYellow: number[] = [];
+    const colorsYellow: number[] = [];
+    for (let i = 0; i < 80; i++) {
+      newPointYellow.push(pointsYellow1[i].x, pointsYellow1[i].y, pointsYellow1[i].z);
+      newPointYellow.push(pointsYellow2[i].x, pointsYellow2[i].y, pointsYellow2[i].z);
+      newPointYellow.push(pointsYellow2[i + 1].x, pointsYellow2[i + 1].y, pointsYellow2[i + 1].z);
+      newPointYellow.push(pointsYellow2[i + 1].x, pointsYellow2[i + 1].y, pointsYellow2[i + 1].z);
+      newPointYellow.push(pointsYellow1[i + 1].x, pointsYellow1[i + 1].y, pointsYellow1[i + 1].z);
+      newPointYellow.push(pointsYellow1[i].x, pointsYellow1[i].y, pointsYellow1[i].z);
+      normalsYellow.push(0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
+      colorsYellow.push(1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0);
+    }
+    const geometryYellow = new THREE.BufferGeometry();
+    geometryYellow.setAttribute('position', new THREE.BufferAttribute(new Float32Array(newPointYellow), 3));
+    geometryYellow.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normalsYellow), 3));
+    geometryYellow.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colorsYellow), 3));
+    const meshYellow = new THREE.Mesh(geometryYellow, material1);
+    meshYellow.position.setZ(-1);
+    DiXing?.add(meshYellow);
+
+    // 蓝 =》 蓝
+    const curve3 = new THREE.CatmullRomCurve3([
+      new THREE.Vector3(784.664, 623.933, -365.355),
+      new THREE.Vector3(167.212, 450.517, -365.355),
+      new THREE.Vector3(7.587, 262.225, -365.355),
+      new THREE.Vector3(426.499, 31.416, -365.355),
+      new THREE.Vector3(261.665, -139.495, -365.355),
+    ]);
+
+    const points = curve3.getPoints(80);
+    points.unshift(new THREE.Vector3(934.695, 623.933, -365.375));
+    points.unshift(new THREE.Vector3(934.695, -141.85, -365.375));
+    points.push(new THREE.Vector3(934.695, -141.85, -365.375));
+    const newPoints: THREE.Vector2[] = [];
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i];
+      newPoints.push(new THREE.Vector2(point.x, point.y));
+    }
+    const shape = new THREE.Shape(newPoints);
+    const geometry = new THREE.ShapeGeometry(shape);
+
+    const material = new THREE.MeshBasicMaterial({ side: THREE.BackSide, color: '#00F' });
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.setZ(-366.485);
+    DiXing?.add(mesh);
+
+    // 黄色-》蓝色
+    const curve2 = new THREE.CatmullRomCurve3([
+      new THREE.Vector3(784.664 - yellowLen, 623.933, -365.355),
+      new THREE.Vector3(167.212 - yellowLen, 450.517, -365.355),
+      new THREE.Vector3(7.587 - yellowLen, 262.225, -365.355),
+      new THREE.Vector3(426.499 - yellowLen, 31.416, -365.355),
+      new THREE.Vector3(261.665 - yellowLen, -139.495, -365.355),
+    ]);
+
+    const curve4 = new THREE.CatmullRomCurve3([
+      new THREE.Vector3(784.664, 623.933, -365.355),
+      new THREE.Vector3(167.212, 450.517, -365.355),
+      new THREE.Vector3(7.587, 262.225, -365.355),
+      new THREE.Vector3(426.499, 31.416, -365.355),
+      new THREE.Vector3(261.665, -139.495, -365.355),
+    ]);
+
+    const points2 = curve2.getPoints(80);
+    const points3 = curve4.getPoints(80);
+    const newPoints1: number[] = [];
+    const normals: number[] = [];
+    const colors: number[] = [];
+    for (let i = 0; i < 80; i++) {
+      newPoints1.push(points2[i].x, points2[i].y, points2[i].z);
+      newPoints1.push(points3[i].x, points3[i].y, points3[i].z);
+      newPoints1.push(points3[i + 1].x, points3[i + 1].y, points3[i + 1].z);
+      newPoints1.push(points3[i + 1].x, points3[i + 1].y, points3[i + 1].z);
+      newPoints1.push(points2[i + 1].x, points2[i + 1].y, points2[i + 1].z);
+      newPoints1.push(points2[i].x, points2[i].y, points2[i].z);
+      normals.push(0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
+      colors.push(1, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0);
+    }
+    const geometry1 = new THREE.BufferGeometry();
+    geometry1.setAttribute('position', new THREE.BufferAttribute(new Float32Array(newPoints1), 3));
+    geometry1.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));
+    geometry1.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
+    geometry1.computeBoundingBox();
+    const mesh1 = new THREE.Mesh(geometry1, material1);
+    mesh1.name = 'blue';
+    mesh1.position.setZ(-1);
+    DiXing?.add(mesh1);
+  }
+
+  mountedThree() {
+    return new Promise(async (resolve) => {
+      this.model.renderer.sortObjects = true;
+      this.model.orbitControls.update();
+      this.model.setGLTFModel('workFace').then(async (gltf) => {
+        const gltfModal = gltf[0];
+        this.group = gltfModal;
+        this.group.name = this.modelName;
+        setModalCenter(this.group);
+        this.group.scale.set(2.5, 2.5, 2.5);
+        this.addLight();
+        this.setThreePlane();
+        this.setControls();
+        resolve(null);
+      });
+    });
+  }
+
+  destroy() {
+    this.model.clearGroup(this.group);
+    this.model = null;
+    this.group = null;
+    this.bloomComposer?.dispose();
+    this.finalComposer?.dispose();
+  }
+}
+
+export default WorkFaceGas;