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

2022-11-09 15:22:09 +08:00
parent faabc949c0
commit 3e4cc199a6
5 changed files with 64 additions and 60 deletions
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/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%;
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -277,8 +277,8 @@ export default {
      dropDownValue: '',
      breadcrumbColumnValueListShow: [],
      curTabProp: '',
-      dnsRcodeMapData: [],
-      dnsQtypeMapData: [],
+      dnsRcodeMapData: new Map(),
+      dnsQtypeMapData: new Map(),
      isDnsMapType: false,
      valueMeta: [],
      showBackground: false,
--- a/src/utils/tools.js
+++ b/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()
-          let eEnd = range[1].trim()
+          const start = range[0].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)
--- a/src/views/charts2/Panel.vue
+++ b/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) : ''
-    let curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
+    const pName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
+    const curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
    if (curTabProp === 'qtype') {
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/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:[],
-      dnsQtypeMapData:[],
-      dnsRcodeMapData:[],
+      dnsMapData: new Map(),
+      dnsQtypeMapData: new Map(),
+      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()
  },