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
@@ -2,7 +2,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 import i18n from '@/i18n'
 import _ from 'lodash'
 import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable, dbDrilldownTableConfig } from '@/utils/constants'
-import { getIso36112JsonData,getDictList } from '@/utils/api'
+import { getIso36112JsonData, getDictList } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
 import { db } from '@/indexedDB'
@@ -855,24 +855,24 @@ export function getTabList (curTable, curMetric) {
  }
  return tabs
 }
-export async function getDnsMapData(type){
-  let codeValueMap = new Map()
-  const dnsData = await getDictList({ type:type,pageSize: -1 })
-  if(dnsData && dnsData.length>0) {
+export async function getDnsMapData (type) {
+  const codeValueMap = new Map()
+  const dnsData = await getDictList({ type: type, pageSize: -1 })
+  if (dnsData && dnsData.length > 0) {
    dnsData.forEach(mapData => {
-      let code = mapData.code
-      if(code.indexOf('-')>-1){
-        let range = mapData.code.split('-')
-        if(range && range.length >= 2){
-          let start = range[0].trim()
-          let eEnd = range[1].trim()
+      const code = mapData.code
+      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
          for (let i = start; i <= eEnd; i++) {
-            codeValueMap.set(i,mapData.value)
+            codeValueMap.set(i, mapData.value)
          }
        }
-      }else {
-        codeValueMap.set(code,mapData.value)
+      } else {
+        codeValueMap.set(code, mapData.value)
      }
    })
  }
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -66,7 +66,7 @@ import {
 import { getPanelList, getChartList } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { getTypeCategory } from '@/views/charts/charts/tools'
-import { urlParamsHandler, overwriteUrl,getDnsMapData } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl, getDnsMapData } from '@/utils/tools'
 import ChartList from '@/views/charts2/ChartList'
 import { useStore } from 'vuex'

@@ -109,15 +109,15 @@ 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'){
+    if (curTabProp === 'qtype') {
      this.panelName = this.dnsQtypeMapData.get(pName)
-    }else if(curTabProp === 'rcode'){
+    } else if (curTabProp === 'rcode') {
      this.panelName = this.dnsRcodeMapData.get(pName)
-    }else {
+    } else {
      this.panelName = pName
    }

--- 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>
@@ -196,15 +196,15 @@
 </template>
 <script>
 import { ref } from 'vue'
-import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState, storageKey, dbDrilldownTableConfig,fromRoute } from '@/utils/constants'
+import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState, storageKey, dbDrilldownTableConfig, fromRoute } from '@/utils/constants'
 import { get } from '@/utils/http'
 import unitConvert from '@/utils/unit-convert'
-import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, getUserDrilldownTableGeo, readDrilldownTableConfigByUser, combinDrilldownTableWithUserConfig,getDnsMapData } from '@/utils/tools'
+import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, getUserDrilldownTableGeo, readDrilldownTableConfigByUser, combinDrilldownTableWithUserConfig, getDnsMapData } from '@/utils/tools'
 import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { db } from '@/indexedDB'
-import { api,getDictList } from '@/utils/api'
+import { api, getDictList } from '@/utils/api'

 export default {
  name: 'NetworkOverviewTabs',
@@ -250,16 +250,16 @@ export default {
      column: {},
      index: 0,
      chartData: [],
-      dnsMapData:[],
-      dnsQtypeMapData:[],
-      dnsRcodeMapData:[],
-      isDnsMapType:false,
+      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
      }
@@ -1160,11 +1152,11 @@ export default {
      this.saveUserLocalConfig()
      // console.log(this.drillDownTableConfigs)
      let forthMenuName = ''
-      if(clickTab.prop === 'qtype'){
+      if (clickTab.prop === 'qtype') {
        forthMenuName = this.dnsQtypeMapData.get(columnValue)
-      }else if(clickTab.prop === 'rcode'){
+      } else if (clickTab.prop === 'rcode') {
        forthMenuName = this.dnsRcodeMapData.get(columnValue)
-      }else {
+      } else {
        forthMenuName = columnValue
      }
      this.$store.getters.menuList.forEach(menu => {
@@ -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) {
@@ -1334,11 +1326,11 @@ export default {
        this.saveUserLocalConfig()
        this.tab = curTab.prop
        this.isDnsMapType = false
-        if(this.tab === 'qtype'){
-          this.dnsMapData =this.dnsQtypeMapData
+        if (this.tab === 'qtype') {
+          this.dnsMapData = this.dnsQtypeMapData
          this.isDnsMapType = true
-        }else if(this.tab === 'rcode'){
-          this.dnsMapData =this.dnsRcodeMapData
+        } else if (this.tab === 'rcode') {
+          this.dnsMapData = this.dnsRcodeMapData
          this.isDnsMapType = true
        }
        let queryParams = {
@@ -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()
  },