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="12" :style="`height:${vh}`">
|
|
|
|
|
<div v-loading="isLoading" id="electr1" style="width: 100%; height: 100%" />
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12" :style="`height:${vh}`">
|
|
|
|
|
<div v-loading="isLoading" id="electr2" 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" @change="change">
|
|
|
|
|
<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 { dicData } from '@/assets/commjs/dictypeData'
|
|
|
|
|
import {
|
|
|
|
|
getHarmonicCurrent,
|
|
|
|
|
getHarmonicVoltage,
|
|
|
|
|
getUnitCurrent,
|
|
|
|
|
getUnitVoltage
|
|
|
|
|
} from '@/api/SpecialAnalysisModuleDesign/WindFarm/ElectricityOverview'
|
|
|
|
|
import Timeinterval from '@/views/components/Timeinterval.vue'
|
|
|
|
|
import Area from '@/views/components/Area/Area.vue'
|
|
|
|
|
export default {
|
|
|
|
|
components: { Area, Timeinterval },
|
|
|
|
|
props: {},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
zoom: '',
|
|
|
|
|
form: {
|
|
|
|
|
id: '',
|
|
|
|
|
endTime: '',
|
|
|
|
|
startTime: '',
|
|
|
|
|
monitorTag: '',
|
|
|
|
|
type: ''
|
|
|
|
|
},
|
|
|
|
|
isLoading: false,
|
|
|
|
|
electr1List: [],
|
|
|
|
|
electr2List: [],
|
|
|
|
|
electr3List: [],
|
|
|
|
|
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()
|
|
|
|
|
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 / 2 + 'px'),
|
|
|
|
|
(domID1.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
|
|
|
|
}, 0)
|
|
|
|
|
let domID2 = document.getElementById('electr2')
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
|
|
|
|
|
(domID2.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
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// 字典获取数据电压等级;
|
|
|
|
|
},
|
|
|
|
|
change() {
|
|
|
|
|
if (this.radio1 == 1) {
|
|
|
|
|
//获取风电场指标总览
|
|
|
|
|
getUnitVoltage(this.form).then(res => {
|
|
|
|
|
this.electr3List = res.data
|
|
|
|
|
this.electr3()
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
//获取风电场指标总览
|
|
|
|
|
getUnitCurrent(this.form).then(res => {
|
|
|
|
|
this.electr3List = res.data
|
|
|
|
|
this.electr3()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
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
|
|
|
|
|
// 获取风电场指标总览-谐波电流
|
|
|
|
|
getHarmonicCurrent(this.form).then(res => {
|
|
|
|
|
this.isLoading = false
|
|
|
|
|
this.electr1List = res.data
|
|
|
|
|
this.electr1()
|
|
|
|
|
})
|
|
|
|
|
// 获取风电场指标总览-谐波电压
|
|
|
|
|
getHarmonicVoltage(this.form).then(res => {
|
|
|
|
|
this.isLoading = false
|
|
|
|
|
this.electr2List = res.data
|
|
|
|
|
this.electr2()
|
|
|
|
|
})
|
|
|
|
|
//获取风电场指标总览
|
|
|
|
|
getUnitVoltage(this.form).then(res => {
|
|
|
|
|
this.isLoading = false
|
|
|
|
|
this.electr3List = 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 / 2 + 'px'),
|
|
|
|
|
(domID1.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
|
|
|
|
}, 0)
|
|
|
|
|
|
|
|
|
|
let histograms = []
|
|
|
|
|
let lineCharts = []
|
|
|
|
|
let nameList = []
|
|
|
|
|
this.electr1List.forEach(item => {
|
|
|
|
|
histograms.push(item.histograms)
|
|
|
|
|
lineCharts.push(item.lineCharts)
|
|
|
|
|
nameList.push(item.type)
|
|
|
|
|
})
|
|
|
|
|
let myChart2 = echarts.init(domID1)
|
|
|
|
|
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
|
|
|
|
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: '25',
|
|
|
|
|
// 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: '40px',
|
|
|
|
|
right: '50px',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
containLabel: true
|
|
|
|
|
},dataZoom: [
|
|
|
|
|
{
|
|
|
|
|
type: 'inside',
|
|
|
|
|
height: 13,
|
|
|
|
|
start: 0,
|
|
|
|
|
bottom: '20px',
|
|
|
|
|
end: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
start: 0,
|
|
|
|
|
height: 13,
|
|
|
|
|
bottom: '20px',
|
|
|
|
|
end: 100
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
calculable: true,
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
splitArea: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
axisTick: { show: false },
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: echartsColor.thread
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: echartsColor.WordColor
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data: nameList
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '超标点占比:%',
|
|
|
|
|
|
|
|
|
|
minInterval: 1,
|
2025-03-06 14:44:33 +08:00
|
|
|
|
2025-01-09 19:02:44 +08:00
|
|
|
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',
|
|
|
|
|
minInterval: 1,
|
|
|
|
|
name: '平均超标天数:天',
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: echartsColor.WordColor
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: echartsColor.WordColor
|
|
|
|
|
},
|
|
|
|
|
splitArea: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '超标占比',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barMaxWidth: 30, // 柱状宽度
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: { show: true, color: echartsColor.FigureColor[0] }
|
|
|
|
|
},
|
|
|
|
|
data: histograms
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// name: "普铁超标占比",
|
|
|
|
|
// type: "bar",
|
|
|
|
|
// barMaxWidth: 30, // 柱状宽度
|
|
|
|
|
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// normal: {
|
|
|
|
|
// color: "#eb6f46",
|
|
|
|
|
// //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: lineCharts
|
|
|
|
|
}
|
|
|
|
|
// {
|
|
|
|
|
// name: "普铁超标天数",
|
|
|
|
|
// type: "line",
|
|
|
|
|
// yAxisIndex: 1,
|
|
|
|
|
// symbolSize: 5, // 圆点大小
|
|
|
|
|
// symbol: "circle",
|
|
|
|
|
// smooth: false, // 是否平滑曲线
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// // 折线圆点设置
|
|
|
|
|
// normal: {
|
|
|
|
|
// color: "#9dd4cd",
|
|
|
|
|
// barBorderRadius: 0,
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// // 折线设置
|
|
|
|
|
// normal: {
|
|
|
|
|
// width: 2,
|
|
|
|
|
// color: "#9dd4cd",
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// data: [4, 3, 6, 2, 4, 1, 6, 5, 15],
|
|
|
|
|
// },
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
option && myChart2.setOption(option, true)
|
|
|
|
|
window.echartsArr.push(myChart2)
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
myChart2.resize()
|
|
|
|
|
}, 0)
|
|
|
|
|
},
|
|
|
|
|
electr2() {
|
|
|
|
|
let echarts = require('echarts')
|
|
|
|
|
let domID2 = document.getElementById('electr2')
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
|
|
|
|
|
(domID2.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
|
|
|
|
}, 0)
|
|
|
|
|
let histograms = []
|
|
|
|
|
let lineCharts = []
|
|
|
|
|
let nameList = []
|
|
|
|
|
this.electr2List.forEach(item => {
|
|
|
|
|
histograms.push(item.histograms)
|
|
|
|
|
lineCharts.push(item.lineCharts)
|
|
|
|
|
nameList.push(item.type)
|
|
|
|
|
})
|
|
|
|
|
let myChart2 = echarts.init(domID2)
|
|
|
|
|
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
|
|
|
|
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
|
|
|
|
|
},
|
|
|
|
|
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] //[上、右、下、左]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// toolbox: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// top: '25',
|
|
|
|
|
// right: '25',
|
|
|
|
|
// feature: {
|
|
|
|
|
// saveAsImage: {}
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
grid: {
|
|
|
|
|
top: 100,
|
|
|
|
|
left: '50px',
|
|
|
|
|
bottom: '40px',
|
|
|
|
|
right: '50px',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
containLabel: true
|
|
|
|
|
},dataZoom: [
|
|
|
|
|
{
|
|
|
|
|
type: 'inside',
|
|
|
|
|
height: 13,
|
|
|
|
|
start: 0,
|
|
|
|
|
bottom: '20px',
|
|
|
|
|
end: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
start: 0,
|
|
|
|
|
height: 13,
|
|
|
|
|
bottom: '20px',
|
|
|
|
|
end: 100
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
calculable: true,
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
splitArea: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
axisTick: { show: false },
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: echartsColor.thread
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: echartsColor.WordColor
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data: nameList
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
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: '平均超标天数:天',
|
|
|
|
|
minInterval: 1,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: echartsColor.WordColor
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: echartsColor.WordColor
|
|
|
|
|
},
|
|
|
|
|
splitArea: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '超标占比',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barMaxWidth: 30, // 柱状宽度
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: echartsColor.FigureColor[0]
|
|
|
|
|
//borderRadius: [10],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: histograms
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
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: lineCharts
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
option && myChart2.setOption(option, true)
|
|
|
|
|
window.echartsArr.push(myChart2)
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
myChart2.resize()
|
|
|
|
|
}, 0)
|
|
|
|
|
},
|
|
|
|
|
electr3() {
|
|
|
|
|
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)
|
|
|
|
|
if (myChart2 != null && myChart2 != '' && myChart2 != undefined) {
|
|
|
|
|
myChart2.dispose() //销毁
|
|
|
|
|
}
|
|
|
|
|
let histograms = []
|
|
|
|
|
let lineCharts = []
|
|
|
|
|
let nameList = []
|
|
|
|
|
this.electr3List.forEach(item => {
|
|
|
|
|
histograms.push(item.histograms)
|
|
|
|
|
lineCharts.push(item.lineCharts)
|
|
|
|
|
nameList.push(item.type)
|
|
|
|
|
})
|
|
|
|
|
let myChart2 = echarts.init(domID3)
|
|
|
|
|
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
|
|
|
|
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: '40px',
|
|
|
|
|
right: '80px',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
containLabel: true
|
|
|
|
|
},dataZoom: [
|
|
|
|
|
{
|
|
|
|
|
type: 'inside',
|
|
|
|
|
height: 13,
|
|
|
|
|
start: 0,
|
|
|
|
|
bottom: '20px',
|
|
|
|
|
end: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
start: 0,
|
|
|
|
|
height: 13,
|
|
|
|
|
bottom: '20px',
|
|
|
|
|
end: 100
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
calculable: true,
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
splitArea: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
axisTick: { show: false },
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: echartsColor.thread
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: echartsColor.WordColor
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data: nameList
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
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',
|
|
|
|
|
minInterval: 1,
|
|
|
|
|
name: '平均超标天数:天',
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: echartsColor.WordColor
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: echartsColor.WordColor
|
|
|
|
|
},
|
|
|
|
|
splitArea: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '超标占比',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barMaxWidth: 30, // 柱状宽度
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: echartsColor.FigureColor[0]
|
|
|
|
|
//borderRadius: [10],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: histograms
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// 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: lineCharts
|
|
|
|
|
}
|
|
|
|
|
// {
|
|
|
|
|
// 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>
|
