feat： alert列 调整

nezha-fronted/src/assets/css/components/common/alert/alertDaysInfo.scss

@@ -1,7 +1,7 @@
 .alert-days-info{
-  display: block;
   height: 100%;
-  width: 100%;
+  width: auto;
+  display: inline-block;
   > div{
     display: inline-block;
     width: 8px;
@@ -12,35 +12,38 @@
     cursor: pointer;
     position: relative;
   }
-  .alert-days-info-tooltip{
+}
-    position: fixed;
+.alert-days-info-tooltip{
-    z-index: 1;
+  position: fixed;
-    padding: 5px 10px 5px 10px;
+  z-index: 1;
-    line-height: 20px;
+  padding: 5px 10px 5px 10px;
-    min-width: 120px;
+  line-height: 20px;
-    width: auto;
+  min-width: 120px;
-    .severity-time {
+  width: auto;
-      margin-bottom: 5px;
+  .severity-time {
-    }
+    margin-bottom: 5px;
-    .severity-info {
+  }
-      display: flex;
+  .severity-info {
-      align-items: center
+    display: flex;
-    }
+    align-items: center
-    .severity-block{
+  }
-      display: inline-block;
+  .severity-block{
-      width: 18px;
+    display: inline-block;
-      height: 10px;
+    width: 18px;
-      border: 1px solid $--border-color-base;
+    height: 10px;
-      margin-right: 5px;
+    border: 1px solid $--border-color-base;
-    }
+    margin-right: 5px;
-    .severity-name {
+  }
-      margin-right: 30px;
+  .severity-name {
-      color: $--color-text-primary;
+    margin-right: 30px;
-      font-size: 12px;
+    color: $--color-text-primary;
-    }
+    font-size: 12px;
-    .severity-value {
+  }
-      color: $--color-text-regular;
+  .severity-value {
-      font-size: 12px;
+    color: $--color-text-regular;
-    }
+    font-size: 12px;
   }
 }
+.vertical-align-top{
+  vertical-align: top;
+}

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -45,7 +45,14 @@
         <template v-else-if="item.prop === 'alertNum'">
 <!--          v-my-loading:ldsFacebook="scope.row.trendLoading"-->
           <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
-<!--            <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> <span>{{scope.row.alertNum ? scope.row.alertNum : 0}}</span>-->
+            <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
+            <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
+              <div class="tooltip-title">Alert message (active)</div>
+              <div class="severity-info" style='justify-content: space-between'>
+                <div class="severity-name">{{$t('overall.result.total')}}</div>
+                <div class="severity-value">{{scope.row.alertNum}}</div>
+              </div>
+            </div>
             <alertDaysInfo
                 v-show="!scope.row.trendLoading"
                 :alertDaysData="scope.row.alertDaysData"
@@ -340,6 +347,20 @@ export default {
       this.$set(item, 'loading', loading)
       // this.$set(this.tableData,index,item);// 调用父组件
     },
+    tooltipHover (item, flag, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        item.left = position.left
+        this.$set(item, 'left', position.left)
+        if (position.top > window.innerHeight / 2) {
+          this.$set(item, 'top', position.top - 100)
+        } else {
+          this.$set(item, 'top', position.top + 30)
+        }
+        this.$set(item, 'alertNumtooltipShow', flag)
+      }
+    },
     returnCabinet (start, end) { // 返回机柜u位信息
       if (!start || !end) {
         return ''

nezha-fronted/src/components/page/config/template/chartTemp.vue

@@ -228,6 +228,7 @@ export default {
         }
         this.rightBox.show = true
       } else {
+        this.object = {}
         this.rightBox.show = true
         this.rightBox.loading = true
         this.$get('visual/panel/chart/' + data.id).then(res => {