CN-1247 下钻table下钻后部分维度的字段名变更

2023-08-30 16:28:41 +08:00
parent 90cbca0ab8
commit cc059c6ab1
3 changed files with 93 additions and 83 deletions
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -81,7 +81,8 @@ export default {
            res.loginSuccessPath = this.$route.query.redirect
            this.loginSuccess(res)
            localStorage.setItem(storageKey.username, this.username)
-            localStorage.setItem(storageKey.userId, res.data.data.user.userId)
+            // localStorage.setItem(storageKey.userId, res.data.data.user.userId)
+            localStorage.setItem(storageKey.userId, res.data.data.user.id)
            localStorage.setItem(storageKey.token, res.data.data.token)
            this.$i18n.locale = localStorage.getItem(storageKey.language)
          } else if (res.data.code === 518005) {
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -687,9 +687,9 @@ export const networkOverviewTabList = [
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.countries',
-    prop: 'country',
+    prop: 'countryRegion',
    queryCycleTotalProp: 'countries',
-    dillDownProp: ['client_country', 'server_country'],
+    dillDownProp: ['client_country_region', 'server_country_region'],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
@@ -745,15 +745,15 @@ export const networkOverviewTabList = [
    label: 'network.regions',
    prop: 'superAdminArea',
    queryCycleTotalProp: 'regions',
-    dillDownProp: ['client_super_admin_area', 'server_super_admin_area'],
+    dillDownProp: ['client_super_admin_area', 'server_super_admin_ area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.cities',
-    prop: 'city',
+    prop: 'adminArea',
    queryCycleTotalProp: 'cities',
-    dillDownProp: ['client_region', 'server_region'],
+    dillDownProp: ['client_admin_area', 'server_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
@@ -815,49 +815,49 @@ export const networkOverviewTabList = [
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientCountries',
-    prop: 'clientCountry',
+    prop: 'clientCountryRegion',
    queryCycleTotalProp: 'clientCountries',
-    dillDownProp: ['client_country'],
+    dillDownProp: ['client_country_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverCountries',
-    prop: 'serverCountry',
+    prop: 'serverCountryRegion',
    queryCycleTotalProp: 'serverCountries',
-    dillDownProp: ['server_country'],
+    dillDownProp: ['server_country_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientProvinces',
-    prop: 'clientProvince',
+    prop: 'clientSuperAdminArea',
    queryCycleTotalProp: 'clientProvinces',
-    dillDownProp: ['client_province'],
+    dillDownProp: ['client_super_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverProvinces',
-    prop: 'serverProvince',
+    prop: 'serverSuperAdminArea',
    queryCycleTotalProp: 'serverProvinces',
-    dillDownProp: ['server_province'],
+    dillDownProp: ['server_super_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientCities',
-    prop: 'clientCity',
+    prop: 'clientAdminArea',
    queryCycleTotalProp: 'clientCities',
-    dillDownProp: ['client_region'],
+    dillDownProp: ['client_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverCities',
-    prop: 'serverCity',
+    prop: 'serverAdminArea',
    queryCycleTotalProp: 'serverCities',
-    dillDownProp: ['server_region'],
+    dillDownProp: ['server_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
@@ -907,9 +907,9 @@ export const networkAppPerformanceTabList = [
    panelId: drillDownPanelTypeMapping.npmOverviewIp// 下钻后展示的panelId
  }, {
    label: 'network.countries',
-    prop: 'country',
+    prop: 'countryRegion',
    queryCycleTotalProp: 'countries',
-    dillDownProp: ['client_country', 'server_country'],
+    dillDownProp: ['client_country_region', 'server_country_region'],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
@@ -965,15 +965,15 @@ export const networkAppPerformanceTabList = [
    label: 'network.regions',
    prop: 'superAdminArea',
    queryCycleTotalProp: 'regions',
-    dillDownProp: ['client_super_admin_area', 'server_super_admin_area'],
+    dillDownProp: ['client_super_admin_area', 'server_super_admin_ area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.cities',
-    prop: 'city',
+    prop: 'adminArea',
    queryCycleTotalProp: 'cities',
-    dillDownProp: ['client_region', 'server_region'],
+    dillDownProp: ['client_admin_area', 'server_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
@@ -1035,49 +1035,49 @@ export const networkAppPerformanceTabList = [
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientCountries',
-    prop: 'clientCountry',
+    prop: 'clientCountryRegion',
    queryCycleTotalProp: 'clientCountries',
-    dillDownProp: ['client_country'],
+    dillDownProp: ['client_country_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverCountries',
-    prop: 'serverCountry',
+    prop: 'serverCountryRegion',
    queryCycleTotalProp: 'serverCountries',
-    dillDownProp: ['server_country'],
+    dillDownProp: ['server_country_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientProvinces',
-    prop: 'clientProvince',
+    prop: 'clientSuperAdminArea',
    queryCycleTotalProp: 'clientProvinces',
-    dillDownProp: ['client_province'],
+    dillDownProp: ['client_super_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverProvinces',
-    prop: 'serverProvince',
+    prop: 'serverSuperAdminArea',
    queryCycleTotalProp: 'serverProvinces',
-    dillDownProp: ['server_province'],
+    dillDownProp: ['server_super_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientCities',
-    prop: 'clientCity',
+    prop: 'clientAdminArea',
    queryCycleTotalProp: 'clientCities',
-    dillDownProp: ['client_region'],
+    dillDownProp: ['client_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverCities',
-    prop: 'serverCity',
+    prop: 'serverAdminArea',
    queryCycleTotalProp: 'serverCities',
-    dillDownProp: ['server_region'],
+    dillDownProp: ['server_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
@@ -1126,9 +1126,9 @@ export const linkMonitorTabList = [
    panelId: drillDownPanelTypeMapping.linkMonitor// 下钻后展示的panelId
  }, {
    label: 'network.countries',
-    prop: 'country',
+    prop: 'countryRegion',
    queryCycleTotalProp: 'countries',
-    dillDownProp: ['client_country', 'server_country'],
+    dillDownProp: ['client_country_region', ' server_country_region'],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
@@ -1190,9 +1190,9 @@ export const linkMonitorTabList = [
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.cities',
-    prop: 'city',
+    prop: 'adminArea',
    queryCycleTotalProp: 'cities',
-    dillDownProp: ['client_region', 'server_region'],
+    dillDownProp: ['client_admin_area', 'server_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
@@ -1254,49 +1254,49 @@ export const linkMonitorTabList = [
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientCountries',
-    prop: 'clientCountry',
+    prop: 'clientCountryRegion',
    queryCycleTotalProp: 'clientCountries',
-    dillDownProp: ['client_country'],
+    dillDownProp: ['client_country_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverCountries',
-    prop: 'serverCountry',
+    prop: 'serverCountryRegion',
    queryCycleTotalProp: 'serverCountries',
-    dillDownProp: ['server_country'],
+    dillDownProp: ['server_country_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientProvinces',
-    prop: 'clientProvince',
+    prop: 'clientSuperAdminArea',
    queryCycleTotalProp: 'clientProvinces',
-    dillDownProp: ['client_province'],
+    dillDownProp: ['client_super_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverProvinces',
-    prop: 'serverProvince',
+    prop: 'serverSuperAdminArea',
    queryCycleTotalProp: 'serverProvinces',
-    dillDownProp: ['server_province'],
+    dillDownProp: ['server_super_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientCities',
-    prop: 'clientCity',
+    prop: 'clientAdminArea',
    queryCycleTotalProp: 'clientCities',
-    dillDownProp: ['client_region'],
+    dillDownProp: ['client_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverCities',
-    prop: 'serverCity',
+    prop: 'serverAdminArea',
    queryCycleTotalProp: 'serverCities',
-    dillDownProp: ['server_region'],
+    dillDownProp: ['server_admin_area'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
@@ -1346,18 +1346,18 @@ export const dnsServiceInsightsTabList = [
  },
  {
    label: 'network.countries',
-    prop: 'country',
+    prop: 'countryRegion',
    queryCycleTotalProp: 'countries',
-    dillDownProp: ['server_country'],
+    dillDownProp: ['server_country_region'],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
  },
  {
    label: 'network.cities',
-    prop: 'city',
+    prop: 'adminArea',
    queryCycleTotalProp: 'cities',
-    dillDownProp: ['server_region'],
+    dillDownProp: ['server_admin_area'],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -55,13 +55,12 @@
                                @show="showTabSearchPopover(item.prop,tab.prop)"
                                @hide="hideTabSearchPopover(item.prop)"
                                trigger="manual"
-
                                v-model:visible="showPopoverGroup[tab.prop]"
                    >
                      <template #reference>
-                        <div>
-                          <div class="tab-search-button" id="tabSearchButton"  v-show="showSearchButton"
-                               @click="showPopoverGroup[tab.prop]=!showPopoverGroup[tab.prop]">
+                        <div :ref="`tabSearchRef${tab.prop}`">
+                          <div class="tab-search-button" :id="`tabSearchButton${tab.prop}`" v-show="showSearchButton"
+                               @click="handlePopoverShow(item.prop,tab.prop)">
                            <i class="el-icon-search" style="color:#575757;" ></i>
                          </div>
                          <div class="tab-search-input"  v-show="showSearchInput">
@@ -70,7 +69,7 @@
                                      size="mini"
                                      readonly
                                      prefix-icon="cn-icon cn-icon-search"
-                                      @click="showListPopover(item.prop,tab.prop)"
+                                      @click="showListPopover(item.prop)"
                            >
                              <template v-if="curTabProp === 'qtype'">
                                <span>{{ dnsQtypeMapData.get(item.value)}}</span>
@@ -82,7 +81,7 @@
                                <span>{{ item.value }}&&</span>
                              </template>
                              <template v-slot:suffix >
-                                <i class="cn-icon cn-icon-close search-input-close" @click="closeSearchInput(tab.prop)"></i>
+                                <i class="cn-icon cn-icon-close search-input-close" @click="closeSearchInput(item.prop)"></i>
                              </template>
                            </el-input>
                          </div>
@@ -93,11 +92,11 @@
                          <el-input :placeholder="`${$t('networkOverview.search')} ${$t(item.label)}`"
                                    size="mini"
                                    v-model="dropDownValue"
-                                    @input="dropDownSearch(tab.prop)"></el-input>
+                                    @input="dropDownSearch(item.prop)"></el-input>
                        </div>
-                        <ul class="select-dropdown" id="tabSearchSelectDropdown" @scroll="scrollList(tab.prop)">
+                        <ul class="select-dropdown" id="tabSearchSelectDropdown" @scroll="scrollList(item.prop)">
                          <li v-for="item in tabSearchColumnValueListShow" title='' :key="item" :id="`${item}${tab.prop}`"
-                              class="select-dropdown__item" @click="changeValue(item,tab.prop)">
+                              class="select-dropdown__item" @click="changeValue(item)">
                            <template v-if="curTabProp === 'qtype'">
                              <span>{{ dnsQtypeMapData.get(item) }}</span>
                            </template>
@@ -531,6 +530,9 @@ export default {
        }
      })
    },
+    handlePopoverShow (prop, tabProp) {
+      this.showPopoverGroup[prop] = !this.showPopoverGroup[prop]
+    },
    showTabSearchPopover (prop, tabProp) {
      const curIndex = this.list.findIndex(item => item.checked && (item.prop === prop))
      const curTabIndex = this.list.findIndex(item => item.checked && (item.prop === tabProp))
@@ -540,19 +542,25 @@ export default {
        this.showSearchList = true
        this.dropDownValue = ''
        this.initDropdownList(tabProp)
+      } else {
+        this.tabSearchColumnValueListShow.splice(0, this.tabSearchColumnValueListShow.length)
+        this.curPageNum = 1
+        this.showSearchList = true
+        this.dropDownValue = ''
+        this.initDropdownList(prop)
      }
    },
    hideTabSearchPopover () {
      this.showSearchButton = false
      this.showSearchList = false
    },
-    closeSearchInput (tabProp) {
+    closeSearchInput (prop) {
      this.showSearchInput = false
      this.showSearchButton = false
-      const currentValue = document.getElementById('tabSearchValue' + tabProp).value
+      const currentValue = document.getElementById('tabSearchValue' + prop).value
      // 清空记录选中样式
      this.tabSearchColumnValueListShow.forEach(item => {
-        const selectedDom = document.getElementById(item + tabProp)
+        const selectedDom = document.getElementById(item + prop)
        if (selectedDom) {
          const itemName = item
          if (itemName === currentValue) {
@@ -560,29 +568,29 @@ export default {
          }
        }
      })
-      document.getElementById('tabSearchValue' + tabProp).value = ''
+      document.getElementById('tabSearchValue' + prop).value = ''
      this.showPopover = false
-      this.showPopoverGroup[tabProp] = false
+      this.showPopoverGroup[prop] = false

      // 重新请求数据
      const queryParams = this.getQueryParams()
      this.getChartData(queryParams)
    },
-    showListPopover (prop, tabProp) {
+    showListPopover (prop) {
      this.showSearchButton = false
-      this.showPopoverGroup[tabProp] = true
+      this.showPopoverGroup[prop] = true
    },
-    dropDownSearch (tabProp) {
+    dropDownSearch (prop) {
      this.curPageNum = 1
-      this.initDropdownList(tabProp)
+      this.initDropdownList(prop)
    },
-    scrollList (tabProp) {
+    scrollList (prop) {
      const obj = document.getElementById('tabSearchSelectDropdown')
      if (obj.scrollTop + obj.clientHeight === obj.scrollHeight) {
-        this.initDropdownList(tabProp)
+        this.initDropdownList(prop)
      }
    },
-    changeValue (value, tabProp) {
+    changeValue (value) {
      // 设置面包屑显示的内容及hover时的title
      const curTab = this.getCurTab()
      this.curTabProp = curTab ? curTab.prop : ''
@@ -594,10 +602,10 @@ export default {
      }
      this.showSearchButton = false
      this.showPopover = false
-      this.showPopoverGroup[tabProp] = false
+      this.showPopoverGroup[this.curTabProp] = false
      this.$nextTick(() => {
        this.showSearchInput = true
-        document.getElementById('tabSearchValue' + tabProp).value = valName
+        document.getElementById('tabSearchValue' + this.curTabProp).value = valName
      })
      // this.jump(this.route, columnName, value, operationType.fourthMenu)

@@ -709,6 +717,10 @@ export default {
    },
    initState () {
      let curTab = this.getCurTab()
+      if (this.isThirdMenu()) {
+        const tabLabel = this.getUrlParam(this.curTabState.thirdMenu, '')
+        curTab = this.list.find(item => item.label === tabLabel)
+      }
      if (curTab) { // 显示当前tab
        const realTab = this.list.find(item => item.name === curTab.name)
        if (realTab) {
@@ -1641,9 +1653,7 @@ export default {
      this.curTabProp = ''
      this.showPopoverGroup = []
      this.list.forEach(item => {
-        // if(item.checked){
-        this.showPopoverGroup.push(false)
-        // }
+        this.showPopoverGroup[item.prop] = false
      })
    },
    // 切换tab
@@ -1843,7 +1853,6 @@ export default {
        this.list.forEach(item => {
          if (item.name === curTab.name) {
            // item.checked = true
-            // this.showTab(curTab)
          }
        })
      }