CN-197 perf: 调整地图的tooltip

2021-10-11 19:12:52 +08:00
parent 747a7ecd7c
commit 14a8365e20
6 changed files with 87 additions and 80 deletions
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -10,8 +10,8 @@
      <div v-for="(item, index) in data" :key="index" class="table-below-box" :class="{'table-below-box--inactivated': !item.active}" @click="toggleLegend(index)">
        <div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div>
        <div class="table__below-title" :title="item.legend">{{item.legend}}</div>
-        <div class="table__below-statistics" :title="item.aggregation.avg">{{unitConvert(item.aggregation.avg, chartInfo.params.unitType).join(' ')}}</div>
-        <div class="table__below-statistics" :title="item.aggregation.max">{{unitConvert(item.aggregation.max, chartInfo.params.unitType).join(' ')}}</div>
+        <div class="table__below-statistics" :title="item.aggregation.avg">{{valueToRangeValue(item.aggregation.avg, chartInfo.params.unitType).join(' ')}}</div>
+        <div class="table__below-statistics" :title="item.aggregation.max">{{valueToRangeValue(item.aggregation.max, chartInfo.params.unitType).join(' ')}}</div>
      </div>
    </div>
  </div>
@@ -20,7 +20,7 @@

 <script>
 import { getChartColor } from '@/components/charts/chart-options'
-import unitConvert from '@/utils/unit-convert'
+import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
 export default {
  name: 'StatisticsLegend',
  props: {
@@ -35,7 +35,8 @@ export default {
  setup () {
    return {
      getChartColor,
-      unitConvert
+      unitConvert,
+      valueToRangeValue
    }
  }
 }
--- a/src/components/entities/EntityList.vue
+++ b/src/components/entities/EntityList.vue
@@ -138,9 +138,6 @@ export default {
    from: String,
    pageObj: Object,
    loading: Boolean
-  },
-  components: {
-
  },
  data () {
    return {
--- a/src/components/entities/entities.scss
+++ b/src/components/entities/entities.scss
@@ -117,6 +117,9 @@
              position: absolute;
              top: 21px;
              left: 82px;
+              overflow: hidden;
+              max-width: 200px;
+              text-overflow: ellipsis;
            }
          }
        }
--- a/src/utils/unit-convert.js
+++ b/src/utils/unit-convert.js
@@ -62,7 +62,7 @@ export function timeUnitFormatter (time, sourceUnit = 'ms', targetUnit, dot = 2)
 }

 /* 单位转换，返回转换后的[value, unit] */
-// unitType = time / number / byte
+// unitType = time / number / byte / percent
 export default function unitConvert (value, unitType, sourceUnit, targetUnit, dot = 2) {
  if (unitType === unitTypes.string) {
    if (value) {
@@ -111,3 +111,26 @@ export function getUnitType (column) {
    return unitTypes.number
  }
 }
+
+/* 单位转换，返回转换后的[value, unit]，type=time时若value<1ms，返回<1ms，type=percent时若value<0.01%，返回<0.01% */
+export function valueToRangeValue (value, unitType) {
+  const values = unitConvert(value, unitType)
+  if (values[0] || values[0] === 0) {
+    switch (unitType) {
+      case unitTypes.time: {
+        if (values[0] < 1) {
+          return ['<1', 'ms']
+        }
+        break
+      }
+      case unitTypes.percent: {
+        if (values[0] < 0.01) {
+          return ['<0.01', '']
+        }
+        break
+      }
+      default: break
+    }
+  }
+  return values
+}
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -247,7 +247,6 @@
          <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
        </template>
      </el-popover>
-      <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
      <div class="header__operation header__operation--table">
        <el-select
            size="mini"
@@ -275,6 +274,7 @@
          </template>
        </el-select>
      </div>
+      <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
 <!--      <div class="header__operation header__operation&#45;&#45;table">
        <span class="option__button"><i class="cn-icon cn-icon-style"></i></span>
        <div class="icon-group-divide"></div>
@@ -510,7 +510,7 @@ import ChartMap from '@/components/charts/ChartMap'
 import PieTable from '@/components/charts/PieTable'
 import StatisticsLegend from '@/components/charts/StatisticsLegend'
 import ChartTablePagination from '@/components/charts/ChartTablePagination'
-import unitConvert, { getUnitType } from '@/utils/unit-convert'
+import unitConvert, { getUnitType, valueToRangeValue } from '@/utils/unit-convert'
 import { chartTableDefaultPageSize, chartTableTopOptions, storageKey, chartPieTableTopOptions, unitTypes } from '@/utils/constants'
 import { get, post } from '@/utils/http'
 import { replaceUrlPlaceholder, getCapitalGeo, getGeoData, lineToSpace } from '@/utils/tools'
@@ -762,57 +762,14 @@ export default {
        }
      })
    },
