联调数据清洗页面 绘制终端运行评价页面
This commit is contained in:
@@ -12,3 +12,11 @@ export function dictDataCache() {
|
||||
url: '/system-boot/dictType/dictDataCache'
|
||||
})
|
||||
}
|
||||
//查询所有类型大类节点
|
||||
export function queryFirstNode(params: any) {
|
||||
return createAxios({
|
||||
url: '/system-boot/dictTree/queryFirstNode',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
10
src/api/device-boot/dataVerify.ts
Normal file
10
src/api/device-boot/dataVerify.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 异常-更新按钮-获取异常数据列表
|
||||
export function getMonitorVerifyDay(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/dataVerify/getMonitorVerifyDay',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -54,6 +54,24 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">电压合格率</div>
|
||||
<div class="code-name">&#xe70e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">在线率报表</div>
|
||||
<div class="code-name">&#xe7c2;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">wzlfx</div>
|
||||
<div class="code-name">&#xe60d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">首页-待评价</div>
|
||||
@@ -204,9 +222,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1742987095628') format('woff2'),
|
||||
url('iconfont.woff?t=1742987095628') format('woff'),
|
||||
url('iconfont.ttf?t=1742987095628') format('truetype');
|
||||
src: url('iconfont.woff2?t=1743573122508') format('woff2'),
|
||||
url('iconfont.woff?t=1743573122508') format('woff'),
|
||||
url('iconfont.ttf?t=1743573122508') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@@ -232,6 +250,33 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-dianyahegeshuai"></span>
|
||||
<div class="name">
|
||||
电压合格率
|
||||
</div>
|
||||
<div class="code-name">.icon-dianyahegeshuai
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zaixianshuaibaobiao0"></span>
|
||||
<div class="name">
|
||||
在线率报表
|
||||
</div>
|
||||
<div class="code-name">.icon-zaixianshuaibaobiao0
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-wanzhengshuaifenxi2"></span>
|
||||
<div class="name">
|
||||
wzlfx
|
||||
</div>
|
||||
<div class="code-name">.icon-wanzhengshuaifenxi2
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-daipingjia"></span>
|
||||
<div class="name">
|
||||
@@ -457,6 +502,30 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-dianyahegeshuai"></use>
|
||||
</svg>
|
||||
<div class="name">电压合格率</div>
|
||||
<div class="code-name">#icon-dianyahegeshuai</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zaixianshuaibaobiao0"></use>
|
||||
</svg>
|
||||
<div class="name">在线率报表</div>
|
||||
<div class="code-name">#icon-zaixianshuaibaobiao0</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-wanzhengshuaifenxi2"></use>
|
||||
</svg>
|
||||
<div class="name">wzlfx</div>
|
||||
<div class="code-name">#icon-wanzhengshuaifenxi2</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-daipingjia"></use>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3482754 */
|
||||
src: url('iconfont.woff2?t=1742987095628') format('woff2'),
|
||||
url('iconfont.woff?t=1742987095628') format('woff'),
|
||||
url('iconfont.ttf?t=1742987095628') format('truetype');
|
||||
src: url('iconfont.woff2?t=1743573122508') format('woff2'),
|
||||
url('iconfont.woff?t=1743573122508') format('woff'),
|
||||
url('iconfont.ttf?t=1743573122508') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -13,6 +13,18 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-dianyahegeshuai:before {
|
||||
content: "\e70e";
|
||||
}
|
||||
|
||||
.icon-zaixianshuaibaobiao0:before {
|
||||
content: "\e7c2";
|
||||
}
|
||||
|
||||
.icon-wanzhengshuaifenxi2:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.icon-daipingjia:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -5,6 +5,27 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "11708319",
|
||||
"name": "电压合格率",
|
||||
"font_class": "dianyahegeshuai",
|
||||
"unicode": "e70e",
|
||||
"unicode_decimal": 59150
|
||||
},
|
||||
{
|
||||
"icon_id": "31920601",
|
||||
"name": "在线率报表",
|
||||
"font_class": "zaixianshuaibaobiao0",
|
||||
"unicode": "e7c2",
|
||||
"unicode_decimal": 59330
|
||||
},
|
||||
{
|
||||
"icon_id": "42089357",
|
||||
"name": "wzlfx",
|
||||
"font_class": "wanzhengshuaifenxi2",
|
||||
"unicode": "e60d",
|
||||
"unicode_decimal": 58893
|
||||
},
|
||||
{
|
||||
"icon_id": "2545172",
|
||||
"name": "首页-待评价",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
src/assets/imgs/bg02.png
Normal file
BIN
src/assets/imgs/bg02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 697 B |
BIN
src/assets/imgs/bg1.png
Normal file
BIN
src/assets/imgs/bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/assets/imgs/ditu.png
Normal file
BIN
src/assets/imgs/ditu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/imgs/ditu1.png
Normal file
BIN
src/assets/imgs/ditu1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -203,7 +203,7 @@ const onExport = () => {
|
||||
tableStore.onTableAction('export', { showAllFlag: true })
|
||||
}
|
||||
|
||||
defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange,computedSearchRow })
|
||||
defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange,computedSearchRow,onExport })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -53,7 +53,7 @@ const loadData = () => {
|
||||
|
||||
res.data = [
|
||||
{
|
||||
name: '国网xx供电公司',
|
||||
name: '张家口供电公司',
|
||||
level: -1,
|
||||
id: 0,
|
||||
children: [
|
||||
|
||||
@@ -384,7 +384,7 @@ function calcSag() {
|
||||
<style scoped>
|
||||
|
||||
.divider {
|
||||
font-family: AlimamaDongFangDaKai;
|
||||
/* font-family: AlimamaDongFangDaKai; */
|
||||
}
|
||||
|
||||
@keyframes colorChange {
|
||||
|
||||
@@ -82,7 +82,7 @@ const handleNodeClick = (data: any, node: any) => {
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__header) {
|
||||
font-family: AlimamaDongFangDaKai;
|
||||
// font-family: AlimamaDongFangDaKai;
|
||||
font-size: 20px;
|
||||
&::before {
|
||||
content: '▍'; /* 添加星号 */
|
||||
|
||||
@@ -96,6 +96,7 @@
|
||||
<vxe-column title="国标限值(%)" field="name3" />
|
||||
<vxe-column title="判断">
|
||||
<template #default="{ row }">
|
||||
|
||||
<el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
|
||||
<el-tag v-else type="success">合格</el-tag>
|
||||
</template>
|
||||
@@ -119,8 +120,9 @@
|
||||
<vxe-column title="国标限值(A)" field="name3" />
|
||||
<vxe-column title="判断">
|
||||
<template #default="{ row }">
|
||||
<!-- <span v-if="row.name2 == null"></span>
|
||||
<el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
|
||||
<el-tag v-else type="success">合格</el-tag>
|
||||
<el-tag v-else type="success">合格</el-tag> -->
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
@@ -282,6 +284,7 @@ onMounted(() => {
|
||||
for (let i = 2; i < 51; i++) {
|
||||
harmonicVoltage.value.push({
|
||||
name: i
|
||||
|
||||
})
|
||||
harmonicCurrents.value.push({
|
||||
name: i
|
||||
|
||||
@@ -157,7 +157,7 @@ import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import addform from './addform.vue'
|
||||
const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
|
||||
const dictData = useDictData()
|
||||
const pageHeight = mainHeight(90)
|
||||
const pageHeight = mainHeight(70)
|
||||
const areaOptionList = dictData.getBasicData('jibei_area')
|
||||
const addformRef = ref()
|
||||
const form: any = ref({
|
||||
@@ -381,7 +381,7 @@ const edit = (item: any,row: any) => {
|
||||
justify-content: end;
|
||||
}
|
||||
:deep(.el-collapse-item__header) {
|
||||
font-family: AlimamaDongFangDaKai;
|
||||
// font-family: AlimamaDongFangDaKai;
|
||||
font-size: 20px;
|
||||
&::before {
|
||||
content: '▍'; /* 添加星号 */
|
||||
|
||||
@@ -71,6 +71,9 @@ import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox, ElDatePicker } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
defineOptions({
|
||||
name: 'runManage/addUser'
|
||||
})
|
||||
const { push } = useRouter()
|
||||
const dictData = useDictData()
|
||||
const areaOptionList = dictData.getBasicData('jibei_area')
|
||||
@@ -81,20 +84,38 @@ const tableStore: any = new TableStore({
|
||||
method: 'GET',
|
||||
publicHeight: 65,
|
||||
column: [
|
||||
{ field: 'timerName', title: '所属地市' },
|
||||
{ field: 'timerName', title: '用户名称' },
|
||||
{ field: 'timerName', title: '接入变电站' },
|
||||
{ field: 'timerName', title: '电站电压等级' },
|
||||
{ field: 'timerName', title: '接入母线' },
|
||||
{ field: 'timerName', title: '接入电压等级' },
|
||||
{ field: 'timerName', title: '供电设备容量(MVA)' },
|
||||
{ field: 'timerName', title: '最小短路容量(MVA)' },
|
||||
{ field: 'timerName', title: '用户协议容量(MVA)' },
|
||||
{
|
||||
width: '60',
|
||||
type: 'checkbox'
|
||||
},
|
||||
{
|
||||
title: '序号',
|
||||
width: 80,
|
||||
field: 'name',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '所属地市', minWidth: 100 },
|
||||
{ field: 'name1', title: '用户名称', minWidth: 180 },
|
||||
{ field: 'name2', title: '接入变电站', minWidth: 180 },
|
||||
{ field: 'name3', title: '电站电压等级', minWidth: 180 },
|
||||
{ field: 'name4', title: '接入母线', minWidth: 180 },
|
||||
{ field: 'name5', title: '接入电压等级', minWidth: 180 },
|
||||
{ field: 'name6', title: '供电设备容量(MVA)', minWidth: 180 },
|
||||
{ field: 'name7', title: '最小短路容量(MVA)', minWidth: 180 },
|
||||
{ field: 'name8', title: '用户协议容量(MVA)', minWidth: 180 },
|
||||
{ field: 'name9', title: 'PCC点名称', minWidth: 180 },
|
||||
{ field: 'name10', title: 'PCC电网电阻', minWidth: 180 },
|
||||
{ field: 'name11', title: '长度', minWidth: 180 },
|
||||
{ field: 'name12', title: '回路数', minWidth: 180 },
|
||||
{ field: 'name13', title: '导线类型', minWidth: 180 },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '220',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
@@ -120,7 +141,25 @@ const tableStore: any = new TableStore({
|
||||
|
||||
loadCallback: () => {
|
||||
// 格式化 cron 表达式
|
||||
tableStore.table.data = []
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '张家口',
|
||||
name1: '特种钢厂',
|
||||
name2: '220kV石门变',
|
||||
name3: '220kV',
|
||||
name4: '110kV 母线',
|
||||
name5: '110kV',
|
||||
name6: '90',
|
||||
name7: '100',
|
||||
name8: '40',
|
||||
name9: '测试名称',
|
||||
name10: '10',
|
||||
name11: '12',
|
||||
name12: '13',
|
||||
name13: '14',
|
||||
name14: '15'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
|
||||
@@ -15,6 +15,6 @@ import Dictionary from '@/views/pqs/runManage/assessment/components/dictionary/i
|
||||
defineOptions({
|
||||
name: 'runManage/assessment'
|
||||
})
|
||||
const activeName = ref('3')
|
||||
const activeName = ref('1')
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<!--业务用户管理界面-->
|
||||
<template>
|
||||
<div>
|
||||
<TableHeader date-picker>
|
||||
<TableHeader date-picker ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="对象类型">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.supvObjType"
|
||||
v-model="tableStore.table.params.objType"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
placeholder="请选择对象类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in supvObjTypeList"
|
||||
v-for="item in objTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
@@ -24,7 +24,7 @@
|
||||
</TableHeader>
|
||||
<div class="card-list pt10">
|
||||
<div class="monitoringPoints">
|
||||
<el-card style="height: 390px">
|
||||
<el-card style="height: 200px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>监测点统计</span>
|
||||
@@ -34,21 +34,28 @@
|
||||
<div class="statistics">
|
||||
<div class="divBox">
|
||||
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
||||
<span class="divBox_title">总数</span>
|
||||
<span class="divBox_num" style="color: #57bc6e">400</span>
|
||||
<span class="divBox_title">监测点总数</span>
|
||||
<span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
|
||||
</div>
|
||||
<div class="divBox" style="width: 200px">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #fca955"></span>
|
||||
<span class="divBox_title">异常测点数</span>
|
||||
<span class="divBox_num" style="color: #fca955">200</span>
|
||||
<span class="divBox_num" style="color: #fca955">
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="divBox">
|
||||
<span class="iconfont icon-shouruzhanbi" style="color: #06b6a9"></span>
|
||||
<span class="divBox_title">占比</span>
|
||||
<span class="divBox_num" style="color: #06b6a9">50%</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="mt10" style="height: 240px">
|
||||
<div class="echartTitle">
|
||||
<div>异常占比</div>
|
||||
<div>
|
||||
{{
|
||||
isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
|
||||
? 0
|
||||
: ((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100).toFixed(2)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 30px">
|
||||
<MyEchart :options="percentage"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,33 +66,31 @@
|
||||
<span>异常指标统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 180px; text-align: left">指标名称</span>
|
||||
<span style="width: 170px; text-align: left">指标名称</span>
|
||||
<span style="flex: 1">合理范围</span>
|
||||
<span style="width: 100px">异常测点数</span>
|
||||
<span style="width: 90px">异常测点数</span>
|
||||
</div>
|
||||
<div :style="indicatorHeight" style="overflow-y: auto">
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="width: 180px; height: 24px" class="iconDiv">
|
||||
<!-- <span
|
||||
class="iconFont iconfont icon-yichang"
|
||||
|
||||
></span> -->
|
||||
<div :style="{ backgroundColor: o.quantity > 0 ? '#ff9800' : '' }"></div>
|
||||
{{ o.name }}
|
||||
<span style="width: 170px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
|
||||
{{ o.targetName }}
|
||||
</span>
|
||||
<span style="flex: 1; text-align: center">
|
||||
<!-- 合理范围： -->
|
||||
<span style="color: #388e3c" class="text">{{ o.range }}</span>
|
||||
{{ o.unit }}
|
||||
<span style="color: #388e3c" class="text">{{ o.rangeDesc }}</span>
|
||||
</span>
|
||||
<span style="width: 100px; text-align: center">
|
||||
<span style="width: 90px; text-align: center">
|
||||
<span
|
||||
style="color: #ff9800; cursor: pointer; text-decoration: underline"
|
||||
class="text"
|
||||
@click="quantityClick(o)"
|
||||
>
|
||||
{{ o.quantity }}
|
||||
{{ o.ids.length }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -102,21 +107,26 @@
|
||||
<MyEchart :options="options"></MyEchart>
|
||||
</div>
|
||||
<el-form :inline="true" class="form">
|
||||
<el-form-item label="告警持续天数"></el-form-item>
|
||||
<el-form-item label="告警阀值(天)">
|
||||
<el-input-number v-model="tableStore.table.params.alarm" :min="0" :step="1" step-strictly />
|
||||
<el-form-item label="异常持续天数"></el-form-item>
|
||||
<el-form-item label="异常阀值(天)">
|
||||
<el-input-number
|
||||
v-model="tableStore.table.params.alarmDayLimit"
|
||||
:min="0"
|
||||
:step="1"
|
||||
step-strictly
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="预警阀值(天)">
|
||||
<el-input-number
|
||||
v-model="tableStore.table.params.earlyWarning"
|
||||
v-model="tableStore.table.params.warnDayLimit"
|
||||
:min="0"
|
||||
:step="1"
|
||||
step-strictly
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form_but">
|
||||
<el-button type="primary" icon="el-icon-Refresh">更新</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download">导出</el-button>
|
||||
<el-button type="primary" @click="MonitorVerify" icon="el-icon-Refresh">更新</el-button>
|
||||
<el-button type="primary" @click="onExport" icon="el-icon-Download">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--表格-->
|
||||
@@ -131,174 +141,62 @@
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { deleteDeploy } from '@/api/process-boot/bpm'
|
||||
import { onMounted, provide, ref } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { CaretRight } from '@element-plus/icons-vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import anomalyDetails from './anomalyDetails.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
import { getMonitorVerifyDay } from '@/api/device-boot/dataVerify'
|
||||
import { queryFirstNode } from '@/api/auth'
|
||||
|
||||
const anomalyDetailsRef = ref()
|
||||
const dictData = useDictData()
|
||||
//字典获取监督对象类型
|
||||
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
|
||||
const objTypeList: any = ref([])
|
||||
const pageHeight = mainHeight(155)
|
||||
const indicatorHeight = mainHeight(652)
|
||||
const indicatorHeight = mainHeight(507)
|
||||
const tableRef = ref()
|
||||
const abnormal = ref([
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0
|
||||
})
|
||||
|
||||
const percentage = ref({})
|
||||
const TableHeaderRef = ref()
|
||||
const abnormal: any = ref([])
|
||||
const mapList: any = ref([])
|
||||
const segmented = ref(1)
|
||||
const segmentedList = [
|
||||
{
|
||||
name: '频率',
|
||||
range: '42.5~57.5',
|
||||
unit: '',
|
||||
quantity: 11
|
||||
label: '基础数据',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '频率偏差',
|
||||
range: '-7.5~7.5',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
label: '稳态数据',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '相（线）电压有效值',
|
||||
range: '0~150%U',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
range: '-20%~20%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电流有效值',
|
||||
range: '大于CT一次变比',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '单相功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '单相基波功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '三相功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '基波功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压总谐波畸变率',
|
||||
range: '0~30%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '相（线）电压基波有效值',
|
||||
range: '0~150%U',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '相（线）电压基波相角',
|
||||
range: '-180~180',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '谐波电压含有率',
|
||||
range: '0~30%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '谐波电压相角',
|
||||
range: '-180~180',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '间谐波电压含有率',
|
||||
range: '0~30%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '正序、负序和零序电压',
|
||||
range: '0~150%U',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '负序电压不平衡度',
|
||||
range: '0~40%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '零序电压不平衡度',
|
||||
range: '0~40%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压波动',
|
||||
range: '0~40%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '短时间闪变值',
|
||||
range: '0~20',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '长时间闪变值',
|
||||
range: '0~20',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压暂降特征幅值',
|
||||
range: '0~90%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压暂升特征幅值',
|
||||
range: '110%~180%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
label: '暂态数据',
|
||||
value: 3
|
||||
}
|
||||
])
|
||||
]
|
||||
const tableStore = new TableStore({
|
||||
url: '/user-boot/user/getAllUserSimpleList',
|
||||
method: 'GET',
|
||||
isWebPaging: true,
|
||||
url: '/device-boot/dataVerify/getMonitorVerifyData',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
publicHeight: 480,
|
||||
filename: '异常数据',
|
||||
publicHeight: 530,
|
||||
column: [
|
||||
{ title: '序号', width: 80 },
|
||||
{
|
||||
title: '序号',
|
||||
width: 80,
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '监测点名称',
|
||||
field: 'name',
|
||||
field: 'monitorName',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
@@ -306,7 +204,7 @@ const tableStore = new TableStore({
|
||||
},
|
||||
{
|
||||
title: '所属终端名称',
|
||||
field: 'name1',
|
||||
field: 'devName',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
@@ -314,18 +212,24 @@ const tableStore = new TableStore({
|
||||
},
|
||||
{
|
||||
title: '所属电站',
|
||||
field: 'name2',
|
||||
field: 'stationName',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
}
|
||||
},
|
||||
{ title: '监测对象类型', field: 'name3' },
|
||||
{ title: '监测对象名称', field: 'name4' },
|
||||
{ title: '电压等级', field: 'name5' },
|
||||
{
|
||||
title: '监测对象类型',
|
||||
field: 'objType'
|
||||
},
|
||||
{
|
||||
title: '监测对象名称',
|
||||
field: 'objName'
|
||||
},
|
||||
{ title: '电压等级', field: 'voltageLevel' },
|
||||
{
|
||||
title: '异常天数',
|
||||
field: 'name6',
|
||||
field: 'abnormalDay',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
@@ -333,7 +237,7 @@ const tableStore = new TableStore({
|
||||
},
|
||||
{
|
||||
title: '严重度',
|
||||
field: 'name7',
|
||||
field: 'severity',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
@@ -345,355 +249,208 @@ const tableStore = new TableStore({
|
||||
1: '告警'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '120',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '工单',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: row => {}
|
||||
}
|
||||
]
|
||||
}
|
||||
// {
|
||||
// title: '操作',
|
||||
// width: '120',
|
||||
// render: 'buttons',
|
||||
// buttons: [
|
||||
// {
|
||||
// name: 'edit',
|
||||
// title: '工单',
|
||||
// type: 'primary',
|
||||
// icon: 'el-icon-Plus',
|
||||
// render: 'basicButton',
|
||||
// click: row => {}
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '1'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '1'
|
||||
}
|
||||
]
|
||||
// console.log('🚀 ~ abnormal.value:', tableStore.table.data)
|
||||
monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //异常测点数
|
||||
abnormal.value = tableStore.table.data.targetList
|
||||
mapList.value = tableStore.table.data.mapList
|
||||
tableStore.table.allData = tableStore.table.data.monitorAlarmInfo
|
||||
tableStore.table.data = tableStore.table.data.monitorAlarmInfo
|
||||
|
||||
echart()
|
||||
}
|
||||
})
|
||||
|
||||
const options = ref({
|
||||
title: {
|
||||
text: '监测点异常情况(2025-03-01~2025-03-10)'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
name: '时间',
|
||||
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
|
||||
data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10']
|
||||
},
|
||||
yAxis: {
|
||||
name: '数量' // 给X轴加单位
|
||||
},
|
||||
grid: {},
|
||||
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '告警监测点数量',
|
||||
type: 'bar',
|
||||
|
||||
data: [11, 11, 11, 11, 0, 0, 0, 0, 0, 0]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const percentage = ref({
|
||||
// options: {
|
||||
// tooltip: {
|
||||
// show: false
|
||||
// },
|
||||
// grid: {
|
||||
// left: 50
|
||||
// },
|
||||
// toolbox: {
|
||||
// show: false
|
||||
// },
|
||||
// legend: {
|
||||
// show: false
|
||||
// },
|
||||
// dataZoom: null,
|
||||
// xAxis: {
|
||||
// max: 100,
|
||||
// splitLine: {
|
||||
// show: false
|
||||
// },
|
||||
// axisLine: {
|
||||
// show: false
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false
|
||||
// },
|
||||
// axisTick: {
|
||||
// show: false
|
||||
// }
|
||||
// },
|
||||
|
||||
// yAxis: [
|
||||
// {
|
||||
// type: 'category',
|
||||
// inverse: false,
|
||||
// data: ['占比'],
|
||||
// axisLine: {
|
||||
// show: false
|
||||
// },
|
||||
// axisTick: {
|
||||
// show: false
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// series: [
|
||||
// {
|
||||
// //内
|
||||
// type: 'bar',
|
||||
// barWidth: 18,
|
||||
|
||||
// legendHoverLink: false,
|
||||
// silent: true,
|
||||
// itemStyle: {
|
||||
// color: '#06b6a9'
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// position: 'left',
|
||||
// formatter: '{b}',
|
||||
// textStyle: {
|
||||
// color: '#000',
|
||||
// fontSize: 14,
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: [50],
|
||||
// z: 1,
|
||||
// animationEasing: 'elasticOut'
|
||||
// },
|
||||
// {
|
||||
// //分隔
|
||||
// type: 'pictorialBar',
|
||||
// itemStyle: {
|
||||
// color: '#e4e7ed'
|
||||
// },
|
||||
// symbolRepeat: 'fixed',
|
||||
// symbolMargin: 4,
|
||||
// symbol: 'rect',
|
||||
// symbolClip: true,
|
||||
// symbolSize: [2, 21],
|
||||
// symbolPosition: 'start',
|
||||
// symbolOffset: [0, 0],
|
||||
// symbolBoundingData: 100,
|
||||
// data: [50],
|
||||
// z: 2,
|
||||
// animationEasing: 'elasticOut'
|
||||
// },
|
||||
// {
|
||||
// //外边框
|
||||
// type: 'pictorialBar',
|
||||
// symbol: 'rect',
|
||||
// symbolBoundingData: 100,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: 'none'
|
||||
// }
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// formatter: '{c}%',
|
||||
// position: 'right',
|
||||
// offset: [0, 0], //设置右边数据位置
|
||||
// textStyle: {
|
||||
// color: '#06b6a9',
|
||||
// fontSize: 16,
|
||||
// fontWeight: 600
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: [50],
|
||||
// z: 0,
|
||||
// animationEasing: 'elasticOut'
|
||||
// },
|
||||
// {
|
||||
// name: '外框',
|
||||
// type: 'bar',
|
||||
// barGap: '-100%', //设置外框粗细
|
||||
// data: [100],
|
||||
// barWidth: 26,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#e4e7ed', //填充色
|
||||
// barBorderColor: '#e4e7ed', //边框色
|
||||
// barBorderWidth: 1, //边框宽度
|
||||
// // barBorderRadius: 0, //圆角半径
|
||||
// label: {
|
||||
// //标签显示位置
|
||||
// show: false,
|
||||
// position: 'top' //insideTop 或者横向的 insideLeft
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// z: 0
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
options: {
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
dataZoom: null,
|
||||
title: {
|
||||
text: `{t|占比}
|
||||
{v|50%}`,
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
color: config.layout.elementUiPrimary[0],
|
||||
|
||||
rich: {
|
||||
v: {
|
||||
fontSize: 28,
|
||||
fontWeight: '550',
|
||||
color: config.layout.elementUiPrimary[0]
|
||||
},
|
||||
|
||||
t: {
|
||||
lineHeight: 28,
|
||||
fontSize: 16
|
||||
}
|
||||
const options = ref({})
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#ff9800'],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '0%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%'
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
data: ['']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value'
|
||||
}
|
||||
}
|
||||
},
|
||||
color: ['#ccc'],
|
||||
series: [
|
||||
{
|
||||
name: 'Line 1',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: ['63%', '80%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '异常占比',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FD6E6A' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ff9800' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: 80,
|
||||
name: '01',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: config.layout.elementUiPrimary[0],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '02',
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
symbolRepeat: 50,
|
||||
// symbolMargin: 300,
|
||||
symbol: 'rect',
|
||||
symbolClip: true,
|
||||
symbolSize: [2, 15],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [0, 0],
|
||||
data: [100],
|
||||
z: 1,
|
||||
zlevel: 0
|
||||
},
|
||||
{
|
||||
name: '机器故障率',
|
||||
type: 'bar',
|
||||
barGap: '-125%',
|
||||
data: [100],
|
||||
barWidth: 18,
|
||||
|
||||
tableStore.table.params.radio = '1'
|
||||
tableStore.table.params.alarm = 5
|
||||
tableStore.table.params.earlyWarning = 1
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'transparent',
|
||||
barBorderColor: 'rgb(148,217,249)',
|
||||
barBorderWidth: 1
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: `监测点异常情况(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
|
||||
},
|
||||
xAxis: {
|
||||
name: '时间',
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
data: mapList.value.map(item => item.time),
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
let time = ''
|
||||
if (value.slice(-2) == '01') {
|
||||
time = value
|
||||
} else {
|
||||
time = value.slice(5, 10)
|
||||
}
|
||||
return time
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '数量' // 给X轴加单位
|
||||
},
|
||||
grid: {},
|
||||
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '异常监测点数量',
|
||||
type: 'bar',
|
||||
|
||||
data: mapList.value.map(item => item.val)
|
||||
// mapList.value.map(item => ({
|
||||
// value: [item.time, item.val]
|
||||
// }))
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
tableStore.table.params.deptId = dictData.state.area[0].id
|
||||
tableStore.table.params.objType = ''
|
||||
tableStore.table.params.alarmDayLimit = 5
|
||||
tableStore.table.params.warnDayLimit = 1
|
||||
|
||||
const quantityClick = (e: any) => {
|
||||
anomalyDetailsRef.value.open(e)
|
||||
}
|
||||
// 更新
|
||||
const MonitorVerify = () => {
|
||||
tableStore.table.loading = true
|
||||
getMonitorVerifyDay(tableStore.table.params).then(res => {
|
||||
tableStore.table.data = res.data
|
||||
tableStore.table.allData = res.data
|
||||
tableStore.table.loading = false
|
||||
})
|
||||
}
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
tableStore.table.allFlag = true
|
||||
}
|
||||
onMounted(() => {
|
||||
TableHeaderRef.value.setDatePicker([
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
])
|
||||
queryFirstNode({ type: 0 }).then(res => {
|
||||
objTypeList.value = res.data
|
||||
})
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
@@ -710,8 +467,9 @@ provide('tableStore', tableStore)
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.divBox {
|
||||
margin: 0 10px 10px 0;
|
||||
width: 200px;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
@@ -812,4 +570,24 @@ provide('tableStore', tableStore)
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
.echartTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #fca955;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-segmented__item-selected, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
}
|
||||
:deep(.el-segmented__item, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<template v-slot:select>
|
||||
<el-form-item label="对象类型">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.supvObjType"
|
||||
v-model="tableStore.table.params.objType"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
placeholder="请选择对象类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in supvObjTypeList"
|
||||
v-for="item in objTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
@@ -24,7 +24,7 @@
|
||||
</TableHeader>
|
||||
<div class="card-list pt10">
|
||||
<div class="monitoringPoints">
|
||||
<el-card style="height: 390px">
|
||||
<el-card style="height: 200px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>监测点统计</span>
|
||||
@@ -34,21 +34,28 @@
|
||||
<div class="statistics">
|
||||
<div class="divBox">
|
||||
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
||||
<span class="divBox_title">总数</span>
|
||||
<span class="divBox_num" style="color: #57bc6e">400</span>
|
||||
<span class="divBox_title">监测点总数</span>
|
||||
<span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
|
||||
</div>
|
||||
<div class="divBox" style="width: 200px">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #fca955"></span>
|
||||
<span class="iconfont icon-yichang" style="color: #ff0000"></span>
|
||||
<span class="divBox_title">告警测点数</span>
|
||||
<span class="divBox_num" style="color: #fca955">200</span>
|
||||
<span class="divBox_num" style="color: #ff0000">
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="divBox">
|
||||
<span class="iconfont icon-shouruzhanbi" style="color: #06b6a9"></span>
|
||||
<span class="divBox_title">占比</span>
|
||||
<span class="divBox_num" style="color: #06b6a9">50%</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="mt10" style="height: 240px">
|
||||
<div class="echartTitle">
|
||||
<div>告警占比</div>
|
||||
<div>
|
||||
{{
|
||||
isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
|
||||
? 0
|
||||
: ((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100).toFixed(2)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 30px">
|
||||
<MyEchart :options="percentage"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,29 +66,28 @@
|
||||
<span>告警指标统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="flex: 1; text-align: left">指标名称</span>
|
||||
|
||||
<span style="width: 100px">告警测点数</span>
|
||||
<span style="width: 110px">告警测点数</span>
|
||||
</div>
|
||||
<div :style="indicatorHeight" style="overflow-y: auto">
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="flex: 1; height: 24px" class="iconDiv">
|
||||
<!-- <span
|
||||
class="iconFont iconfont icon-yichang"
|
||||
|
||||
></span> -->
|
||||
<div :style="{ backgroundColor: o.quantity > 0 ? '#ff9800' : '' }"></div>
|
||||
{{ o.name }}
|
||||
<div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
|
||||
{{ o.targetName }}
|
||||
</span>
|
||||
|
||||
<span style="width: 100px; text-align: center">
|
||||
<span style="width: 110px; text-align: center">
|
||||
<span
|
||||
style="color: #ff9800; cursor: pointer; text-decoration: underline"
|
||||
class="text"
|
||||
@click="quantityClick(o)"
|
||||
>
|
||||
{{ o.quantity }}
|
||||
{{ o.ids.length }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -100,11 +106,16 @@
|
||||
<el-form :inline="true" class="form">
|
||||
<el-form-item label="告警持续天数"></el-form-item>
|
||||
<el-form-item label="告警阀值(天)">
|
||||
<el-input-number v-model="tableStore.table.params.alarm" :min="0" :step="1" step-strictly />
|
||||
<el-input-number
|
||||
v-model="tableStore.table.params.alarmDayLimit"
|
||||
:min="0"
|
||||
:step="1"
|
||||
step-strictly
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="预警阀值(天)">
|
||||
<el-input-number
|
||||
v-model="tableStore.table.params.earlyWarning"
|
||||
v-model="tableStore.table.params.warnDayLimit"
|
||||
:min="0"
|
||||
:step="1"
|
||||
step-strictly
|
||||
@@ -127,174 +138,59 @@
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { deleteDeploy } from '@/api/process-boot/bpm'
|
||||
import { onMounted, provide, ref } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { CaretRight } from '@element-plus/icons-vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import alarmDetails from './alarmDetails.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
import { queryFirstNode } from '@/api/auth'
|
||||
|
||||
const alarmDetailsRef = ref()
|
||||
const dictData = useDictData()
|
||||
//字典获取监督对象类型
|
||||
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
|
||||
const objTypeList: any = ref([])
|
||||
const pageHeight = mainHeight(155)
|
||||
const indicatorHeight = mainHeight(652)
|
||||
const indicatorHeight = mainHeight(507)
|
||||
const tableRef = ref()
|
||||
const abnormal = ref([
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0
|
||||
})
|
||||
|
||||
const percentage = ref({})
|
||||
const abnormal: any = ref([])
|
||||
const segmented = ref(1)
|
||||
const segmentedList = [
|
||||
{
|
||||
name: '频率',
|
||||
range: '42.5~57.5',
|
||||
unit: '',
|
||||
quantity: 11
|
||||
label: '基础数据',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '频率偏差',
|
||||
range: '-7.5~7.5',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
label: '稳态数据',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '相（线）电压有效值',
|
||||
range: '0~150%U',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
range: '-20%~20%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电流有效值',
|
||||
range: '大于CT一次变比',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '单相功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '单相基波功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '三相功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '基波功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压总谐波畸变率',
|
||||
range: '0~30%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '相（线）电压基波有效值',
|
||||
range: '0~150%U',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '相（线）电压基波相角',
|
||||
range: '-180~180',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '谐波电压含有率',
|
||||
range: '0~30%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '谐波电压相角',
|
||||
range: '-180~180',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '间谐波电压含有率',
|
||||
range: '0~30%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '正序、负序和零序电压',
|
||||
range: '0~150%U',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '负序电压不平衡度',
|
||||
range: '0~40%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '零序电压不平衡度',
|
||||
range: '0~40%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压波动',
|
||||
range: '0~40%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '短时间闪变值',
|
||||
range: '0~20',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '长时间闪变值',
|
||||
range: '0~20',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压暂降特征幅值',
|
||||
range: '0~90%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压暂升特征幅值',
|
||||
range: '110%~180%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
label: '暂态数据',
|
||||
value: 3
|
||||
}
|
||||
])
|
||||
]
|
||||
const tableStore = new TableStore({
|
||||
url: '/user-boot/user/getAllUserSimpleList',
|
||||
method: 'GET',
|
||||
isWebPaging: true,
|
||||
url: '/device-boot/dataVerify/getMonitorVerifyData',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
publicHeight: 480,
|
||||
column: [
|
||||
{ title: '序号', width: 80 },
|
||||
{
|
||||
title: '序号',
|
||||
width: 80,
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '监测点名称',
|
||||
field: 'name',
|
||||
field: 'monitorName',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
@@ -302,26 +198,39 @@ const tableStore = new TableStore({
|
||||
},
|
||||
{
|
||||
title: '所属终端名称',
|
||||
field: 'name1',
|
||||
field: 'devName',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
return `<div class="table_name">测试终端</div>`
|
||||
// `<div class="table_name">${row.cellValue}</div>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '所属电站',
|
||||
field: 'name2',
|
||||
field: 'stationName',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
}
|
||||
},
|
||||
{ title: '监测对象类型', field: 'name3' },
|
||||
{ title: '监测对象名称', field: 'name4' },
|
||||
{ title: '电压等级', field: 'name5' },
|
||||
{
|
||||
title: '监测对象类型',
|
||||
field: 'objType',
|
||||
formatter: (row, column) => {
|
||||
return `测试光伏电站`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '监测对象名称',
|
||||
field: 'objName',
|
||||
formatter: (row, column) => {
|
||||
return `测试对象`
|
||||
}
|
||||
},
|
||||
{ title: '电压等级', field: 'voltageLevel' },
|
||||
{
|
||||
title: '告警天数',
|
||||
field: 'name6',
|
||||
field: 'abnormalDay',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
@@ -329,7 +238,7 @@ const tableStore = new TableStore({
|
||||
},
|
||||
{
|
||||
title: '严重度',
|
||||
field: 'name7',
|
||||
field: 'severity',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
@@ -358,78 +267,12 @@ const tableStore = new TableStore({
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '1'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '1'
|
||||
}
|
||||
]
|
||||
console.log('🚀 ~ abnormal.value:', tableStore.table.data)
|
||||
monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //告警测点数
|
||||
abnormal.value = tableStore.table.data.targetList
|
||||
tableStore.table.data = tableStore.table.data.monitorAlarmInfo
|
||||
echart()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -465,231 +308,119 @@ const options = ref({
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const percentage = ref({
|
||||
// options: {
|
||||
// tooltip: {
|
||||
// show: false
|
||||
// },
|
||||
// grid: {
|
||||
// left: 50
|
||||
// },
|
||||
// toolbox: {
|
||||
// show: false
|
||||
// },
|
||||
// legend: {
|
||||
// show: false
|
||||
// },
|
||||
// dataZoom: null,
|
||||
// xAxis: {
|
||||
// max: 100,
|
||||
// splitLine: {
|
||||
// show: false
|
||||
// },
|
||||
// axisLine: {
|
||||
// show: false
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false
|
||||
// },
|
||||
// axisTick: {
|
||||
// show: false
|
||||
// }
|
||||
// },
|
||||
|
||||
// yAxis: [
|
||||
// {
|
||||
// type: 'category',
|
||||
// inverse: false,
|
||||
// data: ['占比'],
|
||||
// axisLine: {
|
||||
// show: false
|
||||
// },
|
||||
// axisTick: {
|
||||
// show: false
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// series: [
|
||||
// {
|
||||
// //内
|
||||
// type: 'bar',
|
||||
// barWidth: 18,
|
||||
|
||||
// legendHoverLink: false,
|
||||
// silent: true,
|
||||
// itemStyle: {
|
||||
// color: '#06b6a9'
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// position: 'left',
|
||||
// formatter: '{b}',
|
||||
// textStyle: {
|
||||
// color: '#000',
|
||||
// fontSize: 14,
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: [50],
|
||||
// z: 1,
|
||||
// animationEasing: 'elasticOut'
|
||||
// },
|
||||
// {
|
||||
// //分隔
|
||||
// type: 'pictorialBar',
|
||||
// itemStyle: {
|
||||
// color: '#e4e7ed'
|
||||
// },
|
||||
// symbolRepeat: 'fixed',
|
||||
// symbolMargin: 4,
|
||||
// symbol: 'rect',
|
||||
// symbolClip: true,
|
||||
// symbolSize: [2, 21],
|
||||
// symbolPosition: 'start',
|
||||
// symbolOffset: [0, 0],
|
||||
// symbolBoundingData: 100,
|
||||
// data: [50],
|
||||
// z: 2,
|
||||
// animationEasing: 'elasticOut'
|
||||
// },
|
||||
// {
|
||||
// //外边框
|
||||
// type: 'pictorialBar',
|
||||
// symbol: 'rect',
|
||||
// symbolBoundingData: 100,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: 'none'
|
||||
// }
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// formatter: '{c}%',
|
||||
// position: 'right',
|
||||
// offset: [0, 0], //设置右边数据位置
|
||||
// textStyle: {
|
||||
// color: '#06b6a9',
|
||||
// fontSize: 16,
|
||||
// fontWeight: 600
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: [50],
|
||||
// z: 0,
|
||||
// animationEasing: 'elasticOut'
|
||||
// },
|
||||
// {
|
||||
// name: '外框',
|
||||
// type: 'bar',
|
||||
// barGap: '-100%', //设置外框粗细
|
||||
// data: [100],
|
||||
// barWidth: 26,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#e4e7ed', //填充色
|
||||
// barBorderColor: '#e4e7ed', //边框色
|
||||
// barBorderWidth: 1, //边框宽度
|
||||
// // barBorderRadius: 0, //圆角半径
|
||||
// label: {
|
||||
// //标签显示位置
|
||||
// show: false,
|
||||
// position: 'top' //insideTop 或者横向的 insideLeft
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// z: 0
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
options: {
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
dataZoom: null,
|
||||
title: {
|
||||
text: `{t|占比}
|
||||
{v|50%}`,
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
color: config.layout.elementUiPrimary[0],
|
||||
|
||||
rich: {
|
||||
v: {
|
||||
fontSize: 28,
|
||||
fontWeight: '550',
|
||||
color: config.layout.elementUiPrimary[0]
|
||||
},
|
||||
|
||||
t: {
|
||||
lineHeight: 28,
|
||||
fontSize: 16
|
||||
}
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#ff9800'],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '0%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '0%'
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
data: ['']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value'
|
||||
}
|
||||
}
|
||||
},
|
||||
color: ['#ccc'],
|
||||
series: [
|
||||
{
|
||||
name: 'Line 1',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: ['63%', '80%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '告警占比',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#ff0007' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#E22331' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: 80,
|
||||
name: '01',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: config.layout.elementUiPrimary[0],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '02',
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
symbolRepeat: 50,
|
||||
// symbolMargin: 300,
|
||||
symbol: 'rect',
|
||||
symbolClip: true,
|
||||
symbolSize: [2, 15],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [0, 0],
|
||||
data: [100],
|
||||
z: 1,
|
||||
zlevel: 0
|
||||
},
|
||||
{
|
||||
name: '机器故障率',
|
||||
type: 'bar',
|
||||
barGap: '-125%',
|
||||
data: [100],
|
||||
barWidth: 18,
|
||||
|
||||
tableStore.table.params.radio = '1'
|
||||
tableStore.table.params.alarm = 5
|
||||
tableStore.table.params.earlyWarning = 1
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'transparent',
|
||||
barBorderColor: 'rgb(148,217,249)',
|
||||
barBorderWidth: 1
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
tableStore.table.params.deptId = dictData.state.area[0].id
|
||||
tableStore.table.params.objType = ''
|
||||
tableStore.table.params.alarmDayLimit = 5
|
||||
tableStore.table.params.warnDayLimit = 1
|
||||
|
||||
const quantityClick = (e: any) => {
|
||||
alarmDetailsRef.value.open(e)
|
||||
}
|
||||
onMounted(() => {
|
||||
queryFirstNode({ type: 0 }).then(res => {
|
||||
objTypeList.value = res.data
|
||||
})
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
@@ -733,7 +464,7 @@ provide('tableStore', tableStore)
|
||||
background-color: #eef8f0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background-color: #fff6ed;
|
||||
background-color: #ffd7d7;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
background-color: #e5f8f6;
|
||||
@@ -808,4 +539,24 @@ provide('tableStore', tableStore)
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
.echartTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-segmented__item-selected, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
}
|
||||
:deep(.el-segmented__item, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<template>
|
||||
<el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<div style="display: flex">
|
||||
<el-tabs v-model="activeName" type="border-card" class="mr10" style="width: 450px">
|
||||
<el-tab-pane label="告警监测点详情" name="first">
|
||||
<div :style="height">
|
||||
<vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
|
||||
|
||||
<div :style="height1" class="mr10" style="width: 450px">
|
||||
<vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
<vxe-column field="time" title="日期">
|
||||
<template #default="{ row }">
|
||||
@@ -15,8 +14,7 @@
|
||||
<vxe-column field="fz" title="告警时间(分钟)" width="80px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-tabs v-model="activeName" type="border-card" style="width: 820px">
|
||||
<el-tab-pane :label="`变电站1 > 测试监测点1_告警指标详情`" name="first">
|
||||
<div :style="height">
|
||||
@@ -45,6 +43,7 @@ import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const dialogVisible = ref(false)
|
||||
const height1 = mainHeight(-110, 2)
|
||||
const height = mainHeight(10, 2)
|
||||
const title = ref('')
|
||||
const activeName = 'first'
|
||||
@@ -162,7 +161,7 @@ const TableData1 = ref([
|
||||
])
|
||||
|
||||
const open = (data: anyObj) => {
|
||||
title.value = data.name + '_告警详情展示'
|
||||
title.value = data.targetName + '_告警详情展示'
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<template>
|
||||
<el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<div style="display: flex">
|
||||
<el-tabs v-model="activeName" type="border-card" class="mr10" style="width: 450px">
|
||||
<el-tab-pane label="异常监测点详情" name="first">
|
||||
<div :style="height">
|
||||
<vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
|
||||
|
||||
<div :style="height1" class="mr10" style="width: 450px">
|
||||
<vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
<vxe-column field="time" title="日期">
|
||||
<template #default="{ row }">
|
||||
@@ -15,8 +14,7 @@
|
||||
<vxe-column field="fz" title="异常时间(分钟)" width="80px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-tabs v-model="activeName" type="border-card" style="width: 820px">
|
||||
<el-tab-pane :label="`变电站1 > 测试监测点1_异常指标详情`" name="first">
|
||||
<div :style="height">
|
||||
@@ -45,6 +43,7 @@ import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const dialogVisible = ref(false)
|
||||
const height1 = mainHeight(-110, 2)
|
||||
const height = mainHeight(10, 2)
|
||||
const title = ref('')
|
||||
const activeName = 'first'
|
||||
@@ -162,7 +161,7 @@ const TableData1 = ref([
|
||||
])
|
||||
|
||||
const open = (data: anyObj) => {
|
||||
title.value = data.name + '_异常详情展示'
|
||||
title.value = data.targetName + '_异常详情展示'
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="异常数据清洗"><abnormal /></el-tab-pane>
|
||||
<el-tab-pane label="稳态告警统计"><alarm /></el-tab-pane>
|
||||
<el-tabs type="border-card" v-model="activeName">
|
||||
<el-tab-pane label="异常数据统计" name="1"><abnormal v-if="activeName == '1'"/></el-tab-pane>
|
||||
<el-tab-pane label="稳态告警统计" name="2"><alarm v-if="activeName == '2'"/></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
@@ -13,5 +13,6 @@ defineOptions({
|
||||
import abnormal from './components/abnormal.vue'
|
||||
import alarm from './components/alarm.vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
const activeName = ref(`1`)
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
124
src/views/pqs/runManage/runEvaluate/components/region.vue
Normal file
124
src/views/pqs/runManage/runEvaluate/components/region.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="mt10 mr5 btnsBox">
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio-button label="区域" value="1" />
|
||||
<el-radio-button label="变电站" value="2" />
|
||||
<el-radio-button label="用户" value="3" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div :style="height">
|
||||
<MyEChart :options="options" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const radio2 = ref('1')
|
||||
const height = mainHeight(300, 1.5)
|
||||
const options = ref({})
|
||||
const info = () => {
|
||||
let dataSource = [
|
||||
{ value: '90', name: '张家口' },
|
||||
{ value: '80', name: '廊坊' },
|
||||
{ value: '70', name: '秦皇岛' },
|
||||
{ value: '60', name: '唐山' },
|
||||
{ value: '50', name: '承德' },
|
||||
|
||||
]
|
||||
options.value = {
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#FFF'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10'
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: dataSource.map(item => item.name),
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
return params.value >= 90
|
||||
? '#009900'
|
||||
: params.value >= 60
|
||||
? '#FFCC00'
|
||||
: params.value > 0
|
||||
? '#CC0000'
|
||||
: '#CCC'
|
||||
}
|
||||
},
|
||||
|
||||
data: dataSource.map(item => item.value)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
info()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.btnsBox {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
::v-deep .el-radio-button__inner {
|
||||
padding: 8px 18px;
|
||||
background: var(--el-color-primary);
|
||||
border: 1px solid #00fff4;
|
||||
border-radius: 0;
|
||||
font-weight: normal;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.73);
|
||||
opacity: 0.52;
|
||||
}
|
||||
::v-deep .el-radio-button:last-child .el-radio-button__inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
||||
border-radius: 0;
|
||||
border-left: 1px solid #00fff4;
|
||||
}
|
||||
::v-deep .is-active {
|
||||
border: 1px solid #00fff4;
|
||||
opacity: 1 !important;
|
||||
color: #ffffff;
|
||||
background: var(--el-color-primary);
|
||||
|
||||
.el-radio-button__inner{
|
||||
opacity: 1 !important;
|
||||
border-left: 1px solid #00fff4 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
src/views/pqs/runManage/runEvaluate/components/run.vue
Normal file
138
src/views/pqs/runManage/runEvaluate/components/run.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div :style="height">
|
||||
<MyEChart :options="options" />
|
||||
</div>
|
||||
<div class="boxBG">
|
||||
<div class="appraise">
|
||||
<div class="iconfont icon-wanzhengshuaifenxi2"></div>
|
||||
<div class="right">
|
||||
<span>完整率</span>
|
||||
<span>优</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appraise">
|
||||
<div class="iconfont icon-zaixianshuaibaobiao0"></div>
|
||||
<div class="right">
|
||||
<span>在线率</span>
|
||||
<span>优</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appraise">
|
||||
<div class="iconfont icon-dianyahegeshuai"></div>
|
||||
<div class="right">
|
||||
<span>合格率</span>
|
||||
<span>优</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
|
||||
const options = ref({})
|
||||
const height = mainHeight(650, 1.5)
|
||||
|
||||
const info = () => {
|
||||
options.value = {
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#FFF'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
data: ['运行', '调试', '停运']
|
||||
},
|
||||
|
||||
grid: {
|
||||
top: '30'
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: [45, 5, 1],
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
// 根据索引返回不同颜色
|
||||
var colorList = ['#00CC00', '#FF9900', '#CC0000']
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
info()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.boxBG {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.appraise {
|
||||
width: 30%;
|
||||
background-image: url('@/assets/imgs/bg02.png');
|
||||
background-size: 100% 100%;
|
||||
display: inline-block;
|
||||
height: 80px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
span:nth-child(2) {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-top: 5px;
|
||||
color: #00cc00;
|
||||
}
|
||||
}
|
||||
.iconfont {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: var(--el-color-primary);
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
border-radius: 10px;
|
||||
margin: 15px 10px 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div style="height:150px" class="box">
|
||||
<div class="boxDiv">
|
||||
<div style="color: #07ccca">300</div>
|
||||
<img src="@/assets/imgs/ditu.png" />
|
||||
<div class="mt10 divBot">总数</div>
|
||||
</div>
|
||||
<div class="boxDiv">
|
||||
<div style="color: #339900">250</div>
|
||||
<img src="@/assets/imgs/ditu.png" />
|
||||
<div class="mt10 divBot">在运</div>
|
||||
</div>
|
||||
<div class="boxDiv">
|
||||
<div style="color: #cc0000">50</div>
|
||||
<img src="@/assets/imgs/ditu.png" />
|
||||
<div class="mt10 divBot">停运</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { color } from '@/components/echarts/color'
|
||||
const height = mainHeight(330, 3)
|
||||
|
||||
const info = () => {}
|
||||
onMounted(() => {
|
||||
info()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.boxDiv {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
div:nth-child(1) {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
top: -10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.divBot {
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div :style="height" class="mt10">
|
||||
<vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
|
||||
<vxe-column type="seq" title="序号"></vxe-column>
|
||||
<vxe-column field="a" title="终端名称"></vxe-column>
|
||||
<vxe-column field="b" title="所属电站"></vxe-column>
|
||||
<vxe-column field="c" title="完整性"></vxe-column>
|
||||
<vxe-column field="d" title="在线率"></vxe-column>
|
||||
<vxe-column field="e" title="合格率"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
const tableData = ref([
|
||||
{
|
||||
a: '025875',
|
||||
b: '测试变电站1',
|
||||
c: '60',
|
||||
d: '95',
|
||||
e: '66'
|
||||
},
|
||||
{
|
||||
a: '025876',
|
||||
b: '测试变电站2',
|
||||
c: '60',
|
||||
d: '95',
|
||||
e: '66'
|
||||
}
|
||||
])
|
||||
const height = mainHeight(360, 3)
|
||||
|
||||
const info = () => {}
|
||||
onMounted(() => {
|
||||
info()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// :deep(.vxe-header--row) {
|
||||
// background: #071de2 !important;
|
||||
// color: #fff !important;
|
||||
// }
|
||||
|
||||
/*调整表格 单元格背景颜色*/
|
||||
:deep(.vxe-table .vxe-table--body-wrapper, .vxe-table .vxe-table--footer-wrapper) {
|
||||
background: #ffffff00 !important;
|
||||
}
|
||||
:deep(.vxe-table--render-wrapper) {
|
||||
background-color: #ffffff00 !important;
|
||||
}
|
||||
:deep(.vxe-table--body .vxe-body--row) {
|
||||
background-color:#ffffff2e !important;
|
||||
}
|
||||
|
||||
:deep(.vxe-table--render-default .vxe-table--body-wrapper table) {
|
||||
background-color: #00000000 !important;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(
|
||||
.vxe-table--render-default.border--full .vxe-body--column,
|
||||
.vxe-table--render-default.border--full .vxe-footer--column,
|
||||
.vxe-table--render-default.border--full .vxe-header--column,
|
||||
|
||||
) {
|
||||
background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4);
|
||||
}
|
||||
:deep(
|
||||
|
||||
.vxe-table--render-default.border--full .vxe-header--column
|
||||
) {
|
||||
background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4) !important;
|
||||
}
|
||||
:deep(.vxe-table--render-default .vxe-table--border-line){
|
||||
border: var(--vxe-table-border-width) solid #00fff4;
|
||||
}
|
||||
:deep(.vxe-header--row) {
|
||||
background: var(--el-color-primary);
|
||||
color:#fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :style="height" style="width: 100%" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
|
||||
|
||||
const height = mainHeight(330, 3)
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const info = () => {
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
let option = {
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
confine: true
|
||||
},
|
||||
|
||||
radar: {
|
||||
shape: 'circle',
|
||||
center: ['50%', '55%'],
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{
|
||||
text: '完整率',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: '合格率',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: '在线率',
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
],
|
||||
splitArea: {
|
||||
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
|
||||
show: true,
|
||||
areaStyle: {
|
||||
// 分隔区域的样式设置。
|
||||
color: ['rgba(27, 50, 66, 0.4)']
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
//指向外圈文本的分隔线样式
|
||||
lineStyle: {
|
||||
color: '#5aa3d0'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
|
||||
width: 2 // 分隔线线宽
|
||||
}
|
||||
}
|
||||
},
|
||||
series: {
|
||||
name: '',
|
||||
type: 'radar',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
borderColor: color[1],
|
||||
borderWidth: 2
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
width: 1,
|
||||
opacity: 0.3
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[1]
|
||||
}
|
||||
},
|
||||
value: [20, 33, 80]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
onMounted(() => {
|
||||
info()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
119
src/views/pqs/runManage/runEvaluate/components/week.vue
Normal file
119
src/views/pqs/runManage/runEvaluate/components/week.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div :style="height">
|
||||
<MyEChart :options="options" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { yMethod } from '@/utils/echartMethod'
|
||||
const options = ref({})
|
||||
const height = mainHeight(330, 3)
|
||||
|
||||
const info = () => {
|
||||
let [min, max] = yMethod([80, 99])
|
||||
options.value = {
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#FFF'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
data: ['03-24', '03-25', '03-26', '03-27', '03-28', '03-29', '03-30']
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '50',
|
||||
left: '20',
|
||||
right: '20'
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
min: min,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// color: [color[1]],
|
||||
// ['承德', '唐山', '秦皇岛', '廊坊', '张家口']
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '承德',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
|
||||
data: [80, 82, 90, 92, 97,100,100]
|
||||
},
|
||||
{
|
||||
name: '唐山',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
|
||||
data: [83, 84, 91, 93, 98,100,100]
|
||||
},
|
||||
{
|
||||
name: '秦皇岛',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
|
||||
data: [84, 82, 90, 90, 95,100,100]
|
||||
},
|
||||
{
|
||||
name: '廊坊',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
|
||||
data: [87, 82, 90, 94, 97,100,100]
|
||||
},
|
||||
{
|
||||
name: '张家口',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
|
||||
data: [90, 92, 95, 97, 100,100,100]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
info()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user