356 lines
10 KiB
Vue
356 lines
10 KiB
Vue
<!-- 稳态 -->
|
||
<template>
|
||
<!-- 终端 -->
|
||
<el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
|
||
<el-row style="height: 300px" :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="title">
|
||
<span>稳态电能质量水平评估</span>
|
||
</div>
|
||
<div class="boxSteps">
|
||
<el-steps>
|
||
<template v-for="(item, i) in Voltage">
|
||
<el-step
|
||
:class="active == i ? 'highlight' : ''"
|
||
:title="item.name"
|
||
@click="handleClick(i)"
|
||
></el-step>
|
||
</template>
|
||
</el-steps>
|
||
</div>
|
||
<div v-for="(item, i) in evaluationData" class="evaluationData">
|
||
<el-row style="width: 100%">
|
||
<el-col :span="12" style="display: flex">
|
||
<span :class="`iconfont ${url[i]} icoColor`"></span>
|
||
<!-- <img :src="url[i]" /> -->
|
||
<span>{{ item.targetName }}</span>
|
||
</el-col>
|
||
<el-col :span="12" style="display: flex">
|
||
<div style="width: 150px">
|
||
均值：
|
||
<span style="color: #339966">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||
</div>
|
||
<div>
|
||
标准差：
|
||
<span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.sd }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="title">
|
||
<span>稳态电能质量超标占比环比变化</span>
|
||
</div>
|
||
<div class="pie">
|
||
<div style="height: 250px; width: 100%" ref="chartRef"></div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div>
|
||
<div class="title">
|
||
<span>区域稳态电能质量水平评估</span>
|
||
</div>
|
||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="365px" :data="tableData">
|
||
<vxe-column field="deptName" title="区域" />
|
||
<vxe-column sortable field="onlineNum" title="在运监测点数(个)" />
|
||
<vxe-column sortable field="overNum" title="超标监测点数量(个)" />
|
||
<vxe-column sortable field="overRatio" title="超标监测点占比(%)" />
|
||
|
||
<vxe-colgroup :title="item" v-for="(item, i) in title">
|
||
<vxe-column title="监测点数 " field="overNum">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.list[i].overNum }}</span>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column title="天数" field="overDay">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.list[i].overDay }}</span>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-colgroup>
|
||
</vxe-table>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, nextTick } from 'vue'
|
||
import echarts from '@/components/echarts/echarts'
|
||
import { useDictData } from '@/stores/dictData'
|
||
import { color } from '@/components/echarts/color'
|
||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||
import { getEvaluationData, evaluationDetail, evaluationRatio } from '@/api/device-boot/panorama'
|
||
const dialogVisible: any = ref(false)
|
||
const rowList = ref({})
|
||
const active: any = ref(1)
|
||
const evaluationData: any = ref([])
|
||
|
||
const dictData = useDictData()
|
||
const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
|
||
if (item.code == '35kV' || item.code == '500kV' || item.code == '220kV' || item.code == '110kV') {
|
||
return item
|
||
}
|
||
})
|
||
|
||
const chartRef = ref<HTMLDivElement>()
|
||
const url: any = [
|
||
'icon-frequency',
|
||
'icon-dianya',
|
||
'icon-dianyazongxiebojibianshuai',
|
||
'icon-sanxiangdianyafuzhibupingheng',
|
||
'icon-a-253_ipower'
|
||
// new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||
// new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||
// new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||
// new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||
// new URL(`@/assets/img/SB.png`, import.meta.url)
|
||
]
|
||
const tableData: any = ref([])
|
||
const title = ['频率偏差(超标)', '电压偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
|
||
|
||
const echart = (row: any) => {
|
||
let maxList: any = []
|
||
row.forEach((item: any) => {
|
||
maxList.push(...(item.ratioList || [0]))
|
||
})
|
||
let max = Math.max(...maxList) > 50 ? 100 : 50
|
||
|
||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||
|
||
let dataname = [
|
||
'频率偏差(Hz)',
|
||
'电压偏差(%)',
|
||
'电压总谐波畸变率(%)',
|
||
'三相电压不平衡度(%)',
|
||
'闪变',
|
||
'谐波电压(%)',
|
||
'谐波电流(%)',
|
||
'间谐波电压(%)',
|
||
'负序电流(A)'
|
||
]
|
||
// let datamax = [100, 100, 100, 100, 100, 100]
|
||
let indicator = []
|
||
for (let i = 0; i < dataname.length; i++) {
|
||
indicator.push({
|
||
name: dataname[i],
|
||
max: max
|
||
})
|
||
}
|
||
|
||
let option: any = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
label: {
|
||
color: '#fff',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontStyle: 'normal',
|
||
opacity: 0.35,
|
||
fontSize: 14
|
||
},
|
||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||
borderWidth: 0,
|
||
position: 'bottom'
|
||
},
|
||
legend: {
|
||
data: row.map((item: any) => item.time),
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
icon: 'roundRect',
|
||
right: '20',
|
||
|
||
itemGap: 10,
|
||
itemWidth: 16,
|
||
itemHeight: 16,
|
||
textStyle: {
|
||
fontSize: '15',
|
||
color: '#656565'
|
||
}
|
||
},
|
||
radar: {
|
||
center: ['50%', '60%'],
|
||
radius: '60%',
|
||
startAngle: 90,
|
||
splitNumber: 5,
|
||
splitArea: {
|
||
areaStyle: {
|
||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#D2E4F8'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#D2E4F8'
|
||
}
|
||
},
|
||
name: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#656565',
|
||
fontSize: 15
|
||
}
|
||
},
|
||
indicator: indicator
|
||
},
|
||
|
||
series: []
|
||
}
|
||
|
||
row.forEach((item: any, i: any) => {
|
||
option.series.push({
|
||
name: item.time,
|
||
type: 'radar',
|
||
symbol: 'none',
|
||
areaStyle: {
|
||
normal: {
|
||
color: color[i + 1]
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: color[i + 1]
|
||
},
|
||
data: [item.ratioList]
|
||
})
|
||
})
|
||
|
||
chart.setOption(option)
|
||
}
|
||
|
||
const open = async (row: any) => {
|
||
rowList.value = row
|
||
dialogVisible.value = true
|
||
// 稳态电能质量水平评估
|
||
handleClick(0)
|
||
//环比
|
||
evaluationRatio(row).then(res => {
|
||
echart(res.data)
|
||
})
|
||
// 稳态电能质量水平评估详细列表
|
||
evaluationDetail(row).then(res => {
|
||
tableData.value = res.data
|
||
})
|
||
}
|
||
// 点击电压等级
|
||
const handleClick = (i: any) => {
|
||
active.value = i
|
||
getEvaluationData({
|
||
...rowList.value,
|
||
voltageLevel: Voltage[i].id
|
||
}).then(res => {
|
||
evaluationData.value = res.data
|
||
})
|
||
}
|
||
|
||
defineExpose({ open })
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '@/assets/font/iconfont.css';
|
||
:deep(.el-select) {
|
||
min-width: 80px;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 10px;
|
||
|
||
span {
|
||
font-weight: 550;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
.pie {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.evaluationData {
|
||
height: 33px;
|
||
margin: 8px 30px;
|
||
width: 100%;
|
||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||
display: flex;
|
||
font-size: 18px;
|
||
line-height: 35px;
|
||
|
||
img {
|
||
height: 25px;
|
||
width: 25px;
|
||
margin: 4px 20px 0px 30px;
|
||
}
|
||
}
|
||
|
||
.el-steps {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
:deep(.el-step__icon) {
|
||
border: none;
|
||
background: #ccc;
|
||
margin-top: 5px;
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
|
||
:deep(.el-step__icon-inner) {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.boxSteps) {
|
||
border-radius: 50px;
|
||
width: 60%;
|
||
height: 25px;
|
||
margin: auto;
|
||
margin-top: 30px;
|
||
|
||
.el-step__title {
|
||
line-height: 18px;
|
||
font-size: 16px;
|
||
margin-left: -10px;
|
||
font-weight: 500;
|
||
color: #000 !important;
|
||
position: relative;
|
||
top: -50px;
|
||
}
|
||
}
|
||
|
||
:deep(.highlight) {
|
||
.el-step__icon {
|
||
background: var(--el-color-primary);
|
||
}
|
||
|
||
.el-step__title {
|
||
font-weight: 700 !important;
|
||
color: var(--el-color-primary) !important;
|
||
}
|
||
|
||
// .is-wait {
|
||
// color: var(--el-color-primary) !important;
|
||
// }
|
||
}
|
||
|
||
:deep(.el-dialog__body) {
|
||
max-height: none !important;
|
||
}
|
||
.icoColor{
|
||
color: var(--el-color-primary);
|
||
margin: 0 20px;
|
||
font-size: 20px;
|
||
}
|
||
</style>
|