From dd5ffafe8214ea10c6259952948bfc372685cc04 Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Sat, 7 May 2022 19:01:42 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1849=20feat=20=EF=BC=9Aalert=20message?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=20=E5=A2=9E=E5=8A=A0=20ack?=
 =?UTF-8?q?nowledge=20=E7=8A=B6=E6=80=81=E5=8F=8A=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/table/alert/alertMessageTable.scss    | 16 ++++++++++++++--
 .../common/table/alert/alertMessageTable.vue     |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
index 1e28f7097..6c39c5352 100644
--- a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
@@ -107,6 +107,18 @@
   color: $--color-text-label;
 }
 
-.blues{
-  color: $--color-text-link;
+.blue-bg{
+  background-color: $--color-text-link;
+}
+.id-alertMessage{
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 5px;
+}
+.id-alert{
+  display: flex;
+  align-items: center;
 }
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 0cb165399..06db55aab 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -90,7 +90,7 @@
               {{$t(stateOptions.find(state=>state.value == scope.row['state']).label)}}
             </span>
           </span>
-          <span v-else-if="item.prop === 'id'"><i :style="{'font-size':'12px','margin-right':'5px'}" class="nz-icon nz-icon-circle" :class="scope.row.ack == 1 ? 'blues' : 'gray'"></i>{{scope.row[item.prop]}}</span>
+          <span v-else-if="item.prop === 'id'" class="id-alert"><span :style="{'font-size':'12px','margin-right':'5px'}" class="id-alertMessage" :class="{'gray-bg': scope.row.ack == 0, 'blue-bg': scope.row.ack == 1}"></span>{{scope.row[item.prop]}}</span>
           <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
           <template v-else>-</template>
         </template>