From 4622690513c213281a4e53ffebc3009893c6f50c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Tue, 5 Nov 2024 15:48:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ems/report/currentVoltageCurve/index.vue | 161 +++++++++++++++--- 1 file changed, 140 insertions(+), 21 deletions(-) diff --git a/src/views/ems/report/currentVoltageCurve/index.vue b/src/views/ems/report/currentVoltageCurve/index.vue index 4333e92..420bb9f 100644 --- a/src/views/ems/report/currentVoltageCurve/index.vue +++ b/src/views/ems/report/currentVoltageCurve/index.vue @@ -57,6 +57,7 @@ + @@ -69,10 +70,10 @@ import { listRecordDnbInstant, getRecordDnbInstant, dnbInstantList } from '@/api/ems/record/recordDnbInstant' -import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo' +import {getMonitorInfoTree} from '@/api/ems/base/baseMonitorInfo' import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' -import { parseTime } from '@/utils/ruoyi' +import {parseTime} from '@/utils/ruoyi' import Chart from '@/components/Charts/Chart' import * as echarts from 'echarts' @@ -134,26 +135,26 @@ export default { // 表单校验 rules: { objId: [ - { required: true, message: '编号不能为空', trigger: 'blur' } + {required: true, message: '编号不能为空', trigger: 'blur'} ] }, columns: [ - { key: 0, label: `主键标识`, visible: false }, - { key: 1, label: `计量设备编号`, visible: true }, - { key: 2, label: `采集时间`, visible: true }, - { key: 3, label: `A项电压`, visible: true }, - { key: 4, label: `B项电压`, visible: true }, - { key: 5, label: `C项电压`, visible: true }, - { key: 6, label: `A项电流`, visible: true }, - { key: 7, label: `B项电流`, visible: true }, - { key: 8, label: `C项电流`, visible: true }, - { key: 9, label: `记录时间`, visible: true }, - { key: 10, label: `功率因数`, visible: true }, - { key: 11, label: `正向有功`, visible: true }, - { key: 12, label: `有功功率`, visible: false }, - { key: 13, label: `无功功率`, visible: false }, - { key: 14, label: `采集方式`, visible: true }, - { key: 15, label: `计量设备名称`, visible: true } + {key: 0, label: `主键标识`, visible: false}, + {key: 1, label: `计量设备编号`, visible: true}, + {key: 2, label: `采集时间`, visible: true}, + {key: 3, label: `A项电压`, visible: true}, + {key: 4, label: `B项电压`, visible: true}, + {key: 5, label: `C项电压`, visible: true}, + {key: 6, label: `A项电流`, visible: true}, + {key: 7, label: `B项电流`, visible: true}, + {key: 8, label: `C项电流`, visible: true}, + {key: 9, label: `记录时间`, visible: true}, + {key: 10, label: `功率因数`, visible: true}, + {key: 11, label: `正向有功`, visible: true}, + {key: 12, label: `有功功率`, visible: false}, + {key: 13, label: `无功功率`, visible: false}, + {key: 14, label: `采集方式`, visible: true}, + {key: 15, label: `计量设备名称`, visible: true} ] } }, @@ -233,7 +234,7 @@ export default { /** 查询计量设备信息下拉树结构 */ getTreeselect() { - getMonitorInfoTree({ monitorType: 2 }).then(response => { + getMonitorInfoTree({monitorType: 2}).then(response => { this.monitorInfoOptions = response.data }) }, @@ -257,7 +258,7 @@ export default { return } let query = JSON.parse(JSON.stringify(this.queryParams)) - const { data } = await dnbInstantList(query) + const {data} = await dnbInstantList(query) let option1 = { title: { text: this.selectMonitorName + ' 电流曲线', @@ -519,8 +520,121 @@ export default { } ] } + let option3 = { + title: { + text: this.selectMonitorName + ' 功率曲线', + x: 'center' + }, + grid: { + top: '15%', + bottom: '10%', + left: '3%', + 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: '#000' + } + }, + axisTick: { + show: true //隐藏X轴刻度 + }, + axisLabel: { + show: true, + textStyle: { + color: '#000' //X轴文字颜色 + } + } + }, + yAxis: [ + { + type: 'value', + name: '电流（A）', + nameTextStyle: { + color: '#000' + }, + splitLine: { + show: false + }, + axisTick: { + show: true + }, + axisLine: { + show: true, + lineStyle: { + color: '#000' + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#000' + } + } + } + ], + series: [ + { + name: '有功功率', + type: 'line', + smooth: true, //平滑曲线显示 + showAllSymbol: true, //显示所有图形。 + symbol: "emptyCircle", //标记的图形为实心圆 + symbolSize: 1, //标记的大小 + // itemStyle: { + // //折线拐点标志的样式 + // color: "#058cff", + // }, + // lineStyle: { + // color: "#058cff", + // }, + // areaStyle: { + // color: "rgba(5,140,255, 0.2)", + // }, + data: data.map(e => e.activePower||0) + }, + { + name: '无功功率', + type: 'line', + smooth: true, //平滑曲线显示 + showAllSymbol: true, //显示所有图形。 + symbol: "emptyCircle", //标记的图形为实心圆 + symbolSize: 1, //标记的大小 + // itemStyle: { + // //折线拐点标志的样式 + // color: "#058cff", + // }, + // lineStyle: { + // color: "#058cff", + // }, + // areaStyle: { + // color: "rgba(5,140,255, 0.2)", + // }, + data: data.map(e => e.reactivePower||0) + }, + ] + } this.$refs.Chart1.setData(option1) this.$refs.Chart2.setData(option2) + this.$refs.Chart3.setData(option3) echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart) this.$refs.Chart1.chart.on('datazoom', (e) => { option2.dataZoom[0].start = e.start @@ -546,4 +660,9 @@ export default { width: 100%; height: 40vh; } + +.chart3 { + width: 100%; + height: 40vh; +}