DNS的qtype和rcode维度信息查询优化

src/components/layout/Header.vue

@@ -62,10 +62,10 @@
                        :class="showBackground?'breadcrumb-button__active':''">
                     <span id="breadcrumbValue">
                       <template v-if="curTabProp === 'qtype'">
-                        <span>{{ dnsQtypeMapData.get(item) ? dnsQtypeMapData.get(item) : item }}</span>
+                        <span>{{ dnsQtypeMapData.get(item)}}</span>
                       </template>
                       <template v-else-if="curTabProp === 'rcode'">
-                        <span>{{ dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item) : item }}</span>
+                        <span>{{ dnsRcodeMapData.get(item)}}</span>
                       </template>
                       <template v-else>
                         <span>{{ item }}</span>
@@ -84,10 +84,10 @@
                     <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>
+                        <span>{{ dnsQtypeMapData.get(item) }}</span>
                       </template>
                       <template v-else-if="curTabProp === 'rcode'">
-                        <span>{{ dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item) : item }}</span>
+                        <span>{{ dnsRcodeMapData.get(item) }}</span>
                       </template>
                       <template v-else>
                         <span>{{ item }}</span>
@@ -382,8 +382,11 @@ export default {
   },
   async mounted () {
     this.from = Object.keys(this.entityType)[0]
-    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+    // 是否需要dns的qtype和rcode的数据字典
-    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+    if(this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+      this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+      this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+    }
     this.initDropdownList()
   },
   setup () {
@@ -460,8 +463,10 @@ export default {
       get(curTableInCode.url.drilldownList, params).then(async response => {
         if (response.code === 200) {
           this.breadcrumbColumnValueListShow = response.data.result
-          this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+          if(this.from === fromRoute.dnsServiceInsights) {
-          this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+            this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+            this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+          }
           this.$nextTick(() => {
             this.breadcrumbColumnValueListShow.forEach(item => {
               const selectedDom = document.getElementById(item)

src/store/modules/panel.js

@@ -57,7 +57,9 @@ const panel = {
     routerPath: '', // 当前路由路径
     httpCancel: null, // 终止http请求
     rangeEchartsData: {}, // 框选echarts图表
-    routerHistoryList: [] // 路由跳转记录列表
+    routerHistoryList: [], // 路由跳转记录列表
+    dnsQtypeMapData:[],
+    dnsRcodeMapData:[]
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -108,36 +110,15 @@ const panel = {
     setCurrentMap (state, currentMap) {
       state.currentMap = currentMap
     },
-    // setPanelName (state, panelName) {
+    setDnsQtypeMapData (state, dnsQtypeMapData) {
-    // state.panelName = panelName
+      state.dnsQtypeMapData = dnsQtypeMapData
-    // },
+    },
-    // setBreadcrumbColumnName (state, breadcrumbColumnName) {
+    setDnsRcodeMapData (state, dnsRcodeMapData) {
-    // state.breadcrumbColumnName = breadcrumbColumnName
+      state.dnsRcodeMapData = dnsRcodeMapData
-    // },
+    },
-    // setDimensionType (state, dimensionType) {
-    // state.dimensionType = dimensionType
-    // },
-    // setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
-    // state.breadcrumbColumnValue = breadcrumbColumnValue
-    // },
-    // setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
-    // state.networkOverviewCurrentTab = networkOverviewCurrentTab
-    // },
-    // setQueryCondition (state, queryCondition) {
-    // state.queryCondition = queryCondition
-    // },
     setNetworkOverviewTabList (state, networkOverviewTabList) {
       state.networkOverviewTabList = networkOverviewTabList
     },
-    // setTabOperationType (state, tabOperationType) {
-    // state.tabOperationType = tabOperationType
-    // },
-    // setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) {
-    // state.networkOverviewBeforeTab = networkOverviewBeforeTab
-    // },
-    // setTabOperationBeforeType (state, tabOperationBeforeType) {
-    // state.tabOperationBeforeType = tabOperationBeforeType
-    // },
     setNpmLocationCountry (state, country) {
       state.npmLocationCountry = country
     },
@@ -215,36 +196,15 @@ const panel = {
     getCurrentMap (state) {
       return state.currentMap
     },
-    // getPanelName (state) {
+    getDnsQtypeMapData (state) {
-    // return state.panelName
+      return state.dnsQtypeMapData
-    // },
+    },
-    // getBreadcrumbColumnName (state) {
+    getDnsRcodeMapData (state) {
-    // return state.breadcrumbColumnName
+      return state.dnsRcodeMapData
-    // },
+    },
-    // getDimensionType (state) {
-    // return state.dimensionType
-    // },
-    // getBreadcrumbColumnValue (state) {
-    // return state.breadcrumbColumnValue
-    // },
-    // getNetworkOverviewCurrentTab (state) {
-    // return state.networkOverviewCurrentTab
-    // },
-    // getQueryCondition (state) {
-    // return state.queryCondition
-    // },
     getNetworkOverviewTabList (state) {
       return state.networkOverviewTabList
     },
-    // getTabOperationType (state) {
-    // return state.tabOperationType
-    // },
-    // getNetworkOverviewBeforeTab (state) {
-    // return state.networkOverviewBeforeTab
-    // },
-    // getTabOperationBeforeType (state) {
-    // return state.tabOperationBeforeType
-    // },
     getNpmLocationCountry (state) {
       return state.npmLocationCountry
     },

src/views/charts2/Panel.vue

@@ -61,7 +61,8 @@ import {
   panelTypeAndRouteMapping,
   curTabState,
   drillDownPanelTypeMapping,
-  metricOptions
+  metricOptions,
+  fromRoute
 } from '@/utils/constants'
 import { getPanelList, getChartList, api } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
@@ -112,8 +113,12 @@ export default {
     // this.panelName = this.$store.getters.getPanelName
     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')
+    if(this.$route.params.typeName === fromRoute.dnsServiceInsights) {
-    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+      this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+      this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+      this.$store.commit('setDnsQtypeMapData', this.dnsQtypeMapData)
+      this.$store.commit('setDnsRcodeMapData', this.dnsRcodeMapData)
+    }
     if (curTabProp === 'qtype') {
       this.panelName = this.dnsQtypeMapData.get(pName)
     } else if (curTabProp === 'rcode') {

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

@@ -1156,7 +1156,6 @@ export default {
       }
 
       this.saveUserLocalConfig()
-      // console.log(this.drillDownTableConfigs)
       let forthMenuName = ''
       if (clickTab.prop === 'qtype') {
         forthMenuName = this.dnsQtypeMapData.get(columnValue)
@@ -1768,12 +1767,20 @@ 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'
+    // 是否需要dns的qtype和rcode的数据字典
+    if(this.tableType === fromRoute.dnsServiceInsights) {
+      this.dnsQtypeMapData = this.$store.getters.getDnsQtypeMapData
+      this.dnsRcodeMapData = this.$store.getters.getDnsRcodeMapData
+      if(!this.dnsQtypeMapData || this.dnsQtypeMapData.size === 0){
+        this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+        this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+        this.$store.commit('setDnsQtypeMapData', this.dnsQtypeMapData)
+        this.$store.commit('setDnsRcodeMapData', this.dnsRcodeMapData)
+      }
+    }
     this.curTableInCode = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
     // 表格状态初始化(url)
     this.showRecordNum = Number(this.getUrlParam(this.curTabState.tableShowMore, 10))