CN-762 DNS service insights 显示建议:修改由dns的qtype及rcode维度转换对应名称的问题所影响的部分（panel名称，顶部四级菜单显示及下拉显示等）

src/components/layout/Header.vue

@@ -53,7 +53,17 @@
                           trigger="click">
                 <template #reference>
                   <div class="breadcrumb-button"  id="breadcrumbButton" :class="showBackground?'breadcrumb-button__active':''"  >
-                     <span  id="breadcrumbValue"> {{item}}</span><i class="cn-icon-xiala cn-icon"></i>
+                    <span  id="breadcrumbValue">
+                      <template v-if="curTabProp === 'qtype'">
+                        <span>{{dnsQtypeMapData.get(item) ? dnsQtypeMapData.get(item):item}}</span>
+                      </template>
+                      <template v-else-if="curTabProp === 'rcode'">
+                        <span>{{dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item):item}}</span>
+                      </template>
+                      <template v-else>
+                        <span>{{item}}</span>
+                      </template>
+                    </span><i class="cn-icon-xiala cn-icon"></i>
                   </div>
                 </template>
                 <el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">
@@ -65,7 +75,15 @@
                   </div>
                   <ul class="select-dropdown" id="breadcrumbSelectDropdown"  @scroll="scrollList()">
                     <li v-for="item in breadcrumbColumnValueListShow" title='' :key="item" :id="item" class="select-dropdown__item" @click="changeValue(item)" :class="selected?'':''">
+                      <template v-if="curTabProp === 'qtype'">
+                        <span>{{dnsQtypeMapData.get(item) ? dnsQtypeMapData.get(item):item}}</span>
+                      </template>
+                      <template v-else-if="curTabProp === 'rcode'">
+                        <span>{{dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item):item}}</span>
+                      </template>
+                      <template v-else>
                         <span>{{item}}</span>
+                      </template>
                     </li>
                   </ul>
                 </el-row>
@@ -190,11 +208,12 @@ import {
   networkTable,
   operationType,
   storageKey,
-  wholeScreenRouterMapping
+  wholeScreenRouterMapping,
+  fromRoute
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
-import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,mapDnsData } from '@/utils/tools'
+import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,getDnsMapData } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { db } from '@/indexedDB'
 
