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

src/store/modules/panel.js

@@ -47,7 +47,9 @@ const panel = {
     queryCondition: '', // 数据查询的条件
     networkOverviewTabList: [], // 存储tab列表的一些状态：如是否选中
     tabOperationType: 0, // 操作类型:2-二级菜单；3-三级菜单；4-四级菜单；5-切换tab；6-切换metric；7-操作Customize
-    tabOperationBeforeType: 0// 记录上次的操作类型
+    tabOperationBeforeType: 0, // 记录上次的操作类型
+    npmLocationCountry: '', // npm location的查询条件--国家
+    npmLocationSide: 'server' // npm location的查询条件--方向
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -127,6 +129,12 @@ const panel = {
     },
     setTabOperationBeforeType (state, tabOperationBeforeType) {
       state.tabOperationBeforeType = tabOperationBeforeType
+    },
+    setNpmLocationCountry (state, country) {
+      state.npmLocationCountry = country
+    },
+    setNpmLocationSide (state, side) {
+      state.npmLocationSide = side
     }
   },
   getters: {
@@ -201,6 +209,12 @@ const panel = {
     },
     getTabOperationBeforeType (state) {
       return state.tabOperationBeforeType
+    },
+    getNpmLocationCountry (state) {
+      return state.npmLocationCountry
+    },
+    getNpmLocationSide (state) {
+      return state.npmLocationSide
     }
   },
   actions: {

src/utils/unit-convert.js

@@ -149,6 +149,12 @@ export function valueToRangeValue (value, unitType) {
         }
         break
       }
+      case unitTypes.bps: {
+        if (values[0] < 0.01) {
+          return ['<0.01', 'bps']
+        }
+        break
+      }
       default: break
     }
   }

src/views/charts2/Chart.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="cn-chart" style="height: 100%; width: 100%;">
     <loading :loading="loading"></loading>
-    <chart-no-data v-if="isNoData"></chart-no-data>
     <network-overview-line
         v-if="chart.type === typeMapping.networkOverview.line"
         :chart="chart"
         :time-filter="timeFilter"
         ref="networkLine"
+        @toggleLoading="toggleLoading"
     ></network-overview-line>
     <network-overview-ddos-detection
         v-else-if="chart.type === typeMapping.networkOverview.ddosDetection"
         :chart="chart"
         :time-filter="timeFilter"
+        @toggleLoading="toggleLoading"
     ></network-overview-ddos-detection>
     <network-overview-performance-event
         v-else-if="chart.type === typeMapping.networkOverview.performanceEvent"
         :chart="chart"
         :time-filter="timeFilter"
+        @toggleLoading="toggleLoading"
     ></network-overview-performance-event>
     <network-overview-tabs @getChartData="getChartData"
          v-else-if="chart.type === typeMapping.networkOverview.table"
@@ -24,6 +26,7 @@
          :chart="chart"
          :chartData="chartData"
          :ref="`tab${chart.id}`"
+         @toggleLoading="toggleLoading"
     ></network-overview-tabs>
     <npm-app-event-table @getChartData="getChartData"
          v-else-if="chart.type === typeMapping.npm.appEventTable"
@@ -31,11 +34,13 @@
          :chart="chart"
          :chartData="chartData"
          :ref="`tab${chart.id}`"
+         @toggleLoading="toggleLoading"
     ></npm-app-event-table>
     <network-overview-apps
         v-else-if="chart.type === typeMapping.networkOverview.appList"
         :chart="chart"
         :time-filter="timeFilter"
+        @toggleLoading="toggleLoading"
     >
     </network-overview-apps>
     <npm-tabs
@@ -43,63 +48,73 @@
         :time-filter="timeFilter"
         :chart="chart"
         @tabChange="npmTabChange"
+        @toggleLoading="toggleLoading"
     ></npm-tabs>
     <npm-network-quantity
         v-else-if="chart.type === typeMapping.npm.npmNetworkQuantity"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></npm-network-quantity>
     <npm-app-category-score
         v-else-if="chart.type === typeMapping.npm.npmAppCategoryScore"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></npm-app-category-score>
     <npm-map
         v-else-if="chart.type === typeMapping.npm.npmMap"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></npm-map>
     <npm-line
         v-else-if="chart.type === typeMapping.npm.npmLine"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></npm-line>
     <npm-events-header
         v-else-if="chart.type === typeMapping.npm.npmEventsHeader"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></npm-events-header>
     <npm-events-by-type
         v-else-if="chart.type === typeMapping.npm.npmEventsByType"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></npm-events-by-type>
     <npm-recent-events
         v-else-if="chart.type === typeMapping.npm.npmRecentEvents"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></npm-recent-events>
     <related-sessions
         v-else-if="chart.type === typeMapping.npm.relatedSessions"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></related-sessions>
     <npm-ip-map
         v-else-if="chart.type === typeMapping.npm.npmIpMap"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></npm-ip-map>
     <npm-traffic-line
         v-else-if="chart.type === typeMapping.npm.npmTrafficLine"
         :time-filter="timeFilter"
         :chart="chart"
