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

修好页面ui

Browse Source
This commit is contained in:
GGJ
2025-04-10 11:29:58 +08:00
parent 9a7a1ff46a
commit 02053ac58f
17 changed files with 369 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

609
src/views/pqs/runManage/alarmCleaning/components/alarm.vue Normal file
View File

@@ -0,0 +1,609 @@
<template>
<div>
<TableHeader date-picker ref="TableHeaderRef">
<template v-slot:select>
<el-form-item label="对象类型">
<el-select
v-model="tableStore.table.params.objType"
clearable
style="width: 100%"
placeholder="请选择对象类型"
>
<el-option
v-for="item in objTypeList"
: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" v-loading="loading">
<div class="monitoringPoints">
<el-card style="height: 200px">
<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">{{ monitoringPoints.runNum }}</span>
</div>
<div class="divBox" style="width: 200px">
<span class="iconfont icon-yichang" style="color: #FFBF00"></span>
<span class="divBox_title">告警测点数</span>
<span class="divBox_num" style="color: #FFBF00">
{{ monitoringPoints.abnormalNum }}
</span>
</div>
</div>
<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>
</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: 110px">告警测点数</span>
</div>
<div :style="indicatorHeight" style="overflow-y: auto">
<div v-for="o in abnormal" class="abnormal mb10">
<span style="flex: 1; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.ids.length > 0 ? '#FFBF00' : '' }"></div>
{{ o.targetName }}
</span>
<span style="width: 110px; text-align: center">
<span
style="color: #388e3c"
:class="` ${o.ids.length > 0 ? 'text-red' : ''}`"
class="text"
@click="quantityClick(o, 0)"
>
{{ o.ids.length }}
</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.alarmDayLimit"
:min="0"
:step="1"
step-strictly
/>
</el-form-item>
<el-form-item label="预警阀值(天)">
<el-input-number
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" @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>
<!--表格-->
<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>
<!-- <Table ref="tableRef"></Table> -->
</el-card>
</div>
<alarmDetails ref="alarmDetailsRef" />
</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 { 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'
import alarmDetails from './alarmDetails.vue'
import { getMonitorLimitDataDay } from '@/api/device-boot/dataVerify'
import { queryFirstNode } from '@/api/auth'
const alarmDetailsRef = ref()
const dictData = useDictData()
//字典获取监督对象类型
const objTypeList: any = ref([])
const pageHeight = mainHeight(97)
const indicatorHeight = mainHeight(402)
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 tableStore = new TableStore({
url: '/device-boot/dataVerify/getMonitorLimitData',
method: 'POST',
showPage: false,
filename: '稳态告警统计',
publicHeight: 470,
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 //总数
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()
loading.value = false
}
})
const options = ref({})
const echart = () => {
percentage.value = {
color: ['#FFBF00'],
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'
}
],
series: [
{
name: '告警总数',
type: 'bar',
barWidth: 12,
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: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#FFBF00' // 0% 处的颜色
},
{
offset: 1,
color: '#FFBF00' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#fff'
}
},
symbolRepeat: 50,
// symbolMargin: 300,
symbol: 'rect',
symbolClip: true,
symbolSize: [2, 20],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: [100],
z: 1,
zlevel: 0
},
{
name: '',
type: 'bar',
barGap: '-110%',
data: [100],
barWidth: 18,
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: {},
color: ['#FFBF00'],
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, num: number) => {
if (num == 0 && e.ids?.length == 0) return
alarmDetailsRef.value.open(e, time.value, num)
}
// 更新
const MonitorVerify = () => {
tableStore.table.loading = true
getMonitorLimitDataDay(tableStore.table.params).then(res => {
tableStore.table.data = res.data
tableStore.table.allData = res.data
tableStore.table.loading = false
})
}
const formatter = (row: any) => {
return row.cellValue || '/'
}
// 导出
const onExport = () => {
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([
{ label: '年份', value: 1 },
{ label: '季度', value: 2 },
{ label: '月份', value: 3 }
])
queryFirstNode({ type: 0 }).then(res => {
objTypeList.value = res.data
})
// 加载数据
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;
justify-content: space-between;
margin-bottom: 10px;
.divBox {
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;
}
.echartTitle {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
div:nth-child(2) {
font-size: 16px;
color: #FFBF00;
}
}
: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%);
}
.text-red {
color: #FFBF00 !important;
cursor: pointer;
text-decoration: underline;
}
</style>

