From 2ccd8ff66cb2cc6f1e11f7b73feea08e27237596 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 31 Dec 2021 10:15:36 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BC=98=E5=8C=96=20alertmessage?=
 =?UTF-8?q?=20tooltip=20=E6=98=BE=E7=A4=BA=E4=BD=8D=E7=BD=AE=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel.vue    |  2 +-
 .../components/common/alert/alertRuleInfo.vue | 34 +++++--------------
 .../common/table/alert/alertMessageTable.vue  | 15 +++-----
 .../page/dashboard/explore/exploreItem.vue    |  1 -
 4 files changed, 15 insertions(+), 37 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index c38c96720..6864ef26d 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -299,7 +299,7 @@ export default {
         const leftOffSetView = this.detailList ? -80 : 10
         const leftOffSet = this.detailList ? -80 : 10
         const topOffSet = this.detailList ? 60 : 22
-        if (position.top + this.heightList > clientHeight) {
+        if (position.top > clientHeight / 2) {
           return {
             left: `${position.left + position.width + leftOffSet}px`,
             top: `${position.top - this.heightList + topOffSet}px`
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index ebb61d9dd..39a12ca69 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" v-loading="loading">
+  <div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-loading="loading" ref="alertLabels">
     <div class="alert-rule-info" >
       <div class="alert-rule-box">
         <div class="alert-rule-title">ID</div>
@@ -88,37 +88,21 @@ export default {
           }
         }
         const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
-        const elHeight = 50
-        if (position.top + elHeight > clientHeight) {
+        // const windowWidth = window.innerWidth
+        const boxHeight = this.$refs.alertLabels ? this.$refs.alertLabels.offsetHeight : 231
+        const windowHeight = window.innerHeight
+        if (position.top > windowHeight / 2) {
           return {
-            left: `${position.left + position.width + 200}px`,
-            top: `${position.top - elHeight - 80}px`
+            left: `${position.left + position.width + 10}px`,
+            top: `${position.top - boxHeight}px`
           }
         } else {
           return {
-            left: `${position.left + position.width + 200}px`,
-            top: `${position.top - 80}px`
+            left: `${position.left + position.width + 10}px`,
+            top: `${position.top}px`
           }
         }
       }
-    },
-    calcHeight () {
-      return function (position) {
-        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
-        const elHeight = 50
-        if (!position) {
-          if (elHeight > clientHeight) {
-            return 'alert-rule-abs-Up'
-          } else {
-            return 'alert-rule-abs'
-          }
-        }
-        if (position.top + elHeight > clientHeight) {
-          return 'alert-rule-tip-Up'
-        } else {
-          return 'alert-rule-tip'
-        }
-      }
     }
   },
   methods: {
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 452c524bd..95cee156b 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -34,16 +34,11 @@
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'alertRule'">
           <div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
-            <el-popover
-              placement="right-start"
-              popper-class="alert-message-tooltip"
-              style="position: relative"
-              @show="alertMessageHover(scope.row.alertRule, true)"
-              @hide="alertMessageHover(scope.row.alertRule, false)"
-              trigger="hover">
-              <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo>
-              <span slot="reference">{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
-            </el-popover>
+            <span
+              @mouseenter="alertMessageHover(scope.row.alertRule, true, $event)"
+              @mouseleave="alertMessageHover(scope.row.alertRule, false)"
+            >{{scope.row.alertRule?scope.row.alertRule.name : '--'}}</span>
+            <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule" @showText="$emit('showText',scope.row)"></alertRuleInfo>
           </div>
           <template v-else>-</template>
         </template>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 357cb64c7..443d41aa1 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -743,7 +743,6 @@ export default {
               res.forEach((response, index) => {
                 if (response.data && response.status === 'success') {
                   const data = response.data.result
-                  console.log(data)
                   if (data) {
                     data.forEach((result, i) => {
                       const metrics = Object.assign({}, result.metric)