CN-642 fix: overview-app逻辑调整

src/views/charts2/charts/NetworkOverviewApps.vue

@@ -24,7 +24,7 @@
           </div>
           <div class="app-card-title-more" v-ele-click-outside="clickOutSide">
             <span><i class="cn-icon cn-icon-more-dark" @click="moreChange(app)"></i></span>
-            <span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreName"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
+            <span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreOptions"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
           </div>
         </div>
         <div class="app-card__bodys">
@@ -115,6 +115,7 @@ import { get, put } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
 import { getSecond } from '@/utils/date-util'
+import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from './appsTestData'
 export default {
   name: 'NetworkOverviewApps',
   props: {
@@ -168,339 +169,90 @@ export default {
     unitConvert,
     clickOutSide () {
       this.appData.forEach(t => {
-        t.moreName = false
+        t.moreOptions = false
       })
     },
     init () {
-      this.appDataQuery(this.appData)
+      // this.appDataQuery(this.appData)
-    },
+      const appCards = []
-    appDataQuery (data) {
+      const providerCards = []
-      const appLabels = []
+      this.appData.forEach(d => {
-      const providerLabels = []
+        if (d.type === 'app') {
-      let appData = []
+          appCards.push(d)
-      let providerData = []
+        } else if (d.type === 'provider') {
-      data.forEach(t => {
+          providerCards.push(d)
-        if (t.type === 'app') {
-          appLabels.push(t)
-        } else if (t.type === 'provider') {
-          providerLabels.push(t)
         }
       })
-      if (appLabels) {
+      let prevRequest
-        const params = {
+      let request
+      let params
+      if (appCards.length > 0) {
+        params = {
           startTime: getSecond(this.timeFilter.startTime),
           endTime: getSecond(this.timeFilter.endTime),
-          appLabels: appLabels.map(item => { return item.name }).join(',')
+          appLabels: appCards.map(item => {
+            return item.name
+          }).join(',')
         }
-        const app1 = get(api.netWorkOverview.applicationCycleTrafficTotal, params)
+        prevRequest = get(api.netWorkOverview.applicationCycleTrafficTotal, params)
-        const app2 = get(api.netWorkOverview.applicationTrafficAnalysis, params)
+        request = get(api.netWorkOverview.applicationTrafficAnalysis, params)
-        this.resultTotal = [
+        this.handleData(prevRequest, request, 'app')
-          {
-            type: 'bytes',
-            analysis: {
-              rate: 2,
-              total: 3145435
       }
-          },
+      if (providerCards.length > 0) {
-          {
+        params = {
-            type: 'packets',
-            analysis: {
-              rate: 2,
-              total: 3245435
-            }
-          },
-          {
-            type: 'sessions',
-            analysis: {
-              rate: 2,
-              total: 23345
-            }
-          }
-        ]
-        this.resultAnalysis = [
-          {
-            type: 'bytes',
-            l11: {
-              analysis: {
-                rate: 2
-              },
-              values: [
-                [
-                  1435781430781,
-                  '12'
-                ],
-                [
-                  1435781431781,
-                  '13'
-                ]
-              ]
-            },
-            a0: {
-              analysis: {
-                rate: 4
-              },
-              values: [
-                [
-                  1435781430781,
-                  '12'
-                ],
-                [
-                  1435781431781,
-                  '31'
-                ]
-              ]
-            }
-          },
-          {
-            type: 'packets',
-            l11: {
-              analysis: {
-                rate: 3
-              },
-              values: [
-                [
-                  1435781430781,
-                  '13'
-                ],
-                [
-                  1435781431781,
-                  '21'
-                ]
-              ]
-            },
-            a0: {
-              analysis: {
-                rate: 3
-              },
-              values: [
-                [
-                  1435781430781,
-                  '11'
-                ],
-                [
-                  1435781431781,
-                  '21'
-                ]
-              ]
-            }
-          },
-          {
-            type: 'sessions',
-            l11: {
-              analysis: {
-                rate: 2
-              },
-              values: [
-                [
-                  1435781430781,
-                  '1'
-                ],
-                [
-                  1435781431781,
-                  '1'
-                ]
-              ]
-            }
-          }
-        ]
-        this.resultTotal.forEach(t => {
-          this.resultAnalysis.forEach((v, i) => {
-            if (t.type === v.type) {
-              this.resultAnalysis[i].total = t
-            }
-          })
-        })
-        appData = this.resultAnalysis
-        Promise.all([app1, app2]).then(res => {
-          if (res.code === 200) {
-            console.log(1)
-          }
-        })
-        this.appData.forEach((app, i) => {
-          if (app.type === 'app') {
-            appData.forEach(t => {
-              if (t.type === this.appShowType && this.appShowType === 'bytes') {
-                // app.value = t.total.analysis.rate === 0 ? 0 : (t[app.name].analysis.rate - t.total.analysis.rate) / t.total.analysis.rate
-                app.rate = t[app.name].analysis.rate
-                app.pRate = t.total.analysis.rate
-                app.total = t.total.analysis.total
-                app.lineData = t[app.name].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
-                app.trend = this.periodicJudgmentCalculationChange(app.rate, app.pRate).value
-              }
-            })
-            this.initChart(app)
-          }
-        })
-      }
-      if (providerLabels) {
-        const params = {
           startTime: getSecond(this.timeFilter.startTime),
           endTime: getSecond(this.timeFilter.endTime),
-          appCompanies: providerLabels.map(item => { return item.name }).join(',')
+          appLabels: providerCards.map(item => {
+            return item.name
+          }).join(',')
         }
-        const app1 = get(api.netWorkOverview.appCompanyCycleTrafficTotal, params)
+        prevRequest = get(api.netWorkOverview.appCompanyCycleTrafficTotal, params)
-        const app2 = get(api.netWorkOverview.appCompanyTrafficAnalysis, params)
+        request = get(api.netWorkOverview.appCompanyTrafficAnalysis, params)
-        this.resultTotal = [
+        this.handleData(prevRequest, request, 'provider')
-          {
-            type: 'bytes',
-            analysis: {
-              rate: 20,
-              total: 3245435
       }
     },
-          {
+    handleData (prevRequest, request, _t) {
-            type: 'packets',
+      Promise.all([prevRequest, request]).then(res => {
-            analysis: {
+        // if (res[0].code === 200 && res[1].code === 200) {
-              rate: 2,
+        if (true) {
-              total: 3245435
+          // 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') {
-            type: 'sessions',
+            toCompareType = 'sessions'
-            analysis: {
+          } else if (this.metricFilter === 'Packets/s') {
-              rate: 2,
+            toCompareType = 'packets'
-              total: 23345
           }
-          }
+          data.forEach(d => {
-        ]
+            if (d.type === toCompareType) {
-        this.resultAnalysis = [
+              const prevTypeData = prevData.find(p => p.type === toCompareType)
-          {
+              Object.keys(d).forEach(app => {
-            type: 'bytes',
+                if (app !== 'type') {
-            l11: {
+                  this.appData.forEach(d2 => {
-              analysis: {
+                    if (d2.type === _t && d2.name === app) {
-                rate: 2
+                      d2.rate = d[app].analysis.rate
-              },
+                      d2.pRate = prevTypeData ? (prevTypeData[app] ? prevTypeData[app].rate : 0) : 0
-              values: [
+                      d2.total = d[app].analysis.total
-                [
+                      d2.lineData = d[app].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
-                  1435781430781,
+                      d2.trend = this.periodicJudgmentCalculationChange(d2.rate, d2.pRate).value
-                  '12'
+                      this.initChart(d2)
-                ],
-                [
-                  1435781431781,
-                  '13'
-                ]
-              ]
-            },
-            a0: {
-              analysis: {
-                rate: 6
-              },
-              values: [
-                [
-                  1435781430781,
-                  '12'
-                ],
-                [
-                  1435781431781,
-                  '31'
-                ]
-              ]
-            },
-            d3: {
-              analysis: {
-                rate: 8
-              },
-              values: [
-                [
-                  1435781430781,
-                  '121'
-                ],
-                [
-                  1435781431781,
-                  '131'
-                ],
-                [
-                  1435781432781,
-                  '321'
-                ],
-                [
-                  1435781433781,
-                  '331'
-                ]
-              ]
-            }
-          },
-          {
-            type: 'packets',
-            l11: {
-              analysis: {
-                rate: 3
-              },
-              values: [
-                [
-                  1435781430781,
-                  '13'
-                ],
-                [
-                  1435781431781,
-                  '21'
-                ]
-              ]
-            },
-            a0: {
-              analysis: {
-                rate: 3
-              },
-              values: [
-                [
-                  1435781430781,
-                  '11'
-                ],
-                [
-                  1435781431781,
-                  '21'
-                ]
-              ]
-            }
-          },
-          {
-            type: 'sessions',
-            l11: {
-              analysis: {
-                rate: 2
-              },
-              values: [
-                [
-                  1435781430781,
-                  '1'
-                ],
-                [
-                  1435781431781,
-                  '1'
-                ]
-              ]
-            }
-          }
-        ]
-        this.resultTotal.forEach(t => {
-          this.resultAnalysis.forEach((v, i) => {
-            if (t.type === v.type) {
-              this.resultAnalysis[i].total = t
-            }
-          })
-        })
-        Promise.all([app1, app2]).then(res => {
-          if (res.code === 200) {
-            console.log(1)
-          }
-        })
-        providerData = this.resultAnalysis
-        this.appData.forEach((app, i) => {
-          if (app.type === 'provider') {
-            providerData.forEach(t => {
-              if (t.type === this.appShowType && this.appShowType === 'bytes') {
-                // app.value = t.total.analysis.rate === 0 ? 0 : (t[app.name].analysis.rate - t.total.analysis.rate) / t.total.analysis.rate
-                app.rate = t[app.name].analysis.rate
-                app.pRate = t.total.analysis.rate
-                app.total = t.total.analysis.total
-                app.lineData = t[app.name].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
-                app.trend = this.periodicJudgmentCalculationChange(app.rate, app.pRate).value
-              }
-            })
-            this.initChart(app)
                     }
                   })
                 }
+              })
+            }
+          })
+        }
+      })
     },
     metricChange (value) {
       if (value === 'Bits/s') {
@@ -705,7 +457,7 @@ export default {
     moreChange (app) {
       this.appData.forEach(t => {
         if (t.name === app.name && t.type === app.type) {
-          t.moreName = !t.moreName
+          t.moreOptions = !t.moreOptions
         }
       })
     },
@@ -713,12 +465,13 @@ export default {
       const periodicData = {}
       if (period > pperiod) {
         periodicData.value = 'up'
-        periodicData.total = (period - pperiod) / pperiod
+        periodicData.total = pperiod === 0 ? 0 : (period - pperiod) / pperiod
       } else if (period < pperiod) {
         periodicData.value = 'down'
         periodicData.total = (pperiod - period) / pperiod
       } else {
         periodicData.value = ''
+        periodicData.total = 0
       }
       return periodicData
     },
@@ -737,11 +490,9 @@ export default {
         app = apps.find(p => p.user === 'default')
       }
       this.appData = app.list
-    }
-    this.timer = setTimeout(() => {
       this.init()
-    }, 100)
       window.addEventListener('resize', this.resize)
     }
   }
+}
 </script>

src/views/charts2/charts/NpmMap.vue

@@ -40,25 +40,83 @@
 </template>
 
 <script>
-import mapTestData from '@/views/charts2/charts/mapTestData'
+import { mapData, mapData2, 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 } from '@/utils/constants'
+import { storageKey, unitTypes } from '@/utils/constants'
 import locationOptions from '@/views/charts2/charts/locationOptions'
+import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
 
 export default {
   name: 'NpmMap',
   data () {
     return {
       locationOptions,
-      mapTestData,
+      mapData,
+      mapData2,
+      drillDownData,
       myChart: null,
       polygonSeries: null,
+      countrySeries: null,
+      worldImageSeries: null,
+      countryImageSeries: null,
       // Server | Client
       trafficDirection: 'Server',
-      location: ''
+      location: '',
+      keyMapping: [
+        {
+          key: 'sessions',
+          label: this.$t('overall.sessions'),
+          unitType: unitTypes.number
+        },
+        {
+          key: 'establishLatency',
+          label: this.$t('networkAppPerformance.tripTime'),
+          unitType: unitTypes.time
+        },
+        {
+          key: 'httpResponseLatency',
+          label: this.$t('networkAppPerformance.httpResponse'),
+          unitType: unitTypes.time
+        },
+        {
+          key: 'sslConLatency',
+          label: this.$t('networkAppPerformance.sslResponse'),
+          unitType: unitTypes.time
+        },
+        {
+          key: 'sequenceGapLossPercent',
+          label: this.$t('networkAppPerformance.packetLossRate'),
+          unitType: unitTypes.percent
+        },
+        {
+          key: 'pktRetransPercent',
+          label: this.$t('networkAppPerformance.retransmissionRate'),
+          unitType: unitTypes.percent
+        },
+        {
+          key: 'packets',
+          label: this.$t('overall.packets'),
+          unitType: unitTypes.number
+        },
+        {
+          key: 'sentBytes',
+          label: this.$t('overall.sent'),
+          unitType: unitTypes.byte
+        },
+        {
+          key: 'receivedBytes',
+          label: this.$t('overall.received'),
+          unitType: unitTypes.byte
+        },
+        {
+          key: 'count',
+          label: this.$t('overall.count'),
+          unitType: unitTypes.number
+        }
+      ]
     }
   },
   methods: {
@@ -74,6 +132,82 @@ export default {
       }
       this.myChart = shallowRef(chart)
       this.polygonSeries = shallowRef(this.polygonSeriesFactory())
+      this.worldImageSeries = shallowRef(this.imageSeriesFactory())
+      // 渲染
+      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())
+            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)
+      }
+      try {
+        // 清除数据
+        polygonSeries.data.splice(0)
+
+        // 清除legend
+        this.myChart.children.each((s, i) => {
+          if (s && s.className !== 'Container') {
+            this.myChart.children.removeIndex(i)
+          }
+        })
+
+        this.showMapBackButton = !!country
+        const data = chartData || this.mapData
+        imageSeries.data = data.map(r => ({
+          ...this.convertMapData(r),
+          id: r.ipLocationId || r.Country,
+          dnsServerRole: r.dnsServerRole,
+          name: r.ipLocationCity || r.ipLocationProvince || r.ipLocationCountry || r.Country,
+          desc: 'hehe',
+          color: '#7E9F54',
+          border: '#7E9F54'
+        }))
+      } catch (e) {
+        console.error(e)
+      } finally {
+        if (chartData) {
+          setTimeout(() => {
+            this.$emit('showLoading', false)
+          }, 200)
+        }
+      }
+    },
+    convertMapData (data) {
+      const converted = {}
+      this.keyMapping.forEach(mapping => {
+        if (data[mapping.key] || data[mapping.key] === 0) {
+          converted[mapping.key] = Number(data[mapping.key])
+          converted[`${mapping.key}Label`] = mapping.label
+          converted[`${mapping.key}ShowValue`] = valueToRangeValue(data[mapping.key], mapping.unitType).join(' ')
+          converted[`${mapping.key}Display`] = 'block'
+        } else {
+          converted[mapping.key] = ''
+          converted[`${mapping.key}Label`] = ''
+          converted[`${mapping.key}Display`] = 'none'
+        }
+      })
+      return converted
     },
     polygonSeriesFactory () {
       const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
@@ -120,7 +254,7 @@ export default {
       circle.propertyFields.fill = 'color'
       circle.propertyFields.stroke = 'border'
       circle.strokeWidth = 1
-      circle.tooltipHTML = this.generatePolygonTooltipHTML()
+      // circle.tooltipHTML = this.generatePolygonTooltipHTML()
       imageSeries.tooltip.getFillFromObject = false
       imageSeries.tooltip.background.fill = am4Core.color('#41495D')
       imageSeries.tooltip.background.filters.clear()
@@ -129,8 +263,8 @@ export default {
       imageSeries.heatRules.push({
         target: circle,
         property: 'radius',
-        min: 6,
+        min: 15,
-        max: 25,
+        max: 15,
         dataField: 'value'
       })
 

src/views/charts2/charts/appsTestData.js

@@ -0,0 +1,284 @@
+export const appTestData = [
+  {
+    "type": "bytes",
+    "l11": {
+      "analysis": {
+        "rate": 2,
+        "total":2245435
+      },
+      "values": [
+        [
+          1435781430781,
+          3
+        ],
+        [
+          1435781431781,
+          2
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 2,
+        "total":3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          1
+        ],
+        [
+          1435781431781,
+          1
+        ]
+      ]
+    }
+  },
+  {
+    "type": "packets",
+    "l11": {
+      "analysis": {
+        "rate": 3,
+        "total":4245435
+      },
+      "values": [
+        [
+          1435781430781,
+          4
+        ],
+        [
+          1435781431781,
+          5
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 3,
+        "total":2245435
+      },
+      "values": [
+        [
+          1435781430781,
+          2
+        ],
+        [
+          1435781431781,
+          1
+        ]
+      ]
+    }
+  },
+  {
+    "type": "sessions",
+    "l11": {
+      "analysis": {
+        "rate": 2,
+        "total": 2245435
+      },
+      "values": [
+        [
+          1435781430781,
+          3
+        ],
+        [
+          1435781431781,
+          8
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 3,
+        "total": 3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          1
+        ],
+        [
+          1435781431781,
+          1
+        ]
+      ]
+    }
+  }
+]
+export const appPrevTestData = [
+  {
+    "type": "bytes",
+    "l11": {
+      "rate": 2,
+      "total":3245435
+    },
+    "a0": {
+      "rate": 3,
+      "total":4245435
+    }
+  },
+  {
+    "type": "packets",
+    "l11": {
+      "rate": 2,
+      "total":3245435
+    },
+    "a0": {
+      "rate": 4,
+      "total":4245435
+    }
+  },
+  {
+    "type": "sessions",
+    "l11": {
+      "rate": 3,
+      "total":233451
+    },
+    "a0": {
+      "rate": 3,
+      "total":4245435
+    }
+  }
+]
+export const providerTestData = [
+  {
+    "type": "bytes",
+    "d3": {
+      "analysis": {
+        "rate": 4,
+        "total":4245435
+      },
+      "values": [
+        [
+          1435781430781,
+          "1"
+        ],
+        [
+          1435781431781,
+          "1"
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 2,
+        "total":3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          1
+        ],
+        [
+          1435781431781,
+          2
+        ]
+      ]
+    }
+  },
+  {
+    "type": "packets",
+    "d3": {
+      "analysis": {
+        "rate": 3,
+        "total": 1245435
+      },
+      "values": [
+        [
+          1435781430781,
+          2
+        ],
+        [
+          1435781431781,
+          1
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 3,
+        "total": 3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          5
+        ],
+        [
+          1435781431781,
+          3
+        ]
+      ]
+    }
+  },
+  {
+    "type": "sessions",
+    "d3": {
+      "analysis": {
+        "rate": 2,
+        "total":2245435
+      },
+      "values": [
+        [
+          1435781430781,
+          "1"
+        ],
+        [
+          1435781431781,
+          "1"
+        ]
+      ]
+    },
+    "a0": {
+      "analysis": {
+        "rate": 3,
+        "total": 3245435
+      },
+      "values": [
+        [
+          1435781430781,
+          1
+        ],
+        [
+          1435781431781,
+          3
+        ]
+      ]
+    }
+  }
+]
+export const providerPrevTestData = [
+  {
+    "type": "bytes",
+    "d3": {
+      "rate": 2,
+      "total":2245435
+    },
+    "a0": {
+      "rate": 3,
+      "total":4245435
+    }
+  },
+  {
+    "type": "packets",
+    "d3": {
+      "rate": 2,
+      "total":3245435
+    },
+    "a0": {
+      "rate": 4,
+      "total":4245435
+    }
+  },
+  {
+    "type": "sessions",
+    "d3": {
+      "rate": 3,
+      "total":233451
+    },
+    "a0": {
+      "rate": 3,
+      "total":4245435
+    }
+  }
+]

src/views/charts2/charts/options/echartOption.js

@@ -236,7 +236,9 @@ export const appListChartOption = {
   },
   grid: {
     left: 0,
-    right: 0
+    right: 1,
+    top: 2,
+    bottom: 0
   },
   animation: false,
   color: chartColor,