From c5b2b785113a490fff5c2d4b8bc756f7a505cd98 Mon Sep 17 00:00:00 2001
From: huang <1724659546@qq.com>
Date: Sun, 16 Nov 2025 23:11:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/alarm/AlarmList.vue | 55 +++++++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/views/alarm/AlarmList.vue b/src/views/alarm/AlarmList.vue
index e4581603..9cfbe976 100644
--- a/src/views/alarm/AlarmList.vue
+++ b/src/views/alarm/AlarmList.vue
@@ -36,10 +36,14 @@
       </div>
 
       <!-- 告警列表 -->
-      <el-table v-else :data="alarmData" style="width: 100%" :fit="true" table-layout="auto">
+      <el-table v-else :data="alarmData" style="width: 100%" :fit="true" table-layout="auto" :row-class-name="tableRowClassName">
         <el-table-column prop="alarm_summary" label="告警摘要" min-width="150" />
         <el-table-column prop="level" label="告警级别" min-width="100">
-          <template #default="scope">{{ formatSeverity(scope.row.level) }}</template>
+          <template #default="scope">
+            <el-tag :type="getSeverityTagType(scope.row.level)">
+              {{ formatSeverity(scope.row.level) }}
+            </el-tag>
+          </template>
         </el-table-column>
         <el-table-column prop="source_type" label="告警来源类型" min-width="120">
            <template #default="scope">{{ formatSourceType(scope.row.source_type) }}</template>
@@ -126,8 +130,8 @@ export default {
           response = await AlarmApi.getHistoricalAlarms(params);
         }
         
-        this.alarmData = response.list || [];
-        this.pagination.total = response.pagination?.total || 0;
+        this.alarmData = response.data.list || [];
+        this.pagination.total = response.data.pagination?.total || 0;
       } catch (err) {
         this.error = err.message || '未知错误';
         console.error('加载告警列表失败:', err);
@@ -180,7 +184,40 @@ export default {
     },
     formatSourceType(type) {
       return AlarmSourceType[type] || type;
-    }
+    },
+    /**
+     * 根据告警级别获取el-tag的类型
+     * @param {string} level - 告警级别
+     * @returns {string} el-tag的类型 (success, info, warning, danger)
+     */
+    getSeverityTagType(level) {
+      switch (level) {
+        case 'Debug':
+          return 'success';
+        case 'Info':
+          return 'info';
+        case 'Warn':
+          return 'warning';
+        case 'Error':
+        case 'DPanic':
+        case 'Panic':
+        case 'Fatal':
+          return 'danger';
+        default:
+          return 'info'; // 默认类型
+      }
+    },
+    /**
+     * 为表格行添加类名，用于标记已忽略的告警
+     * @param {object} row - 行数据
+     * @returns {string} CSS类名
+     */
+    tableRowClassName({ row }) {
+      if (row.is_ignored) {
+        return 'ignored-alarm-row';
+      }
+      return '';
+    },
   },
 };
 </script>
@@ -242,4 +279,12 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
+
+.ignored-alarm-row {
+  background-color: #f0f9eb; /* Element Plus success light color */
+}
+/* 鼠标悬停时保持背景色 */
+.ignored-alarm-row.hover-row > td {
+  background-color: #e1f3d8 !important;
+}
 </style>