CN-710 下钻table配置化

src/components/layout/Header.vue

@@ -183,7 +183,7 @@ import { get, put } from '@/utils/http'
 import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, curTabState } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
-import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl, getUserDrilldownTableConfig } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
 
 export default {
@@ -390,10 +390,10 @@ export default {
     hideBreadcrumbPopover () {
       this.showBackground = false
     },
-    getUrlParam (param, defaultValue,isNumber) {
+    getUrlParam (param, defaultValue, isNumber) {
-      if(isNumber){
+      if (isNumber) {
         return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
-      }else {
+      } else {
         return this.$route.query[param] ? this.$route.query[param] : defaultValue
       }
     },
@@ -461,12 +461,12 @@ export default {
     jump (route, columnName, columnValue, opeType) {
       this.showMenu = false
       if (opeType) {
-        //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
+        // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-        //this.$store.commit('setTabOperationType', opeType)
+        // this.$store.commit('setTabOperationType', opeType)
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
+        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
         this.changeUrlTabState(this.curTabState.tabOperationType, opeType)
       } else {
-        //this.$store.commit('setTabOperationType', operationType.mainMenu)
+        // this.$store.commit('setTabOperationType', operationType.mainMenu)
         this.changeUrlTabState(this.curTabState.tabOperationType, operationType.mainMenu)
       }
       if (!columnName) { // 点击第二级菜单
@@ -499,20 +499,25 @@ export default {
                 this.changeUrlTabState(this.curTabState.fourthMenu, '')
                 // this.$store.commit('setPanelName', columnName)
                 this.changeUrlTabState(this.curTabState.panelName, columnName)
-                const tabList = this.$store.getters.getNetworkOverviewTabList
+                const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+                const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
+                // const tabList = this.$store.getters.getNetworkOverviewTabList
+                const tabList = getUserDrilldownTableConfig(tableType, metric)
                 const curTab = tabList.filter(item => item.label === columnName)[0]
                 this.changeUrlTabState(this.curTabState.curTab, curTab)
                 // this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
                 this.changeUrlTabState(this.curTabState.dimensionType, curTab ? curTab.prop : '')
                 // this.$store.commit('setQueryCondition', '')
                 this.changeUrlTabState(this.curTabState.queryCondition, '')
-                //this.$store.commit('setNetworkOverviewBeforeTab', null)
+                // this.$store.commit('setNetworkOverviewBeforeTab', null)
                 this.changeUrlTabState(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', '')
@@ -523,7 +528,7 @@ export default {
                 this.changeUrlTabState(this.curTabState.curTab, null)
                 // this.$store.commit('setQueryCondition', '')
                 this.changeUrlTabState(this.curTabState.queryCondition, '')
-                //this.$store.commit('setNetworkOverviewBeforeTab', null)
+                // this.$store.commit('setNetworkOverviewBeforeTab', null)
                 this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, '')
               }
             }

src/store/modules/panel.js

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

src/utils/constants.js

@@ -31,6 +31,7 @@ export const storageKey = {
   echartLabelFontSize: 'echartLabelFontSize',
   tokenExpireCurrentPath: 'token-expire-current-path',
   drillDownTableConfig: 'cn-drill-down-table-config',
+  userCustomizationConfig: 'userCustomizationConfig'
   linkInfo: 'cn-link-info'
 }
 export const largeCountryList = ['CN', 'US', 'RU', 'AU', 'CA', 'KZ', 'IN', 'BR']
@@ -252,9 +253,11 @@ export const curTabState = {
   panelName: 'panelName',
   thirdMenu: 'thirdMenu',
   fourthMenu: 'fourthMenu',
+  thirdPanel: 'thirdPanel',
+  fourthPanel: 'fourthPanel',
   networkOverviewBeforeTab: 'networkOverviewBeforeTab',
-  tabOperationType:'tabOperationType',
+  tabOperationType: 'tabOperationType',
-  tabOperationBeforeType:'tabOperationBeforeType'
+  tabOperationBeforeType: 'tabOperationBeforeType'
 }
 
 export const scoreUrl = [
@@ -676,9 +679,6 @@ export const sessionsColumnNameGroup = {
 export const bytesCycleColumnNameGroup = {
   total: 'bytesRate'
 }
-export const bytesCycleColumnNameGroupForNmp = {
-  through: 'throughBitsRate'
-}
 export const packetsCycleColumnNameGroup = {
   total: 'packetsRate'
 }
@@ -686,6 +686,10 @@ export const sessionsCycleColumnNameGroup = {
   total: 'sessionsRate'
 }
 
+export const bytesCycleColumnNameGroupForNmp = {
+  through: 'throughBitsRate'
+}
+
 // 不同表格类型对应的相关数据
 export const networkTable = {
   networkOverview: {

src/utils/tools.js

@@ -1,7 +1,7 @@
 import { ElMessageBox, ElMessage } from 'element-plus'
 import i18n from '@/i18n'
 import _ from 'lodash'
-import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName } from '@/utils/constants'
+import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable } from '@/utils/constants'
 import { getIso36112JsonData } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
@@ -846,6 +846,74 @@ export function changeTabState (param, value) {
   })
 }
 
+export function combineTabList (tableType, list, commonTabList) {
+  const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
+  const listInCode = curTableInCode ? curTableInCode.tabList : []
+  list.forEach(tab => {
+    // 配置的内容
+    const commonTab = commonTabList.find(item => item.name === tab.name)
+    tab.label = commonTab ? commonTab.i18n : ''
+    tab.prop = commonTab ? commonTab.prop : ''
+    if (!tab.hasOwnProperty('checked')) {
+      tab.checked = tab ? tab.show : true
+    }
+    if (!tab.hasOwnProperty('disabled')) {
+      tab.disabled = tab ? !tab.enable : false
+    }
+    if (!tab.hasOwnProperty('panelId')) {
+      tab.panelId = tab ? tab.panelIdOfFourthMenu : null
+    }
+    // 代码里写死的
+    const tabInCode = listInCode ? listInCode.find(item => item.label === tab.label) : {}
+    tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
+    tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
+  })
+}
+
+export function setUserConfig () {
+  const userTableConfig = this.getUserLocalConfig()
+  if (userTableConfig) {
+    const newTabConfigs = []
+    userTableConfig.tabConfig.forEach(tab => {
+      const tabConfig = this.list.find(item => item.name === tab.name)
+      if (tabConfig) {
+        tabConfig.checked = tab ? tab.checked : true
+      } else {
+        tabConfig.checked = true
+      }
+      newTabConfigs.push(tabConfig)
+    })
+    this.list = newTabConfigs
+  }
+}
+
+export function getUserDrilldownTableConfig (tableType, curMetric) {
+  let list = []
+  const defaultDrillDownTableConfigs = JSON.parse(localStorage.getItem(storageKey.drillDownTableConfig))// 所有表格的配置
+  const currentTableConfig = defaultDrillDownTableConfigs.find(config => config.route === tableType)
+  const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
+  const tables = currentTableConfig ? currentTableConfig.tables : []
+  if (tables && tables.length > 0) {
+    const curTableOldConfig = tables.find(table => table.id === tableType)
+    const curTable = curTableOldConfig || null
+    if (curTable) {
+      if (curTable.hasMetricSearch) { // 有metric
+        const metricsList = curTable ? curTable.metrics : []
+        if (metricsList && metricsList.length > 0) {
+          const metricTab = metricsList.find(metric => metric.name === curMetric)
+          list = metricTab ? metricTab.tabs : []
+        }
+      } else { // 无metric
+        list = curTable ? curTable.tabs : []
+      }
+      combineTabList(tableType, list, commonTabList)
+      // this.combineColumnList(this.customTableTitles)
+      // this.setUserConfig(list)
+    }
+  }
+  return list
+}
+
 // cleanOldParams: true|false，是否清除oldParams
 export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
   let newUrl = url.split('?')[0]

src/views/charts2/Panel.vue

@@ -76,8 +76,8 @@ export default {
     npmThirdLevelMenuScore: {
       deep: true,
       handler (n) {
-        //const curOperationType = this.$store.getters.getTabOperationType
+        // const curOperationType = this.$store.getters.getTabOperationType
-        const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true)
+        const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
         if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
           this.score = n
         }
@@ -87,8 +87,8 @@ export default {
   async mounted () {
     // this.panelName = this.$store.getters.getPanelName
     this.panelName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
-    //const curOperationType = this.$store.getters.getTabOperationType
+    // const curOperationType = this.$store.getters.getTabOperationType
-    const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true)
+    const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
     if (this.panelName && this.$route.path === '/panel/networkAppPerformance' && curOperationType !== operationType.thirdMenu) {
       // const columnValue = this.$store.getters.getBreadcrumbColumnValue
       const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '')
@@ -240,13 +240,13 @@ export default {
         this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
       }
     },
-    getUrlParam (param, defaultValue,isNumber) {
+    getUrlParam (param, defaultValue, isNumber) {
-      if(isNumber){
+      if (isNumber) {
         return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
-      }else {
+      } else {
         return this.$route.query[param] ? this.$route.query[param] : defaultValue
       }
-    },
+    }
   }
 }
 </script>

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

@@ -132,7 +132,7 @@ import { get, put } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
 import { getSecond } from '@/utils/date-util'
-import { getChainRatio, overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { getChainRatio, overwriteUrl, urlParamsHandler, getUserDrilldownTableConfig } from '@/utils/tools'
 import loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
@@ -315,10 +315,10 @@ export default {
       }
       this.init()
     },
-    getUrlParam (param, defaultValue,isNumber) {
+    getUrlParam (param, defaultValue, isNumber) {
-      if(isNumber){
+      if (isNumber) {
         return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
-      }else {
+      } else {
         return this.$route.query[param] ? this.$route.query[param] : defaultValue
       }
     },
@@ -330,18 +330,21 @@ export default {
         tabType = 'network.applications'
       }
       if (tabType) {
-        //const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
+        // const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
         const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
         const curTable = networkTable.networkOverview
-        const list = this.$store.getters.getNetworkOverviewTabList
+        // const 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 tabGroup = list.filter(item => item.label === tabType)
         if (tabGroup && tabGroup.length > 0) {
-          //this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
+          // this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
           this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop)
         }
-        //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
+        // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-        //this.$store.commit('setTabOperationType', operationType.fourthMenu)
+        // this.$store.commit('setTabOperationType', operationType.fourthMenu)
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
+        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
         this.changeUrlTabState(this.curTabState.tabOperationType, operationType.fourthMenu)
 
         const queryCondition = []

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

@@ -143,9 +143,8 @@
           </el-tab-pane>
           <el-tab-pane :label="$t('network.metric')" name="metrics" width="50%" >
             <transition-group name="dragMetric" class="list" tag="ul" ref="metric">
-              <template v-for="(item, index) in customTableTitles">
+              <template v-for="(item, index) in customTableTitles"  :key="item.label">
-                <li v-if="item.tabColumn != true"
+                <li v-if="index>0"
-                    :key="item.label"
                         class="list-item"
                     @dragenter="dragMetricEnter($event, index)"
                     @dragover="dragMetricOver($event, index)"
@@ -154,7 +153,7 @@
                 >
                   <i class="cn-icon-sort cn-icon icon-drag"
                      :key="item.label"
-                  ></i> <el-checkbox @change="metricChange" v-model="item.checked"  :label="$t(item.label) " size="small" :key="item.label"/>
+                  ></i> <el-checkbox @change="metricChange" :disabled="item.disabled" v-model="item.checked"  :label="$t(item.label) " size="small" :key="item.label"/>
                 </li>
               </template>
             </transition-group>
@@ -169,7 +168,7 @@
 </template>
 <script>
 import { ref } from 'vue'
-import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState } from '@/utils/constants'
+import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState, storageKey } from '@/utils/constants'
 import { get } from '@/utils/http'
 import unitConvert from '@/utils/unit-convert'
 import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl } from '@/utils/tools'
@@ -205,8 +204,12 @@ export default {
           label: 'Sessions/s'
         }
       ],
+      customTableTitlesForTab: [],
       customTableTitles: [],
+      commonTabList: [],
+      commonColumnList: [],
       list: [], // 当前状态列表
+      allList: [], // 包含2级标签的所有状态的列表
       networkTabList: [], // 原始状态列表
       showBackground: false,
       tableData: [],
@@ -215,11 +218,13 @@ export default {
       showCustomizeTabs: true,
       columnNameGroup: {},
       cycleColumnNameGroup: {},
-      metricUnit: 'bytes',
+      // metricUnit: 'bytes',
       // loading: false,
       tableColumnType: tableColumnType,
+      metricsList: [],
       curTabState: curTabState,
       curTable: {}, // 当前的表格类型
+      curTableInCode: {}, // 代码中的配置
       tableType: '',
       hasMetricSearch: true,
       activeTab: '',
@@ -249,16 +254,37 @@ export default {
         }
       }
     }, */
+    list: {
+      deep: true,
+      handler (n) {
+        if (this.hasMetricSearch) {
+          if (this.metricsList && this.metricsList.length > 0) {
+            this.metricsList.forEach(metric => {
+              if (metric.name != this.metric) {
+                // metric.tabs = this.list
+                metric.tabs.forEach(metricTabItem => {
+                  const newConfig = this.list.find(item => item.name === metricTabItem.name)
+                  // metricTabItem.show = newConfig?newConfig.checked:true
+                  // metricTabItem.checked = newConfig?newConfig.checked:true
+                })
+              }
+            })
+          }
+        }
+      }
+    },
     timeFilter: {
       deep: true,
       handler (n) {
+        console.log('watch')
         const curTab = this.getCurTab()
         let queryParams = {
           orderBy: this.orderBy,
           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,
@@ -273,6 +299,7 @@ export default {
   },
   computed: {
     tableClass () {
+      console.log('computed')
       let className
       if (this.showRecordNum >= 10) {
         className = 'tab-table__average'
@@ -302,6 +329,9 @@ export default {
           if (response.code === 200) {
             this.chartData = response.data.result
             this.initData()
+          } else {
+            this.isNoData = true
+            this.toggleLoading(false)
           }
         })
       } catch (e) {
@@ -327,23 +357,37 @@ export default {
         this.index = 0
       }
     },
+    isThirdMenu () { // 当前是否为3级
+      const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
+      const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
+      return thirdMenu && !fourthMenu
+    },
+    isFourthMenu () { // 当前是否为4级
+      const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
+      const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
+      return thirdMenu && fourthMenu
+    },
     initState () {
       let curTab = this.getCurTab()
-      // 没有选中任何tab时，默认选中第一个
-      const tabList = this.list.filter(item => item.checked === true)
-      if (tabList.length === 0) {
-        this.list[0].checked = true
-        this.showTab(this.list[0])
-      } else {
-        //this.showTab(tabList[0])
       if (curTab) { // 显示当前tab
-          let realTab = this.list.find(item => item.label===curTab.label)
+        const realTab = this.list.find(item => item.label === curTab.label)
-          if(realTab){
+        if (realTab) {
           realTab.checked = true
         }
         this.showTab(curTab)
       }
+      /*
+      else {// 没有选中任何tab时，默认选中第一个
+        const tabList = this.list.filter(item => item.checked === true)
+        if (tabList.length > 0) {
+          tabList[0].checked = true
+          this.showTab(tabList[0])
+        }else {
+          this.list[0].checked = true
+          this.showTab(this.list[0])
         }
+      } */
+
       this.isNoData = false
       this.tableData = []
       this.tableDataBackup = []
@@ -373,7 +417,6 @@ export default {
       })
 
       // 针对network overview – app list 点击标题触发下钻，相关内容处理
-      // const columnName = this.$store.getters.getBreadcrumbColumnName
       const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
       const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
       if (thirdMenu && fourthMenu) {
@@ -382,15 +425,16 @@ export default {
             item.checked = false
           }
         })
-        this.$store.commit('setNetworkOverviewTabList', this.list)
+        // 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.$store.commit('setNetworkOverviewTabList', this.list)
       }
+      // 选中的都进行展示
       this.list.forEach(item => {
         if (item.checked) {
           const tabDom = document.getElementById('tab-' + item.label)
@@ -400,11 +444,12 @@ export default {
         }
       })
 
-      if (this.metric === 'Sessions/s') {
+      if (this.hasMetricSearch && this.metric === 'Sessions/s') {
         this.columnNameGroup = this.curTable.sessionsColumnNameGroup
         this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
         this.orderBy = 'sessions'
         this.metricUnit = 'sessions'
+        /*
         let totalChecked = true
         this.customTableTitles.forEach(item => {
           if (item.prop === 'total') {
@@ -415,49 +460,52 @@ export default {
         this.customTableTitles = [
           { label:curTab.label, prop: 'tab', checked: true, tabColumn: true, columnType: this.curTable.column[0].columnType },
           { label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false, columnType: this.curTable.column[1].columnType, cycleDataUrl: totalColumn ? totalColumn.cycleDataUrl : '', isInMainUrl: true }
-        ]
+        ] */
       }
 
-      //const curOperationType = this.$store.getters.getTabOperationType
+      // this.showCustomizeTabs = true
-      //const beforeOperationType = this.$store.getters.getTabOperationBeforeType
+      // this.setShowNum(10)
-      const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true)
+      const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
-      const beforeOperationType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '',true)
+      const beforeOperationType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
-      if (curOperationType === operationType.changeTab) { // 切换tab
+      if (this.isFourthMenu()) { // 点击的为第四级菜单
-        if (curTab) { // tab切换
+        curTab = this.getCurTab()
+        if (curTab) {
           this.showTab(curTab)
+          this.changeUrlTabState(this.curTabState.curTab, curTab.prop)// curTab改变了，所有要更新
         }
         this.showCustomizeTabs = true
-        this.setShowNum(10)
+        // this.setShowNum(10)
-      } else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
+      } else if (this.isThirdMenu()) { // 点击的为第三级菜单
         // const name = this.$store.getters.getBreadcrumbColumnName
         const name = this.getUrlParam(this.curTabState.thirdMenu, '')
-        const networkTabList = []
+        // const networkTabList = []
         this.list.forEach(item => {
           if (item.label === name) {
             item.checked = true
           }
-          networkTabList.push(item)
+          // networkTabList.push(item)
         })
-        this.$store.commit('setNetworkOverviewTabList', networkTabList)
+        // this.$store.commit('setNetworkOverviewTabList', networkTabList)
         const breadcrumbColumnTab = this.list.find(item => item.label === name)
         this.changeUrlTabState(this.curTabState.curTab, breadcrumbColumnTab.prop)
 
         this.hideTabs(breadcrumbColumnTab)
-        this.customTableTitles[0].label = breadcrumbColumnTab.label
+        // this.customTableTitles[0].label = breadcrumbColumnTab.label
+        this.combineColumnList(breadcrumbColumnTab.columns)
+        this.setUserConfig()
         this.showCustomizeTabs = false
-        // this.showRecordNum = 10
+        // this.setShowNum(10)
-        this.setShowNum(10)
+      } else if (curOperationType === operationType.changeTab) { // 切换tab
-      } else if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
+        // if (curTab) { // tab切换
-        curTab = this.getDefaultTab()
+        // this.showTab(curTab)//???????
-        if (curTab) {
+        // }
-          this.showTab(curTab)
-          this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
-        }
         this.showCustomizeTabs = true
-        this.setShowNum(10)
+        // this.setShowNum(10)
       } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、
-        this.list = this.$_.cloneDeep(this.curTable.tabList)
+        // this.list = this.$_.cloneDeep(this.curTable.tabList)
-        this.$store.commit('setNetworkOverviewTabList', this.list)
+        this.list = this.$_.cloneDeep(this.allList)
+        this.setUserConfig()
+        // this.$store.commit('setNetworkOverviewTabList', this.list)
         if (curTab) {
           this.showTab(curTab)
           this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
@@ -477,24 +525,32 @@ export default {
               this.$nextTick(() => {
                 this.hideTabs(item)
               })
-              this.customTableTitles[0].label = item.label
+              // this.customTableTitles[0].label = item.label
+              this.combineColumnList(item.columns)
+              this.setUserConfig()
             }
           })
           this.activeTab = ''
         }
         this.list = Object.assign({}, this.list)
-        this.$store.commit('setNetworkOverviewTabList', this.list)
+        // this.$store.commit('setNetworkOverviewTabList', this.list)
         this.showCustomizeTabs = true
       } else if (curOperationType === operationType.changeMetric) { // 切换metric
-        if (beforeOperationType === operationType.thirdMenu) {
+        // if (beforeOperationType === operationType.thirdMenu) {
+        if (this.isThirdMenu()) {
           this.hideTabs(curTab)
-          this.customTableTitles[0].label = curTab.label
+          // this.customTableTitles[0].label = curTab.label
+          this.combineColumnList(curTab.columns)
+          this.setUserConfig()
           this.showCustomizeTabs = false
         }
       } else if (curOperationType === operationType.customize) { // customize
-        if (beforeOperationType === operationType.thirdMenu) {
+        // if (beforeOperationType === operationType.thirdMenu) {
+        if (this.isThirdMenu()) {
           this.hideTabs(curTab)
-          this.customTableTitles[0].label = curTab.label
+          // this.customTableTitles[0].label = curTab.label
+          this.combineColumnList(curTab.columns)
+          this.setUserConfig()
           this.showCustomizeTabs = false
         } else {
           this.$nextTick(() => {
@@ -552,6 +608,7 @@ export default {
       }
 
       const self = this
+      if (this.customTableTitles) {
         this.customTableTitles.forEach(tableColumn => {
           if (tableColumn.columnType === tableColumnType.chainRatio && tableColumn.isInMainUrl && tableDataTmp && tableDataTmp.length > 0) {
             get(self.gerCycleUrl(), queryParams).then(response => {
@@ -712,13 +769,14 @@ export default {
             })
           }
         })
+      }
     },
     showMore () {
       this.setShowNum(50)
       this.sortChange(this.column, this.index)// 当前选中的tab？？？？
     },
     setShowNum (num) {
-      this.showRecordNum = num
+      this.showRecordNum = Number(num)
       this.changeUrlTabState(curTabState.tableShowMore, this.showRecordNum)
     },
     rowClass (row, column, rowIndex, columnIndex) {
@@ -845,29 +903,42 @@ export default {
     changeMetric () {
       this.tableData = []
       this.tableDataBackup = []
-      // this.showRecordNum = 10
       this.setShowNum(10)
-      //const beforeType = this.$store.getters.getTabOperationBeforeType
+      const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
-      const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '',true)
+      // if (beforeType != operationType.thirdMenu) {
       if (beforeType != operationType.thirdMenu) {
-        //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
+        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
       }
-      //this.$store.commit('setTabOperationType', operationType.changeMetric)
       this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeMetric)
       const curTab = this.getCurTab()
       const label = curTab.label
       this.changeUrlTabState(this.curTabState.tableMetric, this.metric)
+
+      // 1:先根据metric获得tabs，再根据当前tab，获得columns，再进行数据组装？？？
+
+      if (this.metricsList && this.metricsList.length > 0) {
+        const metricTab = this.metricsList.find(metric => metric.name === this.metric)
+        this.list = metricTab ? metricTab.tabs : []
+        this.networkTabList = metricTab ? metricTab.tabs : []
+        this.combineTabList()
+        // this.allList = this.$_.cloneDeep(this.list)//备份所有配置，下钻及返回时使用
+        this.customTableTitles = this.list ? this.list[0].columns : []// 需要获得当前tab的列:默认第一个tab的列
+        this.combineColumnList(this.customTableTitles)
+        this.setUserConfig()
+      }
+
       if (this.metric === 'Bits/s') {
         this.columnNameGroup = this.curTable.bytesColumnNameGroup
         this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
         this.orderBy = 'bytesTotal'
         this.metricUnit = 'bytes'
+        /*
         const titleGroup = []
         if (this.customTableTitles.length === 2) {
-          this.curTable.column.forEach((item, index) => {
+          //this.curTable.column.forEach((item, index) => {
+          this.curTable.columns.forEach((item, index) => {
             if (item.tabColumn) {
-              item.label = label
+              //item.label = label
             }
             if (index === 1) {
               item.checked = this.customTableTitles[1].checked
@@ -877,20 +948,21 @@ export default {
         } else {
           this.customTableTitles.forEach(item => {
             if (item.tabColumn) {
-              item.label = label
+              //item.label = label
             }
             titleGroup.push(item)
           })
         }
-        this.customTableTitles = titleGroup
+        this.customTableTitles = titleGroup */
       } else if (this.metric === 'Packets/s') {
         this.columnNameGroup = this.curTable.packetsColumnNameGroup
         this.cycleColumnNameGroup = this.curTable.packetsCycleColumnNameGroup
         this.orderBy = 'packetsTotal'
         this.metricUnit = 'packets'
+        /*
         const titleGroup = []
         if (this.customTableTitles.length === 2) {
-          this.curTable.column.forEach((item, index) => {
+          this.curTable.columns.forEach((item, index) => {
             if (item.tabColumn) {
               item.label = label
             }
@@ -908,11 +980,13 @@ export default {
           })
         }
         this.customTableTitles = titleGroup
+        */
       } else if (this.metric === 'Sessions/s') {
         this.columnNameGroup = this.curTable.sessionsColumnNameGroup
         this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
         this.orderBy = 'sessions'
         this.metricUnit = 'sessions'
+        /*
         let totalChecked = true
         this.customTableTitles.forEach(item => {
           if (item.prop === 'total') {
@@ -924,6 +998,7 @@ export default {
           { label: label, prop: 'tab', checked: true, tabColumn: true, columnType: this.curTable.column[0].columnType },
           { label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false, columnType: this.curTable.column[1].columnType, cycleDataUrl: totalColumn ? totalColumn.cycleDataUrl : '', isInMainUrl: true }
         ]
+        */
       }
       let queryParams = {
         orderBy: this.orderBy,
@@ -964,20 +1039,7 @@ export default {
             }
           }
         })
-        this.$store.commit('setNetworkOverviewTabList', this.list)
+        // this.$store.commit('setNetworkOverviewTabList', this.list)
-      }
-    },
-    getDefaultTab () {
-      let curTab = this.getCurTab()
-      if(curTab){
-        return curTab
-      } else {
-        let tabObjGroup = this.list.filter(item => item.checked)
-        if (tabObjGroup && tabObjGroup.length > 0) {
-          return tabObjGroup[0]
-        } else {
-          return tabObjGroup = this.networkTabList.filter(item => item.checked)[0]
-        }
       }
     },
     // 隐藏tabs的标题
@@ -1008,18 +1070,23 @@ export default {
     },
     // 激活tab修改的内容：第一列的列名，list中此tab为checked=true
     showTab (curTab) {
+      if (curTab) {
         this.activeTab = ref(curTab.label)
-      this.customTableTitles[0].label = curTab.label
+        // this.customTableTitles[0].label = curTab.label
+        this.combineColumnList(curTab.columns)
+        this.setUserConfig()
+      }
     },
     tabChange (index) {
       this.isNoData = false
       // 操作类型设置
-      const beforeType = this.$store.getters.getTabOperationBeforeType
+      // const beforeType = this.$store.getters.getTabOperationBeforeType
+      const beforeType = this.getUrlParam(this.curTabState.tabOperationBeforeType, '', true)
       if (beforeType != operationType.thirdMenu) {
-        //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
+        // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
+        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
       }
-      //this.$store.commit('setTabOperationType', operationType.customize)
+      // this.$store.commit('setTabOperationType', operationType.customize)
       this.changeUrlTabState(this.curTabState.tabOperationType, operationType.customize)
       // 获得操作tab和当前选中的所有tab
       const handleTab = this.list[index]
@@ -1041,9 +1108,25 @@ export default {
             }
           }
         })
-        this.$store.commit('setNetworkOverviewTabList', this.list)
+        // this.$store.commit('setNetworkOverviewTabList', this.list)
+      }
+      // 如果有metric切换，则需要更新其它metric的tabs
+      if (this.hasMetricSearch) {
+        if (this.metricsList && this.metricsList.length > 0) {
+          this.metricsList.forEach(metric => {
+            if (metric.name != this.metric) {
+              // metric.tabs = this.list
+              metric.tabs.forEach(metricTabItem => {
+                const newConfig = this.list.find(item => item.name === metricTabItem.name)
+                metricTabItem.show = newConfig ? newConfig.checked : true
+                metricTabItem.checked = newConfig ? newConfig.checked : true
+              })
+            }
+          })
+        }
       }
 
+      this.saveUserLocalConfig()
       // 如果取消tab，则如果取消的是当前选中的tab，则当前tab就需要修改为第一个默认的tab，否则不用
       const curTab = this.getCurTab()
       if (!handleTab.checked && handleTab.label === curTab.label) {
@@ -1069,9 +1152,9 @@ export default {
       }
     },
     setOperationType (operationType) {
-      //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
+      // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-      //this.$store.commit('setTabOperationType', operationType)
+      // this.$store.commit('setTabOperationType', operationType)
-      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
+      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
       this.changeUrlTabState(this.curTabState.tabOperationType, operationType)
     },
     getTabByLabel (label) {
@@ -1083,7 +1166,7 @@ export default {
       return tab
     },
     setBeforeTab (tab) {
-      //this.$store.commit('setNetworkOverviewBeforeTab', tab)
+      // this.$store.commit('setNetworkOverviewBeforeTab', tab)
       this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tab.prop)
     },
     setQueryCondition (tab, value) {
@@ -1122,7 +1205,7 @@ export default {
       5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type)
   * */
     handleTabValue (columnName, columnValue) {
-      //const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
+      // const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
       const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
       const clickTab = this.getTabByLabel(columnName)
       this.setBeforeTab(clickTab)
@@ -1170,7 +1253,7 @@ export default {
           item.checked = true
         }
       })
-      this.$store.commit('setNetworkOverviewTabList', this.list)
+      // this.$store.commit('setNetworkOverviewTabList', this.list)
       // this.handleSearchParams(columnValue)
 
       const curTab = this.getFirstCheckedTab()
@@ -1206,6 +1289,7 @@ export default {
       }
     },
     metricChange () {
+      this.saveUserLocalConfig()
     },
     dragstart (index) {
       this.dragIndex = index
@@ -1266,12 +1350,18 @@ export default {
       this.tableDataBackup = []
       this.setShowNum(10)
       this.clearSort()
-      //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
+      // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-      //this.$store.commit('setTabOperationType', operationType.changeTab)
+      // this.$store.commit('setTabOperationType', operationType.changeTab)
-      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
+      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
       this.changeUrlTabState(this.curTabState.tabOperationType, operationType.changeTab)
-      this.customTableTitles[0].label = tab.paneName
+      // this.customTableTitles[0].label = tab.paneName
+      const clickTab = this.list.filter(item => item.label == tab.paneName)
+      if (clickTab.columns) {
+        this.combineColumnList(clickTab.columns)
+        this.setUserConfig()
+      }
 
+      this.saveUserLocalConfig()
       const tabObjGroup = this.list.filter(item => item.label == tab.paneName)
       if (tabObjGroup && tabObjGroup.length > 0) {
         const curTab = tabObjGroup[0]
@@ -1326,47 +1416,48 @@ export default {
         return tableColumn.cycleDataUrl
       }
     },
-    /*
-    getTabList(){
-      let tabList = this.$store.getters.getNetworkOverviewTabList
-      if (!tabList || tabList.length === 0) {
-        tabList = this.$_.cloneDeep(this.networkTabList)
-      }
-      return tabList
-    }, */
     handleQueryParams (extraParams) {
       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.$store.getters.getTabOperationType
-      const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '',true)
+      const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
-      if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
+      // if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
+      if (this.isFourthMenu()) { // 点击的为第四级菜单
         const curTab = this.getCurTab()
-        if(curTab){
+        if (curTab) {
           queryType = curTab.prop
         } else {
           const checkedTab = this.list.find(item => item.checked)
           queryType = checkedTab ? checkedTab.prop : ''
         }
-      } else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
+      } else if (this.isThirdMenu()) { // 点击的为第三级菜单
         const breadcrumbTab = this.list.find(item => item.label === name)
         queryType = breadcrumbTab ? breadcrumbTab.prop : ''
       } else if (curOperationType === operationType.changeTab) { // 切换tab
         const curTab = this.getCurTab()
+        if (curTab) {
           queryType = curTab.prop
+        }
       } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击第二级菜单，点击菜单
-        this.list = this.$_.cloneDeep(this.curTable.tabList)
+        this.list = this.$_.cloneDeep(this.allList)
-        this.$store.commit('setNetworkOverviewTabList', this.list)
+        this.setUserConfig()
         const curTab = this.getCurTab()
+        if (curTab) {
           queryType = curTab.prop
+        }
       } else {
         const curTab = this.getCurTab()
+        if (curTab) {
           queryType = curTab.prop
         }
+      }
 
       if (JSON.stringify(extraParams) === '{}') {
         extraParams = {
-          type: queryType || this.networkTabList[0].prop,
+          type: queryType,
           orderBy: this.orderBy ? this.orderBy : 'bytesTotal',
           limit: networkDefaultLimit
         }
@@ -1406,14 +1497,14 @@ export default {
     getQueryCondition () {
       return this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
     },
-    getUrlParam (param, defaultValue,isNumber) {
+    getUrlParam (param, defaultValue, isNumber) {
-      if(isNumber){
+      if (isNumber) {
         return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
-      }else {
+      } else {
         return this.$route.query[param] ? this.$route.query[param] : defaultValue
       }
     },
-    // 获取当前tab
+    // 获取当前tab:url中的curTab，如果url中curTab为空，则从list中取第一个checked为true的tab，如果list里没有checked为true的，就选第一个tab，并更新url
     getCurTab () {
       const curTabProp = this.$route.query.curTab ? this.$route.query.curTab : null
       let curTab = curTabProp ? this.list.find(item => item.prop === curTabProp) : null
@@ -1421,11 +1512,16 @@ export default {
       if (!curTab) {
         const tabObjGroup = this.list.filter(item => item.checked)
         if (tabObjGroup && tabObjGroup.length > 0) {
+          tabObjGroup[0].checked = true
           curTab = tabObjGroup[0]
-        } else {
-          curTab = this.networkTabList[0]
-        }
           this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
+        } else {
+          if (this.list && this.list.length > 0) {
+            this.list[0].checked = true
+            curTab = this.list[0]
+            this.changeUrlTabState(this.curTabState.curTab, curTab.prop)
+          }
+        }
       } else {
         this.list.forEach(item => {
           if (item.label === curTab.label) {
@@ -1433,36 +1529,282 @@ export default {
             // this.showTab(curTab)
           }
         })
-        this.$store.commit('setNetworkOverviewTabList', this.list)
+        // this.$store.commit('setNetworkOverviewTabList', this.list)
       }
       return curTab
+    },
+    combineTabList () {
+      const listInCode = this.curTableInCode ? this.curTableInCode.tabList : []
+      // let userTableConfig = this.getUserLocalConfig()
+      this.list.forEach(tab => {
+        // 配置的内容
+        const commonTab = this.commonTabList.find(item => item.name === tab.name)
+        tab.label = commonTab ? commonTab.i18n : ''
+        tab.prop = commonTab ? commonTab.prop : ''
+        if (!tab.hasOwnProperty('checked')) {
+          tab.checked = tab ? tab.show : true
+        }
+        if (!tab.hasOwnProperty('disabled')) {
+          tab.disabled = tab ? !tab.enable : false
+        }
+        if (!tab.hasOwnProperty('panelId')) {
+          tab.panelId = tab ? tab.panelIdOfFourthMenu : null
+        }
+        // 代码里写死的
+        const tabInCode = listInCode ? listInCode.find(item => item.label === tab.label) : {}
+        tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
+        tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
+      })
+      // 设置drilldownTabs
+      const oldList = this.$_.cloneDeep(this.list)
+      this.list.forEach(tab => {
+        const drilldownTabFull = []
+        tab.drilldownTabs.forEach(drilldownTab => {
+          const drilldownTabName = drilldownTab ? (drilldownTab.name ? drilldownTab.name : drilldownTab) : ''
+          const fullTab = oldList.find(item => item.name === drilldownTabName)
+          const commonTab = this.commonTabList.find(item => item.name === drilldownTabName)
+          fullTab.label = commonTab ? commonTab.i18n : ''
+          fullTab.prop = commonTab ? commonTab.prop : ''
+          if (!tab.hasOwnProperty('panelId')) {
+            fullTab.panelId = tab ? tab.panelIdOfFourthMenu : ''
+          }
+          fullTab.show = !(tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0)
+          fullTab.checked = !(tab.hiddenDrilldownTabs.indexOf(drilldownTabName) >= 0)
+          fullTab.enable = !(tab.disabledDrilldownTabs.indexOf(drilldownTabName) >= 0)
+          fullTab.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)
+        })
+        tab.drilldownTabs = drilldownTabFull
+      })
+      console.log(this.list)
+    },
+
+    setUserConfig () {
+      const userTableConfig = this.getUserLocalConfig()
+      if (userTableConfig) {
+        const newTabConfigs = []
+        userTableConfig.tabConfig.forEach(tab => {
+          const tabConfig = this.list.find(item => item.name === tab.name)
+          if (tabConfig) {
+            tabConfig.checked = tab ? tab.checked : true
+          } else {
+            tabConfig.checked = true
+          }
+          newTabConfigs.push(tabConfig)
+        })
+        this.list = newTabConfigs
+
+        const newColumnConfigs = []
+        userTableConfig.columnConfig.forEach((column, index) => {
+          if (index === 0) {
+            newColumnConfigs.push(this.customTableTitles[0])
+          } else {
+            const customColumnConfig = this.customTableTitles.find(item => item.name === column.name)
+            if (customColumnConfig) {
+              customColumnConfig.checked = column ? column.checked : true
+              newColumnConfigs.push(customColumnConfig)
+            }
+          }
+        })
+        this.customTableTitles = newColumnConfigs
+        /*        let cfg = userTableConfig.columnConfig
+        this.customTableTitles.forEach(item => {
+          let customColumnConfig = cfg.find(column => item.name===column.name)
+          if(customColumnConfig){
+            item.checked = customColumnConfig?customColumnConfig.checked:true
+            //newColumnConfigs.push(customColumnConfig)
+          }
+        }) */
+      }
+    },
+    combineColumnList (list) {
+      const hiddenColumnList = this.list ? this.list[0].hiddenColumns : []
+      const disabledColumns = this.list ? this.list[0].disabledColumns : []
+      const newColumnList = []
+      if (list && list.length > 0) {
+        list.forEach(column => {
+          // let columnName = column
+          const columnName = column ? (column.name ? column.name : column) : ''
+          // 配置的内容
+          const commonColumn = this.commonColumnList.find(item => item.name === columnName)
+          column = {}
+          column.name = commonColumn ? commonColumn.name : ''
+          column.label = commonColumn ? commonColumn.i18n : ''
+          column.prop = commonColumn ? commonColumn.prop : ''
+          column.checked = !(hiddenColumnList.indexOf(columnName) >= 0)
+          column.disabled = disabledColumns.indexOf(columnName) >= 0
+          column.columnType = commonColumn ? commonColumn.columnType : ''
+          // 代码里写死的
+          const listInCode = this.curTableInCode ? this.curTableInCode.column : []
+          const columnInCode = listInCode ? listInCode.find(item => item.label === column.label) : {}
+          column.cycleDataUrl = columnInCode ? columnInCode.cycleDataUrl : ''
+          column.isInMainUrl = columnInCode ? columnInCode.isInMainUrl : false
+          column.dillDownCycleDataUrl = columnInCode ? columnInCode.dillDownCycleDataUrl : ''
+          column.cycle = columnInCode ? columnInCode.cycle : 0
+          column.scoreType = columnInCode ? columnInCode.scoreType : 0
+          column.isScoreColumn = columnInCode ? columnInCode.isScoreColumn : true
+          newColumnList.push(column)
+        })
+        this.customTableTitles = newColumnList
+      }
+      console.log(this.customTableTitles)
+    },
+    initConfig () {
+
+    },
+    getUserLocalConfig () {
+      let config = null
+      const userCustomizationConfigs = localStorage.getItem(storageKey.userCustomizationConfig)// 所有用户的[{id:1,tabsConfig:{},columnsConfig:{}},{id:2,tabsConfig:{},columnsConfig:{}}]
+      const userId = localStorage.getItem(storageKey.userId)
+      if (userCustomizationConfigs) { // 用户自定义配置
+        const userConfigGroup = JSON.parse(userCustomizationConfigs)
+        const currentUserConfig = userConfigGroup ? userConfigGroup.find(userConfig => userConfig.userId === userId) : null
+        const allConfig = currentUserConfig ? currentUserConfig.config : null
+        if (allConfig) {
+          config = allConfig.find(config => config.route === this.tableType)
+        }
+      }
+      return config
+    },
+    saveUserLocalConfig () {
+      const columnConfig = []
+      this.customTableTitles.forEach(item => {
+        const config = {
+          name: item.name,
+          checked: item.checked
+        }
+        columnConfig.push(config)
+      })
+      const tabConfig = []
+      this.list.forEach(item => {
+        const config = {
+          name: item.name,
+          checked: item.checked,
+          columns: columnConfig
+        }
+        tabConfig.push(config)
+      })
+
+      const userCustomizationConfigs = localStorage.getItem(storageKey.userCustomizationConfig)
+      const userConfigGroup = userCustomizationConfigs ? JSON.parse(userCustomizationConfigs) : []
+      const userId = localStorage.getItem(storageKey.userId)
+      if (this.getUserLocalConfig()) {
+        userConfigGroup.forEach(item => {
+          if (item.userId === userId) {
+            if (item.config) {
+              item.config.forEach(config => {
+                if (config.route === this.tableType) {
+                  config.tabConfig = tabConfig
+                  config.columnConfig = columnConfig
+                }
+              })
+            }
+          }
+        })
+      } else {
+        if (userConfigGroup && userConfigGroup.length > 0) {
+          userConfigGroup.forEach(userConfig => {
+            if (userConfig.userId === userId) {
+              if (userConfig.config) {
+                userConfig.config.push({
+                  route: this.tableType,
+                  tabConfig: tabConfig,
+                  columnConfig: columnConfig
+                })
+              } else {
+                userConfig.config = [
+                  {
+                    route: this.tableType,
+                    tabConfig: tabConfig,
+                    columnConfig: columnConfig
+                  }
+                ]
+              }
+            }
+          })
+        }
+        const currentUserConfig = userConfigGroup ? userConfigGroup.find(userConfig => userConfig.userId === userId) : null
+        if (!currentUserConfig) {
+          const newConfig = {
+            userId: userId,
+            config: [
+              {
+                route: this.tableType,
+                tabConfig: tabConfig,
+                columnConfig: columnConfig
+              }
+            ]
+          }
+          userConfigGroup.push(newConfig)
+        }
+      }
+
+      console.log(userConfigGroup)
+      // localStorage.removeItem(storageKey.userCustomizationConfig)
+      localStorage.setItem(storageKey.userCustomizationConfig, JSON.stringify(userConfigGroup))
     }
   },
   mounted () {
-    // 表格结构初始化
+    console.log('mounted')
-    this.tableType = this.chart.params ? this.chart.params.name : 'networkOverview'// 可以改成根据path得到类型，并获取对应的配置
+    this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-    this.curTable = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
+    this.curTableInCode = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
-    this.customTableTitles = this.$_.cloneDeep(this.curTable.column)
+    // 表格状态初始化(url)
-    this.list = this.$_.cloneDeep(this.curTable.tabList)
+    this.metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
-    this.networkTabList = this.curTable.tabList
+    this.showRecordNum = Number(this.getUrlParam(this.curTabState.tableShowMore, 10))
-    this.activeTab = ref(this.networkTabList[0].label)
+    this.tableSortColumn = this.getUrlParam(this.curTabState.tableSortColumn, '')
+    this.tableSortType = this.getUrlParam(this.curTabState.tableSortType, '')
+    this.tableSortTab = this.getUrlParam(this.curTabState.tableSortTab, '')
+    // 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
+    // let userTableConfig = this.getUserLocalConfig()
+    // if (!currentTableConfig) {//未找到当前用户的配置，使用默认配置
+    const defaultDrillDownTableConfigs = JSON.parse(localStorage.getItem(storageKey.drillDownTableConfig))// 所有表格的配置
+    const currentTableConfig = defaultDrillDownTableConfigs.find(config => config.route === this.tableType)
+    // }
+    this.commonTabList = currentTableConfig ? currentTableConfig.tabs : []
+    this.commonColumnList = currentTableConfig ? currentTableConfig.columns : []
+    const tables = currentTableConfig ? currentTableConfig.tables : []
+    const tableId = this.tableType
+    if (tables && tables.length > 0) {
+      const curTableOldConfig = tables.find(table => table.id === tableId)
+      this.curTable = curTableOldConfig || null
+      if (this.curTable) {
+        if (this.curTable.hasMetricSearch) { // 有metric
+          this.metricsList = this.curTable ? this.curTable.metrics : []
+          if (this.metricsList && this.metricsList.length > 0) {
+            const metricTab = this.metricsList.find(metric => metric.name === this.metric)
+            this.list = metricTab ? metricTab.tabs : []
+            this.networkTabList = metricTab ? metricTab.tabs : []
+          }
+        } else { // 无metric
+          this.list = this.curTable ? this.curTable.tabs : []
+          this.networkTabList = this.curTable ? this.curTable.tabs : []
+        }
+        this.combineTabList()
+        this.allList = this.$_.cloneDeep(this.list)// 备份所有配置，下钻及返回时使用
+        this.customTableTitles = this.list ? this.list[0].columns : []// 需要获得当前tab的列:默认第一个tab的列
+        this.combineColumnList(this.customTableTitles)
+        this.activeTab = ref(this.list[0].label)
         this.activeCustomize = ref('tabs')
         this.networkSearchUrl = this.curTable.url
+        this.curTable.bytesColumnNameGroup = this.curTableInCode ? this.curTableInCode.bytesColumnNameGroup : []
+        this.curTable.bytesCycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.bytesCycleColumnNameGroup : []
+        this.curTable.packetsColumnNameGroup = this.curTableInCode ? this.curTableInCode.packetsColumnNameGroup : []
+        this.curTable.packetsCycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.packetsCycleColumnNameGroup : []
+        this.curTable.sessionsColumnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsColumnNameGroup : []
+        this.curTable.sessionsCycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsCycleColumnNameGroup : []
         this.columnNameGroup = this.curTable.bytesColumnNameGroup
         this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
-    // 表格状态初始化
-    this.metric = this.$route.query[curTabState.tableMetric] ? this.$route.query[curTabState.tableMetric] : 'Bits/s'
-    this.showRecordNum = this.$route.query[curTabState.tableShowMore] ? Number(this.$route.query[curTabState.tableShowMore]) : 10
-    this.tableSortColumn = this.$route.query[curTabState.tableSortColumn] ? this.$route.query[curTabState.tableSortColumn] : ''
-    this.tableSortType = this.$route.query[curTabState.tableSortType] ? this.$route.query[curTabState.tableSortType] : ''
-    this.tableSortTab = this.$route.query[curTabState.tableSortTab] ? this.$route.query[curTabState.tableSortTab] : ''
 
-    if (this.$store.getters.getNetworkOverviewTabList.length > 0) {
+        this.setUserConfig()
-      this.list = this.$store.getters.getNetworkOverviewTabList
-    } else {
-      this.$store.commit('setNetworkOverviewTabList', this.list)
       }
-    // this.initState()
+    }
+    console.log('第一次存储默认配置到localstorage')
+    this.saveUserLocalConfig()
     this.getChartData()
     this.$nextTick(() => {
       setTimeout(() => {
@@ -1471,10 +1813,15 @@ export default {
     })
   },
   setup (props) {
+    console.log('setup')
   },
   unmounted () {
     this.isNoData = false
-    this.$store.commit('setNetworkOverviewTabList', this.list)// 保存状态
+    // 存储用户的设置
+    // this.setUserConfig()
+    this.saveUserLocalConfig()
+    console.log('退出界面时，将修改的配置存储到localstorage')
+    console.log('unmounted')
   }
 }
 </script>

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

@@ -134,7 +134,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, urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { getChainRatio, computeScore, changeCurTab, urlParamsHandler, overwriteUrl, getUserDrilldownTableConfig } from '@/utils/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
@@ -252,22 +252,32 @@ export default {
         this.toggleLoading(false)
       })
     },
+    getUrlParam (param, defaultValue, isNumber) {
+      if (isNumber) {
+        return this.$route.query[param] ? Number(this.$route.query[param]) : defaultValue
+      } else {
+        return this.$route.query[param] ? this.$route.query[param] : defaultValue
+      }
+    },
     drillDownData (key) {
       const value = npmCategoryToAppCategoryMap[key]
       const tabType = 'network.applicationCategories'
-      //const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
+      // const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
       const oldCurTab = this.getUrlParam(this.curTabState.networkOverviewBeforeTab, '')
       // const curTable = networkTable.networkOverview
       const curTable = networkTable.networkAppPerformance
-      const list = this.$store.getters.getNetworkOverviewTabList
+      // const 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 tabGroup = list.filter(item => item.label === tabType)
       if (tabGroup && tabGroup.length > 0) {
-        //this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
+        // this.$store.commit('setNetworkOverviewBeforeTab', tabGroup[0])
         this.changeUrlTabState(this.curTabState.networkOverviewBeforeTab, tabGroup[0].prop)
       }
-      //this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
+      // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
-      //this.$store.commit('setTabOperationType', operationType.fourthMenu)
+      // this.$store.commit('setTabOperationType', operationType.fourthMenu)
-      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
+      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '', true))
       this.changeUrlTabState(this.curTabState.tabOperationType, operationType.fourthMenu)
 
       const queryCondition = []