From 8c9b9d142efef493d13b9d9ef69eec06afe8738a Mon Sep 17 00:00:00 2001 From: zch Date: Mon, 25 Nov 2024 17:04:03 +0800 Subject: [PATCH] =?UTF-8?q?feat(ems):=20=E5=AE=9E=E7=8E=B0=E8=92=B8?= =?UTF-8?q?=E6=B1=BD=E7=9B=91=E6=B5=8B=E6=95=B0=E6=8D=AE=E7=9A=84=E6=B8=A9?= =?UTF-8?q?=E5=BA=A6=E5=92=8C=E5=8E=8B=E5=8A=9B=E6=9B=B2=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增温度和压力曲线的图表配置和数据处理逻辑 - 实现三个图表（瞬时流量、温度、压力）之间的联动缩放功能 - 优化图表样式，增加平均值显示等信息 - 调整图表布局，使其适应新的展示需求 --- .../ems/report/currentSteamCurve/index.vue | 242 +++++++++++++++++- 1 file changed, 232 insertions(+), 10 deletions(-) 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 {