From 47c4d195f58639f2aaab63c412388cd6b518b0a1 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 5 Nov 2021 13:43:23 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9B=20=E9=A6=96=E9=A1=B5=20=E5=85=AD?=
 =?UTF-8?q?=E6=96=B9=E5=9B=BE=20tootip=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel2.vue   | 317 +++++++++++++-----
 .../common/overView/messageAsset.vue          |   5 +-
 2 files changed, 243 insertions(+), 79 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertLabel2.vue b/nezha-fronted/src/components/common/alert/alertLabel2.vue
index 25da47129..f30128b4b 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel2.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel2.vue
@@ -1,24 +1,31 @@
 <template>
-  <div ref="alertLabels" :class="['alert-labelUp',LRTriangle?'left-triangle':'right-triangle']" :style="{top:that.position.top + 'px',left:that.position.left + 'px','--mt': that.position.mt+'px',}">
+  <div
+    ref="alertLabels"
+    :class="['alert-labelUp',LRTriangle?'left-triangle':'right-triangle']"
+    :style="{top:that.position.top + 'px',
+    left:that.position.left ? (that.position.left  + 'px') : 'unset',
+    right:that.position.right ? (that.position.right  + 'px') : 'unset',
+    '--mt': that.position.mt+'px'
+  }">
     <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 ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Name</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">SN</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">ManageIp</div>
