CN-710 下钻table配置化

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: {

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]