fix ： 修改 topo图 预览没有动画的问题
This commit is contained in:
zhangyu
@@ -646,105 +646,107 @@ export default {
|
||||
this.topologyLoading = true
|
||||
this.getTopologyData().then((data) => {
|
||||
this.openTopologyData(data).then(() => {
|
||||
// 获取对应的值 给节点 连线添加对应动画
|
||||
this.lineName = data.lineName ? data.lineName : this.lineName
|
||||
this.chartGetData = []
|
||||
const axiosArr = []
|
||||
const promiseArr = []
|
||||
const self = this
|
||||
const pensPromise = (pen, arr, index) => {
|
||||
return new Promise(function (resolve, reject) {
|
||||
Promise.all(arr).then((res) => {
|
||||
self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
|
||||
self.setAnimation(pen, self.chartGetData[index].res)
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
const panelTime = localStorage.getItem('panelTime') ? JSON.parse(localStorage.getItem('panelTime')) : ['', '']
|
||||
const endTime = panelTime[1] || this.filterTime[1]
|
||||
const startTime = panelTime[0] || this.filterTime[0]
|
||||
const step = bus.getStep(startTime, endTime)
|
||||
data.pens && data.pens.forEach((item, index) => {
|
||||
this.chartGetData.push({ id: item.id, res: [] })
|
||||
let arr = []
|
||||
if (item.data.valueMappingShow) {
|
||||
arr = item.data.expressArr.map((ele) => {
|
||||
let query = ele
|
||||
if (!query) {
|
||||
return new Promise(resolve => {
|
||||
resolve({ data: '', status: 'no query' })
|
||||
})
|
||||
}
|
||||
query += '&nullType=' + 'connected'
|
||||
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
|
||||
})
|
||||
}
|
||||
axiosArr.push({ item, arr })
|
||||
promiseArr.push(pensPromise(item, arr, index))
|
||||
})
|
||||
if (this.fromTopologyDialog && !this.isPreview) {
|
||||
setTimeout(() => {
|
||||
this.topologyLoading = false
|
||||
getTopology(this.topologyIndex).open(data)
|
||||
getTopology(this.topologyIndex).centerView()
|
||||
getTopology(this.topologyIndex).resize()
|
||||
this.editTopology()
|
||||
}, 100)
|
||||
} else {
|
||||
Promise.all(promiseArr).then((res) => {
|
||||
getTopology(this.topologyIndex).open(data)
|
||||
getTopology(this.topologyIndex).lock(1)
|
||||
this.objChange = false
|
||||
let flag = false
|
||||
const position = {
|
||||
x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
|
||||
y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
|
||||
}
|
||||
this.oldScale = getTopology(this.topologyIndex).data.scale
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item => {
|
||||
if (flag) {
|
||||
return
|
||||
}
|
||||
if (item.rect.ex > position.x || item.rect.ey > position.y) {
|
||||
if (this.fromOverView) {
|
||||
getTopology(this.topologyIndex).fitView(20)
|
||||
}
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
getTopology(this.topologyIndex).resize()
|
||||
getTopology(this.topologyIndex).centerView()
|
||||
if (this.fromChartBox || this.fromChart) { // 是否来自panel 和 chartBox
|
||||
getTopology(this.topologyIndex).fitView(20)
|
||||
if (this.chartInfo && this.chartInfo.param && this.chartInfo.param.lock) { // 判断节点 以及画布 是否可以拖动
|
||||
getTopology(this.topologyIndex).lock(2)
|
||||
}
|
||||
}
|
||||
this.topologyLoading = false
|
||||
this.penToolTipScale = getTopology(this.topologyIndex).data.scale
|
||||
setTimeout(() => {
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item => {
|
||||
if (item.animatePlay) {
|
||||
item.stopAnimate()
|
||||
setTimeout(() => {
|
||||
item.startAnimate()
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
// if(this.fromPrev){
|
||||
// getTopology(this.topologyIndex).scaleTo(data.scale/2)
|
||||
// }
|
||||
// getTopology(this.topologyIndex).fitView();
|
||||
this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
|
||||
this.getNodesArr()
|
||||
})
|
||||
}
|
||||
this.initPens(data)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
initPens (data) {
|
||||
// 获取对应的值 给节点 连线添加对应动画
|
||||
this.lineName = data.lineName ? data.lineName : this.lineName
|
||||
this.chartGetData = []
|
||||
const axiosArr = []
|
||||
const promiseArr = []
|
||||
const self = this
|
||||
const pensPromise = (pen, arr, index) => {
|
||||
return new Promise(function (resolve, reject) {
|
||||
Promise.all(arr).then((res) => {
|
||||
self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
|
||||
self.setAnimation(pen, self.chartGetData[index].res)
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
const panelTime = localStorage.getItem('panelTime') ? JSON.parse(localStorage.getItem('panelTime')) : ['', '']
|
||||
const endTime = panelTime[1] || this.filterTime[1]
|
||||
const startTime = panelTime[0] || this.filterTime[0]
|
||||
const step = bus.getStep(startTime, endTime)
|
||||
data.pens && data.pens.forEach((item, index) => {
|
||||
this.chartGetData.push({ id: item.id, res: [] })
|
||||
let arr = []
|
||||
if (item.data.valueMappingShow) {
|
||||
arr = item.data.expressArr.map((ele) => {
|
||||
let query = ele
|
||||
if (!query) {
|
||||
return new Promise(resolve => {
|
||||
resolve({ data: '', status: 'no query' })
|
||||
})
|
||||
}
|
||||
query += '&nullType=' + 'connected'
|
||||
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
|
||||
})
|
||||
}
|
||||
axiosArr.push({ item, arr })
|
||||
promiseArr.push(pensPromise(item, arr, index))
|
||||
})
|
||||
if (this.fromTopologyDialog && !this.isPreview) {
|
||||
setTimeout(() => {
|
||||
this.topologyLoading = false
|
||||
getTopology(this.topologyIndex).open(data)
|
||||
getTopology(this.topologyIndex).centerView()
|
||||
getTopology(this.topologyIndex).resize()
|
||||
this.editTopology()
|
||||
}, 100)
|
||||
} else {
|
||||
Promise.all(promiseArr).then((res) => {
|
||||
getTopology(this.topologyIndex).open(data)
|
||||
getTopology(this.topologyIndex).lock(1)
|
||||
this.objChange = false
|
||||
let flag = false
|
||||
const position = {
|
||||
x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
|
||||
y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
|
||||
}
|
||||
this.oldScale = getTopology(this.topologyIndex).data.scale
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item => {
|
||||
if (flag) {
|
||||
return
|
||||
}
|
||||
if (item.rect.ex > position.x || item.rect.ey > position.y) {
|
||||
if (this.fromOverView) {
|
||||
getTopology(this.topologyIndex).fitView(20)
|
||||
}
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
getTopology(this.topologyIndex).resize()
|
||||
getTopology(this.topologyIndex).centerView()
|
||||
if (this.fromChartBox || this.fromChart) { // 是否来自panel 和 chartBox
|
||||
getTopology(this.topologyIndex).fitView(20)
|
||||
if (this.chartInfo && this.chartInfo.param && this.chartInfo.param.lock) { // 判断节点 以及画布 是否可以拖动
|
||||
getTopology(this.topologyIndex).lock(2)
|
||||
}
|
||||
}
|
||||
this.topologyLoading = false
|
||||
this.penToolTipScale = getTopology(this.topologyIndex).data.scale
|
||||
setTimeout(() => {
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item => {
|
||||
if (item.animatePlay) {
|
||||
item.stopAnimate()
|
||||
setTimeout(() => {
|
||||
item.startAnimate()
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
// if(this.fromPrev){
|
||||
// getTopology(this.topologyIndex).scaleTo(data.scale/2)
|
||||
// }
|
||||
// getTopology(this.topologyIndex).fitView();
|
||||
this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
|
||||
this.getNodesArr()
|
||||
})
|
||||
}
|
||||
},
|
||||
dateChange () {
|
||||
// const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
// this.setSearchTime(nowTimeType.type, nowTimeType.value)
|
||||
@@ -818,12 +820,22 @@ export default {
|
||||
this.topologyInfo.name = ''
|
||||
resolve(data)
|
||||
} else {
|
||||
this.topologyInfo = {
|
||||
fontSize: data.data.fontSize,
|
||||
align: data.data.align,
|
||||
fontColor: data.data.fontColor,
|
||||
opacity: data.data.opacity,
|
||||
name: data.name
|
||||
if (data.data) {
|
||||
this.topologyInfo = {
|
||||
fontSize: data.data.fontSize,
|
||||
align: data.data.align,
|
||||
fontColor: data.data.fontColor,
|
||||
opacity: data.data.opacity,
|
||||
name: data.name
|
||||
}
|
||||
} else {
|
||||
this.topologyInfo = {
|
||||
fontSize: 14,
|
||||
align: 'left',
|
||||
fontColor: '#000000',
|
||||
opacity: 1,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
if (this.fromOverView || this.fromChartBox) { // 优化从首页来的加载速度
|
||||
const arr = data.pens.filter(item => !item.type)
|
||||
@@ -1910,6 +1922,8 @@ export default {
|
||||
index: 0,
|
||||
list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
|
||||
}
|
||||
const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
|
||||
getTopology(this.topologyIndex).canvasPos = domRect
|
||||
}, 100)
|
||||
},
|
||||
|
||||
@@ -2032,6 +2046,7 @@ export default {
|
||||
getTopology(this.topologyIndex).lock(1)
|
||||
const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
|
||||
getTopology(this.topologyIndex).canvasPos = domRect
|
||||
this.initPens(topologyData)
|
||||
// this.reload()
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user