taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(告警管理): 添加查看全部告警信息功能及页面

Browse Source 
添加点击事件跳转到全部告警页面功能，并创建包含表格展示、搜索和分页的全新告警管理页面
This commit is contained in:
tcy
2025-09-20 14:58:53 +08:00
parent 938f8ad026
commit 0521eb62ee
2 changed files with 84 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/pvSystem/siteOverview/allAlarms.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="allAlarms">
<el-row>
<el-col :span="12">
<TitleComponent title="所有告警"></TitleComponent>
</el-col>
<el-col :span="12">
<el-row class="right-align-row">
<el-col :span="8">
<el-input prefix-icon="search" placeholder="搜索告警信息"></el-input>
</el-col>
<el-col :span="4" style="text-align: right;">
<el-button icon="download" type="primary">
导出数据
</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
<el-table :data="tableData" style="width: 100%;">
<el-table-column label="告警编号" prop="id"></el-table-column>
<el-table-column label="告警名称" prop="title"></el-table-column>
<el-table-column label="告警等级" prop="level"></el-table-column>
<el-table-column label="告警时间" prop="alarmTime"></el-table-column>
<el-table-column label="负责人" prop="responsible"></el-table-column>
<el-table-column label="告警描述" prop="description"></el-table-column>
<el-table-column label="状态">
<template #default="scope">
<el-tag
:type="scope.row.status === 1 ? 'success' : scope.row.status === 2 ? 'warning' : 'danger'">{{
scope.row.status === 1 ? '已解决' : scope.row.status === 2 ? '待解决' : '未解决' }}</el-tag>
</template>
</el-table-column>
</el-table>
<div style="background-color: #fff;padding: 20px 0;">
<el-pagination layout="prev, pager, next, jumper,sizes" :total="totalRecords"
v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
@current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
</div>
</div>
</template>
<style scoped>
.allAlarms {
background-color: #F2F8FC;
padding: 20px;
}
.right-align-row {
display: flex;
justify-content: flex-end;
}
</style>
<script setup>
import TitleComponent from '@/components/TitleComponent';
const pageSize = ref(20);
const totalRecords = ref(100);
const tableData = computed(() => {
return Array.from({ length: 15 }).map((_, index) => {
return {
id: index,
title: `逆变器温度过高`,
id: `INV-2023-003`,
level: `二级`,
alarmTime: '2025-09-18 18:00',
// 预计解决时间
resolveTime: '2025-09-19 18:00',
// 负责人
responsible: '李华（现场运维组）',
description: `AAAABBBCCCDE...`,
status: Math.floor(Math.random() * 3) + 1
}
})
})
</script>

11
src/views/pvSystem/siteOverview/components/gaojing.vue
View File

@ -1,7 +1,7 @@
<template>
<el-card shadow="never" style="border-radius: 10px;">
<div style="margin-bottom: 20px;display: flex;align-items: center;justify-content: right;">
<span style="margin-right: 5px;color: rgba(113, 128, 150, 1);font-size: 14px;">
<span style="margin-right: 5px;color: rgba(113, 128, 150, 1);font-size: 14px;" @click="handleClick">
查看全部告警信息
</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8"
@ -207,4 +207,11 @@
}
}
</style>
<script setup></script>
<script setup>
const router = useRouter();
const handleClick = () => {
console.log('查看全部告警信息');
router.push('/pvSystem/allAlarms');
}
</script>