NEZ-1592 feat: asset等列表页面增加 最近告警趋势 图表

nezha-fronted/src/assets/css/common.scss

@@ -364,7 +364,7 @@ td .nz-icon-gear:before{
     }
   }
 }
-.chart-bar,.chart-gauge,.chart-time-series,.chart-treemap,.chart-pie,.chart-canvas-tooltip,.line-chart-block-Zindex,.alert-label,.alert-labelUp,.nz-tooltip-bac{
+.chart-bar,.chart-gauge,.chart-time-series,.chart-treemap,.chart-pie,.chart-canvas-tooltip,.line-chart-block-Zindex,.alert-label,.alert-labelUp,.alert-days-info-tooltip,.nz-tooltip-bac{
   background-color: $--tooltip-background-color !important;
   border: 2px solid $--tooltip-border-color !important;
   border-color: $--tooltip-border-color !important;

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

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

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

@@ -1,8 +1,15 @@
 <template>
   <div class="alert-days-info">
 <!--    {{timestampStr(item.time, 'YYYY-MM-DD')}} {{item.P1+' '+item.P2+' '+item.P3}}-->
-    <div v-for="item in daysData" :key="item.time" :style="showPriority(item)">
+    <div v-for="item in alertDaysData" :key="item.time" :style="showPriority(item)" @mouseenter="tooltipHover(item,true, $event)" @mouseleave="tooltipHover(item,false, $event)">
-
+      <div v-if="item.tooltipShow" class="alert-days-info-tooltip" :style="{left: item.position.left + 'px',top:item.position.top + 'px'}">
+        <div class="tooltip-title severity-time">{{timestampStr(item.time, 'YYYY-MM-DD')}}</div>
+        <div v-for="(severity,index) in severityDataWeight" :key="index" class="severity-info">
+          <div class="severity-block" :style="{background: severity.color}"></div>
+          <div class="severity-name">{{severity.name}}</div>
+          <div class="severity-value">{{item[severity.name]}}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -20,51 +27,44 @@ export default {
       severityDataWeight: this.$store.getters.severityDataWeight
     }
   },
-  watch: {
+  // watch: {
-    alertDaysData: {
+  //   alertDaysData: {
-      immediate: true,
+  //     immediate: true,
-      handler () {
+  //     handler () {
-        this.getWeeksTime()
+  //       this.getWeeksTime()
-      }
+  //     }
-    }
+  //   }
-  },
+  // },
   methods: {
-    getWeeksTime () {
-      const localOffset = new Date().getTimezoneOffset() // 默认 显示时区偏移的结果 单位分钟
-      const now = new Date(new Date().toLocaleDateString()).getTime() - localOffset * 60 * 1000
-      const arr = []
-      for (let i = 0; i < 7; i++) {
-        const obj = {
-          time: now - i * 24 * 60 * 60 * 1000
-        }
-        this.severityDataWeight.forEach(item => {
-          obj[item.name] = 0
-        })
-        console.log(obj)
-        arr.unshift(obj)
-      }
-      this.alertDaysData.forEach(item => {
-        item.values.forEach(time => {
-          const findItem = arr.find(days => days.time == time[0])
-          // console.log(item)
-          if (findItem) {
-            findItem[item.metric.priority] = time[1]
-          }
-        })
-      })
-      this.daysData = arr
-    },
     showPriority (daysData) {
-      let style = ''
+      let style = {}
+      let sum = 0
       this.severityDataWeight.forEach(item => {
-        if (daysData[item.name] && !style) {
+        sum += Number(daysData[item.name])
+        console.log(daysData[item.name])
+        if (daysData[item.name] && !style.background) {
           style = {
             background: item.color
           }
         }
       })
-      console.log(daysData,style)
+      const height = sum > 0 ? (sum < 10 ? 20 : 24) : 16
+      console.log(sum, height)
+      style.height = (height + 'px')
       return style
+    },
+    tooltipHover (item, flag, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        item.position.left = position.left
+        if (position.top > window.innerHeight / 2) {
+          item.position.top = position.top - 100
+        } else {
+          item.position.top = position.top + 30
+        }
+      }
+      item.tooltipShow = flag
     }
   }
 }

nezha-fronted/src/components/common/filterSearch/filterSearch.vue

@@ -114,14 +114,12 @@ export default {
         }
       }
       // 不是首个condition时，先增加一个connection，再增加一个新condition
