NEZ-1748 fix： Chart 修改，改变内容后，点击 cancel 没有触发 未保存提示 效果

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -88,6 +88,9 @@ export default {
       chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue, copies, unit, dot)
       chartOption.yAxis.minInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'min')
       chartOption.yAxis.maxInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(chartOption.series.length / 5)
+      if (this.chartInfo.param.stack) {
+        chartOption.yAxis.maxInterval = chartOption.yAxis.maxInterval * (Math.ceil(chartOption.series.length / 5) + 1)
+      }
       if (unit.type === 'Time') {
         delete chartOption.yAxis.minInterval
         delete chartOption.yAxis.maxInterval
@@ -159,7 +162,6 @@ export default {
         maxValue = Math.floor(oldValue) / Math.pow(10, dot)
         dot++
       }
-      console.log(oldValue)
       const copies = chartDataFormat.copies(Number(oldValue), unit.type)
       return { minTime, maxTime, minValue, maxValue, copies, unit, dot }
     },
@@ -320,6 +322,11 @@ export default {
         self.isStack = !self.isStack
         // 改变tooltip
         option.tooltip[0].formatter = self.tooltipFormatter(self.isStack)
+        if (!self.chartInfo.param.stack) {
+          option.yAxis.maxInterval = option.yAxis.maxInterval / (Math.ceil(option.series.length / 5) + 1)
+        } else {
+          option.yAxis.maxInterval = option.yAxis.maxInterval * (Math.ceil(option.series.length / 5) + 1)
+        }
         myChart.setOption(option)
       }
     },

nezha-fronted/src/components/charts/chartDataFormat.js

@@ -397,6 +397,9 @@ function asciiCompute2 (num, ascii, units, dot = 2, unitIndex = 0) {
 * unit:设置的单位
 * */
 function timeCompute (value, unit, dot = 0) {
+  if (isNaN(value)) {
+    return `0 ${unit}`
+  }
   if (unit == 'year') {
     return `${value.toFixed(dot)} ${unit}`
   }

nezha-fronted/src/components/common/js/tools.js

@@ -13,6 +13,7 @@ export const clickoutside = {
     let oldValue
     try {
       oldValue = JSON.parse(JSON.stringify(binding.value.obj))
+      el.__oldValue__ = oldValue
     } catch (e) {
 
     }
@@ -66,6 +67,61 @@ export const clickoutside = {
     el.__vueClickOutside__ = documentHandler
     document.addEventListener('mousedown', documentHandler)
   },
+  update (el, binding, vnode) {
+    if (!binding.expression) return
+    const oldValue = el.__oldValue__
+    const unsavedChange = localStorage.getItem('nz-unnsaved-change')
+    document.removeEventListener('mousedown', el.__vueClickOutside__)
+    function documentHandler (e) {
+      if (el.contains(e.target)) {
+        return false
+      } else {
+        let flag = true
+        const path = e.path || (e.composedPath && e.composedPath())
+        // eslint-disable-next-line no-labels
+        top: for (let i = 0; i < path.length; i++) {
+          for (let j = 0; j < exceptClassName.length; j++) {
+            if (path[i].className && path[i].className.indexOf && path[i].className.indexOf(exceptClassName[j]) !== -1) {
+              flag = false
+              // eslint-disable-next-line no-labels
+              break top
+            }
+          }
+        }
+        if (!flag) {
+          return false
+        }
+        if (oldValue) {
+          const newValue = JSON.parse(JSON.stringify(binding.value.obj))
+          if (unsavedChange == 'on' && !isEqual(oldValue, newValue)) {
+            MessageBox.confirm(i18n.t('tip.confirmCancel'), {
+              confirmButtonText: i18n.t('tip.yes'),
+              cancelButtonText: i18n.t('tip.no'),
+              type: 'warning'
+            }).then(() => {
+              if (binding.value.func) {
+                binding.value.func()
+              }
+            })
+          } else {
+            binding.value.func()
+          }
+        } else {
+          if (binding.arg) {
+            binding.value(e, binding.arg)
+          } else {
+            if (binding.value) {
+              binding.value(e)
+            }
+          }
+        }
+      }
+    }
+
+    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
+    el.__vueClickOutside__ = documentHandler
+    document.addEventListener('mousedown', documentHandler)
+  },
   unbind (el, binding) {
     // 解除事件监听
     document.removeEventListener('mousedown', el.__vueClickOutside__)

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-clickoutside="{obj:editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
+  <div v-clickoutside="{obj: editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
     <transition v-if="from !== 'chartTemp'" name="right-box">
 <!--      <panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>-->
     </transition>
@@ -457,42 +457,42 @@ export default {
         if (obj.param && !obj.param.thresholds) {
           obj.param.thresholds = []
         }
-        this.editChart = obj
+        if (obj.groupId === -1) {
-        if (this.editChart.groupId === -1) {
+          obj.groupId = ''
-          this.editChart.groupId = ''
         }
-        if (this.editChart.param) {
+        if (obj.param) {
-          if (!this.editChart.param.min) {
+          if (!obj.param.min) {
-            this.editChart.param.min = 0
+            obj.param.min = 0
           }
-          if (!this.editChart.param.max) {
+          if (!obj.param.max) {
-            this.editChart.param.max = 100
+            obj.param.max = 100
           }
-          if (!this.editChart.param.link) {
+          if (!obj.param.link) {
-            this.$set(this.editChart.param, 'link', '')
+            this.$set(obj.param, 'link', '')
           }
-          if (!this.editChart.param.enable) {
+          if (!obj.param.enable) {
-            this.editChart.param.enable = {
+            obj.param.enable = {
               thresholds: false,
               legend: false,
               valueMapping: false
             }
           }
           // this.editChart.varType = 1
-          if (this.editChart.param.enable.legend && !this.editChart.param.legend) {
+          if (obj.param.enable.legend && !obj.param.legend) {
-            this.editChart.param.legend = { placement: 'bottom', values: [], show: true }
+            obj.param.legend = { placement: 'bottom', values: [], show: true }
           }
-          if (this.editChart.param.datasource && !this.editChart.param.datasource[0].legend) {
+          if (obj.param.datasource && !obj.param.datasource[0].legend) {
-            this.editChart.param.datasource[0].legend = ''
+            obj.param.datasource[0].legend = ''
           }
-          if (this.editChart.param.valueMapping) {
+          if (obj.param.valueMapping) {
-            this.editChart.param.valueMapping.forEach(item => {
+            obj.param.valueMapping.forEach(item => {
               if (!item.show) {
                 item.show = false
               }
             })
           }
         }
+        this.editChart = obj
       }
     },
     'editChart.type': {
@@ -501,6 +501,12 @@ export default {
           this.editChart.groupId = ''
         }
       }
+    },
+    editChart: {
+      deep: true,
+      handler () {
+
+      }
     }
   }
 }