@@ -226,10 +245,15 @@ export default {
       showMenu: false,
       dropDownValue: '',
       breadcrumbColumnValueListShow: [],
+      curTabProp:'',
+      dnsRcodeMapData:[],
+      dnsQtypeMapData:[],
+      isDnsMapType:false,
       valueMeta: [],
       showBackground: false,
       selected: false,
       valueMenuId: '',
+      fromRoute: fromRoute,
       detectionMenuList: [
         {
           name: 'securityEvents',
@@ -270,6 +294,7 @@ export default {
     },
     breadcrumb () {
       const breadcrumbMap = []
+      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
       this.$store.getters.menuList.forEach(menu => {
         if (this.$_.isEmpty(menu.children) && menu.route) {
           breadcrumbMap.push({ name: this.$t(menu.i18n), path: menu.route, columnName: menu.columnName, columnValue: menu.columnValue })
@@ -312,8 +337,10 @@ export default {
       }
     }
   },
-  mounted () {
+  async mounted () {
     this.from = Object.keys(this.entityType)[0]
+    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
     this.initDropdownList()
   },
   setup () {
@@ -350,7 +377,18 @@ export default {
         window.location.reload()
       })
     },
+    getCurTabByLabel(label){
+      let curTab = null
+      let tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+      let curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
+      if (curTableInCode && curTableInCode.tabList) {
+        curTab = curTableInCode.tabList.find(item => item.label == label)
+      }
+      return curTab
+    },
     async initDropdownList () {
+      //是否需要dns的qtype和rcode的数据字典
+      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
       let currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
       let columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
       let type = 'ip'
@@ -371,18 +409,20 @@ export default {
       }
       get(curTableInCode.url.drilldownList, params).then(async response => {
         if (response.code === 200) {
-          let dataList = response.data.result
+          this.breadcrumbColumnValueListShow = response.data.result
-          if('qtype' === type){
+          this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
-            dataList = await mapDnsData(dataList,'dnsQtype','qtype')
+          this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
-          }else if('rcode' === type){
-            dataList = await mapDnsData(dataList,'dnsRcode','rcode')
-          }
-          this.breadcrumbColumnValueListShow = dataList
           this.$nextTick(() => {
             this.breadcrumbColumnValueListShow.forEach(item => {
               const selectedDom = document.getElementById(item)
               if (selectedDom) {
-                if (item === currentValue) {
+                let itemName = item
+                if(this.curTabProp === 'qtype'){
+                  itemName = this.dnsQtypeMapData.get(item)
+                }else if(this.curTabProp === 'rcode'){
+                  itemName = this.dnsRcodeMapData.get(item)
+                }
+                if (itemName === currentValue) {
                   selectedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
                 } else {
                   selectedDom.style.cssText = ''
@@ -413,15 +453,21 @@ export default {
     },
     changeValue (value) {
       // 设置面包屑显示的内容及hover时的title
+      let valName = value
+      if(this.tab === 'qtype'){
+        valName =this.dnsQtypeMapData.get(value)
+      }else if(this.tab === 'rcode'){
+        valName =this.dnsRcodeMapData.get(value)
+      }
+      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
       document.getElementById('breadcrumbValue').innerText = value
-      document.getElementById('breadcrumbButton').setAttribute('title', value)
+      //document.getElementById('breadcrumbButton').setAttribute('title', valName)
-      document.getElementById(this.valueMenuId).setAttribute('title', value)
+      document.getElementById(this.valueMenuId).setAttribute('title', valName)
       document.getElementById('breadcrumbButton').click()
       // const columnName = this.$store.getters.getBreadcrumbColumnName
       const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
-      const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
+      //const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
-      if (tabObjGroup && tabObjGroup.length > 0) {
+      let curTab = this.getCurTabByLabel()
-        const curTab = tabObjGroup[0]
       if (curTab) {
         const queryCondition = []
         const searchProps = curTab.dillDownProp
@@ -440,7 +486,6 @@ export default {
           this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
         }
       }
-      }
       this.changeUrlTabState()
       this.jump(this.route, columnName, value, operationType.fourthMenu)
     },
@@ -509,7 +554,6 @@ export default {
       if (!columnName) { // 点击第二级菜单
         this.$store.commit('setNetworkOverviewTabList', [])
       }
-
       // 清空网络概况的特殊面包屑
       this.$store.getters.menuList.forEach(menu => {
         if (!this.$_.isEmpty(menu.children)) {
@@ -520,16 +564,18 @@ export default {
                 child.columnName = columnName
                 this.urlChangeParams[this.curTabState.thirdMenu] = columnName
                 this.urlChangeParams[this.curTabState.fourthMenu] = columnValue
-                const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
+                //const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
-                const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : ''
+                //let curTab = this.getCurTabByLabel()
-                this.urlChangeParams[this.curTabState.dimensionType] = type
+                //const type = curTab ? curTab.prop : ''
+                //this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
+                //this.urlChangeParams[this.curTabState.dimensionType] = type
                 this.urlChangeParams[this.curTabState.panelName] = columnValue
               } else if (columnName) { // 点击的为列名
                 child.columnValue = ''
                 child.columnName = columnName
                 this.urlChangeParams[this.curTabState.thirdMenu] = columnName
                 this.urlChangeParams[this.curTabState.fourthMenu] = ''
-                this.urlChangeParams[this.curTabState.panelName] = columnName
+                this.urlChangeParams[this.curTabState.panelName] = columnValue
                 const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
                 const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
                 const curTab = getDefaultCurTab(tableType, metric, columnName)

src/utils/tools.js

@@ -855,46 +855,28 @@ export function getTabList (curTable, curMetric) {
   }
   return tabs
 }
-export async function mapDnsData(list,type,prop){
+export async function getDnsMapData(type){
-  let valueGroup = []
+  let codeValueMap = new Map()
   const dnsData = await getDictList({ type:type,pageSize: -1 })
-  if(list && list.length > 0){
+  if(dnsData && dnsData.length>0) {
-    list.forEach(data => {
-      if(typeof data === 'string'){
-        let code = Number(data)
-        let dictData = dnsData.find(mapData => {return Number(mapData.code) === code})
-        if(dictData){
-          data = dictData.value
-        }else {
     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()
-              data = (start <= code && code <= eEnd) ? mapData.value : code
+          mapData.value = (start <= code && code <= eEnd) ? mapData.value : code
+          for (let i = start; i <= eEnd; i++) {
+            codeValueMap.set(i,mapData.value)
           }
-          })
         }
       }else {
-        let code = Number(data[prop])
+        codeValueMap.set(code,mapData.value)
-        let dictData = dnsData.find(mapData => {return Number(mapData.code) === code})
-        if(dictData){
-          data[prop] = dictData.value
-        }else {
-          dnsData.forEach(mapData => {
-            let range = mapData.code.split('-')
-            if(range && range.length >= 2){
-              let start = range[0].trim()
-              let eEnd = range[1].trim()
-              data[prop] = (start <= code && code <= eEnd) ? mapData.value : code
       }
     })
   }
-      }
+  return codeValueMap
-      valueGroup.push(data)
-    })
-  }
-  return valueGroup
 }
 export function combineTabList (tableType, list, commonTabList) {
   const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview

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 } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl,getDnsMapData } from '@/utils/tools'
 import ChartList from '@/views/charts2/ChartList'
 import { useStore } from 'vuex'
 
@@ -87,6 +87,8 @@ export default {
       panelLock: true,
       extraParams: {},
       panelName: '',
+      dnsRcodeMapData: [],
+      dnsQtypeMapData: [],
       score: null,
       curTabState: curTabState
     }
@@ -107,7 +109,18 @@ export default {
   },
   async mounted () {
     // this.panelName = this.$store.getters.getPanelName
-    this.panelName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
+    let pName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
+    let curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
+    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+    if(curTabProp === 'qtype'){
+      this.panelName = this.dnsQtypeMapData.get(pName)
+    }else if(curTabProp === 'rcode'){
+      this.panelName = this.dnsRcodeMapData.get(pName)
+    }else {
+      this.panelName = pName
+    }
+
     // const curOperationType = this.$store.getters.getTabOperationType
     /* const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
     if (this.panelName && this.$route.path === '/panel/networkAppPerformance' && curOperationType !== operationType.thirdMenu) {

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

@@ -73,8 +73,22 @@
                     </div>
                   </template>
                   <template v-else-if="item.columnType === tableColumnType.dillDown" >
-                    <div v-if="isOnlyRead" >{{scope.row['tab']}}</div>
+                    <div v-if="isOnlyRead" >
-                    <div v-else class="data-click" @click="handleTabValue(item.name,scope.row['tab'])">{{scope.row['tab']}}</div>
+                      <template v-if="tableType === fromRoute.dnsServiceInsights && isDnsMapType">
+                        {{dnsMapData.get(scope.row['tab'])}}
+                      </template>
+                      <template v-else>
+                        {{scope.row['tab']}}
+                      </template>
+                    </div>
+                    <div v-else class="data-click" @click="handleTabValue(item.name,scope.row['tab'])">
+                      <template v-if="isDnsMapType">
+                        {{dnsMapData.get(scope.row['tab'])}}
+                      </template>
+                      <template v-else>
+                        {{scope.row['tab']}}
+                      </template>
+                    </div>
                   </template>
                   <template v-else-if="item.columnType === tableColumnType.percent" >
                     <div class="dns-in-ex">
@@ -185,7 +199,7 @@ import { ref } from 'vue'
 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,mapDnsData } 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'
@@ -236,11 +250,16 @@ export default {
       column: {},
       index: 0,
       chartData: [],
+      dnsMapData:[],
+      dnsQtypeMapData:[],
+      dnsRcodeMapData:[],
+      isDnsMapType:false,
       tableSortColumn: '',
       tableSortType: '',
       tableSortTab: '',
       urlChangeParams: {},
-      showUnit: false
+      showUnit: false,
+      fromRoute: fromRoute,
     }
   },
   props: {
@@ -548,14 +567,6 @@ export default {
     async initData () {
       const tabList = []
       const curTab = this.getCurTab()
-      if(this.tableType === fromRoute.dnsServiceInsights){
-        let curTabProp = this.$route.query.curTab ? this.$route.query.curTab : null
-        if('qtype' === curTabProp){
-          this.chartData = await mapDnsData( this.chartData,'dnsQtype','qtype')
-        }else if('rcode' === curTabProp){
-          this.chartData = await mapDnsData( this.chartData,'dnsRcode','rcode')
-        }
-      }
       const tableDataTmp = this.chartData.map(item => {
         tabList.push(item[curTab.prop])
         const otherData = { tab: item[curTab.prop] }
@@ -1146,6 +1157,14 @@ export default {
 
       this.saveUserLocalConfig()
       // console.log(this.drillDownTableConfigs)
+      let forthMenuName = ''
+      if(clickTab.prop === 'qtype'){
+        forthMenuName = this.dnsQtypeMapData.get(columnValue)
+      }else if(clickTab.prop === 'rcode'){
+        forthMenuName = this.dnsRcodeMapData.get(columnValue)
+      }else {
+        forthMenuName = columnValue
+      }
       this.$store.getters.menuList.forEach(menu => {
         if (this.$_.isEmpty(menu.children) && menu.route) {
           if (this.$route.path === menu.route) {
@@ -1284,6 +1303,14 @@ export default {
         this.combineColumnList(curTab.name)
         this.saveUserLocalConfig()
         this.tab = curTab.prop
+        this.isDnsMapType = false
+        if(this.tab === 'qtype'){
+          this.dnsMapData =this.dnsQtypeMapData
+          this.isDnsMapType = true
+        }else if(this.tab === 'rcode'){
+          this.dnsMapData =this.dnsRcodeMapData
+          this.isDnsMapType = true
+        }
         let queryParams = {
           orderBy: this.orderBy,
           limit: networkDefaultLimit,
@@ -1724,7 +1751,6 @@ export default {
     this.tableSortColumn = this.getUrlParam(this.curTabState.tableSortColumn, '')
     this.tableSortType = this.getUrlParam(this.curTabState.tableSortType, '')
     this.tableSortTab = this.getUrlParam(this.curTabState.tableSortTab, '')
-
     const currentTableConfig = this.drillDownTableConfigs.find(config => config.route === this.tableType)
     // 开始设置当前table，当前tab，当前tab对应的列等信息
     this.commonTabList = currentTableConfig ? currentTableConfig.tabs : []
@@ -1772,6 +1798,10 @@ export default {
         }
       }
     }
+    //是否需要dns的qtype和rcode的数据字典
+    this.isDnsMapType = false
+    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
     this.saveUserLocalConfig()
     this.getChartData()
   },