Files
hb_pqs_web/src/views/SpecialAnalysisModuleDesign/ElectricRailwayLineCld/influence.vue

543 lines
19 KiB
Vue
Raw Normal View History

2025-01-09 19:02:44 +08:00
<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: {
2025-03-06 14:44:33 +08:00
text: '指标',
2025-01-09 19:02:44 +08:00
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>