From 25102995400db8144b085a0b632c2f0bf41dd982 Mon Sep 17 00:00:00 2001 From: hanyuxia Date: Tue, 20 Sep 2022 11:44:39 +0800 Subject: [PATCH] =?UTF-8?q?CN-700=20=E7=95=8C=E9=9D=A2=E5=88=B7=E6=96=B0?= =?UTF-8?q?=E4=BF=9D=E6=8C=81=E7=8A=B6=E6=80=81-=E4=B8=8B=E9=92=BBtable?= =?UTF-8?q?=E7=AD=89=EF=BC=9AqueryCondition,type,panelName,thirdMenu,fourt?= =?UTF-8?q?hMenu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header.vue | 17 +++-- src/store/modules/panel.js | 28 +++---- src/utils/constants.js | 4 +- src/views/charts2/Panel.vue | 16 ++-- .../networkOverview/NetworkOverviewApps.vue | 14 +++- .../networkOverview/NetworkOverviewTabs.vue | 75 +++++++++++++------ .../charts/npm/NpmAppCategoryScore.vue | 6 +- 7 files changed, 108 insertions(+), 52 deletions(-) diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 6d0a5fd2..bacd2dea 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -390,8 +390,12 @@ export default { hideBreadcrumbPopover () { this.showBackground = false }, - getUrlParam (param, defaultValue) { - return this.$route.query[param] ? this.$route.query[param] : defaultValue + getUrlParam (param, defaultValue,isNumber) { + if(isNumber){ + return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue + }else { + return this.$route.query[param] ? this.$route.query[param] : defaultValue + } }, changeValue (value) { // 设置面包屑显示的内容及hover时的title @@ -457,10 +461,13 @@ 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) + //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) + //this.$store.commit('setTabOperationType', opeType) + this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true)) + this.changeUrlTabState(this.curTabState.tabOperationType, opeType) } else { - this.$store.commit('setTabOperationType', operationType.mainMenu) + //this.$store.commit('setTabOperationType', operationType.mainMenu) + this.changeUrlTabState(this.curTabState.tabOperationType, operationType.mainMenu) } if (!columnName) { // 点击第二级菜单 this.$store.commit('setNetworkOverviewTabList', []) diff --git a/src/store/modules/panel.js b/src/store/modules/panel.js index 1fd3c467..f8dfe945 100644 --- a/src/store/modules/panel.js +++ b/src/store/modules/panel.js @@ -45,8 +45,8 @@ const panel = { //networkOverviewBeforeTab: null, // 点击表格的值时使用，记录点击当前tab表格的值之前点击的表格值所属的tab // queryCondition: '', // 数据查询的条件 networkOverviewTabList: [], // 存储tab列表的一些状态：如是否选中 - tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize - tabOperationBeforeType: 0, // 记录上次的操作类型 + //tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize + //tabOperationBeforeType: 0, // 记录上次的操作类型 npmThirdLevelMenuScore: null, // npm overview 第三级菜单的panel分数 npmLocationCountry: '', // npm location的查询条件--国家 npmLocationSide: 'server' // npm location的查询条件--方向 @@ -121,15 +121,15 @@ const panel = { setNetworkOverviewTabList (state, networkOverviewTabList) { state.networkOverviewTabList = networkOverviewTabList }, - setTabOperationType (state, tabOperationType) { - state.tabOperationType = tabOperationType - }, + //setTabOperationType (state, tabOperationType) { + //state.tabOperationType = tabOperationType + //}, //setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) { //state.networkOverviewBeforeTab = networkOverviewBeforeTab //}, - setTabOperationBeforeType (state, tabOperationBeforeType) { - state.tabOperationBeforeType = tabOperationBeforeType - }, + //setTabOperationBeforeType (state, tabOperationBeforeType) { + //state.tabOperationBeforeType = tabOperationBeforeType + //}, setNpmLocationCountry (state, country) { state.npmLocationCountry = country }, @@ -204,15 +204,15 @@ const panel = { getNetworkOverviewTabList (state) { return state.networkOverviewTabList }, - getTabOperationType (state) { - return state.tabOperationType - }, + //getTabOperationType (state) { + //return state.tabOperationType + //}, //getNetworkOverviewBeforeTab (state) { //return state.networkOverviewBeforeTab //}, - getTabOperationBeforeType (state) { - return state.tabOperationBeforeType - }, + //getTabOperationBeforeType (state) { + //return state.tabOperationBeforeType + //}, getNpmLocationCountry (state) { return state.npmLocationCountry }, diff --git a/src/utils/constants.js b/src/utils/constants.js index b73d0f44..b29364df 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -250,7 +250,9 @@ export const curTabState = { panelName: 'panelName', thirdMenu: 'thirdMenu', fourthMenu: 'fourthMenu', - networkOverviewBeforeTab: 'networkOverviewBeforeTab' + networkOverviewBeforeTab: 'networkOverviewBeforeTab', + tabOperationType:'tabOperationType', + tabOperationBeforeType:'tabOperationBeforeType' } export const scoreUrl = [ diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue index 179ca237..08c11af0 100644 --- a/src/views/charts2/Panel.vue +++ b/src/views/charts2/Panel.vue @@ -76,7 +76,8 @@ export default { npmThirdLevelMenuScore: { deep: true, handler (n) { - const curOperationType = this.$store.getters.getTabOperationType + //const curOperationType = this.$store.getters.getTabOperationType + const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true) if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单 this.score = n } @@ -86,7 +87,8 @@ export default { async mounted () { // this.panelName = this.$store.getters.getPanelName this.panelName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : '' - const curOperationType = this.$store.getters.getTabOperationType + //const curOperationType = this.$store.getters.getTabOperationType + const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true) if (this.panelName && this.$route.path === '/panel/networkAppPerformance' && curOperationType !== operationType.thirdMenu) { // const columnValue = this.$store.getters.getBreadcrumbColumnValue const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '') @@ -238,9 +240,13 @@ export default { this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter)) } }, - getUrlParam (param, defaultValue) { - return this.$route.query[param] ? this.$route.query[param] : defaultValue - } + getUrlParam (param, defaultValue,isNumber) { + if(isNumber){ + return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue + }else { + return this.$route.query[param] ? this.$route.query[param] : defaultValue + } + }, } } diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue index ea23610c..78f774d1 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue @@ -315,8 +315,12 @@ export default { } this.init() }, - getUrlParam (param, defaultValue) { - return this.$route.query[param] ? this.$route.query[param] : defaultValue + getUrlParam (param, defaultValue,isNumber) { + if(isNumber){ + return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue + }else { + return this.$route.query[param] ? this.$route.query[param] : defaultValue + } }, drillDownData (type, value) { let tabType = '' @@ -335,8 +339,10 @@ export default { //this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0]) this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop) } - this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) - this.$store.commit('setTabOperationType', operationType.fourthMenu) + //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) + //this.$store.commit('setTabOperationType', operationType.fourthMenu) + this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true)) + this.changeUrlTabState(this.curTabState.tabOperationType, operationType.fourthMenu) const queryCondition = [] const searchProps = tabGroup[0].dillDownProp diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue index f7775330..abfaad3e 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue @@ -328,6 +328,7 @@ export default { } }, initState () { + let curTab = this.getCurTab() // 没有选中任何tab时，默认选中第一个 const tabList = this.list.filter(item => item.checked === true) if (tabList.length === 0) { @@ -335,6 +336,13 @@ export default { this.showTab(this.list[0]) } else { //this.showTab(tabList[0]) + if (curTab) { // 显示当前tab + let realTab = this.list.find(item => item.label===curTab.label) + if(realTab){ + realTab.checked = true + } + this.showTab(curTab) + } } this.isNoData = false this.tableData = [] @@ -392,7 +400,6 @@ export default { } }) - let curTab = this.getCurTab() if (this.metric === 'Sessions/s') { this.columnNameGroup = this.curTable.sessionsColumnNameGroup this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup @@ -411,8 +418,10 @@ export default { ] } - const curOperationType = this.$store.getters.getTabOperationType - const beforeOperationType = this.$store.getters.getTabOperationBeforeType + //const curOperationType = this.$store.getters.getTabOperationType + //const beforeOperationType = this.$store.getters.getTabOperationBeforeType + const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true) + const beforeOperationType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '',true) if (curOperationType === operationType.changeTab) { // 切换tab if (curTab) { // tab切换 this.showTab(curTab) @@ -838,11 +847,14 @@ export default { this.tableDataBackup = [] // this.showRecordNum = 10 this.setShowNum(10) - const beforeType = this.$store.getters.getTabOperationBeforeType + //const beforeType = this.$store.getters.getTabOperationBeforeType + const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '',true) if (beforeType != operationType.thirdMenu) { - this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) + //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) + this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true)) } - this.$store.commit('setTabOperationType', operationType.changeMetric) + //this.$store.commit('setTabOperationType', operationType.changeMetric) + this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeMetric) const curTab = this.getCurTab() const label = curTab.label this.changeUrlTabState(this.curTabState.tableMetric, this.metric) @@ -956,11 +968,16 @@ export default { } }, getDefaultTab () { - let tabObjGroup = this.list.filter(item => item.checked) - if (tabObjGroup && tabObjGroup.length > 0) { - return tabObjGroup[0] + let curTab = this.getCurTab() + if(curTab){ + return curTab } else { - return tabObjGroup = this.networkTabList.filter(item => item.checked)[0] + let tabObjGroup = this.list.filter(item => item.checked) + if (tabObjGroup && tabObjGroup.length > 0) { + return tabObjGroup[0] + } else { + return tabObjGroup = this.networkTabList.filter(item => item.checked)[0] + } } }, // 隐藏tabs的标题 @@ -999,9 +1016,11 @@ export default { // 操作类型设置 const beforeType = this.$store.getters.getTabOperationBeforeType if (beforeType != operationType.thirdMenu) { - this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) + //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) + this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true)) } - this.$store.commit('setTabOperationType', operationType.customize) + //this.$store.commit('setTabOperationType', operationType.customize) + this.changeUrlTabState(this.curTabState.tabOperationType, operationType.customize) // 获得操作tab和当前选中的所有tab const handleTab = this.list[index] const tabList = this.list.filter(item => item.checked === true) @@ -1050,8 +1069,10 @@ export default { } }, setOperationType (operationType) { - this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) - this.$store.commit('setTabOperationType', operationType) + //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) + //this.$store.commit('setTabOperationType', operationType) + this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true)) + this.changeUrlTabState(this.curTabState.tabOperationType, operationType) }, getTabByLabel (label) { let tab = null @@ -1245,8 +1266,10 @@ export default { this.tableDataBackup = [] this.setShowNum(10) this.clearSort() - this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) - this.$store.commit('setTabOperationType', operationType.changeTab) + //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) + //this.$store.commit('setTabOperationType', operationType.changeTab) + this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true)) + this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeTab) this.customTableTitles[0].label = tab.paneName const tabObjGroup = this.list.filter(item => item.label == tab.paneName) @@ -1315,10 +1338,16 @@ export default { let queryType = '' // const name = this.$store.getters.getBreadcrumbColumnName const name = this.getUrlParam(this.curTabState.thirdMenu, '') - const curOperationType = this.$store.getters.getTabOperationType + //const curOperationType = this.$store.getters.getTabOperationType + const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true) if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单 - const checkedTab = this.list.find(item => item.checked) - queryType = checkedTab ? checkedTab.prop : '' + const curTab = this.getCurTab() + if(curTab){ + queryType = curTab.prop + } else { + const checkedTab = this.list.find(item => item.checked) + queryType = checkedTab ? checkedTab.prop : '' + } } else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单 const breadcrumbTab = this.list.find(item => item.label === name) queryType = breadcrumbTab ? breadcrumbTab.prop : '' @@ -1377,8 +1406,12 @@ export default { getQueryCondition () { return this.$route.query.queryCondition ? this.$route.query.queryCondition : '' }, - getUrlParam (param, defaultValue) { - return this.$route.query[param] ? this.$route.query[param] : defaultValue + getUrlParam (param, defaultValue,isNumber) { + if(isNumber){ + return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue + }else { + return this.$route.query[param] ? this.$route.query[param] : defaultValue + } }, // 获取当前tab getCurTab () { diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue index cb3dc5ae..7970a114 100644 --- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue +++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue @@ -267,8 +267,10 @@ export default { //this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0]) this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop) } - this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) - this.$store.commit('setTabOperationType', operationType.fourthMenu) + //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType) + //this.$store.commit('setTabOperationType', operationType.fourthMenu) + this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true)) + this.changeUrlTabState(this.curTabState.tabOperationType, operationType.fourthMenu) const queryCondition = [] const searchProps = tabGroup[0].dillDownProp