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

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

Browse Source
This commit is contained in:
GGJ
2025-04-03 16:08:47 +08:00
parent 3c84c41d35
commit 69aece65c1
34 changed files with 3005 additions and 2337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

816
src/views/pqs/runManage/cleaning/components/abnormal.vue
View File

@@ -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>