From 65ef32adee80cfa8b90690903c33ec8612821ee0 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Wed, 24 Aug 2022 17:09:42 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E5=9B=BE?= =?UTF-8?q?=E8=A1=A8=E5=88=B7=E6=96=B0=E5=8F=8D=E9=A6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts/networkOverview/NetworkOverviewLine.vue | 4 +++- src/views/charts2/charts/npm/NpmAppCategoryScore.vue | 1 + src/views/charts2/charts/npm/NpmIpMap.vue | 9 +++++++++ src/views/charts2/charts/npm/NpmLine.vue | 10 +++++++++- src/views/charts2/charts/npm/NpmNetworkQuantity.vue | 10 ++++++++++ src/views/charts2/charts/npm/NpmRecentEvents.vue | 8 ++++++++ src/views/charts2/charts/npm/NpmTrafficLine.vue | 12 +++++++++++- src/views/charts2/charts/npm/RelatedSessions.vue | 8 ++++++++ 8 files changed, 59 insertions(+), 3 deletions(-) diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue index 63ef5fe3..ae738728 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue @@ -255,7 +255,9 @@ export default { const _this = this echartsData = echartsData.filter(t => t.show === true) const dom = document.getElementById('chart') - this.myChart = echarts.init(dom) + if (!this.myChart) { + this.myChart = echarts.init(dom) + } this.chartOption = stackedLineChartOption const chartOption = this.chartOption.series[0] this.chartOption.series = echartsData.map((t, i) => { diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue index a0329f58..e905af60 100644 --- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue +++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue @@ -145,6 +145,7 @@ export default { // 获取table后三列内容 const currentTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 0 }) const lastCycleTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 1 }) + this.toggleLoading(true) Promise.all([currentTrafficRequest, lastCycleTrafficRequest]).then(res => { const prevData = res[1].data.result const data = res[0].data.result diff --git a/src/views/charts2/charts/npm/NpmIpMap.vue b/src/views/charts2/charts/npm/NpmIpMap.vue index 085ce68c..fb556b3e 100644 --- a/src/views/charts2/charts/npm/NpmIpMap.vue +++ b/src/views/charts2/charts/npm/NpmIpMap.vue @@ -29,6 +29,14 @@ export default { } }, mixins: [chartMixin], + watch: { + timeFilter: { + deep: true, + handler (n) { + this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries) + } + } + }, methods: { async initMap () { // 初始化插件 @@ -102,6 +110,7 @@ export default { t.score = 6 } }) + console.info(mapData) this.loadMarkerData(imageSeries, mapData) }) }).finally(() => { diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue index e236b8d4..8ea952fb 100644 --- a/src/views/charts2/charts/npm/NpmLine.vue +++ b/src/views/charts2/charts/npm/NpmLine.vue @@ -105,6 +105,12 @@ export default { this.country = n this.init() } + }, + timeFilter: { + deep: true, + handler (n) { + this.init() + } } }, methods: { @@ -192,7 +198,9 @@ export default { echartsInit (data, chartData, type) { const dom = document.getElementById(`chart${chartData.name}`) if (dom) { - this.myChart = echarts.init(dom) + if (!this.myChart) { + this.myChart = echarts.init(dom) + } this.chartOption = npmLineChartOption const seriesTemplate = this.chartOption.series[0] this.chartOption.color = this.chartData.params.color diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue index a54985fa..0b460319 100644 --- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue +++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue @@ -35,6 +35,16 @@ export default { chartData: {} } }, + watch: { + timeFilter: { + deep: true, + handler (n) { + this.npmNetworkCycleData = [] + this.npmNetworkLastCycleData = [] + this.npmNetworkCycleQuery() + } + } + }, methods: { npmNetworkCycleQuery () { let condition = '' diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue index bd4c8a24..3e0aa02f 100644 --- a/src/views/charts2/charts/npm/NpmRecentEvents.vue +++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue @@ -62,6 +62,14 @@ export default { ] } }, + watch: { + timeFilter: { + deep: true, + handler (n) { + this.recentEventsListData() + } + } + }, methods: { recentEventsListData () { const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/) diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue index 2d2f9615..a8834d37 100644 --- a/src/views/charts2/charts/npm/NpmTrafficLine.vue +++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue @@ -50,6 +50,14 @@ export default { chartData: {} } }, + watch: { + timeFilter: { + deep: true, + handler (n) { + this.init() + } + } + }, methods: { init () { let condition = '' @@ -126,7 +134,9 @@ export default { }, echartsInit (echartsData) { const dom = document.getElementById(this.chartData.name) - this.myChart = echarts.init(dom) + if (!this.myChart) { + this.myChart = echarts.init(dom) + } this.chartOption = trafficLineChartOption const chartOption = this.chartOption.series[0] this.chartOption.series = echartsData.map((t, i) => { diff --git a/src/views/charts2/charts/npm/RelatedSessions.vue b/src/views/charts2/charts/npm/RelatedSessions.vue index e68f3baf..26b40a74 100644 --- a/src/views/charts2/charts/npm/RelatedSessions.vue +++ b/src/views/charts2/charts/npm/RelatedSessions.vue @@ -49,6 +49,14 @@ export default { serverSessions: 0 } }, + watch: { + timeFilter: { + deep: true, + handler (n) { + this.relatedSessionsData() + } + } + }, methods: { relatedSessionsData () { const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/) From 0d936feedbf15c1bd4554a10a25dfe7afaf0bb5f Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Wed, 24 Aug 2022 17:15:22 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9C=89=E6=97=B6?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=8F=9C=E5=8D=95=E5=90=8E=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E4=B8=8D=E6=94=B6=E5=9B=9E=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index a2e5ea2a..98dfe6ab 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -391,6 +391,7 @@ export default { }) }, jump (route, columnName, columnValue, opeType) { + this.showMenu = false if (opeType) { this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) this.$store.commit('setTabOperationType', opeType) @@ -463,7 +464,6 @@ export default { t: +new Date() } }) - this.showMenu = false }, dropDownSearch () { this.curPageNum = 1 From 3743e7520aedcb4f01bea84258d135cb0519ddca Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Wed, 24 Aug 2022 17:23:12 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dnpm=20location?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E4=B8=8B=E9=92=BBbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/charts2/charts/npm/NpmMap.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/views/charts2/charts/npm/NpmMap.vue b/src/views/charts2/charts/npm/NpmMap.vue index df087342..ad8db15f 100644 --- a/src/views/charts2/charts/npm/NpmMap.vue +++ b/src/views/charts2/charts/npm/NpmMap.vue @@ -290,8 +290,12 @@ export default { }, async location (n) { this.$store.commit('setNpmLocationCountry', n) - this.countrySeries.dispose() - this.countryImageSeries.dispose() + if (this.countrySeries) { + this.countrySeries.dispose() + } + if (this.countryImageSeries) { + this.countryImageSeries.dispose() + } if (n) { const countryId = countryNameIdMapping[n] await this.drill(countryId) From 0f26961bae8785412795f77c5b5dc4c4af98f574 Mon Sep 17 00:00:00 2001 From: hanyuxia Date: Wed, 24 Aug 2022 18:10:53 +0800 Subject: [PATCH 4/4] =?UTF-8?q?CN-668:=E4=BF=AE=E6=94=B9BUG=EF=BC=9A=20Can?= =?UTF-8?q?not=20read=20properties=20of=20null=20(reading=20'$el')?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/constants.js | 6 ++++-- .../charts2/charts/networkOverview/NetworkOverviewTabs.vue | 6 +++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/utils/constants.js b/src/utils/constants.js index 9b9b9ab8..6b1fc007 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -687,9 +687,11 @@ export const networkTable = { hasMetricSearch: false, // 是否有metric下拉列表 panelIdOfThirdMenu: drillDownPanelTypeMapping.npmThirdMenu, bytesColumnNameGroup: bytesColumnNameGroupForNpm, - bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp, packetsColumnNameGroup: {}, // 无metric下拉列表条件，用不到此属性 - sessionsColumnNameGroup: {}// 无metric下拉列表条件，用不到此属性 + sessionsColumnNameGroup: {},// 无metric下拉列表条件，用不到此属性 + bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp, + packetsCycleColumnNameGroup: {}, + sessionsCycleColumnNameGroup: {} } } diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue index 73bc5d2d..54770c9c 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue @@ -1008,7 +1008,6 @@ export default { // 当前表格相关数据初始化 this.tableType = this.chart.params ? this.chart.params.name : 'networkOverview' this.curTable = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview - this.hasMetricSearch = this.curTable.hasMetricSearch this.customTableTitles = this.$_.cloneDeep(this.curTable.column) this.list = this.$_.cloneDeep(this.curTable.tabList) this.networkTabList = this.curTable.tabList @@ -1043,6 +1042,11 @@ export default { }) }) } + this.$nextTick(() => { + setTimeout(() => { + this.hasMetricSearch = this.curTable.hasMetricSearch + }, 250) + }) }, setup (props) {}, unmounted () {