[Feat 0000] 火灾各个子模块（光纤、束管监测图）添加预测曲线模块，进行模拟对接

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

@@ -71,12 +71,22 @@
       <div class="echart-box">
         <div class="left-echartbox">
           <div class="title-f">
-            <div class="title-text"
-              >{{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : '' }}</span></div
-            >
+            <div class="title-text">
+              {{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : '' }}</span>
+            </div>
+
+            <BaseTab
+              style="width: 180px; color: var(--vent-font-color)"
+              :tabs="[
+                { name: '实时监测', id: 'default' },
+                { name: '预测曲线', id: 'predict' },
+              ]"
+              v-model:id="shownChart"
+            />
           </div>
           <div class="echarts-box">
-            <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" />
+            <echartLine1 v-if="shownChart === 'default'" :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" />
+            <PredictionCurve v-if="shownChart === 'predict'" :chart="curveConfig" />
           </div>
         </div>
         <div class="right-echartbox">
@@ -98,11 +108,14 @@
   import { onMounted, ref, reactive, watch, defineProps } from 'vue';
   import echartLine1 from './echartLine1.vue';
   import warnZb from './warnZb.vue';
+  import PredictionCurve from './predictionCurve.vue';
+  import BaseTab from '../../../gas/components/tab/baseTab.vue';
 
   let props = defineProps({
     listData: Object,
   });
 
+  const shownChart = ref('default');
   let maxY = ref<any>(0);
   let selectSj = ref<any[]>([]);
   let selectData = ref('');
@@ -228,8 +241,21 @@
     echartDataSg1.lengedData = type.value;
     echartDataSg1.lengedDataName = item.dw;
 
