From 05ce71c6431f3d4bb34539a66228a96ed35897b3 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 12 Oct 2020 11:02:30 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=BF=AE=E6=94=B9alert=E7=9A=84le?=
 =?UTF-8?q?vel=E4=B8=BAp1=20p2=20p3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/alert/alertMessageTable.vue        | 32 ++++++++++++++++---
 .../common/project/popData/alertTable.vue     | 32 ++++++++++++++++---
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
index b352fd263..d17628da9 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -73,10 +73,13 @@
             <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
             <span v-else>-</span>
           </template>
-          <span v-else-if="item.prop == 'severity'">
-            <span v-if="scope.row[item.prop] == 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
-            <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
-            <span v-if="scope.row[item.prop] == 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
+          <span v-else-if="item.prop == 'severity'" class="severity">
+            <span v-if="scope.row[item.prop] == 'high'" class="high">P1</span>
+            <!--<i class="nz-icon nz-icon-arrow-up"></i> {{returnSeverityLabel(scope.row[item.prop])}}-->
+            <span v-if="scope.row[item.prop] == 'medium'" class="medium">P2</span>
+            <!--{{returnSeverityLabel(scope.row[item.prop])}}-->
+            <span v-if="scope.row[item.prop] == 'low'" class="low">P3</span>
+            <!--<i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}-->
           </span>
           <template v-else-if="item.prop == 'labels'" class="labels">
             <span v-for="(item,i) in labelsSort(scope.row.labels)">
@@ -932,4 +935,25 @@
   .pointer{
     cursor: pointer;
   }
+  .severity .high{
+    background: #F2866E;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
+  .severity .medium{
+    background: #F89984;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
+  .severity .low{
+    background: #F7BA78;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
 </style>
diff --git a/nezha-fronted/src/components/common/project/popData/alertTable.vue b/nezha-fronted/src/components/common/project/popData/alertTable.vue
index 4498303f6..8d153311b 100644
--- a/nezha-fronted/src/components/common/project/popData/alertTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/alertTable.vue
@@ -83,10 +83,13 @@
                 <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
                 <span v-else>-</span>
               </template>
-              <span v-else-if="item.prop == 'severity'">
-                <span v-if="scope.row[item.prop] == 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
-                <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
-                <span v-if="scope.row[item.prop] == 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
+              <span v-else-if="item.prop == 'severity'" class="severity">
+                <span v-if="scope.row[item.prop] == 'high'" class="high">P1</span>
+                    <!--<i class="nz-icon nz-icon-arrow-up"></i> {{returnSeverityLabel(scope.row[item.prop])}}-->
+                <span v-if="scope.row[item.prop] == 'medium'" class="medium">P2</span>
+                    <!--{{returnSeverityLabel(scope.row[item.prop])}}-->
+                <span v-if="scope.row[item.prop] == 'low'" class="low">P3</span>
+                    <!--<i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}-->
               </span>
               <template v-else-if="item.prop == 'labels'" class="labels">
                 <span v-for="(item,i) in labelsSort(scope.row.labels)">
@@ -502,6 +505,27 @@
     padding: 2px 5px;
     border-radius: 4px;
   }
+  .severity .high{
+    background: #F2866E;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
+  .severity .medium{
+    background: #F89984;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
+  .severity .low{
+    background: #F7BA78;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
   /* end--table*/
 </style>