提交
This commit is contained in:
@@ -0,0 +1,542 @@
|
||||
<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 { getRMpInfluenceList, getRMpInfluenceChart } from '@/api/SpecialAnalysisModuleDesign/WindFarm/influence.js'
|
||||
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: ''
|
||||
},
|
||||
List: [],
|
||||
electrList: [],
|
||||
vh: undefined,
|
||||
radio1: '1',
|
||||
isLoading: false,
|
||||
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()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit()
|
||||
},
|
||||
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)
|
||||
},
|
||||
info() {
|
||||
dicData('Monitoring_Labels', []).forEach(item => {
|
||||
if (item.code == 'Electrified_Railways') {
|
||||
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
|
||||
getRMpInfluenceList(this.form).then(res => {
|
||||
this.isLoading = false
|
||||
this.List = res.data
|
||||
this.electr1()
|
||||
})
|
||||
getRMpInfluenceChart(this.form).then(res => {
|
||||
this.isLoading = false
|
||||
this.electrList = res.data
|
||||
this.electr3()
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.form.id = data.id
|
||||
},
|
||||
electr1() {
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
||||
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 = []
|
||||
this.List.forEach((item, ind) => {
|
||||
hours.push(item.orgName)
|
||||
data.push(
|
||||
[ind, 0, item.negativeSequenceVoltageUnbalance],
|
||||
[ind, 1, item.negativeSequenceVoltageUnbalanceExcessDayAvg],
|
||||
[ind, 2, item.vexcessDayAvg],
|
||||
[ind, 3, item.negativeSequenceVoltageUnbalanceExcessRate]
|
||||
)
|
||||
})
|
||||
|
||||
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 rmpInfluenceVExcessRateMVO = []
|
||||
let rmpInfluenceVMVO = []
|
||||
|
||||
for (let k in this.electrList.rmpInfluenceVExcessRateMVO) {
|
||||
rmpInfluenceVExcessRateMVO.push(this.electrList.rmpInfluenceVExcessRateMVO[k])
|
||||
}
|
||||
for (let k in this.electrList.rmpInfluenceVMVO) {
|
||||
rmpInfluenceVMVO.push(this.electrList.rmpInfluenceVMVO[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: rmpInfluenceVMVO
|
||||
},
|
||||
// {
|
||||
// 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: rmpInfluenceVExcessRateMVO
|
||||
}
|
||||
// {
|
||||
// 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>
|
||||
Reference in New Issue
Block a user