CN-774 维度表相关优化:Top选择50后，由于增加了滑动条，宽度和高度产生变化;排序功能，不论是否显示Top50，都按50条数据来排序；

src/assets/css/components/views/charts2/networkOverviewTabs.scss

@@ -4,7 +4,7 @@
   height:calc(100% - 64px);
   font-size:12px;
   .tab-hide{
-    margin-top:40px;
+    margin-top:42px;
   }
   .cn-chart__tabs {
     height:100%;

src/components/layout/Header.vue

@@ -277,8 +277,8 @@ export default {
       dropDownValue: '',
       breadcrumbColumnValueListShow: [],
       curTabProp: '',
-      dnsRcodeMapData: [],
+      dnsRcodeMapData: new Map(),
-      dnsQtypeMapData: [],
+      dnsQtypeMapData: new Map(),
       isDnsMapType: false,
       valueMeta: [],
       showBackground: false,

src/utils/tools.js

@@ -856,16 +856,16 @@ export function getTabList (curTable, curMetric) {
   return tabs
 }
 export async function getDnsMapData (type) {
-  let codeValueMap = new Map()
+  const codeValueMap = new Map()
   const dnsData = await getDictList({ type: type, pageSize: -1 })
   if (dnsData && dnsData.length > 0) {
     dnsData.forEach(mapData => {
-      let code = mapData.code
+      const code = mapData.code
       if (code.indexOf('-') > -1) {
-        let range = mapData.code.split('-')
+        const range = mapData.code.split('-')
         if (range && range.length >= 2) {
-          let start = range[0].trim()
+          const start = range[0].trim()
-          let eEnd = range[1].trim()
+          const eEnd = range[1].trim()
           mapData.value = (start <= code && code <= eEnd) ? mapData.value : code
           for (let i = start; i <= eEnd; i++) {
             codeValueMap.set(i, mapData.value)

src/views/charts2/Panel.vue

@@ -109,8 +109,8 @@ export default {
   },
   async mounted () {
     // this.panelName = this.$store.getters.getPanelName
-    let pName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
+    const pName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
-    let curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
+    const curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
     this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
     this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
     if (curTabProp === 'qtype') {

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="tabs" :style="showCustomizeTabs ? (tableData.length > 10 && showRecordNum === 10 ? 'height: calc(100% - 40px);'
+  <div class="tabs" :style="showCustomizeTabs ? (tableData.length > 10 && showRecordNum === 10 ? 'height: calc(100% - 36px);'
                                                                                       : 'height: calc(100% - 2px)')
-                                     : (tableData.length > 10 && showRecordNum === 10 ? 'height: calc(100% - 64px);'
+                                     : (tableData.length > 10 && showRecordNum === 10 ? 'height: calc(100% - 77px);'
                                                                                       : 'height: calc(100% - 26px);')">
     <el-tabs v-model="activeTab"
              :class="showCustomizeTabs?'cn-chart__tabs':'tab-hide cn-chart__tabs cn-chart__tabs-hide-tab'"
@@ -82,7 +82,7 @@
                       </template>
                     </div>
                     <div v-else class="data-click" @click="handleTabValue(item.name,scope.row['tab'])">
-                      <template v-if="isDnsMapType">
+                      <template v-if="tableType === fromRoute.dnsServiceInsights && isDnsMapType">
                         {{dnsMapData.get(scope.row['tab'])}}
                       </template>
                       <template v-else>
@@ -250,16 +250,16 @@ export default {
       column: {},
       index: 0,
       chartData: [],
-      dnsMapData:[],
+      dnsMapData: new Map(),
-      dnsQtypeMapData:[],
+      dnsQtypeMapData: new Map(),
-      dnsRcodeMapData:[],
+      dnsRcodeMapData: new Map(),
       isDnsMapType: false,
       tableSortColumn: '',
       tableSortType: '',
       tableSortTab: '',
       urlChangeParams: {},
       showUnit: false,
-      fromRoute: fromRoute,
+      fromRoute: fromRoute
     }
   },
   props: {
@@ -824,7 +824,7 @@ export default {
       this.index = index
       this.column = column
       const arr = []
-      this.tableData.slice(0, this.showRecordNum).forEach(val => {
+      this.tableData.forEach(val => {
         arr.push(val)
       })
       if (column.order == 'descending') {
@@ -866,11 +866,7 @@ export default {
             return res
           }
         })
-        if (this.tableData.length - 1 > this.showRecordNum) {
-          this.tableData = arr.concat(this.tableDataBackup.slice(this.showRecordNum))
-        } else {
         this.tableData = arr
-        }
       } else if (column.order == 'ascending') {
         arr.sort((a, b) => {
           const str1 = Array.isArray(a[column.prop]) ? a[column.prop][0] : a[column.prop]
@@ -910,11 +906,7 @@ export default {
             return res
           }
         })
-        if (this.tableData.length - 1 > this.showRecordNum) {
-          this.tableData = arr.concat(this.tableDataBackup.slice(this.showRecordNum))
-        } else {
         this.tableData = arr
-        }
       } else if (!column.order) {
         this.tableData = this.tableDataBackup
       }
@@ -1306,13 +1298,13 @@ export default {
           item.order = ''
         })
       }
+      this.cancleSortArrow()
       this.column = {}
       this.index = 0
       this.tableSortColumn = ''
       this.tableSortType = ''
       this.tableSortTab = ''
       this.urlChangeParams = this.$_.omit(this.urlChangeParams, [this.curTabState.tableSortColumn, this.curTabState.tableSortType, this.curTabState.tableSortTab])
-      this.cancleSortArrow()
     },
     // 切换tab
     handleClick (tab) {
@@ -1439,7 +1431,7 @@ export default {
       this.activeCustomize = tab.paneName
     },
     tableCellStyle ({ row, column, rowIndex, columnIndex }) {
-      let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
+      let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;height:41px !important;'
       if (rowIndex === this.tableData.length - 1) {
         // style = style + 'border-bottom:0px !important;'
       }
@@ -1772,6 +1764,10 @@ export default {
     }
   },
   async mounted () {
+    console.log('mounted start...')
+    // 是否需要dns的qtype和rcode的数据字典
+    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
     this.userId = localStorage.getItem(storageKey.userId)
     this.drillDownTableConfigs = await combinDrilldownTableWithUserConfig()
     this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
@@ -1790,6 +1786,7 @@ export default {
       const curTableOldConfig = this.tables.find(table => table.id === this.tableType)
       this.curTable = curTableOldConfig
       if (this.curTable) {
+        let curTab = null
         if (this.isDrilldown()) { // 下钻状态
           const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
           const tabList = this.getAllTabList()
@@ -1800,7 +1797,7 @@ export default {
             const drilldownTab = tabList.find(item => item.label === thirdMenu)
             this.list = drilldownTab ? drilldownTab.drilldownTabs : []
             this.allList = this.$_.cloneDeep(tabList)// 备份所有配置，下钻及返回时使用
-            const curTab = this.getCurTab()// 初始化完list，才能正确执行
+            curTab = this.getCurTab()// 初始化完list，才能正确执行
             const curTabColumns = tabList.find(item => item.prop === curTab.prop)
             this.combineColumnList(curTabColumns.name)
             this.activeTab = ref(curTab.label)
@@ -1812,11 +1809,22 @@ export default {
           }
           this.allList = this.$_.cloneDeep(this.list)// 备份所有配置，下钻及返回时使用
           if (this.list && this.list.length > 0) {
-            const curTab = this.getCurTab()// 初始化完list，才能正确执行
+            curTab = this.getCurTab()// 初始化完list，才能正确执行
             this.combineColumnList(curTab.name)
             this.activeTab = ref(curTab.label)
           }
         }
+        if (curTab && curTab.prop) {
+          const tabName = curTab.prop
+          this.isDnsMapType = false
+          if (tabName === 'qtype') {
+            this.dnsMapData = this.dnsQtypeMapData
+            this.isDnsMapType = true
+          } else if (tabName === 'rcode') {
+            this.dnsMapData = this.dnsRcodeMapData
+            this.isDnsMapType = true
+          }
+        }
         this.activeCustomize = ref('tabs')
         this.networkSearchUrl = this.curTable.url
         // let metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
@@ -1828,10 +1836,6 @@ export default {
         }
       }
     }
-    //是否需要dns的qtype和rcode的数据字典
-    this.isDnsMapType = false
-    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
-    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
     this.saveUserLocalConfig()
     this.getChartData()
   },