NEZ-1602 fix：鼠标悬浮详情页面参照 列表页面 alert 列实现

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

@@ -46,9 +46,19 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
         </div>
       </div>
       <div class="alert-label-box">
@@ -87,9 +97,19 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
         </div>
       </div>
       <div class="alert-label-box">
@@ -129,9 +149,19 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
         </div>
       </div>
       <div class="alert-label-box">
@@ -169,9 +199,19 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
         </div>
       </div>
       <div class="alert-label-box">
@@ -233,9 +273,20 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span></div>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.state')}}</div>
@@ -251,8 +302,10 @@
 </template>
 
 <script>
+import trendMixin from './trendMixins'
 export default {
   name: 'alertLabel',
+  mixins: [trendMixin],
   props: {
     id: {},
     type: {},
@@ -265,11 +318,8 @@ export default {
     return {
       alertLabelData: null,
       loading: true,
-      heightList: 0
+      heightList: 0,
     }
-  },
-  components: {
-
   },
   watch: {
     id: {
@@ -388,6 +438,36 @@ export default {
           }
         })
       }
+      const weekDays = this.getWeeksTime()
+      if (this.trendTimer) {
+        clearTimeout(this.trendTimer)
+        this.trendTimer = null
+      }
+      this.trendTimer = setTimeout(() => {
+        this.trendLoading = true
+        const params = {
+          type: 'total',
+          dimension: 'priority',
+          step: 'd'
+        }
+        params[this.type + 'Id'] = this.id
+        this.$get('/stat/alertMessage/trend', params).then((res) => {
+          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(() => {
+            this.alertDaysData = newWeekDays
+            this.trendLoading = false
+          })
+        })
+      })
     },
     alertActiveStr () {
       return this.$t('overall.active')
@@ -401,7 +481,11 @@ export default {
     }
   },
   mounted () {
+    if (this.$refs.alertLabels) {
       this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+    } else {
+      this.heightList = ''
+    }
   },
   beforeDestroy () {
 

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

@@ -53,9 +53,19 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
         </div>
       </div>
       <div class="alert-label-box">
@@ -94,9 +104,19 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
         </div>
       </div>
       <div class="alert-label-box">
@@ -135,9 +155,19 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
         </div>
       </div>
       <div class="alert-label-box">
@@ -175,9 +205,19 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
         </div>
       </div>
       <div class="alert-label-box">
@@ -239,9 +279,20 @@
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">
+        <div class="alert-label-value" v-if="alertLabelData">
-          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span></div>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertLabelData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.state')}}</div>
@@ -256,8 +307,10 @@
 </template>
 
 <script>
+import trendMixin from './trendMixins'
 export default {
   name: 'alertLabel',
+  mixins: [trendMixin],
   props: {
     id: {},
     type: {},
@@ -289,7 +342,16 @@ export default {
   data () {
     return {
       alertLabelData: null,
-      loading: true
+      loading: true,
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertNumtooltipShow: false,
+      position: {
+        left: 0,
+        top: 0
+      },
+      alertDaysData: [],
+      trendLoading: false,
+      trendTimer: null
     }
   },
   computed: {
@@ -367,6 +429,36 @@ export default {
           }
         })
       }
+      const weekDays = this.getWeeksTime()
+      if (this.trendTimer) {
+        clearTimeout(this.trendTimer)
+        this.trendTimer = null
+      }
+      this.trendTimer = setTimeout(() => {
+        this.trendLoading = true
+        const params = {
+          type: 'total',
+          dimension: 'priority',
+          step: 'd'
+        }
+        params[this.type + 'Id'] = this.id
+        this.$get('/stat/alertMessage/trend', params).then((res) => {
+          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(() => {
+            this.alertDaysData = newWeekDays
+            this.trendLoading = false
+          })
+        })
+      })
     },
     alertActiveStr () {
       return this.$t('overall.active')

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

@@ -32,9 +32,19 @@
       </div>
       <div class="alert-rule-box">
         <div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
-        <div class="alert-rule-value">
+        <div class="alert-rule-value" v-if="alertRuleData">
-          <i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
+          <i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
-          <span>{{alertRuleData.alertNum ? alertRuleData.alertNum : 0}}</span>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.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">{{alertRuleData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
         </div>
       </div>
       <div class="alert-rule-box">
@@ -60,8 +70,10 @@
 
 <script>
 import chartDataFormat from '../../charts/chartDataFormat'
+import trendMixins from '@/components/common/alert/trendMixins'
 export default {
   name: 'alert-rule-info',
+  mixins: [trendMixins],
   props: {
     id: {},
     messageLoad: {},
@@ -131,6 +143,36 @@ export default {
         this.loading = false
         this.severityDataColor()
         this.alertRuleData = res.data
+        const weekDays = this.getWeeksTime()
+        if (this.trendTimer) {
+          clearTimeout(this.trendTimer)
+          this.trendTimer = null
+        }
+        this.trendTimer = setTimeout(() => {
+          this.trendLoading = true
+          const params = {
+            type: 'total',
+            dimension: 'priority',
+            step: 'd'
+          }
+          params['rule' + 'Id'] = this.id
+          this.$get('/stat/alertMessage/trend', params).then((res) => {
+            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(() => {
+              this.alertDaysData = newWeekDays
+              this.trendLoading = false
+            })
+          })
+        })
       } else {
         this.$message.error(res.msg)
       }

nezha-fronted/src/components/common/alert/trendMixins.js

@@ -0,0 +1,57 @@
+import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
+export default {
+  components: {
+    alertDaysInfo
+  },
+  data () {
+    return {
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertNumtooltipShow: false,
+      position: {
+        left: 0,
+        top: 0
+      },
+      alertDaysData: [],
+      trendLoading: false,
+      trendTimer: null
+    }
+  },
+  methods: {
+    tooltipHover (item, flag, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.position.left = position.left
+        this.$set(this.position, 'left', position.left)
+        if (position.top > window.innerHeight / 2) {
+          this.$set(this.position, 'top', position.top - 55)
+        } else {
+          this.$set(this.position, 'top', position.top + 30)
+        }
+        // this.$set(item, 'alertNumtooltipShow', flag)
+        this.alertNumtooltipShow = flag
+      }
+    },
+    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
+    }
+  }
+}

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue

@@ -16,7 +16,7 @@
     >
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-slot:top-tool-right>
-        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top">
+        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 100px">
           <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
         </el-select>
         <pick-time v-model="searchTimeHeader" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>