CN-205 feat: 地图下钻

src/assets/css/chart.scss

@@ -27,11 +27,12 @@
 }
 .chart__loading {
   position: absolute;
-  height: calc(100% - 50px);
+  height: calc(100% - 47px);
-  top: 50px;
+  top: 47px;
   width: 100%;
   background-color: #fefefe;
   z-index: 1;
+  opacity: .9;
 
   i {
     position: absolute;

src/assets/css/common.scss

@@ -68,5 +68,5 @@ th *:first-letter,
 /* 淡化amcharts的logo */
 g [aria-labelledby$=-title] {
   opacity: 0.1;
-  transform: translate(calc(100% - 76px), calc(100% - 25px));
+  transform: translateX(calc(100% - 52px)) scale(.7);
 }

src/utils/api.js

@@ -4,6 +4,7 @@
  * @description 1.定义api；2.定义通用查询方法，函数名应为 获取详情getItem、获取列表getItemList。例如getUser、getUserList
 */
 import { get, post } from '@/utils/http'
+import axios from 'axios'
 import { sortByOrderNum } from '@/permission'
 import { storageKey } from '@/utils/constants'
 
@@ -116,8 +117,10 @@ export async function getI18n () {
 /* 获得原始的3611-2 json字符串数据 */
 export async function getIso36112JsonData (suffix) {
   const request = new Promise(resolve => {
-    get(`${process.env.BASE_URL}geojson/${suffix}`).then(response => {
+    axios({
-      resolve(JSON.stringify(response))
+      url: `${window.location.protocol}//${window.location.host}:${window.location.port}/geojson/${suffix}.json`,
+    }).then(response => {
+      resolve(response.data || response || null)
     })
   })
   return await request

src/utils/constants.js

@@ -19,11 +19,6 @@ export const storageKey = {
   unsavedChange: 'cn-unsaved-change'
 }
 
-export const iso36112 = {
-  [storageKey.iso36112Capital]: 'data/countriesWithCapital.json',
-  [storageKey.iso36112WorldLow]: 'worldChinaLow.json'
-}
-
 // 统一定义跳转来源
 export const fromRoute = {
   trafficSummary: 'trafficSummary',
@@ -85,3 +80,217 @@ export const unitTypes = {
 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
 export const chartPieTableTopOptions = [{ name: 'Sessions', value: 'sessions' }, { name: 'Packets', value: 'packets' }, { name: 'Bytes', value: 'bytes' }] // table类型图表的TOP-N选项
+
+export const iso36112 = {
+  [storageKey.iso36112Capital]: 'data/countriesWithCapital',
+  [storageKey.iso36112WorldLow]: 'worldChinaLow',
+  IE: 'irelandLow',
+  MM: 'myanmarLow',
+  TZ: 'tanzaniaLow',
+  BS: 'bahamasLow',
+  DM: 'dominicaLow',
+  VC: 'saintVincentLow',
+  BG: 'bulgariaLow',
+  SK: 'slovakiaLow',
+  UZ: 'uzbekistanLow',
+  IS: 'icelandLow',
+  CA: 'canadaLow',
+  AT: 'austriaLow',
+  DO: 'dominicanRepublicLow',
+  MY: 'malaysiaLow',
+  BW: 'botswanaLow',
+  SH: 'saintHelenaLow',
+  NO: 'norway2020Low',
+  CF: 'centralAfricanRepublicLow',
+  GA: 'gabonLow',
+  GD: 'grenadaLow',
+  RU: 'russiaLow',
+  FR: 'franceLow',
+  TJ: 'tajikistanLow',
+  CU: 'cubaLow',
+  NP: 'nepalLow',
+  ZW: 'zimbabweLow',
+  CW: 'curacaoLow',
+  GW: 'guineaBissauLow',
+  EE: 'estoniaLow',
+  AG: 'antiguaBarbudaLow',
+  TT: 'trinidadTobagoLow',
+  BF: 'burkinaFasoLow',
+  LI: 'liechtensteinLow',
+  OM: 'omanLow',
+  GY: 'guyanaLow',
+  GR: 'greeceLow',
+  KG: 'kyrgyzstanLow',
+  SD: 'sudanLow',
+  AE: 'uaeLow',
+  KY: 'caymanIslandsLow',
+  LA: 'laosLow',
+  LT: 'lithuaniaLow',
+  UG: 'ugandaLow',
+  MR: 'mauritaniaLow',
+  SS: 'southSudan2015Low',
+  SI: 'sloveniaLow',
+  MX: 'mexicoLow',
+  GH: 'ghanaLow',
+  GN: 'guineaLow',
+  BB: 'barbadosLow',
+  HN: 'hondurasLow',
+  SN: 'senegalLow',
+  BD: 'bangladeshLow',
+  BQ: 'bonaireSintEustatiusSabaLow',
+  CC: 'cocosKeelingLow',
+  HR: 'croatiaLow',
+  PL: 'polandLow',
+  ST: 'saoTomePrincipeLow',
+  TC: 'turksCaicosLow',
+  GT: 'guatemalaLow',
+  IT: 'italyLow',
+  RW: 'rwandaLow',
+  LC: 'saintLuciaLow',
+  TL: 'timorLesteLow',
+  CZ: 'czechiaLow',
+  GQ: 'equatorialGuineaLow',
+  FJ: 'fijiEastLow',
+  MA: 'moroccoLow',
+  DJ: 'djiboutiLow',
+  NE: 'nigerLow',
+  LV: 'latviaLow',
+  RS: 'serbiaLow',
+  PE: 'peruLow',
+  SE: 'swedenLow',
+  GE: 'georgiaLow',
+  DE: 'bosniaHerzegovinaLow',
+  AF: 'afghanistanLow',
+  AR: 'argentinaLow',
+  KE: 'kenyaLow',
+  AS: 'americanSamoaLow',
+  FI: 'finlandLow',
+  IR: 'iranLow',
+  UY: 'uruguayLow',
+  SA: 'saudiArabiaLow',
+  EC: 'ecuadorLow',
+  AW: 'arubaLow',
+  ZA: 'southAfricaLow',
+  PM: 'stPierreMiquelonLow',
+  SC: 'seychellesLow',
+  MG: 'madagascarProvinceLow',
+  YE: 'yemenLow',
+  BR: 'brazilLow',
+  ML: 'maliLow',
+  CL: 'chileLow',
+  LB: 'lebanonLow',
+  DZ: 'algeriaLow',
+  FO: 'faroeIslandsLow',
+  VE: 'venezuelaLow',
+  CR: 'costaRicaLow',
+  GP: 'guadeloupeLow',
+  SV: 'elSalvadorLow',
+  LK: 'sriLankaLow',
+  KZ: 'kazakhstanLow',
+  NL: 'netherlandsLow',
+  GM: 'gambiaLow',
+  TR: 'turkeyLow',
+  be: 'belgiumLow',
+  PA: 'panamaLow',
+  AZ: 'azerbaijanLow',
+  PT: 'portugalLow',
+  VA: 'vaticanLow',
+  MW: 'malawiLow',
+  KN: 'stKittsNevisLow',
+  NI: 'nicaraguaLow',
+  MD: 'moldovaLow',
+  IN: 'indiaLow',
+  MZ: 'mozambiqueLow',
+  WS: 'samoaLow',
+  ET: 'ethiopiaLow',
+  MV: 'maldivesLow',
+  TH: 'thailandLow',
+  PH: 'philippinesLow',
+  MQ: 'martiniqueLow',
+  KP: 'northKoreaLow',
+  PR: 'puertoRicoLow',
+  CV: 'capeVerdeLow',
+  TG: 'togoLow',
+  AL: 'albaniaLow',
+  SJ: 'svalbardLow',
+  BH: 'bahrainLow',
+  AU: 'australiaLow',
+  BI: 'burundiLow',
+  QA: 'qatarLow',
+  TD: 'chadLow',
+  BZ: 'belizeLow',
+  GS: 'georgiaSouthOssetiaLow',
+  MS: 'montserratLow',
+  BM: 'bermudaLow',
+  ZM: 'zambiaLow',
+  JP: 'japanLow',
+  JO: 'jordanLow',
+  BT: 'bhutanLow',
+  NZ: 'newZealandLow',
+  MK: 'northMacedoniaLow',
+  TN: 'tunisiaLow',
+  bl: 'stBarthelemyLow',
+  PY: 'paraguayLow',
+  ID: 'indonesiaLow',
+  HT: 'haitiLow',
+  FK: 'falklandIslandsLow',
+  MP: 'northernMarianaLow',
+  PS: 'palestineLow',
+  CD: 'congoDRLow',
+  AM: 'armeniaLow',
+  DK: 'denmarkLow',
+  NG: 'nigeriaLow',
+  RO: 'romaniaLow',
+  ER: 'eritreaLow',
+  BN: 'bruneiDarussalamLow',
+  AO: 'angolaLow',
+  BA: 'bosniaHerzegovinaCantonsLow',
+  PK: 'pakistanLow',
+  GL: 'greenlandLow',
+  TM: 'turkmenistanLow',
+  BJ: 'beninLow',
+  CI: 'cotedIvoireLow',
+  CN: 'chinaLow',
+  CH: 'switzerlandLow',
+  VG: 'britishVirginIslandsLow',
+  VI: 'usVirginIslandsLow',
+  IL: 'israelLow',
+  SR: 'surinameLow',
+  CO: 'colombiaLow',
+  MT: 'maltaLow',
+  CM: 'cameroonLow',
+  LY: 'libyaLow',
+  IQ: 'iraqLow',
+  UA: 'ukraineLow',
+  VN: 'vietnamLow',
+  KH: 'cambodiaLow',
+  AI: 'anguillaLow',
+  ME: 'montenegroLow',
+  SB: 'solomonIslandsLow',
+  KR: 'southKoreaLow',
+  GB: 'ukLow',
+  SG: 'singaporeLow',
+  EG: 'egyptLow',
+  CY: 'cyprusLow',
+  KM: 'comorosLow',
+  GU: 'guamLow',
+  HK: 'hongKongLow',
+  SO: 'somaliaLow',
+  NA: 'namibiaLow',
+  HU: 'hungaryLow',
+  BY: 'belarusLow',
+  BO: 'boliviaLow',
+  GF: 'frenchGuianaLow',
+  US: 'usaLow',
+  SL: 'sierraLeoneLow',
+  SM: 'sanMarinoLow',
+  AD: 'andorraLow',
+  ES: 'spainLow',
+  KW: 'kuwaitLow',
+  CG: 'congoLow',
+  LU: 'luxembourgLow',
+  JM: 'jamaicaLow',
+  SY: 'syriaLow',
+  SZ: 'eswatiniLow',
+  MN: 'mongoliaLow'
+}

src/views/charts/Chart.vue

@@ -47,6 +47,7 @@
     </template>
     <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
     <template #operations>
+      <span class="header__operation-btn" v-show="showMapBackButton" @click="mapBack"><i class="cn-icon el-icon-back"></i></span>
       <el-popover trigger="hover" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
         <template #reference>
           <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
@@ -70,7 +71,9 @@
           <div class="chart-drawing" style="padding: 0 36px 30px 0;" :id="`chart${chartInfo.id}`"></div>
         </div>
       </template>
-      <div v-else class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
+      <template v-else>
+        <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
+      </template>
     </template>
   </chart-map>
   <!-- echarts类的图，如饼图、柱状图、折线图等 -->
@@ -560,6 +563,7 @@ export default {
         value: '-',
         icon: ''
       },
+      showMapBackButton: false, // 下钻之后控制是否显示返回上一层按钮
       standaloneTimeRange: { // 单个图表刷新时，重新获取时间范围，且不影响到其他图
         use: false,
         startTime: '',
@@ -584,7 +588,9 @@ export default {
       throttle: null, // 节流器
       isError: false, // 接口响应是否报错
       errorInfo: '', // 接口具体错误信息
-      polygonSeries: null
+      polygonSeries: null, // 世界地图series
+      countrySeries: null, // 下钻国家series
+      baseMapSeriesName: ['Container', 'MapChart']
     }
   },
   methods: {
@@ -596,9 +602,7 @@ export default {
       try {
         const chartParams = this.chartInfo.params
         if (this.isMap) {
-          const { chart, polygonSeries } = this.initMap(`chart${this.chartInfo.id}`)
+          this.initMap(`chart${this.chartInfo.id}`)
-          this.myChart = chart
-          this.polygonSeries = polygonSeries
           if (chartParams) {
             this.loadMap(this.polygonSeries)
           }
@@ -802,26 +806,58 @@ export default {
       const chart = am4Core.create(id, am4Maps.MapChart)
       chart.geodata = getGeoData(storageKey.iso36112WorldLow)
       chart.projection = new am4Maps.projections.Miller()
+      this.myChart = chart
       const polygonSeries = chart.series.push(new am4Maps.MapPolygonSeries())
       polygonSeries.useGeodata = true
       polygonSeries.exclude = ['AQ'] // 排除南极洲
       polygonSeries.tooltip.getFillFromObject = false
       polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
+      this.polygonSeries = polygonSeries
       const polygonTemplate = polygonSeries.mapPolygons.template
       polygonTemplate.tooltipHTML = this.generateTooltipHTML()
-      polygonSeries.tooltip.getFillFromObject = false
-      polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
       polygonTemplate.nonScalingStroke = true
       polygonTemplate.strokeWidth = 0.5
       polygonTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
+      polygonTemplate.events.on('hit', ev => {
+        const countryId = ev.target.dataItem.dataContext.id
+        if (countryId) {
+          ev.target.series.chart.zoomToMapObject(ev.target)
+          ev.target.isHover = false
+          this.countrySeries = chart.series.push(new am4Maps.MapPolygonSeries())
+          this.countrySeries.tooltip.getFillFromObject = false
+          this.countrySeries.tooltip.background.fill = am4Core.color('#FFFFFF')
+          const countryTemplate = this.countrySeries.mapPolygons.template
+          countryTemplate.tooltipHTML = this.generateTooltipHTML()
+          countryTemplate.nonScalingStroke = true
+          countryTemplate.strokeWidth = 0.5
+          countryTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
+          const geoData = getGeoData(countryId)
+          if (geoData) {
+            this.countrySeries.geodata = geoData
+            this.polygonSeries.hide()
+            this.loadMap(this.countrySeries, ev.target.dataItem.dataContext.serverCountry)
+          }
+        }
+      })
       return {
         chart,
         polygonSeries
       }
     },
-    loadMap (polygonSeries) {
+    loadMap (polygonSeries, country) {
+      this.loading = true
+      // 清除数据
+      polygonSeries.data.splice(0)
+      // 清除legend
+      this.myChart.children.each((s, i) => {
+        if (s.className !== 'Container') {
+          this.myChart.children.removeIndex(i)
+        }
+      })
+
+      this.showMapBackButton = !!country
       const chartParams = this.chartInfo.params
-      const queryParams = { ...this.queryTimeRange, country: '', region: '', ...this.entity } // 统计数据的查询参数
+      const queryParams = { ...this.queryTimeRange, country: country || '', region: '', ...this.entity } // 统计数据的查询参数
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
         if (response.code === 200 && !this.$_.isEmpty(response.data.result)) {
           const data = response.data.result
@@ -898,7 +934,8 @@ export default {
                 })
               })
               imageSeries.data = pointData
-            } else if (this.isMapBlock) {
+            }
+            if (this.isMapBlock) {
               const sumData = []
               data.forEach(r => {
                 const hit = sumData.find(s => s.id === r.serverId)
@@ -909,6 +946,7 @@ export default {
                 } else {
                   sumData.push({
                     id: r.serverId,
+                    serverCountry: r.serverCountry,
                     key,
                     labelText,
                     value
@@ -976,6 +1014,13 @@ export default {
         this.initChart()
       })
     },
+    mapBack () {
+      this.countrySeries.hide()
+      this.loadMap(this.polygonSeries)
+      this.polygonSeries.show()
+      this.myChart.goHome()
+    },
+    // 获取最新时间
     getCurrentTimeRange (callback) {
       this.$emit('getCurrentTimeRange', ({ startTime, endTime }) => {
         callback({ startTime, endTime })