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 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/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/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 () { 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/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) diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue index ec0b4031..9b9a493e 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 dbb9b37a..6c8ceafb 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(/["|'](.*?)["|']/)