fix:修改dashboards 加载的逻辑

This commit is contained in:
zhangyu
2022-07-07 10:11:21 +08:00
parent ad82c7db89
commit ffe63fe844
4 changed files with 43 additions and 19 deletions

View File

@@ -78,6 +78,7 @@
<panel-chart <panel-chart
:ref="'chart-fullscreen' + fullscreen.chartInfo.id" :ref="'chart-fullscreen' + fullscreen.chartInfo.id"
:chart-info="fullscreen.chartInfo" :chart-info="fullscreen.chartInfo"
:variablesInit="variablesInit"
:from="from" :from="from"
:filter="filter" :filter="filter"
:is-fullscreen="true" :is-fullscreen="true"
@@ -121,6 +122,10 @@ export default {
default: () => { default: () => {
return {} return {}
} }
},
variablesInit: {
type: Boolean,
default: true
} }
}, },
components: { components: {

View File

@@ -97,6 +97,10 @@ export default {
}, },
dataJson: { // 导出的html的数据 dataJson: { // 导出的html的数据
type: Object type: Object
},
variablesInit: {
type: Boolean,
default: true
} }
}, },
data () { data () {
@@ -148,6 +152,9 @@ export default {
}, },
// 参数 isRefresh 标识是否是刷新操作 // 参数 isRefresh 标识是否是刷新操作
getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数 getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
if (!this.variablesInit) { // 变量未加载完成 不请求数据
return
}
this.chartData = [] this.chartData = []
this.myVariables = [] this.myVariables = []
this.loading = true this.loading = true

View File

@@ -617,11 +617,12 @@ export default {
// getTopology(this.topologyIndex).fitView(30) // getTopology(this.topologyIndex).fitView(30)
}, },
shrink (n) { shrink (n) {
setTimeout(() => { const timer = setTimeout(() => {
const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect() const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
getTopology(this.topologyIndex).canvasPos = domRect getTopology(this.topologyIndex).canvasPos = domRect
getTopology(this.topologyIndex).resize() getTopology(this.topologyIndex).resize()
getTopology(this.topologyIndex).centerView() getTopology(this.topologyIndex).centerView()
clearTimeout(timer)
}, 500) }, 500)
} }
}, },
@@ -722,16 +723,18 @@ export default {
getTopology(this.topologyIndex).resize() getTopology(this.topologyIndex).resize()
getTopology(this.topologyIndex).centerView() getTopology(this.topologyIndex).centerView()
this.penToolTipScale = getTopology(this.topologyIndex).data.scale this.penToolTipScale = getTopology(this.topologyIndex).data.scale
setTimeout(() => { const timer = setTimeout(() => {
getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens.forEach(item => { getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens.forEach(item => {
if (item.animatePlay) { if (item.animatePlay) {
item.stopAnimate() item.stopAnimate()
setTimeout(() => { const timer1 = setTimeout(() => {
item.startAnimate() item.startAnimate()
clearTimeout(timer1)
}) })
} }
}, 100)
}) })
clearTimeout(timer)
}, 100)
// if(this.fromPrev){ // if(this.fromPrev){
// getTopology(this.topologyIndex).scaleTo(data.scale/2) // getTopology(this.topologyIndex).scaleTo(data.scale/2)
// } // }
@@ -777,6 +780,7 @@ export default {
if (!document.getElementById('topology-canvas' + this.topologyIndexF)) { if (!document.getElementById('topology-canvas' + this.topologyIndexF)) {
return return
} }
data = this.$loadsh.cloneDeep(data)
if (!getTopology(this.topologyIndex)) { if (!getTopology(this.topologyIndex)) {
let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions) let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
canvas.open(data) canvas.open(data)
@@ -1133,8 +1137,9 @@ export default {
this.popDataShowUpdate('', false, node) this.popDataShowUpdate('', false, node)
return return
} }
setTimeout(() => { const timer = setTimeout(() => {
this.popDataShowUpdate(tool.id, false, node) this.popDataShowUpdate(tool.id, false, node)
clearTimeout(timer)
}, 100) }, 100)
}, },
@@ -1166,8 +1171,9 @@ export default {
/* topology 方法 */ /* topology 方法 */
onDrag (event, node) { onDrag (event, node) {
this.dragFlag = false this.dragFlag = false
setTimeout(() => { const timer = setTimeout(() => {
this.dragFlag = true this.dragFlag = true
clearTimeout(timer)
}, 100) }, 100)
event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } })) event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
}, },
@@ -1182,8 +1188,9 @@ export default {
}, },
data: { imageId: node.data.imageId } data: { imageId: node.data.imageId }
}) })
setTimeout(() => { const timer = setTimeout(() => {
this.dragFlag = true this.dragFlag = true
clearTimeout(timer)
}, 100) }, 100)
}, },
@@ -1305,7 +1312,7 @@ export default {
} }
this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) } this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
this.tooltipPosition.show = false this.tooltipPosition.show = false
setTimeout(() => { const timer = setTimeout(() => {
this.tooltipPosition.show = true this.tooltipPosition.show = true
let ePosition = window.ePosition let ePosition = window.ePosition
let boxWidth = document.getElementsByClassName('page')[0].offsetWidth let boxWidth = document.getElementsByClassName('page')[0].offsetWidth
@@ -1329,6 +1336,7 @@ export default {
boxWidth = null boxWidth = null
boxHeight = null boxHeight = null
}) })
clearTimeout(timer)
}, 100) }, 100)
break break
case 'moveOutNode': case 'moveOutNode':
@@ -1350,7 +1358,7 @@ export default {
break break
} }
// 右侧输入框编辑状态时点击编辑区域其他元素onMessage执行后才执行onUpdateProps方法通过setTimeout让onUpdateProps先执行 // 右侧输入框编辑状态时点击编辑区域其他元素onMessage执行后才执行onUpdateProps方法通过setTimeout让onUpdateProps先执行
setTimeout(() => { const timer = setTimeout(() => {
switch (event) { switch (event) {
case 'node': case 'node':
case 'addNode': case 'addNode':
@@ -1534,6 +1542,7 @@ export default {
// } // }
break break
} }
clearTimeout(timer)
}, 0) }, 0)
}, },
@@ -1892,7 +1901,7 @@ export default {
this.showNoData = false this.showNoData = false
this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen)) this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
this.$store.commit('setShowTopoScreen', true) this.$store.commit('setShowTopoScreen', true)
setTimeout(() => { const timer = setTimeout(() => {
getTopology(this.topologyIndex).lock(0) getTopology(this.topologyIndex).lock(0)
getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
if (item.animatePlay) { if (item.animatePlay) {
@@ -1939,6 +1948,7 @@ export default {
const dom = document.getElementById('topology-canvas' + this.topologyIndexF) const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
const domRect = dom ? dom.getBoundingClientRect() : {} const domRect = dom ? dom.getBoundingClientRect() : {}
getTopology(this.topologyIndex).canvasPos = domRect getTopology(this.topologyIndex).canvasPos = domRect
clearTimeout(timer)
}) })
}, },
@@ -2143,7 +2153,7 @@ export default {
/* tools 方法 */ /* tools 方法 */
winResize () { winResize () {
setTimeout(() => { const timer = setTimeout(() => {
let domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect() let domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
getTopology(this.topologyIndex).canvasPos = domRect getTopology(this.topologyIndex).canvasPos = domRect
if (this.fromOverView) { if (this.fromOverView) {
@@ -2168,6 +2178,7 @@ export default {
getTopology(this.topologyIndex).centerView() getTopology(this.topologyIndex).centerView()
this.getNodesArr() this.getNodesArr()
domRect = null domRect = null
clearTimeout(timer)
}, 500) }, 500)
}, },
contextmenuNone () { contextmenuNone () {

View File

@@ -94,6 +94,7 @@
<panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables> <panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
<chart-list <chart-list
ref="chartList" ref="chartList"
:variablesInit="variablesInit"
name="panel" name="panel"
:panelId="showPanel.id" :panelId="showPanel.id"
:class="{'show-top':showTopBtn, 'is-dashboard': true}" :class="{'show-top':showTopBtn, 'is-dashboard': true}"
@@ -673,7 +674,7 @@ export default {
this.filter.value = this.searchTime[2] this.filter.value = this.searchTime[2]
this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
// this.getTableData() // this.getTableData()
this.variablesInit && this.getData(this.filter) this.getData(this.filter)
const param = { const param = {
panelId: this.panelId, panelId: this.panelId,
nowTimeType: JSON.stringify(this.nowTimeType), nowTimeType: JSON.stringify(this.nowTimeType),
@@ -753,7 +754,7 @@ export default {
if (!this.showPanel.id) { if (!this.showPanel.id) {
this.showPanel = response.data.list[0] this.showPanel = response.data.list[0]
this.filter.panelId = this.showPanel.id this.filter.panelId = this.showPanel.id
this.variablesInit && this.getData(this.filter) this.getData(this.filter)
isInitData = true isInitData = true
} else { } else {
handler(response.data.list) handler(response.data.list)
@@ -767,7 +768,7 @@ export default {
} }
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) { if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
this.variablesInit && this.getData(this.filter) this.getData(this.filter)
} }
this.$store.state.showPanel.id = 0 this.$store.state.showPanel.id = 0
this.$store.state.showPanel.name = '' this.$store.state.showPanel.name = ''
@@ -1029,7 +1030,7 @@ export default {
}, },
getPanelData () { getPanelData () {
this.variablesInit = true this.variablesInit = true
this.getData(this.filter) this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
} }
}, },
created () { created () {