fix：防止图表mousedown触发clickoutside事件

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

@@ -155,7 +155,7 @@ export default {
         if (this.isInit && this.dataLink.length) {
           myChart.on('click', this.chartClick)
           myChart.on('mousedown', (params) => {
-            if (this.tooltip.show) {
+            if (this.tooltip.dataLinkShow) {
               const e = params.event.event
               e.stopPropagation()
             }

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

@@ -188,6 +188,7 @@ export default {
       bubbles.on('mousemove', this.bubbleMove)
       bubbles.on('mouseleave', this.bubbleLeave)
       bubbles.on('click', this.chartClick)
+      bubbles.on('mousedown', this.chartMousedown)
     },
     // 处理label
     bubbleFormatterLabel (node) {
@@ -290,6 +291,7 @@ export default {
         this.svg.selectAll('.bubble').on('mousemove', null)
         this.svg.selectAll('.bubble').on('mouseleave', null)
         this.svg.selectAll('.bubble').on('click', null)
+        this.svg.selectAll('.bubble').on('mousedown', null)
         this.svg.selectAll('g').remove()
         this.svg = null
       }
@@ -329,8 +331,13 @@ export default {
         this.datalinkPosition(e)
       }
     },
+    chartMousedown (e) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+        e.stopPropagation()
+      }
+    },
     clickout () {
-      if (this.dataLink.length) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }

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

@@ -225,6 +225,7 @@ export default {
         .on('mousemove', this.doughnutMove)
         .on('mouseleave', this.doughnutLeave)
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
         .transition().duration(animate === true ? 600 : 0)
         .attrTween('d', function (d) {
           const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
@@ -250,6 +251,7 @@ export default {
         .on('mousemove', this.doughnutMove)
         .on('mouseleave', this.doughnutLeave)
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
         .style('opacity', 0)
         .html((d) => {
           return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : ''
@@ -368,12 +370,14 @@ export default {
         this.svg.selectAll('path').on('mousemove', null)
         this.svg.selectAll('path').on('mouseleave', null)
         this.svg.selectAll('path').on('click', null)
+        this.svg.selectAll('path').on('mousedown', null)
         this.svg.selectAll('foreignObject').on('mouseover', null)
         this.svg.selectAll('foreignObject').on('mouseout', null)
         this.svg.selectAll('foreignObject').on('mouseenter', null)
         this.svg.selectAll('foreignObject').on('mousemove', null)
         this.svg.selectAll('foreignObject').on('mouseleave', null)
         this.svg.selectAll('foreignObject').on('click', null)
+        this.svg.selectAll('foreignObject').on('mousedown', null)
         this.svg.remove()
         this.svg = null
       }
@@ -413,8 +417,13 @@ export default {
         this.datalinkPosition(e)
       }
     },
+    chartMousedown (e) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+        e.stopPropagation()
+      }
+    },
     clickout () {
-      if (this.dataLink.length) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }

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

@@ -191,6 +191,7 @@ export default {
           this.chartLeave()
         })
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
 
       function getPoints (topWidth, bottomWidth, height) {
         const points = []
@@ -227,6 +228,7 @@ export default {
           this.chartLeave()
         })
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
         .style('opacity', 0)
         .transition('opacity').duration(animate === true ? 600 : 0)
         .style('opacity', 1)
@@ -380,10 +382,12 @@ export default {
         this.svg.selectAll('.trap').on('mousemove', null)
         this.svg.selectAll('.trap').on('mouseleave', null)
         this.svg.selectAll('.trap').on('click', null)
+        this.svg.selectAll('.trap').on('mousedown', null)
         this.svg.selectAll('foreignObject').on('mouseover', null)
         this.svg.selectAll('foreignObject').on('mousemove', null)
         this.svg.selectAll('foreignObject').on('mouseleave', null)
         this.svg.selectAll('foreignObject').on('click', null)
+        this.svg.selectAll('foreignObject').on('mousedown', null)
         this.svg.selectAll('g').remove()
         this.svg = null
       }
@@ -423,8 +427,13 @@ export default {
         this.datalinkPosition(e)
       }
     },
+    chartMousedown (e) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+        e.stopPropagation()
+      }
+    },
     clickout () {
-      if (this.dataLink.length) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }

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

@@ -236,7 +236,7 @@ export default {
         if (this.dataLink.length) {
           myChart.on('click', this.chartClick)
           myChart.on('mousedown', (params) => {
-            if (this.tooltip.show) {
+            if (this.tooltip.dataLinkShow) {
               const e = params.event.event
               e.stopPropagation()
             }

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

@@ -184,6 +184,7 @@ export default {
         g.on('mousemove', self.hexagonMove.bind(self, point))
         g.on('mouseleave', self.hexagonOut.bind(self, point))
         g.on('click', self.chartClick.bind(self, point))
+        g.on('mousedown', self.chartMousedown)
         self.drawText(this.svg, vals, point, color, hexaRadius, g) // 文本
         data[i].fcolor = color
       }
@@ -428,6 +429,7 @@ export default {
         this.svg.selectAll('g').on('mouseenter', null)
         this.svg.selectAll('g').on('mouseleave', null)
         this.svg.selectAll('g').on('click', null)
+        this.svg.selectAll('g').on('mousedown', null)
         this.svg.remove()
         this.svg = null
       }
@@ -480,8 +482,13 @@ export default {
         this.datalinkPosition(e)
       }
     },
+    chartMousedown (e) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+        e.stopPropagation()
+      }
+    },
     clickout () {
-      if (this.dataLink.length) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }

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

@@ -171,6 +171,7 @@ export default {
         .on('mousemove', this.rankMove)
         .on('mouseleave', this.rankLeave)
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
       bars.exit().remove()
 
       // 文本标签
@@ -184,6 +185,7 @@ export default {
         .on('mousemove', this.rankMove)
         .on('mouseleave', this.rankLeave)
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
         .html((d) => {
           return this.rankFormatterLabel(d)
         })
@@ -297,10 +299,12 @@ export default {
         this.svg.selectAll('rect').on('mousemove', null)
         this.svg.selectAll('rect').on('mouseleave', null)
         this.svg.selectAll('rect').on('click', null)
+        this.svg.selectAll('rect').on('mousedown', null)
         this.svg.selectAll('foreignObject').on('mouseenter', null)
         this.svg.selectAll('foreignObject').on('mousemove', null)
         this.svg.selectAll('foreignObject').on('mouseleave', null)
         this.svg.selectAll('foreignObject').on('click', null)
+        this.svg.selectAll('foreignObject').on('mousedown', null)
         this.svg.selectAll('g').remove()
         this.svg = null
       }
@@ -340,8 +344,13 @@ export default {
         this.datalinkPosition(e)
       }
     },
+    chartMousedown (e) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+        e.stopPropagation()
+      }
+    },
     clickout () {
-      if (this.dataLink.length) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }

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

@@ -250,6 +250,7 @@ export default {
         .on('mousemove', this.roseMove)
         .on('mouseleave', this.roseLeave)
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
         .transition().duration(animate === true ? 600 : 0)
         .attrTween('d', function (d) {
           const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
@@ -275,6 +276,7 @@ export default {
         .on('mousemove', this.roseMove)
         .on('mouseleave', this.roseLeave)
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
         .style('opacity', 0)
         .html((d) => {
           return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : ''
@@ -393,12 +395,14 @@ export default {
         this.svg.selectAll('path').on('mousemove', null)
         this.svg.selectAll('path').on('mouseleave', null)
         this.svg.selectAll('path').on('click', null)
+        this.svg.selectAll('path').on('mousedown', null)
         this.svg.selectAll('foreignObject').on('mouseover', null)
         this.svg.selectAll('foreignObject').on('mouseout', null)
         this.svg.selectAll('foreignObject').on('mouseenter', null)
         this.svg.selectAll('foreignObject').on('mousemove', null)
         this.svg.selectAll('foreignObject').on('mouseleave', null)
         this.svg.selectAll('foreignObject').on('click', null)
+        this.svg.selectAll('foreignObject').on('mousedown', null)
         this.svg.remove()
         this.svg = null
       }
@@ -438,8 +442,13 @@ export default {
         this.datalinkPosition(e)
       }
     },
+    chartMousedown (e) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+        e.stopPropagation()
+      }
+    },
     clickout () {
-      if (this.dataLink.length) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }

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

@@ -287,6 +287,7 @@ export default {
           this.tooltip.show = false
         })
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
 
       // 划过节点
       chart.selectAll('.node')
@@ -319,6 +320,7 @@ export default {
           this.tooltip.show = false
         })
         .on('click', this.chartClick)
+        .on('mousedown', this.chartMousedown)
     },
     setPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
@@ -404,10 +406,12 @@ export default {
         this.svg.selectAll('path').on('mousemove', null)
         this.svg.selectAll('path').on('mouseleave', null)
         this.svg.selectAll('path').on('click', null)
+        this.svg.selectAll('path').on('mousedown', null)
         this.svg.selectAll('.node').on('mouseenter', null)
         this.svg.selectAll('.node').on('mousemove', null)
         this.svg.selectAll('.node').on('mouseleave', null)
         this.svg.selectAll('.node').on('click', null)
+        this.svg.selectAll('.node').on('mousedown', null)
         this.svg.selectAll('g').remove()
         this.svg = null
       }
@@ -447,8 +451,13 @@ export default {
         this.datalinkPosition(e)
       }
     },
+    chartMousedown (e) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+        e.stopPropagation()
+      }
+    },
     clickout () {
-      if (this.dataLink.length) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }

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

