diff --git a/src/views/ems/report/currentSteamCurve/index.vue b/src/views/ems/report/currentSteamCurve/index.vue index 2aec159..e893edb 100644 --- a/src/views/ems/report/currentSteamCurve/index.vue +++ b/src/views/ems/report/currentSteamCurve/index.vue @@ -55,9 +55,8 @@ - @@ -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 {