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

.gitignore

@@ -36,4 +36,4 @@ os_del.cmd
 /.vscode/
 /.history/
 /svn clear.bat
-/src/views/vent/monitorManager/alarmMonitor
+# /src/views/vent/monitorManager/alarmMonitor

src/views/vent/bundle/bundleMonitorTable/bundle-table.data.ts

@@ -41,7 +41,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'CO2(%)',
+    title: 'CO₂(%)',
     children: [
       {
         title: '最大值',
@@ -60,7 +60,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'O2(%)',
+    title: 'O₂(%)',
     children: [
       {
         title: '最小值',
@@ -79,7 +79,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'CH4(%)',
+    title: 'CH₄(%)',
     children: [
       {
         title: '最大值',
@@ -98,7 +98,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'C2H2(PPM)',
+    title: 'C₂H₂(PPM)',
     children: [
       {
         title: '最大值',
@@ -117,7 +117,7 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
-    title: 'C2H4(PPM)',
+    title: 'C₂H₄(PPM)',
     children: [
       {
         title: '最大值',

src/views/vent/bundle/bundleMonitorTable/index.vue

@@ -10,29 +10,37 @@
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW">
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 300 }" class="tableW">
           <template #bodyCell="{ column, record }">
             <template v-if="column.dataIndex === 'action'">
               <a class="action-link" @click="toDetail(record)">数据分析</a>
             </template>
           </template>
         </a-table>
+        <div id="barChart" class="bar-chart"></div>
       </div>
     </div>
-    <a-modal style="width: 24%; height: 600px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
-      <blastDelta :posMonitor="posMonitor" />
+    <a-modal style="width: 50%; height: 300px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
+      <div class="blast-delta-container">
+        <BlastDelta :posMonitor="posMonitor" style="width: 50%" />
+        <BlastDelta1 :posMonitor="posMonitor" style="width: 50%" />
+      </div>
     </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, shallowRef, reactive } from 'vue';
+import { ref, onMounted, shallowRef, reactive, nextTick } from 'vue';
 import { columns } from './bundle-table.data';
 import { getBundleInfoList, getAllFileList } from './bundle-table.api';
 import customHeader from '/@/components/vent/customHeader.vue';
 // import { blastDelta } from './modal/blastDelta.vue';
-import blastDelta from './modal/blastDelta.vue';
+import BlastDelta from './modal/blastDelta.vue';
+import BlastDelta1 from './modal/blastDelta1.vue';
+import * as echarts from 'echarts';
+import { color } from 'echarts/core';
 let selectList = ref<any[]>([]);
+let jcddArr = ref<any[]>([]);
 let formSearch = reactive({
   pageNum: 1,
   pageSize: 1000,
@@ -44,9 +52,137 @@ let modalVisible = ref(false);
 let selectedFileId = ref<string | null>(null);
 const posMonitor = shallowRef({});
 
+function updateChart(data: any) {
+  const chartDom = document.getElementById('barChart');
+  const myChart = echarts.init(chartDom);
+  const categories = data.map((item: any) => item.jcdd);
+  const c2h2MaxValues = data.map((item: any) => parseFloat(item.c2h2_max));
+  const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
+  const c2h4MaxValues = data.map((item: any) => parseFloat(item.c2h4_max));
+  const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
+  const ch4MaxValues = data.map((item: any) => parseFloat(item.ch4_max));
+  const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
+  const co2MaxValues = data.map((item: any) => parseFloat(item.co2_max));
+  const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
+  const coMaxValues = data.map((item: any) => parseFloat(item.co_max));
+  const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
+  const o2MinValues = data.map((item: any) => parseFloat(item.o2_min));
+  const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
+
+  const option = {
+    title: {
+      text: '束管日报分析',
+      textStyle: {
+        color: '#ffffff', // 设置标题颜色
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+      textStyle: {
+        color: '#ffffff', // 设置 tooltip 字体颜色为白色
+      },
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          show: true,
+          backgroundColor: '#1c4869',
+        },
+      },
+    },
+    legend: {
+      top: 10,
+      textStyle: {
+        color: '#ffffffff',
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: categories,
+      splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
+      axisLabel: {
+        interval: 0, // 显示所有标签
+        color: '#ffffff', // 设置 x 轴字体颜色
+        formatter: function (value: string) {
+          return value.length > 11 ? value.slice(0, 11) + '...' : value; // 截断长标签
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
+      axisLabel: {
+        color: '#ffffff',
+      },
+    },
+    series: [
+      {
+        name: 'C₂H₂ 最大值',
+        data: c2h2MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'C₂H₂ 平均值',
+        data: c2h2AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'C₂H₄ 最大值',
+        data: c2h4MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'C₂H₄ 平均值',
+        data: c2h4AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'CH₄ 最大值',
+        data: ch4MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'CH₄ 平均值',
+        data: ch4AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO₂ 最大值',
+        data: co2MaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO₂ 平均值',
+        data: co2AveValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO 最大值',
+        data: coMaxValues,
+        type: 'bar',
+      },
+      {
+        name: 'CO 平均值',
+        data: coAveValues,
+        type: 'bar',
+      },
+      {
+        name: 'O₂ 最小值',
+        data: o2MinValues,
+        type: 'bar',
+      },
+      {
+        name: 'O₂ 平均值',
+        data: o2AveValues,
+        type: 'bar',
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+//跳转到爆炸三角形
 function toDetail(record: any) {
   posMonitor.value = record;
-  console.log(posMonitor.value, '爆炸三角形');
   modalVisible.value = true;
 }
 
@@ -56,6 +192,9 @@ async function getTableList(params: any) {
   const content = res.content;
   let contentArr = JSON.parse(content);
   tableData.value = contentArr;
+  nextTick(() => {
+    updateChart(contentArr);
+  });
 }
 
 //获取所有文件列表
@@ -65,6 +204,9 @@ async function getAllFile() {
     fileId: item.fileId,
     fileName: item.fileName,
   }));
+  jcddArr.value = res.records.map((item: any) => ({
+    fileId: item.jcdd,
+  }));
   if (selectList.value.length > 0) {
     formSearch.fileId = selectList.value[0].fileId;
     getSearch();
@@ -132,7 +274,7 @@ onMounted(() => {
 
 .file-list li:hover,
 .file-list li.selected {
-  background: #26adfc1a;
+  background: #1c4869;
 }
 
 .table-container {
@@ -165,4 +307,14 @@ onMounted(() => {
 :deep(.zxm-select-selection-item) {
   color: #fff !important;
 }
+.blast-delta-container {
+  margin: 50px;
+  display: flex;
+  justify-content: space-between;
+}
+.bar-chart {
+  width: 100%;
+  height: 400px;
+  margin-top: 50px;
+}
 </style>

src/views/vent/bundle/bundleMonitorTable/modal/blastDelta.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="blastDelta">
+    <div style="text-align: center; margin-top: -20px"> 平均值 </div>
     <div ref="coord" class="coords">
       <div class="coord-lineY">
         <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
@@ -45,7 +46,7 @@ let props = defineProps({
   canvasSize: {
     type: Object,
     default: () => {
-      return { width: 348, height: 245 };
+      return { width: 380, height: 245 };
     },
   },
 });
@@ -373,8 +374,9 @@ watch(
   () => props.posMonitor,
   (newV, oldV) => {
     if (newV.btTriBlast) {
-      maxY1.value = parseFloat(newV.o2val);
-      maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
+      maxY1.value = parseFloat(newV.o2_ave);
+      maxX1.value =
+        parseFloat(newV.co_max) * 0.0001 + parseFloat(newV.ch4_max) + parseFloat(newV.c2h2_max) * 0.0001 + parseFloat(newV.c2h4_max) * 0.0001;
       let btTriBlasts = newV.btTriBlast;
       coordinateA.x = btTriBlasts.A_x;
       coordinateA.y = btTriBlasts.A_y;
@@ -409,7 +411,7 @@ onMounted(() => {
 .blastDelta {
   position: relative;
   width: 100%;
-  height: 450px;
+  height: 320px;
 
   .line-legend {
     position: absolute;

src/views/vent/bundle/bundleMonitorTable/modal/blastDelta1.vue

@@ -0,0 +1,547 @@
+<template>
+  <div class="blastDelta">
+    <div style="text-align: center; margin-top: -20px"> 最小值 </div>
+    <div ref="coord" class="coords">
+      <div class="coord-lineY">
+        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
+      </div>
+      <div class="coord-labelY">
+        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 0 ? maxY : '' }}</div>
+      </div>
+      <div class="coord-lineX">
+        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15" :key="item"></div>
+      </div>
+      <div class="coord-labelX">
+        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind == 14 ? maxX : '' }}</div>
+      </div>
+      <div class="line-AB" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
+        <canvas id="myCanvas1" :width="canvasSize.width" :height="canvasSize.height"></canvas>
+      </div>
+      <!-- <div class="line-legend">
+        <div class="legend-ite" v-for="ite in 4" :key="ite"></div>
+      </div>
+      <div class="legend-name">
+        <div class="item-name" v-for="item in legendList" :key="item">{{ item.name }}</div>
+      </div> -->
+    </div>
+    <div class="line-legend">
+      <div class="legend-box" v-for="(item, index) in legendList" :key="index">
+        <span class="legend-icon"></span>
+        <span class="legend-label">{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, watch, nextTick } from 'vue';
+
+let props = defineProps({
+  posMonitor: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  canvasSize: {
+    type: Object,
+    default: () => {
+      return { width: 380, height: 245 };
+    },
+  },
+});
+let coord = ref(null);
+let lengY = ref(0);
+//与x,y轴相交最大值坐标
+let maxY = ref(0);
+let maxX = ref(0);
+let maxY1 = ref(0);
+let maxX1 = ref(0);
+
+//A点坐标
+let coordinateA = reactive({
+  x: 0,
+  y: 0,
+});
+//B点坐标
+let coordinateB = reactive({
+  x: 0,
+  y: 0,
+});
+//E点坐标
+let coordinateE = reactive({
+  x: 0,
+  y: 0,
+});
+//F点坐标
+let coordinateF = reactive({
+  x: 0,
+  y: 0,
+});
+//G点坐标
+let coordinateG = reactive({
+  x: 0,
+  y: 0,
+});
+
+let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
+
+function getAreas() {
+  if (coord.value) {
+    let width = coord.value.offsetWidth;
+    let height = coord.value.offsetHeight;
+    lengY.value = Math.ceil((height - 10) / 10);
+  }
+}
+//根据A,B,E,G等点坐标绘制爆炸三角形
+function getBlast() {
+  maxY.value = getCoordABY(0);
+  // 获取canvas元素
+  let canvas = document.getElementById('myCanvas1');
+  let ctx = canvas.getContext('2d');
+  let scalcY, scalcX;
+  if (coordinateB.x < 50) {
+    maxX.value = 50;
+    scalcY = canvas.height / maxY.value;
+    scalcX = canvas.width / maxX.value;
+  } else {
+    maxX.value = parseInt(coordinateB.x + 10);
+    scalcY = canvas.height / maxY.value;
+    scalcX = canvas.width / maxX.value;
+  }
+  //绘制AB点线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制AE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制BE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制A点与坐标轴连线
+  ctx.beginPath();
+  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制B点c连线
+  ctx.beginPath();
+  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+  //绘制c点与坐标轴连线
+  ctx.beginPath();
+  ctx.moveTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制E,F线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制GE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  let pointData = [
+    {
+      arr: [
+        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+        { x: 0, y: canvas.height - maxY.value * scalcY },
+      ],
+      color: 'rgb(1, 127, 2, .9)',
+    },
+    {
+      arr: [
+        { x: 0, y: canvas.height }, //原点
+        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+      ],
+      color: 'rgb(127, 254, 2, .9)',
+    },
+    {
+      arr: [
+        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+        { x: maxX.value * scalcX, y: canvas.height },
+        { x: maxX.value * scalcX, y: canvas.height - getCoordABY(maxX.value) * scalcY },
+        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+      ],
+      color: 'rgb(255, 255, 0, .9)',
+    },
+    {
+      arr: [
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+      ],
+      color: 'rgb(255, 0, 0, .9)',
+    },
+  ];
+
+  pointData.forEach((item, index) => {
+    ctx.beginPath();
+    ctx.moveTo(item.arr[0].x, item.arr[0].y);
+    item.arr.forEach((items, ind) => {
+      if (ind != 0) {
+        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+      }
+    });
+    ctx.closePath();
+    ctx.fillStyle = item.color;
+    ctx.fill();
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
+
+  // 标记点A
+  ctx.beginPath();
+  ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点B
+  ctx.beginPath();
+  ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点E
+  ctx.beginPath();
+  ctx.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点G
+  ctx.beginPath();
+  ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('G', coordinateG.x * scalcX + 5, canvas.height - coordinateG.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点F
+  ctx.beginPath();
+  ctx.arc(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('F', coordinateF.x * scalcX + 10, canvas.height - coordinateF.y * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点
+  ctx.beginPath();
+  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+  ctx.fillStyle = 'blue';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+}
+//绘制不爆炸三角形
+function getUnblast() {
+  maxY.value = 21;
+  maxX.value = 50;
+  // 获取canvas元素
+  let canvas = document.getElementById('myCanvas1');
+  let ctx = canvas.getContext('2d');
+  let scalcY = canvas.height / maxY.value;
+  let scalcX = canvas.width / maxX.value;
+
+  //绘制AB点线条
+  ctx.beginPath();
+  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  let pointData = [
+    {
+      arr: [
+        { x: 0, y: canvas.height }, //原点
+        { x: 0, y: canvas.height - maxY.value * scalcY }, //A
+        { x: maxX.value * scalcX, y: canvas.height }, //B
+      ],
+      color: 'rgb(127, 254, 2, .9)',
+    },
+  ];
+
+  pointData.forEach((item, index) => {
+    ctx.beginPath();
+    ctx.moveTo(item.arr[0].x, item.arr[0].y);
+    item.arr.forEach((items, ind) => {
+      if (ind != 0) {
+        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+      }
+    });
+    ctx.closePath();
+    ctx.fillStyle = item.color;
+    ctx.fill();
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
+
+  // 标记点A
+  ctx.beginPath();
+  ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('A', 10, canvas.height - maxY.value * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+  // 标记点B
+  ctx.beginPath();
+  ctx.arc(maxX.value * scalcX, canvas.height, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('B', maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点
+  ctx.beginPath();
+  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+  ctx.fillStyle = 'blue';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+}
+//根据横坐标获取直线AB纵坐标
+function getCoordABY(params) {
+  return Math.ceil(
+    ((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params -
+      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) +
+      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+      (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
+  );
+}
+//根据纵坐标获取直线AB横坐标
+function getCoordABX(params1) {
+  return Math.floor(
+    ((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 +
+      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) -
+      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+      (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
+  );
+}
+
+watch(
+  () => props.posMonitor,
+  (newV, oldV) => {
+    if (newV.btTriBlast) {
+      maxY1.value = parseFloat(newV.o2_min);
+      maxX1.value =
+        parseFloat(newV.co_max) * 0.0001 + parseFloat(newV.ch4_max) + parseFloat(newV.c2h2_max) * 0.0001 + parseFloat(newV.c2h4_max) * 0.0001;
+      let btTriBlasts = newV.btTriBlast;
+      coordinateA.x = btTriBlasts.A_x;
+      coordinateA.y = btTriBlasts.A_y;
+      coordinateB.x = btTriBlasts.B_x;
+      coordinateB.y = btTriBlasts.B_y;
+      coordinateE.x = btTriBlasts.E_x;
+      coordinateE.y = btTriBlasts.E_y;
+      coordinateF.x = btTriBlasts.F_x;
+      coordinateF.y = btTriBlasts.F_y;
+      coordinateG.x = btTriBlasts.G_x;
+      coordinateG.y = btTriBlasts.G_y;
+      if (
+        !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
+        (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
+      ) {
+        // 使用 nextTick 为了让 immediate watch 触发时等待组件挂载后执行绘制
+        nextTick(getUnblast);
+      } else {
+        nextTick(getBlast);
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+onMounted(() => {
+  getAreas();
+});
+</script>
+
+<style lang="less" scoped>
+.blastDelta {
+  position: relative;
+  width: 100%;
+  height: 320px;
+
+  .line-legend {
+    position: absolute;
+    left: 50%;
+    top: 20px;
+    width: 75%;
+    height: 20px;
+    transform: translate(-50%, 0);
+    display: flex;
+    justify-content: space-around;
+
+    .legend-box {
+      display: flex;
+
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+
+      &:nth-child(1) {
+        flex: 1;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #7ffe02;
+          margin-right: 5px;
+        }
+      }
+
+      &:nth-child(2) {
+        flex: 1.5;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #017f02;
+          margin-right: 5px;
+        }
+      }
+
+      &:nth-child(3) {
+        flex: 1;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ff0000;
+          margin-right: 5px;
+        }
+      }
+
+      &:nth-child(4) {
+        flex: 1;
+
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ffff00;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+
+  .coords {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 90%;
+    height: 80%;
+    border-left: 1px solid #006c9d;
+    border-bottom: 1px solid #006c9d;
+    transform: translate(-45%, -46%);
+
+    .coord-lineY {
+      position: absolute;
+      left: -5px;
+      top: 10px;
+      width: 5px;
+      height: calc(100% - 10px);
+    }
+
+    .coord-labelY {
+      position: absolute;
+      left: -25px;
+      top: -5px;
+      width: 20px;
+      height: 100%;
+    }
+
+    .coord-lineX {
+      display: flex;
+      position: absolute;
+      bottom: -5px;
+      right: 10px;
+      width: calc(100% - 10px);
+      height: 5px;
+    }
+
+    .coord-labelX {
+      display: flex;
+      justify-content: flex-end;
+      position: absolute;
+      bottom: -25px;
+      left: -5px;
+      width: 100%;
+      height: 20px;
+    }
+
+    .line-AB {
+      position: absolute;
+      left: 0;
+      top: 10px;
+    }
+
+    // .legend-name {
+    //   position: absolute;
+    //   right: 0;
+    //   top: 20px;
+    //   height: 80px;
+
+    //   .item-name {
+    //     height: 20px;
+    //     line-height: 20px;
+    //     font-size: 10px;
+    //     color: #fff;
+    //     letter-spacing: 2px;
+    //   }
+    // }
+  }
+}
+</style>

src/views/vent/bundleSpy/bundleSpyTable/bundleSpy-table.data.ts

@@ -29,14 +29,14 @@ export const columns: BasicColumn[] = [
     align: 'center',
   },
   {
-    title: 'O2(%)',
+    title: 'O₂(%)',
     dataIndex: 'o2_ave',
     key: 'o2_ave',
     width: 100,
     align: 'center',
   },
   {
-    title: 'N2(%)',
+    title: 'N₂(%)',
     dataIndex: 'n2_ave',
     key: 'n2_ave',
     width: 100,
@@ -50,14 +50,14 @@ export const columns: BasicColumn[] = [
     align: 'center',
   },
   {
-    title: 'CO2(%)',
+    title: 'CO₂(%)',
     dataIndex: 'co2_ave',
     key: 'co2_ave',
     width: 100,
     align: 'center',
   },
   {
-    title: 'CH4(%)',
+    title: 'CH₄(%)',
     dataIndex: 'ch4_ave',
     key: 'ch4_ave',
     width: 100,
@@ -71,14 +71,14 @@ export const columns: BasicColumn[] = [
     align: 'center',
   },
   {
-    title: 'C2H4(%)',
+    title: 'C₂H₄(%)',
     dataIndex: 'c2h4_ave',
     key: 'c2h4_ave',
     width: 100,
     align: 'center',
   },
   {
-    title: 'C2H2(%)',
+    title: 'C₂H₂(%)',
     dataIndex: 'c2h2_ave',
     key: 'c2h2_ave',
     width: 100,

src/views/vent/bundleSpy/bundleSpyTable/index.vue

@@ -10,7 +10,8 @@
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 300 }" class="tableW"> </a-table>
+        <div id="lineChart" class="line-chart"></div>
       </div>
     </div>
   </div>
@@ -21,6 +22,8 @@ import { ref, onMounted, reactive } from 'vue';
 import { columns } from './bundleSpy-table.data';
 import { getbundleSpyInfoList, getAllFileList } from './bundleSpy-table.api';
 import customHeader from '/@/components/vent/customHeader.vue';
+import * as echarts from 'echarts';
+
 let selectList = ref<any[]>([]);
 
 let formSearch = reactive({
@@ -37,8 +40,134 @@ async function getTableList(params: any) {
   const content = res.content;
   let contentArr = JSON.parse(content);
   tableData.value = contentArr;
+  console.log(contentArr, 'contentArr');
+  updateChart(contentArr);
 }
 
+//折线图
+function updateChart(data: any) {
+  const chartDom = document.getElementById('lineChart');
+  const myChart = echarts.init(chartDom);
+  const categories = data.map((item: any) => item.jcdd);
+  const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
+  const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
+  const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
+  const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
+  const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
+  const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
+  const n2AveValues = data.map((item: any) => parseFloat(item.n2_ave));
+  const c2h6AveValues = data.map((item: any) => parseFloat(item.c2h6_ave));
+
+  const option = {
+    title: {
+      text: '色谱仪报表分析',
+      textStyle: {
+        color: '#ffffff', // 设置标题颜色
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+      textStyle: {
+        color: '#ffffff', // 设置 tooltip 字体颜色为白色
+      },
+      axisPointer: {
+        label: {
+          show: true,
+          backgroundColor: '#071c44',
+        },
+      },
+    },
+    legend: {
+      top: 10,
+      textStyle: {
+        color: '#ffffffff',
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: categories,
+      splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+      axisLabel: {
+        interval: 0, // 显示所有标签
+        color: '#ffffff',
+        formatter: function (value: string) {
+          return value.length > 15 ? value.slice(0, 15) + '...' : value; // 截断长标签
+        },
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: 'O₂/N₂',
+        max: 100,
+        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+        axisLabel: {
+          color: '#ffffff', // 设置 y 轴字体颜色
+        },
+      },
+      {
+        type: 'value',
+        name: '其他气体',
+        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+        axisLabel: {
+          color: '#ffffff', // 设置 y 轴字体颜色
+        },
+      },
+    ],
+    series: [
+      {
+        name: 'C₂H₂平均值',
+        data: c2h2AveValues,
+        type: 'line',
+        yAxisIndex: 1,
+      },
+      {
+        name: 'C₂H₄平均值',
+        data: c2h4AveValues,
+        type: 'line',
+        yAxisIndex: 1,
+      },
+      {
+        name: 'CH₄平均值',
+        data: ch4AveValues,
+        yAxisIndex: 1,
+        type: 'line',
+      },
+      {
+        name: 'CO₂平均值',
+        data: co2AveValues,
+        yAxisIndex: 1,
+        type: 'line',
+      },
+      {
+        name: 'CO平均值',
+        data: coAveValues,
+        yAxisIndex: 1,
+        type: 'line',
+      },
+      {
+        name: 'O₂平均值',
+        data: o2AveValues,
+        yAxisIndex: 0,
+        type: 'line',
+      },
+      {
+        name: 'N₂平均值',
+        data: n2AveValues,
+        yAxisIndex: 0,
+        type: 'line',
+      },
+      {
+        name: 'C2H6平均值',
+        data: c2h6AveValues,
+        yAxisIndex: 1,
+        type: 'line',
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
 //获取所有文件列表
 async function getAllFile() {
   let res = await getAllFileList({ type: 'bundleSpy' });
@@ -113,7 +242,7 @@ onMounted(() => {
 
 .file-list li:hover,
 .file-list li.selected {
-  background: #26adfc1a;
+  background: #1c4869;
 }
 
 .table-container {
@@ -146,4 +275,9 @@ onMounted(() => {
 :deep(.zxm-select-selection-item) {
   color: #fff !important;
 }
+.line-chart {
+  width: 100%;
+  height: 400px;
+  margin-top: 50px;
+}
 </style>

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/deviceManager/comment/cameraTabel/camera.data.ts

@@ -35,6 +35,10 @@ export const columns: BasicColumn[] = [
           value: 'flv',
         },
         {
+          label: '红柳林code转URl',
+          value: 'HLL',
+        },
+        {
           label: '海康平台转换rtsp',
           value: 'toHKRtsp',
         },

src/views/vent/dust/dustMonitorTable/dust-table.data.ts

@@ -128,3 +128,100 @@ export const columns = [
     ],
   },
 ];
+export const fieldMapping = {
+  sc_zcds: '总尘-作业工序-生产(短时间监测浓度，mg/m³)',
+  jx_zcds: '总尘-作业工序-检修(短时间监测浓度，mg/m³)',
+  sc_hcds: '呼尘-作业工序-生产(短时间监测浓度，mg/m³)',
+  jx_hcds: '呼尘-作业工序-检修(短时间监测浓度，mg/m³)',
+  zcjqpj: '总尘(时间加权平均浓度，mg/m³)',
+  hcjqpj: '呼尘(时间加权平均浓度，mg/m³)',
+  zcrxd_ds: '总尘容许浓度(短时间监测浓度，mg/m³)',
+  zcrxd_jqpj: '总尘容许浓度(时间加权平均浓度，mg/m³)',
+  hcrxd_ds: '呼尘容许浓度(短时间监测浓度，mg/m³)',
+  hcrxd_jqpj: '呼尘容许浓度(时间加权平均浓度，mg/m³)',
+};
+
+export const dataColumns = [
+  {
+    title: '监测字段',
+    align: 'center',
+    dataIndex: 'key',
+    key: 'key',
+    width: 200,
+    customRender: ({ text }) => fieldMapping[text] || text,
+  },
+  {
+    title: '最大值',
+    dataIndex: 'value',
+    align: 'center',
+    width: 100,
+    key: 'value',
+  },
+  {
+    title: '工种',
+    width: 100,
+    dataIndex: 'gz',
+    align: 'center',
+    key: 'gz',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '检测地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '粉尘种类',
+    dataIndex: 'fczl',
+    key: 'fczl',
+  },
+];
+
+export const AllDataColumns = [
+  {
+    title: '监测字段',
+    align: 'center',
+    dataIndex: 'key',
+    key: 'key',
+    width: 200,
+    customRender: ({ text }) => fieldMapping[text] || text,
+  },
+  {
+    title: '最大值',
+    dataIndex: 'value',
+    align: 'center',
+    width: 100,
+    key: 'value',
+  },
+  {
+    width: 100,
+    title: '工作场所',
+    dataIndex: 'gzcs',
+    align: 'center',
+    key: 'gzcs',
+  },
+  {
+    title: '工种',
+    width: 100,
+    dataIndex: 'gz',
+    align: 'center',
+    key: 'gz',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '检测地点',
+    dataIndex: 'jcdd',
+    key: 'jcdd',
+  },
+  {
+    width: 100,
+    align: 'center',
+    title: '粉尘种类',
+    dataIndex: 'fczl',
+    key: 'fczl',
+  },
+];

src/views/vent/dust/dustMonitorTable/index.vue

@@ -10,34 +10,148 @@
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 250 }" class="tableW"> </a-table>
+        <div class="tab-container">
+          <a-tabs v-model:activeKey="activeTab">
+            <a-tab-pane key="workplace" class="tab1" tab="监测地点粉尘情况分析">
+              <div class="filter-container">
+                <a-select
+                  :key="DefaultValue"
+                  :default-value="DefaultValue"
+                  v-model="selectedWorkplace"
+                  @change="workPlaceChange"
+                  placeholder="选择工作场所"
+                  style="width: 280px; margin: 5px"
+                >
+                  <a-select-option v-for="workplace in workplaceList" :key="workplace.index" :value="workplace">
+                    {{ workplace }}
+                  </a-select-option>
+                </a-select>
+              </div>
+              <a-table :columns="dataColumns" :data-source="filteredResultByWorkplace" size="small" :scroll="{ y: 260 }" class="tableW"></a-table>
+            </a-tab-pane>
+            <a-tab-pane key="overall" class="tab2" tab="当日粉尘情况分析">
+              <a-table :columns="AllDataColumns" :data-source="AllMaxValues" size="small" :scroll="{ y: 300 }" class="tableW"></a-table>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive } from 'vue';
-import { columns } from './dust-table.data';
+import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue';
+import { columns, dataColumns, AllDataColumns } from './dust-table.data';
 import { getDustInfoList, getAllFileList } from './dsut-table.api';
 import customHeader from '/@/components/vent/customHeader.vue';
+import { result } from 'lodash-es';
+// import { nextTick } from 'process';
 
 let tableData = ref<any[]>([]);
 let selectList = ref<any[]>([]);
-
+let resultByWorkplace = ref<any[]>([]);
+let AllMaxValues = ref<any[]>([]);
+let filteredResultByWorkplace = ref<any[]>([]); //根据工作场所查询的数据
+let workplaceList = ref<any[]>([]); //根据工作场所查询的数据
+let activeTab = ref<string>('workplace');
+let selectedFileId = ref<string | null>(null);
+let selectedWorkplace = ref<string | null>(null);
+let DefaultValue = ref<string | null>(null);
 let formSearch = reactive({
   pageNum: 1,
   pageSize: 1000,
   fileId: '',
   fileName: '',
 });
-let selectedFileId = ref<string | null>(null);
+
 //获取粉尘监测结果数据
 async function getTableList(params: any) {
   let res = await getDustInfoList({ type: 'smoke', ...params });
   const content = res.content;
   let contentArr = JSON.parse(content);
   tableData.value = contentArr;
+  processTableData(contentArr);
+  if (workplaceList.value.length > 0) {
+    console.log(workplaceList.value, 'workplaceList');
+    DefaultValue.value = workplaceList.value[0];
+    workPlaceChange(selectedWorkplace.value);
+  }
+}
+// 处理 tableData 数据
+function processTableData(data: any) {
+  // 根据 gzcs 字段进行分组
+  const groupedData = data.reduce((acc: any, item: any) => {
+    const workplace = item.gzcs;
+    if (!acc[workplace]) {
+      acc[workplace] = [];
+    }
+    acc[workplace].push(item);
+    return acc;
+  }, {});
+
+  // 筛选每个工作场所下的最大值
+  const result = Object.keys(groupedData).flatMap((workplace) => {
+    const items = groupedData[workplace];
+    const maxValues = [
+      { key: 'sc_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'jx_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'sc_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'jx_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'zcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'hcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'zcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'zcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'hcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+      { key: 'hcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: workplace },
+    ];
+
+    items.forEach((item: any) => {
+      maxValues.forEach((maxValue) => {
+        if (item[maxValue.key] > maxValue.value) {
+          maxValue.value = item[maxValue.key];
+          maxValue.gz = item.gz;
+          maxValue.jcdd = item.jcdd;
+          maxValue.fczl = item.fczl;
+        }
+      });
+    });
+
+    return maxValues;
+  });
+
+  resultByWorkplace.value = result;
+  workplaceList.value = Array.from(new Set(resultByWorkplace.value.map((item) => item.gzcs)));
+  if (workplaceList.value.length > 0) {
+    selectedWorkplace.value = workplaceList.value[0];
+    workPlaceChange(selectedWorkplace.value);
+  }
+  // 筛选整个 tableData 下的最大值
+  const overallMaxValues = [
+    { key: 'sc_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'jx_zcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'sc_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'jx_hcds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'zcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'hcjqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'zcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'zcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'hcrxd_ds', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+    { key: 'hcrxd_jqpj', value: -Infinity, gz: '', jcdd: '', fczl: '', gzcs: '' },
+  ];
+  data.forEach((item: any) => {
+    overallMaxValues.forEach((maxValue) => {
+      if (item[maxValue.key] > maxValue.value) {
+        maxValue.value = item[maxValue.key];
+        maxValue.gz = item.gz;
+        maxValue.jcdd = item.jcdd;
+        maxValue.fczl = item.fczl;
+        maxValue.gzcs = item.gzcs;
+      }
+    });
+  });
+
+  AllMaxValues.value = overallMaxValues;
 }
 //获取所有文件列表
 async function getAllFile() {
@@ -67,6 +181,11 @@ function getSearch() {
   };
   getTableList(params);
 }
+function workPlaceChange(value: any) {
+  selectedWorkplace.value = value;
+  filteredResultByWorkplace.value = resultByWorkplace.value.filter((item) => item.gzcs === value);
+}
+
 onMounted(() => {
   getTableList({ type: 'smoke' });
   getAllFile().then(() => {
@@ -113,7 +232,7 @@ onMounted(() => {
 
 .file-list li:hover,
 .file-list li.selected {
-  background: #26adfc1a;
+  background: #1c4869;
 }
 
 .table-container {
@@ -122,6 +241,44 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
+.tab-container {
+  display: flex;
+  align-items: center;
+}
+
+.tab-container .ant-tabs {
+  flex-grow: 1;
+}
+
+:deep(.zxm-tabs-nav) {
+  margin: 0 !important;
+  .zxm-tabs-tab {
+    width: 180px;
+    height: 45px;
+    background: url('@/assets/images/defaultbg.png') center no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    margin-right: 10px;
+  }
+  .zxm-tabs-tab-active {
+    width: 180px;
+    position: relative;
+    background: url('@/assets/images/selected.png') center no-repeat;
+    background-size: 100%;
+    .zxm-tabs-tab-btn {
+      color: #fff !important;
+    }
+  }
+  .zxm-tabs-ink-bar {
+    width: 0 !important;
+  }
+  .zxm-tabs-tab + .zxm-tabs-tab {
+    margin: 0 !important;
+  }
+}
+
 .dustMonitor {
   width: 100%;
   height: 100%;

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

@@ -0,0 +1,172 @@
+<template>
+  <div ref="work" class="work-box"></div>
+</template>
+
+<script lang="ts" setup>
+  import * as echarts from 'echarts';
+  import { ref, nextTick, watch, defineProps } from 'vue';
+
+  let props = defineProps<{
+    xData: string[];
+    y1Data: number[];
+    y2Data: number[];
+    y3Data: number[];
+    y4Data: number[];
+    yUnit?: string;
+  }>();
+
+  //获取dom元素节点
+  let work = ref<any>();
+
+  watch(
+    () => props.xData,
+    () => {
+      getOption();
+    },
+    { immediate: true, deep: true }
+  );
+
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(work.value);
+      let option = {
+        tooltip: {
+          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',
+          top: '0%',
+          type: 'plain',
+          textStyle: {
+            color: '#7ec7ff',
+            fontSize: 14,
+          },
+          itemGap: 10,
+          itemWidth: 5,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLabel: {
+              textStyle: {
+                color: '#b3b8cc',
+              },
+            },
+            // axisLine: {
+            //   lineStyle: {
+            //     color: '#244a94',
+            //   },
+            // },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: props.xData,
+          },
+        ],
+        yAxis: [
+          {
+            // boundaryGap: false,
+            axisLabel: {
+              textStyle: {
+                color: '#b3b8cc',
+              },
+            },
+            name: props.yUnit,
+            // nameTextStyle: {
+            //   color: '#fff',
+            //   fontSize: 12,
+            //   lineHeight: 10,
+            // },
+            splitLine: {
+              lineStyle: {
+                color: '#0d2973',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '平均值',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 4,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
+            },
+            data: props.y1Data,
+          },
+          {
+            name: '最大值',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 4,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
+            },
+            data: props.y2Data,
+          },
+          {
+            name: '最小值',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 4,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
+            },
+            data: props.y3Data,
+          },
+          {
+            name: '实时值',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 4,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
+            },
+            data: props.y4Data,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+</script>
+
+<style scoped lang="less">
+  .work-box {
+    width: 100%;
+    height: 100%;
+  }
+</style>

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

@@ -0,0 +1,262 @@
+<template>
+  <div class="content">
+    <div class="title">
+      <div class="text">{{ title }}</div>
+      <!-- <a-radio-group v-model:value="shown" button-style="solid">
+        <a-radio-button value="default">测点信息</a-radio-button>
+        <a-radio-button value="chart">预测曲线</a-radio-button>
+      </a-radio-group> -->
+      <BaseTab
+        style="width: 200px"
+        :tabs="[
+          { name: '测点信息', id: 'default' },
+          { name: '预测曲线', id: 'chart' },
+        ]"
+        v-model:id="shown"
+      />
+    </div>
+    <div v-if="shown === 'default'" class="content-item">
+      <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>
+        <div class="item-r">
+          <div class="content-r" v-for="el in item.listR" :key="el.id">
+            <span>{{ `${el.label} : ` }}</span>
+            <span
+              :class="{
+                'status-f': el.value == 1,
+                'status-l': el.value == 0,
+              }"
+            >
+              {{ 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 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>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import EchartLine3 from './echartLine3.vue';
+  import BaseTab from '../../../gas/components/tab/baseTab.vue';
+  import moment from 'moment';
+
+  const props = defineProps<{
+    cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
+    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';
+
+  @{theme-deepblue} {
+    .content {
+      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
+      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
+    }
+  }
+  .content {
+    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
+    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
+    height: 100%;
+    color: var(--vent-font-color);
+
+    .title {
+      height: 30px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .text {
+        font-family: 'douyuFont';
+        font-size: 14px;
+      }
+    }
+
+    .content-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+
+      .card-content {
+        position: relative;
+        width: 30%;
+        height: 128px;
+        margin: 0px 15px 15px 15px;
+        background: var(--image-bot-area) no-repeat center;
+        background-size: 100% 100%;
+
+        .item-l {
+          position: absolute;
+          left: 32px;
+          top: 50%;
+          transform: translate(0, -50%);
+          width: 89px;
+          height: 98px;
+          background: var(--image-bot-area1) no-repeat center;
+
+          .label-l {
+            position: absolute;
+            left: 50%;
+            top: 7px;
+            color: var(--vent-font-color);
+            font-size: 14px;
+            transform: translate(-50%, 0);
+          }
+
+          .value-l {
+            position: absolute;
+            left: 50%;
+            top: 50px;
+            transform: translate(-50%, 0);
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: var(--vent-table-action-link);
+          }
+        }
+
+        .item-r {
+          position: absolute;
+          left: 132px;
+          top: 50%;
+          transform: translate(0, -50%);
+          height: 128px;
+          padding: 5px 0px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          box-sizing: border-box;
+
+          .content-r {
+            display: flex;
+
+            span {
+              font-size: 14px;
+              color: var(--vent-font-color);
+
+              &:first-child {
+                display: inline-block;
+                width: 68px;
+              }
+
+              &:last-child {
+                display: inline-block;
+                width: calc(100% - 68px);
+              }
+            }
+
+            .status-f {
+              color: #ff0000;
+            }
+
+            .status-l {
+              color: var(--vent-table-action-link);
+            }
+          }
+        }
+      }
+    }
+
+    .chart-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+    }
+  }
+</style>

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

@@ -46,29 +46,7 @@
     </div>
     <div class="bot-dust">
       <div class="bot-area">
-        <div class="title-b">
-          <div class="text-b">粉尘监控测点信息</div>
-        </div>
-        <div class="content-b">
-          <div class="card-b" v-for="(item, index) in cardListTf" :key="index">
-            <div class="item-l">
-              <div class="label-l">{{ item.label }}</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>
-                <span
-                  :class="{
-                    'status-f': items.value == 1,
-                    'status-l': items.value == 0,
-                  }"
-                  >{{ `${items.value}${items.dw}` }}</span
-                >
-              </div>
-            </div>
-          </div>
-        </div>
+        <MeasurePoint title="粉尘监控测点信息" :cards="cardListTf" :charts="chartListTf" />
       </div>
     </div>
   </div>
@@ -82,6 +60,8 @@
   import { useRouter } from 'vue-router';
   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'); // 参数为场景类型（设备类型管理中可以查询到）
@@ -119,7 +99,8 @@
     right: '5%',
     containLabel: true,
   });
-  let cardListTf = reactive<any[]>([]);
+  const cardListTf = reactive<any[]>([]);
+  const chartListTf = reactive<any[]>([]);
   let router = useRouter();
   let echartNow = ref<any[]>([]);
   let echartYc = reactive<any[]>([]);
@@ -201,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) => {
@@ -213,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;
 
@@ -307,6 +296,7 @@
       }
     });
   }
+
   //获取粉尘监控测点信息
   async function getWindDeviceList() {
     cardListTf.length = 0;
@@ -367,8 +357,6 @@
       --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');
-      --image-bot-area: url(/src/assets/images/themify/deepblue/fire/bot-area.png);
-      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
     }
   }
 
@@ -381,8 +369,6 @@
     --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');
-    --image-bot-area: url(/src/assets/images/fire/bot-area.png);
-    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
     width: 100%;
     height: 100%;
     padding: 80px 10px 15px 10px;
@@ -641,115 +627,6 @@
         background: var(--image-bj1) no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
-
-        .title-b {
-          height: 30px;
-          margin-bottom: 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .text-b {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
-          }
-        }
-
-        .content-b {
-          height: calc(100% - 40px);
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          overflow-y: auto;
-
-          .card-b {
-            position: relative;
-            width: 24%;
-            height: 128px;
-            margin: 0px 9px 10px 9px;
-            background: var(--image-bot-area) no-repeat center;
-            background-size: 100% 100%;
-
-            .item-l {
-              position: absolute;
-              left: 32px;
-              top: 50%;
-              transform: translate(0, -50%);
-              width: 89px;
-              height: 98px;
-              background: var(--image-bot-area1) no-repeat center;
-
-              .label-l {
-                width: 100%;
-                position: absolute;
-                top: 7px;
-                color: #fff;
-                font-size: 12px;
-                text-align: center;
-              }
-
-              .value-l {
-                width: 100%;
-                position: absolute;
-                top: 50px;
-                font-family: 'douyuFont';
-                font-size: 14px;
-                color: var(--vent-table-action-link);
-                text-align: center;
-              }
-            }
-
-            .item-r {
-              position: absolute;
-              left: 132px;
-              top: 50%;
-              transform: translate(0, -50%);
-              height: 128px;
-              padding: 5px 0px;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              box-sizing: border-box;
-
-              .content-r {
-                display: flex;
-
-                span {
-                  font-size: 14px;
-                  color: #fff;
-
-                  &:first-child {
-                    display: inline-block;
-                    width: 68px;
-                  }
-
-                  &:last-child {
-                    display: inline-block;
-                    width: calc(100% - 68px);
-                    color: var(--vent-table-action-link);
-                    overflow: hidden;
-                    white-space: nowrap;
-                    /* 不换行 */
-
-                    /* 超出部分隐藏 */
-                    text-overflow: ellipsis;
-                    /* 使用省略符号 */
-                  }
-                }
-
-                .status-f {
-                  color: #ff0000;
-                }
-
-                .status-l {
-                  color: var(--vent-table-action-link);
-                }
-              }
-            }
-          }
-        }
       }
     }
   }

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

@@ -76,31 +76,7 @@
         </div>
 
         <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
-          <div class="title-b">
-            <div class="text-b">安全监控测点信息</div>
-          </div>
-          <div class="content-b">
-            <div class="content-b-item">
-              <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
-                <div class="item-l">
-                  <div class="label-l">{{ item.label }}</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>
-                    <span
-                      :class="{
-                        'status-f': items.value == 1,
-                        'status-l': items.value == 0,
-                      }"
-                      >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
-                    >
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          <MeasurePoint title="安全监控测点信息" :timeout="1000" :cards="cardListWs" :charts="chartListWs" />
         </div>
       </div>
       <div style="width: 100%; height: 100%" v-else-if="isShow == 'yjzb'">
@@ -124,6 +100,8 @@
   import { getMonitorComponent } from '../common.data';
   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();
@@ -137,6 +115,7 @@
   let topAreaListWs = reactive<any[]>([]);
   //瓦斯监控列表数据
   let cardListWs = reactive<any[]>([]);
+  const chartListWs = reactive<any[]>([]);
   let router = useRouter();
   //监测/指标激活索引
   let activeIndex = ref(0);
@@ -168,6 +147,7 @@
       // listData.common = res;
       topAreaListWs.length = 0;
       cardListWs.length = 0;
+      chartListWs.length = 0;
       if (JSON.stringify(res) != '{}') {
         res.pump.forEach((v) => {
           topAreaListWs.push({
@@ -194,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: '瓦斯' },
@@ -204,6 +184,12 @@
               { id: 3, label: '测点状态', value: el.warnFlag },
             ],
           });
+          // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
+          chartListWs.push({
+            label: el.strinstallpos,
+            time: new Date(),
+            data: [moment().format('ss'), 15, 5, 10],
+          });
         });
       }
     });
@@ -274,8 +260,6 @@
       --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
       --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
       --image-top-area: url('/@/assets/images/themify/deepblue/fire/top-area.png');
-      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
-      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
     }
   }
 
@@ -285,8 +269,6 @@
     --image-border: url('/@/assets/images/fire/border.png');
     --image-bj1: url('/@/assets/images/fire/bj1.png');
     --image-top-area: url('/@/assets/images/fire/top-area.png');
-    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
-    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
     width: 100%;
     height: 100%;
     padding: 80px 10px 15px 10px;
@@ -530,110 +512,6 @@
         background: var(--image-bj1) no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
-
-        .title-b {
-          height: 30px;
-          margin-bottom: 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .text-b {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
-          }
-        }
-
-        .content-b {
-          height: calc(100% - 40px);
-          overflow-y: auto;
-
-          .content-b-item {
-            display: flex;
-            justify-content: flex-start;
-            align-items: flex-start;
-            flex-wrap: wrap;
-
-            .card-b {
-              position: relative;
-              width: 30%;
-              height: 128px;
-              margin: 0px 15px 15px 15px;
-              background: var(--image-bot-area) no-repeat center;
-              background-size: 100% 100%;
-
-              .item-l {
-                position: absolute;
-                left: 32px;
-                top: 50%;
-                transform: translate(0, -50%);
-                width: 89px;
-                height: 98px;
-                background: var(--image-bot-area1) no-repeat center;
-
-                .label-l {
-                  position: absolute;
-                  left: 50%;
-                  top: 7px;
-                  color: #fff;
-                  font-size: 14px;
-                  transform: translate(-50%, 0);
-                }
-
-                .value-l {
-                  position: absolute;
-                  left: 50%;
-                  top: 50px;
-                  transform: translate(-50%, 0);
-                  font-family: 'douyuFont';
-                  font-size: 14px;
-                  color: var(--vent-table-action-link);
-                }
-              }
-
-              .item-r {
-                position: absolute;
-                left: 132px;
-                top: 50%;
-                transform: translate(0, -50%);
-                height: 128px;
-                padding: 5px 0px;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-around;
-                box-sizing: border-box;
-
-                .content-r {
-                  display: flex;
-
-                  span {
-                    font-size: 14px;
-                    color: #fff;
-
-                    &:first-child {
-                      display: inline-block;
-                      width: 68px;
-                    }
-
-                    &:last-child {
-                      display: inline-block;
-                      width: calc(100% - 68px);
-                    }
-                  }
-
-                  .status-f {
-                    color: #ff0000;
-                  }
-
-                  .status-l {
-                    color: var(--vent-table-action-link);
-                  }
-                }
-              }
-            }
-          }
-        }
       }
 
       .bot-area1 {

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

@@ -58,30 +58,7 @@
     </div>
     <div class="ventilate-bottom">
       <div class="bot-area">
-        <div class="title-b">
-          <div class="text-b">通风监控测点信息</div>
-        </div>
-        <div class="content-b">
-          <div class="card-b" v-for="(item, index) in cardListTf" :key="index">
-            <div class="item-l">
-              <div class="label-l">{{ item.label }}</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>
-                <span
-                  :class="{
-                    'status-f': items.value == 1,
-                    'status-l': items.value == 0,
-                  }"
-                >
-                  {{ `${items.value}${items.dw}` }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
+        <MeasurePoint title="通风监控测点信息" :timeout="1000" :cards="cardListTf" :charts="chartListTf" />
       </div>
     </div>
   </div>
@@ -96,6 +73,8 @@
   import CustomHeader from '/@/components/vent/customHeader.vue';
   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'); // 参数为场景类型（设备类型管理中可以查询到）
@@ -123,6 +102,7 @@
     xData: [],
   });
   let cardListTf = reactive<any[]>([]);
+  const chartListTf = reactive<any[]>([]);
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
@@ -145,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) => {
@@ -172,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));
@@ -271,8 +260,6 @@
       --image-jinfengliang: url('/@/assets/images/themify/deepblue/fire/jinfengliang.png');
       --image-huifengliang: url('/@/assets/images/themify/deepblue/fire/huifengliang.png');
       --image-xufengliang: url('/@/assets/images/themify/deepblue/fire/xufengliang.png');
-      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
-      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
     }
   }
 
@@ -284,8 +271,6 @@
     --image-jinfengliang: url('/@/assets/images/fire/jinfengliang.png');
     --image-huifengliang: url('/@/assets/images/fire/huifengliang.png');
     --image-xufengliang: url('/@/assets/images/fire/xufengliang.png');
-    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
-    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
     --border-image-1: linear-gradient(to bottom, #2d74a0, #2d74a0, #2d74a0);
     --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
     width: 100%;
@@ -552,115 +537,6 @@
         background: var(--image-bj1) no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
-
-        .title-b {
-          height: 30px;
-          margin-bottom: 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .text-b {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: var(--vent-font-color);
-          }
-        }
-
-        .content-b {
-          height: calc(100% - 40px);
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          overflow-y: auto;
-
-          .card-b {
-            position: relative;
-            width: 24%;
-            height: 128px;
-            margin: 0px 9px 10px 9px;
-            background: var(--image-bot-area) no-repeat center;
-            background-size: 100% 100%;
-
-            .item-l {
-              position: absolute;
-              left: 32px;
-              top: 50%;
-              transform: translate(0, -50%);
-              width: 89px;
-              height: 98px;
-              background: var(--image-bot-area1) no-repeat center;
-
-              .label-l {
-                width: 100%;
-                position: absolute;
-                top: 7px;
-                color: var(--vent-font-color);
-                font-size: 12px;
-                text-align: center;
-              }
-
-              .value-l {
-                width: 100%;
-                position: absolute;
-                top: 50px;
-                font-family: 'douyuFont';
-                font-size: 14px;
-                color: var(--vent-table-action-link);
-                text-align: center;
-              }
-            }
-
-            .item-r {
-              position: absolute;
-              left: 132px;
-              top: 50%;
-              transform: translate(0, -50%);
-              height: 128px;
-              padding: 5px 0px;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              box-sizing: border-box;
-
-              .content-r {
-                display: flex;
-
-                span {
-                  font-size: 14px;
-                  color: var(--vent-font-color);
-
-                  &:first-child {
-                    display: inline-block;
-                    width: 68px;
-                    text-align: right;
-                  }
-
-                  &:last-child {
-                    display: inline-block;
-                    width: calc(100% - 68px);
-                    overflow: hidden;
-                    white-space: nowrap;
-                    /* 不换行 */
-
-                    /* 超出部分隐藏 */
-                    text-overflow: ellipsis;
-                    /* 使用省略符号 */
-                  }
-                }
-
-                .status-f {
-                  color: #ff0000;
-                }
-
-                .status-l {
-                  color: var(--vent-table-action-link);
-                }
-              }
-            }
-          }
-        }
       }
     }
   }

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -266,6 +266,7 @@
                       <span v-if="record.doorUse == 1" color="default">行车风门</span>
                       <span v-else-if="record.doorUse == 2">行人风门</span>
                       <span v-else-if="record.doorUse == 3">短路风门</span>
+                      <span v-else-if="record.doorUse == 4">行车/短路风门</span>
                     </template>
                   </template>
                   <template v-else-if="deviceType.startsWith('windrect')">

src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHome.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="monitor-container">
     <div id="FlowSensor" class="FlowSensor-box" style="position: absolute; display: none">
-      <div class="elementContent" v-if="selectData['deviceType'].startsWith('pump_under') || selectData['deviceType'] == 'pump_n12m2pq'">
+      <!-- <div class="elementContent" v-if="selectData['deviceType'].startsWith('pump_under') || selectData['deviceType'] == 'pump_n12m2pq'">
         <fourBorderBg>
           <template v-for="(item, index) in modelMonitor" :key="index">
             <div class="gas-monitor-row">
@@ -10,7 +10,13 @@
             </div>
           </template>
         </fourBorderBg>
-        <!-- <p style="color: #50c8fc;"><span class="data-title">抽采泵流量(m³)：</span>{{ formatNum(selectData.FlowSensor_InputFlux) }}</p> -->
+      </div> -->
+    </div>
+    <!-- 布尔台新瓦斯泵模型上的数据 -->
+    <div class="elementContent" style="position: absolute; display: none">
+      <div v-for="(tag, index) in modelMonitorTags" :key="index" :id="tag.domId" class="modal-monitor-box">
+        <div class="title">{{ tag.title }}</div
+        ><div class="signal-round" :class="{ 'signal-round-gry': tag.value != 1, 'signal-round-run': tag.value == 1 }"></div>
       </div>
     </div>
     <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
@@ -218,6 +224,7 @@
     waterPumpData,
     dewateringPumpData,
     modelMonitor,
+    modelMonitorTags,
     valveCtrlType,
   } from '../gasPump.data';
   import { list } from '../gasPump.api';
@@ -449,7 +456,17 @@
       }
     }
   }
-
+  .modal-monitor-box {
+    background-color: #000;
+    color: #fff;
+    padding: 0 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .signal-round {
+      margin-left: 5px;
+    }
+  }
   .device-state {
     width: 100%;
     position: absolute;

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

@@ -293,6 +293,99 @@ export const modelMonitor = [
   },
 ];
 
+export const modelMonitorTags = [
+  {
+    domId: 'jsf1',
+    title: '进水阀1#',
+    code: '',
+    value: '1',
+    position: [-5.26, 0.19, 0.6],
+    path: [
+      -12.284, 0.962, -0.359, -3.929, 0.942, -0.359, -3.839, 0.942, -0.227, -3.944, 0.942, -0.06, -4.356, 0.942, -0.06, -4.356, 0.725, -0.06, -5.173,
+      0.942, -0.06, -5.173, 0.725, -0.06,
+    ],
+    radius: 5,
+  },
+  {
+    domId: 'jsf2',
+    title: '进水阀2#',
+    code: '',
+    value: '0',
+    position: [-8.72, 0.29, 0.6],
+    path: [-10.61, 0.124, 0.808, -9.008, 0.123, 0.808, -9.008, 0.123, 0.019, -9.003, 0.215, 0.001, -8.839, 0.219, 0.001, -8.833, 0.271, 0.001],
+    radius: 5,
+  },
+  {
+    domId: 'csf1',
+    title: '出水阀1#',
+    code: '',
+    value: '0',
+    position: [-5.74, 0.38, 0.27],
+    path: [
+      -5.614, 0.29, 0.206, -5.614, 0.213, 0.212, -5.614, 0.175, 0.218, -5.614, 0.175, 0.589, -9.268, 0.175, 0.589, -9.725, 0.178, 0.593, -9.757,
+      0.178, 0.547, -9.757, 0.178, 0.007, -9.827, 0.178, -0.04, -10.612, 0.178, -0.04,
+    ],
+    radius: 5,
+  },
+  {
+    domId: 'csf2',
+    title: '出水阀2#',
+    code: '',
+    value: '0',
+    position: [-9.42, 0.38, 0.3],
+    path: [
+      -9.268, 0.175, 0.237, -9.268, 0.178, 0.593, -9.725, 0.178, 0.593, -9.757, 0.178, 0.547, -9.757, 0.178, 0.007, -9.827, 0.178, -0.04, -10.612,
+      0.178, -0.04,
+    ],
+    radius: 5,
+  },
+  {
+    domId: 'jqf1',
+    title: '进气阀1#',
+    code: '',
+    value: '0',
+    position: [-4.41, 1.46, -0.03],
+    path: [
+      -12.284, 0.962, -0.359, -3.929, 0.942, -0.359, -3.839, 0.942, -0.227, -3.944, 0.942, -0.06, -4.356, 0.942, -0.06, -4.356, 0.725, -0.06, -5.173,
+      0.942, -0.06, -5.173, 0.725, -0.06,
+    ],
+    radius: 5,
+  },
+  {
+    domId: 'jqf2',
+    title: '进气阀2#',
+    code: '',
+    value: '0',
+    position: [-7.7, 1.31, -0.14],
+    path: [-12.284, 0.962, -0.359, -7.276, 0.962, -0.377, -7.276, 0.942, -0.181, -7.414, 0.962, -0.063, -7.986, 0.942, -0.063, -8.78, 0.942, -0.063],
+    radius: 5,
+  },
+  {
+    domId: 'cqf1',
+    title: '出气阀1#',
+    code: '',
+    value: '0',
+    position: [-6.2, 1.55, 0.06],
+    path: [
+      -5.628, 0.606, -0.08, -5.628, 0.788, -0.08, -5.732, 0.914, -0.08, -5.962, 0.914, -0.08, -6.067, 1.094, -0.08, -6.067, 1.498, -0.08, -6.197,
+      1.619, -0.08, -12.284, 1.619, -0.08,
+    ],
+    radius: 5,
+  },
+  {
+    domId: 'cqf2',
+    title: '出气阀2#',
+    code: '',
+    value: '0',
+    position: [-9.58, 1.55, -0.13],
+    path: [
+      -9.257, 0.606, -0.069, -9.257, 0.819, -0.069, -9.388, 0.916, -0.069, -9.593, 0.916, -0.069, -9.697, 1.073, -0.069, -9.697, 1.618, -0.069,
+      -12.284, 1.619, -0.08,
+    ],
+    radius: 5,
+  },
+];
+
 export function getComponent() {
   const { sysOrgCode } = useGlobSetting();
   let gasPumpHome;
@@ -301,7 +394,7 @@ export function getComponent() {
       gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHome.vue'));
       return gasPumpHome;
     default:
-      gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeCC.vue'));
+      gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHome.vue'));
       return gasPumpHome;
   }
 }

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);
   }
 };
 
@@ -54,6 +53,7 @@ export const setModelType = (type) => {
         model.scene.remove(gasPumpUnderObj.group);
       }
       group = gasPumpBaseObj.group;
+      // model.isRender = false;
       const oldCameraPosition = { x: 15.9074, y: 5.40264, z: 27.12551 };
       setTimeout(async () => {
         model?.scene?.add(group);
@@ -75,14 +75,15 @@ export const setModelType = (type) => {
       }
       gasPumpUnderObj.addCssText();
       group = gasPumpUnderObj.group;
+      // model.isRender = true;
       const oldCameraPosition = { x: 15.9074, y: 5.40264, z: 27.12551 };
       setTimeout(async () => {
         model?.scene?.add(group);
         await animateCamera(
           oldCameraPosition,
           { x: 0.544, y: 0.3335, z: 0.29222 },
-          { x: -0.18283701989485915, y: 1.5585182112304712, z: 6.23432935897143 },
-          { x: -0.15497121991536436, y: 0.3354979232986092, z: -0.10561004136342216 },
+          { x: -11.014079961863667, y: 1.6456786378357198, z: 5.733554317319543 },
+          { x: -7.043053237796046, y: 0.3354979232986092, z: -0.10561004136342216 },
           model,
           0.6
         );

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

@@ -1,5 +1,7 @@
 import * as THREE from 'three';
-import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+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';
@@ -7,7 +9,6 @@ import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 class gasPumpUnder {
   model;
   modelName = 'gas-pump-underground';
-  // modelName = 'gasPumpUnder';gas-pump-underground
   group: THREE.Object3D | null = null;
 
   constructor(model) {
@@ -19,38 +20,50 @@ class gasPumpUnder {
     directionalLight.position.set(-48, 107, 36);
     this.group?.add(directionalLight);
     directionalLight.target = this.group as THREE.Object3D;
-
-    // gui.add(directionalLight.position, 'x', -500, 800);
-    // gui.add(directionalLight.position, 'y', -500, 800);
-    // gui.add(directionalLight.position, 'z', -500, 800);
-
-    // const pointLight2 = new THREE.PointLight(0xffffff, 2, 500);
-    // pointLight2.position.set(-113, 29, 10);
-    // // light2.castShadow = true
-    // pointLight2.shadow.bias = -0.05;
-    // this.group?.add(pointLight2);
-
-    // gui.add(pointLight2.position, 'x', -500, 500);
-    // gui.add(pointLight2.position, 'y', -500, 500);
-    // gui.add(pointLight2.position, 'z', -500, 500);
   }
 
+  // addCssText = () => {
+  //   if (!this.group) return;
+  //   if (!this.group.getObjectByName('text1')) {
+  //     const element = document.getElementById('FlowSensor') as HTMLElement;
+  //     if (element) {
+  //       const parentElement = document.getElementById('gas3DCSS') as HTMLElement;
+  //       parentElement.appendChild(element);
+  //       const fanLocalCSS3D = new CSS3DObject(element);
+  //       fanLocalCSS3D.name = 'text1';
+  //       fanLocalCSS3D.scale.set(0.007, 0.007, 0.007);
+  //       fanLocalCSS3D.position.set(0, 1.6, 0);
+  //       this.group.add(fanLocalCSS3D);
+  //     }
+  //   }
+  // };
+
   addCssText = () => {
     if (!this.group) return;
-    if (!this.group.getObjectByName('text1')) {
-      const element = document.getElementById('FlowSensor') as HTMLElement;
-      if (element) {
-        const parentElement = document.getElementById('gas3DCSS') as HTMLElement;
-        parentElement.appendChild(element);
-        const fanLocalCSS3D = new CSS3DObject(element);
-        fanLocalCSS3D.name = 'text1';
-        fanLocalCSS3D.scale.set(0.007, 0.007, 0.007);
-        fanLocalCSS3D.position.set(0, 1.6, 0);
-        this.group.add(fanLocalCSS3D);
+    const parentElement = document.getElementById('gas3DCSS') as HTMLElement;
+    for (let i = 0; i < modelMonitorTags.length; i++) {
+      const tag = modelMonitorTags[i];
+      if (!this.group.getObjectByName(tag.domId)) {
+        const element = document.getElementById(tag.domId) as HTMLElement;
+        if (element) {
+          parentElement.appendChild(element);
+          const fanLocalCSS3D = new CSS3DSprite(element);
+          fanLocalCSS3D.name = tag.domId;
+          fanLocalCSS3D.scale.set(0.009, 0.009, 0.009);
+          fanLocalCSS3D.position.set(tag.position[0], tag.position[1], tag.position[2]);
+          this.group.add(fanLocalCSS3D);
+        }
       }
     }
   };
 
+  initAnimate() {
+    for (let i = 0; i < modelMonitorTags.length; i++) {
+      const tag = modelMonitorTags[i];
+      // this.addFlows(tag.path, tag.radius, tag.domId);
+    }
+  }
+
   clearCssText = () => {
     const fanLocalCSS3D = this.group?.getObjectByName('text1') as THREE.Object3D;
     this.group?.remove(fanLocalCSS3D);
@@ -63,8 +76,10 @@ class gasPumpUnder {
         if (this.group) {
           // this.group?.scale.set(0.1, 0.1, 0.1);
           // this.group.position.y += 40;
+          this.initAnimate(); // 流动动画在这里写吧
           resolve(null);
           this.addLight();
+          this.addFlows();
         }
       });
     });
@@ -75,5 +90,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/gasPumpMonitor/index.vue

@@ -2,12 +2,12 @@
   <div class="bg"
     style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
+    <div id="gasPump3D" v-show="activeKey == 'monitor'"
+      style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <div id="gas3DCSS"
       v-show="activeKey == 'monitor' && !loading && (currentDeviceType.startsWith('pump_under') || currentDeviceType == 'pump_n12m2pq')"
-      style="width: 100%; height: 100%; top: 0; left: 0; position: absolute; overflow: hidden">
+      style="width: 100%; height: 100%; top: 0; left: 0; position: absolute; overflow: hidden; pointer-events: none;">
     </div>
-    <div id="gasPump3D" v-show="activeKey == 'monitor'"
-      style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
   </div>
   <div class="scene-box">
     <customHeader :fieldNames="{ label: 'strinstallpos', value: 'deviceID', options: 'children' }" :options="options"

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

@@ -153,6 +153,7 @@
                   <span v-if="record.doorUse == 1" color="default">行车风门</span>
                   <span v-else-if="record.doorUse == 2">行人风门</span>
                   <span v-else-if="record.doorUse == 3">短路风门</span>
+                  <span v-else-if="record.doorUse == 4">行车/短路风门</span>
                 </template>
                 <template v-else-if="column.dataIndex === 'warnLevel'">
                   <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
@@ -235,6 +236,7 @@
                     <span v-if="record.doorUse == 1" color="default">行车风门</span>
                     <span v-else-if="record.doorUse == 2">行人风门</span>
                     <span v-else-if="record.doorUse == 3">短路风门</span>
+                    <span v-else-if="record.doorUse == 4">行车/短路风门</span>
                   </template>
                   <template v-else-if="column.dataIndex === 'warnLevel'">
                     <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>

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

@@ -37,7 +37,7 @@
           <div ref="chartRef" class="info-echarts" style="width: 450px; height: 375px"></div>
           <div v-if="resultObj" class="result-tip">
             最佳工况点为
-            <span style="color: #9a60b4; padding: 0 10px; font-weight: 600">{{ parseInt(resultObj.Hz) }}°</span>
+            <span style="color: #9a60b4; padding: 0 10px; font-weight: 600">{{ parseInt(resultObj.Hz) + (showFre ? 'Hz' : '°') }}</span>
             <span style="color: #c60000; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.x) }} m³/s</span>
             <span style="color: #c60000; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.y) }} Pa</span></div
           >

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/windowMonitor/index.vue

@@ -35,15 +35,14 @@
           <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="setArea(1)">设定风窗面积</div>
           <div v-if="hasPermission('window:showAngle')" class="button-box" @click="setAngle(1)">设定风窗角度</div>
           <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea(7)">风窗自主调控</div>
-
-          <!-- 展会功能 -->
-          <!-- <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea(3)">自主联动控制开启</div>
-          <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea(4)">自主联动控制停止</div> -->
         </div>
       </div>
       <div class="top-right row">
         <div v-if="hasPermission('window:controlFull')" class="button-box" @click="setArea(5)">一键全开</div>
         <div v-if="hasPermission('window:controlFull')" class="button-box" @click="setArea(6)">一键全关</div>
+        <!-- 展会功能 -->
+        <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea(3)">自主联动控制开启</div>
+        <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea(4)">自主联动控制停止</div>
         <!-- <div class="button-box" @click="() => (linkAlarmShow = true)">预警指标</div> -->
         <!-- <div class="control-type row">
           <div class="control-title">控制模式：</div>
@@ -223,6 +222,7 @@
   const activeKey = ref('1');
   const loading = ref(false);
   const windowAngle = ref(0);
+  const ch4 = ref(0.6);
 
   // const rotationParam = {
   //   frontDeg0: 0, // 前门初始
@@ -416,6 +416,7 @@
       password: passWord || globalConfig?.simulatedPassword,
       value: null,
     };
+    let params;
     if (handlerState == 7 || handlerState == 8) {
       let params;
       if (handlerState == 7) {
@@ -452,12 +453,16 @@
       } else if (handlerState == 3 || handlerState == 4) {
         data.paramcode = 'autoRun';
         data.value = handlerState == 3 ? 1 : 0;
+        if (handlerState == 3) {
+          ch4.value = windowAngleNum;
+          params = { auto: 1, windowId: selectData.deviceID, gasMax: ch4.value };
+        }
       } else if (handlerState == 5 || handlerState == 6) {
         data.paramcode = 'frontSetValue';
         data.value = handlerState == 5 ? selectData.maxarea : 0;
       }
 
-      deviceControlApi(data)
+      deviceControlApi(handlerState == 3 ? params : data)
         .then((res) => {
           if (res.success) {
             if (globalConfig.History_Type == 'remote') {

src/views/vent/monitorManager/windowMonitor/modal.vue

@@ -23,6 +23,12 @@
           <a-input-number size="small" placeholder="0" :min="0" v-model:value="rearW" />
         </div>
       </template>
+      <template v-if="type == '3'">
+        <div class="vent-flex-row input-box">
+          <div class="label">瓦斯超限浓度：</div>
+          <a-input-number size="small" placeholder="0" :min="0" v-model:value="ch4" />
+        </div>
+      </template>
       <div v-if="!globalConfig?.simulatedPassword" class="vent-flex-row input-box">
         <div class="label">操作密码：</div>
         <a-input size="small" type="password" v-model:value="passWord" />
@@ -60,6 +66,7 @@
   const area = ref(0);
   const frontW = ref(0);
   const rearW = ref(0);
+  const ch4 = ref(0);
 
   watch([() => props.modalIsShow, () => props.modalTitle, () => props.modalType], ([newVal, newModalTitle, newModalType]) => {
     visible.value = newVal;
@@ -73,7 +80,11 @@
     if (globalConfig?.simulatedPassword) {
       emit('handleOk', '', type.value, area.value);
     } else {
-      emit('handleOk', passWord.value, type.value, area.value);
+      if (type.value == '3') {
+        emit('handleOk', passWord.value, type.value, ch4.value);
+      } else {
+        emit('handleOk', passWord.value, type.value, area.value);
+      }
     }
   }
   function handleCancel() {

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;