304 lines
9.9 KiB
Vue
304 lines
9.9 KiB
Vue
|
<template>
|
||
|
|
<!-- 变电站 -->
|
||
|
|
<el-dialog draggable title="变电站详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||
|
|
<el-row style="height: 300px" :gutter="20">
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="title">
|
||
|
|
<span>趋势分析</span>
|
||
|
|
<el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
|
||
|
|
<el-option label="年" value="1" />
|
||
|
|
<el-option label="月" value="3" />
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
<MyEChart style="height: 260px" :options="trendEChart" />
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="title">
|
||
|
|
<span>污染告警</span>
|
||
|
|
</div>
|
||
|
|
<div class="pie">
|
||
|
|
<MyEChart v-for="item in picEChart" class="MyEChart" :options="item" />
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<div>
|
||
|
|
<div class="title">
|
||
|
|
<span>变电站详细列表</span>
|
||
|
|
</div>
|
||
|
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||
|
|
<vxe-column field="name" title="电站名称" />
|
||
|
|
<vxe-column field="powerCompany" title="所属区域" />
|
||
|
|
<vxe-column field="voltageLevel" title="电压等级" :formatter="formatter" />
|
||
|
|
<vxe-column field="data" title="谐波电压" :formatter="formatter" />
|
||
|
|
<vxe-column field="dataV" title="谐波电流" :formatter="formatter" />
|
||
|
|
</vxe-table>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||
|
|
import { useDictData } from '@/stores/dictData'
|
||
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||
|
|
import { getPollutionAlarmPageData, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
|
||
|
|
const dictData = useDictData()
|
||
|
|
const dialogVisible: any = ref(false)
|
||
|
|
const time = ref('1')
|
||
|
|
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
|
||
|
|
const rowList: any = ref({})
|
||
|
|
const trendEChart: any = ref({})
|
||
|
|
const tableData: any = ref([])
|
||
|
|
|
||
|
|
const picEChart: any = ref([{}, {}, {}, {}, {}])
|
||
|
|
|
||
|
|
const open = async (row: any) => {
|
||
|
|
rowList.value = {
|
||
|
|
deviceInfoParam: {
|
||
|
|
...row
|
||
|
|
},
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 1000,
|
||
|
|
...row
|
||
|
|
}
|
||
|
|
analysis(1)
|
||
|
|
// 污染
|
||
|
|
getPollutionAlarmData(rowList.value).then(res => {
|
||
|
|
let data = []
|
||
|
|
|
||
|
|
let a1 = 0
|
||
|
|
let a2 = 0
|
||
|
|
let a3 = 0
|
||
|
|
let a4 = 0
|
||
|
|
let a5 = 0
|
||
|
|
if (row.isUpToGrid == 0) {
|
||
|
|
data = res.data.info
|
||
|
|
} else {
|
||
|
|
data = res.data.gwInfo
|
||
|
|
}
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
if (data[i] >= 0 || data[i] < 1) {
|
||
|
|
a1++
|
||
|
|
} else if (data[i] >= 1 || data[i] < 1.2) {
|
||
|
|
a2++
|
||
|
|
} else if (data[i] >= 1.2 || data[i] < 1.6) {
|
||
|
|
a3++
|
||
|
|
} else if (data[i] >= 1.6 || data[i] < 2) {
|
||
|
|
a4++
|
||
|
|
} else if (data[i] >= 2) {
|
||
|
|
a5++
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let list = [
|
||
|
|
{
|
||
|
|
value: ((a1 / data.length) * 100).toFixed(2),
|
||
|
|
name: `无污染：${a1}座`
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: ((a2 / data.length) * 100).toFixed(2),
|
||
|
|
name: `轻微污染：：${a2}座`
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: ((a3 / data.length) * 100).toFixed(2),
|
||
|
|
name: `轻度污染：${a3}座`
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: ((a4 / data.length) * 100).toFixed(2),
|
||
|
|
name: `中度污染：${a4}座`
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: ((a5 / data.length) * 100).toFixed(2),
|
||
|
|
name: `重度污染：${a5}座`
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const color = ['#00B07D', '#FFAF00', '#FF7D00', '#B90000', '#62298B']
|
||
|
|
|
||
|
|
list.forEach((item, i) => {
|
||
|
|
picEChart.value[i] = {
|
||
|
|
legend: {
|
||
|
|
type: 'scroll',
|
||
|
|
orient: 'vertical',
|
||
|
|
left: 10,
|
||
|
|
top: '10%'
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
dataZoom: null,
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'gauge',
|
||
|
|
startAngle: 180,
|
||
|
|
center: ['50%', '80%'],
|
||
|
|
radius: '135%',
|
||
|
|
endAngle: 0,
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
width: 15,
|
||
|
|
itemStyle: {
|
||
|
|
color: color[i]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
pointer: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
width: 15,
|
||
|
|
color: [[1, '#f4f4f4']]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
distance: 5,
|
||
|
|
color: '#666',
|
||
|
|
fontSize: 12,
|
||
|
|
formatter: function (value: any) {
|
||
|
|
if (value === 0 || value === 100) {
|
||
|
|
return value + '%'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
anchor: {
|
||
|
|
show: false,
|
||
|
|
showAbove: false,
|
||
|
|
size: 25,
|
||
|
|
itemStyle: {
|
||
|
|
borderWidth: 60
|
||
|
|
}
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
show: true,
|
||
|
|
offsetCenter: [0, '20%'],
|
||
|
|
fontSize: 14
|
||
|
|
},
|
||
|
|
detail: {
|
||
|
|
valueAnimation: true,
|
||
|
|
fontSize: 14,
|
||
|
|
lineHeight: 20,
|
||
|
|
color: color[i],
|
||
|
|
fontWeight: 'bold',
|
||
|
|
offsetCenter: [0, '-20%'],
|
||
|
|
formatter: function (value: any) {
|
||
|
|
return '{a|占比} ' + '\n' + value + '{a|%}'
|
||
|
|
},
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
color: '#333',
|
||
|
|
fontSize: 16,
|
||
|
|
lineHeight: 30
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [item]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
// 列表
|
||
|
|
getPollutionAlarmPageData(rowList.value).then(res => {
|
||
|
|
tableData.value = res.data.records
|
||
|
|
})
|
||
|
|
|
||
|
|
dialogVisible.value = true
|
||
|
|
}
|
||
|
|
const analysis = (e: any) => {
|
||
|
|
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
|
||
|
|
// 分析
|
||
|
|
getGridDiagramSubTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
|
||
|
|
let name = []
|
||
|
|
let data = []
|
||
|
|
for (let k in res.data) {
|
||
|
|
name.push(k)
|
||
|
|
data.push(res.data[k])
|
||
|
|
}
|
||
|
|
|
||
|
|
trendEChart.value = {
|
||
|
|
title: {
|
||
|
|
text: '变电站接入数量'
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
name: '时间',
|
||
|
|
data: name
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
name: '座'
|
||
|
|
},
|
||
|
|
|
||
|
|
options: {
|
||
|
|
dataZoom: null,
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '接入',
|
||
|
|
type: 'line',
|
||
|
|
data: data,
|
||
|
|
smooth: true,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'top',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const formatter = (row: any) => {
|
||
|
|
if (row.column.field == 'dataV') {
|
||
|
|
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
|
||
|
|
} else if (row.column.field == 'data') {
|
||
|
|
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
|
||
|
|
} else if (row.column.field == 'voltageLevel') {
|
||
|
|
return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
|
||
|
|
} else {
|
||
|
|
return row.cellValue
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const handleClose = () => {
|
||
|
|
tableData.value = []
|
||
|
|
dialogVisible.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
defineExpose({ open })
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
:deep(.el-select) {
|
||
|
|
min-width: 80px;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
span {
|
||
|
|
font-weight: 550;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pie {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.MyEChart {
|
||
|
|
height: 130px;
|
||
|
|
width: 30%;
|
||
|
|
margin-right: 3%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|