gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zyh
2023-06-12 10:51:09 +08:00
parent 43fcb64291
commit 5fff9ef786
14 changed files with 86 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -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()
}

9
nezha-fronted/src/components/chart/chart/chartBubble.vue
View File

@@ -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
}

11
nezha-fronted/src/components/chart/chart/chartDoughnut.vue
View File

@@ -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
}

11
nezha-fronted/src/components/chart/chart/chartFunnel.vue
View File

@@ -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
}

2
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -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()
}

9
nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
View File

@@ -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
}

11
nezha-fronted/src/components/chart/chart/chartRank.vue
View File

@@ -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
}

11
nezha-fronted/src/components/chart/chart/chartRose.vue
View File

@@ -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
}

11
nezha-fronted/src/components/chart/chart/chartSankey.vue
View File

@@ -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
}

8
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -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
}

10
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -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
}

2
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -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()
}

2
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -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()
}

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

@@ -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.prevChart = {
...lodash.cloneDeep(this.editChart),
loaded: true