CN-710 下钻table配置化

src/components/layout/Header.vue

@@ -232,7 +232,8 @@ export default {
         }
       ],
       curPageNum: 1,
-      curTabState: curTabState
+      curTabState: curTabState,
+      urlChangeParams: {}
     }
   },
   computed: {
@@ -419,18 +420,16 @@ export default {
               queryCondition.push('common_server_port=' + valueGroup[1])
             }
             console.log(queryCondition.join(' AND '))
-            // this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
-            this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
+            this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
           } else {
             searchProps.forEach(item => {
               queryCondition.push(item + "='" + value + "'")
             })
-            // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
-            this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
+            this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
           }
         }
       }
-
+      this.changeUrlTabState()
       this.jump(this.path, columnName, value, operationType.fourthMenu)
     },
     shrink () {
@@ -452,12 +451,13 @@ export default {
         }
       })
     },
-    changeUrlTabState (param, value) {
+    changeUrlTabState () {
+      if (this.urlChangeParams && JSON.stringify(this.urlChangeParams) !== '{}') {
         const { query } = this.$route
-      const newQuery = {}
-      newQuery[param] = value
-      const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+        const newUrl = urlParamsHandler(window.location.href, query, this.urlChangeParams)
         overwriteUrl(newUrl)
+      }
+      this.urlChangeParams = {}
     },
     async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) {
       console.log('handleCurDrilldownTableConfig--------------')
@@ -504,14 +504,14 @@ export default {
       console.log('当前测试。。。。。。。。。。。')
       console.log(this.$_.cloneDeep(drillDownTableConfigs))
     },
-    async jump (route, columnName, columnValue, opeType) {
+    jump (route, columnName, columnValue, opeType) {
       this.showMenu = false
       const menus = this.breadcrumb
       if (opeType) {
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
-        this.changeUrlTabState(this.curTabState.tabOperationType, opeType)
+        this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
+        this.urlChangeParams[this.curTabState.tabOperationType] = opeType
       } else {
-        this.changeUrlTabState(this.curTabState.tabOperationType, operationType.mainMenu)
+        this.urlChangeParams[this.curTabState.tabOperationType] = operationType.mainMenu
       }
       if (!columnName) { // 点击第二级菜单
         this.$store.commit('setNetworkOverviewTabList', [])
@@ -525,68 +525,39 @@ export default {
               if (columnValue) { // 点击的为值
                 child.columnValue = columnValue
                 child.columnName = columnName
-                // this.$store.commit('setBreadcrumbColumnValue', columnValue)
-                // this.$store.commit('setBreadcrumbColumnName', columnName)
-                this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
-                this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
+                this.urlChangeParams[this.curTabState.thirdMenu] = columnName
+                this.urlChangeParams[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.changeUrlTabState(this.curTabState.dimensionType, type)
-                // this.$store.commit('setPanelName', columnValue)
-                this.changeUrlTabState(this.curTabState.panelName, columnValue)
+                this.urlChangeParams[this.curTabState.dimensionType] = type
+                this.urlChangeParams[this.curTabState.panelName] = columnValue
               } else if (columnName) { // 点击的为列名
                 child.columnValue = ''
                 child.columnName = 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)
+                this.urlChangeParams[this.curTabState.thirdMenu] = columnName
+                this.urlChangeParams[this.curTabState.fourthMenu] = ''
+                this.urlChangeParams[this.curTabState.panelName] = columnName
                 const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
                 const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
                 const curTab = getDefaultCurTab(tableType, metric, columnName)
-                this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
-                // 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)
-                this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, '')
+                this.urlChangeParams[this.curTabState.curTab] = curTab.prop
+                this.urlChangeParams[this.curTabState.dimensionType] = curTab ? curTab.prop : ''
+                this.$_.omit(this.urlChangeParams, [this.curTabState.queryCondition, this.curTabState.networkOverviewBeforeTab])
               } else {
                 child.columnName = ''
                 child.columnValue = ''
-                // this.$store.commit('setBreadcrumbColumnValue', '')
-                // this.$store.commit('setBreadcrumbColumnName', '')
-                this.changeUrlTabState(this.curTabState.thirdPanel, '')
-                this.changeUrlTabState(this.curTabState.fourthPanel, '')
-                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.changeUrlTabState(this.curTabState.curTab, null)
-                // this.$store.commit('setQueryCondition', '')
-                this.changeUrlTabState(this.curTabState.queryCondition, '')
-                // this.$store.commit('setNetworkOverviewBeforeTab', null)
-                this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, '')
+                this.$_.omit(this.urlChangeParams, [this.curTabState.thirdPanel, this.curTabState.fourthPanel, this.curTabState.thirdMenu, this.curTabState.fourthMenu, this.curTabState.dimensionType, this.curTabState.panelName, this.curTabState.curTab, this.curTabState.queryCondition, this.curTabState.networkOverviewBeforeTab])
               }
             }
           })
         }
       })
