修改 电网一张图bug 技术监督新增 重新发起页面绘制

This commit is contained in:
GGJ
2024-06-02 17:55:37 +08:00
parent 91fa1f60e3
commit c7025c615f
16 changed files with 668 additions and 463 deletions

View File

@@ -4,32 +4,143 @@
<div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-column field="deptName" title="地市" />
<vxe-column field="assessData" title="综合评估得分" :formatter="formatter" />
<vxe-column field="qualifyData" title="指标合格率(%)" :formatter="formatter" />
<vxe-column field="assessLevel" title="综合评估结论">
<template #default="scope">
<span
class="conclusion"
:class="
scope.row.assessLevel == '特质'
? 'background1'
: scope.row.assessLevel == '较差'
? 'background2'
: scope.row.assessLevel == '极差'
? 'background3'
: ''
"
>
{{ scope.row.assessLevel }}
</span>
</template>
</vxe-column>
<vxe-column field="qualifyData" title="指标合格率(%)" />
<vxe-colgroup title="电压偏差">
<vxe-column field="vdevAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="vdevQualifyData" title="指标合格率(%)" :formatter="formatter" />
<vxe-column field="vdevAssessLevel" title="评估结论">
<template #default="scope">
<span
class="conclusion"
:class="
scope.row.vdevAssessLevel == '特质'
? 'background1'
: scope.row.vdevAssessLevel == '较差'
? 'background2'
: scope.row.vdevAssessLevel == '极差'
? 'background3'
: ''
"
>
{{ scope.row.vdevAssessLevel }}
</span>
</template>
</vxe-column>
<vxe-column field="vdevQualifyData" title="指标合格率(%)" />
</vxe-colgroup>
<vxe-colgroup title="频率偏差">
<vxe-column field="freqAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="freqQualifyData" title="指标合格率(%)" :formatter="formatter" />
<vxe-column field="freqAssessLevel" title="评估结论">
<template #default="scope">
<span
class="conclusion"
:class="
scope.row.freqAssessLevel == '特质'
? 'background1'
: scope.row.freqAssessLevel == '较差'
? 'background2'
: scope.row.freqAssessLevel == '极差'
? 'background3'
: ''
"
>
{{ scope.row.freqAssessLevel }}
</span>
</template>
</vxe-column>
<vxe-column field="freqQualifyData" title="指标合格率(%)" />
</vxe-colgroup>
<vxe-colgroup title="电压总谐波畸变率" >
<vxe-column field="harmAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="harmQualifyData" title="指标合格率(%)" :formatter="formatter" />
<vxe-colgroup title="电压总谐波畸变率">
<vxe-column field="harmAssessLevel" title="评估结论">
<template #default="scope">
<span
class="conclusion"
:class="
scope.row.harmAssessLevel == '特质'
? 'background1'
: scope.row.harmAssessLevel == '较差'
? 'background2'
: scope.row.harmAssessLevel == '极差'
? 'background3'
: ''
"
>
{{ scope.row.harmAssessLevel }}
</span>
</template>
</vxe-column>
<vxe-column field="harmQualifyData" title="指标合格率(%)" />
</vxe-colgroup>
<vxe-colgroup title="电压闪变">
<vxe-column field="flickerAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="flickerQualifyData" title="指标合格率(%)" :formatter="formatter" />
<vxe-column field="flickerAssessLevel" title="评估结论">
<template #default="scope">
<span
class="conclusion"
:class="
scope.row.flickerAssessLevel == '特质'
? 'background1'
: scope.row.flickerAssessLevel == '较差'
? 'background2'
: scope.row.flickerAssessLevel == '极差'
? 'background3'
: ''
"
>
{{ scope.row.flickerAssessLevel }}
</span>
</template>
</vxe-column>
<vxe-column field="flickerQualifyData" title="指标合格率(%)" />
</vxe-colgroup>
<vxe-colgroup title="三相电压不平衡度">
<vxe-column field="unbalanceAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="unbalanceQualifyData" title="指标合格率(%)" :formatter="formatter" />
<vxe-column field="unbalanceAssessLevel" title="评估结论">
<template #default="scope">
<span
class="conclusion"
:class="
scope.row.unbalanceAssessLevel == '特质'
? 'background1'
: scope.row.unbalanceAssessLevel == '较差'
? 'background2'
: scope.row.unbalanceAssessLevel == '极差'
? 'background3'
: ''
"
>
{{ scope.row.unbalanceAssessLevel }}
</span>
</template>
</vxe-column>
<vxe-column field="unbalanceQualifyData" title="指标合格率(%)" />
</vxe-colgroup>
</vxe-table>
</div>
<div style="height: 300px; margin-top: 10px">
<div style="height: 300px; margin-top: 10px; position: relative" v-loading="loading">
<el-select
v-model="time"
size="small"
style="width: 50px; position: absolute; top: 20px; right: 20px; z-index: 1"
@change="analysis"
>
<el-option label="年" value="1" />
<el-option label="月" value="3" />
</el-select>
<MyEChart style="height: 300px" :options="picEChart" />
</div>
</el-dialog>
@@ -40,7 +151,9 @@ import MyEChart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getAssessDetail, getAssessTrend } from '@/api/device-boot/panorama'
const dialogVisible: any = ref(false)
const rowList: any = ref({})
const time = ref('1')
const loading = ref(false)
const tableData: any = ref([])
const picEChart = ref()
@@ -48,7 +161,14 @@ const open = async (row: any) => {
getAssessDetail(row).then(res => {
tableData.value = res.data
})
getAssessTrend(row).then(res => {
rowList.value = row
analysis(1)
dialogVisible.value = true
}
const analysis = (e: any) => {
loading.value = true
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
getAssessTrend({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
picEChart.value = {
title: {
text: '各地市综合评估趋势对比'
@@ -57,9 +177,11 @@ const open = async (row: any) => {
name: '时间',
data: res.data[0].children.map((item: any) => item.dataTime)
},
grid: {
bottom: '10px'
},
yAxis: {
name: ''
},
@@ -85,16 +207,8 @@ const open = async (row: any) => {
data: item
})
})
loading.value = false
})
dialogVisible.value = true
}
const formatter = (row: any) => {
if (row.cellValue == 3.14159) {
return '/'
} else {
return row.cellValue
}
}
defineExpose({ open })
@@ -103,4 +217,27 @@ defineExpose({ open })
:deep(.el-dialog__body) {
max-height: none !important;
}
.conclusion {
display: inline-block;
padding: 0 10px;
height: 24px;
line-height: 24px;
border-radius: 4px;
}
.background1 {
background-color: #339966;
color: #fff;
}
.background2 {
background-color: #97017e;
color: #fff;
}
.background3 {
background-color: #cc0000;
color: #fff;
}
:deep(.el-select) {
min-width: 80px !important;
}
</style>

View File

@@ -96,21 +96,45 @@
<el-col :span="12" style="display: flex">
<div>
综合评估得分:
<span style="color: #299edf">
{{ dropList.assessData == 3.14159 ? '--' : dropList.assessData }}
<span
class="conclusion"
:class="
dropList.assessData == '特质'
? 'background1'
: dropList.assessData == '较差'
? 'background2'
: dropList.assessData == '极差'
? 'background3'
: ''
"
>
{{ dropList.assessData }}
</span>
</div>
</el-col>
</el-row>
<el-row style="width: 96%" v-for="(item, i) in evaluationData" class="row pb5">
<el-row style="width: 96%" v-for="(item, i) in evaluationData" class="row pb4 pt3">
<el-col :span="14" style="display: flex">
<img :src="url[i]" />
<span>{{ item.targetName }}</span>
<span style="line-height: 20px">{{ item.targetName }}</span>
</el-col>
<el-col :span="10" style="display: flex">
<div style="width: 100%">
评估得分
<span style="color: #299edf">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
<span
class="conclusion"
:class="
item.avg == '特质'
? 'background1'
: item.avg == '较差'
? 'background2'
: item.avg == '极差'
? 'background3'
: ''
"
>
{{ item.avg }}
</span>
</div>
</el-col>
</el-row>
@@ -207,7 +231,7 @@ const open = async (id: string) => {
// 完整性
getTotalIntegrityByLineIds(form).then((res: any) => {
let num = (res.data || 0) / 100
IntegrityNum.value = num
IntegrityNum.value = res.data
ComCharts.value = {
title: {
text: '完整性',
@@ -256,7 +280,7 @@ const open = async (id: string) => {
label: {
normal: {
formatter: () => {
return num * 100 + '%'
return (num * 100).toFixed(2) + '%'
},
textStyle: {
fontSize: 20,
@@ -328,7 +352,7 @@ const open = async (id: string) => {
label: {
normal: {
formatter: () => {
return num * 100 + '%'
return (num * 100).toFixed(2) + '%'
},
textStyle: {
fontSize: 20,
@@ -356,31 +380,31 @@ const open = async (id: string) => {
startTime: datePickerRef.value.timeValue[0],
endTime: datePickerRef.value.timeValue[1]
}).then((res: any) => {
dropList.value.assessData = res.data.assessData
dropList.value.assessData = res.data.assessLevel
evaluationData.value = [
{
targetName: '频率偏差',
avg: res.data.freqAssessData,
avg: res.data.freqAssessLevel,
sd: res.data.freqQualifyData
},
{
targetName: '电压偏差',
avg: res.data.vdevAssessData,
avg: res.data.vdevAssessLevel,
sd: res.data.vdevQualifyData
},
{
targetName: '电压总谐波畸变率',
avg: res.data.harmAssessData,
avg: res.data.harmAssessLevel,
sd: res.data.harmQualifyData
},
{
targetName: '三相电压不平衡度',
avg: res.data.unbalanceAssessData,
avg: res.data.unbalanceAssessLevel,
sd: res.data.unbalanceQualifyData
},
{
targetName: '闪变',
avg: res.data.flickerAssessData,
avg: res.data.flickerAssessLevel,
sd: res.data.flickerQualifyData
}
]
@@ -645,7 +669,7 @@ defineExpose({ open })
display: grid;
grid-template-rows: repeat(5, auto);
.row {
margin: 4px 2%;
margin: 4px 2% 0;
width: 100%;
box-shadow: 1px 1px 1px 1px #e8e3e3;
}
@@ -665,4 +689,23 @@ defineExpose({ open })
margin-left: 3px;
}
}
.conclusion {
display: inline-block;
padding: 0 5px;
height: 20px;
line-height: 20px;
border-radius: 4px;
}
.background1 {
background-color: #339966;
color: #fff;
}
.background2 {
background-color: #97017e;
color: #fff;
}
.background3 {
background-color: #cc0000;
color: #fff;
}
</style>

View File

@@ -329,6 +329,7 @@ const info = async (row: any) => {
numOneList: []
})
})
// 监测点告警
getGridDiagramAreaData(form).then((res: any) => {
let numOne = 0
let numOneList: any = []

View File

@@ -52,7 +52,7 @@
: ''
}"
>
{{ assessList.score }}
{{ assessList.level }}
</span>
</div>
<div class="evaluate">
@@ -80,7 +80,7 @@
: ''
}"
>
{{ item.score == 3.14159 ? '/' : item.score }}
{{ item.level }}
</div>
</div>
</div>