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

2022-09-20 09:33:49 +08:00
parent 7f4a593d45
commit f6c22ce1ae
16 changed files with 311 additions and 171 deletions
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -73,7 +73,7 @@
            </div>
          </template>
          <template v-else-if="index===2">
-            <span class="route-menu" @click="jump(path,item,'',3)">{{item}}</span>
+            <span class="route-menu" @click="jump(path,item,'',3)">{{$t(item)}}</span>
          </template>
          <template v-else-if="index===1">
            <span class="route-menu" @click="jump(path,'','',2)" v-if="route.indexOf('detection') === -1">{{item}}</span>
@@ -266,10 +266,16 @@ export default {
        }
      })
      const breadcrumb = breadcrumbMap.find(b => this.path === b.path)
+      const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
+      const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
      if (breadcrumb.columnValue) {
-        return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, this.$t(breadcrumb.columnName), breadcrumb.columnValue] : []
+        return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, breadcrumb.columnName, breadcrumb.columnValue] : []
      } else if (breadcrumb.columnName) {
-        return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, this.$t(breadcrumb.columnName)] : []
+        return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, breadcrumb.columnName] : []
+      } else if (fourthMenu) {
+        return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu, fourthMenu] : []
+      } else if (thirdMenu) {
+        return breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu] : []
      } else {
        return breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
      }
@@ -338,7 +344,8 @@ export default {
    },
    initDropdownList () {
      const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
-      const columnName = this.$store.getters.getBreadcrumbColumnName
+      // const columnName = this.$store.getters.getBreadcrumbColumnName
+      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
      let type = 'ip'
      const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
      if (tabObjGroup && tabObjGroup.length > 0) {
@@ -383,13 +390,17 @@ export default {
    hideBreadcrumbPopover () {
      this.showBackground = false
    },
+    getUrlParam (param, defaultValue) {
+      return this.$route.query[param] ? this.$route.query[param] : defaultValue
+    },
    changeValue (value) {
      // 设置面包屑显示的内容及hover时的title
      document.getElementById('breadcrumbValue').innerText = value
      document.getElementById('breadcrumbButton').setAttribute('title', value)
      document.getElementById(this.valueMenuId).setAttribute('title', value)
      document.getElementById('breadcrumbButton').click()
-      const columnName = this.$store.getters.getBreadcrumbColumnName
+      // const columnName = this.$store.getters.getBreadcrumbColumnName
+      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
      const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
      if (tabObjGroup && tabObjGroup.length > 0) {
        const curTab = tabObjGroup[0]
@@ -403,12 +414,14 @@ export default {
              queryCondition.push('common_server_port=' + valueGroup[1])
            }
            console.log(queryCondition.join(' AND '))
-            this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+            // this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+            this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
          } else {
            searchProps.forEach(item => {
              queryCondition.push(item + "='" + value + "'")
            })
-            this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+            // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+            this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
          }
        }
      }
@@ -434,7 +447,7 @@ export default {
        }
      })
    },