@@ -8,6 +8,7 @@
       @mousemove="statMouseMove"
       @mouseleave="statMouseleave(item)"
       @click="chartClick($event,item)"
+      @mousedown="chartMousedown($event)"
       :class="{'only-stat':statData.length===1,'chart-cursor-pointer':dataLink.length}"
       :style="{
         background:item.mapping ? item.mapping.color.bac : (statData.length===1 ? '' : colorList[index]),
@@ -538,8 +539,13 @@ export default {
         this.datalinkPosition(e)
       }
     },
+    chartMousedown (e) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+        e.stopPropagation()
+      }
+    },
     clickout () {
-      if (this.dataLink.length) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }

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

@@ -33,13 +33,14 @@
             class="value-mapping-table"
             :class="{'chart-cursor-pointer':dataLink.length}"
             @click="chartClick($event,col,scope.row)"
+            @mousedown="chartMousedown($event)"
           >
             <template v-if="scope.row.valueMapping && scope.row.valueMapping[col.title + 'mapping']">
               <i :class="scope.row.valueMapping[col.title + 'mapping'].icon" :style="{color: scope.row.valueMapping[col.title + 'mapping'].color.icon}"></i>
             </template>
             {{showValueMapping(scope.row,col.title, col)}}
           </div>
-          <div v-else class="value-mapping-table" :class="{'chart-cursor-pointer':dataLink.length}" @click="chartClick($event,col,scope.row)">
+          <div v-else class="value-mapping-table" :class="{'chart-cursor-pointer':dataLink.length}" @click="chartClick($event,col,scope.row)" @mousedown="chartMousedown($event)">
             {{scope.row.display[col.title + 'display'].display}}
           </div>
         </template>
