CN-827 下钻table 维度和列的顺序支持用户缓存

2022-12-15 17:42:01 +08:00
parent fe72d25834
commit de8d11fd12
3 changed files with 213 additions and 74 deletions
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -379,15 +379,29 @@ export default {
      if (this.from !== n) {
        this.from = n
      }
+    },
+    async breadcrumb (n) {
+      if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+        if (this.dnsQtypeMapData.size === 0) {
+          this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+        }
+        if (this.dnsRcodeMapData.size === 0) {
+          this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+        }
+      }
    }
  },
  async mounted () {
    this.from = Object.keys(this.entityType)[0]
    // 是否需要dns的qtype和rcode的数据字典
    if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+      if (this.dnsQtypeMapData.size === 0) {
        this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+      }
+      if (this.dnsRcodeMapData.size === 0) {
        this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
      }
+    }
    this.initDropdownList()
  },
  setup () {
@@ -464,10 +478,14 @@ export default {
      get(curTableInCode.url.drilldownList, params).then(async response => {
        if (response.code === 200) {
          this.breadcrumbColumnValueListShow = response.data.result
-          if (this.from === fromRoute.dnsServiceInsights) {
+          if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+            if (this.dnsQtypeMapData.size === 0) {
              this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+            }
+            if (this.dnsRcodeMapData.size === 0) {
              this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
            }
+          }
          this.$nextTick(() => {
            this.breadcrumbColumnValueListShow.forEach(item => {
              const selectedDom = document.getElementById(item)
@@ -575,6 +593,7 @@ export default {
    async handleCurDrilldownTableConfig (thirdMenu) {
      // const userId = localStorage.getItem(storageKey.userId)
      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+      const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
      const drillDownTableConfigs = await combinDrilldownTableWithUserConfig()
      const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType)
      const tables = currentTableConfig ? currentTableConfig.tables : []
@@ -582,7 +601,6 @@ export default {
      if (tables && tables.length > 0) {
        const curTable = tables.find(table => table.id === tableType)
        if (curTable) {
-          const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
          const tabList = getTabList(curTable, metric)// 未下钻的tab列表
          if (tabList && tabList.length > 0) {
            combineTabList(tableType, tabList, commonTabList)
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -6,6 +6,7 @@ import { getIso36112JsonData, getDictList } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
 import { db } from '@/indexedDB'
+import { useRoute } from 'vue-router'

 export const tableSort = {
  // 是否需要排序
@@ -863,10 +864,10 @@ export async function getDnsMapData (type) {
      if (code.indexOf('-') > -1) {
        const range = mapData.code.split('-')
        if (range && range.length >= 2) {
-          const start = range[0].trim()
-          const eEnd = range[1].trim()
-          mapData.value = (start <= code && code <= eEnd) ? mapData.value : code
+          const start = Number(range[0].trim())
+          const eEnd = Number(range[1].trim())
          for (let i = start; i <= eEnd; i++) {
+            mapData.value = (start <= i && i <= eEnd) ? mapData.value : i
            codeValueMap.set(i, mapData.value)
          }
        }
@@ -877,11 +878,11 @@ export async function getDnsMapData (type) {
  }
  return codeValueMap
 }
-export function handleSpecialValue(value){
-  if(value){
+export function handleSpecialValue (value) {
+  if (value) {
    value = value.replaceAll("'", "\\\\'")
-        .replaceAll('"','\\"')
-        .replaceAll('&','%26')
+      .replaceAll('"', '\\"')
+      .replaceAll('&', '%26')
  }
  return value
 }
@@ -958,26 +959,64 @@ export async function getConfigVersion (id) {

 export async function combinDrilldownTableWithUserConfig () {
  const defaultCongfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
-  const defaultConfigs = defaultCongfigInDb ? defaultCongfigInDb.config : []
-  const curUserConfig = await readDrilldownTableConfigByUser()
-  if (defaultConfigs && curUserConfig && curUserConfig.length > 0) {
-    defaultConfigs.forEach(defaultConfig => {
-      const currentTableConfig = curUserConfig.find(config => config.route === defaultConfig.route)
-      if (currentTableConfig) {
-        const tableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route)
-        const newTableConfig = currentTableConfig.tables.find(table => table.id === defaultConfig.route)
-        tableConfig.hiddenColumns = newTableConfig.hiddenColumns
-        tableConfig.tabs.forEach(tab => {
-          const newTab = newTableConfig.tabs.find(newTab => newTab.name === tab.name)
-          if (newTab) {
-            tab.hiddenDrilldownTabs = newTab.hiddenDrilldownTabs
-            tab.checked = newTab.checked
+  const defaultConfigGroup = defaultCongfigInDb ? defaultCongfigInDb.config : []
+  const currentUserConfigGroup = await readDrilldownTableConfigByUser()
+  if (defaultConfigGroup && currentUserConfigGroup && currentUserConfigGroup.length > 0) {
+    defaultConfigGroup.forEach(defaultConfig => {
+      const currentUserConfig = currentUserConfigGroup.find(config => config.route === defaultConfig.route)
+      if (currentUserConfig) {
+        const defaultTableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route)
+        const currentUserTableConfig = currentUserConfig.tables.find(table => table.id === defaultConfig.route)
+        defaultTableConfig.hiddenColumns = currentUserTableConfig.hiddenColumns
+        const sortTabs = []
+        currentUserTableConfig.tabs.forEach(currentUserTab => {
+          const defaultTab = defaultTableConfig.tabs.find(tab => tab.name === currentUserTab.name)
+          if (defaultTab) {
+            defaultTab.hiddenDrilldownTabs = currentUserTab.hiddenDrilldownTabs
+            defaultTab.checked = currentUserTab.checked
+            if (defaultTab && defaultTab.hasMetricSearch === true) {
+              defaultTab.metrics.forEach(metric => {
+                const sortColumns = []
+                sortColumns.push(metric.columns[0])
+                currentUserTableConfig.columns.forEach((column, index) => {
+                  const sortColumn = metric.columns.find(metricColumn => {
+                    if (metricColumn.name) {
+                      return metricColumn.name === column
+                    } else {
+                      return metricColumn === column
+                    }
+                  })
+                  if (sortColumn) {
+                    sortColumns.push(sortColumn)
+                  }
+                })
+                metric.columns = sortColumns
+              })
+            } else {
+              const sortColumns = []
+              sortColumns.push(defaultTab.columns[0])
+              currentUserTableConfig.columns.forEach((column, index) => {
+                const sortColumn = defaultTab.columns.find(metricColumn => {
+                  if (metricColumn.name) {
+                    return metricColumn.name === column
+                  } else {
+                    return metricColumn === column
+                  }
+                })
+                if (sortColumn) {
+                  sortColumns.push(sortColumn)
+                }
+              })
+              defaultTab.columns = sortColumns
+            }
+            sortTabs.push(defaultTab)
+          }
+        })
+        defaultTableConfig.tabs = sortTabs
      }
    })
  }
-    })
-  }
-  return defaultConfigs
+  return defaultConfigGroup
 }

 export async function getUserDrilldownTableConfig (tableType, curMetric) {
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -276,7 +276,6 @@ export default {
  watch: {
    timeFilter: {
      handler (n) {
-        // console.log('watch')
        const curTab = this.getCurTab()
        let queryParams = {
          orderBy: this.orderBy,
@@ -421,7 +420,6 @@ export default {
      }
    },
    initState () {
-      // console.log('InitState：开始')
      let curTab = this.getCurTab()
      if (curTab) { // 显示当前tab
        const realTab = this.list.find(item => item.name === curTab.name)
@@ -568,7 +566,6 @@ export default {
        this.showCustomizeTabs = true
      }
      this.changeUrlTabState()
-      // console.log('InitState: 结束')
    },
    async initData () {
      const tabList = []
@@ -1117,7 +1114,6 @@ export default {
          5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type)
      * */
    async handleTabValue (columnName, columnValue) {
-      // console.log('NetworkOverview类------handleTabValue：下钻')
      // 下钻前保存当前路由状态
      this.beforeRouterPush()
      const clickTab = this.getTabByName(columnName)// 下钻后，显示的下钻tab对应的drilldownTabs
@@ -1644,45 +1640,122 @@ export default {
      return isSetDrilldownTabInfo
    },
    async saveUserLocalConfig () {
-      let curUserConfigs = await readDrilldownTableConfigByUser()
-      const hiddenColumns = this.getHiddenColumnNameGroup()
-      this.curTable.hiddenColumns = hiddenColumns
+      let curUserConfigGroup = await readDrilldownTableConfigByUser()
      let version = ''
-      if (curUserConfigs && curUserConfigs.length > 0) { // 当前用户存在缓存配置
-        const currentRouteConfig = curUserConfigs.find(config => config.route === this.tableType)
-        if (currentRouteConfig) { // 用户的缓存中存在当前路径对应的下钻表格对应的配置
-          const currentTableConfig = currentRouteConfig.tables.find(table => table.id === this.tableType)
-          if (currentTableConfig) {
-            currentTableConfig.hiddenColumns = hiddenColumns
-            currentTableConfig.tabs.forEach(tab => {
-              const newTab = this.curTable.tabs.find(newTab => newTab.name === tab.name)
-              tab.hiddenDrilldownTabs = this.getHiddenDrilldownTabNameGroup(newTab)
-              tab.checked = newTab.checked
+      if (curUserConfigGroup && curUserConfigGroup.length > 0) { // 当前用户存在缓存配置
+        const curUserRouteConfig = curUserConfigGroup.find(config => config.route === this.tableType)
+        if (curUserRouteConfig) { // 用户的缓存中存在当前路径对应的下钻表格对应的配置
+          const curUserTableConfig = curUserRouteConfig.tables.find(table => table.id === this.tableType)
+          if (curUserTableConfig) {
+            this.customTableTitles.forEach(col => {
+              const colName = col.name ? col.name : col
+              const colIndex = curUserTableConfig.hiddenColumns.indexOf(colName)
+              if (col.checked === false) {
+                if (colIndex === -1) {
+                  curUserTableConfig.hiddenColumns = curUserTableConfig.hiddenColumns.concat(colName)
+                }
+              } else if (col.checked === true) {
+                if (colIndex > -1) {
+                  curUserTableConfig.hiddenColumns.splice(colIndex, 1)
+                }
+              }
            })
+            this.curTable.hiddenColumns = curUserTableConfig.hiddenColumns
+            const oldSortColumns = curUserTableConfig.columns
+            const newSortColumns = this.getSortColumnName()
+            if (newSortColumns.length > 0) {
+              if (!curUserTableConfig.columns) {
+                curUserTableConfig.columns = []
+              }
+              if (oldSortColumns && newSortColumns.length < oldSortColumns.length) {
+                const sameColumnIndexGroup = []
+                oldSortColumns.forEach((oldColumn, oldIndex) => {
+                  if (newSortColumns.indexOf(oldColumn) > -1) {
+                    sameColumnIndexGroup.push(oldIndex)
+                  }
+                })
+                sameColumnIndexGroup.forEach((oldIndex, index) => {
+                  curUserTableConfig.columns[oldIndex] = newSortColumns[index]
+                })
+              } else {
+                curUserTableConfig.columns = newSortColumns
+              }
+            }
+            const sortTabs = []
+            this.curTable.tabs.forEach(tab => {
+              const newTab = {
+                name: tab.name,
+                hiddenDrilldownTabs: this.getHiddenDrilldownTabNameGroup(tab),
+                checked: tab.checked
+              }
+              sortTabs.push(newTab)
+            })
+            curUserTableConfig.tabs = sortTabs
          }
        } else { // 用户的缓存中不存在当前路径对应的下钻表格对应的配置
-          curUserConfigs.push(this.handleInitDrilldownTableConfig())
+          curUserConfigGroup.push(this.handleInitDrilldownTableConfig())
        }
        version = await getConfigVersion(this.userId)
      } else { // 当前用户不存在缓存配置
-        curUserConfigs = []
-        curUserConfigs.push(this.handleInitDrilldownTableConfig())
+        curUserConfigGroup = []
+        curUserConfigGroup.push(this.handleInitDrilldownTableConfig())
        version = await getConfigVersion('default')
      }
      // 更新缓存中的配置
      await db[dbDrilldownTableConfig].put({
        id: this.userId,
        version: version,
-        config: this.$_.cloneDeep(curUserConfigs)
+        config: this.$_.cloneDeep(curUserConfigGroup)
      })
      // 更新使用的配置
      const curCfg = this.drillDownTableConfigs.find(cfg => cfg.route === this.tableType)
      if (curCfg) {
        const curTable = curCfg.tables.find(table => table.id === this.tableType)
-        curTable.hiddenColumns = hiddenColumns
+        // curTable.hiddenColumns = curUserTableConfig.hiddenColumns
        curTable.tabs.forEach(tab => {
-          const newTab = this.curTable.tabs.find(newTab => newTab.name === tab.name)
-          tab.hiddenDrilldownTabs = this.getHiddenDrilldownTabNameGroup(newTab)
+          const tabItem = this.curTable.tabs.find(tabItem => tabItem.name === tab.name)
+          tab.hiddenDrilldownTabs = this.getHiddenDrilldownTabNameGroup(tabItem)
+          if (tab && tab.hasMetricSearch === true) {
+            const columnsForMetric = tab.metrics.find(metric => metric.name === this.metric)
+            tab.metrics.forEach(metric => {
+              const oldSortColumns = metric.columns
+              const newSortColumns = this.customTableTitles.slice(1)
+              if (oldSortColumns && newSortColumns.length < oldSortColumns.length) {
+                const sameColumnIndexGroup = []
+                oldSortColumns.forEach((oldColumn, oldIndex) => {
+                  const oldColName = oldColumn.name ? oldColumn.name : oldColumn
+                  newSortColumns.forEach(newCol => {
+                    const newColName = newCol.name ? newCol.name : newCol
+                    if (newColName === oldColName) {
+                      sameColumnIndexGroup.push(oldIndex)
+                    }
+                  })
+                })
+                sameColumnIndexGroup.forEach((oldIndex, index) => {
+                  metric.columns[oldIndex] = newSortColumns[index]
+                })
+              } else {
+                const columnGroup = []
+                columnGroup.push(JSON.parse(JSON.stringify(oldSortColumns[0])))
+                newSortColumns.forEach(newColumn => {
+                  const newColName = newColumn.name ? newColumn.name : newColumn
+                  const sameColumn = metric.columns.find(metricColumn => {
+                    const metricColumnName = metricColumn.name ? metricColumn.name : metricColumn
+                    return metricColumnName === newColName
+                  })
+                  if (sameColumn) {
+                    columnGroup.push(JSON.parse(JSON.stringify(newColumn)))
+                  }
+                })
+                metric.columns = columnGroup
+              }
+            })
+          } else {
+            let columnGroup = []
+            columnGroup.push(JSON.parse(JSON.stringify(tab.columns[0])))
+            columnGroup = columnGroup.concat(JSON.parse(JSON.stringify(this.customTableTitles.slice(1))))
+            tab.columns = columnGroup
+          }
        })
      }
    },
@@ -1694,6 +1767,7 @@ export default {
        tables: [{
          id: this.tableType,
          hiddenColumns: hiddenColumns,
+          columns: this.getSortColumnName(),
          tabs: []
        }]
      }
@@ -1720,6 +1794,15 @@ export default {
        } */
      return hiddenColumns
    },
+    getSortColumnName () {
+      const sortColumns = []
+      this.customTableTitles.forEach((column, index) => {
+        if (index != 0) {
+          sortColumns.push(column.name)
+        }
+      })
+      return sortColumns
+    },
    getHiddenDrilldownTabNameGroup (newTab) {
      let hiddenDrilldownTabs = []
      if (newTab && newTab.drilldownTabs) {
@@ -1775,7 +1858,6 @@ export default {
    }
  },
  async mounted () {
-    console.log('mounted start...')
    this.list = null
    this.tabList = null
    this.allList = null