CN-710 下钻table配置化

2022-09-23 19:01:30 +08:00
parent af2bf4c96a
commit e1d75bdeff
8 changed files with 795 additions and 358 deletions
--- a/src/components/layout/Header.vue
+++ b/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) {
-      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
      }
    },
@@ -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('setTabOperationType', opeType)
-        this.changeUrlTabState(this.curTabState.tabOperationBeforeType, this.getUrlParam(this.curTabState.tabOperationType, '',true))
+        // this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
+        // this.$store.commit('setTabOperationType', opeType)
+        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, '')
              }
            }
--- a/src/store/modules/panel.js
+++ b/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
-    //tabOperationBeforeType: 0, // 记录上次的操作类型
+    // tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize
+    // 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) {
-      //state.tabOperationType = tabOperationType
-    //},
-    //setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) {
-      //state.networkOverviewBeforeTab = networkOverviewBeforeTab
-    //},
-    //setTabOperationBeforeType (state, tabOperationBeforeType) {
-      //state.tabOperationBeforeType = tabOperationBeforeType
-    //},
+    // setTabOperationType (state, tabOperationType) {
+    // state.tabOperationType = tabOperationType
+    // },
+    // setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) {
+    // state.networkOverviewBeforeTab = networkOverviewBeforeTab
+    // },
+    // setTabOperationBeforeType (state, tabOperationBeforeType) {
+    // state.tabOperationBeforeType = tabOperationBeforeType
+    // },
    setNpmLocationCountry (state, country) {
      state.npmLocationCountry = country
    },
@@ -204,15 +204,15 @@ const panel = {
    getNetworkOverviewTabList (state) {
      return state.networkOverviewTabList
    },
-    //getTabOperationType (state) {
-      //return state.tabOperationType
-    //},
-    //getNetworkOverviewBeforeTab (state) {
-      //return state.networkOverviewBeforeTab
-    //},
-    //getTabOperationBeforeType (state) {
-      //return state.tabOperationBeforeType
-    //},
+    // getTabOperationType (state) {
+    // return state.tabOperationType
+    // },
+    // getNetworkOverviewBeforeTab (state) {
+    // return state.networkOverviewBeforeTab
+    // },
+    // getTabOperationBeforeType (state) {
+    // return state.tabOperationBeforeType
+    // },
    getNpmLocationCountry (state) {
      return state.npmLocationCountry
    },
--- a/src/utils/constants.js
+++ b/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',
-  tabOperationBeforeType:'tabOperationBeforeType'
+  tabOperationType: 'tabOperationType',
+  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: {
--- a/src/utils/tools.js
+++ b/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]
--- a/src/views/charts2/Panel.vue
+++ b/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>
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/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 = []
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/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 = []