+        @toggleLoading="toggleLoading"
     ></npm-traffic-line>
   </div>
 </template>
 
 <script>
 import Loading from '@/components/common/Loading'
-import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { typeMapping } from '@/views/charts2/chart-tools'
 import NetworkOverviewLine from '@/views/charts2/charts/networkOverview/NetworkOverviewLine'
 import NetworkOverviewDdosDetection from '@/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection'
@@ -131,7 +146,6 @@ export default {
     NpmMap,
     NpmAppCategoryScore,
     Loading,
-    ChartNoData,
     NetworkOverviewLine,
     NetworkOverviewDdosDetection,
     NetworkOverviewPerformanceEvent,
@@ -152,8 +166,7 @@ export default {
   data () {
     return {
       typeMapping,
-      loading: false,
+      loading: true,
-      isNoData: false,
       chartData: null,
       queryParams: {}
     }
@@ -237,6 +250,9 @@ export default {
           }
         }, 250)
       })
+    },
+    toggleLoading (loading) {
+      this.loading = loading
     }
   }
 }

src/views/charts2/chart-mixin.js

@@ -0,0 +1,16 @@
+export default {
+  props: {
+    chart: Object,
+    timeFilter: Object
+  },
+  data () {
+    return {
+      isNoData: false
+    }
+  },
+  methods: {
+    toggleLoading (loading) {
+      this.$emit('toggleLoading', loading)
+    }
+  }
+}

src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue

@@ -128,17 +128,14 @@ 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 chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'NetworkOverviewApps',
-  props: {
-    chart: Object,
-    timeFilter: Object
-  },
   components: {
     loading,
     ChartNoData
   },
