From 613911374c1f746e85ea69e5d0344d2232a4a582 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 9 Oct 2020 11:26:16 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=20project=20aler?=
 =?UTF-8?q?tTable=E7=9A=84state=E7=9A=84=E9=A2=9C=E8=89=B2=20=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E6=8D=A2=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/alert/alertMessageTable.vue        |  4 ++--
 .../components/common/alert/alertRuleInfo.vue |  3 +++
 .../common/project/popData/alertTable.vue     | 23 +++++++++++--------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
index 09ebf11af..b352fd263 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -79,7 +79,7 @@
             <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>
           <template v-else-if="item.prop == 'labels'" class="labels">
-            <div v-for="(item,i) in labelsSort(scope.row.labels)">
+            <span v-for="(item,i) in labelsSort(scope.row.labels)">
               <span @mouseenter="labelHover(scope.row, item.label, true, $event)" @mouseleave="labelHover(scope.row, item.label, false)">
                 <nz-alert-tag
                    :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
@@ -96,7 +96,7 @@
                 :that="scope.row[item.label]"
                 :type="item.label"
               ></alertLabel>
-            </div>
+            </span>
 
             <!--<el-tooltip
               v-for="(item,i) in labelsSort(scope.row.labels)"
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 27cccf420..ced86be47 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -140,6 +140,9 @@
     width: 150px;
     color: #1a1a1a;
     padding: 0 3px 0 13px;
+    word-wrap: break-word;
+    white-space: normal;
+    overflow: hidden;
   }
 /*  .alert-rule-info::after {
     content: '';
diff --git a/nezha-fronted/src/components/common/project/popData/alertTable.vue b/nezha-fronted/src/components/common/project/popData/alertTable.vue
index 56252ca4c..4498303f6 100644
--- a/nezha-fronted/src/components/common/project/popData/alertTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/alertTable.vue
@@ -89,8 +89,8 @@
                 <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>
               <template v-else-if="item.prop == 'labels'" class="labels">
-                <div v-for="(item,i) in labelsSort(scope.row.labels)">
-              <span @mouseenter="labelHover(scope.row, item.label, true, $event)" @mouseleave="labelHover(scope.row, item.label, false)">
+                <span v-for="(item,i) in labelsSort(scope.row.labels)">
+              <span @mouseenter="labelHover(scope.row,scope.$index, item.label, true, $event)" @mouseleave="labelHover(scope.row,scope.$index, item.label, false)">
                 <nz-alert-tag
                   :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
                   :cursor-point="tagType(item.label) == 'info' ? false : true"
@@ -106,7 +106,7 @@
                     :that="scope.row[item.label]"
                     :type="item.label"
                   ></alertLabel>
-                </div>
+                </span>
 
                 <!--<el-tooltip
                   v-for="(item,i) in labelsSort(scope.row.labels)"
@@ -135,12 +135,10 @@
                 </el-tooltip>-->
 
               </template>
-              <div v-else-if="item.prop == 'state'">
-                <span class="">
-                  {{scope.row['state'] == 1 ? "Pending" : ""}}
-                  {{scope.row['state'] == 2 ? "Expired" : ""}}
-                </span>
-              </div>
+              <span v-else-if="item.prop == 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
+                {{scope.row['state'] == 1 ? "Pending" : ""}}
+                {{scope.row['state'] == 2 ? "Expired" : ""}}
+              </span>
               <div v-else-if="item.prop == 'current'" class="too-long-split pointer" @click="detail(scope.row)">
                 <span v-if="!scope.row.current">-</span>
                 <el-popover v-else placement="right" trigger="hover">
@@ -399,7 +397,7 @@
         //this.$set(this.tableData,index,item);// 调用父组件
       },
       // label 鼠标划入
-      labelHover(item, type, loading, e){
+      labelHover(item,index, type, loading, e){
         if(this.labelToolTipDis(type)){
           return;
         }
@@ -499,6 +497,11 @@
   /deep/.el-tooltip{
     display: inline-block;
   }
+  .red,.green{
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
   /* end--table*/
 </style>