修改异常数据页面、修改有功功率趋势分析页面接口

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

View File

@@ -1,37 +1,53 @@
<template>
<el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-dialog draggable width="1400px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<div style="display: flex">
<div :style="height1" class="mr10" style="width: 450px">
<vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column field="time" title="日期">
<template #default="{ row }">
<span class="time">{{ row.time }}</span>
</template>
</vxe-column>
<vxe-column field="name" title="监测点名称" width="120px"></vxe-column>
<vxe-column field="fz" title="异常时间(分钟)" width="80px"></vxe-column>
</vxe-table>
</div>
<el-tabs v-model="activeName" type="border-card" style="width: 820px">
<el-tab-pane :label="`变电站1 > 测试监测点1_异常指标详情`" name="first">
<div :style="height">
<vxe-table height="auto" :data="TableData1" v-bind="defaultAttribute">
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column field="time" title="时间" min-width="120px"></vxe-column>
<vxe-column field="indexType" title="指标类型" min-width="100px"></vxe-column>
<vxe-column field="phase" title="相别" width="60px"></vxe-column>
<vxe-column field="range" title="合理范围" min-width="60px"></vxe-column>
<vxe-column field="max" title="最大" width="60px"></vxe-column>
<vxe-column field="min" title="最小" width="60px"></vxe-column>
<vxe-column field="average" title="平均" width="60px"></vxe-column>
<vxe-column field="cp95" title="CP95" width="60px"></vxe-column>
</vxe-table>
</div>
</el-tab-pane>
</el-tabs>
<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: 920px" 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="时间" width="150px"></vxe-column>
<vxe-column field="targetName" title="指标类型" min-width="100px"></vxe-column>
<vxe-column field="phaseType" title="相别" width="60px"></vxe-column>
<vxe-column field="rangeDesc" title="合理范围" min-width="60px"></vxe-column>
<vxe-column field="max" title="最大" width="85px" :formatter="formatter"></vxe-column>
<vxe-column field="min" title="最小" width="85px" :formatter="formatter"></vxe-column>
<vxe-column field="avg" title="平均" width="85px" :formatter="formatter"></vxe-column>
<vxe-column field="cp95" title="CP95" 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>
@@ -40,139 +56,76 @@ import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { monitorAbnormalTable, monitorAbnormalTableDetail } from '@/api/device-boot/dataVerify'
import { mainHeight } from '@/utils/layout'
const dialogVisible = ref(false)
const height1 = mainHeight(-110, 2)
const height = mainHeight(10, 2)
const tableRef = ref()
const title = ref('')
const activeName = 'first'
const TableData = ref([
{
time: '2025-01-01',
name: '测试监测点1',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点2',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点3',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点4',
fz: 100
}
])
const TableData1 = ref([
{
num: 1,
time: '2025/01/01 11:10:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: '/',
min: '/',
average: 60,
cp95: '/'
},
{
num: 2,
time: '2025/01/01 11:20:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: '/',
min: '/',
average: 60,
cp95: '/'
},
{
num: 3,
time: '2025/01/01 11:30:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: 65,
min: 60,
average: 62,
cp95: 61
},
{
num: 4,
time: '2025/01/01 11:40:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: 65,
min: 60,
average: 62,
cp95: 61
},
{
num: 5,
time: '2025/01/01 11:50:00',
indexType: '相电压',
phase: 'A',
range: '42.5~57.5',
max: '/',
min: 290,
average: '/',
cp95: '/'
},
{
num: 6,
time: '2025/01/01 12:10:00',
indexType: '相电压',
phase: 'B',
range: '42.5~57.5',
max: 220,
min: 290,
average: 220,
cp95: 220
},
{
num: 7,
time: '2025/01/01 12:20:00',
indexType: '相电压',
phase: 'C',
range: '42.5~57.5',
max: '/',
min: 290,
average: '/',
cp95: '/'
},
{
num: 8,
time: '2025/01/01 12:30:00',
indexType: '相电压',
phase: 'A',
range: '42.5~57.5',
max: 220,
min: 290,
average: 220,
cp95: 220
}
])
const open = (data: anyObj) => {
title.value = data.targetName + '_异常详情展示'
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 open = (data: anyObj, time: string[], num: number) => {
// title.value = (num == 0 ? data.targetName : data.monitorName) + '_异常监测点详情'
title.value ='异常监测点详情'
TableData.value = []
numKey.value = num
targetKey.value = data.key
monitorAbnormalTable({
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
let data = tableRef.value.getCurrentRecord()
TableData1.value = []
monitorAbnormalTableDetail({
monitorIds: [data.monitorId],
searchBeginTime: data.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) => {
return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.time {
color: var(--el-color-primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
.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>