550 lines
19 KiB
Vue
550 lines
19 KiB
Vue
<template>
|
|
<div>
|
|
<el-form :inline="true" :model="form" class="demo-form-inline">
|
|
<el-form-item>
|
|
<Area @click="handleNodeClick"></Area>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row :gutter="20" :style="`height:${vh}`">
|
|
<el-col :span="24" :style="`height:${vh}`">
|
|
<div v-loading="isLoading" id="electr1" style="width: 100%; height: 100%" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :style="`height:${vh};position: relative;`">
|
|
<!-- <el-radio-group v-model="radio1" class="radioGroup" size="mini">
|
|
<el-radio-button label="1">电压指标</el-radio-button>
|
|
<el-radio-button label="2">电流指标</el-radio-button></el-radio-group
|
|
> -->
|
|
<el-col :span="24" :style="`height:${vh}`">
|
|
<div v-loading="isLoading" id="electr3" style="width: 100%; height: 100%" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getRMpEmissionList, getRMpEmissionChart } from '@/api/SpecialAnalysisModuleDesign/WindFarm/EmissionAnalysis'
|
|
import { dicData } from '@/assets/commjs/dictypeData'
|
|
import Timeinterval from '@/views/components/Timeinterval.vue'
|
|
import Area from '@/views/components/Area/Area.vue'
|
|
export default {
|
|
components: { Area, Timeinterval },
|
|
props: {},
|
|
data() {
|
|
return {
|
|
typeList: [],
|
|
zoom: '',
|
|
form: {
|
|
id: '',
|
|
endTime: '',
|
|
startTime: '',
|
|
monitorTag: '',
|
|
type: ''
|
|
},
|
|
isLoading: false,
|
|
List: [],
|
|
electrList: [],
|
|
vh: undefined,
|
|
radio1: '1',
|
|
timeOptions: [
|
|
{ label: '年份', value: 1 },
|
|
{ label: '季度', value: 2 },
|
|
{ label: '月份', value: 3 }
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
this.info()
|
|
},
|
|
mounted() {
|
|
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
|
|
|
this.setHeight()
|
|
this.onSubmit()
|
|
window.addEventListener('resize', this.setHeight)
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.setHeight)
|
|
},
|
|
methods: {
|
|
setHeight() {
|
|
this.vh = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px'
|
|
let domID1 = document.getElementById('electr1')
|
|
setTimeout(() => {
|
|
;(domID1.style.width = document.getElementById('app-main-in').offsetWidth - 30 + 'px'),
|
|
(domID1.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
|
}, 0)
|
|
let domID3 = document.getElementById('electr3')
|
|
setTimeout(() => {
|
|
;(domID3.style.width = document.getElementById('app-main-in').offsetWidth + 'px'),
|
|
(domID3.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
|
}, 0)
|
|
let rmp
|
|
},
|
|
info() {
|
|
dicData('Monitoring_Labels', []).forEach(item => {
|
|
if (item.code == 'Power_Station') {
|
|
this.form.monitorTag = item.id
|
|
}
|
|
})
|
|
// 字典获取数据电压等级;
|
|
},
|
|
onSubmit() {
|
|
this.isLoading = true
|
|
this.form.startTime = this.$refs.interval.timeValue[0]
|
|
this.form.endTime = this.$refs.interval.timeValue[1]
|
|
this.form.type = this.$refs.interval.intervald
|
|
getRMpEmissionList(this.form).then(res => {
|
|
this.isLoading = false
|
|
this.List = res.data
|
|
this.electr1()
|
|
})
|
|
getRMpEmissionChart(this.form).then(res => {
|
|
this.isLoading = false
|
|
this.electrList = res.data
|
|
this.electr3()
|
|
})
|
|
},
|
|
handleNodeClick(data) {
|
|
this.form.id = data.id
|
|
},
|
|
electr1() {
|
|
let echarts = require('echarts')
|
|
let domID1 = document.getElementById('electr1')
|
|
setTimeout(() => {
|
|
;(domID1.style.width = document.getElementById('app-main-in').offsetWidth - 30 + 'px'),
|
|
(domID1.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
|
}, 0)
|
|
|
|
let myChart2 = echarts.init(domID1)
|
|
|
|
let hours = []
|
|
let days = [
|
|
'负序电流不平衡度',
|
|
'负序电流不平衡度平均超标天数',
|
|
'谐波电流平均超标天数',
|
|
'负序电流不平衡度超标占比'
|
|
]
|
|
|
|
let data = []
|
|
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
|
this.List.forEach((item, ind) => {
|
|
hours.push(item.orgName)
|
|
data.push(
|
|
[ind, 0, item.negativeSequenceCurrentUnbalance],
|
|
[ind, 1, item.negativeSequenceCurrentUnbalanceExcessDayAvg],
|
|
[ind, 2, item.iexcessDayAvg],
|
|
[ind, 3, item.negativeSequenceCurrentUnbalanceExcessRate]
|
|
)
|
|
})
|
|
|
|
let option = {
|
|
tooltip: {
|
|
//提示框组件
|
|
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
label: {
|
|
color: '#fff',
|
|
fontSize: 16
|
|
}
|
|
},
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontStyle: 'normal',
|
|
opacity: 0.35,
|
|
fontSize: 14
|
|
},
|
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
borderWidth: 0
|
|
},
|
|
animation: false,
|
|
grid: {
|
|
height: '75%',
|
|
top: '70px',
|
|
right: '50',
|
|
left: '180'
|
|
},
|
|
// toolbox: {
|
|
// show: true,
|
|
// top: '5',
|
|
// right: '15',
|
|
// feature: {
|
|
// saveAsImage: {}
|
|
// }
|
|
// },
|
|
xAxis: {
|
|
type: 'category',
|
|
position: 'top',
|
|
data: hours,
|
|
axisTick: { show: false },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: echartsColor.thread
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: echartsColor.WordColor
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: days,
|
|
splitArea: {
|
|
show: true
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
nameTextStyle: {
|
|
color: echartsColor.WordColor
|
|
},
|
|
axisLabel: {
|
|
color: echartsColor.WordColor
|
|
}
|
|
},
|
|
visualMap: {
|
|
text: ['', '各指标分析'],
|
|
show: true,
|
|
min: 0,
|
|
max: 80,
|
|
calculable: false,
|
|
orient: 'horizontal',
|
|
top: '0',
|
|
right: '40px',
|
|
textStyle: {
|
|
color: echartsColor.WordColor
|
|
},
|
|
|
|
inRange: {
|
|
color: ['#c4eaff', '#04b3f4'],
|
|
symbolSize: [10, 100]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'heatmap',
|
|
data: data,
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
option && myChart2.setOption(option, true)
|
|
window.echartsArr.push(myChart2)
|
|
setTimeout(function () {
|
|
myChart2.resize()
|
|
}, 0)
|
|
},
|
|
electr3() {
|
|
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
|
let echarts = require('echarts')
|
|
let domID3 = document.getElementById('electr3')
|
|
setTimeout(() => {
|
|
;(domID3.style.width = document.getElementById('app-main-in').offsetWidth + 'px'),
|
|
(domID3.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
|
}, 0)
|
|
let rmpEmissionIExcessRateMVO = []
|
|
let rmpEmissionIMVO = []
|
|
|
|
// for (let i = 0; i < this.electrList.rmpEmissionIExcessRateMVO.length; i++) {
|
|
// rmpEmissionIExcessRateMVO.push(
|
|
// this.electrList.rmpEmissionIExcessRateMVO[i]
|
|
// );
|
|
// rmpEmissionIMVO.push(this.electrList.rmpEmissionIMVO[i]);
|
|
// }
|
|
for (let k in this.electrList.rmpEmissionIExcessRateMVO) {
|
|
rmpEmissionIExcessRateMVO.push(this.electrList.rmpEmissionIExcessRateMVO[k])
|
|
}
|
|
for (let k in this.electrList.rmpEmissionIMVO) {
|
|
rmpEmissionIMVO.push(this.electrList.rmpEmissionIMVO[k])
|
|
}
|
|
|
|
let myChart2 = echarts.init(domID3)
|
|
|
|
let option = {
|
|
title: {
|
|
text: '指标',
|
|
left: 'center',
|
|
top: '5px',
|
|
textStyle: {
|
|
color: echartsColor.WordColor
|
|
}
|
|
},
|
|
tooltip: {
|
|
//提示框组件
|
|
trigger: 'axis',
|
|
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
label: {
|
|
color: '#fff',
|
|
fontSize: 16
|
|
}
|
|
},
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontStyle: 'normal',
|
|
opacity: 0.35,
|
|
fontSize: 14
|
|
},
|
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
borderWidth: 0
|
|
},
|
|
// toolbox: {
|
|
// show: true,
|
|
// top: '25',
|
|
// right: '50',
|
|
// feature: {
|
|
// saveAsImage: {}
|
|
// }
|
|
// },
|
|
legend: {
|
|
// data: ["高铁", "普铁"],
|
|
// top: "15%",
|
|
top: 40,
|
|
right: '2%',
|
|
itemWidth: 16,
|
|
itemHeight: 16,
|
|
itemGap: 28,
|
|
textStyle: {
|
|
color: echartsColor.WordColor,
|
|
rich: {
|
|
a: {
|
|
verticalAlign: 'middle'
|
|
}
|
|
},
|
|
|
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
|
}
|
|
},
|
|
grid: {
|
|
top: 100,
|
|
left: '50px',
|
|
bottom: '0',
|
|
right: '80px',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
containLabel: true
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
|
|
axisTick: { show: false },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: echartsColor.thread
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: echartsColor.WordColor
|
|
},
|
|
|
|
data: [
|
|
'2次',
|
|
'3次',
|
|
'4次',
|
|
'5次',
|
|
'6次',
|
|
'7次',
|
|
'8次',
|
|
'9次',
|
|
'10次',
|
|
'11次',
|
|
'12次',
|
|
'13次',
|
|
'14次',
|
|
'15次',
|
|
'16次',
|
|
'17次',
|
|
'18次',
|
|
'19次',
|
|
'20次',
|
|
'21次',
|
|
'22次',
|
|
'23次',
|
|
'24次',
|
|
'25次'
|
|
]
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '超标点占比:%',
|
|
|
|
minInterval: 1,
|
|
type: 'value',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: echartsColor.thread
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: echartsColor.WordColor
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: [echartsColor.thread],
|
|
type: 'dashed',
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
nameTextStyle: {
|
|
color: echartsColor.WordColor
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '平均超标天数:天',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
nameTextStyle: {
|
|
color: echartsColor.WordColor
|
|
},
|
|
axisLabel: {
|
|
color: echartsColor.WordColor
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '超标占比',
|
|
type: 'bar',
|
|
barMaxWidth: 30, // 柱状宽度
|
|
itemStyle: {
|
|
normal: {
|
|
color: echartsColor.FigureColor[0]
|
|
// borderRadius: [10],
|
|
}
|
|
},
|
|
data: rmpEmissionIMVO
|
|
},
|
|
// {
|
|
// name: "普铁超标占比",
|
|
// type: "bar",
|
|
// barMaxWidth: 30, // 柱状宽度
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: "#aeb1ae",
|
|
// borderRadius: [10],
|
|
// },
|
|
// },
|
|
// data: [4, 3, 6, 8, 4, 1, 6, 5, 15],
|
|
// },
|
|
{
|
|
name: '平均超标天数',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
symbolSize: 5, // 圆点大小
|
|
symbol: 'circle',
|
|
smooth: false, // 是否平滑曲线
|
|
itemStyle: {
|
|
// 折线圆点设置
|
|
normal: {
|
|
color: echartsColor.FigureColor[1],
|
|
barBorderRadius: 0
|
|
}
|
|
},
|
|
lineStyle: {
|
|
// 折线设置
|
|
normal: {
|
|
width: 2,
|
|
color: echartsColor.FigureColor[1]
|
|
}
|
|
},
|
|
data: rmpEmissionIExcessRateMVO
|
|
}
|
|
// {
|
|
// name: "普铁超标天数",
|
|
// type: "line",
|
|
// yAxisIndex: 1,
|
|
// symbolSize: 5, // 圆点大小
|
|
// symbol: "circle",
|
|
// smooth: false, // 是否平滑曲线
|
|
// itemStyle: {
|
|
// // 折线圆点设置
|
|
// normal: {
|
|
// color: "#e69533",
|
|
// barBorderRadius: 0,
|
|
// },
|
|
// },
|
|
// lineStyle: {
|
|
// // 折线设置
|
|
// normal: {
|
|
// width: 2,
|
|
// color: "#e69533",
|
|
// },
|
|
// },
|
|
// data: [4, 3, 6, 2, 4, 1, 6, 5, 15],
|
|
// },
|
|
]
|
|
}
|
|
option && myChart2.setOption(option, true)
|
|
window.echartsArr.push(myChart2)
|
|
setTimeout(function () {
|
|
myChart2.resize()
|
|
}, 0)
|
|
}
|
|
},
|
|
|
|
computed: {},
|
|
|
|
watch: {}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import url('../../../styles/comStyle.less');
|
|
::v-deep .el-form-item--small .el-form-item__content,
|
|
.el-form-item--small .el-form-item__label {
|
|
height: 32px;
|
|
}
|
|
::v-deep .Area {
|
|
.el-input {
|
|
width: 140px;
|
|
}
|
|
}
|
|
.radioGroup {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 0;
|
|
z-index: 10000;
|
|
}
|
|
</style>
|