+    const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
     switch (type.value) {
       case 'O₂':
+        curveConfig.value = {
+          id: 'o2',
+          label: '',
+          time: new Date(),
+          data: [
+            // 氧气预测曲线
+            data.avgParams?.avg_o2_value || 0,
+            data.avgParams?.max_o2_value || 0,
+            data.avgParams?.min_o2_value || 0,
+            data.readData?.o2val,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg1.xData.push(el.time);
           echartDataSg1.yData.push(el.o2val);
@@ -237,6 +263,18 @@
         getmaxY();
         break;
       case 'C₂H₄':
+        curveConfig.value = {
+          id: 'ch2',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_ch2_value || 0,
+            data.avgParams?.max_ch2_value || 0,
+            data.avgParams?.min_ch2_value || 0,
+            data.readData?.ch2val,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg1.xData.push(el.time);
           echartDataSg1.yData.push(el.ch2val);
@@ -244,6 +282,18 @@
         getmaxY();
         break;
       case 'CO':
+        curveConfig.value = {
+          id: 'co',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_co_value || 0,
+            data.avgParams?.max_co_value || 0,
+            data.avgParams?.min_co_value || 0,
+            data.readData?.coval,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg1.xData.push(el.time);
           echartDataSg1.yData.push(el.coval);
@@ -251,6 +301,18 @@
         getmaxY();
         break;
       case 'CH₄':
+        curveConfig.value = {
+          id: 'ch',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_ch_value || 0,
+            data.avgParams?.max_ch_value || 0,
+            data.avgParams?.min_ch_value || 0,
+            data.readData?.chval,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg1.xData.push(el.time);
           echartDataSg1.yData.push(el.chval);
@@ -258,6 +320,18 @@
         getmaxY();
         break;
       case 'CO₂':
+        curveConfig.value = {
+          id: 'co2',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_co2_value || 0,
+            data.avgParams?.max_co2_value || 0,
+            data.avgParams?.min_co2_value || 0,
+            data.readData?.co2val,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg1.xData.push(el.time);
           echartDataSg1.yData.push(el.co2val);
@@ -265,6 +339,18 @@
         getmaxY();
         break;
       case 'C₂H₂':
+        curveConfig.value = {
+          id: 'gas',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_gas_value || 0,
+            data.avgParams?.max_gas_value || 0,
+            data.avgParams?.min_gas_value || 0,
+            data.readData?.gasval,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg1.xData.push(el.time);
           echartDataSg1.yData.push(el.gasval);
@@ -294,74 +380,83 @@
     netStatus.value = data['netStatus'];
   }
 
+  /** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
+  const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
+
   watch(
     () => props.listData,
-    (val) => {
-      console.log(val, 'val---');
+    (val: any) => {
       echartDataSg1.xData.length = 0;
       echartDataSg1.yData.length = 0;
       echartDataSgList.length = 0;
       selectList.length = 0;
-      if (JSON.stringify(val) != '{}') {
-        if (val.bundletube.length != 0) {
-          selectSj.value = val.bundletube;
-          selectSj.value.forEach((el) => {
-            selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
-          });
-          selectData.value = selectData.value ? selectData.value : selectList[0].value;
-          let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
-          topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-          // topContent.position = dataVal.strinstallpos || '--';
-          topContent.time = dataVal.readTime || '--';
-          topContent.warnLevel = dataVal.syswarnLevel_str;
-          topContent.smokeJd = dataVal.syswarnLevel_des;
-
-          mbList[0].nd = dataVal.readData.o2val || '--';
-          mbList[1].nd = dataVal.readData.coval || '--';
-          mbList[2].nd = dataVal.readData.co2val || '--';
-          mbList[3].nd = dataVal.readData.chval || '--';
-          mbList[4].nd = dataVal.readData.ch2val || '--';
-          mbList[5].nd = dataVal.readData.gasval || '--';
-          mbList.forEach((el) => {
-            el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
-            el.address = dataVal ? dataVal.strinstallpos : '--';
-          });
-          netStatus.value = dataVal['netStatus'];
-          dataVal.history.forEach((v) => {
-            echartDataSg1.xData.push(v.time);
-            if (echartDataSg1.lengedData == 'O₂') {
-              echartDataSg1.yData.push(v.o2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₄') {
-              echartDataSg1.yData.push(v.ch2val);
-            } else if (echartDataSg1.lengedData == 'CO') {
-              echartDataSg1.yData.push(v.coval);
-            } else if (echartDataSg1.lengedData == 'CH₄') {
-              echartDataSg1.yData.push(v.chval);
-            } else if (echartDataSg1.lengedData == 'CO₂') {
-              echartDataSg1.yData.push(v.co2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₂') {
-              echartDataSg1.yData.push(v.gasval);
-            }
-            echartDataSgList.push(v);
-          });
-          getmaxY();
-        } else {
-          topContent.temperature = 0;
-          // topContent.position = '--';
-          topContent.time = '--';
-          topContent.warnLevel = '--';
-          topContent.smokeJd = '--';
-          mbList[0].nd = '--';
-          mbList[1].nd = '--';
-          mbList[2].nd = '--';
-          mbList[3].nd = '--';
-          mbList[4].nd = '--';
-          mbList[5].nd = '--';
-          mbList.forEach((el) => {
-            el.time1 = '--';
-            el.address = '--';
-          });
-        }
+      if (JSON.stringify(val) === '{}') return;
+      if (val.bundletube.length != 0) {
+        selectSj.value = val.bundletube;
+        selectSj.value.forEach((el) => {
+          selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
+        });
+        selectData.value = selectData.value ? selectData.value : selectList[0].value;
+        let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
+        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+        // topContent.position = dataVal.strinstallpos || '--';
+        topContent.time = dataVal.readTime || '--';
+        topContent.warnLevel = dataVal.syswarnLevel_str;
+        topContent.smokeJd = dataVal.syswarnLevel_des;
+
+        mbList[0].nd = dataVal.readData.o2val || '--';
+        mbList[1].nd = dataVal.readData.coval || '--';
+        mbList[2].nd = dataVal.readData.co2val || '--';
+        mbList[3].nd = dataVal.readData.chval || '--';
+        mbList[4].nd = dataVal.readData.ch2val || '--';
+        mbList[5].nd = dataVal.readData.gasval || '--';
+        mbList.forEach((el) => {
+          el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
+          el.address = dataVal ? dataVal.strinstallpos : '--';
+        });
+        netStatus.value = dataVal['netStatus'];
+        echartDataSgList = dataVal.history;
+        btnClick(
+          {
+            label: type.value,
+            dw: echartDataSg1.lengedDataName,
+          },
+          activeIndex.value
+        );
+        // dataVal.history.forEach((v) => {
+        //   echartDataSg1.xData.push(v.time);
+        //   if (echartDataSg1.lengedData == 'O₂') {
+        //     echartDataSg1.yData.push(v.o2val);
+        //   } else if (echartDataSg1.lengedData == 'C₂H₄') {
+        //     echartDataSg1.yData.push(v.ch2val);
+        //   } else if (echartDataSg1.lengedData == 'CO') {
+        //     echartDataSg1.yData.push(v.coval);
+        //   } else if (echartDataSg1.lengedData == 'CH₄') {
+        //     echartDataSg1.yData.push(v.chval);
+        //   } else if (echartDataSg1.lengedData == 'CO₂') {
+        //     echartDataSg1.yData.push(v.co2val);
+        //   } else if (echartDataSg1.lengedData == 'C₂H₂') {
+        //     echartDataSg1.yData.push(v.gasval);
+        //   }
+        //   echartDataSgList.push(v);
+        // });
+        getmaxY();
+      } else {
+        topContent.temperature = 0;
+        // topContent.position = '--';
+        topContent.time = '--';
+        topContent.warnLevel = '--';
+        topContent.smokeJd = '--';
+        mbList[0].nd = '--';
+        mbList[1].nd = '--';
+        mbList[2].nd = '--';
+        mbList[3].nd = '--';
+        mbList[4].nd = '--';
+        mbList[5].nd = '--';
+        mbList.forEach((el) => {
+          el.time1 = '--';
+          el.address = '--';
+        });
       }
     },
     { immediate: true, deep: true }

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

@@ -72,15 +72,17 @@
           itemWidth: 18,
           icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
           data: [
+            {
+              name: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
+            },
             {
               name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
             },
             {
               name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
             },
-
             {
-              name: echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : '',
+              name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
             },
           ],
         },
@@ -252,7 +254,27 @@
             data: echartDataGqs.minData ? echartDataGqs.minData.data : [],
           },
           {
-            name: echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : '',
+            name: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
+            type: 'line',
+            smooth: true,
+            showSymbol: true,
+            symbolSize: 8,
+            zlevel: 3,
+            itemStyle: {
+              color: '#fc8452',
+              borderColor: '#a3c8d8',
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#fc8452',
+              },
+            },
+
+            data: echartDataGqs.avgData ? echartDataGqs.avgData.data : [],
+          },
+          {
+            name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
             type: 'line',
             smooth: true,
             showSymbol: true,
@@ -269,7 +291,7 @@
               },
             },
 
-            data: echartDataGqs.aveValue ? echartDataGqs.aveValue.data : [],
+            data: echartDataGqs.curData ? echartDataGqs.curData.data : [],
           },
         ],
       };

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

@@ -54,9 +54,18 @@
           itemWidth: 18,
           icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
           data: [
+            {
+              name: echartDataWds.avgData ? echartDataWds.avgData.lengedData : '',
+            },
             {
               name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
             },
+            {
+              name: echartDataWds.minData ? echartDataWds.minData.lengedData : '',
+            },
+            {
+              name: echartDataWds.curData ? echartDataWds.curData.lengedData : '',
+            },
           ],
         },
 
@@ -188,7 +197,28 @@
             data: echartDataWds.minData ? echartDataWds.minData.data : [],
           },
           {
-            name: echartDataWds.aveaData ? echartDataWds.aveaData.lengedData : '',
+            name: echartDataWds.avgData ? echartDataWds.avgData.lengedData : '',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 8,
+
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#1eb0fc', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: '#1eb0fc',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartDataWds.avgData ? echartDataWds.avgData.data : [],
+          },
+          {
+            name: echartDataWds.curData ? echartDataWds.curData.lengedData : '',
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
@@ -206,7 +236,7 @@
               borderColor: '#646ace',
               borderWidth: 0,
             },
-            data: echartDataWds.aveaData ? echartDataWds.aveaData.data : [],
+            data: echartDataWds.curData ? echartDataWds.curData.data : [],
           },
         ],
       };

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

@@ -6,6 +6,7 @@
   import * as echarts from 'echarts';
   import { ref, nextTick, watch, defineProps } from 'vue';
 
+  // well i know this is trash but the time is reaching
   let props = defineProps<{
     xData: string[];
     y1Data: number[];

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

@@ -69,7 +69,7 @@
       </div>
       <div class="echart-box">
         <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="[]" />
+        <PredictionCurve v-if="shownChart === 'predict'" :chart="curveConfig" />
       </div>
     </div>
   </div>
@@ -80,7 +80,7 @@
   import imgUrl from '/@/assets/images/fire/pie.png';
   import echartLine from './echartLine.vue';
   import echartLine1 from './echartLine1.vue';
-  import echartLine3 from './echartLine3.vue';
+  import PredictionCurve from './predictionCurve.vue';
   import { topList, contentList } from '../common.data';
   import BaseTab from '../../../gas/components/tab/baseTab.vue';
 
@@ -95,9 +95,21 @@
   let maxY = ref(100);
   let echartDw = ref('(­°C)');
   //光钎测温-图表数据
-  let echartDataGq = reactive({
+  let echartDataGq = reactive<any>({
+    curData: {
+      lengedData: '实时温度',
+      data: [],
+    },
     maxData: {
-      lengedData: '当前温度',
+      lengedData: '最大温度',
+      data: [],
+    },
+    minData: {
+      lengedData: '最小温度',
+      data: [],
+    },
+    avgData: {
+      lengedData: '平均温度',
       data: [],
     },
     xData: [],
@@ -138,8 +150,21 @@
     echartDataSg.lengedData = items.title;
     echartDataSg.lengedDataName = items.dw;
 
+    const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
     switch (items.title) {
       case 'O₂':
+        curveConfig.value = {
+          id: 'o2',
+          label: '',
+          time: new Date(),
+          data: [
+            // 氧气预测曲线
+            data.avgParams?.avg_o2_value || 0,
+            data.avgParams?.max_o2_value || 0,
+            data.avgParams?.min_o2_value || 0,
+            data.readData?.o2val,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg.xData.push(el.time);
           echartDataSg.yData.push(el.o2val);
@@ -147,6 +172,18 @@
         getmaxY();
         break;
       case 'C₂H₄':
+        curveConfig.value = {
+          id: 'ch2',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_ch2_value || 0,
+            data.avgParams?.max_ch2_value || 0,
+            data.avgParams?.min_ch2_value || 0,
+            data.readData?.ch2val,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg.xData.push(el.time);
           echartDataSg.yData.push(el.ch2val);
@@ -154,6 +191,18 @@
         getmaxY();
         break;
       case 'CO':
+        curveConfig.value = {
+          id: 'co',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_co_value || 0,
+            data.avgParams?.max_co_value || 0,
+            data.avgParams?.min_co_value || 0,
+            data.readData?.coval,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg.xData.push(el.time);
           echartDataSg.yData.push(el.coval);
@@ -161,6 +210,18 @@
         getmaxY();
         break;
       case 'CH₄':
+        curveConfig.value = {
+          id: 'ch',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_ch_value || 0,
+            data.avgParams?.max_ch_value || 0,
+            data.avgParams?.min_ch_value || 0,
+            data.readData?.chval,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg.xData.push(el.time);
           echartDataSg.yData.push(el.chval);
@@ -168,6 +229,18 @@
         getmaxY();
         break;
       case 'CO₂':
+        curveConfig.value = {
+          id: 'co2',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_co2_value || 0,
+            data.avgParams?.max_co2_value || 0,
+            data.avgParams?.min_co2_value || 0,
+            data.readData?.co2val,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg.xData.push(el.time);
           echartDataSg.yData.push(el.co2val);
@@ -175,6 +248,18 @@
         getmaxY();
         break;
       case 'C₂H₂':
+        curveConfig.value = {
+          id: 'gas',
+          label: '',
+          time: new Date(),
+          data: [
+            // 预测曲线
+            data.avgParams?.avg_gas_value || 0,
+            data.avgParams?.max_gas_value || 0,
+            data.avgParams?.min_gas_value || 0,
+            data.readData?.gasval,
+          ],
+        };
         echartDataSgList.forEach((el) => {
           echartDataSg.xData.push(el.time);
           echartDataSg.yData.push(el.gasval);
@@ -199,82 +284,81 @@
     });
   }
 
+  /** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
+  const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
+
   watch(
     () => props.listData,
-    (val, val1) => {
+    (val: any, val1) => {
       echartDataGq.xData.length = 0;
+      echartDataGq.curData.data.length = 0;
       echartDataGq.maxData.data.length = 0;
+      echartDataGq.minData.data.length = 0;
+      echartDataGq.avgData.data.length = 0;
       echartDataSgList.length = 0;
       echartDataSg.xData.length = 0;
       echartDataSg.yData.length = 0;
       selectList.length = 0;
-      if (JSON.stringify(val) != '{}') {
-        if (val.fiber.length != 0) {
-          topList[0].value = val.fiber[0].readData.fmax;
-          topList[1].value = val.fiber[0].readData.fmin;
-          topList[2].value = val.fiber[0].readData.favg;
-          topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常';
-          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
-            echartDataGq.xData.push(el.pos);
-            echartDataGq.maxData.data.push(el.value);
-          });
-        } else {
-          topList[0].value = '--';
-          topList[1].value = '--';
-          topList[2].value = '--';
-          topList[3].text = '正常';
-        }
+      if (JSON.stringify(val) === '{}') return;
+
+      if (val.fiber.length != 0) {
+        const fiber: any = val.fiber[0];
+        topList[0].value = fiber.readData.fmax;
+        topList[1].value = fiber.readData.fmin;
+        topList[2].value = fiber.readData.favg;
+        topList[3].text = fiber.warnFlag ? '报警' : '正常';
+        const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
+        arr.forEach((el) => {
+          echartDataGq.xData.push(el.pos);
+          echartDataGq.curData.data.push(el.value);
+          echartDataGq.maxData.data.push(fiber.avgParams?.max_temperature_value || 0);
+          echartDataGq.minData.data.push(fiber.avgParams?.min_temperature_value || 0);
+          echartDataGq.avgData.data.push(fiber.avgParams?.avg_temperature_value || 0);
+        });
+      } else {
+        topList[0].value = '--';
+        topList[1].value = '--';
+        topList[2].value = '--';
+        topList[3].text = '正常';
+      }
 
-        if (val.bundletube.length != 0) {
-          selectSj.value = val.bundletube;
-          selectSj.value.forEach((el) => {
-            selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
-          });
-          selectData.value = selectData.value ? selectData.value : selectList[0].value;
-          let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
-          contentList[0].list[0].value = dataVal.readData.o2val;
-          contentList[0].list[1].value = dataVal.readData.ch2val;
-          contentList[1].list[0].value = dataVal.readData.coval;
-          contentList[1].list[1].value = dataVal.readData.chval;
-          contentList[2].list[0].value = dataVal.readData.co2val;
-          contentList[2].list[1].value = dataVal.readData.gasval;
-          contentList.forEach((el) => {
-            el.list.forEach((v) => {
-              v.time = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':'));
-            });
+      if (val.bundletube.length != 0) {
+        selectSj.value = val.bundletube;
+        selectSj.value.forEach((el) => {
+          selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
+        });
+        selectData.value = selectData.value ? selectData.value : selectList[0].value;
+        let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
+        contentList[0].list[0].value = dataVal.readData.o2val;
+        contentList[0].list[1].value = dataVal.readData.ch2val;
+        contentList[1].list[0].value = dataVal.readData.coval;
+        contentList[1].list[1].value = dataVal.readData.chval;
+        contentList[2].list[0].value = dataVal.readData.co2val;
+        contentList[2].list[1].value = dataVal.readData.gasval;
+        contentList.forEach((el) => {
+          el.list.forEach((v) => {
+            v.time = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':'));
           });
+        });
 
-          dataVal.history.forEach((el) => {
-            echartDataSg.xData.push(el.time);
-            if (echartDataSg.lengedData == 'O₂') {
-              echartDataSg.yData.push(el.o2val);
-            } else if (echartDataSg.lengedData == 'C₂H₄') {
-              echartDataSg.yData.push(el.ch2val);
-            } else if (echartDataSg.lengedData == 'C₂H₂') {
-              echartDataSg.yData.push(el.gasval);
-            } else if (echartDataSg.lengedData == 'CH₄') {
-              echartDataSg.yData.push(el.chval);
-            } else if (echartDataSg.lengedData == 'CO') {
-              echartDataSg.yData.push(el.coval);
-            } else if (echartDataSg.lengedData == 'CO₂') {
-              echartDataSg.yData.push(el.co2val);
-            }
-            echartDataSgList.push(el);
-          });
-          getmaxY();
-        } else {
-          contentList[0].list[0].value = '--';
-          contentList[0].list[1].value = '--';
-          contentList[1].list[0].value = '--';
-          contentList[1].list[1].value = '--';
-          contentList[2].list[0].value = '--';
-          contentList[2].list[1].value = '--';
-          contentList.forEach((el) => {
-            el.list.forEach((v) => {
-              v.time = '--';
-            });
+        echartDataSgList = dataVal.history;
+        getSgClick({
+          title: echartDataSg.lengedData,
+          dw: echartDataSg.lengedDataName,
+        });
+        getmaxY();
+      } else {
+        contentList[0].list[0].value = '--';
+        contentList[0].list[1].value = '--';
+        contentList[1].list[0].value = '--';
+        contentList[1].list[1].value = '--';
+        contentList[2].list[0].value = '--';
+        contentList[2].list[1].value = '--';
+        contentList.forEach((el) => {
+          el.list.forEach((v) => {
+            v.time = '--';
           });
-        }
+        });
       }
     },
     { deep: true }

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

@@ -172,7 +172,7 @@
     </div>
     <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
       <div class="footer-title">
-        <div class="echart-label">光钎测温系统实时温度监测</div>
+        <div class="echart-label">光纤测温系统实时温度监测</div>
       </div>
       <div class="echart-content">
         <echartLine2 :echartDataWd="echartDataWd" />
@@ -180,7 +180,7 @@
     </div>
     <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
       <div class="footer-title">
-        <div class="echart-label">光钎测温系统实时温度监测</div>
+        <div class="echart-label">光纤测温系统实时温度监测</div>
       </div>
       <div class="echart-content">
         <echartLine2 :echartDataWd="echartDataWd" />
@@ -324,9 +324,21 @@
   //外因火灾温度监测-图表数据
   let echartDataWd = reactive({
     xData: [],
+    curData: {
+      lengedData: '实时温度',
+      data: [],
+    },
     maxData: {
+      lengedData: '最大温度',
+      data: [],
+    },
+    minData: {
+      lengedData: '最小温度',
+      data: [],
+    },
+    avgData: {
+      lengedData: '平均温度',
       data: [],
-      lengedData: '实时温度',
     },
   });
 
@@ -396,107 +408,114 @@
     (val) => {
       console.log(val, 'val---------------');
       props.listData = val;
-      if (JSON.stringify(val) != '{}') {
-        echartDataSg1.xData.length = 0;
-        echartDataSg1.yData.length = 0;
-        echartDataSgList.length = 0;
-        echartDataWd.xData.length = 0;
-        echartDataWd.maxData.data.length = 0;
-        monitorlistYw.length = 0;
-        monitorlistHy.length = 0;
-        monitorlistPl.length = 0;
-        monitorlistWd.length = 0;
-        if (val.fiber.length != 0) {
-          topOutList[0].value = val.fiber[0].readData.fmax;
-          topOutList[1].value = val.fiber[0].readData.fmin;
-          topOutList[2].value = val.fiber[0].readData.favg;
-          topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
-          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
-            echartDataWd.xData.push(el.pos);
-            echartDataWd.maxData.data.push(el.value);
-          });
-        } else {
-          topOutList[0].value = '--';
-          topOutList[1].value = '--';
-          topOutList[2].value = '--';
-          topOutList[3].text = '正常';
-        }
+      if (JSON.stringify(val) === '{}') return;
+      echartDataSg1.xData.length = 0;
+      echartDataSg1.yData.length = 0;
+      echartDataSgList.length = 0;
+      echartDataWd.xData.length = 0;
+      echartDataWd.avgData.data.length = 0;
+      echartDataWd.maxData.data.length = 0;
+      echartDataWd.minData.data.length = 0;
+      echartDataWd.curData.data.length = 0;
+      monitorlistYw.length = 0;
+      monitorlistHy.length = 0;
+      monitorlistPl.length = 0;
+      monitorlistWd.length = 0;
+      if (val.fiber.length != 0) {
+        const fiber: any = val.fiber[0];
+        topOutList[0].value = fiber.readData.fmax;
+        topOutList[1].value = fiber.readData.fmin;
+        topOutList[2].value = fiber.readData.favg;
+        topOutList[3].text = fiber.warnFlag ? '存在风险' : '正常';
+        const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
+        arr.forEach((el) => {
+          echartDataWd.xData.push(el.pos);
+          echartDataWd.curData.data.push(el.value);
+          echartDataWd.maxData.data.push(fiber.avgParams?.max_temperature_value || 0);
+          echartDataWd.minData.data.push(fiber.avgParams?.min_temperature_value || 0);
+          echartDataWd.avgData.data.push(fiber.avgParams?.avg_temperature_value || 0);
+        });
+      } else {
+        topOutList[0].value = '--';
+        topOutList[1].value = '--';
+        topOutList[2].value = '--';
+        topOutList[3].text = '正常';
+      }
 
-        if (val.bundletube.length != 0) {
-          topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-          topContent.position = val.bundletube[0].strinstallpos || '--';
-          topContent.time = val.bundletube[0].readTime || '--';
-          topContent.warn =
-            val.bundletube[0].warnLevel == 0
-              ? '正常'
-              : val.bundletube[0].warnLevel == 101
-              ? '较低风险'
-              : val.bundletube[0].warnLevel == 102
-              ? '低风险'
-              : val.bundletube[0].warnLevel == 103
-              ? '中风险'
-              : val.bundletube[0].warnLevel == 104
-              ? '高风险'
-              : val.bundletube[0].warnLevel == 201
-              ? '报警'
-              : '正常';
-          val.bundletube[0].history.forEach((v) => {
-            echartDataSg1.xData.push(v.time);
-            if (echartDataSg1.lengedData == 'O₂') {
-              echartDataSg1.yData.push(v.o2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₄') {
-              echartDataSg1.yData.push(v.ch2val);
-            } else if (echartDataSg1.lengedData == 'CO') {
-              echartDataSg1.yData.push(v.coval);
-            } else if (echartDataSg1.lengedData == 'CH₄') {
-              echartDataSg1.yData.push(v.chval);
-            } else if (echartDataSg1.lengedData == 'CO₂') {
-              echartDataSg1.yData.push(v.co2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₂') {
-              echartDataSg1.yData.push(v.gasval);
-            }
-            echartDataSgList.push(v);
-          });
-        } else {
-          topContent.temperature = '--';
-          topContent.position = '--';
-          topContent.time = '--';
-          topContent.warn = '正常';
-        }
+      if (val.bundletube.length != 0) {
+        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+        topContent.position = val.bundletube[0].strinstallpos || '--';
+        topContent.time = val.bundletube[0].readTime || '--';
+        topContent.warn =
+          val.bundletube[0].warnLevel == 0
+            ? '正常'
+            : val.bundletube[0].warnLevel == 101
+            ? '较低风险'
+            : val.bundletube[0].warnLevel == 102
+            ? '低风险'
+            : val.bundletube[0].warnLevel == 103
+            ? '中风险'
+            : val.bundletube[0].warnLevel == 104
+            ? '高风险'
+            : val.bundletube[0].warnLevel == 201
+            ? '报警'
+            : '正常';
+        val.bundletube[0].history.forEach((v) => {
+          echartDataSg1.xData.push(v.time);
+          if (echartDataSg1.lengedData == 'O₂') {
+            echartDataSg1.yData.push(v.o2val);
+          } else if (echartDataSg1.lengedData == 'C₂H₄') {
+            echartDataSg1.yData.push(v.ch2val);
+          } else if (echartDataSg1.lengedData == 'CO') {
+            echartDataSg1.yData.push(v.coval);
+          } else if (echartDataSg1.lengedData == 'CH₄') {
+            echartDataSg1.yData.push(v.chval);
+          } else if (echartDataSg1.lengedData == 'CO₂') {
+            echartDataSg1.yData.push(v.co2val);
+          } else if (echartDataSg1.lengedData == 'C₂H₂') {
+            echartDataSg1.yData.push(v.gasval);
+          }
+          echartDataSgList.push(v);
+        });
+      } else {
+        topContent.temperature = '--';
+        topContent.position = '--';
+        topContent.time = '--';
+        topContent.warn = '正常';
+      }
 
-        if (val.smoke.length != 0) {
-          val.smoke.forEach((el) => {
-            monitorlistYw.push({
-              strinstallpos: el.strinstallpos,
-              val: el.readData.smokeval,
-              warnLevel_str: el.warnLevel_str,
-              readTime: el.readTime,
-            });
+      if (val.smoke.length != 0) {
+        val.smoke.forEach((el) => {
+          monitorlistYw.push({
+            strinstallpos: el.strinstallpos,
+            val: el.readData.smokeval,
+            warnLevel_str: el.warnLevel_str,
+            readTime: el.readTime,
           });
-        }
+        });
+      }
 
-        if (val.co.length != 0) {
-          val.co.forEach((el) => {
-            monitorlistHy.push(el);
-          });
-        }
+      if (val.co.length != 0) {
+        val.co.forEach((el) => {
+          monitorlistHy.push(el);
+        });
+      }
 
-        if (val.spray.length != 0) {
-          val.spray.forEach((el) => {
-            monitorlistPl.push(el);
-          });
-        }
+      if (val.spray.length != 0) {
+        val.spray.forEach((el) => {
+          monitorlistPl.push(el);
+        });
+      }
 
-        if (val.temperature.length != 0) {
-          val.temperature.forEach((el) => {
-            monitorlistWd.push({
-              strinstallpos: el.strinstallpos,
-              val: el.readData.fireval,
-              warnLevel_str: el.warnLevel_str,
-              readTime: el.readTime,
-            });
+      if (val.temperature.length != 0) {
+        val.temperature.forEach((el) => {
+          monitorlistWd.push({
+            strinstallpos: el.strinstallpos,
+            val: el.readData.fireval,
+            warnLevel_str: el.warnLevel_str,
+            readTime: el.readTime,
           });
-        }
+        });
       }
     },
     { immediate: true, deep: true }

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

@@ -0,0 +1,95 @@
+<template>
+  <EchartLine3 :x-data="chartConfig.x" :y1-data="chartConfig.y1" :y2-data="chartConfig.y2" :y3-data="chartConfig.y3" :y4-data="chartConfig.y4" />
+</template>
+
+<script lang="ts" setup>
+  import moment from 'moment';
+  import { ref, watch } from 'vue';
+  import EchartLine3 from './echartLine3.vue';
+
+  const props = defineProps<{
+    /** 测点图配置，该测点图在每次数据更新时追加曲线数据，但如果需要更新图表，那么需要更改id来告知组件 */
+    chart: { id: number | string; label: string; time: Date; data: [number, number, number, number] };
+    timeout?: number;
+  }>();
+
+  const chartConfig = ref<{
+    label: string;
+    /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
+    indexMark: number;
+    x: string[];
+    y1: number[];
+    y2: number[];
+    y3: number[];
+    y4: number[];
+  }>({
+    label: '',
+    indexMark: 0,
+    x: [],
+    y1: [],
+    y2: [],
+    y3: [],
+    y4: [],
+  });
+  let chartId = 0;
+
+  watch(
+    () => props.chart,
+    (el) => {
+      const arr = new Array(20).fill(0);
+      if (chartConfig.value.indexMark === 0 || chartId !== el.id) {
+        // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
+        const startFrom = moment(el.time);
+        chartConfig.value = {
+          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];
+          }),
+        };
+      } else {
+        // 更新配置
+        // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
+        // 那么应该按先进后出的队列模式更新数据了
+        const val = chartConfig.value;
+        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;
+      }
+    },
+    { immediate: true, deep: true }
+  );
+</script>
+
+<style scoped lang="less">
+  .work-box {
+    width: 100%;
+    height: 100%;
+  }
+</style>