feat：dashboard overview页面 给asset tooltip消失时添加定时器 优化asset tooltip的切换的闪烁问题

nezha-fronted/src/components/common/alert/alertLabel2.vue

@@ -3,42 +3,42 @@
     <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 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 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 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 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>
+          <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 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 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 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 class="alert-label-value">{{(alertLabelData&&alertLabelData.pingLastReply)?alertLabelData.pingLastReply:'--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Alert</div>
@@ -48,80 +48,80 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">DC</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</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 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 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-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 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 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 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 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 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 class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):'--'}}</div>
       </div>
     </div>
 
     <div class="alert-label-info" v-if="type==='endpoint'" 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-value">{{alertLabelData?alertLabelData.id:'--'}}</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 class="alert-label-value">{{alertLabelData?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.name:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.module.name:'--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Labels</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.labels:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.labels:'--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Host</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.host:'--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Port</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.port:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.port:'--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Path</div>
-        <div class="alert-label-value">{{alertLabelData?alertLabelData.path:''}}</div>
+        <div class="alert-label-value">{{alertLabelData?alertLabelData.path:'--'}}</div>
       </div>
     </div>
   </div>
@@ -173,6 +173,13 @@
       //     }
       //   }
       // }
+      id:{
+        immediate: true,
+        deep:true,
+        handler(n){
+          this.init()
+        }
+      },
       that:{
         immediate: true,
         deep:true,
@@ -231,18 +238,8 @@
       }
     },
     methods:{
-      alertActiveStr(){
-        return this.$t('overall.active');
-      },
-      alertStateStr(num){
-        if( num == 1){
-          return this.$t('asset.inStock')
-        } else {
-          return this.$t('asset.notInStock')
-        }
-      },
-    },
-    mounted(){
+      init(){
+        this.loading=true;
         if(this.type==='asset'){
           this.$get('/asset/info?id='+this.id).then((res)=>{
             if(res.msg==='success'){
@@ -283,6 +280,20 @@
             }
           })
         }
+      },
+      alertActiveStr(){
+        return this.$t('overall.active');
+      },
+      alertStateStr(num){
+        if( num == 1){
+          return this.$t('asset.inStock')
+        } else {
+          return this.$t('asset.notInStock')
+        }
+      },
+    },
+    mounted(){
+
     },
     beforeDestroy(){
 

nezha-fronted/src/components/common/overView/messageAsset.vue

@@ -104,6 +104,7 @@
         },
         boxWidth:'',
         LRTriangle:true,//true 左三角 false 右
+        timer:null,
       }
     },
     methods:{
@@ -249,9 +250,11 @@
         });
       },
       changeAsset(data,e){
+        if(this.timer){
+          clearTimeout(this.timer);
+        }
         this.assetData.id=data;
         let boxWidth=document.getElementsByClassName('content-right')[0].offsetWidth;
-        console.log(boxWidth);
         this.boxWidth=boxWidth;
         // this.assetData.rate=window.screen.height/1297;
         this.$nextTick(()=>{
@@ -285,7 +288,18 @@
         }
       },
       closeAsset(){
-        this.assetData.show=false
+        if(!this.timer){
+          this.timer=setTimeout(()=>{
+            this.assetData.show=false;
+            this.timer=null;
+          },100)
+        }else{
+          clearTimeout(this.timer);
+          this.timer=setTimeout(()=>{
+            this.assetData.show=false;
+            this.timer=null;
+          },100)
+        }
       },
       endLoading(){
         this.loading=false;