feat: loading和部分nodata处理;地图功能

src/views/charts2/charts/npm/NpmMap.vue

@@ -45,18 +45,15 @@ import { shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { computeScore, getGeoData } from '@/utils/tools'
-import { storageKey, unitTypes } from '@/utils/constants'
+import { storageKey, unitTypes, countryNameIdMapping } from '@/utils/constants'
 import locationOptions from '@/views/charts2/charts/locationOptions'
-import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
+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',
-  props: {
-    timeFilter: Object
-  },
   data () {
     return {
       locationOptions,
@@ -72,9 +69,11 @@ export default {
       location: ''
     }
   },
+  mixins: [chartMixin],
   methods: {
     async initMap () {
       // 初始化插件
+      this.toggleLoading(true)
       const geoData = await getGeoData(storageKey.iso36112WorldLow)
       const chart = am4Core.create('npmMap', am4Maps.MapChart)
       chart.geodata = geoData
@@ -86,19 +85,15 @@ export default {
       }
       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)
     },
-    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') {
@@ -106,77 +101,64 @@ export default {
           }
         })
 
-        this.showMapBackButton = !!country
-        if (chartData) {
-          imageSeries.data = chartData.map(r => ({
-            score: r.score,
-            id: r[this.trafficDirection.toLowerCase() + 'Id'],
-            color: this.scoreColor(r.score),
-            border: this.scoreColor(r.score)
-          }))
-        } else {
-          const params = {
-            startTime: getSecond(this.timeFilter.startTime),
-            endTime: getSecond(this.timeFilter.endTime),
-            side: this.trafficDirection.toLowerCase()
-          }
-          getData(api.npm.location.map, params).then(res => {
-            // 计算分数
-            const tcpRequest = get(api.npm.location.mapTcp, params)
-            const httpRequest = get(api.npm.location.mapHttp, params)
-            const sslRequest = get(api.npm.location.mapSsl, params)
-            const tcpLostRequest = get(api.npm.location.mapPacketLoss, params)
-            const packetRetransRequest = get(api.npm.location.mapPacketRetrans, params)
-            Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
-              const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
-              const mapData = res
-              if (!country) {
-                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
-                    })
-                  }
-                })
+        const params = {
+          startTime: getSecond(this.timeFilter.startTime),
+          endTime: getSecond(this.timeFilter.endTime),
+          side: this.trafficDirection.toLowerCase(),
+          country: this.location
+        }
+        getData(api.npm.location.map, params).then(res => {
+          // 计算分数
+          const tcpRequest = get(api.npm.location.mapTcp, params)
+          const httpRequest = get(api.npm.location.mapHttp, params)
+          const sslRequest = get(api.npm.location.mapSsl, params)
+          const tcpLostRequest = get(api.npm.location.mapPacketLoss, params)
+          const packetRetransRequest = get(api.npm.location.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 => {
-                  t.score = Math.ceil((t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6)
-                  if (t.score > 6) {
-                    t.score = 6
+                  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
                 })
-                this.loadMarkerData(imageSeries, mapData)
               }
             })
+            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)
-        }
       }
     },
     loadMarkerData (imageSeries, data) {
       imageSeries.data = data.map(r => ({
         score: r.score,
         name: r.province || r.country,
-        throughput: r.totalPacketsRate,
-        id: r[this.trafficDirection.toLowerCase() + 'Id'],
+        throughput: valueToRangeValue(r.throughBitsRate, unitTypes.bps).join(' '),
+        id: r.serverId,
         color: this.scoreColor(r.score),
         border: this.scoreColor(r.score)
       }))
+      console.info(imageSeries)
+      console.info(this.countryImageSeries)
     },
     scoreColor (score) {
       if (score >= 0 && score <= 2) {
@@ -219,8 +201,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())
       // 指定接口数据中哪个字段名代表数值
@@ -230,14 +211,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
         }
@@ -267,6 +248,45 @@ export default {
       return imageSeries
     }
   },
+  watch: {
+    trafficDirection (n) {
+      this.$store.commit('setNpmLocationSide', n.toLowerCase())
+      this.loadAm4ChartMap(this.countrySeries || this.polygonSeries, this.countryImageSeries || this.worldImageSeries)
+    },
+    async location (n) {
+      this.$store.commit('setNpmLocationCountry', n)
+      if (this.countrySeries) {
+        this.countrySeries.dispose()
+      }
+      if (this.countryImageSeries) {
+        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)
+            })
+          }
+        }
+      } else {
+        this.polygonSeries.show()
+        this.worldImageSeries.show()
+        this.countrySeries = null
+        this.countryImageSeries = null
+        this.myChart.zoomToGeoPoint(this.myChart.homeGeoPoint, this.myChart.homeZoomLevel, true)
+      }
+    }
+  },
   mounted () {
     this.initMap()
   }