@@ -424,8 +425,13 @@ export default {
         this.datalinkPosition(e)
       }
     },
+    chartMousedown (e) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
+        e.stopPropagation()
+      }
+    },
     clickout () {
-      if (this.dataLink.length) {
+      if (this.dataLink.length && this.tooltip.dataLinkShow) {
         this.tooltip.show = false
         this.tooltip.dataLinkShow = false
       }

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

@@ -239,7 +239,7 @@ export default {
             })
             myChart.on('click', this.chartClick)
             myChart.on('mousedown', (params) => {
-              if (this.tooltip.show) {
+              if (this.tooltip.dataLinkShow) {
                 const e = params.event.event
                 e.stopPropagation()
               }

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

@@ -122,7 +122,7 @@ export default {
         if (this.isInit && this.dataLink.length) {
           myChart.on('click', this.chartClick)
           myChart.on('mousedown', (params) => {
-            if (this.tooltip.show && params.dataIndex) {
+            if (this.tooltip.dataLinkShow && params.dataIndex) {
               const e = params.event.event
               e.stopPropagation()
             }

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

@@ -516,11 +516,7 @@ export default {
         setTimeout(() => {
           const start = new Date().setHours(new Date().getHours() - 1)
           const end = new Date()
-          if (this.from === 'dashboard') {
+          this.timeRange = [bus.computeTimezoneTime(start), bus.computeTimezoneTime(end)]
-            this.timeRange = this.$store.getters.getTimeRange
-          } else {
-            this.timeRange = [bus.computeTimezoneTime(start), bus.computeTimezoneTime(end)]
-          }
           this.prevChart = {
             ...lodash.cloneDeep(this.editChart),
             loaded: true