修改冀北问题

This commit is contained in:
guanj
2025-12-09 20:04:55 +08:00
parent 8c41a8fc77
commit 0fe2d2b911
49 changed files with 6357 additions and 5917 deletions

View File

@@ -1,338 +1,338 @@
<!-- 稳态 -->
<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">
<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 = [
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>
: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;
}
</style>
<!-- 稳态 -->
<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">
<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 = [
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>
: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;
}
</style>

View File

@@ -6,7 +6,7 @@
<span style="font-size: 16px">{{ dropList.lineName }}详情 </span>
<span style="font-weight: 500">最新数据时间</span>
<span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</span>
<span style="font-weight: 500">统计日期</span>
<span style="font-weight: 500" class="ml20">统计日期</span>
<span style="color: var(--color-primary-default)">
{{ getTimeOfTheMonth('3')[0] + '至' + getTimeOfTheMonth('3')[1] }}
</span>
@@ -657,7 +657,7 @@ const echart = (row: any) => {
},
indicator: indicator
},
color: color,
series: []
}
@@ -666,13 +666,17 @@ const echart = (row: any) => {
name: item.time,
type: 'radar',
symbol: 'none',
areaStyle: {
normal: {
color: '#2a9fe069'
}
opacity: 0.6, // 调整透明度,避免重叠遮挡
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `${color[i]}50` },
{ offset: 1, color: `${color[i]}50` } // 渐变透明
])
},
itemStyle: {
color: '#2a9fe0'
lineStyle: {
color: color[i],
width: 2
},
data: [item.ratioList]
})