|
|
@@ -57,8 +57,14 @@
|
|
|
<el-card style="height: 76vh;" class="my-fill mt8" shadow="hover">
|
|
|
<el-table ref="multipleTableRef" v-loading="Data.loading" stripe :data="Data.tableModel" row-key="id"
|
|
|
style="width: 100%">
|
|
|
+ <!-- 报警等级列 - 使用彩色球体显示 -->
|
|
|
+ <el-table-column label="报警等级" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span class="level-dot" :class="`level-${row.alarmLevel?.toLowerCase()}`"></span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop"
|
|
|
- :label="column.label" />
|
|
|
+ :label="column.label" align="center" />
|
|
|
<el-table-column label="是否推送" width="100" align="center" show-overflow-tooltip>
|
|
|
<template #default="{ row }">
|
|
|
<span>{{ row.isPush ? '是' : '否' }}</span>
|
|
|
@@ -142,7 +148,6 @@ const Data = reactive({
|
|
|
/**动态表头 */
|
|
|
dynamicColumns: [
|
|
|
{ prop: 'tag', label: '标签' },
|
|
|
- { prop: 'alarmLevel', label: '报警等级' },
|
|
|
{ prop: 'ruleName', label: '规则名称' },
|
|
|
{ prop: 'pushMethod', label: '推送方式' },
|
|
|
{ prop: 'keyWord', label: '关键字匹配' },
|
|
|
@@ -354,4 +359,27 @@ onMounted(async () => {
|
|
|
.my-el-link {
|
|
|
margin: 0 6px;
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+/* 报警等级球体样式 */
|
|
|
+.level-dot {
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 红色等级 */
|
|
|
+.level-red {
|
|
|
+ background-color: #ff4d4f;
|
|
|
+}
|
|
|
+
|
|
|
+/* 黄色等级 */
|
|
|
+.level-yellow {
|
|
|
+ background-color: #faad14;
|
|
|
+}
|
|
|
+
|
|
|
+/* 灰色等级 */
|
|
|
+.level-grey {
|
|
|
+ background-color: #8c8c8c;
|
|
|
+}
|
|
|
+</style>
|
