diff --git a/ALOps_sys_fe/alops-ui/src/api/index/index.js b/ALOps_sys_fe/alops-ui/src/api/index/index.js index 858aa7a0..92081fa3 100644 --- a/ALOps_sys_fe/alops-ui/src/api/index/index.js +++ b/ALOps_sys_fe/alops-ui/src/api/index/index.js @@ -13,7 +13,7 @@ export function getDict() { // 预警信息统 export function statistic(query) { return request({ - url: 'inMonitoring/statistic', + url: '/inMonitoring/alertMessage/statistic/list', method: 'get', params: query }) diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue index 3c06caf7..bbb81b8b 100644 --- a/ALOps_sys_fe/alops-ui/src/views/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/index.vue @@ -10,20 +10,23 @@

预警信息统计

-
-
预警总数
-
{{ totalAlerts }}
-
系统检测到的预警总数
+
+
年预警总数
+
{{ alertMessageData.yearCount }}
-
-
当前预警
-
{{ activeAlerts }}
-
需要处理的预警数量
+
+
月预警总数
+
{{ alertMessageData.monthCount }}
-
-
已处理
-
{{ resolvedAlerts }}
-
已解决的预警数量
+ +
+
{{ `等级${i.level}预警` }}
+
{{ i.count }}
+
+ +
+
{{ `${i.name}预警` }}
+
{{ i.count }}
@@ -44,8 +47,8 @@
{{ device.name }}
{{ device.description }}
- - {{ device.status === 'warning' ? '预警中' : '正常' }} + + {{ device.status === 'UNHANDLED' ? '预警中' : '正常' }} @@ -58,23 +61,25 @@

设备预警信息

-
@@ -155,73 +160,19 @@ export default { activeAlerts: 42, resolvedAlerts: 69, lastUpdate: new Date().toLocaleString(), + + isLoading: false, // 加载状态 + noMore: false, // 是否无更多数据 + page: 1, // 当前页码 devices: [ { id: 1, name: 'Forecasts', description: '预测分析系统', status: 'normal', icon: 'fas fa-chart-line' }, { id: 2, name: 'Gold', description: '核心处理单元', status: 'warning', icon: 'fas fa-server' }, { id: 3, name: 'Industries', description: '工业控制系统', status: 'normal', icon: 'fas fa-industry' } ], - alerts: [ - { - id: 1, - deviceName: 'PLC远程监控系统', - time: '2021-10-16 14:54:11', - location: '污水处理监控系统', - message: '2#电机运行状态等于1', - level: 1, - status: 'warning', - icon: 'fas fa-exclamation-circle' - }, - { - id: 2, - deviceName: 'PLC远程监控系统', - time: '2021-10-16 14:54:04', - location: '污水处理监控系统', - message: '2#电机运行状态报警恢复', - level: 0, - status: 'normal', - icon: 'fas fa-check-circle' - }, - { - id: 1, - deviceName: 'PLC远程监控系统', - time: '2021-10-16 14:54:11', - location: '污水处理监控系统', - message: '2#电机运行状态等于1', - level: 1, - status: 'warning', - icon: 'fas fa-exclamation-circle' - }, - { - id: 2, - deviceName: 'PLC远程监控系统', - time: '2021-10-16 14:54:04', - location: '污水处理监控系统', - message: '2#电机运行状态报警恢复', - level: 0, - status: 'normal', - icon: 'fas fa-check-circle' - }, - { - id: 1, - deviceName: 'PLC远程监控系统', - time: '2021-10-16 14:54:11', - location: '污水处理监控系统', - message: '2#电机运行状态等于1', - level: 1, - status: 'warning', - icon: 'fas fa-exclamation-circle' - }, - { - id: 2, - deviceName: 'PLC远程监控系统', - time: '2021-10-16 14:54:04', - location: '污水处理监控系统', - message: '2#电机运行状态报警恢复', - level: 0, - status: 'normal', - icon: 'fas fa-check-circle' - }, - ], + // 设备预警信息 + alerts: [], + // 统计预警信息次数 + alertMessageData: [], tableHeaders: ['设备名称', '设备位置', 'CPU使用率', '内存使用率', '温度', '健康度', '设备运行时长', '采集时间'], deviceStatus: [ { @@ -290,7 +241,7 @@ export default { getstatistic() { this.loading = true statistic().then(response => { - console.log("%c 🎹: getList -> response ", "font-size:16px;background-color:#624a64;color:white;", response) + this.alerts = response.rows this.loading = false } ) @@ -304,7 +255,7 @@ export default { }, getlistMonitor() { this.loading = true - listMonitor({id:11}).then(response => { + listMonitor().then(response => { this.loading = false } ) @@ -312,13 +263,33 @@ export default { getalertMessageTimes() { this.loading = true alertMessageTimes().then(response => { - this.loading = false + this.alertMessageData = response.data + this.loading = false } ) }, + async loadMore() { + console.log("%c 🎧: loadMore -> this.isLoading || this.noMore ", "font-size:16px;background-color:#64b738;color:white;", this.isLoading , this.noMore) + + if (this.isLoading || this.noMore) return; + this.isLoading = true; + try { + const res = await statistic({page:this.page}); // 模拟API请求 + if (res.rows.length < 10) { // 假设每页10条 + this.noMore = true; + } else { + this.alerts = [...this.alerts, ...res.rows]; + this.page++; + } + } catch (error) { + console.error('加载失败:', error); + } finally { + this.isLoading = false; + } + }, }, created() { - this.getstatistic() + // this.getstatistic() this.getbyEquType() this.getlistMonitor() this.getalertMessageTimes() @@ -414,9 +385,13 @@ export default { } .stats-container { - display: flex; + display: grid; justify-content: space-between; + grid-template-columns: repeat(3, 1fr); gap: 15px; + overflow-y: auto; + overflow-x: hidden; + height: 255px; } .stat-card { @@ -424,7 +399,7 @@ export default { background: linear-gradient(135deg, #3498db, #2c3e50); color: white; border-radius: 10px; - padding: 20px; + padding: 12px; text-align: center; box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3); } @@ -452,6 +427,9 @@ export default { .device-list { list-style: none; + overflow-y: auto; + overflow-x: hidden; + max-height: 255px; } .device-item {