-      console.log(meta)
       if (meta) {
         this.metaList.push(meta)
         this.$emit('metaList')
       } else {
         let self = this
         const newCondition = Object.assign({}, self.meta)
-        console.log(newCondition)
         newCondition.nameIsEditing = true
         this.metaList.push(newCondition)
         this.$forceUpdate()

nezha-fronted/src/components/common/mixin/table.js

@@ -21,7 +21,8 @@ export default {
   data () {
     return {
       operationWidth: '165', // 操作列宽
-      orderBy: {}
+      orderBy: {},
+      severityDataWeight: this.$store.getters.severityDataWeight
     }
   },
   methods: {
@@ -81,6 +82,27 @@ export default {
         orderBy = '-' + str
       }
       this.$emit('orderBy', orderBy)
+    },
+    getWeeksTime () {
+      const localOffset = new Date().getTimezoneOffset() // 默认 显示时区偏移的结果 单位分钟
+      const now = new Date(new Date().toLocaleDateString()).getTime() - localOffset * 60 * 1000
+      const arr = []
+      for (let i = 0; i < 7; i++) {
+        const obj = {
+          time: now - i * 24 * 60 * 60 * 1000,
+          tooltipShow: false,
+          position: {
+            left: 0,
+            top: 0
+          }
+        }
+        this.severityDataWeight.forEach(item => {
+          obj[item.name] = 0
+          obj[item.name + 'Color'] = item.color
+        })
+        arr.unshift(obj)
+      }
+      return arr
     }
   },
   watch: {
@@ -110,6 +132,61 @@ export default {
               }
             }, 500)
           }
+          if (this.needAlertDaysData) {
+            const weekDays = this.getWeeksTime()
+            n.forEach(item => {
+              const params = {
+                type: 'total',
+                dimension: 'priority',
+                step: 'd'
+              }
+              params[this.trendKey] = item.id
+              setTimeout(() => {
+                this.$get('/stat/alertMessage/trend', params).then((res) => {
+                  // res = {
+                  //   msg: 'success',
+                  //   code: 200,
+                  //   data: {
+                  //     result: [
+                  //       {
+                  //         values: [
+                  //           {
+                  //             metric: { priority: 'P1' },
+                  //             values: []
+                  //           }, {
+                  //             metric: { priority: 'P2' },
+                  //             values: [
+                  //               [1645142400000, 0], [1645228800000, 3], [1645315200000, 20], [1645401600000, 0], [1645488000000, 0], [1645574400000, 3], [1645660800000, 20]
+                  //             ]
+                  //           }, {
+                  //             metric: { priority: 'P3' },
+                  //             values: [
+                  //               [1645142400000, 1], [1645228800000, 3], [1645315200000, 20], [1645401600000, 0], [1645488000000, 0], [1645574400000, 3], [1645660800000, 20]
+                  //             ]
+                  //           }]
+                  //       }],
+                  //     resultType: 'matrix'
+                  //   },
+                  //   time: '2022-02-24 08:41:35'
+                  // }
+                  const alertDaysData = res.data.result ? res.data.result[0].values : []
+                  const newWeekDays = JSON.parse(JSON.stringify(weekDays))
+                  alertDaysData.forEach(item => {
+                    item.values.forEach(time => {
+                      const findItem = newWeekDays.find(days => days.time == time[0])
+                      if (findItem) {
+                        findItem[item.metric.priority] = time[1]
+                      }
+                    })
+                  })
+                  setTimeout(() => {
+                    item.alertDaysData = newWeekDays
+                    item.trendLoading = false
+                  })
+                })
+              })
+            })
+          }
         }
       }
     }

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

@@ -43,10 +43,11 @@
           <span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> <span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-          <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)" v-myLoading:ldsFacebook="scope.row.trendLoading">
+<!--          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>-->
             <alertDaysInfo
-                v-if="scope.row.alertDaysData"
+                v-show="!scope.row.trendLoading"
                 :alertDaysData="scope.row.alertDaysData"
             />
           </span>
@@ -178,6 +179,8 @@ export default {
   },
   data () {
     return {
+      needAlertDaysData: true,
+      trendKey: 'assetId',
       tableTitle: [
         {
           label: 'ID',

nezha-fronted/src/components/page/asset/asset.vue

@@ -716,24 +716,22 @@ export default {
             response.data.list[i].status = response.data.list[i].status + ''
           }
           if (this.needAlertDaysData) {
-            console.log(123123123123)
-            const arr = []
             response.data.list.forEach(item => {
               item.trendLoading = true
-              const params = {
+              item.alertDaysData = [
-                type: 'total',
+                {
-                dimension: 'priority',
+                  metric: { priority: 'P1' },
-                step: 'd'
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P2' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P3' },
+                  values: [[0, 0]]
                 }
-              params[this.trendKey] = item.id
+              ]
-              arr.push(this.$get('/stat/alertMessage/trend', params))
-            })
-            Promise.all(arr).then(res => {
-              response.data.list.forEach((item, index) => {
-                item.trendLoading = false
-                item.alertDaysData = res[index].data.result ? res[index].data.result[0].values : []
-              })
-              this.tableData = response.data.list
             })
           }
           this.tableData = response.data.list

nezha-fronted/src/store/user.js

@@ -29,7 +29,6 @@ const user = {
     },
     setSeverityData (state, severityData) {
       state.severityData = [...severityData]
-      console.log(severityData)
       const arr = JSON.parse(JSON.stringify(severityData.reverse()))
       for (let i = 0; i < arr.length; i++) {
         for (let j = 0; j < arr.length; j++) {
@@ -41,7 +40,6 @@ const user = {
         }
       }
       state.severityDataWeight = arr
-      console.log(arr)
     },
     clean (state) {
       state.menuList = []