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

2022-09-20 10:29:32 +08:00
parent e69a0147e7
commit 5f35eedbbb
5 changed files with 48 additions and 19 deletions
--- a/src/components/layout/Header.vue
+++ b/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, '')
              }
            }
          })
--- a/src/store/modules/panel.js
+++ b/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) {
-      state.networkOverviewBeforeTab = networkOverviewBeforeTab
-    },
+    //setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) {
+      //state.networkOverviewBeforeTab = networkOverviewBeforeTab
+    //},
    setTabOperationBeforeType (state, tabOperationBeforeType) {
      state.tabOperationBeforeType = tabOperationBeforeType
    },
@@ -207,9 +207,9 @@ const panel = {
    getTabOperationType (state) {
      return state.tabOperationType
    },
-    getNetworkOverviewBeforeTab (state) {
-      return state.networkOverviewBeforeTab
-    },
+    //getNetworkOverviewBeforeTab (state) {
+      //return state.networkOverviewBeforeTab
+    //},
    getTabOperationBeforeType (state) {
      return state.tabOperationBeforeType
    },
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/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
          }
        })
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/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
        }
      })
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/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
        }
      })