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

src/components/layout/Header.vue

@@ -379,14 +379,28 @@ 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) {
-      this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+      if (this.dnsQtypeMapData.size === 0) {
-      this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+        this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+      }
+      if (this.dnsRcodeMapData.size === 0) {
+        this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+      }
     }
     this.initDropdownList()
   },
@@ -464,9 +478,13 @@ 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) {
-            this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+            if (this.dnsQtypeMapData.size === 0) {
-            this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+              this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+            }
+            if (this.dnsRcodeMapData.size === 0) {
+              this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+            }
           }
           this.$nextTick(() => {
             this.breadcrumbColumnValueListShow.forEach(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)

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 start = Number(range[0].trim())
-          const eEnd = range[1].trim()
+          const eEnd = Number(range[1].trim())
-          mapData.value = (start <= code && code <= eEnd) ? mapData.value : code
           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){
+export function handleSpecialValue (value) {
-  if(value){
+  if (value) {
     value = value.replaceAll("'", "\\\\'")
-        .replaceAll('"','\\"')
+      .replaceAll('"', '\\"')
-        .replaceAll('&','%26')
+      .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 defaultConfigGroup = defaultCongfigInDb ? defaultCongfigInDb.config : []
-  const curUserConfig = await readDrilldownTableConfigByUser()
+  const currentUserConfigGroup = await readDrilldownTableConfigByUser()
-  if (defaultConfigs && curUserConfig && curUserConfig.length > 0) {
+  if (defaultConfigGroup && currentUserConfigGroup && currentUserConfigGroup.length > 0) {
-    defaultConfigs.forEach(defaultConfig => {
+    defaultConfigGroup.forEach(defaultConfig => {
-      const currentTableConfig = curUserConfig.find(config => config.route === defaultConfig.route)
+      const currentUserConfig = currentUserConfigGroup.find(config => config.route === defaultConfig.route)
-      if (currentTableConfig) {
+      if (currentUserConfig) {
-        const tableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route)
+        const defaultTableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route)
-        const newTableConfig = currentTableConfig.tables.find(table => table.id === defaultConfig.route)
+        const currentUserTableConfig = currentUserConfig.tables.find(table => table.id === defaultConfig.route)
-        tableConfig.hiddenColumns = newTableConfig.hiddenColumns
+        defaultTableConfig.hiddenColumns = currentUserTableConfig.hiddenColumns
-        tableConfig.tabs.forEach(tab => {
+        const sortTabs = []
-          const newTab = newTableConfig.tabs.find(newTab => newTab.name === tab.name)
+        currentUserTableConfig.tabs.forEach(currentUserTab => {
-          if (newTab) {
+          const defaultTab = defaultTableConfig.tabs.find(tab => tab.name === currentUserTab.name)
-            tab.hiddenDrilldownTabs = newTab.hiddenDrilldownTabs
+          if (defaultTab) {
-            tab.checked = newTab.checked
+            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) {

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 = []
@@ -1109,15 +1106,14 @@ export default {
       return tab
     },
     /*
-    * 点击表格第一列数据后
+      * 点击表格第一列数据后
-        1.设置beforeTab
+          1.设置beforeTab
-        2.设置OperationType
+          2.设置OperationType
-        3.设置QueryCondition
+          3.设置QueryCondition
-        4.设置菜单：第三级，第四级名称，并保存到store中
+          4.设置菜单：第三级，第四级名称，并保存到store中
-        5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type)
+          5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type)
-    * */
+      * */
     async handleTabValue (columnName, columnValue) {
-      // console.log('NetworkOverview类------handleTabValue：下钻')
       // 下钻前保存当前路由状态
       this.beforeRouterPush()
       const clickTab = this.getTabByName(columnName)// 下钻后，显示的下钻tab对应的drilldownTabs
@@ -1148,8 +1144,8 @@ export default {
         const changeTab = tabList.find(item => item.name === tabName)// 下钻的tab
         this.list = changeTab.drilldownTabs
         /* this.list.forEach(tab => {
-          const hiddenTab = tabList.find(item => item.name == tab.name)
+            const hiddenTab = tabList.find(item => item.name == tab.name)
-        }) */
+          }) */
         const curTab = this.getCurTab(clickTab)
         tabList.forEach(tab => {
           if (tab.name === curTab.name) {
@@ -1160,13 +1156,13 @@ export default {
 
       await this.saveUserLocalConfig()
       /* let forthMenuName = ''
-      if (clickTab.prop === 'qtype') {
+        if (clickTab.prop === 'qtype') {
-        forthMenuName = this.dnsQtypeMapData.get(columnValue)
+          forthMenuName = this.dnsQtypeMapData.get(columnValue)
-      } else if (clickTab.prop === 'rcode') {
+        } else if (clickTab.prop === 'rcode') {
-        forthMenuName = this.dnsRcodeMapData.get(columnValue)
+          forthMenuName = this.dnsRcodeMapData.get(columnValue)
-      } else {
+        } else {
-        forthMenuName = columnValue
+          forthMenuName = columnValue
-      } */
+        } */
       this.$store.getters.menuList.forEach(menu => {
         if (this.$_.isEmpty(menu.children) && menu.route) {
           if (this.$route.path === menu.route) {
@@ -1210,8 +1206,8 @@ export default {
       })
     },
     /**
-     * 在路由跳转前，即下钻前将路由数据保存起来，确保回退和前进保留当时状态
+       * 在路由跳转前，即下钻前将路由数据保存起来，确保回退和前进保留当时状态
-     */
+       */
     beforeRouterPush () {
       const currentRouter = this.$_.cloneDeep(this.$route.query)
       const historyList = this.$_.cloneDeep(this.$store.getters.getRouterHistoryList)
@@ -1644,45 +1640,122 @@ export default {
       return isSetDrilldownTabInfo
     },
     async saveUserLocalConfig () {
-      let curUserConfigs = await readDrilldownTableConfigByUser()
+      let curUserConfigGroup = await readDrilldownTableConfigByUser()
-      const hiddenColumns = this.getHiddenColumnNameGroup()
-      this.curTable.hiddenColumns = hiddenColumns
       let version = ''
-      if (curUserConfigs && curUserConfigs.length > 0) { // 当前用户存在缓存配置
+      if (curUserConfigGroup && curUserConfigGroup.length > 0) { // 当前用户存在缓存配置
-        const currentRouteConfig = curUserConfigs.find(config => config.route === this.tableType)
+        const curUserRouteConfig = curUserConfigGroup.find(config => config.route === this.tableType)
-        if (currentRouteConfig) { // 用户的缓存中存在当前路径对应的下钻表格对应的配置
+        if (curUserRouteConfig) { // 用户的缓存中存在当前路径对应的下钻表格对应的配置
-          const currentTableConfig = currentRouteConfig.tables.find(table => table.id === this.tableType)
+          const curUserTableConfig = curUserRouteConfig.tables.find(table => table.id === this.tableType)
-          if (currentTableConfig) {
+          if (curUserTableConfig) {
-            currentTableConfig.hiddenColumns = hiddenColumns
+            this.customTableTitles.forEach(col => {
-            currentTableConfig.tabs.forEach(tab => {
+              const colName = col.name ? col.name : col
-              const newTab = this.curTable.tabs.find(newTab => newTab.name === tab.name)
+              const colIndex = curUserTableConfig.hiddenColumns.indexOf(colName)
-              tab.hiddenDrilldownTabs = this.getHiddenDrilldownTabNameGroup(newTab)
+              if (col.checked === false) {
-              tab.checked = newTab.checked
+                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 = []
+        curUserConfigGroup = []
-        curUserConfigs.push(this.handleInitDrilldownTableConfig())
+        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)
+          const tabItem = this.curTable.tabs.find(tabItem => tabItem.name === tab.name)
-          tab.hiddenDrilldownTabs = this.getHiddenDrilldownTabNameGroup(newTab)
+          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: []
         }]
       }
@@ -1715,11 +1789,20 @@ export default {
         }
       })
       /*
-      if (hiddenColumns.length === 0) {
+        if (hiddenColumns.length === 0) {
-        hiddenColumns = this.curTable.hiddenColumns
+          hiddenColumns = this.curTable.hiddenColumns
-      } */
+        } */
       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