-    getTitle (r) {
-      let title = ''
-      if (r.establishLatency || r.httpResponseLatency || r.sslConLatency) {
-        title += `: ${unitConvert(r.establishLatency || r.httpResponseLatency || r.sslConLatency, unitTypes.time).join(' ')}`
-      }
-      if (r.sequenceGapLossPercent || r.pktRetransPercent) {
-        const d = unitConvert(r.sequenceGapLossPercent || r.pktRetransPercent, unitTypes.number)
-        title += d[0] === '0.00' ? ': 0' : `: ${d.join(' ')} %`
-      }
-      if (r.sessions) {
-        title += `\nSessions: ${unitConvert(r.sessions, unitTypes.number).join(' ')}`
-      }
-      if (r.packets) {
-        title += `\nPackets: ${unitConvert(r.packets, unitTypes.number).join(' ')}`
-      }
-      if (r.bytes) {
-        title += `\nBytes: ${unitConvert(r.bytes, unitTypes.byte).join(' ')}`
-      }
-      title = title || ': 0'
-      return title
-    },
-    getTitle2 (item, valueColumn) {
-      let title = ''
-      switch (valueColumn) {
-        case 'sessions': {
-          title = `\nSessions: ${unitConvert(item.value, unitTypes.number).join(' ')}`
-          break
-        }
-        case 'packets': {
-          title = `\nPackets: ${unitConvert(item.value, unitTypes.number).join(' ')}`
-          break
-        }
-        case 'bytes': {
-          title = `\nBytes: ${unitConvert(item.value, unitTypes.byte).join(' ')}`
-          break
-        }
-        case 'establishLatency':
-        case 'httpResponseLatency':
-        case 'sslConLatency': {
-          const result = unitConvert(item.value, unitTypes.time)
-          title = `: ${result[0] === 0 ? 0 : result.join(' ')}`
-          break
-        }
-        case 'sequenceGapLossPercent':
-        case 'pktRetransPercent': {
-          title = `: ${unitConvert(item.value, unitTypes.number).join(' ')}`
-          break
-        }
-        default: break
-      }
-      return title
+    generateTooltipHTML () {
+      return `
+        <div style="padding-bottom: 10px;">
+          <div style="color: #333; font-size: 16px; height: 30px; line-height: 30px;">{name}</div>
+          <span style="color: #666; font-size: 14px; padding-right: 15px;">{labelText}</span>
+          <span style="color: #666; font-size: 14px;">{showValue}</span>
+        </div>
+      `
    },
    changeTab (tab) {
      this.activeTab = tab.paneName
@@ -879,7 +836,6 @@ export default {

              circle.fillOpacity = 0.7
              circle.nonScaling = true
-              circle.tooltipText = '{title}'
              const radiusHeat = imageSeries.heatRules.push({
                target: circle,
                property: 'radius',
@@ -900,14 +856,12 @@ export default {
                pointData.push({
                  ...d,
                  latitude: parseFloat(d.serverLatitude),
-                  longitude: parseFloat(d.serverLongitude),
-                  title: this.getTitle(d)
+                  longitude: parseFloat(d.serverLongitude)
                })
                pointData.push({
                  ...d,
                  latitude: parseFloat(d.clientLatitude),
-                  longitude: parseFloat(d.clientLongitude),
-                  title: this.getTitle(d)
+                  longitude: parseFloat(d.clientLongitude)
                })
              })
              imageSeries.data = pointData
@@ -915,22 +869,23 @@ export default {
              const sumData = []
              data.forEach(r => {
                const hit = sumData.find(s => s.id === r.serverId)
-                const value = Number(r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions) || 0
+                const { key, labelText } = this.getDataKey(r)
+                const value = Number(r[key]) || 0
                if (hit) {
                  hit.value += value
                } else {
                  sumData.push({
                    id: r.serverId,
+                    key,
+                    labelText,
                    value
                  })
                }
              })
-              const seriesData = sumData.map(r => {
-                return {
+              const seriesData = sumData.map(r => ({
                ...r,
-                  title: this.getTitle2(r, chartParams.valueColumn)
-                }
-              })
+                showValue: (r.value || r.value === 0) ? valueToRangeValue(r.value, chartParams.unitType).join(' ') : ''
+              }))
              polygonSeries.data = [...seriesData]
              const sorted = seriesData.sort((a, b) => b.value - a.value)
              const allZero = this.$_.isEmpty(sorted) || Number(sorted[0].value) === 0 // 数据全为0的情况，legend只显示1个颜色
@@ -965,7 +920,9 @@ export default {
              })

              const polygonTemplate = polygonSeries.mapPolygons.template
-              polygonTemplate.tooltipText = '{name}{title}'
+              polygonTemplate.tooltipHTML = this.generateTooltipHTML()
+              polygonSeries.tooltip.getFillFromObject = false
+              polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
              polygonTemplate.nonScalingStroke = true
              polygonTemplate.strokeWidth = 0.5
              polygonTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
@@ -989,6 +946,30 @@ export default {
    refresh () {
      this.initChart()
    },
+    getDataKey (r) {
+      let key = ''
+      let labelText = ''
+      if (r.establishLatency || r.establishLatency === 0) {
+        key = 'establishLatency'
+        labelText = this.$t('networkAppPerformance.tripTime')
+      } else if (r.httpResponseLatency || r.httpResponseLatency === 0) {
+        key = 'httpResponseLatency'
+        labelText = this.$t('networkAppPerformance.httpResponse')
+      } else if (r.sslConLatency || r.sslConLatency === 0) {
+        key = 'sslConLatency'
+        labelText = this.$t('networkAppPerformance.sslResponse')
+      } else if (r.sequenceGapLossPercent || r.sequenceGapLossPercent === 0) {
+        key = 'sequenceGapLossPercent'
+        labelText = this.$t('networkAppPerformance.packetlossRate')
+      } else if (r.pktRetransPercent || r.pktRetransPercent === 0) {
+        key = 'pktRetransPercent'
+        labelText = this.$t('networkAppPerformance.retransmissionRate')
+      } else if (r.sessions || r.sessions === 0) {
+        key = 'sessions'
+        labelText = this.$t('overall.sessions')
+      }
+      return { key, labelText }
+    },
    getTableTitle (data) {
      if (data.length > 0) {
        const dataColumns = Object.keys(data[0]) // 返回数据的字段
--- a/src/views/entities/EntityExplorer.vue
+++ b/src/views/entities/EntityExplorer.vue
@@ -127,12 +127,14 @@ export default {
      const params = { from: this.from, q: doubleQuotationToSingle(this.searchContent) }
      this.loading = true
      try {
-        this.listData = (await getEntityList({ ...this.pageObjRight, ...params })).map(d => ({
+        this.listData = (await getEntityList({ ...this.pageObjRight, ...params })).map(d => {
+          return {
            ...d,
-          id: window.btoa(d.ip || d.domainName || d.appName),
+            id: window.btoa(unescape(encodeURIComponent(d.ip || d.domainName || d.appName))),
            latestSent: null,
            latestReceived: null
-        }))
+          }
+        })
        this.pageObjRight.total = await getEntityCount(params)
        const { topFilterData, bottomFilterData } = await this.queryFilterData(params)
        this.topFilterData = topFilterData