2024-04-26 09:15:20 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<!-- 变电站 -->
|
2024-05-09 18:00:04 +08:00
|
|
|
|
<el-dialog draggable title="变电站统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
2024-04-26 09:15:20 +08:00
|
|
|
|
<el-row style="height: 300px" :gutter="20">
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
<span>趋势分析</span>
|
2024-06-12 16:16:02 +08:00
|
|
|
|
<!-- <el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
|
2024-04-26 09:15:20 +08:00
|
|
|
|
<el-option label="年" value="1" />
|
|
|
|
|
|
<el-option label="月" value="3" />
|
2024-06-12 16:16:02 +08:00
|
|
|
|
</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>
|
2024-04-26 09:15:20 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<MyEChart style="height: 260px" :options="trendEChart" />
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div class="title">
|
2025-12-14 12:47:53 +08:00
|
|
|
|
<span class="text-style" @click="jump">
|
2024-04-29 16:37:07 +08:00
|
|
|
|
污染告警
|
2025-12-12 09:26:56 +08:00
|
|
|
|
<el-popover placement="right" :width="190" trigger="hover">
|
2024-04-29 16:37:07 +08:00
|
|
|
|
<template #reference>
|
|
|
|
|
|
<WarningFilled class="WarningFilled" />
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<div class="text">
|
2025-12-14 12:47:53 +08:00
|
|
|
|
<span style="color: #00b07d">无污染：0</span>
|
2024-04-29 16:37:07 +08:00
|
|
|
|
<br />
|
2025-12-12 09:26:56 +08:00
|
|
|
|
<span style="color: #3399ff">轻微污染：(0 , 100]</span>
|
2024-04-29 16:37:07 +08:00
|
|
|
|
<br />
|
2025-12-12 09:26:56 +08:00
|
|
|
|
<span style="color: #ffcc33">轻度污染：(100 , 1000]</span>
|
2024-04-29 16:37:07 +08:00
|
|
|
|
<br />
|
2025-12-12 09:26:56 +08:00
|
|
|
|
<span style="color: #ff9900">中度污染：(1000 , 10000]</span>
|
2024-04-29 16:37:07 +08:00
|
|
|
|
<br />
|
2025-12-14 12:47:53 +08:00
|
|
|
|
<span style="color: #a52a2a">重度污染：(10000</span>
|
2024-04-29 16:37:07 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</el-popover>
|
|
|
|
|
|
</span>
|
2024-06-12 16:16:02 +08:00
|
|
|
|
<!-- <el-select v-model="contaminate" style="width: 120px; margin-right: 80px" @change="contaminateC">
|
2024-04-29 16:37:07 +08:00
|
|
|
|
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
|
2024-06-12 16:16:02 +08:00
|
|
|
|
</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>
|
2024-04-26 09:15:20 +08:00
|
|
|
|
</div>
|
2025-12-11 15:03:11 +08:00
|
|
|
|
<!-- :style="i == 3 ? `margin-left: 20%;` : ``" -->
|
2024-04-26 09:15:20 +08:00
|
|
|
|
<div class="pie">
|
2025-12-14 12:47:53 +08:00
|
|
|
|
<MyEChart v-for="(item, i) in picEChart" @click="echartClick" class="MyEChart" :options="item" />
|
2024-04-26 09:15:20 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<div>
|
2024-04-29 16:37:07 +08:00
|
|
|
|
<div class="title mb10">
|
2024-05-09 18:00:04 +08:00
|
|
|
|
<span>区域变电站统计</span>
|
2024-04-26 09:15:20 +08:00
|
|
|
|
</div>
|
2024-05-27 19:07:56 +08:00
|
|
|
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="325px" :data="tableData">
|
2024-05-09 18:00:04 +08:00
|
|
|
|
<vxe-column field="name" title="区域" />
|
2024-05-27 19:07:56 +08:00
|
|
|
|
<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" />
|
2025-12-14 12:47:53 +08:00
|
|
|
|
<!-- <vxe-column field="num6" sortable title="暂无数据数量" :formatter="formatter" /> -->
|
2024-04-26 09:15:20 +08:00
|
|
|
|
</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'
|
2024-04-29 16:37:07 +08:00
|
|
|
|
import { WarningFilled } from '@element-plus/icons-vue'
|
2024-04-29 18:30:32 +08:00
|
|
|
|
import { getPollutionAlarmList, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
|
2025-12-14 12:47:53 +08:00
|
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
|
const router = useRouter()
|
2024-04-26 09:15:20 +08:00
|
|
|
|
const dictData = useDictData()
|
|
|
|
|
|
const dialogVisible: any = ref(false)
|
|
|
|
|
|
const time = ref('1')
|
|
|
|
|
|
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
|
2025-12-11 15:03:11 +08:00
|
|
|
|
const options: any = dictData.getBasicData('Pollution_Calc')
|
|
|
|
|
|
// .filter(item => {
|
|
|
|
|
|
// if (item.code == 'V_Harmonic' || item.code == 'I_All') {
|
|
|
|
|
|
// return item
|
|
|
|
|
|
// }
|
|
|
|
|
|
// })
|
2025-12-14 12:47:53 +08:00
|
|
|
|
const contaminate = ref(options[0]?.id)
|
2024-04-26 09:15:20 +08:00
|
|
|
|
const rowList: any = ref({})
|
|
|
|
|
|
const trendEChart: any = ref({})
|
|
|
|
|
|
const tableData: any = ref([])
|
|
|
|
|
|
|
|
|
|
|
|
const picEChart: any = ref([{}, {}, {}, {}, {}])
|
|
|
|
|
|
|
|
|
|
|
|
const open = async (row: any) => {
|
2024-08-08 12:40:56 +08:00
|
|
|
|
time.value = '1'
|
2024-04-26 09:15:20 +08:00
|
|
|
|
rowList.value = {
|
|
|
|
|
|
deviceInfoParam: {
|
|
|
|
|
|
...row
|
|
|
|
|
|
},
|
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
|
pageSize: 1000,
|
|
|
|
|
|
...row
|
|
|
|
|
|
}
|
|
|
|
|
|
analysis(1)
|
|
|
|
|
|
// 污染
|
2024-04-29 16:37:07 +08:00
|
|
|
|
contaminateC()
|
|
|
|
|
|
// 列表
|
|
|
|
|
|
|
|
|
|
|
|
dialogVisible.value = true
|
|
|
|
|
|
}
|
|
|
|
|
|
const contaminateC = () => {
|
2024-05-09 18:00:04 +08:00
|
|
|
|
// rowList.value.deviceInfoParam.ids=[contaminate.value]
|
2025-12-11 15:03:11 +08:00
|
|
|
|
// 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']
|
2024-04-26 09:15:20 +08:00
|
|
|
|
|
2025-12-11 15:03:11 +08:00
|
|
|
|
// 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]
|
2024-04-26 09:15:20 +08:00
|
|
|
|
}
|
2025-12-11 15:03:11 +08:00
|
|
|
|
})
|
2026-01-06 08:35:36 +08:00
|
|
|
|
|
2025-12-11 15:03:11 +08:00
|
|
|
|
|
|
|
|
|
|
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)
|
2025-12-14 12:47:53 +08:00
|
|
|
|
let total = a1 + a2 + a3 + a4 + a5
|
2025-12-11 15:03:11 +08:00
|
|
|
|
// 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
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
2024-04-26 09:15:20 +08:00
|
|
|
|
|
|
|
|
|
|
let list = [
|
|
|
|
|
|
{
|
2025-12-11 15:03:11 +08:00
|
|
|
|
value: ((a1 / total || 0) * 100).toFixed(2),
|
2024-04-26 09:15:20 +08:00
|
|
|
|
name: `无污染：${a1}座`
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2025-12-11 15:03:11 +08:00
|
|
|
|
value: ((a2 / total || 0) * 100).toFixed(2),
|
2024-04-26 09:15:20 +08:00
|
|
|
|
name: `轻微污染：：${a2}座`
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2025-12-11 15:03:11 +08:00
|
|
|
|
value: ((a3 / total || 0) * 100).toFixed(2),
|
2024-04-26 09:15:20 +08:00
|
|
|
|
name: `轻度污染：${a3}座`
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2025-12-11 15:03:11 +08:00
|
|
|
|
value: ((a4 / total || 0) * 100).toFixed(2),
|
2024-04-26 09:15:20 +08:00
|
|
|
|
name: `中度污染：${a4}座`
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2025-12-11 15:03:11 +08:00
|
|
|
|
value: ((a5 / total || 0) * 100).toFixed(2),
|
2024-04-26 09:15:20 +08:00
|
|
|
|
name: `重度污染：${a5}座`
|
2025-12-14 12:47:53 +08:00
|
|
|
|
}
|
2024-04-26 09:15:20 +08:00
|
|
|
|
]
|
2025-12-14 12:47:53 +08:00
|
|
|
|
const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a', '#ccc']
|
2024-04-26 09:15:20 +08:00
|
|
|
|
|
|
|
|
|
|
list.forEach((item, i) => {
|
|
|
|
|
|
picEChart.value[i] = {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
type: 'scroll',
|
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
|
left: 10,
|
|
|
|
|
|
top: '10%'
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
options: {
|
2025-12-11 15:03:11 +08:00
|
|
|
|
toolbox: null,
|
2024-04-26 09:15:20 +08:00
|
|
|
|
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: {
|
2024-05-09 18:00:04 +08:00
|
|
|
|
show: false
|
|
|
|
|
|
// distance: 5,
|
|
|
|
|
|
// color: '#666',
|
|
|
|
|
|
// fontSize: 12,
|
|
|
|
|
|
// formatter: function (value: any) {
|
|
|
|
|
|
// if (value === 0 || value === 100) {
|
|
|
|
|
|
// return value + '%'
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
2024-04-26 09:15:20 +08:00
|
|
|
|
},
|
|
|
|
|
|
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) => {
|
2024-04-29 16:37:07 +08:00
|
|
|
|
let time = rowList.value.searchBeginTime?.slice(0, 4) + `-01-01`
|
2024-04-26 09:15:20 +08:00
|
|
|
|
// 分析
|
|
|
|
|
|
getGridDiagramSubTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
|
|
|
|
|
|
let name = []
|
|
|
|
|
|
let data = []
|
2024-07-18 14:25:53 +08:00
|
|
|
|
let num = 0
|
2024-04-26 09:15:20 +08:00
|
|
|
|
for (let k in res.data) {
|
|
|
|
|
|
name.push(k)
|
2024-08-08 12:40:56 +08:00
|
|
|
|
// num = num + res.data[k]
|
|
|
|
|
|
data.push(res.data[k])
|
2024-04-26 09:15:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
trendEChart.value = {
|
|
|
|
|
|
title: {
|
2024-07-18 14:25:53 +08:00
|
|
|
|
text: '变电站接入总数量'
|
2024-04-26 09:15:20 +08:00
|
|
|
|
},
|
|
|
|
|
|
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') {
|
2024-04-29 16:37:07 +08:00
|
|
|
|
return row.cellValue == 3.14159 ? '/' : row.cellValue
|
2024-04-26 09:15:20 +08:00
|
|
|
|
} else if (row.column.field == 'data') {
|
2024-04-29 16:37:07 +08:00
|
|
|
|
return row.cellValue == 3.14159 ? '/' : row.cellValue
|
2024-04-26 09:15:20 +08:00
|
|
|
|
} 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
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-12-14 12:47:53 +08:00
|
|
|
|
const jump = () => {
|
|
|
|
|
|
router.push({
|
|
|
|
|
|
name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
|
|
|
|
|
|
query: {
|
|
|
|
|
|
type: '2',
|
2025-12-15 09:33:34 +08:00
|
|
|
|
statisticalType: contaminate.value,
|
2025-12-14 12:47:53 +08:00
|
|
|
|
t: Date.now()
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-04-26 09:15:20 +08:00
|
|
|
|
defineExpose({ open })
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
:deep(.el-select) {
|
|
|
|
|
|
min-width: 80px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
2024-04-29 16:37:07 +08:00
|
|
|
|
position: relative;
|
2024-04-26 09:15:20 +08:00
|
|
|
|
span {
|
|
|
|
|
|
font-weight: 550;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
}
|
2024-04-29 16:37:07 +08:00
|
|
|
|
.WarningFilled {
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
2024-04-26 09:15:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
.pie {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.MyEChart {
|
|
|
|
|
|
height: 130px;
|
|
|
|
|
|
width: 30%;
|
|
|
|
|
|
margin-right: 3%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-05-27 10:37:50 +08:00
|
|
|
|
:deep(.el-dialog__body) {
|
|
|
|
|
|
max-height: none !important;
|
|
|
|
|
|
}
|
2025-12-14 12:47:53 +08:00
|
|
|
|
.text-style {
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
text-decoration: underline;
|
2025-12-15 09:33:34 +08:00
|
|
|
|
text-decoration-color: var(--el-color-primary);
|
|
|
|
|
|
text-underline-offset: 4px;
|
2025-12-14 12:47:53 +08:00
|
|
|
|
}
|
2024-04-26 09:15:20 +08:00
|
|
|
|
</style>
|
