From e89fc78acac7b87b4e827ea14de3b1b1c8dcf370 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com> Date: Tue, 29 Nov 2022 17:21:01 +0800 Subject: [PATCH] =?UTF-8?q?CN-815:=20=E5=89=8D=E7=AB=AF=E5=86=85=E5=AD=98?= =?UTF-8?q?=E5=8D=A0=E7=94=A8=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/charts2/Panel.vue | 12 ++++++++---- .../charts2/charts/linkMonitor/LinkBlock.vue | 8 ++++++-- .../charts/linkMonitor/LinkDirectionGrid.vue | 2 +- .../charts/linkMonitor/LinkTrafficSankey.vue | 16 ++++++++++++++++ .../networkOverview/NetworkOverviewApps.vue | 2 ++ .../networkOverview/NetworkOverviewLine.vue | 17 ++++++++++++++++- .../NetworkOverviewPerformanceEvent.vue | 2 ++ .../networkOverview/NetworkOverviewTabs.vue | 19 +++++++++++++++++++ .../charts2/charts/npm/NpmEventsByType.vue | 2 ++ src/views/charts2/charts/npm/NpmLine.vue | 1 + .../charts2/charts/npm/NpmNetworkQuantity.vue | 12 +++++++++--- .../charts2/charts/npm/NpmTrafficLine.vue | 1 + 12 files changed, 83 insertions(+), 11 deletions(-) diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue index a72ec522..43555961 100644 --- a/src/views/charts2/Panel.vue +++ b/src/views/charts2/Panel.vue @@ -109,7 +109,7 @@ export default { // } // } timeFilter: { - handler (n) { + handler () { if (this.$route.path === '/panel/networkAppPerformance' && (this.queryCondition || this.networkOverviewBeforeTab)) { this.scoreCalculation() } @@ -120,7 +120,7 @@ export default { // this.panelName = this.$store.getters.getPanelName const pName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : '' const curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null - if(this.$route.params.typeName === fromRoute.dnsServiceInsights) { + if (this.$route.params.typeName === fromRoute.dnsServiceInsights) { this.dnsQtypeMapData = await getDnsMapData('dnsQtype') this.dnsRcodeMapData = await getDnsMapData('dnsRcode') this.$store.commit('setDnsQtypeMapData', this.dnsQtypeMapData) @@ -200,7 +200,7 @@ export default { this.scoreCalculation() } }, - setup (props, ctx) { + setup (props) { // todo 目前在panel页面测试，后续会挪到router里 const store = useStore() const cancelList = store.state.panel.httpCancel @@ -359,7 +359,7 @@ export default { } else { condition = this.queryCondition } - let type = this.dimensionType || this.networkOverviewBeforeTab + const type = this.dimensionType || this.networkOverviewBeforeTab const params = { startTime: getSecond(this.timeFilter.startTime), endTime: getSecond(this.timeFilter.endTime), @@ -428,6 +428,10 @@ export default { routerObj.query = query } } + + this.emitter.off('reloadChartList') + this.$store = null + this.emitter = null } } diff --git a/src/views/charts2/charts/linkMonitor/LinkBlock.vue b/src/views/charts2/charts/linkMonitor/LinkBlock.vue index acbcf086..dcdebdf6 100644 --- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue +++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue @@ -154,7 +154,7 @@ export default { }, watch: { timeFilter: { - handler (n) { + handler () { this.init() } } @@ -167,7 +167,8 @@ export default { init () { this.toggleLoading(true) // 链路基本信息 - let linkInfo = localStorage.getItem(storageKey.linkInfo) + let linkInfo = null + linkInfo = localStorage.getItem(storageKey.linkInfo) linkInfo = JSON.parse(linkInfo) const params = { startTime: getSecond(this.timeFilter.startTime), @@ -383,6 +384,9 @@ export default { return newValue } + }, + beforeUnmount () { + this.unitConvert = null } } diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue index a25c24ca..a3d040c7 100644 --- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue +++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue @@ -220,7 +220,7 @@ export default { this.nextGridData = nextGridData } } else { - this.isNextNoData = true + this.isNextNoData = false this.isNextShowError = true this.nextErrorMsg = res[1].message } diff --git a/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue b/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue index 01d337e1..0da46a0b 100644 --- a/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue +++ b/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue @@ -428,6 +428,9 @@ export default { } }, mounted () { + this.myChart = null + this.myChart2 = null + this.chartOption = null this.timer = setTimeout(() => { this.linkTrafficSankeyDataRequest(this.tab) }, 100) @@ -436,6 +439,19 @@ export default { beforeUnmount () { clearTimeout(this.timer) window.removeEventListener('resize', this.resize) + if (this.myChart) { + this.myChart.dispose() + // 避免不能生效 + this.myChart = null + } + if (this.myChart2) { + this.myChart2.dispose() + this.myChart2 = null + } + this.chartOption = null + + this.cnLinkInfo = null + this.unitConvert = null } } diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue index 85ebc24b..be0ea2aa 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue @@ -737,6 +737,8 @@ export default { window.removeEventListener('resize', this.resize) clearTimeout(this.timerScroll) clearTimeout(this.timerSearch) + this.myChart = null + this.unitConvert = null } } diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue index 73fd5901..612bc0b0 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue @@ -388,7 +388,11 @@ export default { // 此处为验证是否因dom未销毁，导致图表出错，后续可能会改 let dom = null dom = document.getElementById('overviewLineChart') - this.myChart = null + // this.myChart = null + if (this.myChart) { + this.myChart.dispose() + this.myChart = null + } this.myChart = echarts.init(dom) this.chartOption = stackedLineChartOption const chartOption = this.chartOption.series[0] @@ -673,6 +677,8 @@ export default { mounted () { // todo 初始化鼠标事件，开启右键返回 // this.domInit() + this.myChart = null + this.chartOption = null this.timer = setTimeout(() => { if (this.lineTab) { const data = this.mpackets.find(t => t.class === this.lineTab) @@ -688,6 +694,15 @@ export default { beforeUnmount () { clearTimeout(this.timer) window.removeEventListener('resize', this.resize) + + let myChart = echarts.getInstanceByDom(document.getElementById('overviewLineChart')) + if (myChart) { + echarts.dispose(myChart) + } + this.myChart = null + // 检测时发现该方法占用较大内存，且未被释放 + this.unitConvert = null + myChart = null } } diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue index 9a5c7818..378dd35b 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue @@ -193,6 +193,8 @@ export default { beforeUnmount () { clearTimeout(this.timer) window.removeEventListener('resize', this.resize) + this.myChart = null + this.myChart2 = null } } diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue index d6bab219..91e62279 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue @@ -1770,6 +1770,13 @@ export default { }, async mounted () { console.log('mounted start...') + this.list = null + this.tabList = null + this.allList = null + this.drillDownTableConfigs = null + this.curTable = null + this.commonColumnList = null + this.userId = localStorage.getItem(storageKey.userId) this.drillDownTableConfigs = await combinDrilldownTableWithUserConfig() this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' @@ -1854,6 +1861,18 @@ export default { }, setup (props) { }, + beforeUnmount () { + // 以下元素，检测到内存并未释放 + this.list = null + this.tabList = null + this.allList = null + this.drillDownTableConfigs = null + this.curTable = null + this.commonColumnList = null + this.networkTable = null + this.tableData = null + this.tableDataBackup = null + }, unmounted () { this.isNoData = false } diff --git a/src/views/charts2/charts/npm/NpmEventsByType.vue b/src/views/charts2/charts/npm/NpmEventsByType.vue index 960576c3..d9578ab5 100644 --- a/src/views/charts2/charts/npm/NpmEventsByType.vue +++ b/src/views/charts2/charts/npm/NpmEventsByType.vue @@ -154,6 +154,8 @@ export default { beforeUnmount () { clearTimeout(this.timer) window.removeEventListener('resize', this.resize) + this.myChart = null + this.chartOption = null } } diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue index 50cd5555..cdc0f596 100644 --- a/src/views/charts2/charts/npm/NpmLine.vue +++ b/src/views/charts2/charts/npm/NpmLine.vue @@ -331,6 +331,7 @@ export default { beforeUnmount () { clearTimeout(this.timer) window.removeEventListener('resize', this.resize) + this.myChart = null } } diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue index 11ee0aa3..9dd2c532 100644 --- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue +++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue @@ -50,7 +50,9 @@ export default { npmNetworkLastCycleData: [], npmNetworkData: [], side: '', - chartData: {} + chartData: {}, + timer1: null, + timer2: null } }, watch: { @@ -179,7 +181,7 @@ export default { if (timer) { clearTimeout(timer) } - timer = setTimeout(() => { + this.timer1 = setTimeout(() => { this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0) }, 300) }).catch((e) => { @@ -188,7 +190,7 @@ export default { clearTimeout(timer) } this.npmNetworkLastCycleData = [e] - timer = setTimeout(() => { + this.timer2 = setTimeout(() => { this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0) }, 300) }).finally(() => { @@ -276,6 +278,10 @@ export default { this.chartData = _.cloneDeep(this.chart) } this.npmNetworkCycleQuery() + }, + beforeUnmount () { + clearTimeout(this.timer1) + clearTimeout(this.timer2) } } diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue index 9cd7d34d..3bb951df 100644 --- a/src/views/charts2/charts/npm/NpmTrafficLine.vue +++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue @@ -666,6 +666,7 @@ export default { beforeUnmount () { clearTimeout(this.timer) window.removeEventListener('resize', this.resize) + this.myChart = null } }