543 lines
20 KiB
Vue
543 lines
20 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> -->
|
||
<el-radio-group v-model="time" style="margin-right: 50px" @change="analysis" size="small">
|
||
<el-radio-button label="1">年</el-radio-button>
|
||
<el-radio-button label="3">月</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<MyEChart style="height: 260px" :options="trendEChart" />
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="title">
|
||
<span class="text-style" @click="jump">
|
||
污染告警
|
||
<el-popover placement="right" :width="190" trigger="hover">
|
||
<template #reference>
|
||
<WarningFilled class="WarningFilled" />
|
||
</template>
|
||
<div class="text">
|
||
<span style="color: #00b07d">无污染：0</span>
|
||
<br />
|
||
<span style="color: #3399ff">轻微污染：(0 , 100]</span>
|
||
<br />
|
||
<span style="color: #ffcc33">轻度污染：(100 , 1000]</span>
|
||
<br />
|
||
<span style="color: #ff9900">中度污染：(1000 , 10000]</span>
|
||
<br />
|
||
<span style="color: #a52a2a">重度污染：(10000</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> -->
|
||
<el-radio-group
|
||
v-model="contaminate"
|
||
style="margin-right: 50px"
|
||
@change="contaminateC"
|
||
size="small"
|
||
>
|
||
<el-radio-button v-for="item in options" :label="item.id">{{ item.name }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<!-- :style="i == 3 ? `margin-left: 20%;` : ``" -->
|
||
<div class="pie">
|
||
<MyEChart v-for="(item, i) in picEChart" @click="echartClick" 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="325px" :data="tableData">
|
||
<vxe-column field="name" title="区域" />
|
||
<vxe-column field="num" sortable title="变电站总数" />
|
||
<vxe-column field="num1" sortable title="无污染数量" :formatter="formatter" />
|
||
<vxe-column field="num2" sortable title="轻微污染数量" :formatter="formatter" />
|
||
<vxe-column field="num3" sortable title="轻度污染数量" :formatter="formatter" />
|
||
<vxe-column field="num4" sortable title="中度污染数量" :formatter="formatter" />
|
||
<vxe-column field="num5" sortable title="重度污染数量" :formatter="formatter" />
|
||
<!-- <vxe-column field="num6" sortable 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'
|
||
import { useRouter } from 'vue-router'
|
||
const router = useRouter()
|
||
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_Calc')
|
||
// .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) => {
|
||
time.value = '1'
|
||
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
|
||
// }
|
||
// }
|
||
|
||
// 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', '#A52a2a']
|
||
|
||
// list.forEach((item, i) => {
|
||
// picEChart.value[i] = {
|
||
// legend: {
|
||
// type: 'scroll',
|
||
// orient: 'vertical',
|
||
// left: 10,
|
||
// top: '10%'
|
||
// },
|
||
// xAxis: {
|
||
// show: false
|
||
// },
|
||
// yAxis: {
|
||
// show: false
|
||
// },
|
||
// options: {
|
||
// toolbox:null,
|
||
// 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],
|
||
num6: item[7]
|
||
}
|
||
})
|
||
|
||
|
||
let data = []
|
||
let a1 = tableData.value.reduce((t, item) => t + (item.num1 - 0 || 0), 0)
|
||
let a2 = tableData.value.reduce((t, item) => t + (item.num2 - 0 || 0), 0)
|
||
let a3 = tableData.value.reduce((t, item) => t + (item.num3 - 0 || 0), 0)
|
||
let a4 = tableData.value.reduce((t, item) => t + (item.num4 - 0 || 0), 0)
|
||
let a5 = tableData.value.reduce((t, item) => t + (item.num5 - 0 || 0), 0)
|
||
let total = a1 + a2 + a3 + a4 + a5
|
||
// 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
|
||
// }
|
||
// }
|
||
|
||
let list = [
|
||
{
|
||
value: ((a1 / total || 0) * 100).toFixed(2),
|
||
name: `无污染：${a1}座`
|
||
},
|
||
{
|
||
value: ((a2 / total || 0) * 100).toFixed(2),
|
||
name: `轻微污染：：${a2}座`
|
||
},
|
||
{
|
||
value: ((a3 / total || 0) * 100).toFixed(2),
|
||
name: `轻度污染：${a3}座`
|
||
},
|
||
{
|
||
value: ((a4 / total || 0) * 100).toFixed(2),
|
||
name: `中度污染：${a4}座`
|
||
},
|
||
{
|
||
value: ((a5 / total || 0) * 100).toFixed(2),
|
||
name: `重度污染：${a5}座`
|
||
}
|
||
]
|
||
const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a', '#ccc']
|
||
|
||
list.forEach((item, i) => {
|
||
picEChart.value[i] = {
|
||
legend: {
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
left: 10,
|
||
top: '10%'
|
||
},
|
||
xAxis: {
|
||
show: false
|
||
},
|
||
yAxis: {
|
||
show: false
|
||
},
|
||
options: {
|
||
toolbox: null,
|
||
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]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
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 = []
|
||
let num = 0
|
||
for (let k in res.data) {
|
||
name.push(k)
|
||
// num = num + res.data[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
|
||
}
|
||
|
||
const jump = () => {
|
||
router.push({
|
||
name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
|
||
query: {
|
||
type: '2',
|
||
statisticalType: contaminate.value,
|
||
t: Date.now()
|
||
}
|
||
})
|
||
}
|
||
|
||
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;
|
||
}
|
||
.text-style {
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
text-decoration-color: var(--el-color-primary);
|
||
text-underline-offset: 4px;
|
||
}
|
||
</style>
|