-    changeTabState (param, value) {
+    changeUrlTabState (param, value) {
      const { query } = this.$route
      const newQuery = {}
      newQuery[param] = value
@@ -460,34 +473,48 @@ export default {
              if (columnValue) { // 点击的为值
                child.columnValue = columnValue
                child.columnName = columnName
-                this.$store.commit('setBreadcrumbColumnValue', columnValue)
-                this.$store.commit('setBreadcrumbColumnName', columnName)
+                // this.$store.commit('setBreadcrumbColumnValue', columnValue)
+                // this.$store.commit('setBreadcrumbColumnName', columnName)
+                this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
+                this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
                const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
                const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : ''
-                this.$store.commit('setDimensionType', type)
-                this.$store.commit('setPanelName', columnValue)
+                // this.$store.commit('setDimensionType', type)
+                this.changeUrlTabState(this.curTabState.dimensionType, type)
+                // this.$store.commit('setPanelName', columnValue)
+                this.changeUrlTabState(this.curTabState.panelName, columnValue)
              } else if (columnName) { // 点击的为列名
                child.columnValue = ''
                child.columnName = columnName
-                this.$store.commit('setBreadcrumbColumnValue', '')
-                this.$store.commit('setBreadcrumbColumnName', columnName)
-                this.$store.commit('setPanelName', columnName)
+                // this.$store.commit('setBreadcrumbColumnValue', '')
+                // this.$store.commit('setBreadcrumbColumnName', columnName)
+                this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
+                this.changeUrlTabState(this.curTabState.fourthMenu, '')
+                // this.$store.commit('setPanelName', columnName)
+                this.changeUrlTabState(this.curTabState.panelName, columnName)
                const tabList = this.$store.getters.getNetworkOverviewTabList
-                const curTab = tabList.filter(item => this.$t(item.label) === columnName)[0]
-                this.changeTabState(this.curTabState.curTab, curTab)
-                this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
-                this.$store.commit('setQueryCondition', '')
+                const curTab = tabList.filter(item => item.label === columnName)[0]
+                this.changeUrlTabState(this.curTabState.curTab, curTab)
+                // this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
+                this.changeUrlTabState(this.curTabState.dimensionType, curTab ? curTab.prop : '')
+                // this.$store.commit('setQueryCondition', '')
+                this.changeUrlTabState(this.curTabState.queryCondition, '')
                this.$store.commit('setNetworkOverviewBeforeTab', null)
              } else {
                child.columnName = ''
                child.columnValue = ''
-                this.$store.commit('setBreadcrumbColumnValue', '')
-                this.$store.commit('setBreadcrumbColumnName', '')
-                this.$store.commit('setDimensionType', '')
-                this.$store.commit('setPanelName', '')
+                // this.$store.commit('setBreadcrumbColumnValue', '')
+                // this.$store.commit('setBreadcrumbColumnName', '')
+                this.changeUrlTabState(this.curTabState.thirdMenu, '')
+                this.changeUrlTabState(this.curTabState.fourthMenu, '')
+                // this.$store.commit('setDimensionType', '')
+                this.changeUrlTabState(this.curTabState.dimensionType, '')
+                // this.$store.commit('setPanelName', '')
+                this.changeUrlTabState(this.curTabState.panelName, '')
                // this.$store.commit('setBreadcrumbColumnValueList', [])
-                this.changeTabState(this.curTabState.curTab, null)
-                this.$store.commit('setQueryCondition', '')
+                this.changeUrlTabState(this.curTabState.curTab, null)
+                // this.$store.commit('setQueryCondition', '')
+                this.changeUrlTabState(this.curTabState.queryCondition, '')
                this.$store.commit('setNetworkOverviewBeforeTab', null)
              }
            }
--- a/src/store/modules/panel.js
+++ b/src/store/modules/panel.js
@@ -37,13 +37,13 @@ const panel = {
            breadcrumbColumnValue、
            queryCondition
     */
-    panelName: '', // 网络概况的Panel的名称
-    breadcrumbColumnName: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
-    dimensionType: '', // 维度
-    breadcrumbColumnValue: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
+    // panelName: '', // 网络概况的Panel的名称
+    // breadcrumbColumnName: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
+    // dimensionType: '', // 维度
+    // breadcrumbColumnValue: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
    // networkOverviewCurrentTab: null, // 只代表选中的tab，有时会与面包屑中显示的值不同
    networkOverviewBeforeTab: null, // 点击表格的值时使用，记录点击当前tab表格的值之前点击的表格值所属的tab
-    queryCondition: '', // 数据查询的条件
+    // queryCondition: '', // 数据查询的条件
    networkOverviewTabList: [], // 存储tab列表的一些状态：如是否选中
    tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize
    tabOperationBeforeType: 0, // 记录上次的操作类型
@@ -100,24 +100,24 @@ const panel = {
    setCurrentMap (state, currentMap) {
      state.currentMap = currentMap
    },
-    setPanelName (state, panelName) {
-      state.panelName = panelName
-    },
-    setBreadcrumbColumnName (state, breadcrumbColumnName) {
-      state.breadcrumbColumnName = breadcrumbColumnName
-    },
-    setDimensionType (state, dimensionType) {
-      state.dimensionType = dimensionType
-    },
-    setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
-      state.breadcrumbColumnValue = breadcrumbColumnValue
-    },
+    // setPanelName (state, panelName) {
+    // state.panelName = panelName
+    // },
+    // setBreadcrumbColumnName (state, breadcrumbColumnName) {
+    // state.breadcrumbColumnName = breadcrumbColumnName
+    // },
+    // setDimensionType (state, dimensionType) {
+    // state.dimensionType = dimensionType
+    // },
+    // setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
+    // state.breadcrumbColumnValue = breadcrumbColumnValue
+    // },
    // setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
    // state.networkOverviewCurrentTab = networkOverviewCurrentTab
    // },
-    setQueryCondition (state, queryCondition) {
-      state.queryCondition = queryCondition
-    },
+    // setQueryCondition (state, queryCondition) {
+    // state.queryCondition = queryCondition
+    // },
    setNetworkOverviewTabList (state, networkOverviewTabList) {
      state.networkOverviewTabList = networkOverviewTabList
    },
@@ -183,24 +183,24 @@ const panel = {
    getCurrentMap (state) {
      return state.currentMap
    },
-    getPanelName (state) {
-      return state.panelName
-    },
-    getBreadcrumbColumnName (state) {
-      return state.breadcrumbColumnName
-    },
-    getDimensionType (state) {
-      return state.dimensionType
-    },
-    getBreadcrumbColumnValue (state) {
-      return state.breadcrumbColumnValue
-    },
+    // getPanelName (state) {
+    // return state.panelName
+    // },
+    // getBreadcrumbColumnName (state) {
+    // return state.breadcrumbColumnName
+    // },
+    // getDimensionType (state) {
+    // return state.dimensionType
+    // },
+    // getBreadcrumbColumnValue (state) {
+    // return state.breadcrumbColumnValue
+    // },
    // getNetworkOverviewCurrentTab (state) {
    // return state.networkOverviewCurrentTab
    // },
-    getQueryCondition (state) {
-      return state.queryCondition
-    },
+    // getQueryCondition (state) {
+    // return state.queryCondition
+    // },
    getNetworkOverviewTabList (state) {
      return state.networkOverviewTabList
    },
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -244,7 +244,13 @@ export const curTabState = {
  tableShowMore: 'tableShowMore',
  tableSortColumn: 'tableSortColumn',
  tableSortType: 'tableSortType',
-  tableSortTab: 'tableSortTab'
+  tableSortTab: 'tableSortTab',
+  queryCondition: 'queryCondition',
+  dimensionType: 'dimensionType', // 纬度
+  panelName: 'panelName',
+  thirdMenu: 'thirdMenu',
+  fourthMenu: 'fourthMenu',
+  networkOverviewBeforeTab: 'networkOverviewBeforeTab'
 }

 export const scoreUrl = [
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -40,7 +40,7 @@
 <script>
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
-import { panelTypeAndRouteMapping, bytesColumnNameGroupForNpm, scoreUrl, customTableTitlesForAppPerformance, operationType } from '@/utils/constants'
+import { panelTypeAndRouteMapping, bytesColumnNameGroupForNpm, scoreUrl, customTableTitlesForAppPerformance, operationType, curTabState } from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { getTypeCategory } from '@/views/charts/charts/tools'
@@ -63,7 +63,8 @@ export default {
      panelLock: true,
      extraParams: {},
      panelName: '',
-      score: null
+      score: null,
+      curTabState: curTabState
    }
  },
  computed: {
@@ -83,14 +84,17 @@ export default {
    }
  },
  async mounted () {
-    this.panelName = this.$store.getters.getPanelName
+    // this.panelName = this.$store.getters.getPanelName
+    this.panelName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
    const curOperationType = this.$store.getters.getTabOperationType
    if (this.panelName && this.$route.path === '/panel/networkAppPerformance' && curOperationType !== operationType.thirdMenu) {
-      const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      // const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '')
      const queryParams = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
-        type: this.$store.getters.getDimensionType,
+        // type: this.$store.getters.getDimensionType,
+        type: this.$route.query.dimensionType ? this.$route.query.dimensionType : '',
        params: columnValue || ''
      }
      const requestGroup = []
@@ -233,6 +237,9 @@ export default {
      } else {
        this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
      }
+    },
+    getUrlParam (param, defaultValue) {
+      return this.$route.query[param] ? this.$route.query[param] : defaultValue
    }
  }
 }
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -338,27 +338,36 @@ export default {
        searchProps.forEach(item => {
          queryCondition.push(item + "='" + value + "'")
        })
-        this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+        // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))

        this.$store.getters.menuList.forEach(menu => {
          if (this.$_.isEmpty(menu.children) && menu.route) {
            if (this.$route.path === menu.route) {
              menu.columnName = tabType
              menu.columnValue = value
-              this.$store.commit('setPanelName', value)
-              this.$store.commit('setBreadcrumbColumnName', tabType)
-              this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
-              this.$store.commit('setBreadcrumbColumnValue', value)
+              // this.$store.commit('setPanelName', value)
+              this.changeUrlTabState(this.curTabState.panelName, value)
+              // this.$store.commit('setBreadcrumbColumnName', tabType)
+              this.changeUrlTabState(this.curTabState.thirdMenu, tabType)
+              // this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
+              this.changeUrlTabState(this.curTabState.dimensionType, tabGroup[0] ? tabGroup[0].prop : '')
+              // this.$store.commit('setBreadcrumbColumnValue', value)
+              this.changeUrlTabState(this.curTabState.fourthMenu, value)
            }
          } else if (!this.$_.isEmpty(menu.children)) {
            menu.children.forEach(child => {
              if (this.$route.path === child.route) {
                child.columnName = tabType
                child.columnValue = value
-                this.$store.commit('setPanelName', value)
-                this.$store.commit('setBreadcrumbColumnName', tabType)
-                this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
-                this.$store.commit('setBreadcrumbColumnValue', value)
+                // this.$store.commit('setPanelName', value)
+                this.changeUrlTabState(this.curTabState.panelName, value)
+                // this.$store.commit('setBreadcrumbColumnName', tabType)
+                this.changeUrlTabState(this.curTabState.thirdMenu, tabType)
+                // this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
+                this.changeUrlTabState(this.curTabState.dimensionType, tabGroup[0] ? tabGroup[0].prop : '')
+                // this.$store.commit('setBreadcrumbColumnValue', value)
+                this.changeUrlTabState(this.curTabState.fourthMenu, value)
              }
            })
          }
@@ -377,7 +386,7 @@ export default {
        const tabObjGroup = list.filter(item => item.checked)
        if (tabObjGroup && tabObjGroup.length > 0) {
          const curTab = tabObjGroup[0]
-          this.changeTabState(this.curTabState.curTab, curTab)
+          this.changeUrlTabState(this.curTabState.curTab, curTab)
        }
        this.$router.push({
          query: {
@@ -388,14 +397,13 @@ export default {
        })
      }
    },
-    changeTabState (param, value) {
-      const query = {
-        ...this.$route.query
-      }
-      query[param] = value
-      this.$router.push({
-        query: query
-      })
+    // tab改变
+    changeUrlTabState (param, value) {
+      const { query } = this.$route
+      const newQuery = {}
+      newQuery[param] = value
+      const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+      overwriteUrl(newUrl)
    },
    initChart (obj) {
      let chart = this.myChart.find(m => m.name === obj.name && m.type === obj.type)
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -189,7 +189,8 @@ export default {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime)
      }
-      const condition = this.$store.getters.getQueryCondition
+      // const condition = this.$store.getters.getQueryCondition
+      const condition = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
      if (condition) {
        params.q = condition
      }
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -365,19 +365,30 @@ export default {
      })

      // 针对network overview – app list 点击标题触发下钻，相关内容处理
-      const columnName = this.$store.getters.getBreadcrumbColumnName
-      if (columnName) {
+      // const columnName = this.$store.getters.getBreadcrumbColumnName
+      const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
+      const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
+      if (thirdMenu && fourthMenu) {
        this.list.forEach(item => {
-          if (item.label === columnName) {
+          if (item.label === thirdMenu) {
            item.checked = false
          }
        })
        this.$store.commit('setNetworkOverviewTabList', this.list)
+      } else if (thirdMenu && !fourthMenu) {
+        this.list.forEach(item => {
+          if (item.label === thirdMenu) {
+            item.checked = true
+          }
+        })
+        this.$store.commit('setNetworkOverviewTabList', this.list)
      }
      this.list.forEach(item => {
-        const tabDom = document.getElementById('tab-' + item.label)
-        if (tabDom) {
-          tabDom.style.display = ''
+        if (item.checked) {
+          const tabDom = document.getElementById('tab-' + item.label)
+          if (tabDom) {
+            tabDom.style.display = ''
+          }
        }
      })

@@ -391,16 +402,17 @@ export default {
        this.showCustomizeTabs = true
        this.setShowNum(10)
      } else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
-        const name = this.$store.getters.getBreadcrumbColumnName
+        // const name = this.$store.getters.getBreadcrumbColumnName
+        const name = this.getUrlParam(this.curTabState.thirdMenu, '')
        const networkTabList = []
        this.list.forEach(item => {
-          if (this.$t(item.label) === name) {
+          if (item.label === name) {
            item.checked = true
          }
          networkTabList.push(item)
        })
        this.$store.commit('setNetworkOverviewTabList', networkTabList)
-        const breadcrumbColumnTab = this.list.find(item => this.$t(item.label) === name)
+        const breadcrumbColumnTab = this.list.find(item => item.label === name)
        this.changeUrlTabState(this.curTabState.curTab, breadcrumbColumnTab.prop)

        this.hideTabs(breadcrumbColumnTab)
@@ -423,6 +435,28 @@ export default {
          this.showTab(curTab)
          this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
        }
+        if (thirdMenu && fourthMenu) {
+          this.$nextTick(() => {
+            this.list.forEach(item => {
+              if (item.label === thirdMenu) {
+                item.checked = false
+              }
+            })
+          })
+        } else if (thirdMenu && !fourthMenu) {
+          this.list.forEach(item => {
+            if (item.label === thirdMenu) {
+              item.checked = true
+              this.$nextTick(() => {
+                this.hideTabs(item)
+              })
+              this.customTableTitles[0].label = item.label
+            }
+          })
+          this.activeTab = ''
+        }
+        this.list = Object.assign({}, this.list)
+        this.$store.commit('setNetworkOverviewTabList', this.list)
        this.showCustomizeTabs = true
      } else if (curOperationType === operationType.changeMetric) { // 切换metric
        if (beforeOperationType === operationType.thirdMenu) {
@@ -485,7 +519,7 @@ export default {
      }

      let cycleTotalList = []
-      const condition = this.$store.getters.getQueryCondition
+      const condition = this.getQueryCondition()
      if (condition) {
        queryParams.q = condition
      }
@@ -866,7 +900,8 @@ export default {
        limit: networkDefaultLimit,
        type: curTab.prop
      }
-      const condition = this.$store.getters.getQueryCondition
+      // const condition = this.$store.getters.getQueryCondition
+      const condition = this.getQueryCondition()
      if (condition) {
        queryParams = {
          orderBy: this.orderBy,
@@ -884,8 +919,10 @@ export default {
      }
      const tabList = this.list.filter(item => item.checked === true)
      const defaultTab = tabList.length > 0 ? tabList[0] : {}
-      const columnName = this.$store.getters.getBreadcrumbColumnName
-      const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      // const columnName = this.$store.getters.getBreadcrumbColumnName
+      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
+      // const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '')
      if (tabList.length === 1) {
        defaultTab.disabled = true
      } else if (tabList.length > 1) {
@@ -926,11 +963,13 @@ export default {
    },
    // tab改变
    changeUrlTabState (param, value) {
-      const { query } = this.$route
-      const newQuery = {}
-      newQuery[param] = value
-      const newUrl = urlParamsHandler(window.location.href, query, newQuery)
-      overwriteUrl(newUrl)
+      if (value != null && value != undefined) {
+        const { query } = this.$route
+        const newQuery = {}
+        newQuery[param] = value
+        const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+        overwriteUrl(newUrl)
+      }
    },
    // 激活tab修改的内容：第一列的列名，list中此tab为checked=true
    showTab (curTab) {
@@ -950,8 +989,10 @@ export default {
      const tabList = this.list.filter(item => item.checked === true)
      const defaultTab = tabList.length > 0 ? tabList[0] : {}
      // 当前操作之后，只有1个tab被选中，则这一个不允许取消选中
-      const columnName = this.$store.getters.getBreadcrumbColumnName
-      const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      // const columnName = this.$store.getters.getBreadcrumbColumnName
+      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
+      // const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '')
      if (tabList.length === 1) {
        defaultTab.disabled = true
      } else if (tabList.length > 1) {
@@ -977,7 +1018,8 @@ export default {
          limit: networkDefaultLimit,
          type: tabList[0].prop
        }
-        const condition = this.$store.getters.getQueryCondition
+        // const condition = this.$store.getters.getQueryCondition
+        const condition = this.getQueryCondition()
        if (condition) {
          queryParams = {
            orderBy: this.orderBy,
@@ -1013,12 +1055,14 @@ export default {
          queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
          queryCondition.push('common_server_port=' + valueGroup[1])
        }
-        this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+        // this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
      } else {
        searchProps.forEach(item => {
          queryCondition.push(item + "='" + value + "'")
        })
-        this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+        // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
      }
    },
    getFirstCheckedTab () {
@@ -1049,20 +1093,28 @@ export default {
          if (this.$route.path === menu.route) {
            menu.columnName = columnName
            menu.columnValue = columnValue
-            this.$store.commit('setPanelName', columnValue)
-            this.$store.commit('setBreadcrumbColumnName', columnName)
-            this.$store.commit('setDimensionType', clickTab ? clickTab.prop : '')
-            this.$store.commit('setBreadcrumbColumnValue', columnValue)
+            // this.$store.commit('setPanelName', columnValue)
+            this.changeUrlTabState(this.curTabState.panelName, columnValue)
+            // this.$store.commit('setBreadcrumbColumnName', columnName)
+            this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
+            // this.$store.commit('setDimensionType', clickTab ? clickTab.prop : '')
+            this.changeUrlTabState(this.curTabState.dimensionType, clickTab ? clickTab.prop : '')
+            // this.$store.commit('setBreadcrumbColumnValue', columnValue)
+            this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
          }
        } else if (!this.$_.isEmpty(menu.children)) {
          menu.children.forEach(child => {
            if (this.$route.path === child.route) {
              child.columnName = columnName
              child.columnValue = columnValue
-              this.$store.commit('setPanelName', columnValue)
-              this.$store.commit('setBreadcrumbColumnName', columnName)
-              this.$store.commit('setDimensionType', clickTab ? clickTab.prop : '')
-              this.$store.commit('setBreadcrumbColumnValue', columnValue)
+              // this.$store.commit('setPanelName', columnValue)
+              this.changeUrlTabState(this.curTabState.panelName, columnValue)
+              // this.$store.commit('setBreadcrumbColumnName', columnName)
+              this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
+              // this.$store.commit('setDimensionType', clickTab ? clickTab.prop : '')
+              this.changeUrlTabState(this.curTabState.dimensionType, clickTab ? clickTab.prop : '')
+              // this.$store.commit('setBreadcrumbColumnValue', columnValue)
+              this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
            }
          })
        }
@@ -1102,12 +1154,14 @@ export default {
          queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
          queryCondition.push('common_server_port=' + valueGroup[1])
        }
-        this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+        // this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
      } else {
        searchProps.forEach(item => {
          queryCondition.push(item + "='" + columnValue + "'")
        })
-        this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+        // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
      }
    },
    metricChange () {
@@ -1186,7 +1240,8 @@ export default {
          limit: networkDefaultLimit,
          type: curTab.prop
        }
-        const condition = this.$store.getters.getQueryCondition
+        // const condition = this.$store.getters.getQueryCondition
+        const condition = this.getQueryCondition()
        if (condition) {
          queryParams = {
            orderBy: this.orderBy,
@@ -1202,7 +1257,8 @@ export default {
      }
    },
    getCurUrl () {
-      const condition = this.$store.getters.getQueryCondition
+      // const condition = this.$store.getters.getQueryCondition
+      const condition = this.getQueryCondition()
      if (condition) {
        return this.networkSearchUrl.drilldownCurUrl
      } else {
@@ -1210,7 +1266,8 @@ export default {
      }
    },
    gerCycleUrl () {
-      const condition = this.$store.getters.getQueryCondition
+      // const condition = this.$store.getters.getQueryCondition
+      const condition = this.getQueryCondition()
      if (condition) {
        return this.networkSearchUrl.drilldownCycleUrl
      } else {
@@ -1218,7 +1275,8 @@ export default {
      }
    },
    gerColumnUrl (tableColumn) {
-      const condition = this.$store.getters.getQueryCondition
+      // const condition = this.$store.getters.getQueryCondition
+      const condition = this.getQueryCondition()
      if (condition) {
        return tableColumn.dillDownCycleDataUrl
      } else {
@@ -1235,13 +1293,14 @@ export default {
    }, */
    handleQueryParams (extraParams) {
      let queryType = ''
-      const name = this.$store.getters.getBreadcrumbColumnName
+      // const name = this.$store.getters.getBreadcrumbColumnName
+      const name = this.getUrlParam(this.curTabState.thirdMenu, '')
      const curOperationType = this.$store.getters.getTabOperationType
      if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
        const checkedTab = this.list.find(item => item.checked)
        queryType = checkedTab ? checkedTab.prop : ''
      } else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
-        const breadcrumbTab = this.list.find(item => this.$t(item.label) === name)
+        const breadcrumbTab = this.list.find(item => item.label === name)
        queryType = breadcrumbTab ? breadcrumbTab.prop : ''
      } else if (curOperationType === operationType.changeTab) { // 切换tab
        const curTab = this.getCurTab()
@@ -1262,7 +1321,8 @@ export default {
          orderBy: this.orderBy ? this.orderBy : 'bytesTotal',
          limit: networkDefaultLimit
        }
-        const condition = this.$store.getters.getQueryCondition
+        // const condition = this.$store.getters.getQueryCondition
+        const condition = this.getQueryCondition()
        if (condition) {
          extraParams.q = condition
        }
@@ -1294,6 +1354,12 @@ export default {
      let curTab = this.$route.query.curTab?JSON.parse(this.$route.query.curTab):null
      return curTab
    }, */
+    getQueryCondition () {
+      return this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
+    },
+    getUrlParam (param, defaultValue) {
+      return this.$route.query[param] ? this.$route.query[param] : defaultValue
+    },
    // 获取当前tab
    getCurTab () {
      const curTabProp = this.$route.query.curTab ? this.$route.query.curTab : null
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -136,7 +136,7 @@ import unitConvert from '@/utils/unit-convert'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
-import { getChainRatio, computeScore, changeCurTab } from '@/utils/tools'
+import { getChainRatio, computeScore, changeCurTab, urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
@@ -273,27 +273,36 @@ export default {
      searchProps.forEach(item => {
        queryCondition.push(item + "='" + value + "'")
      })
-      this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+      // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+      this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))

      this.$store.getters.menuList.forEach(menu => {
        if (this.$_.isEmpty(menu.children) && menu.route) {
          if (this.$route.path === menu.route) {
            menu.columnName = tabType
            menu.columnValue = value
-            this.$store.commit('setPanelName', value)
-            this.$store.commit('setBreadcrumbColumnName', tabType)
-            this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
-            this.$store.commit('setBreadcrumbColumnValue', value)
+            // this.$store.commit('setPanelName', value)
+            this.changeUrlTabState(this.curTabState.panelName, value)
+            // this.$store.commit('setBreadcrumbColumnName', tabType)
+            this.changeUrlTabState(this.curTabState.thirdMenu, tabType)
+            // this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
+            this.changeUrlTabState(this.curTabState.dimensionType, tabGroup[0] ? tabGroup[0].prop : '')
+            // this.$store.commit('setBreadcrumbColumnValue', value)
+            this.changeUrlTabState(this.curTabState.fourthMenu, value)
          }
        } else if (!this.$_.isEmpty(menu.children)) {
          menu.children.forEach(child => {
            if (this.$route.path === child.route) {
              child.columnName = tabType
              child.columnValue = value
-              this.$store.commit('setPanelName', value)
-              this.$store.commit('setBreadcrumbColumnName', tabType)
-              this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
-              this.$store.commit('setBreadcrumbColumnValue', value)
+              // this.$store.commit('setPanelName', value)
+              this.changeUrlTabState(this.curTabState.panelName, value)
+              // this.$store.commit('setBreadcrumbColumnName', tabType)
+              this.changeUrlTabState(this.curTabState.thirdMenu, tabType)
+              // this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
+              this.changeUrlTabState(this.curTabState.dimensionType, tabGroup[0] ? tabGroup[0].prop : '')
+              // this.$store.commit('setBreadcrumbColumnValue', value)
+              this.changeUrlTabState(this.curTabState.fourthMenu, value)
            }
          })
        }
@@ -312,7 +321,7 @@ export default {
      const tabObjGroup = list.filter(item => item.checked)
      if (tabObjGroup && tabObjGroup.length > 0) {
        const curTab = tabObjGroup[0]
-        this.changeTabState(this.curTabState.curTab, curTab)
+        this.changeUrlTabState(this.curTabState.curTab, curTab)
      }
      this.$router.push({
        query: {
@@ -322,14 +331,13 @@ export default {
        }
      })
    },
-    changeTabState (param, value) {
-      const query = {
-        ...this.$route.query
-      }
-      query[param] = value
-      this.$router.push({
-        query: query
-      })
+    // tab改变
+    changeUrlTabState (param, value) {
+      const { query } = this.$route
+      const newQuery = {}
+      newQuery[param] = value
+      const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+      overwriteUrl(newUrl)
    }
  },
  mounted () {
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -9,7 +9,7 @@ import { shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { computeScore, getGeoData } from '@/utils/tools'
-import { storageKey, unitTypes, countryNameIdMapping } from '@/utils/constants'
+import { storageKey, unitTypes, countryNameIdMapping, curTabState } from '@/utils/constants'
 import { valueToRangeValue } from '@/utils/unit-convert'
 import { getSecond } from '@/utils/date-util'
 import { api, getData } from '@/utils/api'
@@ -25,7 +25,8 @@ export default {
      worldImageSeries: null,
      countryImageSeries: null,
      // Server | Client
-      trafficDirection: 'Server'
+      trafficDirection: 'Server',
+      curTabState: curTabState
    }
  },
  mixins: [chartMixin],
@@ -56,6 +57,9 @@ export default {
      // 渲染
      this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
    },
+    getUrlParam (param, defaultValue) {
+      return this.$route.query[param] ? this.$route.query[param] : defaultValue
+    },
    loadAm4ChartMap (polygonSeries, imageSeries) {
      try {
        // 清除数据
@@ -71,8 +75,10 @@ export default {
        const params = {
          startTime: getSecond(this.timeFilter.startTime),
          endTime: getSecond(this.timeFilter.endTime),
-          type: this.$store.getters.getDimensionType,
-          typeVal: this.$store.getters.getBreadcrumbColumnValue
+          // type: this.$store.getters.getDimensionType,
+          type: this.$route.query.dimensionType ? this.$route.query.dimensionType : '',
+          // typeVal: this.$store.getters.getBreadcrumbColumnValue
+          typeVal: this.getUrlParam(this.curTabState.fourthMenu, '')
        }
        getData(api.npm.overview.map, params).then(res => {
          const subParams = {
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/src/views/charts2/charts/npm/NpmLine.vue
@@ -38,13 +38,13 @@

 <script>
 import * as echarts from 'echarts'
-import {npmLineChartOption} from '@/views/charts2/charts/options/echartOption.js'
-import {shallowRef} from 'vue'
+import { npmLineChartOption } from '@/views/charts2/charts/options/echartOption.js'
+import { shallowRef } from 'vue'
 import _ from 'lodash'
-import {stackedLineTooltipFormatter} from '@/views/charts/charts/tools'
-import {getSecond} from '@/utils/date-util'
-import {get} from '@/utils/http'
-import {api} from '@/utils/api'
+import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'

--- a/src/views/charts2/charts/npm/NpmMap.vue
+++ b/src/views/charts2/charts/npm/NpmMap.vue
@@ -55,7 +55,7 @@ import { getSecond } from '@/utils/date-util'
 import { api, getData } from '@/utils/api'
 import { get } from '@/utils/http'
 import chartMixin from '@/views/charts2/chart-mixin'
-import {Rectangle3D} from '@amcharts/amcharts4/.internal/core/elements/3d/Rectangle3D'
+import { Rectangle3D } from '@amcharts/amcharts4/.internal/core/elements/3d/Rectangle3D'
 export default {
  name: 'NpmMap',
  data () {
--- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
@@ -47,13 +47,15 @@ export default {
  },
  methods: {
    npmNetworkCycleQuery () {
+      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
      let condition = ''
-      if (this.$store.getters.getQueryCondition.indexOf('OR') > -1) {
-        condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      if (conditionStr.indexOf('OR') > -1) {
+        condition = conditionStr.split(/["|'](.*?)["|']/)
      } else {
-        condition = this.$store.getters.getQueryCondition
+        condition = conditionStr
      }
-      const type = this.$store.getters.getDimensionType
+      // const type = this.$store.getters.getDimensionType
+      const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
@@ -113,13 +115,15 @@ export default {
      }
    },
    npmNetworkLastCycleQuery () {
+      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
      let condition = ''
-      if (this.$store.getters.getQueryCondition.indexOf('OR') > -1) {
-        condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      if (conditionStr.indexOf('OR') > -1) {
+        condition = conditionStr.split(/["|'](.*?)["|']/)
      } else {
-        condition = this.$store.getters.getQueryCondition
+        condition = conditionStr
      }
-      const type = this.$store.getters.getDimensionType
+      // const type = this.$store.getters.getDimensionType
+      const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -73,8 +73,11 @@ export default {
  },
  methods: {
    recentEventsListData () {
-      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
-      const type = this.$store.getters.getDimensionType
+      // const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
+      const condition = conditionStr.split(/["|'](.*?)["|']/)
+      // const type = this.$store.getters.getDimensionType
+      const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
      let url = ''
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
--- a/src/views/charts2/charts/npm/NpmTabs.vue
+++ b/src/views/charts2/charts/npm/NpmTabs.vue
@@ -79,7 +79,8 @@ export default {
    if (this.chart.panelId === drillDownPanelTypeMapping.npmOverviewIp) {
      const self = this
      // 当client或server的session数为0时，对应tab置灰，不可选，默认高亮另一个不为0的tab
-      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
+      const condition = conditionStr.split(/["|'](.*?)["|']/)
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -131,13 +131,15 @@ export default {
      if (!val) {
        val = 'Bits/s'
      }
+      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
      let condition = ''
-      if (this.$store.getters.getQueryCondition.indexOf('OR') > -1) {
-        condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      if (conditionStr.indexOf('OR') > -1) {
+        condition = conditionStr.split(/["|'](.*?)["|']/)
      } else {
-        condition = this.$store.getters.getQueryCondition
+        condition = conditionStr
      }
-      const type = this.$store.getters.getDimensionType
+      // const type = this.$store.getters.getDimensionType
+      const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
      if (this.chartData.id === 24) {
        this.side = 'client'
      } else if (this.chartData.id === 29) {
--- a/src/views/charts2/charts/npm/RelatedSessions.vue
+++ b/src/views/charts2/charts/npm/RelatedSessions.vue
@@ -59,7 +59,8 @@ export default {
  },
  methods: {
    relatedSessionsData () {
-      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
+      const condition = conditionStr.split(/["|'](.*?)["|']/)
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),