优化展示

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>