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

2022-11-21 11:28:56 +08:00
parent 8e221414b8
commit 69735e438f
4 changed files with 47 additions and 70 deletions
--- a/src/components/layout/Header.vue
+++ b/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]
+    // 是否需要dns的qtype和rcode的数据字典
+    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
+          if(this.from === fromRoute.dnsServiceInsights) {
            this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
            this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+          }
          this.$nextTick(() => {
            this.breadcrumbColumnValueListShow.forEach(item => {
              const selectedDom = document.getElementById(item)
--- a/src/store/modules/panel.js
+++ b/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) {
-    // state.panelName = panelName
-    // },
-    // setBreadcrumbColumnName (state, breadcrumbColumnName) {
-    // state.breadcrumbColumnName = breadcrumbColumnName
-    // },
-    // setDimensionType (state, dimensionType) {
-    // state.dimensionType = dimensionType
-    // },
-    // setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
-    // state.breadcrumbColumnValue = breadcrumbColumnValue
-    // },
-    // setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
-    // state.networkOverviewCurrentTab = networkOverviewCurrentTab
-    // },
-    // setQueryCondition (state, queryCondition) {
-    // state.queryCondition = queryCondition
-    // },
+    setDnsQtypeMapData (state, dnsQtypeMapData) {
+      state.dnsQtypeMapData = dnsQtypeMapData
+    },
+    setDnsRcodeMapData (state, dnsRcodeMapData) {
+      state.dnsRcodeMapData = dnsRcodeMapData
+    },
    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) {
-    // return state.panelName
-    // },
-    // getBreadcrumbColumnName (state) {
-    // return state.breadcrumbColumnName
-    // },
-    // getDimensionType (state) {
-    // return state.dimensionType
-    // },
-    // getBreadcrumbColumnValue (state) {
-    // return state.breadcrumbColumnValue
-    // },
-    // getNetworkOverviewCurrentTab (state) {
-    // return state.networkOverviewCurrentTab
-    // },
-    // getQueryCondition (state) {
-    // return state.queryCondition
-    // },
+    getDnsQtypeMapData (state) {
+      return state.dnsQtypeMapData
+    },
+    getDnsRcodeMapData (state) {
+      return state.dnsRcodeMapData
+    },
    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
    },
--- a/src/views/charts2/Panel.vue
+++ b/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
+    if(this.$route.params.typeName === fromRoute.dnsServiceInsights) {
      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') {
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/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))