feat(ems): 实现蒸汽监测数据的温度和压力曲线

- 新增温度和压力曲线的图表配置和数据处理逻辑
- 实现三个图表（瞬时流量、温度、压力）之间的联动缩放功能
- 优化图表样式，增加平均值显示等信息
- 调整图表布局，使其适应新的展示需求

src/views/ems/report/currentSteamCurve/index.vue

@@ -55,9 +55,8 @@
           </el-form-item>
         </el-form>
         <Chart ref="Chart1" class="chart1"/>
-<!--        <Chart ref="Chart2" class="chart2"/>
+        <Chart ref="Chart2" class="chart2"/>
         <Chart ref="Chart3" class="chart3"/>
-        <Chart ref="Chart4" class="chart4"/>-->
       </el-col>
     </el-row>
   </div>
@@ -72,7 +71,7 @@ import { parseTime } from '@/utils/ruoyi'
 import Chart from '@/components/Charts/Chart'
 import * as echarts from 'echarts'
 import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam";
-import {listRecordSteamInstant, steamInstantList} from "@/api/ems/record/recordSteamInstant";
+import {listRecordSteamInstant, steamInstantAvg, steamInstantList} from "@/api/ems/record/recordSteamInstant";
 
 export default {
   name: 'currentSteamCurve',
@@ -263,9 +262,11 @@ export default {
     async getChart() {
       let query = JSON.parse(JSON.stringify(this.queryParams))
       const {data} = await steamInstantList(query)
+
       let option1 = {
         title: {
-          text: this.selectMonitorName + ' 瞬时流量',
+          text: this.selectMonitorName + ' 瞬时流量' + ' (平均值:'+
+            ((data.map(e=>parseFloat(e.fluxFlow)).reduce((a,b)=>a+b,0))/data.length).toFixed(2)+")",
           x: 'center'
         },
         grid: {
@@ -310,7 +311,7 @@ export default {
         yAxis: [
           {
             type: 'value',
-            name: '瞬时流量',
+            name: '瞬时流量y',
             nameTextStyle: {
               color: '#000000'
             },
@@ -346,15 +347,224 @@ export default {
           },
         ]
       }
+       let option2 = {
+/*         过滤无效数据：使用 filter 方法过滤掉 temperature 为 undefined 或 null 的数据
+         title: {
+           text: this.selectMonitorName + ' 温度' + ' (平均值:' +
+             ((data.filter(e => e.temperature !== undefined && e.temperature !== null)
+                 .map(e => parseFloat(e.temperature))
+                 .reduce((a, b) => a + b, 0)) /
+               data.filter(e => e.temperature !== undefined && e.temperature !== null).length).toFixed(2) + ")",
+           x: 'center'
+         },*/
+
+
+         title: {
+           text: this.selectMonitorName + ' 温度曲线' + ' (平均值:'+
+             ((data.map(e=>parseFloat(e.temperature)).reduce((a,b)=>a+b,0))/data.length).toFixed(2)+")",
+           x: 'center'
+         },
+         grid: {
+           top: '15%',
+           bottom: '10%',
+           left: '10%',
+           right: '3%'
+         },
+
+         dataZoom: [{
+           type: 'slider'
+         }],
+         tooltip: {
+           trigger: 'axis',
+           axisPointer: {
+             type: 'shadow',
+             label: {
+               show: true
+             }
+           }
+         },
+         legend: {
+           right: 0
+         },
+         xAxis: {
+           data: data.map(e => e.collectTime),
+           axisLine: {
+             show: true, //隐藏X轴轴线
+             lineStyle: {
+               color: '#000000'
+             }
+           },
+           axisTick: {
+             show: true //隐藏X轴刻度
+           },
+           axisLabel: {
+             show: true,
+             textStyle: {
+               color: '#000000' //X轴文字颜色
+             }
+           }
+         },
+         yAxis: [
+           {
+             type: 'value',
+             name: '温度y',
+             nameTextStyle: {
+               color: '#000000'
+             },
+             splitLine: {
+               show: false
+             },
+             axisTick: {
+               show: true
+             },
+             axisLine: {
+               show: true,
+               lineStyle: {
+                 color: '#000000'
+               }
+             },
+             axisLabel: {
+               show: true,
+               textStyle: {
+                 color: '#000000'
+               }
+             }
+           }
+         ],
+         series: [
+           {
+             name: '温度',
+             type: 'line',
+             smooth: true, //平滑曲线显示
+             showAllSymbol: true, //显示所有图形。
+             symbol: 'circle', //标记的图形为实心圆
+             symbolSize: 10, //标记的大小
+             data: data.map(e => e.temperature)
+           },
+         ]
+       }
+       let option3 = {
+         title: {
+           text: this.selectMonitorName + ' 压力曲线' + ' (平均值:'+
+             ((data.map(e=>parseFloat(e.press)).reduce((a,b)=>a+b,0))/data.length).toFixed(2)+")",
+           x: 'center'
+         },
+         grid: {
+           top: '15%',
+           bottom: '10%',
+           left: '10%',
+           right: '3%'
+         },
+         tooltip: {
+           trigger: 'axis',
+           axisPointer: {
+             type: 'shadow',
+             label: {
+               show: true
+             }
+           }
+         },
+         dataZoom: [{
+           type: 'slider'
+         }],
+         legend: {
+           right: 0
+         },
+         xAxis: {
+           data: data.map(e => e.collectTime),
+           axisLine: {
+             show: true, //隐藏X轴轴线
+             lineStyle: {
+               color: '#000000'
+             }
+           },
+           axisTick: {
+             show: true //隐藏X轴刻度
+           },
+           axisLabel: {
+             show: true,
+             textStyle: {
+               color: '#000000' //X轴文字颜色
+             }
+           }
+         },
+         yAxis: [
+           {
+             type: 'value',
+             name: '压力y',
+             nameTextStyle: {
+               color: '#000000'
+             },
+             splitLine: {
+               show: false
+             },
+             axisTick: {
+               show: true
+             },
+             axisLine: {
+               show: true,
+               lineStyle: {
+                 color: '#000000'
+               }
+             },
+             axisLabel: {
+               show: true,
+               textStyle: {
+                 color: '#000000'
+               }
+             }
+           }
+         ],
+         series: [
+           {
+             name: '压力',
+             type: 'line',
+             smooth: true, //平滑曲线显示
+             showAllSymbol: true, //显示所有图形。
+             symbol: 'circle', //标记的图形为实心圆
+             symbolSize: 10, //标记的大小
+             data: data.map(e => e.press)
+           },
+         ]
+       }
 
       this.$refs.Chart1.setData(option1)
-      echarts.connect(this.$refs.Chart1.chart)
+      this.$refs.Chart2.setData(option2)
+      this.$refs.Chart3.setData(option3)
 
-      this.$refs.Chart1.chart.on('datazoom', (e) => {
+      echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart, this.$refs.Chart3.chart)
+
+/*      this.$refs.Chart1.chart.on('datazoom', (e) => {
       option.dataZoom[0].start = e.start;
       option.dataZoom[0].end = e.end;
       this.$refs.Chart1.setData(option);
-    });
+    });*/
+
+      this.$refs.Chart1.chart.on('datazoom', (e) => {
+        option2.dataZoom[0].start = e.start
+        option2.dataZoom[0].end = e.end
+        this.$refs.Chart2.setData(option2)
+        option3.dataZoom[0].start = e.start
+        option3.dataZoom[0].end = e.end
+        this.$refs.Chart3.setData(option3)
+
+      })
+       this.$refs.Chart2.chart.on('datazoom', (e) => {
+         option1.dataZoom[0].start = e.start
+         option1.dataZoom[0].end = e.end
+         this.$refs.Chart1.setData(option1)
+         option3.dataZoom[0].start = e.start
+         option3.dataZoom[0].end = e.end
+         this.$refs.Chart3.setData(option3)
+       })
+       this.$refs.Chart3.chart.on('datazoom', (e) => {
+         option2.dataZoom[0].start = e.start
+         option2.dataZoom[0].end = e.end
+         this.$refs.Chart2.setData(option2)
+         option1.dataZoom[0].start = e.start
+         option1.dataZoom[0].end = e.end
+         this.$refs.Chart1.setData(option1)
+       })
 
     }
   }
@@ -363,7 +573,19 @@ export default {
 <style scoped >
 
 .chart1 {
-  width: 100%;
+  width: 50%;
-  height: 75vh;
+  height: 40vh;
+  display: inline-block;
+}
+
+.chart2 {
+  width: 50%;
+  height: 40vh;
+  display: inline-block;
+}
+.chart3 {
+  width: 50%;
+  height: 40vh;
+  display: inline-block;
 }
 </style>