fix:处理 topoLogy的缓存

This commit is contained in:
zhangyu
2022-07-13 15:35:56 +08:00
parent 878411720d
commit 739fa3e82f
2 changed files with 50 additions and 41 deletions

View File

@@ -1,11 +1,10 @@
<template> <template>
<div v-loading="topologyLoading" class="overview"> <div v-loading="topologyLoading" class="overview">
<transition name = "el-zoom-in-center">
<div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative"> <div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
<el-carousel :interval="5000" :trigger="'click'" arrow="hover"> <el-carousel :interval="5000" :trigger="'click'" arrow="hover">
<el-carousel-item v-for="(item,index) in allProject" :key="index"> <el-carousel-item v-for="(item,index) in allProject" :key="index">
<div class="maskLayer" @click="toProject(item)"></div> <div class="maskLayer" @click="toProject(item)"></div>
<!-- <span class="project-name">{{item.name}}</span>--> <!-- <span class="project-name">{{item.name}}</span>-->
<topology <topology
:fromOverView="true" :fromOverView="true"
:from-chart="true" :from-chart="true"
@@ -16,7 +15,6 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
</transition>
<div v-if="allProject.length===0" class="chart-no-data">No Data</div> <div v-if="allProject.length===0" class="chart-no-data">No Data</div>
</div> </div>
</template> </template>
@@ -46,7 +44,7 @@ export default {
this.isInit = false this.isInit = false
this.$get('monitor/project', { pageSize: -1 }).then(res => { this.$get('monitor/project', { pageSize: -1 }).then(res => {
this.topologyLoading = true this.topologyLoading = true
const axiosAll = [] let axiosAll = []
let temp = [] let temp = []
if (res.data.list.length === 0) { if (res.data.list.length === 0) {
this.topologyLoading = false this.topologyLoading = false
@@ -62,11 +60,13 @@ export default {
if (res2.length == 0) { if (res2.length == 0) {
this.topologyLoading = false this.topologyLoading = false
} }
res2.forEach(item => { // res2.forEach(item => {
temp.push(item) // temp.push(item)
}) // })
temp.push(res2[2])
this.allProject = JSON.parse(JSON.stringify(temp)) this.allProject = JSON.parse(JSON.stringify(temp))
temp = [] temp = null
axiosAll = null
this.topologyLoading = false this.topologyLoading = false
}) })
}) })

View File

@@ -640,6 +640,7 @@ export default {
canvasRegister() canvasRegister()
}, },
mounted () { mounted () {
console.log('mounted')
if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度 if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
this.addNodeInit() this.addNodeInit()
} }
@@ -2283,28 +2284,23 @@ export default {
this.timer4 = null this.timer4 = null
} }
if (getTopology(this.topologyIndex)) { if (getTopology(this.topologyIndex)) {
console.log(getTopology(this.topologyIndex))
// getTopology(this.topologyIndex).open({ pens: [] }) // getTopology(this.topologyIndex).open({ pens: [] })
getTopology(this.topologyIndex).off('contextmenu', this.onContextMenu) getTopology(this.topologyIndex).off('contextmenu', this.onContextMenu)
getTopology(this.topologyIndex).data.pens.forEach(item => { getTopology(this.topologyIndex).data.pens.forEach(item => {
item.img = null item.img = null
item.image = null item.image = null
item.lastImage = null item.lastImage = null
// item.initState.img = null
// item.state.img = null
}) })
getTopology(this.topologyIndex).activeLayer.data.pens.forEach(item => { getTopology(this.topologyIndex).activeLayer.data.pens.forEach(item => {
item.img = null item.img = null
item.image = null item.image = null
item.lastImage = null item.lastImage = null
// item.initState.img = null
// item.state.img = null
}) })
getTopology(this.topologyIndex).animateLayer.data.pens.forEach(item => { getTopology(this.topologyIndex).animateLayer.data.pens.forEach(item => {
item.img = null item.img = null
item.image = null item.image = null
item.lastImage = null item.lastImage = null
// item.initState.img = null
// item.state.img = null
}) })
getTopology(this.topologyIndex).caches.list.forEach((cache) => { getTopology(this.topologyIndex).caches.list.forEach((cache) => {
cache.pens.forEach(item => { cache.pens.forEach(item => {
@@ -2317,45 +2313,58 @@ export default {
item.img = null item.img = null
item.image = null item.image = null
item.lastImage = null item.lastImage = null
// item.initState.img = null
// item.state.img = null
}) })
getTopology(this.topologyIndex).canvas.data.pens.forEach(item => { getTopology(this.topologyIndex).canvas.data.pens.forEach(item => {
item.img = null item.img = null
item.image = null item.image = null
item.lastImage = null item.lastImage = null
// item.initState.img = null
// item.state.img = null
}) })
getTopology(this.topologyIndex).divLayer.data.pens.forEach(item => { getTopology(this.topologyIndex).divLayer.data.pens.forEach(item => {
item.img = null item.img = null
item.image = null item.image = null
item.lastImage = null item.lastImage = null
// item.initState.img = null
// item.state.img = null
}) })
getTopology(this.topologyIndex).hoverLayer.data.pens.forEach(item => { getTopology(this.topologyIndex).hoverLayer.data.pens.forEach(item => {
item.img = null item.img = null
item.image = null item.image = null
item.lastImage = null item.lastImage = null
// item.initState.img = null
// item.state.img = null
}) })
getTopology(this.topologyIndex).destroy() getTopology(this.topologyIndex).destroy()
const StoreData = le5leStore.get() const StoreData = le5leStore.get()
const arr = [] // const arr = []
Object.keys(StoreData).forEach(key => { Object.keys(StoreData).forEach(key => {
const id = key.split('-')[0] const id = key.split('-')[0]
arr.push(id) // arr.push(id)
if (getTopology(this.topologyIndex).id == id) { if (getTopology(this.topologyIndex).id == id) {
if (StoreData[key][0] && StoreData[key][0].img) {
StoreData[key].forEach(item => {
item.img = null
item.image = null
item.lastImage = null
})
}
if (StoreData[key] && StoreData[key].pens) {
StoreData[key].pens.forEach(item => {
item.img = null
item.image = null
item.lastImage = null
})
}
if (StoreData[key] && StoreData[key].data && StoreData[key].data.pens) {
StoreData[key].data.pens.forEach(item => {
item.img = null
item.image = null
item.lastImage = null
})
}
le5leStore.set(key, null) le5leStore.set(key, null)
delete StoreData[key] delete StoreData[key]
} }
}) })
console.log(le5leStore.get()) console.log(le5leStore.get())
Object.keys(getTopology(this.topologyIndex)).forEach(key => { // Object.keys(getTopology(this.topologyIndex)).forEach(key => {
getTopology(this.topologyIndex)[key] = null // getTopology(this.topologyIndex)[key] = null
}) // })
setTopology(this.topologyIndex, null) setTopology(this.topologyIndex, null)
} }
if (document.getElementById('topology-canvas' + this.topologyIndexF)) { if (document.getElementById('topology-canvas' + this.topologyIndexF)) {