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

fix：topology 补充 移入显示图表

Browse Source
This commit is contained in:
zhangyu
2022-08-11 11:02:57 +08:00
parent d0b1927107
commit 50bba887c0
3 changed files with 52 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -825,6 +825,8 @@ export default {
getTopology(this.topologyIndex).on('scale', this.topoScale) // 缩放·
getTopology(this.topologyIndex).on('translatePens', () => {}) // 移动画笔结束·
getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中·
getTopology(this.topologyIndex).on('enter', this.penEnter) // 移入画笔·
getTopology(this.topologyIndex).on('leave', this.penLeave) // 移出画笔·
getTopology(this.topologyIndex).on('add', this.appPen) // 添加新画笔·
getTopology(this.topologyIndex).on('click', this.topoClick) // click画笔·
getTopology(this.topologyIndex).store.options.autoAnchor = true

2
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -830,6 +830,8 @@ export default {
getTopology(this.topologyIndex).on('scale', this.topoScale) // 缩放·
getTopology(this.topologyIndex).on('translatePens', () => {}) // 移动画笔结束·
getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中·
getTopology(this.topologyIndex).on('enter', this.penEnter) // 移入画笔·
getTopology(this.topologyIndex).on('leave', this.penLeave) // 移出画笔·
getTopology(this.topologyIndex).on('add', this.appPen) // 添加新画笔·
getTopology(this.topologyIndex).on('click', this.topoClick) // click画笔·
getTopology(this.topologyIndex).store.options.autoAnchor = true

48
nezha-fronted/src/components/common/project/topologyMixin.js
View File

@@ -178,6 +178,7 @@ export default {
},
topoClick (pointAndPen) {
this.showNodeTools('')
this.tooltipPosition.show = false
if (!pointAndPen.pen) {
this.props = {
node: null,
@@ -191,6 +192,53 @@ export default {
}
}
},
penEnter (pen) {
if (this.timer3) {
clearTimeout(this.timer3)
this.timer3 = null
}
this.chartData = { ...pen.data, ...this.chartGetData.find(item => item.id === pen.id) }
this.tooltipPosition.show = false
const timer = setTimeout(() => {
this.tooltipPosition.show = true
let ePosition = window.ePosition
let boxWidth = document.getElementsByClassName('page')[0].offsetWidth
let boxHeight = document.getElementsByClassName('page')[0].offsetHeight
this.tooltipPosition.left = ePosition.layerX + 20
this.tooltipPosition.top = ePosition.layerY
this.$nextTick(() => {
if (this.$refs.topoTooltip) {
if ((boxWidth / 2) > ePosition.layerX) {
this.tooltipPosition.left = ePosition.layerX + 20
} else {
this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
}
if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
this.tooltipPosition.top = ePosition.layerY
} else {
this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
}
}
ePosition = null
boxWidth = null
boxHeight = null
})
clearTimeout(timer)
}, 100)
},
penLeave (pen) {
if (!this.timer3) {
this.timer3 = setTimeout(() => {
this.tooltipPosition.show = false
this.timer3 = null
}, 50)
} else {
this.timer3 = setTimeout(() => {
this.tooltipPosition.show = false
this.timer3 = null
}, 50)
}
},
toCenter () {
if (getTopology(this.topologyIndex)) {
getTopology(this.topologyIndex).resize()