From c607c111820bed4fbefbb437edac357cf4b399dd Mon Sep 17 00:00:00 2001 From: zch Date: Tue, 1 Jul 2025 16:09:24 +0800 Subject: [PATCH] =?UTF-8?q?refactor(ems):=20=E9=87=8D=E6=9E=84=E6=9B=B2?= =?UTF-8?q?=E7=BA=BF=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 根据设备类型动态显示图表 - 优化图表布局和样式 - 添加无数据提示信息 - 重构图表数据处理逻辑 - 优化图表联动缩放功能 --- .../ems/report/currentIOTCurve/index.vue | 448 ++++++------------ 1 file changed, 154 insertions(+), 294 deletions(-) diff --git a/src/views/ems/report/currentIOTCurve/index.vue b/src/views/ems/report/currentIOTCurve/index.vue index b0dc2d8..34d3ea8 100644 --- a/src/views/ems/report/currentIOTCurve/index.vue +++ b/src/views/ems/report/currentIOTCurve/index.vue @@ -55,11 +55,23 @@ - - - - - + + + + + +
+ + +
+ + + + + +
+

请在左侧树中选择具体设备节点查看数据曲线

+
@@ -96,6 +108,8 @@ export default { selectMonitorName: null, //计量设备信息 baseMonitorInfoList: [], + // 选中设备的类型，用于控制图表显示 + selectedDeviceType: null, // 采集方式时间范围 daterangeRecordTime: [], // 遮罩层 @@ -261,25 +275,58 @@ export default { /** 节点单击事件 */ handleNodeClick(data) { + // 曲线页面只支持单个设备，如果是父节点则不处理 + if (data.children && data.children.length > 0) { + this.$message.warning('曲线页面请选择具体设备节点查看数据'); + return; + } + // 点击节点时清空monitorIds，只使用选中的monitorId this.queryParams.monitorIds = []; - - /* this.queryParams.monitorCode = data.code*/ - this.queryParams.monitorId = data.code - - this.selectMonitorName = data.label - this.handleQuery() + this.queryParams.monitorId = data.code; + this.selectMonitorName = data.label; + + // 存储选中设备的类型，用于控制图表显示 + this.selectedDeviceType = data.type; + console.log('选中设备:', data.label, 'type:', data.type); + + this.handleQuery(); }, /** 曲线 */ async getChart() { - if (this.queryParams.monitorId == null) { + if (this.queryParams.monitorId == null || !this.selectedDeviceType) { return } let query = JSON.parse(JSON.stringify(this.queryParams)) - // const {data} = await vibrationInstantList(query) const {data} = await getRecordIotenvInstantList(query) - let option1 = { + + // 根据设备类型创建对应的图表配置 + this.createChartByType(data); + }, + + // 根据设备类型创建图表 + createChartByType(data) { + switch (this.selectedDeviceType) { + case 5: // 温度传感器：只显示温度 + this.createTemperatureChart(data); + break; + case 6: // 温湿度传感器：显示温度和湿度 + this.createHumidityChart(data); + this.createTemperatureChart(data); + this.linkCharts(['Chart1', 'Chart2']); + break; + case 7: // 噪声传感器：只显示噪声 + this.createNoiseChart(data); + break; + default: + console.warn('未知的设备类型:', this.selectedDeviceType); + } + }, + + // 创建湿度图表 + createHumidityChart(data) { + let option = { title: { text: this.selectMonitorName + ' 湿度曲线', x: 'center' @@ -308,25 +355,25 @@ export default { xAxis: { data: data.map(e => e.recodeTime), axisLine: { - show: true, //隐藏X轴轴线 + show: true, lineStyle: { color: '#000000' } }, axisTick: { - show: true //隐藏X轴刻度 + show: true }, axisLabel: { show: true, textStyle: { - color: '#000000' //X轴文字颜色 + color: '#000000' } } }, yAxis: [ { type: 'value', - name: '湿度', + name: '湿度(%)', nameTextStyle: { color: '#000000' }, @@ -353,27 +400,22 @@ export default { series: [ { name: '湿度', - connectNulls: true, // 关键配置 + connectNulls: true, type: 'line', - smooth: true, //平滑曲线显示 - showAllSymbol: true, //显示所有图形。 - symbol: 'circle', //标记的图形为实心圆 - symbolSize: 10, //标记的大小 - // itemStyle: { - // //折线拐点标志的样式 - // color: "#058cff", - // }, - // lineStyle: { - // color: "#058cff", - // }, - // areaStyle: { - // color: "rgba(5,140,255, 0.2)", - // }, + smooth: true, + showAllSymbol: true, + symbol: 'circle', + symbolSize: 10, data: data.map(e => e.humidity) - }, + } ] - } - let option2 = { + }; + this.$refs.Chart1.setData(option); + }, + + // 创建温度图表 + createTemperatureChart(data) { + let option = { title: { text: this.selectMonitorName + ' 温度曲线', x: 'center' @@ -384,7 +426,6 @@ export default { left: '10%', right: '3%' }, - dataZoom: [{ type: 'slider' }], @@ -403,18 +444,18 @@ export default { xAxis: { data: data.map(e => e.recodeTime), axisLine: { - show: true, //隐藏X轴轴线 + show: true, lineStyle: { color: '#000000' } }, axisTick: { - show: true //隐藏X轴刻度 + show: true }, axisLabel: { show: true, textStyle: { - color: '#000000' //X轴文字颜色 + color: '#000000' } } }, @@ -448,120 +489,22 @@ export default { series: [ { name: '温度(℃)', - connectNulls: true, // 关键配置 + connectNulls: true, type: 'line', - smooth: true, //平滑曲线显示 - showAllSymbol: true, //显示所有图形。 - symbol: 'circle', //标记的图形为实心圆 - symbolSize: 10, //标记的大小 - // itemStyle: { - // //折线拐点标志的样式 - // color: "#058cff", - // }, - // lineStyle: { - // color: "#058cff", - // }, - // areaStyle: { - // color: "rgba(5,140,255, 0.2)", - // }, + smooth: true, + showAllSymbol: true, + symbol: 'circle', + symbolSize: 10, data: data.map(e => e.temperature) - }, + } ] - } - // let option3 = { - // title: { - // text: this.selectMonitorName + ' 照度曲线', - // 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.recodeTime), - // axisLine: { - // show: true, //隐藏X轴轴线 - // lineStyle: { - // color: '#000000' - // } - // }, - // axisTick: { - // show: true //隐藏X轴刻度 - // }, - // axisLabel: { - // show: true, - // textStyle: { - // color: '#000000' //X轴文字颜色 - // } - // } - // }, - // yAxis: [ - // { - // type: 'value', - // name: '照度', - // 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, //标记的大小 - // // itemStyle: { - // // //折线拐点标志的样式 - // // color: "#058cff", - // // }, - // // lineStyle: { - // // color: "#058cff", - // // }, - // // areaStyle: { - // // color: "rgba(5,140,255, 0.2)", - // // }, - // data: data.map(e => e.illuminance) - // }, - // ] - // } - let option4 = { + }; + this.$refs.Chart2.setData(option); + }, + + // 创建噪声图表 + createNoiseChart(data) { + let option = { title: { text: this.selectMonitorName + ' 噪声曲线', x: 'center' @@ -590,25 +533,25 @@ export default { xAxis: { data: data.map(e => e.recodeTime), axisLine: { - show: true, //隐藏X轴轴线 + show: true, lineStyle: { color: '#000000' } }, axisTick: { - show: true //隐藏X轴刻度 + show: true }, axisLabel: { show: true, textStyle: { - color: '#000000' //X轴文字颜色 + color: '#000000' } } }, yAxis: [ { type: 'value', - name: '噪声', + name: '噪声(dB)', nameTextStyle: { color: '#000000' }, @@ -635,154 +578,71 @@ export default { series: [ { name: '噪声', - connectNulls: true, // 关键配置 + connectNulls: true, type: 'line', - smooth: true, //平滑曲线显示 - showAllSymbol: true, //显示所有图形。 - symbol: 'circle', //标记的图形为实心圆 - symbolSize: 10, //标记的大小 - // itemStyle: { - // color: "#058cff", - // }, - // lineStyle: { - // color: "#058cff", - // }, - // areaStyle: { - // color: "rgba(5,140,255, 0.2)", - // }, + smooth: true, + showAllSymbol: true, + symbol: 'circle', + symbolSize: 10, data: data.map(e => e.noise) - }, + } ] - } - // let option5 = { - // title: { - // text: this.selectMonitorName + ' 硫化氢浓度曲线', - // 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.recodeTime), - // axisLine: { - // show: true, //隐藏X轴轴线 - // lineStyle: { - // color: '#000000' - // } - // }, - // axisTick: { - // show: true //隐藏X轴刻度 - // }, - // axisLabel: { - // show: true, - // textStyle: { - // color: '#000000' //X轴文字颜色 - // } - // } - // }, - // yAxis: [ - // { - // type: 'value', - // name: '硫化氢浓度', - // 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, //标记的大小 - // // itemStyle: { - // // color: "#058cff", - // // }, - // // lineStyle: { - // // color: "#058cff", - // // }, - // // areaStyle: { - // // color: "rgba(5,140,255, 0.2)", - // // }, - // data: data.map(e => e.concentration) - // }, - // ] - // } + }; + this.$refs.Chart4.setData(option); + }, - - this.$refs.Chart1.setData(option1) - this.$refs.Chart2.setData(option2) - // this.$refs.Chart3.setData(option3) - this.$refs.Chart4.setData(option4) - // this.$refs.Chart5.setData(option5) - echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart, this.$refs.Chart4.chart) - this.$refs.Chart1.chart.on('datazoom', (e) => { - option2.dataZoom[0].start = e.start - option2.dataZoom[0].end = e.end - this.$refs.Chart2.setData(option2) - option4.dataZoom[0].start = e.start - option4.dataZoom[0].end = e.end - this.$refs.Chart4.setData(option4) - }) - this.$refs.Chart2.chart.on('datazoom', (e) => { - option1.dataZoom[0].start = e.start - option1.dataZoom[0].end = e.end - this.$refs.Chart1.setData(option1) - option4.dataZoom[0].start = e.start - option4.dataZoom[0].end = e.end - this.$refs.Chart4.setData(option4) - }) - this.$refs.Chart4.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.Chart4.setData(option1) - }) + // 链接多个图表的缩放联动 + linkCharts(chartRefs) { + if (chartRefs.length < 2) return; + + // 连接图表 + const charts = chartRefs.map(ref => this.$refs[ref].chart); + echarts.connect(...charts); + + // 设置缩放联动 + chartRefs.forEach((ref, index) => { + this.$refs[ref].chart.on('datazoom', (e) => { + chartRefs.forEach((otherRef, otherIndex) => { + if (index !== otherIndex) { + // 更新其他图表的缩放 + this.$refs[otherRef].chart.dispatchAction({ + type: 'dataZoom', + start: e.start, + end: e.end + }); + } + }); + }); + }); } } }