CN-700 界面刷新保持状态-下钻table等：queryCondition,type,panelName,thirdMenu,fourthMenu

src/components/layout/Header.vue

@@ -390,8 +390,12 @@ export default {
     hideBreadcrumbPopover () {
       this.showBackground = false
     },
-    getUrlParam (param, defaultValue) {
+    getUrlParam (param, defaultValue,isNumber) {
-      return this.$route.query[param] ? this.$route.query[param] : defaultValue
+      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('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-        this.$store.commit('setTabOperationType', opeType)
+        //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', [])

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
+    //tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize
-    tabOperationBeforeType: 0, // 记录上次的操作类型
+    //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) {
+    //setTabOperationType (state, tabOperationType) {
-      state.tabOperationType = tabOperationType
+      //state.tabOperationType = tabOperationType
-    },
+    //},
     //setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) {
       //state.networkOverviewBeforeTab = networkOverviewBeforeTab
     //},
-    setTabOperationBeforeType (state, tabOperationBeforeType) {
+    //setTabOperationBeforeType (state, tabOperationBeforeType) {
-      state.tabOperationBeforeType = tabOperationBeforeType
+      //state.tabOperationBeforeType = tabOperationBeforeType
-    },
+    //},
     setNpmLocationCountry (state, country) {
       state.npmLocationCountry = country
     },
@@ -204,15 +204,15 @@ const panel = {
     getNetworkOverviewTabList (state) {
       return state.networkOverviewTabList
     },
-    getTabOperationType (state) {
+    //getTabOperationType (state) {
-      return state.tabOperationType
+      //return state.tabOperationType
-    },
+    //},
     //getNetworkOverviewBeforeTab (state) {
       //return state.networkOverviewBeforeTab
     //},
-    getTabOperationBeforeType (state) {
+    //getTabOperationBeforeType (state) {
-      return state.tabOperationBeforeType
+      //return state.tabOperationBeforeType
-    },
+    //},
     getNpmLocationCountry (state) {
       return state.npmLocationCountry
     },

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 = [

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) {
+    getUrlParam (param, defaultValue,isNumber) {
-      return this.$route.query[param] ? this.$route.query[param] : defaultValue
+      if(isNumber){
-    }
+        return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
+      }else {
+        return this.$route.query[param] ? this.$route.query[param] : defaultValue
+      }
+    },
   }
 }
 </script>

src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue

@@ -315,8 +315,12 @@ export default {
       }
       this.init()
     },
-    getUrlParam (param, defaultValue) {
+    getUrlParam (param, defaultValue,isNumber) {
-      return this.$route.query[param] ? this.$route.query[param] : defaultValue
+      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('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-        this.$store.commit('setTabOperationType', operationType.fourthMenu)
+        //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

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 curOperationType = this.$store.getters.getTabOperationType
-      const beforeOperationType = this.$store.getters.getTabOperationBeforeType
+      //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)
+      let curTab = this.getCurTab()
-      if (tabObjGroup && tabObjGroup.length > 0) {
+      if(curTab){
-        return tabObjGroup[0]
+        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('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-      this.$store.commit('setTabOperationType', operationType)
+      //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('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-      this.$store.commit('setTabOperationType', operationType.changeTab)
+      //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)
+        const curTab = this.getCurTab()
-        queryType = checkedTab ? checkedTab.prop : ''
+        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) {
+    getUrlParam (param, defaultValue,isNumber) {
-      return this.$route.query[param] ? this.$route.query[param] : defaultValue
+      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 () {

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('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-      this.$store.commit('setTabOperationType', operationType.fourthMenu)
+      //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