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;
+}