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-08 16:33:07 +08:00
parent 69aece65c1
commit 3d5c73b268
20 changed files with 2605 additions and 879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,3 @@
<!--业务用户管理界面-->
<template>
<div>
<TableHeader date-picker ref="TableHeaderRef">
@@ -22,7 +21,7 @@
<template v-slot:operation></template>
</TableHeader>
<div class="card-list pt10">
<div class="card-list pt10" v-loading="loading">
<div class="monitoringPoints">
<el-card style="height: 200px">
<template #header>
@@ -38,9 +37,9 @@
<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-igw-f-warning-data" style="color: #ff6600"></span>
<span class="divBox_title">异常测点数</span>
<span class="divBox_num" style="color: #fca955">
<span class="divBox_num" style="color: #ff6600">
{{ monitoringPoints.abnormalNum }}
</span>
</div>
@@ -67,7 +66,14 @@
</div>
</template>
<div class="mb5" style="height: 40px">
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block>
<template #default="scope">
<div >
<div class="segmentedIcon">0</div>
<div>{{ scope.item.label }}</div>
</div>
</template>
</el-segmented>
</div>
<div class="header">
<span style="width: 170px; text-align: left">指标名称</span>
@@ -77,7 +83,7 @@
<div :style="indicatorHeight" style="overflow-y: auto">
<div v-for="o in abnormal" class="abnormal mb10">
<span style="width: 170px; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
<div :style="{ backgroundColor: o.ids.length > 0 ? '#FF9100' : '' }"></div>
{{ o.targetName }}
</span>
<span style="flex: 1; text-align: center">
@@ -86,9 +92,10 @@
</span>
<span style="width: 90px; text-align: center">
<span
style="color: #ff9800; cursor: pointer; text-decoration: underline"
style="color: #388e3c"
:class="` ${o.ids.length > 0 ? 'text-red' : ''}`"
class="text"
@click="quantityClick(o)"
@click="quantityClick(o, 0)"
>
{{ o.ids.length }}
</span>
@@ -130,7 +137,58 @@
</el-form-item>
</el-form>
<!--表格-->
<Table ref="tableRef"></Table>
<div :style="{ height: tableStore.table.height }" v-loading="tableStore.table.loading">
<vxe-table height="auto" :data="tableStore.table.data" v-bind="defaultAttribute" ref="tableRef">
<vxe-column type="seq" title="序号" width="80px">
<template #default="{ rowIndex }">
<span>
{{
(tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize +
rowIndex +
1
}}
</span>
</template>
</vxe-column>
<vxe-column field="monitorName" title="监测点名称">
<template #default="{ row }">
<span class="table_name">
{{ row.monitorName }}
</span>
</template>
</vxe-column>
<vxe-column field="devName" title="所属终端名称">
<template #default="{ row }">
<span class="table_name">
{{ row.devName }}
</span>
</template>
</vxe-column>
<vxe-column field="stationName" title="所属电站">
<template #default="{ row }">
<span class="table_name">
{{ row.stationName }}
</span>
</template>
</vxe-column>
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
<vxe-column field="abnormalDay" title="异常天数">
<template #default="{ row }">
<span class="table_name" @click="quantityClick(row, 1)">
{{ row.abnormalDay }}
</span>
</template>
</vxe-column>
<vxe-column field="abnormalDay" title="严重度">
<template #default="{ row }">
<el-tag type="warning" v-if="row.severity == 0">预警</el-tag>
<el-tag type="danger" v-if="row.severity == 1">告警</el-tag>
</template>
</vxe-column>
</vxe-table>
</div>
</el-card>
</div>
<anomalyDetails ref="anomalyDetailsRef" />
@@ -142,6 +200,7 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
@@ -153,30 +212,31 @@ const anomalyDetailsRef = ref()
const dictData = useDictData()
//字典获取监督对象类型
const objTypeList: any = ref([])
const pageHeight = mainHeight(155)
const pageHeight = mainHeight(157)
const indicatorHeight = mainHeight(507)
const tableRef = ref()
const monitoringPoints = ref({
runNum: 0,
abnormalNum: 0
})
const tableRef = ref()
const percentage = ref({})
const loading = ref(false)
const TableHeaderRef = ref()
const abnormal: any = ref([])
const mapList: any = ref([])
const segmented = ref(1)
const time = ref(['', ''])
const segmentedList = [
{
label: '基础数据',
label: '基础指标',
value: 1
},
{
label: '稳态数据',
label: '稳态指标',
value: 2
},
{
label: '暂态数据',
label: '暂态指标',
value: 3
}
]
@@ -184,87 +244,13 @@ const tableStore = new TableStore({
url: '/device-boot/dataVerify/getMonitorVerifyData',
method: 'POST',
showPage: false,
filename: '异常数据',
filename: '异常数据统计',
publicHeight: 530,
column: [
{
title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{
title: '监测点名称',
field: 'monitorName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '所属终端名称',
field: 'devName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '所属电站',
field: 'stationName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '监测对象类型',
field: 'objType'
},
{
title: '监测对象名称',
field: 'objName'
},
{ title: '电压等级', field: 'voltageLevel' },
{
title: '异常天数',
field: 'abnormalDay',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '严重度',
field: 'severity',
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 => {}
// }
// ]
// }
],
column: [],
beforeSearchFun: () => {
loading.value = true
time.value = [tableStore.table.params.startTime, tableStore.table.params.endTime]
},
loadCallback: () => {
// console.log('🚀 ~ abnormal.value:', tableStore.table.data)
monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
@@ -275,13 +261,14 @@ const tableStore = new TableStore({
tableStore.table.data = tableStore.table.data.monitorAlarmInfo
echart()
loading.value = false
}
})
const options = ref({})
const echart = () => {
percentage.value = {
color: ['#ff9800'],
color: ['#FF9100'],
options: {
dataZoom: null,
toolbox: {
@@ -312,13 +299,42 @@ const echart = () => {
series: [
{
name: '异常占比',
name: '异常总数',
type: 'bar',
barWidth: 12,
data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
data: [100],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
name: '异常占比',
type: 'bar',
barWidth: 13,
data: [
(monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100 == 0
? ''
: ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
@@ -330,11 +346,11 @@ const echart = () => {
colorStops: [
{
offset: 0,
color: '#FD6E6A' // 0% 处的颜色
color: '#FF9100' // 0% 处的颜色
},
{
offset: 1,
color: '#ff9800' // 100% 处的颜色
color: '#FF9100' // 100% 处的颜色
}
],
global: false // 缺省为 false
@@ -353,7 +369,7 @@ const echart = () => {
// symbolMargin: 300,
symbol: 'rect',
symbolClip: true,
symbolSize: [2, 15],
symbolSize: [2, 20],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: [100],
@@ -361,9 +377,9 @@ const echart = () => {
zlevel: 0
},
{
name: '机器故障率',
name: '',
type: 'bar',
barGap: '-125%',
barGap: '-110%',
data: [100],
barWidth: 18,
@@ -381,7 +397,7 @@ const echart = () => {
}
options.value = {
title: {
text: `监测点异常情况(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
text: `监测点异常统计(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
},
xAxis: {
name: '时间',
@@ -405,7 +421,7 @@ const echart = () => {
name: '数量' // 给X轴加单位
},
grid: {},
color: ['#FF9100'],
options: {
series: [
{
@@ -426,8 +442,9 @@ tableStore.table.params.objType = ''
tableStore.table.params.alarmDayLimit = 5
tableStore.table.params.warnDayLimit = 1
const quantityClick = (e: any) => {
anomalyDetailsRef.value.open(e)
const quantityClick = (e: any, num: number) => {
if (num == 0 && e.ids?.length == 0) return
anomalyDetailsRef.value.open(e, time.value, num)
}
// 更新
const MonitorVerify = () => {
@@ -438,9 +455,25 @@ const MonitorVerify = () => {
tableStore.table.loading = false
})
}
const formatter = (row: any) => {
return row.cellValue || '/'
}
// 导出
const onExport = () => {
tableStore.table.allFlag = true
tableRef.value?.exportData({
filename: tableStore.table.filename, // 文件名字
sheetName: 'Sheet1',
type: 'xlsx', //导出文件类型 xlsx 和 csv
useStyle: true,
data: tableStore.table.data, // 数据源 // 过滤那个字段导出
columnFilterMethod: function (column: any) {
return !(
column.column.title === undefined ||
column.column.title === '序号' ||
column.column.title === '操作'
)
}
})
}
onMounted(() => {
TableHeaderRef.value.setDatePicker([
@@ -577,7 +610,7 @@ provide('tableStore', tableStore)
font-weight: 600;
div:nth-child(2) {
font-size: 16px;
color: #fca955;
color: #ff6600;
}
}
@@ -586,8 +619,26 @@ provide('tableStore', tableStore)
}
:deep(.el-segmented__item, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
position: relative
}
:deep(.el-segmented) {
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
color: #ff9100 !important;
cursor: pointer;
text-decoration: underline;
}
.segmentedIcon {
position: absolute;
top: 1px;
left: 100px;
height: 18px !important;
line-height: 19px;
padding: 0 4px;
font-size: 12px;
background: #ff9100;
color: #fff;
border-radius: 8px;
}
</style>