Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

# Conflicts:
#	src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue

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('setBreadcrumbColumnValue', columnValue)
-                this.$store.commit('setBreadcrumbColumnName', columnName)
+                // 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('setDimensionType', type)
-                this.$store.commit('setPanelName', columnValue)
+                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('setBreadcrumbColumnValue', '')
-                this.$store.commit('setBreadcrumbColumnName', columnName)
+                // this.$store.commit('setBreadcrumbColumnName', columnName)
-                this.$store.commit('setPanelName', 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]
+                const curTab = tabList.filter(item => item.label === columnName)[0]
-                this.changeTabState(this.curTabState.curTab, curTab)
+                this.changeUrlTabState(this.curTabState.curTab, curTab)
-                this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
+                // this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
-                this.$store.commit('setQueryCondition', '')
+                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('setBreadcrumbColumnValue', '')
-                this.$store.commit('setBreadcrumbColumnName', '')
+                // this.$store.commit('setBreadcrumbColumnName', '')
-                this.$store.commit('setDimensionType', '')
+                this.changeUrlTabState(this.curTabState.thirdMenu, '')
-                this.$store.commit('setPanelName', '')
+                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.changeUrlTabState(this.curTabState.curTab, null)
-                this.$store.commit('setQueryCondition', '')
+                // this.$store.commit('setQueryCondition', '')
+                this.changeUrlTabState(this.curTabState.queryCondition, '')
                 this.$store.commit('setNetworkOverviewBeforeTab', null)
               }
             }

src/store/modules/panel.js

@@ -37,13 +37,13 @@ const panel = {
             breadcrumbColumnValue、
             queryCondition
      */
-    panelName: '', // 网络概况的Panel的名称
+    // panelName: '', // 网络概况的Panel的名称
-    breadcrumbColumnName: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
+    // breadcrumbColumnName: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
-    dimensionType: '', // 维度
+    // dimensionType: '', // 维度
-    breadcrumbColumnValue: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
+    // 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) {
+    // setPanelName (state, panelName) {
-      state.panelName = panelName
+    // state.panelName = panelName
-    },
+    // },
-    setBreadcrumbColumnName (state, breadcrumbColumnName) {
+    // setBreadcrumbColumnName (state, breadcrumbColumnName) {
-      state.breadcrumbColumnName = breadcrumbColumnName
+    // state.breadcrumbColumnName = breadcrumbColumnName
-    },
+    // },
-    setDimensionType (state, dimensionType) {
+    // setDimensionType (state, dimensionType) {
-      state.dimensionType = dimensionType
+    // state.dimensionType = dimensionType
-    },
+    // },
-    setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
+    // setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
-      state.breadcrumbColumnValue = breadcrumbColumnValue
+    // state.breadcrumbColumnValue = breadcrumbColumnValue
-    },
+    // },
     // setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
     // state.networkOverviewCurrentTab = networkOverviewCurrentTab
     // },
-    setQueryCondition (state, queryCondition) {
+    // setQueryCondition (state, queryCondition) {
-      state.queryCondition = queryCondition
+    // state.queryCondition = queryCondition
-    },
+    // },
     setNetworkOverviewTabList (state, networkOverviewTabList) {
       state.networkOverviewTabList = networkOverviewTabList
     },
