From 3e4cc199a67944ab4860ae39bd9874ad65cb006e Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Wed, 9 Nov 2022 15:22:09 +0800
Subject: [PATCH] =?UTF-8?q?CN-774=20=E7=BB=B4=E5=BA=A6=E8=A1=A8=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E4=BC=98=E5=8C=96:Top=E9=80=89=E6=8B=A950=E5=90=8E?=
 =?UTF-8?q?=EF=BC=8C=E7=94=B1=E4=BA=8E=E5=A2=9E=E5=8A=A0=E4=BA=86=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=EF=BC=8C=E5=AE=BD=E5=BA=A6=E5=92=8C=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E4=BA=A7=E7=94=9F=E5=8F=98=E5=8C=96;=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=B8=8D=E8=AE=BA=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E6=98=BE=E7=A4=BATop50=EF=BC=8C=E9=83=BD=E6=8C=8950?=
 =?UTF-8?q?=E6=9D=A1=E6=95=B0=E6=8D=AE=E6=9D=A5=E6=8E=92=E5=BA=8F=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/networkOverviewTabs.scss    |  2 +-
 src/components/layout/Header.vue              |  4 +-
 src/utils/tools.js                            | 28 +++----
 src/views/charts2/Panel.vue                   | 12 +--
 .../networkOverview/NetworkOverviewTabs.vue   | 78 ++++++++++---------
 5 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
index e726df89..07c27333 100644
--- 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%;
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 6d67cdd0..ebdf3496 100644
--- 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,
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 6a583419..2ffce8e8 100644
--- 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)
       }
     })
   }
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index 667af98d..31cbfe26 100644
--- 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
     }
 
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index 9801802d..638ba928 100644
--- 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
-        }
+        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
-        }
+        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()
   },