From 353c3c6ece1308ab3eb7362392219bff0a50844d Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 30 Sep 2020 16:44:52 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=20alert=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=9A=84=20=E4=BE=A7=E6=BB=91=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/popData/alertTable.vue     | 80 +++++++++++++------
 1 file changed, 54 insertions(+), 26 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/popData/alertTable.vue b/nezha-fronted/src/components/common/project/popData/alertTable.vue
index 792db39b4..7eed55091 100644
--- a/nezha-fronted/src/components/common/project/popData/alertTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/alertTable.vue
@@ -69,14 +69,10 @@
           >
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'alertRule'">
-            <span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
-                    <el-tooltip
-                      :placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
-                      effect="light">
-                      <alertRuleInfo slot="content" :id="scope.row.alertRule.id" :messageLoad="scope.row.loading"></alertRuleInfo>
-                      <span>{{scope.row[item.prop].alertName}}</span>
-                    </el-tooltip>
-                  </span>
+                <div v-if="scope.row.alertRule.alertName" >
+                  <span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">{{scope.row.alertRule.alertName}}</span>
+                  <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
+                </div>
                 <template v-else>-</template>
               </template>
               <template v-else-if="item.prop == 'summary'">
@@ -93,7 +89,26 @@
                 <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">
-                <el-tooltip
+                <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)">
+                <nz-alert-tag
+                  :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
+                  :cursor-point="tagType(item.label) == 'info' ? false : true"
+                  :key="item.label"
+                  v-if="item.label != 'alertname' && item.label != 'severity'"
+                >
+                 {{item.value}}
+                </nz-alert-tag>
+              </span>
+                  <alertLabel
+                    v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
+                    :id="scope.row[item.label].id"
+                    :that="scope.row[item.label]"
+                    :type="item.label"
+                  ></alertLabel>
+                </div>
+
+                <!--<el-tooltip
                   v-for="(item,i) in labelsSort(scope.row.labels)"
                   :placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
                   effect="light"
@@ -108,16 +123,17 @@
                     :labelLoading="scope.row[item.label].loading"
                   ></alertLabel>
                   <span @mouseover="labelHover(scope.row,scope.$index,item.label)" >
-                     <nz-alert-tag
-                       :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
-                       :cursor-point="tagType(item.label) == 'info' ? false : true"
-                       :key="item.label"
-                       v-if="item.label != 'alertname' && item.label != 'severity'"
-                     >
-                       {{item.value}}
-                     </nz-alert-tag>
-              </span>
-                </el-tooltip>
+                         <nz-alert-tag
+                           :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
+                           :cursor-point="tagType(item.label) == 'info' ? false : true"
+                           :key="item.label"
+                           v-if="item.label != 'alertname' && item.label != 'severity'"
+                         >
+                           {{item.value}}
+                         </nz-alert-tag>
+                  </span>
+                </el-tooltip>-->
+
               </template>
               <div v-else-if="item.prop == 'state'">
                 <span class="">
@@ -372,17 +388,28 @@
         this.deleteBox.ids = ids.join(",");
       },
       // alertNmae鼠标划入
-      alertMessagehover(item,index){
-        item.loading=true;
-        this.$set(this.tableData,index,item);// 调用父组件
+      alertMessagehover(item, loading, e) {
+        if (e) {
+          let dom = e.currentTarget;
+          let position = dom.getBoundingClientRect();
+          this.$set(item, "position", position);
+        }
+        this.$set(item, "loading", loading);
+        //item.loading = true;
+        //this.$set(this.tableData,index,item);// 调用父组件
       },
       // label 鼠标划入
-      labelHover(item,index,type){
+      labelHover(item, type, loading, e){
         if(this.labelToolTipDis(type)){
-          return
+          return;
         }
-        item[type].loading=true;
-        this.$set(this.tableData,index,item);// 调用父组件
+        if (e) {
+          let dom = e.currentTarget;
+          let position = dom.getBoundingClientRect();
+          this.$set(item[type], "position", position);
+        }
+        this.$set(item[type], "loading", loading);
+        //this.$set(this.tableData,index,item);// 调用父组件
       },
       // label tooltip是否显示
       labelToolTipDis(labelType){
@@ -438,6 +465,7 @@
         }
         this.getAlertList();
       },
+
       showExportDialog() {
         this.importBox.show = true;
       },