From 14a8365e20b40e2b826d68677e68de6b3b8766f0 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 11 Oct 2021 19:12:52 +0800
Subject: [PATCH] =?UTF-8?q?CN-197=20perf:=20=E8=B0=83=E6=95=B4=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E7=9A=84tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/StatisticsLegend.vue |   9 +-
 src/components/entities/EntityList.vue     |   3 -
 src/components/entities/entities.scss      |   3 +
 src/utils/unit-convert.js                  |  25 ++++-
 src/views/charts/Chart.vue                 | 113 +++++++++------------
 src/views/entities/EntityExplorer.vue      |  14 +--
 6 files changed, 87 insertions(+), 80 deletions(-)

diff --git a/src/components/charts/StatisticsLegend.vue b/src/components/charts/StatisticsLegend.vue
index e2c72647..6b74988e 100644
--- 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
     }
   }
 }
diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue
index f65a9c57..99cfc1c5 100644
--- 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 {
diff --git a/src/components/entities/entities.scss b/src/components/entities/entities.scss
index f3a70af4..156f4ab4 100644
--- 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;
             }
           }
         }
diff --git a/src/utils/unit-convert.js b/src/utils/unit-convert.js
index 380c4b37..92a6ee6a 100644
--- 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
+}
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index f40731c2..689c97e1 100644
--- 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 {
-                  ...r,
-                  title: this.getTitle2(r, chartParams.valueColumn)
-                }
-              })
+              const seriesData = sumData.map(r => ({
+                ...r,
+                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]) // 返回数据的字段
diff --git a/src/views/entities/EntityExplorer.vue b/src/views/entities/EntityExplorer.vue
index b13a6e4d..0cc0e727 100644
--- 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 => ({
-          ...d,
-          id: window.btoa(d.ip || d.domainName || d.appName),
-          latestSent: null,
-          latestReceived: null
-        }))
+        this.listData = (await getEntityList({ ...this.pageObjRight, ...params })).map(d => {
+          return {
+            ...d,
+            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