yinq
/
XMXS-OS-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改

Browse Source
main
夜笙歌 1 week ago
parent a4d9192e0e
commit 4622690513
1 changed files with 140 additions and 21 deletions
Show Stats Download Patch File Download Diff File

161
src/views/ems/report/currentVoltageCurve/index.vue
Unescape Escape View File

@ -57,6 +57,7 @@
<Chart ref="Chart1" class="chart1"/>
<Chart ref="Chart2" class="chart2"/>
<Chart ref="Chart3" class="chart3"/>
</el-col>
</el-row>
@ -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;
}
</style>

Write Preview
Loading…
Cancel
Save