@@ -183,24 +183,24 @@ const panel = {
     getCurrentMap (state) {
       return state.currentMap
     },
-    getPanelName (state) {
+    // getPanelName (state) {
-      return state.panelName
+    // return state.panelName
-    },
+    // },
-    getBreadcrumbColumnName (state) {
+    // getBreadcrumbColumnName (state) {
-      return state.breadcrumbColumnName
+    // return state.breadcrumbColumnName
-    },
+    // },
-    getDimensionType (state) {
+    // getDimensionType (state) {
-      return state.dimensionType
+    // return state.dimensionType
-    },
+    // },
-    getBreadcrumbColumnValue (state) {
+    // getBreadcrumbColumnValue (state) {
-      return state.breadcrumbColumnValue
+    // return state.breadcrumbColumnValue
-    },
+    // },
     // getNetworkOverviewCurrentTab (state) {
     // return state.networkOverviewCurrentTab
     // },
-    getQueryCondition (state) {
+    // getQueryCondition (state) {
-      return state.queryCondition
+    // return state.queryCondition
-    },
+    // },
     getNetworkOverviewTabList (state) {
       return state.networkOverviewTabList
     },

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

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
     }
   }
 }

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('setPanelName', value)
-              this.$store.commit('setBreadcrumbColumnName', tabType)
+              this.changeUrlTabState(this.curTabState.panelName, value)
-              this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
+              // this.$store.commit('setBreadcrumbColumnName', tabType)
-              this.$store.commit('setBreadcrumbColumnValue', value)
+              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('setPanelName', value)
-                this.$store.commit('setBreadcrumbColumnName', tabType)
+                this.changeUrlTabState(this.curTabState.panelName, value)
-                this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
+                // this.$store.commit('setBreadcrumbColumnName', tabType)
-                this.$store.commit('setBreadcrumbColumnValue', value)
+                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) {
+    // tab改变
-      const query = {
+    changeUrlTabState (param, value) {
-        ...this.$route.query
+      const { query } = this.$route
-      }
+      const newQuery = {}
-      query[param] = value
+      newQuery[param] = value
-      this.$router.push({
+      const newUrl = urlParamsHandler(window.location.href, query, newQuery)
-        query: query
+      overwriteUrl(newUrl)
-      })
     },
     initChart (obj) {
       let chart = this.myChart.find(m => m.name === obj.name && m.type === obj.type)

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

@@ -201,6 +201,11 @@ export default {
       if (this.queryCondition) {
         params.q = this.queryCondition
       }
+      // const condition = this.$store.getters.getQueryCondition
+      const condition = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
+      if (condition) {
+        params.q = condition
+      }
       this.toggleLoading(true)
       get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
         if (res.code === 200) {

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

@@ -365,20 +365,31 @@ export default {
       })
 
       // 针对network overview – app list 点击标题触发下钻，相关内容处理
-      const columnName = this.$store.getters.getBreadcrumbColumnName
+      // const columnName = this.$store.getters.getBreadcrumbColumnName
-      if (columnName) {
+      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 => {
+        if (item.checked) {
           const tabDom = document.getElementById('tab-' + item.label)
           if (tabDom) {
             tabDom.style.display = ''
           }
+        }
       })
 
       let curTab = this.getCurTab()
@@ -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 columnName = this.$store.getters.getBreadcrumbColumnName
-      const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      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) {
+      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 columnName = this.$store.getters.getBreadcrumbColumnName
-      const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      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('setPanelName', columnValue)
-            this.$store.commit('setBreadcrumbColumnName', columnName)
+            this.changeUrlTabState(this.curTabState.panelName, columnValue)
-            this.$store.commit('setDimensionType', clickTab ? clickTab.prop : '')
+            // this.$store.commit('setBreadcrumbColumnName', columnName)
-            this.$store.commit('setBreadcrumbColumnValue', columnValue)
+            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('setPanelName', columnValue)
-              this.$store.commit('setBreadcrumbColumnName', columnName)
+              this.changeUrlTabState(this.curTabState.panelName, columnValue)
-              this.$store.commit('setDimensionType', clickTab ? clickTab.prop : '')
+              // this.$store.commit('setBreadcrumbColumnName', columnName)
-              this.$store.commit('setBreadcrumbColumnValue', columnValue)
+              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

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('setPanelName', value)
-            this.$store.commit('setBreadcrumbColumnName', tabType)
+            this.changeUrlTabState(this.curTabState.panelName, value)
-            this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
+            // this.$store.commit('setBreadcrumbColumnName', tabType)
-            this.$store.commit('setBreadcrumbColumnValue', value)
+            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('setPanelName', value)
-              this.$store.commit('setBreadcrumbColumnName', tabType)
+              this.changeUrlTabState(this.curTabState.panelName, value)
-              this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
+              // this.$store.commit('setBreadcrumbColumnName', tabType)
-              this.$store.commit('setBreadcrumbColumnValue', value)
+              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) {
+    // tab改变
-      const query = {
+    changeUrlTabState (param, value) {
-        ...this.$route.query
+      const { query } = this.$route
-      }
+      const newQuery = {}
-      query[param] = value
+      newQuery[param] = value
-      this.$router.push({
+      const newUrl = urlParamsHandler(window.location.href, query, newQuery)
-        query: query
+      overwriteUrl(newUrl)
-      })
     }
   },
   mounted () {

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,
+          // type: this.$store.getters.getDimensionType,
-          typeVal: this.$store.getters.getBreadcrumbColumnValue
+          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 = {

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) {
+      if (conditionStr.indexOf('OR') > -1) {
-        condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+        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) {
+      if (conditionStr.indexOf('OR') > -1) {
-        condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+        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),

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

@@ -73,8 +73,11 @@ export default {
   },
   methods: {
     recentEventsListData () {
-      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      // const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
-      const type = this.$store.getters.getDimensionType
+      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),

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),

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

@@ -131,13 +131,15 @@ export default {
       if (!val) {
         val = this.metricFilter
       }
+      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
       let condition = ''
-      if (this.$store.getters.getQueryCondition.indexOf('OR') > -1) {
+      if (conditionStr.indexOf('OR') > -1) {
-        condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+        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) {

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),