297 lines
9.3 KiB
Vue
297 lines
9.3 KiB
Vue
<template>
|
|
<div>
|
|
<my-echart class="bars_w" :options="areaStatistics" />
|
|
<div class="separate">
|
|
<my-echart class="bars_w" :options="voltageStatistics" />
|
|
<my-echart class="bars_w" :options="monthlyStatistics" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
import { reactive, ref, defineExpose } from 'vue'
|
|
|
|
let areaStatistics = ref({})
|
|
let voltageStatistics = ref({})
|
|
let monthlyStatistics = ref({})
|
|
|
|
const Processing = (list: any) => {
|
|
// 区域
|
|
let echartsndArr: string[] = []
|
|
let echartsArr: string[] = []
|
|
list.areaCalculation.forEach((item: any) => {
|
|
echartsndArr.push(item.areaName)
|
|
if (item.frequency == 0) {
|
|
item.frequency = 1.1
|
|
} else if (item.frequency == 1) {
|
|
item.frequency = 1.3
|
|
}
|
|
echartsArr.push(item.frequency)
|
|
})
|
|
areaStatistics.value = {
|
|
title: {
|
|
text: '区域'
|
|
},
|
|
tooltip: {
|
|
formatter: function (params: any) {
|
|
// console.log(params);
|
|
let html = '区域：' + params[0].name
|
|
params.forEach((item: any) => {
|
|
if (item.value == 1.1) {
|
|
html += `<br/>${item.seriesName}: ${0}次`
|
|
} else if (item.value == 1.3) {
|
|
html += `<br/>${item.seriesName}: ${1}次`
|
|
} else {
|
|
html += `<br/>${item.seriesName}: ${item.value}次`
|
|
}
|
|
})
|
|
return html
|
|
}
|
|
},
|
|
|
|
legend: {
|
|
data: ['暂降次数']
|
|
},
|
|
xAxis: {
|
|
name: '区域', // 给X轴加单位
|
|
data: echartsndArr
|
|
},
|
|
yAxis: {
|
|
name: '次数' // 给X轴加单位
|
|
},
|
|
options: {
|
|
series: [
|
|
{
|
|
barMinHeight: 5,
|
|
barMaxWidth: 30,
|
|
itemStyle: {
|
|
normal: {
|
|
//这里是颜色
|
|
color: function (params: any) {
|
|
if (params.data == 1.1) {
|
|
return '#B3B3B3'
|
|
} else {
|
|
return '#07CCCA '
|
|
}
|
|
}
|
|
}
|
|
},
|
|
name: '暂降次数',
|
|
type: 'bar',
|
|
data: echartsArr
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
// 电压等级
|
|
const Grade = (list: any) => {
|
|
let echartsndArr: string[] = []
|
|
let echartsArr: string[] = []
|
|
list.voltageLevelCalculation.forEach((item: any) => {
|
|
echartsndArr.push(item.voltageLevel)
|
|
if (item.frequency == 0) {
|
|
item.frequency = 1.1
|
|
} else if (item.frequency == 1) {
|
|
item.frequency = 1.3
|
|
}
|
|
echartsArr.push(item.frequency)
|
|
})
|
|
|
|
voltageStatistics.value = {
|
|
title: {
|
|
text: '电压等级'
|
|
},
|
|
tooltip: {
|
|
formatter: function (params: any) {
|
|
// console.log(params);
|
|
let html = '电压等级：' + params[0].name
|
|
params.forEach((item: any) => {
|
|
if (item.value == 1.1) {
|
|
html += `<br/>${item.seriesName}: ${0}次`
|
|
} else if (item.value == 1.3) {
|
|
html += `<br/>${item.seriesName}: ${1}次`
|
|
} else {
|
|
html += `<br/>${item.seriesName}: ${item.value}次`
|
|
}
|
|
})
|
|
return html
|
|
}
|
|
},
|
|
|
|
legend: {
|
|
data: ['暂降次数']
|
|
},
|
|
xAxis: {
|
|
name: '电压等级',
|
|
data: echartsndArr
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
options: {
|
|
series: [
|
|
{
|
|
barMaxWidth: 30,
|
|
barMinHeight: 5,
|
|
itemStyle: {
|
|
normal: {
|
|
//这里是颜色
|
|
color: function (params: any) {
|
|
// console.log(params,'1111111111111111111111');
|
|
if (params.data == 1.1) {
|
|
return '#B3B3B3'
|
|
} else {
|
|
return '#07CCCA '
|
|
}
|
|
}
|
|
}
|
|
// color: echartsColor.FigureColor[0],
|
|
},
|
|
name: '暂降次数',
|
|
type: 'bar',
|
|
data: echartsArr
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
//时间
|
|
const Relation = (list: any) => {
|
|
let echartsndArr: string[] = []
|
|
let echartsArr: string[] = []
|
|
let echartswArr: string[] = []
|
|
list.monthCalculation.forEach((item: any, i: number) => {
|
|
if (i != 0) {
|
|
item.month = item.month.slice(5)
|
|
} else if (i == 0) {
|
|
let date = item.month.slice(5)
|
|
// let t = item.month.slice(0, 4);
|
|
// item.month = date + "\n" + "(" + t + ")";
|
|
item.month = date
|
|
}
|
|
|
|
echartsndArr.push(item.month)
|
|
// if (item.linked == 0 || item.notAssociated == 0) {
|
|
// item.linked = 3.14159;
|
|
// item.notAssociated = 3.14159;
|
|
// }
|
|
if (item.linked == 0) {
|
|
item.linked = 1.1
|
|
} else if (item.linked == 1) {
|
|
item.linked = 1.3
|
|
}
|
|
echartsArr.push(item.linked)
|
|
if (item.notAssociated == 0) {
|
|
item.notAssociated = 1.1
|
|
} else if (item.notAssociated == 1) {
|
|
item.notAssociated = 1.3
|
|
}
|
|
echartswArr.push(item.notAssociated)
|
|
})
|
|
monthlyStatistics.value = {
|
|
title: {
|
|
text: '月份'
|
|
},
|
|
tooltip: {
|
|
formatter: function (params: any) {
|
|
let html = '时间：' + params[0].name
|
|
params.forEach((item: any) => {
|
|
if (item.value == 1.1) {
|
|
html += `<br/>${item.seriesName}: ${0}次`
|
|
} else if (item.value == 1.3) {
|
|
html += `<br/>${item.seriesName}: ${1}次`
|
|
} else {
|
|
html += `<br/>${item.seriesName}: ${item.value}次`
|
|
}
|
|
})
|
|
return html
|
|
}
|
|
},
|
|
|
|
legend: {
|
|
data: ['未关联暂降次数', '已关联处理事件']
|
|
},
|
|
color: ['#07CCCA', '#Ff6600'],
|
|
xAxis: {
|
|
name: '月份', // 给X轴加单位
|
|
data: echartsndArr
|
|
},
|
|
|
|
options: {
|
|
series: [
|
|
{
|
|
name: '未关联暂降次数',
|
|
type: 'bar',
|
|
barMaxWidth: 30,
|
|
barMinHeight: 5,
|
|
data: echartswArr,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
// show: true, //数字开启显示
|
|
textStyle: {
|
|
//数值样式
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
fontWeight: 600
|
|
}
|
|
},
|
|
color: function (params: any) {
|
|
// console.log(params,'1111111111111111111111');
|
|
if (params.data == 1.1) {
|
|
return '#B3B3B3'
|
|
} else {
|
|
return '#07CCCA '
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '已关联处理事件',
|
|
type: 'bar',
|
|
barMaxWidth: 30,
|
|
data: echartsArr,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
// show: true, //数字开启显示
|
|
textStyle: {
|
|
//数值样式
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
fontWeight: 600
|
|
}
|
|
},
|
|
color: function (params: any) {
|
|
if (params.data == 1.1) {
|
|
return '#B3B3B3'
|
|
} else {
|
|
return '#Ff6600'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
// Processing()
|
|
defineExpose({ Processing, Grade, Relation })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bars_w {
|
|
width: 100%;
|
|
height: calc((100vh - 195px) / 2);
|
|
}
|
|
.separate {
|
|
display: flex;
|
|
}
|
|
</style>
|