+        <div class="alert-label-title">{{$t('overall.manageIp')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">State</div>
+        <div class="alert-label-title">{{$t('overall.type')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.state')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
@@ -29,30 +36,33 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Asset Type</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
+        <div class="alert-label-title">{{$t('overall.dc')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name:'--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Brand</div>
+        <div class="alert-label-title">{{$t('overall.cabinet')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.brand')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Model</div>
+        <div class="alert-label-title">{{$t('overall.model')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">PingLastReply</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? utcTimeToTimezoneStr(alertLabelData.pingInfo.lastUpdate) : '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Alert</div>
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
         <div class="alert-label-value">
-          <span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">DC</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div>
+        <div class="alert-label-title">Endpoint</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
       </div>
     </div>
 
@@ -62,16 +72,36 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Name</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Project</div>
+        <div class="alert-label-title">{{$t('overall.project')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?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 class="alert-label-title">Endpoint</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.remark')}}</div>
+        <div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
       </div>
     </div>
 
@@ -81,12 +111,38 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Name</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
         <div class="alert-label-value">{{alertLabelData && 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 class="alert-label-title">{{$t('overall.module')}}</div>
+        <div class="alert-label-value">
+          <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Endpoint</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>
+          <span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.remark')}}</div>
+        <div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
       </div>
     </div>
 
@@ -96,28 +152,104 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Project</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.project')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Module</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
+        <div class="alert-label-title">{{$t('overall.module')}}</div>
+        <div class="alert-label-value">
+          <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</span>
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Labels</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.labels ? alertLabelData.labels : '--'}}</div>
+        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.asset.name ? alertLabelData.asset.name : '--'}}</span>
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Host</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.host ? alertLabelData.host : '--'}}</div>
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Port</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.port ? alertLabelData.port : '--'}}</div>
+        <div class="alert-label-title">{{$t('overall.state')}}</div>
+        <div class="alert-label-value">
+           <span style="width: auto">
+            <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+            <span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[0].state === 1">
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[0].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+          <span style="width: auto">
+            <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
+            <span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[1].state === 1">
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[1].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="alert-label-info" v-if="type==='dc'" v-loading="loading">
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Path</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.path ? alertLabelData.path : '--'}}</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.location')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.cabinet')}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinetNum> 0 ? 'color23BF9A' : 'colorEF7458'"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.cabinetNum ? alertLabelData.cabinetNum : 0}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.state')}}</div>
+        <div class="alert-label-value" style="margin-left: 3px">
+          <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'OFF'}" class="active-icon"></div>
+          <span v-if="alertLabelData && alertLabelData.state === 'ON'">{{ $t('overall.enabled') }}</span>
+          <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -321,67 +453,27 @@ export default {
     overflow: hidden;
     font-size: 0;
     line-height: 0;
-    border: 5px;
-    border-style: dashed solid dashed dashed;
-    border-color: transparent #fff transparent transparent;
     position: absolute;
     top: 20px;
     left: 0;
     transform: translate(-100%, -50%);
   }
-  .left-triangle::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;
-    top: var(--mt);
-    left: 0;
-    transform: translate(-100%, -50%);
-  }
-  .right-triangle::after {
-    content: '';
-    display: block;
-    width:0;
-    height:0;
-    overflow: hidden;
-    font-size: 0;
-    line-height: 0;
-    border: 5px;
-    border-style: dashed dashed dashed solid;
-    border-color: transparent transparent transparent #fff;
-    position: absolute;
-    top: var(--mt);
-    right: 0;
-    transform: translate(100%, -50%);
-  }
   .alert-label-info{
-    border: 1px solid #ebeef5;
-    border-bottom: none;
     font-size: 13px;
     line-height: 26px;
   }
   .alert-label-box{
     display: flex;
     justify-content:space-between;
-    border-bottom: 1px solid #ebeef5;
   }
   .alert-label-title{
     text-align: left;
     width: 110px;
-    border-right: 1px solid #ebeef5;
     color: #666;
     padding: 0 3px 0 13px;
   }
   .alert-label-value{
     text-align: left;
-    width: 150px;
     color: #1a1a1a;
     padding: 0 3px 0 13px;
     word-break: break-all;
@@ -401,4 +493,73 @@ export default {
   /deep/.active-icon{
     margin-top: 0;
   }
+  .alert-label {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px 23px 10px 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label__border {
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+    border-radius: 3px 3px 3px 3px 0 0;
+  }
+  .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-info{
+    /*border: 1px solid #ebeef5;*/
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }
+  .alert-label-box{
+    display: flex;
+    flex-direction: row;
+    /*border-bottom: 1px solid #ebeef5;*/
+  }
+  .alert-label-title{
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    line-height: 26px;
+    min-width: 110px;
+    padding: 0 3px 0 13px;
+  }
+  .alert-label-value{
+    word-wrap: break-word;
+    white-space: normal;
+    overflow: hidden;
+    max-width: 200px;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    line-height: 26px;
+  }
+  .danger{
+    background-color: #d64f40;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .success{
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  /deep/.active-icon{
+    margin-top: 0;
+  }
+  .colorFA901C{
+    color: #fa901c;
+  }
 </style>
diff --git a/nezha-fronted/src/components/common/overView/messageAsset.vue b/nezha-fronted/src/components/common/overView/messageAsset.vue
index ece748218..fa21e6c5b 100644
--- a/nezha-fronted/src/components/common/overView/messageAsset.vue
+++ b/nezha-fronted/src/components/common/overView/messageAsset.vue
@@ -267,6 +267,7 @@ export default {
       this.calcPosition(e)
     },
     calcPosition (e) {
+      console.log(e)
       const boxWidth = this.boxWidth
       const distance = this.fromType === 'asset' ? 300 : 50
       const minus = (e.pageY - distance) + this.$refs.alertLabel.$el.offsetHeight - window.innerHeight
@@ -280,9 +281,11 @@ export default {
       }
       if (boxWidth / 2 > e.pageX - 200) {
         this.assetData.position.left = e.pageX + 35
+        this.assetData.position.right = 0
         this.LRTriangle = true
       } else {
-        this.assetData.position.left = e.pageX - 35 - this.$refs.alertLabel.$el.offsetWidth
+        this.assetData.position.right = window.innerWidth - (e.pageX - 35)
+        this.assetData.position.left = 0
         this.LRTriangle = false
       }
     },