From e3db8caf63fc54f1dbd7fbf1ea4f10c96b65a0a3 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 23 Aug 2022 21:42:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=B3=E4=B8=8A=E8=A7=92=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E7=AD=9B=E9=80=89=E5=92=8C=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/api.js                              |   9 +-
 src/views/charts2/Panel.vue                   |  16 +-
 .../networkOverview/NetworkOverviewApps.vue   |  26 ++-
 .../NetworkOverviewDdosDetection.vue          |   8 +
 .../networkOverview/NetworkOverviewLine.vue   |   6 +
 .../NetworkOverviewPerformanceEvent.vue       |   6 +
 .../charts/npm/NpmAppCategoryScore.vue        |  18 +-
 .../charts2/charts/npm/NpmEventsHeader.vue    |   8 +
 src/views/charts2/charts/npm/NpmIpMap.vue     | 207 +++++++++---------
 src/views/charts2/charts/npm/NpmLine.vue      |  14 +-
 src/views/charts2/charts/npm/NpmMap.vue       |  90 +++++---
 .../charts2/charts/npm/NpmRecentEvents.vue    |   2 +-
 12 files changed, 249 insertions(+), 161 deletions(-)

diff --git a/src/utils/api.js b/src/utils/api.js
index 9c4427a1..11295a55 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -162,7 +162,14 @@ export const api = {
       // 各维度下钻会话统计
       relatedSessions: '/interface/application/performance/relatedSessions',
       // 各维度下钻流量曲线图
-      trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph'
+      trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph',
+      // 下钻地图
+      map: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/trafficAnalysis',
+      mapTcp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay',
+      mapHttp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/httpResponseDelay',
+      mapSsl: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/sslConDelay',
+      mapPacketLoss: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay',
+      mapPacketRetrans: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay'
     },
     location: {
       // 折线图
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index fc024363..3dde2327 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-  import {useRoute, useRouter} from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ref } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
@@ -131,11 +131,17 @@ export default {
         })
       }
     },
-    timeRefreshChange (startTime, endTime, dateRangeValue) {
-
+    reload (startTime, endTime, dateRangeValue) {
+      this.timeFilter = { startTime: startTime, endTime: endTime, dateRangeValue: dateRangeValue }
     },
-    reload () {
-
+    timeRefreshChange () {
+      // 不是自选时间
+      if (!this.$refs.dateTimeRange.isCustom) {
+        const value = this.timeFilter.dateRangeValue
+        this.$refs.dateTimeRange.quickChange(value)
+      } else {
+        this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
+      }
     }
   }
 }
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index d5841105..e6afaf93 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -118,19 +118,20 @@
 
 <script>
 import unitConvert from '@/utils/unit-convert'
-import { storageKey, unitTypes } from '@/utils/constants'
+import {storageKey, unitTypes} from '@/utils/constants'
 import * as echarts from 'echarts'
-import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
-import { shallowRef } from 'vue'
-import { get, put } from '@/utils/http'
-import { api } from '@/utils/api'
+import {appListChartOption} from '@/views/charts2/charts/options/echartOption'
+import {shallowRef} from 'vue'
+import {get, put} from '@/utils/http'
+import {api} from '@/utils/api'
 import _ from 'lodash'
-import { getSecond } from '@/utils/date-util'
-import { getChainRatio } from '@/utils/tools'
+import {getSecond} from '@/utils/date-util'
+import {getChainRatio} from '@/utils/tools'
 import loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
-import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
+import {appStackedLineTooltipFormatter} from '@/views/charts/charts/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
+
 export default {
   name: 'NetworkOverviewApps',
   components: {
@@ -198,6 +199,12 @@ export default {
           window.removeEventListener('scroll', this.handleScroll, true)
         }
       }
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init()
+      }
     }
   },
   methods: {
@@ -320,8 +327,7 @@ export default {
           params.forEach(t => {
             t.seriesName = this.$t(t.seriesName)
           })
-          const str = appStackedLineTooltipFormatter(params)
-          return str
+          return appStackedLineTooltipFormatter(params)
         }
         chart.setOption(chartOption)
         this.myChart.push(chart)
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
index 3b14a1ff..dedc6acf 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
@@ -40,6 +40,14 @@ export default {
       isNoData: false
     }
   },
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.ddosDetectDataRequests()
+      }
+    }
+  },
   methods: {
     ddosDetectDataRequests () {
       const params = {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index 01b9c487..af0a6200 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -145,6 +145,12 @@ export default {
       this.$nextTick(() => {
         this.handleActiveBar(n)
       })
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init(this.echartsType, this.showMarkLine, 'active')
+      }
     }
   },
   methods: {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
index 86a60005..fee60b29 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
@@ -140,6 +140,12 @@ export default {
   watch: {
     loading (n) {
       this.toggleLoading(n)
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init()
+      }
     }
   },
   mounted () {
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index a23ba136..a0329f58 100644
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -128,13 +128,19 @@ export default {
     }
   },
   mixins: [chartMixin],
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init()
+      }
+    }
+  },
   methods: {
-    init (params) {
-      if (!params) {
-        params = {
-          startTime: getSecond(this.timeFilter.startTime),
-          endTime: getSecond(this.timeFilter.endTime)
-        }
+    init () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
       }
       // 获取table后三列内容
       const currentTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 0 })
