NEZ-2792 fix：鼠标 悬浮框 不会消失&不刷新

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

@@ -100,6 +100,15 @@ export default {
     that: {},
     severityData: Array
   },
+  watch: {
+    id: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.init()
+      }
+    },
+  },
   data () {
     return {
       loading: true,
@@ -181,52 +190,58 @@ export default {
     },
     tipHoverRule (tipLoading) {
       this.$emit('tipHoverRule', tipLoading)
+    },
+    init () {
+      if (!this.id) {
+        return
+      }
+      this.$get('/alert/rule/' + this.id).then((res) => {
+        if (res.msg === 'success') {
+          this.loading = false
+          this.alertRuleData = res.data
+          this.severityDataColor()
+          this.alertColor = this.returnColor(res.data.alert)
+          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) => {
+              if (!res.data) {
+                return
+              }
+              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)
+        }
+      })
     }
   },
   mounted () {
-    this.$get('/alert/rule/' + this.id).then((res) => {
-      if (res.msg === 'success') {
-        this.loading = false
-        this.alertRuleData = res.data
-        this.severityDataColor()
-        this.alertColor = this.returnColor(res.data.alert)
-        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) => {
-            if (!res.data) {
-              return
-            }
-            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/table/alert/alertMessageTable.vue

@@ -270,7 +270,8 @@ export default {
       tableDataInitNum: 0,
       alertRuleShow: false,
       alertRuleId: '',
-      alertRuleObj: ''
+      alertRuleObj: '',
+      timeRule: ''
     }
   },
   computed: {
@@ -539,7 +540,7 @@ export default {
     },
     // alertName鼠标划入
     alertMessageHover (item, loading, e) {
-      clearTimeout(this.timer)
+      clearTimeout(this.timeRule)
       if (e) {
         const dom = e.currentTarget
         const position = dom.getBoundingClientRect()
@@ -548,13 +549,13 @@ export default {
         this.alertRuleObj = item
       }
       this.$set(item.alertRule, 'loading', loading)
-      this.timer = setTimeout(() => {
+      this.timeRule = setTimeout(() => {
         this.alertRuleShow = loading
       }, 500)
       this.flag = loading
     },
     tipHoverRule (tipLoading) {
-      clearTimeout(this.timer)
+      clearTimeout(this.timeRule)
       if (this.flag === false) {
         this.alertRuleShow = tipLoading
       }