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

2022-02-24 17:43:34 +08:00
parent 0c6dab781d
commit 35825451a9
8 changed files with 171 additions and 64 deletions
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/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;
--- a/nezha-fronted/src/assets/css/components/common/alert/alertDaysInfo.scss
+++ b/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;
+    }
  }
 }
--- a/nezha-fronted/src/components/common/alert/alertDaysInfo.vue
+++ b/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: {
-    alertDaysData: {
-      immediate: true,
-      handler () {
-        this.getWeeksTime()
-      }
-    }
-  },
+  // watch: {
+  //   alertDaysData: {
+  //     immediate: true,
+  //     handler () {
+  //       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
    }
  }
 }
--- a/nezha-fronted/src/components/common/filterSearch/filterSearch.vue
+++ b/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()
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/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
+                  })
+                })
+              })
+            })
+          }
        }
      }
    }
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/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',
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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 = {
-                type: 'total',
-                dimension: 'priority',
-                step: 'd'
+              item.alertDaysData = [
+                {
+                  metric: { priority: 'P1' },
+                  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
--- a/nezha-fronted/src/store/user.js
+++ b/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 = []