fix: 修改 group重叠下方chart 的bug 以及 点击菜单panel未跳第一个panel的问题
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="width: 100%;height: 100%">
|
<div style="width: 100%;height: 100%">
|
||||||
<chartList
|
<chartList
|
||||||
|
v-if="chartInfo.loaded"
|
||||||
ref="chartList"
|
ref="chartList"
|
||||||
name="group"
|
name="group"
|
||||||
:class="{'show-top':showTopBtn}"
|
:class="{'show-top':showTopBtn}"
|
||||||
@@ -50,6 +51,7 @@ export default {
|
|||||||
|
|
||||||
},
|
},
|
||||||
initChart () {
|
initChart () {
|
||||||
|
setTimeout(() => {
|
||||||
this.dataList = this.dataList.map(item => {
|
this.dataList = this.dataList.map(item => {
|
||||||
return {
|
return {
|
||||||
...item,
|
...item,
|
||||||
@@ -57,6 +59,7 @@ export default {
|
|||||||
loaded: true
|
loaded: true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}, 100)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|||||||
@@ -179,14 +179,12 @@ export default {
|
|||||||
return svg.node()
|
return svg.node()
|
||||||
},
|
},
|
||||||
hexagonOver (that, e) { // 移入六边形
|
hexagonOver (that, e) { // 移入六边形
|
||||||
// console.log(that, e)
|
|
||||||
this.tooltip.title = that.alias
|
this.tooltip.title = that.alias
|
||||||
this.tooltip.value = that.showValue
|
this.tooltip.value = that.showValue
|
||||||
this.tooltip.show = true
|
this.tooltip.show = true
|
||||||
this.setPosition(e)
|
this.setPosition(e)
|
||||||
},
|
},
|
||||||
hexagonMove (e) { // 六边形内移动
|
hexagonMove (e) { // 六边形内移动
|
||||||
// console.log(e)
|
|
||||||
if (this.tooltip.show) {
|
if (this.tooltip.show) {
|
||||||
this.setPosition(e)
|
this.setPosition(e)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -148,7 +148,6 @@ export default {
|
|||||||
let sourceData = null
|
let sourceData = null
|
||||||
sourceData = this.oldTableData
|
sourceData = this.oldTableData
|
||||||
orderBy = this.orderBy
|
orderBy = this.orderBy
|
||||||
console.log(orderBy)
|
|
||||||
if (!orderBy || !orderBy.order) { // 没有排序 恢复默认值
|
if (!orderBy || !orderBy.order) { // 没有排序 恢复默认值
|
||||||
source = Object.assign([], sourceData)
|
source = Object.assign([], sourceData)
|
||||||
} else { // 排序之后的顺序
|
} else { // 排序之后的顺序
|
||||||
@@ -244,7 +243,6 @@ export default {
|
|||||||
},
|
},
|
||||||
tableDataSort (orderBy) {
|
tableDataSort (orderBy) {
|
||||||
this.orderBy = { order: orderBy.order, prop: orderBy.prop }
|
this.orderBy = { order: orderBy.order, prop: orderBy.prop }
|
||||||
console.log(orderBy, this.orderBy)
|
|
||||||
this.tableData = this.filterShowData(this.tableData)
|
this.tableData = this.filterShowData(this.tableData)
|
||||||
},
|
},
|
||||||
// 本地正序
|
// 本地正序
|
||||||
@@ -266,7 +264,6 @@ export default {
|
|||||||
return function (obj1, obj2) {
|
return function (obj1, obj2) {
|
||||||
const val1 = obj1.display[prop + 'display'].replace(/\s*/g, '')
|
const val1 = obj1.display[prop + 'display'].replace(/\s*/g, '')
|
||||||
const val2 = obj2.display[prop + 'display'].replace(/\s*/g, '')
|
const val2 = obj2.display[prop + 'display'].replace(/\s*/g, '')
|
||||||
console.log(val1, val2, val1 < val2, val2 > val1)
|
|
||||||
if (val1 < val2) {
|
if (val1 < val2) {
|
||||||
return -1
|
return -1
|
||||||
} else if (val1 > val2) {
|
} else if (val1 > val2) {
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ export function isClock (type) {
|
|||||||
export function getGroupHeight (arr) {
|
export function getGroupHeight (arr) {
|
||||||
if (arr.length) {
|
if (arr.length) {
|
||||||
let lastItem = []
|
let lastItem = []
|
||||||
let maxY = 0
|
let maxY = arr[0].y
|
||||||
arr.forEach((children, index) => {
|
arr.forEach((children, index) => {
|
||||||
if (maxY == children.y) {
|
if (maxY == children.y) {
|
||||||
lastItem.push(children)
|
lastItem.push(children)
|
||||||
@@ -132,6 +132,9 @@ export function getGroupHeight (arr) {
|
|||||||
maxHeight = last.height
|
maxHeight = last.height
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
if (maxY < 0) {
|
||||||
|
maxY = 0
|
||||||
|
}
|
||||||
return maxHeight + maxY
|
return maxHeight + maxY
|
||||||
} else {
|
} else {
|
||||||
return 1
|
return 1
|
||||||
|
|||||||
@@ -131,11 +131,7 @@ export default {
|
|||||||
if (colorIndex >= 20) {
|
if (colorIndex >= 20) {
|
||||||
const colorRandom = randomcolor()
|
const colorRandom = randomcolor()
|
||||||
this.colorList.push(colorRandom)
|
this.colorList.push(colorRandom)
|
||||||
// console.log(this.colorList.length, this.chartOption.color.length)
|
|
||||||
// this.chartOption.color.push(colorRandom)
|
|
||||||
// console.log(this.colorList.length, this.chartOption.color.length)
|
|
||||||
}
|
}
|
||||||
// console.log(name, alias, statistics)
|
|
||||||
this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] })
|
this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] })
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
@@ -264,7 +260,6 @@ export default {
|
|||||||
chartData: {
|
chartData: {
|
||||||
deep: true,
|
deep: true,
|
||||||
handler (n) {
|
handler (n) {
|
||||||
console.log(this.isInit)
|
|
||||||
if (!this.isInit) {
|
if (!this.isInit) {
|
||||||
this.colorList = this.colorList.slice(0, 20)
|
this.colorList = this.colorList.slice(0, 20)
|
||||||
this.chartOption.color = this.chartOption.color.slice(0, 20)
|
this.chartOption.color = this.chartOption.color.slice(0, 20)
|
||||||
|
|||||||
@@ -375,8 +375,8 @@ export default {
|
|||||||
this.chartInfo.height = height + this.headerHPadding
|
this.chartInfo.height = height + this.headerHPadding
|
||||||
this.chartInfo.h = height + this.headerHPadding
|
this.chartInfo.h = height + this.headerHPadding
|
||||||
} else {
|
} else {
|
||||||
this.chartInfo.height = this.headerH + height
|
this.chartInfo.height = height
|
||||||
this.chartInfo.h = this.headerH + height
|
this.chartInfo.h = height
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showFullscreen (show) {
|
showFullscreen (show) {
|
||||||
|
|||||||
@@ -210,18 +210,18 @@ export default {
|
|||||||
delete params.param.min
|
delete params.param.min
|
||||||
delete params.param.max
|
delete params.param.max
|
||||||
}
|
}
|
||||||
if (!params.x && !params.y) {
|
|
||||||
params.x = this.chartLastPosition.x + params.span > 12 ? 0 : this.chartLastPosition.x
|
|
||||||
params.y = this.chartLastPosition.y + 12
|
|
||||||
}
|
|
||||||
if (!params.x && !params.y && params.groupId) { // group 内的坐标需要单独计算
|
if (!params.x && !params.y && params.groupId) { // group 内的坐标需要单独计算
|
||||||
params.x = 0
|
params.x = 0
|
||||||
params.y = 999
|
params.y = 999
|
||||||
}
|
}
|
||||||
if (this.from === 'endpointQuery') { // endpointQuery 新增 放在最后
|
if (!params.x && !params.y && this.from === 'endpointQuery') { // endpointQuery 新增 放在最后
|
||||||
params.x = 0
|
params.x = 0
|
||||||
params.y = 999
|
params.y = 999
|
||||||
}
|
}
|
||||||
|
if (!params.x && !params.y) {
|
||||||
|
params.x = this.chartLastPosition.x + params.span > 12 ? 0 : this.chartLastPosition.x
|
||||||
|
params.y = this.chartLastPosition.y + 12
|
||||||
|
}
|
||||||
delete params.panel
|
delete params.panel
|
||||||
if (params.type === 'table') {
|
if (params.type === 'table') {
|
||||||
delete params.param.tags
|
delete params.param.tags
|
||||||
|
|||||||
@@ -36,7 +36,12 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
refresh () {
|
refresh () {
|
||||||
this.containerShow = false
|
this.containerShow = false
|
||||||
|
new Promise(resolve => {
|
||||||
|
this.$router.replace({ path: this.$route.path, query: {} })
|
||||||
|
resolve()
|
||||||
|
}).then(() => {
|
||||||
this.$nextTick(() => { this.containerShow = true })
|
this.$nextTick(() => { this.containerShow = true })
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
destroyed () {
|
destroyed () {
|
||||||
|
|||||||
@@ -821,11 +821,11 @@ export default {
|
|||||||
searchTime: { target: this, propertyName: 'searchTime', type: 'jsonParse' },
|
searchTime: { target: this, propertyName: 'searchTime', type: 'jsonParse' },
|
||||||
nowTimeType: { target: this, propertyName: 'nowTimeType', type: 'jsonParse' }
|
nowTimeType: { target: this, propertyName: 'nowTimeType', type: 'jsonParse' }
|
||||||
}
|
}
|
||||||
|
this.initQueryFromPath(searchKeys)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.showPanel.id = this.panelId
|
this.showPanel.id = this.panelId
|
||||||
this.filter.panelId = this.panelId
|
this.filter.panelId = this.panelId
|
||||||
})
|
})
|
||||||
this.initQueryFromPath(searchKeys)
|
|
||||||
if (this.nowTimeType.type) {
|
if (this.nowTimeType.type) {
|
||||||
this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
|
this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
|
||||||
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
|
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
|
||||||
|
|||||||
Reference in New Issue
Block a user