diff --git a/src/views/charts2/charts/npm/NpmEventsHeader.vue b/src/views/charts2/charts/npm/NpmEventsHeader.vue
index 9ed488ba..f3a73524 100644
--- a/src/views/charts2/charts/npm/NpmEventsHeader.vue
+++ b/src/views/charts2/charts/npm/NpmEventsHeader.vue
@@ -24,6 +24,14 @@ export default {
       type: 'severity'
     }
   },
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.recentEventsListData()
+      }
+    }
+  },
   methods: {
     recentEventsListData () {
       const params = {
diff --git a/src/views/charts2/charts/npm/NpmIpMap.vue b/src/views/charts2/charts/npm/NpmIpMap.vue
index 29e13fd3..7a06cc3a 100644
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -1,117 +1,58 @@
 <template>
   <div class="cn-chart__map">
-    <div class="map-canvas" id="npmMap"></div>
-    <div class="map-filter">
-      <el-select
-          size="mini"
-          v-model="trafficDirection"
-          class="map-select map-select__direction"
-      >
-        <el-option value="Server">Server</el-option>
-        <el-option value="Client">Client</el-option>
-      </el-select>
-      <el-select
-          size="mini"
-          v-model="location"
-          class="map-select map-select__location"
-          clearable
-          placeholder="All"
-          filterable
-      >
-        <template #prefix><i class="cn-icon cn-icon-location" style="color: #575757;"></i></template>
-        <el-option v-for="(country, index) in locationOptions" :key="index" :value="country.value">{{country.label}}</el-option>
-      </el-select>
-    </div>
-    <div class="map-legend">
-      <div class="map-legend__row">
-        <div class="map-legend__symbol map-legend__symbol--green"></div>
-        <div class="map-legend__desc">{{$t('npm.highScore')}}</div>
-      </div>
-      <div class="map-legend__row">
-        <div class="map-legend__symbol map-legend__symbol--yellow"></div>
-        <div class="map-legend__desc">{{$t('npm.middleScore')}}</div>
-      </div>
-      <div class="map-legend__row">
-        <div class="map-legend__symbol map-legend__symbol--red"></div>
-        <div class="map-legend__desc">{{$t('npm.lowScore')}}</div>
-      </div>
-    </div>
+    <div class="map-canvas" id="npmDrillDownMap"></div>
   </div>
 </template>
 
 <script>
-import { mapData, drillDownData } from '@/views/charts2/charts/mapTestData'
 import { shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
-import { getGeoData } from '@/utils/tools'
-import { storageKey, unitTypes } from '@/utils/constants'
-import locationOptions from '@/views/charts2/charts/locationOptions'
-import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
-
+import { computeScore, getGeoData } from '@/utils/tools'
+import { storageKey, unitTypes, countryNameIdMapping } from '@/utils/constants'
+import { valueToRangeValue } from '@/utils/unit-convert'
+import { getSecond } from '@/utils/date-util'
+import { api, getData } from '@/utils/api'
+import { get } from '@/utils/http'
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
-  name: 'NpmMap',
+  name: 'NpmIpMap',
   data () {
     return {
-      locationOptions,
-      mapData,
-      drillDownData,
       myChart: null,
       polygonSeries: null,
       countrySeries: null,
       worldImageSeries: null,
       countryImageSeries: null,
       // Server | Client
-      trafficDirection: 'Server',
-      location: ''
+      trafficDirection: 'Server'
     }
   },
+  mixins: [chartMixin],
   methods: {
-    initMap () {
+    async initMap () {
       // 初始化插件
-      const chart = am4Core.create('npmMap', am4Maps.MapChart)
-      chart.geodata = getGeoData(storageKey.iso36112WorldLow)
+      this.toggleLoading(true)
+      const geoData = await getGeoData(storageKey.iso36112WorldLow)
+      const chart = am4Core.create('npmDrillDownMap', am4Maps.MapChart)
+      chart.geodata = geoData
       chart.projection = new am4Maps.projections.Miller()
-      chart.homeZoomLevel = 2
+      chart.homeZoomLevel = 1.5
       chart.homeGeoPoint = {
         latitude: 21,
         longitude: 0
       }
       this.myChart = shallowRef(chart)
       this.polygonSeries = shallowRef(this.polygonSeriesFactory())
-      this.worldImageSeries = shallowRef(this.imageSeriesFactory('score'))
+      this.worldImageSeries = shallowRef(this.imageSeriesFactory('score', this.polygonSeries))
       // 渲染
       this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
-      this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
-        const countryId = ev.target.dataItem.dataContext.id
-        ev.target.isHover = false
-        if (countryId) {
-          const targetMapObject = this.polygonSeries.getPolygonById(countryId)
-          targetMapObject.series.chart.zoomToMapObject(targetMapObject)
-          const geoData = getGeoData(countryId)
-          if (geoData) {
-            this.countrySeries = shallowRef(this.polygonSeriesFactory())
-            this.countrySeries.geodata = geoData
-            this.countryImageSeries = shallowRef(this.imageSeriesFactory('score'))
-            this.polygonSeries.hide()
-            this.worldImageSeries.hide()
-            const country = ev.target.dataItem.dataContext.name
-            const queryParams = { ...this.queryParams, ipLocationCountry: country }
-            const chartData = this.drillDownData
-            this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
-          }
-        }
-      })
     },
-    loadAm4ChartMap (polygonSeries, imageSeries, country, chartData) {
-      // chartData不为空是下钻
-      if (chartData) {
-        this.$emit('showLoading', true)
-      }
+    loadAm4ChartMap (polygonSeries, imageSeries) {
       try {
         // 清除数据
-        polygonSeries.data.splice(0)
-
+        // polygonSeries.data.splice(0)
+        this.toggleLoading(true)
         // 清除legend
         this.myChart.children.each((s, i) => {
           if (s && s.className !== 'Container') {
@@ -119,25 +60,62 @@ export default {
           }
         })
 
-        this.showMapBackButton = !!country
-        const data = chartData || this.mapData
-        imageSeries.data = data.map(r => ({
-          score: r.score,
-          id: r.locationId,
-          color: this.scoreColor(r.score),
-          border: this.scoreColor(r.score)
-        }))
+        const params = {
+          startTime: getSecond(this.timeFilter.startTime),
+          endTime: getSecond(this.timeFilter.endTime),
+          type: this.$store.getters.getDimensionType,
+          typeVal: this.$store.getters.getBreadcrumbColumnValue
+        }
+        getData(api.npm.overview.map, params).then(res => {
+          // 计算分数
+          const tcpRequest = get(api.npm.overview.mapTcp, params)
+          const httpRequest = get(api.npm.overview.mapHttp, params)
+          const sslRequest = get(api.npm.overview.mapSsl, params)
+          const tcpLostRequest = get(api.npm.overview.mapPacketLoss, params)
+          const packetRetransRequest = get(api.npm.overview.mapPacketRetrans, params)
+          Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
+            const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
+            const mapData = res
+            res2.forEach((r, i) => {
+              if (r.code === 200) {
+                mapData.forEach(t => {
+                  let score = 0
+                  const find = r.data.result.find(d => d.country === t.country)
+                  if (find) {
+                    score = computeScore(find, i)
+                  }
+                  t[keyPre[i] + 'Score'] = score
+                })
+              } else {
+                mapData.forEach(t => {
+                  t[keyPre[i] + 'Score'] = 0
+                })
+              }
+            })
+            mapData.forEach(t => {
+              t.score = Math.ceil((t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6)
+              if (t.score > 6) {
+                t.score = 6
+              }
+            })
+            this.loadMarkerData(imageSeries, mapData)
+          })
+        }).finally(() => {
+          this.toggleLoading(false)
+        })
       } catch (e) {
         console.error(e)
-      } finally {
-        if (chartData) {
-          setTimeout(() => {
-            this.$emit('showLoading', false)
-          }, 200)
-        }
       }
     },
-    convertMapData (data) {
+    loadMarkerData (imageSeries, data) {
+      imageSeries.data = data.map(r => ({
+        score: r.score,
+        name: r.province || r.country,
+        throughput: valueToRangeValue(r.throughBitsRate, unitTypes.bps).join(' '),
+        id: r.serverId,
+        color: this.scoreColor(r.score),
+        border: this.scoreColor(r.score)
+      }))
     },
     scoreColor (score) {
       if (score >= 0 && score <= 2) {
@@ -148,6 +126,23 @@ export default {
         return '#7E9F54'
       }
     },
+    generatePolygonTooltipHTML () {
+      const html = `
+        <div class="map-tooltip" style="padding-bottom: 10px;">
+          <div class="map-tooltip__title">{name}</div>
+          <div class="map-tooltip__content">
+            <div class="content-row">
+              <div class="row__label">Score</div>
+              <div class="row__value">{score}</div>
+            </div>
+            <div class="content-row">
+              <div class="row__label">Throughput</div>
+              <div class="row__value">{throughput}</div>
+            </div>
+          </div>
+        </div>`
+      return html
+    },
     polygonSeriesFactory () {
       const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
       polygonSeries.useGeodata = true
@@ -163,8 +158,7 @@ export default {
       polygonTemplate.fill = am4Core.color('#EFEFEF')
       return polygonSeries
     },
-    imageSeriesFactory (dataField) {
-      const vm = this
+    imageSeriesFactory (dataField, polygonSeries) {
       // amcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
       const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
       // 指定接口数据中哪个字段名代表数值
@@ -174,14 +168,14 @@ export default {
       imageTemplate.nonScaling = true
       // 通过地区ID来获取经纬度，设置后无需自己提供经纬度
       imageTemplate.adapter.add('latitude', function (latitude, target) {
-        const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+        const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
         if (polygon) {
           return polygon.visualLatitude
         }
         return latitude
       })
       imageTemplate.adapter.add('longitude', function (longitude, target) {
-        const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+        const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
         if (polygon) {
           return polygon.visualLongitude
         }
@@ -193,11 +187,12 @@ export default {
       circle.propertyFields.fill = 'color'
       circle.propertyFields.stroke = 'border'
       circle.strokeWidth = 1
-      // circle.tooltipHTML = this.generatePolygonTooltipHTML()
+      circle.fillOpacity = 0.8
+      circle.tooltipHTML = this.generatePolygonTooltipHTML()
       imageSeries.tooltip.getFillFromObject = false
-      imageSeries.tooltip.background.fill = am4Core.color('#41495D')
+      imageSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
       imageSeries.tooltip.background.filters.clear()
-      imageSeries.tooltip.background.stroke = '#41495D'
+      imageSeries.tooltip.background.stroke = '#C5C5C5'
 
       imageSeries.heatRules.push({
         target: circle,
@@ -212,6 +207,14 @@ export default {
   },
   mounted () {
     this.initMap()
+  },
+  beforeUnmount () {
+    this.polygonSeries = null
+    this.countrySeries = null
+    this.worldImageSeries = null
+    this.countryImageSeries = null
+    this.myChart && this.myChart.dispose()
+    this.myChart = null
   }
 }
 </script>
diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue
index 0b690daa..e236b8d4 100644
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/src/views/charts2/charts/npm/NpmLine.vue
@@ -2,7 +2,7 @@
   <div class="npm-line">
     <template v-if="chartData.id === 11">
       <div class="npm-line-header">
-        <div class="npm-line-header-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+        <div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div>
         <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !throughputName">
           <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
             <div class="npm-line-header-icon" :class="'icon' + index"></div>
@@ -14,27 +14,27 @@
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 12">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="tcpName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 13">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="httpName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 14">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="sslName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 15">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="packetsLossName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 16">
-      <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
+      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
       <chart-no-data v-if="packetsRetrainsName"></chart-no-data>
       <div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
@@ -199,7 +199,7 @@ export default {
         this.chartOption.series = data.map((t, i) => {
           return {
             ...seriesTemplate,
-            name: t.legend ? t.legend : this.$_.get(chartData, 'i18n') || chartData.name,
+            name: t.legend ? t.legend : this.$t(chartData.i18n) || chartData.name,
             stack: this.chartData.params.isStack ? 'network.total' : '',
             lineStyle: {
               width: 1
diff --git a/src/views/charts2/charts/npm/NpmMap.vue b/src/views/charts2/charts/npm/NpmMap.vue
index baeb8e01..707d7dd0 100644
--- a/src/views/charts2/charts/npm/NpmMap.vue
+++ b/src/views/charts2/charts/npm/NpmMap.vue
@@ -40,7 +40,6 @@
 </template>
 
 <script>
-import { mapData, drillDownData } from '@/views/charts2/charts/mapTestData'
 import { shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
@@ -52,13 +51,12 @@ import { getSecond } from '@/utils/date-util'
 import { api, getData } from '@/utils/api'
 import { get } from '@/utils/http'
 import chartMixin from '@/views/charts2/chart-mixin'
+import {Rectangle3D} from '@amcharts/amcharts4/.internal/core/elements/3d/Rectangle3D'
 export default {
   name: 'NpmMap',
   data () {
     return {
       locationOptions,
-      mapData,
-      drillDownData,
       myChart: null,
       polygonSeries: null,
       countrySeries: null,
@@ -88,6 +86,20 @@ export default {
       this.worldImageSeries = shallowRef(this.imageSeriesFactory('score', this.polygonSeries))
       // 渲染
       this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+
+      this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
+        this.$store.commit('setNpmLocationCountry', ev.target.dataItem.dataContext.name)
+        this.location = ev.target.dataItem.dataContext.name
+        if (this.countrySeries) {
+          this.countrySeries.dispose()
+        }
+        if (this.countryImageSeries) {
+          this.countryImageSeries.dispose()
+        }
+        const countryId = ev.target.dataItem.dataContext.id
+        ev.target.isHover = false
+        await this.drill(countryId)
+      })
     },
     loadAm4ChartMap (polygonSeries, imageSeries) {
       try {
@@ -157,8 +169,6 @@ export default {
         color: this.scoreColor(r.score),
         border: this.scoreColor(r.score)
       }))
-      console.info(imageSeries)
-      console.info(this.countryImageSeries)
     },
     scoreColor (score) {
       if (score >= 0 && score <= 2) {
@@ -246,49 +256,71 @@ export default {
       })
 
       return imageSeries
+    },
+    async drill (countryId) {
+      if (countryId) {
+        const targetMapObject = this.polygonSeries.getPolygonById(countryId)
+        targetMapObject.series.chart.zoomToMapObject(targetMapObject)
+        const geoData = await getGeoData(countryId)
+        if (geoData) {
+          this.countrySeries = shallowRef(this.polygonSeriesFactory())
+          this.countrySeries.geodata = geoData
+          this.countryImageSeries = shallowRef(this.imageSeriesFactory('score', this.countrySeries))
+          this.polygonSeries.hide()
+          this.worldImageSeries.hide()
+          this.$nextTick(() => {
+            this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
+          })
+        }
+      }
     }
   },
   watch: {
     trafficDirection (n) {
       this.$store.commit('setNpmLocationSide', n.toLowerCase())
-      this.loadAm4ChartMap(this.countrySeries || this.polygonSeries, this.countryImageSeries || this.worldImageSeries)
+      if (this.location) {
+        this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
+      } else {
+        this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+      }
     },
     async location (n) {
       this.$store.commit('setNpmLocationCountry', n)
-      if (this.countrySeries) {
-        this.countrySeries.dispose()
-      }
-      if (this.countryImageSeries) {
-        this.countryImageSeries.dispose()
-      }
+      this.countrySeries.dispose()
+      this.countryImageSeries.dispose()
       if (n) {
         const countryId = countryNameIdMapping[n]
-        if (countryId) {
-          const targetMapObject = this.polygonSeries.getPolygonById(countryId)
-          targetMapObject.series.chart.zoomToMapObject(targetMapObject)
-          const geoData = await getGeoData(countryId)
-          if (geoData) {
-            this.countrySeries = shallowRef(this.polygonSeriesFactory())
-            this.countrySeries.geodata = geoData
-            this.countryImageSeries = shallowRef(this.imageSeriesFactory('score', this.countrySeries))
-            this.polygonSeries.hide()
-            this.worldImageSeries.hide()
-            this.$nextTick(() => {
-              this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
-            })
-          }
-        }
+        await this.drill(countryId)
       } else {
         this.polygonSeries.show()
         this.worldImageSeries.show()
-        this.countrySeries = null
-        this.countryImageSeries = null
         this.myChart.zoomToGeoPoint(this.myChart.homeGeoPoint, this.myChart.homeZoomLevel, true)
       }
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        if (this.location) {
+          this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
+        } else {
+          this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+        }
+      }
     }
   },
   mounted () {
     this.initMap()
+  },
+  beforeUnmount () {
+    if (this.polygonSeries) {
+      this.polygonSeries.mapPolygons.template.events.off('hit', this.mapBlockHitEvent)
+    }
+    this.polygonSeries = null
+    this.countrySeries = null
+    this.worldImageSeries = null
+    this.countryImageSeries = null
+    this.myChart && this.myChart.dispose()
+    this.myChart = null
   }
 }
 </script>
diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue
index 07bf30b8..2d3232b5 100644
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -31,7 +31,7 @@
         </el-table-column>
       </template>
       <template v-slot:empty>
-        <div class="table-no-data">
+        <div class="table-no-data" v-show="isNoData">
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#cn-icon-a-allclear"></use>
           </svg>