联调数据清洗页面 绘制终端运行评价页面

This commit is contained in:
GGJ
2025-04-03 16:08:47 +08:00
parent 3c84c41d35
commit 69aece65c1
34 changed files with 3005 additions and 2337 deletions

View File

@@ -20,9 +20,108 @@
</template>
<template v-slot:operation>
<el-button type="primary" class="ml10" @click="toggle" :icon="leftVisible ? 'el-icon-Hide' : 'el-icon-View'">
<el-button
type="primary"
class="ml10"
@click="toggle"
:icon="leftVisible ? 'el-icon-Hide' : 'el-icon-View'"
>
{{ leftVisible ? '隐藏' : '显示' }}
</el-button>
<el-tooltip placement="left-start">
<InfoFilled style="height: 20px" class="ml10" />
<!-- <el-button circle icon="el-icon-InfoFilled" /> -->
<template #content>
<div style="font-size: 16px " class="mt10 mb10">
<div>终端在线率</div>
<div class="em1">定义终端在指定时间段内处于在线状态的时间比例</div>
<div class="em1">计算方法在线率=终端在线时间/总监测时间×100%</div>
<div class="em1">评价标准</div>
<div class="em2">
<span style="color: #00b07d">优秀</span>
 在线率 95%
</div>
<div class="em2">
<span style="color: #2b7fd3">良好</span>
 90% 在线率 < 95
</div>
<div class="em2">
<span style="color: #ffcc33">一般</span>
 80% 在线率 < 90%
</div>
<div class="em2">
<span style="color: #97017e">较差</span>
 在线率 < 80%
</div>
<div class="mt10">数据完整性</div>
<div class="em1">定义终端上传数据的完整性和连续性</div>
<div class="em1">计算方法数据完整性=实际上传数据量/预期上传数据量×100%</div>
<div class="em1">评价标准</div>
<div class="em2">
<span style="color: #00b07d">优秀</span>
 完整性 98%
</div>
<div class="em2">
<span style="color: #2b7fd3">良好</span>
 95% 完整性 < 98%
</div>
<div class="em2">
<span style="color: #ffcc33">一般</span>
 90% 完整性 < 95%
</div>
<div class="em2">
<span style="color: #97017e">较差</span>
 完整性 < 90%
</div>
<div class="mt10">数据合格率</div>
<div class="em1">定义终端上传数据的合格率(以谐波电压为代表)</div>
<div class="em1">计算方法合格率=合格数据量/总数据量×100%</div>
<div class="em1">评价标准</div>
<div class="em2">
<span style="color: #00b07d">优秀</span>
 完整性 98%
</div>
<div class="em2">
<span style="color: #2b7fd3">良好</span>
 95% 完整性 < 98%
</div>
<div class="em2">
<span style="color: #ffcc33">一般</span>
 90% 完整性 < 95%
</div>
<div class="em2">
<span style="color: #97017e">较差</span>
 完整性 < 90%
</div>
<div class="mt10">综合评价方法</div>
<div class="em1">权重分配:根据各维度的重要性分配不同的权重例如:</div>
<div class="em2">终端在线率:20%</div>
<div class="em2">数据完整性:50%</div>
<div class="em2">数据合格率:30%</div>
<div class="em1">综合评分:综合评分=(单项评分x权重)</div>
<div class="em1">评价等级:</div>
<div class="em2">
<span style="color: #00b07d">优秀</span>
 综合评分 90
</div>
<div class="em2">
<span style="color: #2b7fd3">良好</span>
 80 综合评分 < 90
</div>
<div class="em2">
<span style="color: #ffcc33">一般</span>
 70 综合评分 < 80
</div>
<div class="em2">
<span style="color: #97017e">较差</span>
 综合评分 < 70
</div>
</div>
</template>
</el-tooltip>
</template>
</TableHeader>
<Map />
@@ -30,6 +129,7 @@
<transition name="slide-left">
<div class="left" :style="height" v-if="leftVisible">
<BorderBox13
style="height: 200px"
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
@@ -39,10 +139,12 @@
<span class="iconfont icon-zhongduantongji-xian"></span>
终端统计
</div>
<statistics />
</BorderBox13>
<BorderBox13
:color="[color[0], color[0]]"
class="box"
style="flex: 1"
:backgroundColor="`${color[0]}24`"
title="终端运行评价"
>
@@ -50,8 +152,10 @@
<span class="iconfont icon-daipingjia"></span>
终端运行评价
</div>
<run />
</BorderBox13>
<BorderBox13
:style="height3"
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
@@ -61,6 +165,7 @@
<span class="iconfont icon-a-qushi1"></span>
最近一周终端评价趋势
</div>
<week />
</BorderBox13>
</div>
</transition>
@@ -77,18 +182,23 @@
<span class="iconfont icon-a-ziyuan118"></span>
区域终端运行评价
</div>
<region />
</BorderBox13>
<BorderBox13
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
title="终端运行评价详情"
>
<div class="title">
<span class="iconfont icon-yunhangxiangqing"></span>
终端运行评价详情
</div>
</BorderBox13>
<div :style="height3">
<BorderBox13
style="height: 100%"
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
title="终端运行评价详情"
>
<div class="title">
<span class="iconfont icon-yunhangxiangqing"></span>
终端运行评价详情
</div>
<terminalOperation />
</BorderBox13>
</div>
</div>
</transition>
@@ -104,6 +214,8 @@
<span class="iconfont icon-yichangxiangqing-xian"></span>
异常终端详情
</div>
<terminalDetails />
<table />
</BorderBox13>
</div>
</transition>
@@ -118,6 +230,13 @@ import { mainHeight } from '@/utils/layout'
import Map from './components/map.vue'
import { BorderBox13 } from '@kjgl77/datav-vue3'
import { useConfig } from '@/stores/config'
import terminalOperation from './components/terminalOperation.vue'
import region from './components/region.vue'
import { InfoFilled } from '@element-plus/icons-vue'
import week from './components/week.vue'
import terminalDetails from './components/terminalDetails.vue'
import statistics from './components/statistics.vue'
import run from './components/run.vue'
const config = useConfig()
const color = config.layout.elementUiPrimary
const dictData = useDictData()
@@ -257,4 +376,12 @@ onMounted(() => {
transform: translateY(100%);
opacity: 0;
}
.em1 {
margin-top: 5px;
text-indent: 1em;
}
.em2 {
margin-top: 5px;
text-indent: 2em;
}
</style>