-
+  mixins: [chartMixin],
   setup () {
     return {
       myChart: shallowRef([])
@@ -211,7 +208,6 @@ export default {
       })
     },
     init () {
-      // this.appDataQuery(this.appData)
       const appCards = []
       const providerCards = []
       this.appData.forEach(d => {
@@ -252,18 +248,8 @@ export default {
     handleData (prevRequest, request, _t) {
       Promise.all([prevRequest, request]).then(res => {
         if (res[0].code === 200 && res[1].code === 200) {
-        // if (true) {
           const prevData = res[0].data.result
           const data = res[1].data.result
-          /* let prevData
-          let data
-          if (_t === 'app') {
-            prevData = appPrevTestData
-            data = appTestData
-          } else if (_t === 'provider') {
-            prevData = providerPrevTestData
-            data = providerTestData
-          } */
           let toCompareType = 'bytes'
           if (this.metricFilter === 'Sessions/s') {
             toCompareType = 'sessions'

src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue

@@ -27,14 +27,13 @@ import { api } from '@/utils/api'
 import { get } from '@/utils/http'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'NetworkOverviewDdosDetection',
-  props: {
-    timeFilter: Object
-  },
   components: {
     ChartNoData
   },
+  mixins: [chartMixin],
   data () {
     return {
       ddosData: {},
@@ -47,15 +46,19 @@ export default {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime)
       }
+      this.toggleLoading(true)
       get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
         if (res.code === 200) {
-          // res.data.result.length = 0
           if (res.data.result.length === 0) {
             this.isNoData = true
             return
+          } else {
+            this.isNoData = false
           }
           this.ddosData = res.data.result[0]
         }
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     }
   },

src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue

@@ -74,12 +74,9 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'NetworkOverviewLine',
-  props: {
-    chart: Object,
-    timeFilter: Object
-  },
   components: {
     ChartNoData
   },
@@ -88,6 +85,7 @@ export default {
       myChart: shallowRef(null)
     }
   },
+  mixins: [chartMixin],
   data () {
     return {
       options1: [
@@ -139,8 +137,7 @@ export default {
       echartsLabelValue: '',
       echartsType: 'Bits/s',
       dynamicVariable: '',
-      showMarkLine: true,
+      showMarkLine: true
-      isNoData: false
     }
   },
   watch: {
@@ -163,13 +160,10 @@ export default {
       if (condition) {
         params.q = condition
       }
+      this.toggleLoading(true)
       get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
         if (res.code === 200) {
-          // res.data.result.length = 0
+          this.isNoData = res.data.result.length === 0
-          if (res.data.result.length === 0) {
-            this.isNoData = true
-            return
-          }
           res.data.result.forEach((t, i) => {
             if (t.type === 'bytes' && val === 'Bits/s') {
               const mpackets = _.cloneDeep(this.mpackets)
@@ -243,6 +237,10 @@ export default {
             }
           })
         }
+      }).catch(e => {
+        this.isNoData = true
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     },
     echartsInit (echartsData, show) {

src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue

@@ -24,6 +24,7 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'NetworkOverviewPerformanceEvent',
   setup () {
@@ -32,9 +33,7 @@ export default {
       myChart2: shallowRef(null)
     }
   },
-  props: {
+  mixins: [chartMixin],
-    timeFilter: Object
-  },
   components: {
     ChartNoData
   },
@@ -42,7 +41,9 @@ export default {
     return {
       timer: null,
       isNoData: false,
-      isNoData2: false
+      isNoData2: false,
+      loading1: false,
+      loading2: false
     }
   },
   methods: {
@@ -56,12 +57,14 @@ export default {
       if (dom) {
         this.myChart = echarts.init(dom)
         this.chartOption = pieChartOption1
+        this.loading1 = true
         get(api.netWorkOverview.eventSeverity, params).then(res => {
           if (res.code === 200) {
-            // res.data.result.length = 0
             if (res.data.result.length === 0) {
               this.isNoData = true
               return
+            } else {
+              this.isNoData = false
             }
             res.data.result = res.data.result.map(t => {
               if (t.eventSeverity === 'critical') {
@@ -89,17 +92,21 @@ export default {
             this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
             this.myChart.setOption(this.chartOption)
           }
+        }).finally(() => {
+          this.loading1 = false
         })
       }
       if (dom2) {
         this.myChart2 = echarts.init(dom2)
         this.chartOption2 = pieChartOption2
+        this.loading2 = true
         get(api.netWorkOverview.eventType, params).then(res => {
           if (res.code === 200) {
-            // res.data.result.length = 0
             if (res.data.result.length === 0) {
               this.isNoData2 = true
               return
+            } else {
+              this.isNoData2 = false
             }
             res.data.result = res.data.result.map(t => {
               return {
@@ -115,6 +122,8 @@ export default {
             this.chartOption2.series[0].data = res.data.result
             this.myChart2.setOption(this.chartOption2)
           }
+        }).finally(() => {
+          this.loading2 = false
         })
       }
     },
@@ -123,6 +132,16 @@ export default {
       this.myChart2.resize()
     }
   },
+  computed: {
+    loading () {
+      return this.loading1 && this.loading2
+    }
+  },
+  watch: {
+    loading (n) {
+      this.toggleLoading(n)
+    }
+  },
   mounted () {
     this.timer = setTimeout(() => {
       this.init()

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

@@ -1,5 +1,6 @@
 <template>
   <div class="npm-app">
+    <chart-no-data v-if="isNoData"></chart-no-data>
     <div class="npm-app-left">
       <div class="npm-app-letter">
         <div v-for="(letter, index) in colorPatchData" :key="index">
@@ -100,7 +101,9 @@ import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import { getChainRatio, computeScore } from '@/utils/tools'
-
+import chartMixin from '@/views/charts2/chart-mixin'
+import Loading from '@/components/common/Loading'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
   name: 'NpmAppCategoryScore',
   data () {
@@ -126,23 +129,12 @@ export default {
       ]
     }
   },
-  props: {
+  components: {
-    timeFilter: Object
+    Loading,
+    ChartNoData
   },
+  mixins: [chartMixin],
   methods: {
-    // tableCellStyle ({ row, column, rowIndex, columnIndex }) {
-    //   let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
-    //   if (rowIndex === this.tableData.length - 1) {
-    //     style = style + 'border-bottom:0px !important;'
-    //   }
-    //   if (columnIndex === 0) {
-    //     style = style + 'color:#046ECA;'
-    //   }
-    //   return style
-    // },
-    // tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
-    //   return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
-    // },
     init (params) {
       if (!params) {
         params = {
@@ -153,10 +145,12 @@ export default {
       // 获取table后三列内容
       const currentTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 0 })
       const lastCycleTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 1 })
+      this.toggleLoading(true)
       Promise.all([currentTrafficRequest, lastCycleTrafficRequest]).then(res => {
         const prevData = res[1].data.result
         const data = res[0].data.result
         if (data && data.length > 0) {
+          this.isNoData = false
           const tableData = data.map(d => {
             const mapping = npmCategoryInfoMapping.find(mapping => mapping.appSubcategory === d.appSubcategory)
             const result = {
@@ -206,9 +200,12 @@ export default {
               }
             })
             this.tableData = tableData
-            // console.info(tableData)
           })
+        } else {
+          this.isNoData = true
         }
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     }
   },

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

@@ -35,17 +35,17 @@ import * as echarts from 'echarts'
 import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import chartMixin from '@/views/charts2/chart-mixin'
 
 export default {
   name: 'NpmEventsByType',
   props: {
-    chart: Object,
-    timeFilter: Object,
     type: String
   },
   components: {
     ChartNoData
   },
+  mixins: [chartMixin],
   setup () {
     return {
       myChart: shallowRef(null)
@@ -95,9 +95,10 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         type: 'severity'
       }
+      this.toggleLoading(true)
       get(api.npm.events.list, params).then(res => {
         if (res.code === 200) {
-          if (res.data.result.length <= 0) {
+          if (!res.data.result || res.data.result.length === 0) {
             this.isNoData = true
             return
           }
@@ -125,6 +126,8 @@ export default {
         } else {
           this.isNoData = true
         }
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     },
     resize () {

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

@@ -14,14 +14,10 @@
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
-
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'NpmEventsHeader',
-  props: {
+  mixins: [chartMixin],
-    chart: Object,
-    timeFilter: Object,
-    // type: String
-  },
   data () {
     return {
       chartData: [],
@@ -35,6 +31,7 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         type: this.type
       }
+      this.toggleLoading(true)
       get(api.npm.events.list, params).then(res => {
         if (res.code === 200) {
           res.data.result.forEach(t => {
@@ -52,6 +49,8 @@ export default {
           })
           this.chartData = res.data.result.sort((a, b) => { return a.index - b.index })
         }
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     }
   },

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

@@ -52,22 +52,17 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { throughputData, tcpData, httpData, sslData, packetsLossData, packetsRetrainsData } from '@/views/charts2/charts/npmLineData'
+import chartMixin from '@/views/charts2/chart-mixin'
 
 export default {
   name: 'NpmLine',
-  props: {
-    chart: Object,
-    timeFilter: Object,
-    // side: String,
-    // country: String,
-    // province: String
-  },
   components: {
     ChartNoData
   },
+  mixins: [chartMixin],
   setup () {
     return {
-      myChart: shallowRef()
+      myChart: shallowRef(null)
     }
   },
   data () {
@@ -86,8 +81,8 @@ export default {
       timer: null,
       myChartArray: [],
       side: 'server',
-      country: '北京',
+      country: '',
-      province: '北京',
+      province: '',
       throughputName: '',
       tcpName: '',
       httpName: '',
@@ -105,6 +100,7 @@ export default {
         country: this.country,
         province: this.province
       }
+      this.toggleLoading(true)
       if (this.chartData.id === 11) {
         throughputData.forEach((t, i) => {
           if (t.type === 'totalBytesRate') {
@@ -122,6 +118,8 @@ export default {
           } else {
             this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
+        }).finally(() => {
+          this.toggleLoading(false)
         })
       } else if (this.chartData.id === 12) {
         get(api.npm.location.tcpConnectionEstablishLatency, params).then(res => {
@@ -130,6 +128,8 @@ export default {
           } else {
             this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
+        }).finally(() => {
+          this.toggleLoading(false)
         })
       } else if (this.chartData.id === 13) {
         get(api.npm.location.httpResponseLatency, params).then(res => {
@@ -138,6 +138,8 @@ export default {
           } else {
             this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
+        }).finally(() => {
+          this.toggleLoading(false)
         })
       } else if (this.chartData.id === 14) {
         get(api.npm.location.sslHandshakeLatency, params).then(res => {
@@ -146,6 +148,8 @@ export default {
           } else {
             this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
+        }).finally(() => {
+          this.toggleLoading(false)
         })
       } else if (this.chartData.id === 15) {
         get(api.npm.location.packetsLoss, params).then(res => {
@@ -154,6 +158,8 @@ export default {
           } else {
             this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
+        }).finally(() => {
+          this.toggleLoading(false)
         })
       } else if (this.chartData.id === 16) {
         get(api.npm.location.packetsRetrains, params).then(res => {
@@ -162,6 +168,8 @@ export default {
           } else {
             this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
+        }).finally(() => {
+          this.toggleLoading(false)
         })
       }
     },

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) {
+    loadAm4ChartMap (polygonSeries, imageSeries) {
-      // chartData不为空是下钻
-      if (chartData) {
-        this.$emit('showLoading', true)
-      }
       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
+        const params = {
-        if (chartData) {
+          startTime: getSecond(this.timeFilter.startTime),
-          imageSeries.data = chartData.map(r => ({
+          endTime: getSecond(this.timeFilter.endTime),
-            score: r.score,
+          side: this.trafficDirection.toLowerCase(),
-            id: r[this.trafficDirection.toLowerCase() + 'Id'],
+          country: this.location
-            color: this.scoreColor(r.score),
+        }
-            border: this.scoreColor(r.score)
+        getData(api.npm.location.map, params).then(res => {
-          }))
+          // 计算分数
-        } else {
+          const tcpRequest = get(api.npm.location.mapTcp, params)
-          const params = {
+          const httpRequest = get(api.npm.location.mapHttp, params)
-            startTime: getSecond(this.timeFilter.startTime),
+          const sslRequest = get(api.npm.location.mapSsl, params)
-            endTime: getSecond(this.timeFilter.endTime),
+          const tcpLostRequest = get(api.npm.location.mapPacketLoss, params)
-            side: this.trafficDirection.toLowerCase()
+          const packetRetransRequest = get(api.npm.location.mapPacketRetrans, params)
-          }
+          Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
-          getData(api.npm.location.map, params).then(res => {
+            const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
-            // 计算分数
+            const mapData = res
-            const tcpRequest = get(api.npm.location.mapTcp, params)
+            res2.forEach((r, i) => {
-            const httpRequest = get(api.npm.location.mapHttp, params)
+              if (r.code === 200) {
-            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
-                    })
-                  }
-                })
                 mapData.forEach(t => {
-                  t.score = Math.ceil((t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6)
+                  let score = 0
-                  if (t.score > 6) {
+                  const find = r.data.result.find(d => d.country === t.country)
-                    t.score = 6
+                  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,
+        throughput: valueToRangeValue(r.throughBitsRate, unitTypes.bps).join(' '),
-        id: r[this.trafficDirection.toLowerCase() + 'Id'],
+        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) {
+    imageSeriesFactory (dataField, polygonSeries) {
-      const vm = this
       // 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()
   }

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

@@ -13,14 +13,11 @@ import SingleValue from '@/views/charts2/charts/SingleValue'
 import { get } from '@/utils/http'
 import { getSecond } from '@/utils/date-util'
 import { api } from '@/utils/api'
-
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'NpmNetworkQuantity',
   components: { SingleValue },
-  props: {
+  mixins: [chartMixin],
-    chart: Object,
-    timeFilter: Object
-  },
   data () {
     return {
       npmNetworkName: [
@@ -45,12 +42,15 @@ export default {
       const ssl = get(api.npm.overview.sslConDelay, params)
       const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
       const packetPercent = get(api.npm.overview.packetRetransPercent, params)
+      this.toggleLoading(true)
       Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
         res.forEach(t => {
           if (t.code === 200) {
             this.npmNetworkCycleData.push(t.data.result)
           }
         })
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     }
 

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

@@ -37,7 +37,6 @@
           </svg>
           <div class="table-no-data__title">{{ $t('npm.thereNoEvents') }}</div>
         </div>
-        <!-- <div v-else>&nbsp;</div>-->
       </template>
     </el-table>
   </div>
@@ -47,13 +46,11 @@
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
+import chartMixin from '@/views/charts2/chart-mixin'
 
 export default {
   name: 'NpmRecentEvents',
-  props: {
+  mixins: [chartMixin],
-    chart: Object,
-    timeFilter: Object
-  },
   data () {
     return {
       tableData: [],
@@ -62,7 +59,7 @@ export default {
         { label: 'network.entity', prop: 'eventKey' },
         { label: 'detections.eventType', prop: 'eventType' }
       ],
-      isNoData: true
+      isNoData: false
     }
   },
   methods: {
@@ -72,10 +69,18 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         limit: 8
       }
+      this.toggleLoading(true)
       get(api.npm.events.recentEvents, params).then(res => {
         if (res.code === 200) {
+          if (!res.data.result || res.data.result.length === 0) {
+            this.isNoData = true
+          }
           this.tableData = res.data.result
+        } else {
+          this.isNoData = true
         }
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     }
   },

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

@@ -15,6 +15,7 @@
 </template>
 
 <script>
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'NpmTabs',
   data () {
@@ -24,6 +25,7 @@ export default {
       tabs: []
     }
   },
+  mixins: [chartMixin],
   props: {
     chart: Object
   },
@@ -43,6 +45,7 @@ export default {
     }
   },
   mounted () {
+    this.toggleLoading(false)
     if (this.chart.params && this.chart.params.tabs) {
       this.tabs = this.chart.params.tabs
     }