575 lines
18 KiB
Vue
575 lines
18 KiB
Vue
<template>
|
||
<div :class="show ? 'show' : 'noshow'">
|
||
<div class="boxLeft" :style="height">
|
||
<!-- 综合评估 -->
|
||
<div style="height: 110px">
|
||
<div class="title">
|
||
<span>
|
||
综合评估
|
||
<el-popover placement="right" :width="150" trigger="hover">
|
||
<template #reference>
|
||
<WarningFilled class="WarningFilled" />
|
||
</template>
|
||
<div class="text">
|
||
<span style="color: #00b07d">优质：(4.5 , 5]</span>
|
||
<br />
|
||
<span style="color: #2b7fd3">良好：(4 , 4.5]</span>
|
||
<br />
|
||
<span style="color: #ffcc33">合格：(3 , 4]</span>
|
||
<br />
|
||
<span style="color: #97017e">较差：(2 , 3]</span>
|
||
<br />
|
||
<span style="color: #cc0000">极差：[1 , 2]</span>
|
||
</div>
|
||
</el-popover>
|
||
</span>
|
||
<span class="info" @click="open(0)">
|
||
详情
|
||
<ArrowRight style="width: 12px" />
|
||
</span>
|
||
</div>
|
||
<div style="display: flex" class="mt2">
|
||
<img src="@/assets/img/FGX.png" />
|
||
</div>
|
||
<div class="mt10 TJTop">
|
||
<img src="@/assets/img/TJ.png" />
|
||
综合评估得分：
|
||
<span
|
||
:style="{
|
||
color:
|
||
assessList.score == 3.14159
|
||
? ''
|
||
: assessList.score > 4.5
|
||
? '#339966'
|
||
: assessList.score > 4
|
||
? '#2b7fd3'
|
||
: assessList.score > 3
|
||
? '#ffcc33'
|
||
: assessList.score > 2
|
||
? '#97017e'
|
||
: assessList.score > 0
|
||
? '#cc0000'
|
||
: ''
|
||
}"
|
||
>
|
||
{{ assessList.level }}
|
||
</span>
|
||
</div>
|
||
<div class="evaluate">
|
||
<div v-for="item in assessList.children" style="min-width: 50px">
|
||
<div>
|
||
<span class="line"></span>
|
||
{{ item.name }}
|
||
</div>
|
||
<div
|
||
style="margin-top: 5px"
|
||
:style="{
|
||
color:
|
||
item.score == 3.14159
|
||
? ''
|
||
: item.score > 4.5
|
||
? '#339966'
|
||
: item.score > 4
|
||
? '#2b7fd3'
|
||
: item.score > 3
|
||
? '#ffcc33'
|
||
: item.score > 2
|
||
? '#97017e'
|
||
: item.score > 0
|
||
? '#cc0000'
|
||
: ''
|
||
}"
|
||
>
|
||
{{ item.level }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 稳态电能质量水平评估 -->
|
||
<div>
|
||
<div class="title">
|
||
<span>稳态电能质量水平评估</span>
|
||
<span class="info" @click="open(1)">
|
||
详情
|
||
<ArrowRight style="width: 12px" />
|
||
</span>
|
||
</div>
|
||
<div style="display: flex" class="mt2">
|
||
<img src="@/assets/img/FGX.png" />
|
||
</div>
|
||
<div :style="boxHeight" class="boxR">
|
||
<div class="top">
|
||
<div class="TJTop">
|
||
<img src="@/assets/img/TJ.png" />
|
||
监测点越限占比：
|
||
<span class="num">
|
||
{{ harmonicLineRatio == 3.14159 ? '0' : harmonicLineRatio + '%' }}
|
||
</span>
|
||
</div>
|
||
|
||
<el-select v-model="harmonicType" style="width: 120px" @change="harmonicChange" size="small">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<!-- <MyEChart :style="EchHeight" :options="harmonicList" /> -->
|
||
<div :style="EchHeight" class="harmonic mt5">
|
||
<div class="progress" v-for="item in harmonicList">
|
||
<span class="text">{{ item.deptName }}</span>
|
||
<el-progress :percentage="item.ratio" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 暂态电能质量水平评估 -->
|
||
<div>
|
||
<div class="title">
|
||
<span>暂态电能质量水平评估</span>
|
||
<span class="info" @click="open(2)">
|
||
详情
|
||
<ArrowRight style="width: 12px" />
|
||
</span>
|
||
</div>
|
||
<div style="display: flex" class="mt2">
|
||
<img src="@/assets/img/FGX.png" />
|
||
</div>
|
||
<div :style="boxHeight" class="boxR">
|
||
<div class="top">
|
||
<div>
|
||
<div class="TJTop">
|
||
<img src="@/assets/img/TJ.png" />
|
||
<span>暂降严重度:</span>
|
||
</div>
|
||
<div class="ml22" style="font-size: 12px">
|
||
<span>
|
||
幅值低于90%:
|
||
<span class="num">{{ transientNum[0] }} </span>
|
||
幅值低于50%:
|
||
<span class="num">{{ transientNum[1] }}</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<el-select v-model="value" style="width: 120px" size="small" @change="transientChange">
|
||
<el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</div>
|
||
<!-- <MyEChart :style="EchHeight" :options="WTList" /> -->
|
||
<div :style="EchHeight" class="harmonic mt5">
|
||
<div class="progress" v-for="item in WTList">
|
||
<span class="text">{{ item.orgName }}</span>
|
||
<el-progress :percentage="item.count" :format="format" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 技术监督管理 -->
|
||
<div>
|
||
<div class="title">
|
||
<span>技术监督管理</span>
|
||
<span class="info" @click="open(3)">
|
||
详情
|
||
<ArrowRight style="width: 12px" />
|
||
</span>
|
||
</div>
|
||
<div style="display: flex" class="mt2">
|
||
<img src="@/assets/img/FGX.png" />
|
||
</div>
|
||
<div style="height: 150px" class="boxR">
|
||
<div class="evaluate bottom">
|
||
<div v-for="item in JDlist" style="width: 80px">
|
||
<div>{{ item.name }}</div>
|
||
<div style="margin-top: 5px; font-weight: 550">{{ item.value }}</div>
|
||
</div>
|
||
</div>
|
||
<el-row
|
||
style="height: calc(100% - 45px); display: flex; justify-content: space-around"
|
||
class="ml10 mr10 mt5"
|
||
>
|
||
<el-col :span="11" class="col pt10">
|
||
<div>
|
||
<span>异常问题总数：</span>
|
||
<span style="color: #2dcd28">0个</span>
|
||
</div>
|
||
<div>
|
||
<span style="width: 120px">已关联工单数：</span>
|
||
<span style="color: #81b337">0个</span>
|
||
</div>
|
||
<div>
|
||
<span style="width: 120px"> 工单转换率：</span>
|
||
<span style="color: #338dff">0%</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="11" class="col pt10" :offset="0.5">
|
||
<div>
|
||
<span>异常问题总数：</span>
|
||
<span style="color: #2dcd28">0个</span>
|
||
</div>
|
||
<div>
|
||
<span style="width: 120px">已关联工单数：</span>
|
||
<span style="color: #81b337">0个</span>
|
||
</div>
|
||
<div>
|
||
<span style="width: 120px"> 工单转换率：</span>
|
||
<span style="color: #338dff">0%</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img
|
||
class="imgR"
|
||
:style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
|
||
@click="show = !show"
|
||
src="@/assets/img/QH.png"
|
||
/>
|
||
<div class="legeng">
|
||
<div v-for="item in legengList">
|
||
<span :style="`background-color: ${item.color};`"></span>
|
||
<span>{{ item.title }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 评估 -->
|
||
<Evaluate ref="evaluateRef" />
|
||
<!-- 稳态 -->
|
||
<steadyState ref="steadyStateRef" />
|
||
<!-- 暂态 -->
|
||
<temporaryState ref="temporaryStateRef" />
|
||
<!-- 技术 -->
|
||
<technique ref="techniqueRef" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, reactive, ref, provide } from 'vue'
|
||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||
import { useDictData } from '@/stores/dictData'
|
||
import { mainHeight } from '@/utils/layout'
|
||
import { WarningFilled } from '@element-plus/icons-vue'
|
||
import { ArrowRight } from '@element-plus/icons-vue'
|
||
import Evaluate from './details/evaluate.vue'
|
||
import steadyState from './details/steadyState.vue'
|
||
import temporaryState from './details/temporaryState.vue'
|
||
import technique from './details/technique.vue'
|
||
import { getAssessOverview, getEvaluationOverview, getEventLevelEvaluation } from '@/api/device-boot/panorama'
|
||
const dictData = useDictData()
|
||
const show = ref(false)
|
||
const height = mainHeight(30)
|
||
const boxHeight: any = mainHeight(420, 2)
|
||
const EchHeight: any = mainHeight(490, 2)
|
||
const evaluateRef = ref()
|
||
const steadyStateRef = ref()
|
||
const formRow: any = ref({})
|
||
const temporaryStateRef = ref()
|
||
const techniqueRef = ref()
|
||
const mun = ref(0)
|
||
const options = ref([
|
||
{
|
||
label: '全指标',
|
||
value: '0'
|
||
},
|
||
{
|
||
label: '电压偏差',
|
||
value: '1'
|
||
},
|
||
{
|
||
label: '频率偏差',
|
||
value: '2'
|
||
},
|
||
{
|
||
label: '电压总谐波畸变率',
|
||
value: '3'
|
||
},
|
||
{
|
||
label: '电压闪变',
|
||
value: '4'
|
||
},
|
||
{
|
||
label: '三相电压不平衡度',
|
||
value: '5'
|
||
}
|
||
])
|
||
const harmonicType = ref('0')
|
||
const transientNum = ref([0, 0])
|
||
const options1: any = dictData.getBasicData('Event_Statis').filter(item => {
|
||
if (item.code == 'Voltage_Dip' || item.code == 'Voltage_Rise' || item.code == 'Short_Interruptions') {
|
||
return item
|
||
}
|
||
})
|
||
const legengList = [
|
||
{
|
||
color: '#00b07d',
|
||
title: '优质'
|
||
},
|
||
{
|
||
color: '#3399ff',
|
||
title: '良好'
|
||
},
|
||
{
|
||
color: '#ffcc33',
|
||
title: '合格'
|
||
},
|
||
{
|
||
color: '#db0887',
|
||
title: '较差'
|
||
},
|
||
{
|
||
color: '#ff0000',
|
||
title: '极差'
|
||
}
|
||
]
|
||
const assessList: any = ref([])
|
||
const JDlist = ref([
|
||
{
|
||
name: '技术监督计划',
|
||
value: 0
|
||
},
|
||
{
|
||
name: '在线监测',
|
||
value: 0
|
||
},
|
||
{
|
||
name: '用户投诉',
|
||
value: 0
|
||
},
|
||
{
|
||
name: '谐波普测',
|
||
value: 0
|
||
}
|
||
])
|
||
const harmonicList: any = ref([])
|
||
const harmonicLineRatio: any = ref(0)
|
||
const WTList: any = ref([])
|
||
|
||
const value = ref(options1[0].id)
|
||
const open = (e: number) => {
|
||
if (e == 0) {
|
||
evaluateRef.value.open(formRow.value)
|
||
} else if (e == 1) {
|
||
steadyStateRef.value.open(formRow.value)
|
||
} else if (e == 2) {
|
||
temporaryStateRef.value.open(formRow.value)
|
||
} else if (e == 3) {
|
||
techniqueRef.value.open(formRow.value)
|
||
}
|
||
}
|
||
const info = (row: any) => {
|
||
let form = {
|
||
...row,
|
||
id: row.orgNo,
|
||
deptIndex: row.orgNo,
|
||
orgId: row.orgNo,
|
||
ids: [],
|
||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||
isUpToGrid: row.isUpToGrid,
|
||
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
|
||
}
|
||
formRow.value = form
|
||
|
||
// 稳态电能质量水平评估概览数据
|
||
harmonicChange()
|
||
// 暂态统计详情
|
||
transientChange()
|
||
// 综合评估
|
||
setTimeout(() => {
|
||
getAssessOverview(form).then(res => {
|
||
assessList.value = res.data
|
||
})
|
||
}, 300)
|
||
}
|
||
const harmonicChange = () => {
|
||
getEvaluationOverview({ ...formRow.value, harmonicType: harmonicType.value }).then(res => {
|
||
harmonicLineRatio.value = res.data.lineRatio
|
||
harmonicList.value = res.data.childrenList.map((item: any) => {
|
||
item.ratio = item.ratio == 3.14159 ? 0 : item.ratio
|
||
return item
|
||
})
|
||
})
|
||
}
|
||
const transientChange = () => {
|
||
getEventLevelEvaluation({ ...formRow.value, ids: [value.value] }).then(res => {
|
||
let data = []
|
||
transientNum.value = [0, 0]
|
||
if (formRow.value.isUpToGrid == 0) {
|
||
data = res.data.info
|
||
transientNum.value = res.data.data
|
||
} else {
|
||
transientNum.value = res.data.gwData
|
||
data = res.data.gwInfo
|
||
}
|
||
WTList.value = []
|
||
mun.value = Math.max(...data.map((item: any) => item.count)) - 0
|
||
data.forEach((item: any) => {
|
||
item.count = item.count == 0 ? 0 : Number(((item.count / mun.value) * 100).toFixed(2))
|
||
})
|
||
WTList.value = data
|
||
})
|
||
}
|
||
const format = (percentage: any) => (Math.round(percentage * mun.value) / 100).toFixed(0) + '条'
|
||
|
||
defineExpose({ info, show })
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.boxLeft {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
padding: 10px 10px 10px 10px;
|
||
font-size: 13px;
|
||
overflow: hidden;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.title {
|
||
// height: ;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 15px;
|
||
line-height: 23px;
|
||
padding-left: 5px;
|
||
width: 100%;
|
||
font-weight: 550;
|
||
|
||
.info {
|
||
font-weight: normal;
|
||
display: flex;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
color: #757575;
|
||
}
|
||
.WarningFilled {
|
||
width: 12px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.TJTop {
|
||
display: flex;
|
||
img {
|
||
height: 1.2rem;
|
||
width: 1.2rem;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.evaluate {
|
||
margin: 10px 0;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
text-align: center;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
.line {
|
||
display: inline-block;
|
||
width: 0.5rem;
|
||
height: 0.5rem;
|
||
border-radius: 0.25rem;
|
||
background: var(--el-color-primary);
|
||
margin-right: 2px;
|
||
margin-bottom: 1px;
|
||
}
|
||
}
|
||
.boxR {
|
||
margin: 10px 0 0 0;
|
||
|
||
.num {
|
||
color: #2478f2;
|
||
}
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.bottom {
|
||
margin: 0;
|
||
border: 0px;
|
||
}
|
||
|
||
.harmonic {
|
||
display: grid;
|
||
overflow-y: auto;
|
||
.progress {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.text {
|
||
width: 50px;
|
||
font-size: 12px;
|
||
}
|
||
.el-progress {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.el-select) {
|
||
min-width: 120px;
|
||
}
|
||
.col {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
align-items: center;
|
||
background-color: #edededc0;
|
||
}
|
||
.imgR {
|
||
position: absolute;
|
||
padding: 10px;
|
||
top: calc(50% - 80px);
|
||
left: -23px;
|
||
|
||
height: 200px;
|
||
cursor: pointer;
|
||
}
|
||
.legeng {
|
||
position: absolute;
|
||
padding: 5px;
|
||
bottom: 0;
|
||
left: -75px;
|
||
width: 70px;
|
||
font-size: 12px;
|
||
height: 120px;
|
||
background: #fff;
|
||
border-radius: 5px;
|
||
display: grid;
|
||
line-height: 22px;
|
||
grid-template-rows: auto;
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
height: 10px;
|
||
border-radius: 2px;
|
||
width: 15px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
.show {
|
||
width: 0px;
|
||
transition: all 0.1s ease;
|
||
.boxLeft {
|
||
padding: 0;
|
||
}
|
||
}
|
||
.noshow {
|
||
width: 25%;
|
||
transition: all 0.3s ease;
|
||
.boxLeft {
|
||
padding: 10px 10px 10px 10px;
|
||
}
|
||
}
|
||
:deep(.el-progress__text) {
|
||
font-size: 0.8rem !important ;
|
||
}
|
||
:deep(.el-dialog__body) {
|
||
max-height: none !important;
|
||
}
|
||
</style>
|