diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue index da352760f..ff0505459 100644 --- a/nezha-fronted/src/components/chart/chart/chartBar.vue +++ b/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() } diff --git a/nezha-fronted/src/components/chart/chart/chartBubble.vue b/nezha-fronted/src/components/chart/chart/chartBubble.vue index f92940b58..2d560d6e2 100644 --- a/nezha-fronted/src/components/chart/chart/chartBubble.vue +++ b/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 } diff --git a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue index 679ba9ca9..03051da7b 100644 --- a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue +++ b/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 } diff --git a/nezha-fronted/src/components/chart/chart/chartFunnel.vue b/nezha-fronted/src/components/chart/chart/chartFunnel.vue index bc796347b..8c74515a4 100644 --- a/nezha-fronted/src/components/chart/chart/chartFunnel.vue +++ b/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 } diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index 5c7219540..87dbcaf2c 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/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() } diff --git a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue index 25a558679..313cdb42f 100644 --- a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue +++ b/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 } diff --git a/nezha-fronted/src/components/chart/chart/chartRank.vue b/nezha-fronted/src/components/chart/chart/chartRank.vue index 93c3519fc..068485b1b 100644 --- a/nezha-fronted/src/components/chart/chart/chartRank.vue +++ b/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 } diff --git a/nezha-fronted/src/components/chart/chart/chartRose.vue b/nezha-fronted/src/components/chart/chart/chartRose.vue index 9f0a97260..1cf23d800 100644 --- a/nezha-fronted/src/components/chart/chart/chartRose.vue +++ b/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 } diff --git a/nezha-fronted/src/components/chart/chart/chartSankey.vue b/nezha-fronted/src/components/chart/chart/chartSankey.vue index c8734b4e9..f2163f95b 100644 --- a/nezha-fronted/src/components/chart/chart/chartSankey.vue +++ b/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 } diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue index 5d641dbad..2c2ce8180 100644 --- a/nezha-fronted/src/components/chart/chart/chartStat.vue +++ b/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 } diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue index cec5b0328..d6dc457c4 100644 --- a/nezha-fronted/src/components/chart/chart/chartTable.vue +++ b/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)" > {{showValueMapping(scope.row,col.title, col)}} -
+
{{scope.row.display[col.title + 'display'].display}}
@@ -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 } diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 1f383f920..30a7df8c3 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/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() } diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue index f3960c431..78c0063d6 100644 --- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue +++ b/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() } diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue index 302d27b95..ee36a8c42 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue +++ b/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 = this.$store.getters.getTimeRange - } else { - this.timeRange = [bus.computeTimezoneTime(start), bus.computeTimezoneTime(end)] - } + this.timeRange = [bus.computeTimezoneTime(start), bus.computeTimezoneTime(end)] this.prevChart = { ...lodash.cloneDeep(this.editChart), loaded: true