Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

绘制离线地图

Browse Source
This commit is contained in:
GGJ
2024-12-23 09:29:59 +08:00
parent 8cdf4ca8b6
commit 1f94ac5267
26 changed files with 8578 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

608
src/views/pqs/panorama/components/mapR.vue Normal file
View File

@@ -0,0 +1,608 @@
<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.score == 3.14159 ? '/' : assessList.score }}
<!-- {{ 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.score == 3.14159 ? '/' : item.score }}
</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>
SARFI-90:
<span class="num">{{ transientNum[0] }} 　</span>
SARFI-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">{{ technology?.abnormalNum }}个</span>
</div>
<div>
<span style="width: 120px">已关联工单数：</span>
<span style="color: #81b337">{{ technology?.associatedNum }}个</span>
</div>
<div>
<span style="width: 120px">　工单转换率：</span>
<span style="color: #338dff">{{ technology?.conversionNum }}%</span>
</div>
</el-col>
<el-col :span="11" class="col pt10" :offset="0.5">
<div>
<span>工单总数：</span>
<span style="color: #2dcd28">{{ technology?.workNum }}个</span>
</div>
<div>
<span style="width: 120px">已处理工单数：</span>
<span style="color: #81b337">{{ technology?.processedNum }}个</span>
</div>
<div>
<span style="width: 120px">　工单处置率：</span>
<span style="color: #338dff">{{ technology?.disposalNum }}%</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,
getSupervisionData
} 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'
},
{
label: '谐波电压',
value: '6'
},
{
label: '谐波电流',
value: '7'
},
{
label: '间谐波电压',
value: '8'
},
{
label: '负序电流',
value: '9'
},
])
const technology: any = ref({})
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)
// 技术监督查询
getSupervisionData(form).then(res => {
technology.value = res.data
JDlist.value[0].value = res.data?.surveyNum || 0
JDlist.value[1].value = res.data?.onLineNum || 0
JDlist.value[2].value = res.data?.userNum || 0
JDlist.value[3].value = res.data?.trialRunNum || 0
})
}
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>