145
src/views/pqs/runManage/alarmCleaning/components/alarmDetails.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<el-dialog draggable width="1200px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<div style="display: flex">
<div :style="height1" class="mr10 box" style="width: 450px">
<vxe-table
height="auto"
:data="TableData"
v-bind="defaultAttribute"
ref="tableRef"
:row-config="{ isCurrent: true, isHover: true }"
@current-change="currentChangeEvent"
>
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column field="date" title="日期"></vxe-column>
<vxe-column field="monitorName" title="监测点名称" width="120px"></vxe-column>
<vxe-column field="timeSum" title="告警时间(分钟)" width="80px"></vxe-column>
</vxe-table>
</div>
<div :style="height" style="width: 720px" v-loading="loading1">
<vxe-table
height="auto"
:data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
v-bind="defaultAttribute"
>
<vxe-column type="seq" title="序号" width="80px">
<template #default="{ rowIndex }">
<span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
</template>
</vxe-column>
<vxe-column field="time" title="时间" :formatter="formatter" width="150px"></vxe-column>
<vxe-column
field="targetName"
title="指标类型"
min-width="100px"
:formatter="formatter"
></vxe-column>
<vxe-column field="phaseType" title="相别" width="60px"></vxe-column>
<vxe-column field="type" title="数据类型" width="105px" :formatter="formatter"></vxe-column>
<vxe-column field="val" title="值" width="85px" :formatter="formatter"></vxe-column>
</vxe-table>
<div class="table-pagination">
<el-pagination
v-model:currentPage="pageNum"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100, 200]"
background
layout="sizes,total, ->, prev, pager, next, jumper"
:total="TableData1.length"
></el-pagination>
</div>
</div>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ElMessage } from 'element-plus'
import { monitorLimitTable, monitorLimitTableDetail } from '@/api/device-boot/dataVerify'
import { mainHeight } from '@/utils/layout'
const dictData = useDictData()
const StatisList = dictData.getBasicData('Steady_Statis')
const dialogVisible = ref(false)
const height1 = mainHeight(-110, 2)
const height = mainHeight(10, 2)
const tableRef = ref()
const title = ref('')
const loading1 = ref(false)
const TableData = ref([])
const TableData1 = ref([])
const pageNum = ref(1)
const pageSize = ref(20)
const numKey = ref(0)
const targetKey = ref('')
const clickRow = ref({})
const open = (data: anyObj, time: string[], num: number) => {
// title.value = (num == 0 ? data.targetName : data.monitorName) + '_告警详情展示'
title.value = '告警监测点详情'
numKey.value = num
targetKey.value = data.key
TableData.value = []
monitorLimitTable({
monitorIds: num == 0 ? data.ids : [data.monitorId],
targetKey: num == 0 ? data.key : '',
searchBeginTime: time[0],
searchEndTime: time[1]
}).then(res => {
TableData.value = res.data
tableRef.value.setCurrentRow(TableData.value[0])
currentChangeEvent()
})
dialogVisible.value = true
}
const currentChangeEvent = () => {
loading1.value = true
clickRow.value = tableRef.value.getCurrentRecord()
TableData1.value = []
monitorLimitTableDetail({
monitorIds: [clickRow.value.monitorId],
searchBeginTime: clickRow.value.date,
targetKey: numKey.value == 0 ? targetKey.value : ''
})
.then(res => {
TableData1.value = res.data
loading1.value = false
pageNum.value = 1
})
.catch(() => {
loading1.value = false
})
}
const formatter = (row: any) => {
if (row.column.field == 'time') {
return clickRow.value.date + ' ' + row.cellValue
} else if (row.column.field == 'targetName') {
return StatisList.filter(item => item.code == row.cellValue)[0].name
} else if (row.column.field == 'type') {
return row.cellValue === 'null' ? '/' : row.cellValue
} else {
return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
}
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.table-pagination {
height: 58px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
background-color: var(--ba-bg-color-overlay);
padding: 13px 15px;
border-left: 1px solid #e4e7e9;
border-right: 1px solid #e4e7e9;
border-bottom: 1px solid #e4e7e9;
}
:deep(.box) {
.row--current {
background-color: var(--el-color-primary-light-8) !important;
}
}
</style>