From 6827d4f031d95b34efcf8a1b695b58b73527aa5a Mon Sep 17 00:00:00 2001 From: hyx Date: Thu, 3 Nov 2022 17:51:53 +0800 Subject: [PATCH] =?UTF-8?q?CN-762=20DNS=20service=20insights=20=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=BB=BA=E8=AE=AE(dns=20qtype=E5=92=8Crcode=E7=BB=B4?= =?UTF-8?q?=E5=BA=A6=E6=95=B0=E6=8D=AE=E6=98=A0=E5=B0=84=E5=8F=8A=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89metric=E5=90=8D=E7=A7=B0=E4=BF=AE=E6=94=B9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header.vue | 24 +++++++---- src/utils/tools.js | 43 ++++++++++++++++++- .../networkOverview/NetworkOverviewTabs.vue | 18 +++++--- 3 files changed, 70 insertions(+), 15 deletions(-) diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index b4ed1157..0ed9b011 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -194,7 +194,7 @@ import { } from '@/utils/constants' import { api } from '@/utils/api' import { ref } from 'vue' -import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig } from '@/utils/tools' +import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,mapDnsData } from '@/utils/tools' import { getNowTime, getSecond } from '@/utils/date-util' import { db } from '@/indexedDB' @@ -350,14 +350,14 @@ export default { window.location.reload() }) }, - initDropdownList () { - const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : '' - const columnName = this.getUrlParam(this.curTabState.thirdMenu, '') + async initDropdownList () { + let currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : '' + let columnName = this.getUrlParam(this.curTabState.thirdMenu, '') let type = 'ip' - const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' - const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview + let tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' + let curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview if (curTableInCode && curTableInCode.tabList) { - const curTab = curTableInCode.tabList.find(item => item.label == columnName) + let curTab = curTableInCode.tabList.find(item => item.label == columnName) if (curTab) { type = curTab.prop } @@ -369,9 +369,15 @@ export default { type: type, name: this.dropDownValue ? this.dropDownValue : '' } - get(curTableInCode.url.drilldownList, params).then(response => { + get(curTableInCode.url.drilldownList, params).then(async response => { if (response.code === 200) { - this.breadcrumbColumnValueListShow = response.data.result + let dataList = response.data.result + if('qtype' === type){ + dataList = await mapDnsData(dataList,'dnsQtype','qtype') + }else if('rcode' === type){ + dataList = await mapDnsData(dataList,'dnsRcode','rcode') + } + this.breadcrumbColumnValueListShow = dataList this.$nextTick(() => { this.breadcrumbColumnValueListShow.forEach(item => { const selectedDom = document.getElementById(item) diff --git a/src/utils/tools.js b/src/utils/tools.js index f866a885..e3ca0c12 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 } from '@/utils/api' +import { getIso36112JsonData,getDictList } from '@/utils/api' import { format } from 'echarts' import router from '@/router' import { db } from '@/indexedDB' @@ -855,6 +855,47 @@ export function getTabList (curTable, curMetric) { } return tabs } +export async function mapDnsData(list,type,prop){ + let valueGroup = [] + const dnsData = await getDictList({ type:type,pageSize: -1 }) + if(list && list.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 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 + } + }) + } + }else { + let code = Number(data[prop]) + 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 + } + }) + } + } + valueGroup.push(data) + }) + } + return valueGroup +} export function combineTabList (tableType, list, commonTabList) { const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview const listInCode = curTableInCode ? curTableInCode.tabList : [] diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue index ae0dc220..bd74ab56 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue @@ -155,7 +155,7 @@ - +