-      // console.log(this.$store.getters.getDimensionType)
+      this.changeUrlTabState()
       if (opeType === 2 || opeType === 0) { // 二级菜单 或主菜单
         // 如果有四级菜单，则将四级菜单对应tab的checked设置为true:根据columnName和columnValue 或 url判断不准确
         if (menus[3]) {
-          await this.handleCurDrilldownTableConfig(this.breadcrumb[2], this.breadcrumb[3])
+          this.handleCurDrilldownTableConfig(this.breadcrumb[2], this.breadcrumb[3])
         }
-        console.log('后面   handleCurDrilldownTableConfig')
-        // let path = this.$route.path; //先获取路由路径
-        // this.$router.push(path); //再跳转路由路径，query参数没带过去，所以被清除了
         this.$router.push({
           path: route,
           query: {

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

@@ -187,7 +187,8 @@ export default {
       flag: false,
       timerSearch: null,
       loadingBody: false,
-      curTabState: curTabState
+      curTabState: curTabState,
+      urlChangeParams: {}
     }
   },
   setup () {
@@ -326,7 +327,7 @@ export default {
         return this.$route.query[param] ? this.$route.query[param] : defaultValue
       }
     },
-    drillDownData (type, value) {
+    async drillDownData (type, value) {
       let tabType = ''
       if (type === 'provider') {
         tabType = 'network.providers'
@@ -334,58 +335,47 @@ export default {
         tabType = 'network.applications'
       }
       if (tabType) {
-        // const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
         const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
         const curTable = networkTable.networkOverview
-        // const list = this.$store.getters.getNetworkOverviewTabList
         const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
         const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
-        const list = getUserDrilldownTableConfig(tableType, metric)
+        const list = await getUserDrilldownTableConfig(tableType, metric)
         const tabGroup = list.filter(item => item.label === tabType)
         if (tabGroup && tabGroup.length > 0) {
-          // this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
-          this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop)
+          this.urlChangeParams[this.curTabState.networkOverviewBeforeTab] = tabGroup[0].prop
         }
-        // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-        // this.$store.commit('setTabOperationType', operationType.fourthMenu)
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
-        this.changeUrlTabState(this.curTabState.tabOperationType, operationType.fourthMenu)
+        this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
+        this.urlChangeParams[this.curTabState.tabOperationType] = operationType.fourthMenu
 
         const queryCondition = []
         const searchProps = tabGroup[0].dillDownProp
         searchProps.forEach(item => {
           queryCondition.push(item + "='" + value + "'")
         })
-        // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
-        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
+        this.urlChangeParams[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.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)
+              this.urlChangeParams[this.curTabState.panelName] = value
+              this.urlChangeParams[this.curTabState.thirdMenu] = tabType
+              this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
+              this.urlChangeParams[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.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)
+                this.urlChangeParams[this.curTabState.panelName] = value
+                this.urlChangeParams[this.curTabState.thirdMenu] = tabType
+                this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
+                this.urlChangeParams[this.curTabState.fourthMenu] = value
+
               }
             })
           }
@@ -404,8 +394,9 @@ export default {
         const tabObjGroup = list.filter(item => item.checked)
         if (tabObjGroup && tabObjGroup.length > 0) {
           const curTab = tabObjGroup[0]
-          this.changeUrlTabState(this.curTabState.curTab, curTab)
+          this.urlChangeParams[this.curTabState.curTab] = curTab
         }
+        this.changeUrlTabState()
         this.$router.push({
           query: {
             ...this.$route.query,
@@ -415,13 +406,13 @@ export default {
         })
       }
     },
-    // tab改变
-    changeUrlTabState (param, value) {
+    changeUrlTabState () {
+      if (this.urlChangeParams && JSON.stringify(this.urlChangeParams) !== '{}') {
         const { query } = this.$route
-      const newQuery = {}
-      newQuery[param] = value
-      const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+        const newUrl = urlParamsHandler(window.location.href, query, this.urlChangeParams)
         overwriteUrl(newUrl)
+      }
+      this.urlChangeParams = {}
     },
     initChart (obj) {
       let chart = this.myChart.find(m => m.name === obj.name && m.type === obj.type)

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

@@ -237,7 +237,8 @@ export default {
       chartData: [],
       tableSortColumn: '',
       tableSortType: '',
-      tableSortTab: ''
+      tableSortTab: '',
+      urlChangeParams: {}
     }
   },
   props: {
@@ -267,6 +268,7 @@ export default {
             q: condition
           }
         }
+        this.changeUrlTabState()
         this.getChartData(queryParams)
       }
     }
@@ -292,13 +294,13 @@ export default {
       try {
         this.initState()
         // const chartParams = this.chart.params
-        this.queryParams = {
+        const queryParams = {
           ...this.handleQueryParams(extraParams),
           startTime: getSecond(this.timeFilter.startTime),
           endTime: getSecond(this.timeFilter.endTime)
         }
         const requestUrl = this.getCurUrl()
-        get(requestUrl, this.queryParams).then(response => {
+        get(requestUrl, queryParams).then(response => {
           if (response.code === 200) {
             this.chartData = response.data.result
             this.initData()
@@ -309,6 +311,8 @@ export default {
         })
       } catch (e) {
         console.error(e)
+      } finally {
+        this.changeUrlTabState()
       }
     },
     cancleSortArrow () {
@@ -341,6 +345,7 @@ export default {
       return thirdMenu && fourthMenu
     },
     initState () {
+      console.log('InitState：开始')
       let curTab = this.getCurTab()
       if (curTab) { // 显示当前tab
         const realTab = this.list.find(item => item.label === curTab.label)
@@ -417,12 +422,11 @@ export default {
         curTab = this.getCurTab()
         if (curTab) {
           this.showTab(curTab)
-          this.changeUrlTabState(this.curTabState.curTab, curTab.prop)// curTab改变了，所有要更新
+          this.urlChangeParams[this.curTabState.curTab] = curTab.prop
         }
         this.showCustomizeTabs = true
         // this.setShowNum(10)
       } else if (this.isThirdMenu()) { // 点击的为第三级菜单
-        // const name = this.$store.getters.getBreadcrumbColumnName
         const name = this.getUrlParam(this.curTabState.thirdMenu, '')
         // const networkTabList = []
         this.list.forEach(item => {
@@ -431,25 +435,19 @@ export default {
           }
           // networkTabList.push(item)
         })
-        // this.$store.commit('setNetworkOverviewTabList', networkTabList)
         const breadcrumbColumnTab = this.list.find(item => item.label === name)
-        this.changeUrlTabState(this.curTabState.curTab, breadcrumbColumnTab.prop)
+        this.urlChangeParams[this.curTabState.curTab] = breadcrumbColumnTab.prop
 
         this.hideTabs(breadcrumbColumnTab)
         this.combineColumnList(breadcrumbColumnTab.label)
         this.showCustomizeTabs = false
-        // this.setShowNum(10)
       } else if (curOperationType === operationType.changeTab) { // 切换tab
-        // if (curTab) { // tab切换
-        // this.showTab(curTab)//???????
-        // }
         this.showCustomizeTabs = true
-        // this.setShowNum(10)
       } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、
-        this.list = this.$_.cloneDeep(this.allList)
+        // this.list = this.$_.cloneDeep(this.allList)
         if (curTab) {
           this.showTab(curTab)
-          this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
+          this.urlChangeParams[this.curTabState.curTab] = curTab.prop
         }
         if (thirdMenu && fourthMenu) {
           this.$nextTick(() => {
@@ -472,17 +470,14 @@ export default {
           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) {
         if (this.isThirdMenu()) {
           this.hideTabs(curTab)
           this.combineColumnList(curTab.label)
           this.showCustomizeTabs = false
         }
       } else if (curOperationType === operationType.customize) { // customize
-        // if (beforeOperationType === operationType.thirdMenu) {
         if (this.isThirdMenu()) {
           this.hideTabs(curTab)
           this.combineColumnList(curTab.label)
@@ -506,6 +501,8 @@ export default {
           })
         }
       }
+      this.changeUrlTabState()
+      console.log('InitState: 结束')
     },
     initData () {
       const tabList = []
@@ -707,14 +704,16 @@ export default {
       } else {
         this.toggleLoading(false)
       }
+      this.changeUrlTabState()
     },
     showMore () {
       this.setShowNum(50)
       this.sortChange(this.column, this.index)// 当前选中的tab？？？？
+      this.changeUrlTabState()
     },
     setShowNum (num) {
       this.showRecordNum = Number(num)
-      this.changeUrlTabState(curTabState.tableShowMore, this.showRecordNum)
+      this.urlChangeParams[curTabState.tableShowMore] = this.showRecordNum
     },
     rowClass (row, column, rowIndex, columnIndex) {
       if (rowIndex === 49) {
@@ -736,9 +735,16 @@ export default {
       return ['others', 999]
     },
     sortChange (column, index) {
-      this.changeUrlTabState(this.curTabState.tableSortColumn, column.prop)
-      this.changeUrlTabState(this.curTabState.tableSortType, column.order)
-      this.changeUrlTabState(this.curTabState.tableSortTab, index)
+      if (column.prop) {
+        this.urlChangeParams[this.curTabState.tableSortColumn] = column.prop
+      }
+      if (column.order) {
+        this.urlChangeParams[this.curTabState.tableSortType] = column.order
+      }
+      if (index || index === 0) {
+        this.urlChangeParams[this.curTabState.tableSortTab] = index
+      }
+
       this.index = index
       this.column = column
       const arr = []
@@ -843,13 +849,13 @@ export default {
       this.tableDataBackup = []
       this.setShowNum(10)
       const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
-      if (beforeType != operationType.thirdMenu) {
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
+      if (beforeType && beforeType != operationType.thirdMenu) {
+        this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
       }
-      this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeMetric)
+      this.urlChangeParams[this.curTabState.tabOperationType] = operationType.changeMetric
       const curTab = this.getCurTab()
       const label = curTab.label
-      this.changeUrlTabState(this.curTabState.tableMetric, this.metric)
+      this.urlChangeParams[this.curTabState.tableMetric] = this.metric
 
       // 1:先根据metric获得tabs，再根据当前tab，获得columns，再进行数据组装？？？
       if (this.metricsList && this.metricsList.length > 0) {
@@ -882,7 +888,6 @@ export default {
         limit: networkDefaultLimit,
         type: curTab.prop
       }
-      // const condition = this.$store.getters.getQueryCondition
       const condition = this.getQueryCondition()
       if (condition) {
         queryParams = {
@@ -892,6 +897,7 @@ export default {
           q: condition
         }
       }
+      this.changeUrlTabState()
       this.getChartData(queryParams)
     },
     handleCustomizeButton (status) {
@@ -901,9 +907,7 @@ 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.getUrlParam(this.curTabState.thirdMenu, '')
-      // const columnValue = this.$store.getters.getBreadcrumbColumnValue
       const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '')
       if (tabList.length === 1) {
         defaultTab.disabled = true
@@ -916,7 +920,6 @@ export default {
             }
           }
         })
-        // this.$store.commit('setNetworkOverviewTabList', this.list)
       }
     },
     // 隐藏tabs的标题
@@ -936,14 +939,13 @@ export default {
       })
     },
     // tab改变
-    changeUrlTabState (param, value) {
-      if (value != null && value != undefined) {
+    changeUrlTabState () {
+      if (this.urlChangeParams && JSON.stringify(this.urlChangeParams) !== '{}') {
         const { query } = this.$route
-        const newQuery = {}
-        newQuery[param] = value
-        const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+        const newUrl = urlParamsHandler(window.location.href, query, this.urlChangeParams)
         overwriteUrl(newUrl)
       }
+      this.urlChangeParams = {}
     },
     // 激活tab修改的内容：第一列的列名，list中此tab为checked=true
     showTab (curTab) {
@@ -953,7 +955,7 @@ export default {
       }
     },
     // 配置tab：显示隐藏与顺序
-    async tabChange (index) {
+    tabChange (index) {
       console.log('NetworkOverview类------tabChange：隐藏或显示tab-开始')
       console.log(this.list)
       console.log(this.curTable)
@@ -963,9 +965,9 @@ export default {
       // 操作类型设置
       const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
       if (beforeType != operationType.thirdMenu) {
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
+        this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
       }
-      this.changeUrlTabState(this.curTabState.tabOperationType, operationType.customize)
+      this.urlChangeParams[this.curTabState.tabOperationType] = operationType.customize
       // 获得操作tab和当前选中的所有tab
       const handleTab = this.list[index]
       const tabList = this.list.filter(item => item.checked === true)
@@ -1000,18 +1002,18 @@ export default {
         }
       }
 
-      await this.saveUserLocalConfig()
+      this.saveUserLocalConfig()
       // 如果取消tab，则如果取消的是当前选中的tab，则当前tab就需要修改为第一个默认的tab，否则不用
       const curTab = this.getCurTab()
       if (!handleTab.checked && handleTab.label === curTab.label) {
-        // this.showRecordNum = 10
         this.setShowNum(10)
-        this.changeUrlTabState(this.curTabState.curTab, tabList[0].prop)
+        this.urlChangeParams[this.curTabState.curTab] = tabList[0].prop
         let queryParams = {
           orderBy: this.orderBy,
           limit: networkDefaultLimit,
           type: tabList[0].prop
         }
+        this.changeUrlTabState()
         // const condition = this.$store.getters.getQueryCondition
         const condition = this.getQueryCondition()
         if (condition) {
@@ -1023,6 +1025,8 @@ export default {
           }
         }
         this.getChartData(queryParams)
+      } else {
+        this.changeUrlTabState()
       }
       console.log('NetworkOverview类------tabChange：隐藏或显示tab-结束')
       console.log(this.list)
@@ -1031,10 +1035,8 @@ export default {
       console.log('NetworkOverview类------tabChange：隐藏或显示tab-结束')
     },
     setOperationType (operationType) {
-      // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-      // this.$store.commit('setTabOperationType', operationType)
-      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
-      this.changeUrlTabState(this.curTabState.tabOperationType, operationType)
+      this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
+      this.urlChangeParams[this.curTabState.tabOperationType] = operationType
     },
     getTabByLabel (label) {
       let tab = null
@@ -1045,8 +1047,7 @@ export default {
       return tab
     },
     setBeforeTab (tab) {
-      // this.$store.commit('setNetworkOverviewBeforeTab', tab)
-      this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tab.prop)
+      this.urlChangeParams[this.curTabState.networkOverviewBeforeTab] = tab.prop
     },
     setQueryCondition (tab, value) {
       const queryCondition = []
@@ -1057,14 +1058,12 @@ export default {
           queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
           queryCondition.push('common_server_port=' + valueGroup[1])
         }
-        // this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
-        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
+        this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
       } else {
         searchProps.forEach(item => {
           queryCondition.push(item + "='" + value + "'")
         })
-        // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
-        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
+        this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
       }
     },
     getFirstCheckedTab () {
@@ -1083,14 +1082,15 @@ export default {
         4.设置菜单：第三级，第四级名称，并保存到store中
         5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type)
     * */
-    async handleTabValue (columnName, columnValue) {
+    handleTabValue (columnName, columnValue) {
       console.log('NetworkOverview类------handleTabValue：下钻')
       const clickTab = this.getTabByLabel(columnName)// 下钻后，显示的下钻tab对应的drilldownTabs
       this.setBeforeTab(clickTab)
       this.setOperationType(operationType.fourthMenu)
       this.setQueryCondition(clickTab, columnValue)
       const toPanel = clickTab.panelId
-      this.changeUrlTabState(this.curTabState.curTab, '')
+      this.urlChangeParams[this.curTabState.curTab] = ''
+      this.changeUrlTabState()
       const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
       const tabList = this.getAllTabList()
       if (this.isDrilldown()) { // 点击之前就已经是下钻状态了
@@ -1100,7 +1100,7 @@ export default {
           }
         })
         this.list = this.getDrilldownTabList(columnName)
-        this.combineTabList(this.list)
+        // this.combineTabList(this.list)
         const curTab = this.getCurTab(clickTab)
         tabList.forEach(tab => {
           if (tab.label === curTab.label && tab.columns) {
@@ -1110,7 +1110,7 @@ export default {
       } else {
         const changeTab = tabList.find(item => item.label == columnName)// 下钻的tab
         this.list = changeTab.drilldownTabs
-        this.combineTabList(this.list)
+        // this.combineTabList(this.list)
         const curTab = this.getCurTab(clickTab)
         tabList.forEach(tab => {
           if (tab.label === curTab.label && tab.columns) {
@@ -1118,32 +1118,32 @@ export default {
           }
         })
       }
-      await this.saveUserLocalConfig()
+      this.saveUserLocalConfig()
       console.log(this.drillDownTableConfigs)
       this.$store.getters.menuList.forEach(menu => {
         if (this.$_.isEmpty(menu.children) && menu.route) {
           if (this.$route.path === menu.route) {
             menu.columnName = columnName
             menu.columnValue = columnValue
-            this.changeUrlTabState(this.curTabState.panelName, columnValue)
-            this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
-            this.changeUrlTabState(this.curTabState.dimensionType, clickTab ? clickTab.prop : '')
-            this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
+            this.urlChangeParams[this.curTabState.panelName] = columnValue
+            this.urlChangeParams[this.curTabState.thirdMenu] = columnName
+            this.urlChangeParams[this.curTabState.dimensionType] = clickTab ? clickTab.prop : ''
+            this.urlChangeParams[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.changeUrlTabState(this.curTabState.panelName, columnValue)
-              this.changeUrlTabState(this.curTabState.thirdMenu, columnName)
-              this.changeUrlTabState(this.curTabState.dimensionType, clickTab ? clickTab.prop : '')
-              this.changeUrlTabState(this.curTabState.fourthMenu, columnValue)
+              this.urlChangeParams[this.curTabState.panelName] = columnValue
+              this.urlChangeParams[this.curTabState.thirdMenu] = columnName
+              this.urlChangeParams[this.curTabState.dimensionType] = clickTab ? clickTab.prop : ''
+              this.urlChangeParams[this.curTabState.fourthMenu] = columnValue
             }
           })
         }
       })
-
+      this.changeUrlTabState()
       this.$router.push({
         query: {
           ...this.$route.query,
@@ -1163,14 +1163,12 @@ export default {
           queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
           queryCondition.push('common_server_port=' + valueGroup[1])
         }
-        // this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
-        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' AND '))
+        this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
       } else {
         searchProps.forEach(item => {
           queryCondition.push(item + "='" + columnValue + "'")
         })
-        // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
-        this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
+        this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
       }
     },
     async metricChange () {
@@ -1226,28 +1224,29 @@ export default {
       this.tableSortColumn = ''
       this.tableSortType = ''
       this.tableSortTab = ''
-      this.changeUrlTabState(this.curTabState.tableSortColumn, '')
-      this.changeUrlTabState(this.curTabState.tableSortType, '')
-      this.changeUrlTabState(this.curTabState.tableSortTab, '')
+      this.urlChangeParams = this.$_.omit(this.urlChangeParams, [this.curTabState.tableSortColumn, this.curTabState.tableSortType, this.curTabState.tableSortTab])
       this.cancleSortArrow()
     },
     // 切换tab的时候，只需要修改列即可,但是列需要从indexDB中获取
-    async handleClick (tab) {
+    handleClick (tab) {
       this.tableData = []
       this.tableDataBackup = []
       this.setShowNum(10)
       this.clearSort()
-      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
-      this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeTab)
+      const tabOpeType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
+      if (tabOpeType) {
+        this.urlChangeParams[this.curTabState.tabOperationBeforeType] = tabOpeType
+      }
+      this.urlChangeParams[this.curTabState.tabOperationType] = operationType.changeTab
       // 下钻的tab觉得显示哪些tab，这些tab显示什么列，取决于tab本身
       const tabObjGroup = this.list.filter(item => item.label == tab.paneName)
       if (tabObjGroup && tabObjGroup.length > 0) {
         const curTab = tabObjGroup[0]
-        this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
+        this.urlChangeParams[this.curTabState.curTab] = curTab.prop
         if (curTab.columns) {
           this.combineColumnList(curTab.label)
         }
-        await this.saveUserLocalConfig()
+        this.saveUserLocalConfig()
         this.tab = curTab.prop
         let queryParams = {
           orderBy: this.orderBy,
@@ -1263,6 +1262,7 @@ export default {
             q: condition
           }
         }
+        this.changeUrlTabState()
         this.tableData = []
         this.tableDataBackup = []
         this.toggleLoading(true)
@@ -1270,7 +1270,6 @@ export default {
       }
     },
     getCurUrl () {
-      // const condition = this.$store.getters.getQueryCondition
       const condition = this.getQueryCondition()
       if (condition) {
         return this.networkSearchUrl.drilldownCurUrl
@@ -1279,7 +1278,6 @@ export default {
       }
     },
     gerCycleUrl () {
-      // const condition = this.$store.getters.getQueryCondition
       const condition = this.getQueryCondition()
       if (condition) {
         return this.networkSearchUrl.drilldownCycleUrl
@@ -1288,7 +1286,6 @@ export default {
       }
     },
     gerColumnUrl (tableColumn) {
-      // const condition = this.$store.getters.getQueryCondition
       const condition = this.getQueryCondition()
       if (condition) {
         return tableColumn.dillDownCycleDataUrl
@@ -1300,11 +1297,8 @@ export default {
       let queryType = ''
       const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
       const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
-      // const name = this.$store.getters.getBreadcrumbColumnName
       const name = this.getUrlParam(this.curTabState.thirdMenu, '')
-      // const curOperationType = this.$store.getters.getTabOperationType
       const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
-      // if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
       if (this.isFourthMenu()) { // 点击的为第四级菜单
         const curTab = this.getCurTab()
         if (curTab) {
@@ -1392,12 +1386,14 @@ export default {
         if (tabObjGroup && tabObjGroup.length > 0) {
           tabObjGroup[0].checked = true
           curTab = tabObjGroup[0]
-          this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
+          this.urlChangeParams[this.curTabState.curTab] = curTab.prop
+          this.changeUrlTabState()
         } else {
           if (this.list && this.list.length > 0) {
             this.list[0].checked = true
             curTab = this.list[0]
-            this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
+            this.urlChangeParams[this.curTabState.curTab] = curTab.prop
+            this.changeUrlTabState()
           }
         }
       } else {
@@ -1411,6 +1407,7 @@ export default {
       return curTab
     },
     combineTabList (tabList) {
+      console.log('CombineTabList：开始')
       const listInCode = this.curTableInCode ? this.curTableInCode.tabList : []
       tabList.forEach(tab => {
         const tabName = tab ? (tab.name ? tab.name : tab) : ''
@@ -1437,28 +1434,30 @@ export default {
         const oldList = this.$_.cloneDeep(tabList)
         tabList.forEach(tab => {
           const drilldownTabFull = []
-          tab.drilldownTabs.forEach(drilldownTab => {
+          const drilldownTabList = tab.drilldownTabs
+          drilldownTabList.forEach(drilldownTab => {
             if (!drilldownTab.hasOwnProperty('name') || drilldownTab.name === undefined || drilldownTab.name === null) {
               const drilldownTabName = drilldownTab || ''
               const fullTab = oldList.find(item => item.name === drilldownTabName)
-              if (fullTab) {
+              const drilldownTabWithAllInfo = this.$_.cloneDeep(fullTab)
+              if (drilldownTabWithAllInfo) {
                 const commonTab = this.commonTabList.find(item => item.name === drilldownTabName)
-                fullTab.label = commonTab ? commonTab.i18n : ''
-                fullTab.prop = commonTab ? commonTab.prop : ''
-                if (!fullTab.hasOwnProperty('panelId') || fullTab.panelId === undefined || tab.panelId === null) {
-                  fullTab.panelId = tab ? tab.panelIdOfFourthMenu : ''
+                drilldownTabWithAllInfo.label = commonTab ? commonTab.i18n : ''
+                drilldownTabWithAllInfo.prop = commonTab ? commonTab.prop : ''
+                /* if (!drilldownTabWithAllInfo.hasOwnProperty('panelId') || drilldownTabWithAllInfo.panelId === undefined || drilldownTabWithAllInfo.panelId === null) {
+                    drilldownTabWithAllInfo.panelId = tab ? tab.panelIdOfFourthMenu : ''
+                  } */
+                if (!drilldownTabWithAllInfo.hasOwnProperty('checked') || drilldownTabWithAllInfo.checked === undefined || drilldownTabWithAllInfo.checked === null) {
+                  drilldownTabWithAllInfo.checked = !((tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0))
                 }
-                if (!fullTab.hasOwnProperty('checked') || fullTab.checked === undefined || tab.checked === null) {
-                  fullTab.checked = !((tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0))
-                }
-                if (!fullTab.hasOwnProperty('disabled') || fullTab.disabled === undefined || tab.disabled === null) {
-                  fullTab.disabled = (tab.disabledDrilldownTabs.indexOf(drilldownTabName) >= 0)
+                if (!drilldownTabWithAllInfo.hasOwnProperty('disabled') || drilldownTabWithAllInfo.disabled === undefined || drilldownTabWithAllInfo.disabled === null) {
+                  drilldownTabWithAllInfo.disabled = (tab.disabledDrilldownTabs.indexOf(drilldownTabName) >= 0)
                 }
                 // 代码里写死的
                 const tabInCode = listInCode ? listInCode.find(item => item.label === fullTab.label) : {}
-                fullTab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
-                fullTab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
-                drilldownTabFull.push(fullTab)
+                drilldownTabWithAllInfo.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
+                drilldownTabWithAllInfo.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
+                drilldownTabFull.push(drilldownTabWithAllInfo)
               }
             }
           })
@@ -1467,14 +1466,15 @@ export default {
           }
         })
       }
+      console.log('CombineTabList：结束')
     },
     combineColumnList (tabLabel) {
+      console.log('CombineColumnList：开始')
       const allTabs = this.getAllTabList()
       const curTab = allTabs.find(item => item.label === tabLabel)
       const customTableTitles = curTab ? curTab.columns : []
       const hiddenColumnList = curTab ? curTab.hiddenColumns : []
       const disabledColumnList = curTab ? curTab.disabledColumns : []
-      // let list = customTableTitles, curTabColumns.hiddenColumns, curTabColumns.disabledColumns
       const newColumnList = []
       if (customTableTitles && customTableTitles.length > 0) {
         customTableTitles.forEach(column => {
@@ -1508,6 +1508,8 @@ export default {
           this.customTableTitles = customTableTitles
         }
       }
+
+      console.log('CombineColumnList：结束')
     },
     async getUserLocalConfig () {
       const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
@@ -1525,22 +1527,24 @@ export default {
         return false
       }
     },
-    async saveUserLocalConfig () {
-      console.log('NetworkOverview类------saveUserLocalConfig方法：保存用户设置')
-      /*
-      let curTab = this.getCurTab()
-      console.log(this.customTableTitles)
-      this.getAllTabList().forEach(tab => {
-        if(tab.name ===curTab.name){
-         tab.columns =  this.customTableTitles
+    isSetDrilldownTabInfo (tabList) {
+      let isSetDrilldownTabInfo = false
+      if (tabList && tabList.length > 0) {
+        const drilldownTab = tabList[0].drilldownTabs
+        if (drilldownTab && drilldownTab.length > 0 && drilldownTab.hasOwnProperty('name')) {
+          isSetDrilldownTabInfo = true
         }
-      }) */
+      }
+      return isSetDrilldownTabInfo
+    },
+    async saveUserLocalConfig () {
+      console.log('SaveUserLocalConfig方法：开始')
       console.log(this.drillDownTableConfigs)
       await db[dbDrilldownTableConfig].put({
         id: this.userId,
         config: this.$_.cloneDeep(this.drillDownTableConfigs)
       })
-      console.log('NetworkOverview类------saveUserLocalConfig方法：保存用户设置-end')
+      console.log('SaveUserLocalConfig方法：结束')
     },
     getAllTabList () {
       let tabs = []
@@ -1588,7 +1592,7 @@ export default {
     }
   },
   async mounted () {
-    console.log('NetworkOverview类------mounted：保存用户设置')
+    console.log('Mounted：开始')
     this.userId = localStorage.getItem(storageKey.userId)
     this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
     this.curTableInCode = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
@@ -1602,19 +1606,16 @@ export default {
     // 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
     const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
     if (userLocalCongfig) {
-      console.log('user..............')
       this.drillDownTableConfigs = userLocalCongfig.config
       console.log(this.drillDownTableConfigs)
     }
     if (!this.drillDownTableConfigs || this.drillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
-      console.log('default..............')
       const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
       if (defaultCongfig) {
         this.drillDownTableConfigs = defaultCongfig.config
         console.log(this.drillDownTableConfigs)
       }
     }
-    console.log('vvvvvvvv')
     console.log(this.drillDownTableConfigs)
     const currentTableConfig = this.drillDownTableConfigs.find(config => config.route === this.tableType)
     // 开始设置当前table，当前tab，当前tab对应的列等信息
@@ -1629,9 +1630,13 @@ export default {
           const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
           const tabList = this.getAllTabList()
           if (tabList && tabList.length > 0) {
+            if (!this.isSetDrilldownTabInfo(tabList)) { // 设否设置了下钻的详细信息
               this.combineTabList(tabList)
+            }
             const drilldownTab = tabList.find(item => item.label === thirdMenu)
             this.list = drilldownTab ? drilldownTab.drilldownTabs : []
+            console.log('下钻：list')
+            console.log(this.list)
             this.allList = this.$_.cloneDeep(tabList)// 备份所有配置，下钻及返回时使用
             const curTab = this.getCurTab()// 初始化完list，才能正确执行
             const curTabColumns = tabList.find(item => item.prop === curTab.prop)
@@ -1640,8 +1645,11 @@ export default {
           }
         } else { // 非下钻状态
           this.list = this.getAllTabList()
+          if (!this.isSetDrilldownTabInfo(this.list)) { // 设否设置了下钻的详细信息
             this.combineTabList(this.list)
+          }
           this.allList = this.$_.cloneDeep(this.list)// 备份所有配置，下钻及返回时使用
+          console.log('未下钻：list')
           console.log(this.list)
           if (this.list && this.list.length > 0) {
             const curTab = this.getCurTab()// 初始化完list，才能正确执行
@@ -1661,24 +1669,23 @@ export default {
         this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
       }
     }
-    console.log('第一次存储默认配置到localstorage')
-    console.log(this.drillDownTableConfigs)
-    await this.saveUserLocalConfig()
+    this.saveUserLocalConfig()
     this.getChartData()
     this.$nextTick(() => {
       setTimeout(() => {
         this.hasMetricSearch = this.curTable.hasMetricSearch
       }, 250)
     })
+    console.log('Mounted：结束')
   },
   setup (props) {
   },
-  async unmounted () {
-    console.log('NetworkOverview类------unmounted方法：退出界面时，将修改的配置存储到localstorage')
+  unmounted () {
+    console.log('Unmounted方法：开始')
     this.isNoData = false
-    console.log(this.customTableTitles)
     // 存储用户的设置
-    await this.saveUserLocalConfig()
+    this.saveUserLocalConfig()
+    console.log('Unmounted方法：结束')
   }
 }
 </script>

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

@@ -161,7 +161,8 @@ export default {
         { label: 'network.inbound', prop: 'inbound' }
       ],
       isNoData: false,
-      curTabState: curTabState
+      curTabState: curTabState,
+      urlChangeParams: {}
     }
   },
   components: {
@@ -259,62 +260,47 @@ export default {
         return this.$route.query[param] ? this.$route.query[param] : defaultValue
       }
     },
-    drillDownData (key) {
+    async drillDownData (key) {
       const value = npmCategoryToAppCategoryMap[key]
       const tabType = 'network.applicationCategories'
-      // 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 tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
       const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
-      const list = getUserDrilldownTableConfig(tableType, metric)
+      const list = await getUserDrilldownTableConfig(tableType, metric)
       const tabGroup = list.filter(item => item.label === tabType)
       if (tabGroup && tabGroup.length > 0) {
-        // this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
-        this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop)
+        this.urlChangeParams[this.curTabState.networkOverviewBeforeTab] = tabGroup[0].prop
       }
-      // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-      // this.$store.commit('setTabOperationType', operationType.fourthMenu)
-      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
-      this.changeUrlTabState(this.curTabState.tabOperationType, operationType.fourthMenu)
+      this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
+      this.urlChangeParams[this.curTabState.tabOperationType] = operationType.fourthMenu
 
       const queryCondition = []
       const searchProps = tabGroup[0].dillDownProp
       searchProps.forEach(item => {
         queryCondition.push(item + "='" + value + "'")
       })
-      // this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
-      this.changeUrlTabState(this.curTabState.queryCondition, queryCondition.join(' OR '))
+      this.urlChangeParams[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.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)
+            this.urlChangeParams[this.curTabState.panelName] = value
+            this.urlChangeParams[this.curTabState.thirdMenu] = tabType
+            this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
+            this.urlChangeParams[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.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)
+              this.urlChangeParams[this.curTabState.panelName] = value
+              this.urlChangeParams[this.curTabState.thirdMenu] = tabType
+              this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
+              this.urlChangeParams[this.curTabState.fourthMenu] = value
             }
           })
         }
@@ -333,8 +319,9 @@ export default {
       const tabObjGroup = list.filter(item => item.checked)
       if (tabObjGroup && tabObjGroup.length > 0) {
         const curTab = tabObjGroup[0]
-        this.changeUrlTabState(this.curTabState.curTab, curTab)
+        this.urlChangeParams[this.curTabState.curTab] = curTab
       }
+      this.changeUrlTabState()
       this.$router.push({
         query: {
           ...this.$route.query,
@@ -343,14 +330,14 @@ export default {
         }
       })
     },
-    // tab改变
-    changeUrlTabState (param, value) {
+    changeUrlTabState () {
+      if (this.urlChangeParams && JSON.stringify(this.urlChangeParams) !== '{}') {
         const { query } = this.$route
-      const newQuery = {}
-      newQuery[param] = value
-      const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+        const newUrl = urlParamsHandler(window.location.href, query, this.urlChangeParams)
         overwriteUrl(newUrl)
       }
+      this.urlChangeParams = {}
+    }
   },
   mounted () {
     this.init()