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

src/components/layout/Header.vue

@@ -499,7 +499,8 @@ export default {
                 this.changeUrlTabState(this.curTabState.dimensionType, curTab ? curTab.prop : '')
                 // this.$store.commit('setQueryCondition', '')
                 this.changeUrlTabState(this.curTabState.queryCondition, '')
-                this.$store.commit('setNetworkOverviewBeforeTab', null)
+                //this.$store.commit('setNetworkOverviewBeforeTab', null)
+                this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, '')
               } else {
                 child.columnName = ''
                 child.columnValue = ''
@@ -515,7 +516,8 @@ export default {
                 this.changeUrlTabState(this.curTabState.curTab, null)
                 // this.$store.commit('setQueryCondition', '')
                 this.changeUrlTabState(this.curTabState.queryCondition, '')
-                this.$store.commit('setNetworkOverviewBeforeTab', null)
+                //this.$store.commit('setNetworkOverviewBeforeTab', null)
+                this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, '')
               }
             }
           })

src/store/modules/panel.js

@@ -42,7 +42,7 @@ const panel = {
     // dimensionType: '', // 维度
     // breadcrumbColumnValue: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
     // networkOverviewCurrentTab: null, // 只代表选中的tab，有时会与面包屑中显示的值不同
-    networkOverviewBeforeTab: null, // 点击表格的值时使用，记录点击当前tab表格的值之前点击的表格值所属的tab
+    //networkOverviewBeforeTab: null, // 点击表格的值时使用，记录点击当前tab表格的值之前点击的表格值所属的tab
     // queryCondition: '', // 数据查询的条件
     networkOverviewTabList: [], // 存储tab列表的一些状态：如是否选中
     tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize
@@ -124,9 +124,9 @@ const panel = {
     setTabOperationType (state, tabOperationType) {
       state.tabOperationType = tabOperationType
     },
-    setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) {
+    //setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) {
-      state.networkOverviewBeforeTab = networkOverviewBeforeTab
+      //state.networkOverviewBeforeTab = networkOverviewBeforeTab
-    },
+    //},
     setTabOperationBeforeType (state, tabOperationBeforeType) {
       state.tabOperationBeforeType = tabOperationBeforeType
     },
@@ -207,9 +207,9 @@ const panel = {
     getTabOperationType (state) {
       return state.tabOperationType
     },
-    getNetworkOverviewBeforeTab (state) {
+    //getNetworkOverviewBeforeTab (state) {
-      return state.networkOverviewBeforeTab
+      //return state.networkOverviewBeforeTab
-    },
+    //},
     getTabOperationBeforeType (state) {
       return state.tabOperationBeforeType
     },

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

@@ -315,6 +315,9 @@ export default {
       }
       this.init()
     },
+    getUrlParam (param, defaultValue) {
+      return this.$route.query[param] ? this.$route.query[param] : defaultValue
+    },
     drillDownData (type, value) {
       let tabType = ''
       if (type === 'provider') {
@@ -323,12 +326,14 @@ export default {
         tabType = 'network.applications'
       }
       if (tabType) {
-        const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
+        //const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
+        const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
         const curTable = networkTable.networkOverview
         const list = this.$store.getters.getNetworkOverviewTabList
         const tabGroup = list.filter(item => item.label === tabType)
         if (tabGroup && tabGroup.length > 0) {
-          this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
+          //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)
@@ -378,7 +383,7 @@ export default {
             item.checked = false
             toPanel = item.panelId
           }
-          if (oldCurTab && (item.label === oldCurTab.label)) {
+          if (oldCurTab && (item.prop === oldCurTab)) {
             item.checked = true
           }
         })

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

@@ -334,7 +334,7 @@ export default {
         this.list[0].checked = true
         this.showTab(this.list[0])
       } else {
-        this.showTab(tabList[0])
+        //this.showTab(tabList[0])
       }
       this.isNoData = false
       this.tableData = []
@@ -393,6 +393,24 @@ export default {
       })
 
       let curTab = this.getCurTab()
+      if (this.metric === 'Sessions/s') {
+        this.columnNameGroup = this.curTable.sessionsColumnNameGroup
+        this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
+        this.orderBy = 'sessions'
+        this.metricUnit = 'sessions'
+        let totalChecked = true
+        this.customTableTitles.forEach(item => {
+          if (item.prop === 'total') {
+            totalChecked = item.checked
+          }
+        })
+        const totalColumn = this.customTableTitles.filter(item => item.prop === 'total')
+        this.customTableTitles = [
+          { label:curTab.label, prop: 'tab', checked: true, tabColumn: true, columnType: this.curTable.column[0].columnType },
+          { label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false, columnType: this.curTable.column[1].columnType, cycleDataUrl: totalColumn ? totalColumn.cycleDataUrl : '', isInMainUrl: true }
+        ]
+      }
+
       const curOperationType = this.$store.getters.getTabOperationType
       const beforeOperationType = this.$store.getters.getTabOperationBeforeType
       if (curOperationType === operationType.changeTab) { // 切换tab
@@ -1044,7 +1062,8 @@ export default {
       return tab
     },
     setBeforeTab (tab) {
-      this.$store.commit('setNetworkOverviewBeforeTab', tab)
+      //this.$store.commit('setNetworkOverviewBeforeTab', tab)
+      this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tab.prop)
     },
     setQueryCondition (tab, value) {
       const queryCondition = []
@@ -1082,7 +1101,8 @@ export default {
       5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type)
   * */
     handleTabValue (columnName, columnValue) {
-      const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
+      //const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
+      const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
       const clickTab = this.getTabByLabel(columnName)
       this.setBeforeTab(clickTab)
       this.setOperationType(operationType.fourthMenu)
@@ -1125,7 +1145,7 @@ export default {
           item.checked = false
           // toPanel = item.panelId
         }
-        if (oldCurTab && (item.label === oldCurTab.label)) {
+        if (oldCurTab && (item.prop === oldCurTab)) {
           item.checked = true
         }
       })

src/views/charts2/charts/npm/NpmAppCategoryScore.vue

@@ -257,13 +257,15 @@ export default {
     drillDownData (key) {
       const value = npmCategoryToAppCategoryMap[key]
       const tabType = 'network.applicationCategories'
-      const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
+      //const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
+      const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
       // const curTable = networkTable.networkOverview
       const curTable = networkTable.networkAppPerformance
       const list = this.$store.getters.getNetworkOverviewTabList
       const tabGroup = list.filter(item => item.label === tabType)
       if (tabGroup && tabGroup.length > 0) {
-        this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
+        //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)
@@ -313,7 +315,7 @@ export default {
           item.checked = false
           toPanel = item.panelId
         }
-        if (oldCurTab && (item.label === oldCurTab.label)) {
+        if (oldCurTab && (item.prop === oldCurTab)) {
           item.checked = true
         }
       })