修改终端数
This commit is contained in:
@@ -90,7 +90,7 @@ const info = (id: any) => {
|
|||||||
item4.children.forEach((item5: any) => {
|
item4.children.forEach((item5: any) => {
|
||||||
item5.icon = 'el-icon-OfficeBuilding'
|
item5.icon = 'el-icon-OfficeBuilding'
|
||||||
item5.plevel = item5.level
|
item5.plevel = item5.level
|
||||||
item5.level = (item5.level == 7 ? 4 : item5.level) * 100
|
item5.level = (item5.level == 7 ? 4 : item5.level+1) * 100
|
||||||
item5.children.forEach((item6: any) => {
|
item5.children.forEach((item6: any) => {
|
||||||
item6.icon = 'el-icon-Film'
|
item6.icon = 'el-icon-Film'
|
||||||
item6.plevel = item6.level
|
item6.plevel = item6.level
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||||
|
{{nodeLevel}}
|
||||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||||
<pane :size="size">
|
<pane :size="size">
|
||||||
<Terminal ref="TerminalRef" @node-click="nodeClick" @init="nodeClick"></Terminal>
|
<Terminal ref="TerminalRef" @node-click="nodeClick" @init="nodeClick"></Terminal>
|
||||||
|
|||||||
@@ -1,11 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="default-main pd10">
|
||||||
|
<div class="actionButtons">
|
||||||
|
<el-button type="primary" icon="el-icon-Check">保存</el-button>
|
||||||
|
<back-component style="margin: 8px" />
|
||||||
|
</div>
|
||||||
|
<div :style="pageHeight" style="overflow-y: auto">
|
||||||
|
<el-collapse v-model="activeNames">
|
||||||
|
<el-collapse-item title="用户参数维护" name="1">
|
||||||
|
|
||||||
<div> 123</div>
|
|
||||||
|
|
||||||
|
</el-collapse-item>
|
||||||
|
<el-collapse-item title="系统参数维护" name="4"></el-collapse-item>
|
||||||
|
<el-collapse-item title="用户变压器参数维护" name="2"></el-collapse-item>
|
||||||
|
<el-collapse-item title="用户电容器组参数维护" name="3"></el-collapse-item>
|
||||||
|
|
||||||
|
<el-collapse-item title="风电参数" name="5"></el-collapse-item>
|
||||||
|
<el-collapse-item title="用户负荷" name="6"></el-collapse-item>
|
||||||
|
<el-collapse-item title="冲击性负荷" name="7"></el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang='ts'>
|
<script setup lang="ts">
|
||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
|
import BackComponent from '@/components/icon/back/index.vue'
|
||||||
|
const activeNames = ref(['1', '2', '3', '4', '5', '6', '7'])
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
const pageHeight = mainHeight(90)
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.actionButtons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
815
src/views/pqs/runManage/cleaning/components/abnormal.vue
Normal file
815
src/views/pqs/runManage/cleaning/components/abnormal.vue
Normal file
@@ -0,0 +1,815 @@
|
|||||||
|
<!--业务用户管理界面-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<TableHeader date-picker>
|
||||||
|
<template v-slot:select>
|
||||||
|
<el-form-item label="对象类型">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.supvObjType"
|
||||||
|
clearable
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择对象类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in supvObjTypeList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:operation></template>
|
||||||
|
</TableHeader>
|
||||||
|
<div class="card-list pt10">
|
||||||
|
<div class="monitoringPoints">
|
||||||
|
<el-card style="height: 390px">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>监测点统计</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</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">
|
||||||
|
<MyEchart :options="percentage"></MyEchart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="mt10">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>异常指标统计</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="header">
|
||||||
|
<span style="width: 180px; text-align: left">指标名称</span>
|
||||||
|
<span style="flex: 1">合理范围</span>
|
||||||
|
<span style="width: 100px">异常测点数</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>
|
||||||
|
<span style="flex: 1; text-align: center">
|
||||||
|
<!-- 合理范围： -->
|
||||||
|
<span style="color: #388e3c" class="text">{{ o.range }}</span>
|
||||||
|
{{ o.unit }}
|
||||||
|
</span>
|
||||||
|
<span style="width: 100px; text-align: center">
|
||||||
|
<span
|
||||||
|
style="color: #ff9800; cursor: pointer; text-decoration: underline"
|
||||||
|
class="text"
|
||||||
|
@click="quantityClick(o)"
|
||||||
|
>
|
||||||
|
{{ o.quantity }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<el-card class="detail ml10" :style="pageHeight">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>异常详情统计</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div style="height: 350px">
|
||||||
|
<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>
|
||||||
|
<el-form-item label="预警阀值(天)">
|
||||||
|
<el-input-number
|
||||||
|
v-model="tableStore.table.params.earlyWarning"
|
||||||
|
: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-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!--表格-->
|
||||||
|
<Table ref="tableRef"></Table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<anomalyDetails ref="anomalyDetailsRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
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()
|
||||||
|
const anomalyDetailsRef = ref()
|
||||||
|
const dictData = useDictData()
|
||||||
|
//字典获取监督对象类型
|
||||||
|
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
|
||||||
|
const pageHeight = mainHeight(155)
|
||||||
|
const indicatorHeight = mainHeight(652)
|
||||||
|
const tableRef = ref()
|
||||||
|
const abnormal = ref([
|
||||||
|
{
|
||||||
|
name: '频率',
|
||||||
|
range: '42.5~57.5',
|
||||||
|
unit: '',
|
||||||
|
quantity: 11
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '频率偏差',
|
||||||
|
range: '-7.5~7.5',
|
||||||
|
unit: '',
|
||||||
|
quantity: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/user-boot/user/getAllUserSimpleList',
|
||||||
|
method: 'GET',
|
||||||
|
isWebPaging: true,
|
||||||
|
showPage: false,
|
||||||
|
publicHeight: 480,
|
||||||
|
column: [
|
||||||
|
{ title: '序号', width: 80 },
|
||||||
|
{
|
||||||
|
title: '监测点名称',
|
||||||
|
field: 'name',
|
||||||
|
type: 'html',
|
||||||
|
formatter: (row, column) => {
|
||||||
|
return `<div class="table_name">${row.cellValue}</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '所属终端名称',
|
||||||
|
field: 'name1',
|
||||||
|
type: 'html',
|
||||||
|
formatter: (row, column) => {
|
||||||
|
return `<div class="table_name">${row.cellValue}</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '所属电站',
|
||||||
|
field: 'name2',
|
||||||
|
type: 'html',
|
||||||
|
formatter: (row, column) => {
|
||||||
|
return `<div class="table_name">${row.cellValue}</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ title: '监测对象类型', field: 'name3' },
|
||||||
|
{ title: '监测对象名称', field: 'name4' },
|
||||||
|
{ title: '电压等级', field: 'name5' },
|
||||||
|
{
|
||||||
|
title: '异常天数',
|
||||||
|
field: 'name6',
|
||||||
|
type: 'html',
|
||||||
|
formatter: (row, column) => {
|
||||||
|
return `<div class="table_name">${row.cellValue}</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '严重度',
|
||||||
|
field: 'name7',
|
||||||
|
render: 'tag',
|
||||||
|
custom: {
|
||||||
|
0: 'warning',
|
||||||
|
1: 'danger'
|
||||||
|
},
|
||||||
|
|
||||||
|
replaceValue: {
|
||||||
|
0: '预警',
|
||||||
|
1: '告警'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['#ccc'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Line 1',
|
||||||
|
type: 'pie',
|
||||||
|
clockWise: true,
|
||||||
|
radius: ['63%', '80%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 80,
|
||||||
|
name: '01',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: config.layout.elementUiPrimary[0],
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02',
|
||||||
|
value: 20
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.radio = '1'
|
||||||
|
tableStore.table.params.alarm = 5
|
||||||
|
tableStore.table.params.earlyWarning = 1
|
||||||
|
|
||||||
|
const quantityClick = (e: any) => {
|
||||||
|
anomalyDetailsRef.value.open(e)
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
// 加载数据
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.name = ''
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card-list {
|
||||||
|
display: flex;
|
||||||
|
.monitoringPoints {
|
||||||
|
width: 440px;
|
||||||
|
position: relative;
|
||||||
|
.statistics {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.divBox {
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
width: 200px;
|
||||||
|
height: 70px;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-size: 40px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.divBox_title {
|
||||||
|
font-weight: 550;
|
||||||
|
}
|
||||||
|
.divBox_num {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 550;
|
||||||
|
margin-left: auto;
|
||||||
|
font-family: AlimamaDongFangDaKai;
|
||||||
|
}
|
||||||
|
align-items: center;
|
||||||
|
// text-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
&:nth-child(1) {
|
||||||
|
background-color: #eef8f0;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
background-color: #fff6ed;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
background-color: #e5f8f6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detail {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.abnormal {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #f3f6f9;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 0px 5px 10px;
|
||||||
|
.iconDiv {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
div {
|
||||||
|
width: 4px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 5px;
|
||||||
|
background-color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: 'Source Code Pro', monospace;
|
||||||
|
|
||||||
|
// font-feature-settings: 'tnum';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
:deep(.el-card__header) {
|
||||||
|
padding: 10px;
|
||||||
|
span {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.iconFont {
|
||||||
|
font-size: 18px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.form {
|
||||||
|
position: relative;
|
||||||
|
.form_but {
|
||||||
|
position: absolute;
|
||||||
|
right: -22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
:deep(.table_name) {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
811
src/views/pqs/runManage/cleaning/components/alarm.vue
Normal file
811
src/views/pqs/runManage/cleaning/components/alarm.vue
Normal file
@@ -0,0 +1,811 @@
|
|||||||
|
<!--业务用户管理界面-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<TableHeader date-picker>
|
||||||
|
<template v-slot:select>
|
||||||
|
<el-form-item label="对象类型">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.supvObjType"
|
||||||
|
clearable
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择对象类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in supvObjTypeList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:operation></template>
|
||||||
|
</TableHeader>
|
||||||
|
<div class="card-list pt10">
|
||||||
|
<div class="monitoringPoints">
|
||||||
|
<el-card style="height: 390px">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>监测点统计</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</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">
|
||||||
|
<MyEchart :options="percentage"></MyEchart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="mt10">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>告警指标统计</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="header">
|
||||||
|
<span style="flex: 1; text-align: left">指标名称</span>
|
||||||
|
|
||||||
|
<span style="width: 100px">告警测点数</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 }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span style="width: 100px; text-align: center">
|
||||||
|
<span
|
||||||
|
style="color: #ff9800; cursor: pointer; text-decoration: underline"
|
||||||
|
class="text"
|
||||||
|
@click="quantityClick(o)"
|
||||||
|
>
|
||||||
|
{{ o.quantity }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<el-card class="detail ml10" :style="pageHeight">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>告警详情统计</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div style="height: 350px">
|
||||||
|
<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>
|
||||||
|
<el-form-item label="预警阀值(天)">
|
||||||
|
<el-input-number
|
||||||
|
v-model="tableStore.table.params.earlyWarning"
|
||||||
|
: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-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!--表格-->
|
||||||
|
<Table ref="tableRef"></Table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<anomalyDetails ref="anomalyDetailsRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
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()
|
||||||
|
const anomalyDetailsRef = ref()
|
||||||
|
const dictData = useDictData()
|
||||||
|
//字典获取监督对象类型
|
||||||
|
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
|
||||||
|
const pageHeight = mainHeight(155)
|
||||||
|
const indicatorHeight = mainHeight(652)
|
||||||
|
const tableRef = ref()
|
||||||
|
const abnormal = ref([
|
||||||
|
{
|
||||||
|
name: '频率',
|
||||||
|
range: '42.5~57.5',
|
||||||
|
unit: '',
|
||||||
|
quantity: 11
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '频率偏差',
|
||||||
|
range: '-7.5~7.5',
|
||||||
|
unit: '',
|
||||||
|
quantity: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/user-boot/user/getAllUserSimpleList',
|
||||||
|
method: 'GET',
|
||||||
|
isWebPaging: true,
|
||||||
|
showPage: false,
|
||||||
|
publicHeight: 480,
|
||||||
|
column: [
|
||||||
|
{ title: '序号', width: 80 },
|
||||||
|
{
|
||||||
|
title: '监测点名称',
|
||||||
|
field: 'name',
|
||||||
|
type: 'html',
|
||||||
|
formatter: (row, column) => {
|
||||||
|
return `<div class="table_name">${row.cellValue}</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '所属终端名称',
|
||||||
|
field: 'name1',
|
||||||
|
type: 'html',
|
||||||
|
formatter: (row, column) => {
|
||||||
|
return `<div class="table_name">${row.cellValue}</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '所属电站',
|
||||||
|
field: 'name2',
|
||||||
|
type: 'html',
|
||||||
|
formatter: (row, column) => {
|
||||||
|
return `<div class="table_name">${row.cellValue}</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ title: '监测对象类型', field: 'name3' },
|
||||||
|
{ title: '监测对象名称', field: 'name4' },
|
||||||
|
{ title: '电压等级', field: 'name5' },
|
||||||
|
{
|
||||||
|
title: '告警天数',
|
||||||
|
field: 'name6',
|
||||||
|
type: 'html',
|
||||||
|
formatter: (row, column) => {
|
||||||
|
return `<div class="table_name">${row.cellValue}</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '严重度',
|
||||||
|
field: 'name7',
|
||||||
|
render: 'tag',
|
||||||
|
custom: {
|
||||||
|
0: 'warning',
|
||||||
|
1: 'danger'
|
||||||
|
},
|
||||||
|
|
||||||
|
replaceValue: {
|
||||||
|
0: '预警',
|
||||||
|
1: '告警'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['#ccc'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Line 1',
|
||||||
|
type: 'pie',
|
||||||
|
clockWise: true,
|
||||||
|
radius: ['63%', '80%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 80,
|
||||||
|
name: '01',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: config.layout.elementUiPrimary[0],
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02',
|
||||||
|
value: 20
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.radio = '1'
|
||||||
|
tableStore.table.params.alarm = 5
|
||||||
|
tableStore.table.params.earlyWarning = 1
|
||||||
|
|
||||||
|
const quantityClick = (e: any) => {
|
||||||
|
anomalyDetailsRef.value.open(e)
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
// 加载数据
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.name = ''
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card-list {
|
||||||
|
display: flex;
|
||||||
|
.monitoringPoints {
|
||||||
|
width: 440px;
|
||||||
|
position: relative;
|
||||||
|
.statistics {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.divBox {
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
width: 200px;
|
||||||
|
height: 70px;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-size: 40px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.divBox_title {
|
||||||
|
font-weight: 550;
|
||||||
|
}
|
||||||
|
.divBox_num {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 550;
|
||||||
|
margin-left: auto;
|
||||||
|
font-family: AlimamaDongFangDaKai;
|
||||||
|
}
|
||||||
|
align-items: center;
|
||||||
|
// text-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
&:nth-child(1) {
|
||||||
|
background-color: #eef8f0;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
background-color: #fff6ed;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
background-color: #e5f8f6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detail {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.abnormal {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #f3f6f9;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 0px 5px 10px;
|
||||||
|
.iconDiv {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
div {
|
||||||
|
width: 4px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 5px;
|
||||||
|
background-color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: 'Source Code Pro', monospace;
|
||||||
|
|
||||||
|
// font-feature-settings: 'tnum';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
:deep(.el-card__header) {
|
||||||
|
padding: 10px;
|
||||||
|
span {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.iconFont {
|
||||||
|
font-size: 18px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.form {
|
||||||
|
position: relative;
|
||||||
|
.form_but {
|
||||||
|
position: absolute;
|
||||||
|
right: -22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
:deep(.table_name) {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,720 +1,18 @@
|
|||||||
<!--业务用户管理界面-->
|
|
||||||
<template>
|
<template>
|
||||||
<div class="default-main">
|
<div class="default-main">
|
||||||
<TableHeader date-picker>
|
<el-tabs type="border-card">
|
||||||
<template v-slot:select>
|
<el-tab-pane label="异常数据清洗"><abnormal/></el-tab-pane>
|
||||||
<el-form-item label="对象类型">
|
<el-tab-pane label="稳态告警统计"><alarm/></el-tab-pane>
|
||||||
<el-select
|
|
||||||
v-model="tableStore.table.params.supvObjType"
|
|
||||||
clearable
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请选择对象类型"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in supvObjTypeList"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-radio-group v-model="tableStore.table.params.radio">
|
|
||||||
<el-radio-button label="异常数据" value="1" />
|
|
||||||
<el-radio-button label="告警数据" value="2" />
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:operation></template>
|
</el-tabs>
|
||||||
</TableHeader>
|
|
||||||
<div class="card-list pd10">
|
|
||||||
<div class="monitoringPoints">
|
|
||||||
<el-card style="height: 140px">
|
|
||||||
<template #header>
|
|
||||||
<div class="card-header">
|
|
||||||
<span>监测点统计</span>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div class="divBox" style="width: 190px">
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<!-- <MyEchart :options="finish" style="height: 230px"></MyEchart> -->
|
|
||||||
</el-card>
|
|
||||||
<el-card class="mt10">
|
|
||||||
<template #header>
|
|
||||||
<div class="card-header">
|
|
||||||
<span>异常指标统计</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="header">
|
|
||||||
<span style="width: 180px; text-align: left">指标名称</span>
|
|
||||||
<span style="flex: 1">合理范围</span>
|
|
||||||
<span style="width: 100px">异常测点</span>
|
|
||||||
</div>
|
|
||||||
<div :style="indicatorHeight" style="overflow-y: auto">
|
|
||||||
<div v-for="o in abnormal" class="abnormal mb10">
|
|
||||||
<span style="width: 180px; height: 24px">
|
|
||||||
<span
|
|
||||||
class="iconFont iconfont icon-yichang"
|
|
||||||
:style="{ color: o.quantity > 0 ? '#ff9800' : '' }"
|
|
||||||
></span>
|
|
||||||
{{ o.name }}
|
|
||||||
</span>
|
|
||||||
<span style="flex: 1; text-align: center">
|
|
||||||
<!-- 合理范围： -->
|
|
||||||
<span style="color: #388e3c" class="text">{{ o.range }}</span>
|
|
||||||
{{ o.unit }}
|
|
||||||
</span>
|
|
||||||
<span style="width: 100px; text-align: center">
|
|
||||||
<span
|
|
||||||
style="color: #ff9800; cursor: pointer; text-decoration: underline"
|
|
||||||
class="text"
|
|
||||||
@click="quantityClick(o)"
|
|
||||||
>
|
|
||||||
{{ o.quantity }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
<el-card class="detail ml10" :style="pageHeight">
|
|
||||||
<template #header>
|
|
||||||
<div class="card-header">
|
|
||||||
<span>异常详情统计</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div style="height: 350px">
|
|
||||||
<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>
|
|
||||||
<el-form-item label="预警阀值(天)">
|
|
||||||
<el-input-number
|
|
||||||
v-model="tableStore.table.params.earlyWarning"
|
|
||||||
: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-form-item>
|
|
||||||
</el-form>
|
|
||||||
<!--表格-->
|
|
||||||
<Table ref="tableRef"></Table>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
<anomalyDetails ref="anomalyDetailsRef" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
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 './components/anomalyDetails.vue'
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'runManage/cleaning'
|
name: 'runManage/cleaning'
|
||||||
})
|
})
|
||||||
const anomalyDetailsRef = ref()
|
import abnormal from './components/abnormal.vue'
|
||||||
const dictData = useDictData()
|
import alarm from './components/alarm.vue'
|
||||||
//字典获取监督对象类型
|
import { ref, reactive } from 'vue'
|
||||||
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
|
|
||||||
const pageHeight = mainHeight(105)
|
|
||||||
const indicatorHeight = mainHeight(352)
|
|
||||||
const tableRef = ref()
|
|
||||||
const abnormal = ref([
|
|
||||||
{
|
|
||||||
name: '频率',
|
|
||||||
range: '42.5~57.5',
|
|
||||||
unit: '',
|
|
||||||
quantity: 11
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '频率偏差',
|
|
||||||
range: '-7.5~7.5',
|
|
||||||
unit: '',
|
|
||||||
quantity: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const tableStore = new TableStore({
|
|
||||||
url: '/user-boot/user/getAllUserSimpleList',
|
|
||||||
method: 'GET',
|
|
||||||
isWebPaging: true,
|
|
||||||
showPage: false,
|
|
||||||
publicHeight: 480,
|
|
||||||
column: [
|
|
||||||
{ title: '序号', width: 80 },
|
|
||||||
{
|
|
||||||
title: '监测点名称',
|
|
||||||
field: 'name',
|
|
||||||
type: 'html',
|
|
||||||
formatter: (row, column) => {
|
|
||||||
return `<div class="table_name">${row.cellValue}</div>`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '所属终端名称',
|
|
||||||
field: 'name1',
|
|
||||||
type: 'html',
|
|
||||||
formatter: (row, column) => {
|
|
||||||
return `<div class="table_name">${row.cellValue}</div>`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '所属电站',
|
|
||||||
field: 'name2',
|
|
||||||
type: 'html',
|
|
||||||
formatter: (row, column) => {
|
|
||||||
return `<div class="table_name">${row.cellValue}</div>`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ title: '监测对象类型', field: 'name3' },
|
|
||||||
{ title: '监测对象名称', field: 'name4' },
|
|
||||||
{ title: '电压等级', field: 'name5' },
|
|
||||||
{
|
|
||||||
title: '异常天数',
|
|
||||||
field: 'name6',
|
|
||||||
type: 'html',
|
|
||||||
formatter: (row, column) => {
|
|
||||||
return `<div class="table_name">${row.cellValue}</div>`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '严重度',
|
|
||||||
field: 'name7',
|
|
||||||
render: 'tag',
|
|
||||||
custom: {
|
|
||||||
0: 'warning',
|
|
||||||
1: 'danger'
|
|
||||||
},
|
|
||||||
|
|
||||||
replaceValue: {
|
|
||||||
0: '预警',
|
|
||||||
1: '告警'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
var getvalue = 90
|
|
||||||
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 finish = ref({
|
|
||||||
options: {
|
|
||||||
toolbox: null,
|
|
||||||
dataZoom: null,
|
|
||||||
angleAxis: {
|
|
||||||
show: false,
|
|
||||||
max: 155, //-45度到225度，二者偏移值是270度除360度
|
|
||||||
type: 'value',
|
|
||||||
startAngle: 205, //极坐标初始角度
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
radiusAxis: {
|
|
||||||
show: false,
|
|
||||||
type: 'category'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
|
|
||||||
legend: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
//圆环位置和大小
|
|
||||||
polar: {
|
|
||||||
center: ['70%', '60%'],
|
|
||||||
radius: '180%'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'bar',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
//上层圆环，显示数据
|
|
||||||
value: getvalue
|
|
||||||
}
|
|
||||||
],
|
|
||||||
barGap: '-100%', //柱间距离,上下两层圆环重合
|
|
||||||
coordinateSystem: 'polar',
|
|
||||||
roundCap: true, //顶端圆角
|
|
||||||
z: 3 //圆环层级，同zindex
|
|
||||||
},
|
|
||||||
{
|
|
||||||
//下层圆环，显示最大值
|
|
||||||
type: 'bar',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#ccc',
|
|
||||||
opacity: 1,
|
|
||||||
borderWidth: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
barGap: '-100%',
|
|
||||||
coordinateSystem: 'polar',
|
|
||||||
roundCap: true,
|
|
||||||
z: 1
|
|
||||||
},
|
|
||||||
//仪表盘
|
|
||||||
{
|
|
||||||
type: 'gauge',
|
|
||||||
startAngle: 225, //起始角度，同极坐标
|
|
||||||
endAngle: -45, //终止角度，同极坐标
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
splitLabel: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
pointer: {
|
|
||||||
// 分隔线
|
|
||||||
shadowColor: 'auto', //默认透明
|
|
||||||
shadowBlur: 5,
|
|
||||||
length: '50%',
|
|
||||||
width: '2',
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: '#1598FF',
|
|
||||||
borderColor: '#1598FF',
|
|
||||||
borderWidth: 6
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
formatter: function (params) {
|
|
||||||
return `{wcl|占比\n}{number|${getvalue + '%'}}`
|
|
||||||
},
|
|
||||||
rich: {
|
|
||||||
number: {
|
|
||||||
fontSize: 25,
|
|
||||||
textAlign: 'center',
|
|
||||||
color: '#000'
|
|
||||||
},
|
|
||||||
wcl: {
|
|
||||||
fontSize: 16,
|
|
||||||
textAlign: 'center',
|
|
||||||
color: '#000'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
color: '#000',
|
|
||||||
lineHeight: 30,
|
|
||||||
offsetCenter: ['0', '0']
|
|
||||||
},
|
|
||||||
center: ['70%', '60%'],
|
|
||||||
title: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: getvalue
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
tableStore.table.params.radio = '1'
|
|
||||||
tableStore.table.params.alarm = 5
|
|
||||||
tableStore.table.params.earlyWarning = 1
|
|
||||||
|
|
||||||
const quantityClick = (e: any) => {
|
|
||||||
anomalyDetailsRef.value.open(e)
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
// 加载数据
|
|
||||||
tableStore.index()
|
|
||||||
})
|
|
||||||
|
|
||||||
tableStore.table.params.name = ''
|
|
||||||
provide('tableStore', tableStore)
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped></style>
|
||||||
.card-list {
|
|
||||||
display: flex;
|
|
||||||
.monitoringPoints {
|
|
||||||
width: 560px;
|
|
||||||
position: relative;
|
|
||||||
.statistics {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.divBox {
|
|
||||||
margin: 0 10px 10px 0;
|
|
||||||
width: 160px;
|
|
||||||
height: 70px;
|
|
||||||
padding: 10px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
font-size: 40px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.divBox_title {
|
|
||||||
font-weight: 550;
|
|
||||||
}
|
|
||||||
.divBox_num {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 550;
|
|
||||||
margin-left: auto;
|
|
||||||
font-family: AlimamaDongFangDaKai;
|
|
||||||
}
|
|
||||||
align-items: center;
|
|
||||||
// text-align: center;
|
|
||||||
border-radius: 5px;
|
|
||||||
&:nth-child(1) {
|
|
||||||
background-color: #eef8f0;
|
|
||||||
}
|
|
||||||
&:nth-child(2) {
|
|
||||||
background-color: #fff6ed;
|
|
||||||
}
|
|
||||||
&:nth-child(3) {
|
|
||||||
background-color: #e5f8f6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.detail {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.abnormal {
|
|
||||||
width: 100%;
|
|
||||||
background-color: #f3f6f9;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
// justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px 0px 5px 10px;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: 'Source Code Pro', monospace;
|
|
||||||
|
|
||||||
// font-feature-settings: 'tnum';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
:deep(.el-card__header) {
|
|
||||||
padding: 10px;
|
|
||||||
span {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.el-card__body) {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
.iconFont {
|
|
||||||
font-size: 18px;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.form {
|
|
||||||
position: relative;
|
|
||||||
.form_but {
|
|
||||||
position: absolute;
|
|
||||||
right: -22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.card-header {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
:deep(.table_name) {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 4px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user