CN-710 下钻table配置化

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.getUrlParam(this.curTabState.tabOperationType, '',true)
+        // const curOperationType = this.$store.getters.getTabOperationType
+        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.getUrlParam(this.curTabState.tabOperationType, '',true)
+    // const curOperationType = this.$store.getters.getTabOperationType
+    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) {
-      if(isNumber){
+    getUrlParam (param, defaultValue, 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) {
-      if(isNumber){
+    getUrlParam (param, defaultValue, 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('setTabOperationType', operationType.fourthMenu)
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
+        // 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)
 
         const queryCondition = []

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('setTabOperationType', operationType.fourthMenu)
-      this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
+      // 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)
 
       const queryCondition = []