fix: 修改 group重叠下方chart 的bug 以及 点击菜单panel未跳第一个panel的问题

This commit is contained in:
zhangyu
2021-12-30 11:33:24 +08:00
parent 8b2e144e59
commit 45283f7084
9 changed files with 28 additions and 27 deletions

View File

@@ -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,13 +51,15 @@ export default {
}, },
initChart () { initChart () {
this.dataList = this.dataList.map(item => { setTimeout(() => {
return { this.dataList = this.dataList.map(item => {
...item, return {
// hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件 ...item,
loaded: true // hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
} loaded: true
}) }
})
}, 100)
} }
}, },
watch: { watch: {

View File

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

View File

@@ -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) {

View File

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

View File

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

View File

@@ -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) {

View File

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

View File

@@ -36,7 +36,12 @@ export default {
methods: { methods: {
refresh () { refresh () {
this.containerShow = false this.containerShow = false
this.$nextTick(() => { this.containerShow = true }) new Promise(resolve => {
this.$router.replace({ path: this.$route.path, query: {} })
resolve()
}).then(() => {
this.$nextTick(() => { this.containerShow = true })
})
} }
}, },
destroyed () { destroyed () {

View File

@@ -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')