From 9279bdf13e2b36764d36efd672e31a2093ca87e2 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 15 Oct 2020 18:20:32 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9alerrt=20tooltip?=
 =?UTF-8?q?=20=E9=9D=A0=E8=BF=91=E5=BA=95=E9=83=A8=E6=97=B6=E4=B8=8D?=
 =?UTF-8?q?=E5=90=91=E4=B8=8A=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel.vue    | 231 +++++++++++-------
 .../common/alert/alertMessageTable.vue        |   9 +-
 .../components/common/alert/alertRuleInfo.vue |  56 ++++-
 3 files changed, 199 insertions(+), 97 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index b2b9821b5..0f33a1e34 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -1,98 +1,98 @@
 <template>
-  <div class="alert-label" :style="calcPosition(that.position)">
-    <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
-      <div class="alert-label-box">
-        <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">SN</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.sn:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Host</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">State</div>
-        <div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Ping</div>
-        <div class="alert-label-value">
-          <div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
-          <span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span>
+  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" ref="alertLabels">
+      <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
+        <div class="alert-label-box">
+          <div class="alert-label-title">ID</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">SN</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.sn:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Host</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">State</div>
+          <div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Ping</div>
+          <div class="alert-label-value">
+            <div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
+            <span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span>
+          </div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Asset Type</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Vendor</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Model</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.model:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">PingLastReply</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.pingLastReply:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Alert</div>
+          <div class="alert-label-value">
+            <span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
+          </div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">DC</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Endpoint</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Administrator</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
         </div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Asset Type</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Vendor</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Model</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.model:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">PingLastReply</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.pingLastReply:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Alert</div>
-        <div class="alert-label-value">
-          <span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
+
+      <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
+        <div class="alert-label-box">
+          <div class="alert-label-title">ID</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Name</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Project</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Description</div>
+          <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
         </div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">DC</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Endpoint</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Administrator</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
-      </div>
-    </div>
 
-    <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
-      <div class="alert-label-box">
-        <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
+      <div class="alert-label-info" v-if="type==='project'" v-loading="loading">
+        <div class="alert-label-box">
+          <div class="alert-label-title">ID</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Name</div>
+          <div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
+        </div>
+        <div class="alert-label-box">
+          <div class="alert-label-title">Description</div>
+          <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
+        </div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Name</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Project</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Description</div>
-        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
-      </div>
-    </div>
-
-    <div class="alert-label-info" v-if="type==='project'" v-loading="loading">
-      <div class="alert-label-box">
-        <div class="alert-label-title">ID</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Name</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Description</div>
-        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -153,12 +153,36 @@
     },
     computed: {
       calcPosition() {
+        let self=this;
         return function(position) {
-          return {
-            left: `${position.left + position.width + 20}px`,
-            top: `${position.top - 20}px`,
+          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
+          let elHeight=self.type==='asset'?370:(self.type==='project'?50:70);
+          console.log(elHeight);
+          if(position.top+elHeight>clientHeight){
+            return {
+              left: `${position.left + position.width + 20}px`,
+              top: `${position.top -elHeight- 20}px`,
+            }
+          }else{
+            return {
+              left: `${position.left + position.width + 20}px`,
+              top: `${position.top - 20}px`,
+            }
           }
         }
+      },
+      calcHeight(){
+        let self=this;
+        return function(position) {
+          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
+          let elHeight=self.type==='asset'?370:(self.type==='project'?50:70);
+           if(position.top+elHeight>clientHeight){
+             return 'alert-labelUp'
+           }else{
+             return 'alert-label'
+           }
+
+        }
       }
     },
     methods:{
@@ -174,6 +198,7 @@
       },
     },
     mounted(){
+      console.log(this);
       if(this.type==='asset'){
         this.$get('/asset/info?id='+this.id).then((res)=>{
           if(res.msg==='success'){
@@ -218,6 +243,14 @@
     border-radius: 4px;
     box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
   }
+  .alert-labelUp {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
   .alert-label::after {
     content: '';
     display: block;
@@ -234,6 +267,22 @@
     left: 0;
     transform: translate(-100%, -50%);
   }
+  .alert-labelUp::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
   .alert-label-info{
     border: 1px solid #ebeef5;
     border-bottom: none;
diff --git a/nezha-fronted/src/components/common/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
index 41b1d37b3..c6deeeb42 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -60,7 +60,10 @@
         <template slot-scope="scope" :column="item">
           <template v-if="item.prop == 'alertRule'">
             <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>
+              <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>
@@ -83,7 +86,9 @@
           </span>
           <template v-else-if="item.prop == 'labels'" class="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)">
+              <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"
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index c08149cca..4912c9185 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="alert-rule-tip" :style="calcPosition(that.position)" v-loading="loading">
+  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" v-loading="loading">
     <div class="alert-rule-info" >
       <div class="alert-rule-box">
         <div class="alert-rule-title">ID</div>
@@ -60,12 +60,36 @@
     },
     computed: {
       calcPosition() {
+        let self=this;
         return function(position) {
-          return {
-            left: `${position.left + position.width + 20}px`,
-            top: `${position.top - 10}px`,
+          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
+          let elHeight=50;
+          console.log(elHeight);
+          if(position.top+elHeight>clientHeight){
+            return {
+              left: `${position.left + position.width + 20}px`,
+              top: `${position.top -elHeight- 20}px`,
+            }
+          }else{
+            return {
+              left: `${position.left + position.width + 20}px`,
+              top: `${position.top - 20}px`,
+            }
           }
         }
+      },
+      calcHeight(){
+        let self=this;
+        return function(position) {
+          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
+          let elHeight=50;
+          if(position.top+elHeight>clientHeight){
+            return 'alert-rule-tip-Up'
+          }else{
+            return 'alert-rule-tip'
+          }
+
+        }
       }
     },
     methods:{
@@ -117,6 +141,30 @@
     left: 0;
     transform: translate(-100%, -50%);
   }
+  .alert-rule-tip-Up {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-rule-tip-Up::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
   .alert-rule-info{
     border: 1px solid #ebeef5;
     border-bottom: none;