364 lines
12 KiB
Vue
364 lines
12 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>
|
||
污染告警
|
||
<el-popover placement="right" :width="170" trigger="hover">
|
||
<template #reference>
|
||
<WarningFilled class="WarningFilled" />
|
||
</template>
|
||
<div class="text">
|
||
<span style="color: #00b07d">无污染：(0 , 1]</span>
|
||
<br />
|
||
<span style="color: #3399ff">轻微污染：(1 , 1.2]</span>
|
||
<br />
|
||
<span style="color: #ffcc33">轻度污染：(1.2 , 1.6]</span>
|
||
<br />
|
||
<span style="color: #ff9900">中度污染：(1.6 , 2]</span>
|
||
<br />
|
||
<span style="color: #cc0000">重度污染：(2 , +∞)</span>
|
||
</div>
|
||
</el-popover>
|
||
</span>
|
||
<el-select v-model="contaminate" style="width: 120px; margin-right: 80px" @change="contaminateC">
|
||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</div>
|
||
|
||
<div class="pie">
|
||
<MyEChart
|
||
v-for="(item, i) in picEChart"
|
||
:style="i == 3 ? `margin-left: 20%;` : ``"
|
||
class="MyEChart"
|
||
:options="item"
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div>
|
||
<div class="title mb10">
|
||
<span>区域变电站统计</span>
|
||
</div>
|
||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
|
||
<vxe-column field="name" title="区域" />
|
||
<vxe-column field="num" title="变电站总数" />
|
||
<vxe-column field="num1" title="无污染数量" :formatter="formatter" />
|
||
<vxe-column field="num2" title="轻微污染数量" :formatter="formatter" />
|
||
<vxe-column field="num3" title="轻度污染数量" :formatter="formatter" />
|
||
<vxe-column field="num4" title="中度污染数量" :formatter="formatter" />
|
||
<vxe-column field="num5" 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 { WarningFilled } from '@element-plus/icons-vue'
|
||
import { getPollutionAlarmList, 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 options: any = dictData.getBasicData('Pollution_Statis').filter(item => {
|
||
if (item.code == 'V_Harmonic' || item.code == 'I_All') {
|
||
return item
|
||
}
|
||
})
|
||
const contaminate = ref(options[0].id)
|
||
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)
|
||
// 污染
|
||
contaminateC()
|
||
// 列表
|
||
|
||
dialogVisible.value = true
|
||
}
|
||
const contaminateC = () => {
|
||
// rowList.value.deviceInfoParam.ids=[contaminate.value]
|
||
getPollutionAlarmData({ ...rowList.value, ids: [contaminate.value] }).then(res => {
|
||
let data = []
|
||
|
||
let a1 = 0
|
||
let a2 = 0
|
||
let a3 = 0
|
||
let a4 = 0
|
||
let a5 = 0
|
||
if (rowList.value.isUpToGrid == 0) {
|
||
data = res.data.info
|
||
} else {
|
||
data = res.data.gwInfo
|
||
}
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i] >= 2) {
|
||
++a5
|
||
} else if (data[i] >= 1.6 && data[i] < 2) {
|
||
++a4
|
||
} else if (data[i] >= 1.2 && data[i] < 1.6) {
|
||
++a3
|
||
} else if (data[i] >= 1 && data[i] < 1.2) {
|
||
++a2
|
||
} else if (data[i] >= 0 && data[i] < 1) {
|
||
++a1
|
||
}
|
||
}
|
||
// console.log('🚀 ~ getPollutionAlarmData ~ a1 / data.length:', a1 / data.length)
|
||
|
||
let list = [
|
||
{
|
||
value: ((a1 / data.length || 0) * 100).toFixed(2),
|
||
name: `无污染：${a1}座`
|
||
},
|
||
{
|
||
value: ((a2 / data.length || 0) * 100).toFixed(2),
|
||
name: `轻微污染：：${a2}座`
|
||
},
|
||
{
|
||
value: ((a3 / data.length || 0) * 100).toFixed(2),
|
||
name: `轻度污染：${a3}座`
|
||
},
|
||
{
|
||
value: ((a4 / data.length || 0) * 100).toFixed(2),
|
||
name: `中度污染：${a4}座`
|
||
},
|
||
{
|
||
value: ((a5 / data.length || 0) * 100).toFixed(2),
|
||
name: `重度污染：${a5}座`
|
||
}
|
||
]
|
||
const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#cc0000']
|
||
|
||
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: {
|
||
show: false
|
||
// 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]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
})
|
||
})
|
||
getPollutionAlarmList({ ...rowList.value, ids: [contaminate.value] }).then(res => {
|
||
tableData.value = res.data.map((item: any) => {
|
||
return {
|
||
name: item[0],
|
||
num: item[1],
|
||
num1: item[2],
|
||
num2: item[3],
|
||
num3: item[4],
|
||
num4: item[5],
|
||
num5: item[6]
|
||
}
|
||
})
|
||
})
|
||
}
|
||
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;
|
||
position: relative;
|
||
span {
|
||
font-weight: 550;
|
||
font-size: 18px;
|
||
}
|
||
.WarningFilled {
|
||
width: 16px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.pie {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.MyEChart {
|
||
height: 130px;
|
||
width: 30%;
|
||
margin-right: 3%;
|
||
}
|
||
}
|
||
:deep(.el-dialog__body) {
|
||
max-height: none !important;
|
||
}
|
||
</style>
|