From 05178b25be5eb4b463446d4f222d557b3a2ff9ad Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 20 Jul 2021 18:58:55 +0800
Subject: [PATCH] =?UTF-8?q?CN-65=20feat:=20=E6=B5=81=E9=87=8F=E6=9B=B2?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E3=80=81=E9=A5=BC=E5=9B=BE=E3=80=81=E5=85=B6?=
 =?UTF-8?q?=E4=BB=96=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/webpack.config.js                       | 23 ++++----
 src/assets/css/common.scss                    |  4 ++
 src/components/charts/ChartTable.vue          |  2 +-
 src/components/charts/PieTable.vue            |  5 +-
 src/components/charts/StatisticsLegend.vue    |  2 +-
 src/components/charts/chart-formatter.js      | 55 +++++++++++++++++++
 src/components/charts/chart-options.js        | 15 +++--
 ...hartTableTitle.js => chart-table-title.js} | 11 ++--
 src/components/charts/chartFormatter.js       | 24 --------
 src/components/entities/LeftFilter.vue        |  1 -
 src/views/charts/Chart.vue                    | 21 ++++---
 11 files changed, 105 insertions(+), 58 deletions(-)
 create mode 100644 src/components/charts/chart-formatter.js
 rename src/components/charts/{chartTableTitle.js => chart-table-title.js} (74%)
 delete mode 100644 src/components/charts/chartFormatter.js

diff --git a/build/webpack.config.js b/build/webpack.config.js
index f448544d..451c22a4 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -6,17 +6,17 @@ const { VueLoaderPlugin } = require('vue-loader')
 
 const libMode = process.env.LIBMODE
 const isFullMode = libMode === 'full'
-let externals = [
+const externals = [
   {
     vue: {
       root: 'Vue',
       commonjs: 'vue',
-      commonjs2: 'vue',
-    },
-  },
+      commonjs2: 'vue'
+    }
+  }
 ]
 const plugins = [
-  new VueLoaderPlugin(),
+  new VueLoaderPlugin()
   // new BundleAnalyzerPlugin(),
 ]
 
@@ -50,20 +50,21 @@ const config = {
     rules: [
       {
         test: /\.vue$/,
-        use: 'vue-loader',
+        use: 'vue-loader'
       },
       {
         test: /\.(ts|js)x?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
-      },
-    ],
+        loader: 'babel-loader'
+      }
+    ]
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json'],
+    extensions: ['.ts', '.tsx', '.js', '.json']
   },
+  cache: true,
   externals,
-  plugins,
+  plugins
 }
 
 module.exports = config
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index dc43eb28..716866eb 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -60,3 +60,7 @@ th *:first-letter,
   height: 100%;
   width: 100%;
 }
+
+.el-table__empty-block {
+  width: 100% !important;
+}
diff --git a/src/components/charts/ChartTable.vue b/src/components/charts/ChartTable.vue
index 87551a5f..70fe5a0a 100644
--- a/src/components/charts/ChartTable.vue
+++ b/src/components/charts/ChartTable.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { shortFormatter } from '@/components/charts/chartFormatter'
+import { shortFormatter } from '@/components/charts/chart-formatter'
 export default {
   name: 'ChartTable',
   props: {
diff --git a/src/components/charts/PieTable.vue b/src/components/charts/PieTable.vue
index 29ec1c65..55507e79 100644
--- a/src/components/charts/PieTable.vue
+++ b/src/components/charts/PieTable.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import { shortFormatter } from '@/components/charts/chartFormatter'
+import { shortFormatter } from '@/components/charts/chart-formatter'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder } from '@/utils/tools'
 
@@ -188,7 +188,8 @@ export default {
         startTime: parseInt(this.startTime / 1000),
         endTime: parseInt(this.endTime / 1000),
         order: this.order,
-        domain: row.domain
+        domain: row.domain,
+        limit: 10
       }
       get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
         if (response2.code === 200) {
diff --git a/src/components/charts/StatisticsLegend.vue b/src/components/charts/StatisticsLegend.vue
index 96c79644..4676fd24 100644
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -18,7 +18,7 @@
 
 <script>
 import { getChartColor } from '@/components/charts/chart-options'
-import { shortFormatter } from '@/components/charts/chartFormatter'
+import { shortFormatter } from '@/components/charts/chart-formatter'
 export default {
   name: 'StatisticsLegend',
   props: {
diff --git a/src/components/charts/chart-formatter.js b/src/components/charts/chart-formatter.js
new file mode 100644
index 00000000..cd597740
--- /dev/null
+++ b/src/components/charts/chart-formatter.js
@@ -0,0 +1,55 @@
+const shortList = [' ', 'K', 'M', 'G', 'T', 'Quadrillion', 'Quintillion']
+function asciiCompute (num, ascii, units, dot = 2) {
+  if (!num && num !== 0 && num !== '0') {
+    return ''
+  }
+  num = Number(num)
+  let carry = 0
+  if (num > 1) {
+    const log = Math.log(num) / Math.log(ascii)
+    carry = parseInt(log)
+    num = num / Math.pow(ascii, carry)
+  }
+  if (Number.isInteger(num)) {
+    return num + ' ' + units[carry]
+  } else {
+    return num.toFixed(dot) + ' ' + units[carry]
+  }
+}
+export function shortFormatter (value, index, dot = 2) {
+  return asciiCompute(value, 1000, shortList, dot)
+}
+/* 时间单位转换，例如将ms转为h */
+const timeStep = [ // 步进倍数，以ms为基数
+  { unit: 'ms', step: 1 },
+  { unit: 's', step: 1000 },
+  { unit: 'm', step: 60 },
+  { unit: 'h', step: 60 },
+  { unit: 'd', step: 24 }
+]
+export function timeUnitFormatter (time, sourceUnit = 'ms', targetUnit, dot = 2) {
+  let sourceIndex = -1
+  let targetIndex = -1
+  timeStep.forEach((t, i) => {
+    sourceUnit === t.unit && (sourceIndex = i)
+    targetUnit && targetUnit === t.unit && (targetIndex = i)
+  })
+  let multi = 1
+  let result = parseFloat(time)
+  if (targetIndex < 0) {
+    while (sourceIndex < timeStep.length - 1 && result > timeStep[sourceIndex + 1].step) {
+      sourceIndex++
+      multi = timeStep[sourceIndex].step
+      result /= multi
+    }
+    return [multi === 1 ? result : result.toFixed(dot), timeStep[sourceIndex].unit]
+  } else {
+    timeStep.forEach((s, i) => {
+      if (i <= targetIndex) {
+        multi *= s.step
+      }
+    })
+    result /= multi
+    return [result.toFixed(dot), targetUnit]
+  }
+}
diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index cfa2c604..f22af21b 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -4,7 +4,7 @@
  * @description chart option和一些工具
 */
 import { format } from 'echarts'
-import { shortFormatter, tooltipShortFormatter } from './chartFormatter'
+import { shortFormatter, timeUnitFormatter } from './chart-formatter'
 import _ from 'lodash'
 export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
   '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
@@ -179,9 +179,7 @@ const lineStack = {
 }
 const pieWithTable = {
   tooltip: {
-    appendToBody: true,
-    trigger: 'item',
-    formatter: tooltipShortFormatter
+    appendToBody: true
   },
   color: chartColor,
   animation: false,
@@ -194,10 +192,10 @@ const pieWithTable = {
     itemWidth: 10, // 设置宽度
     itemHeight: 10, // 设置高度
     itemGap: 20,
+    formatter: tooLongFormatter,
     tooltip: {
       show: true
-    },
-    formatter: tooLongFormatter
+    }
   },
   series: [
     {
@@ -209,6 +207,11 @@ const pieWithTable = {
       label: {
         formatter: '{d}%'
       },
+      tooltip: {
+        formatter: function (param, index, callback) {
+          return `${param.name}: ${shortFormatter(param.value)}`
+        }
+      },
       emphasis: {
         itemStyle: {
           shadowBlur: 10,
diff --git a/src/components/charts/chartTableTitle.js b/src/components/charts/chart-table-title.js
similarity index 74%
rename from src/components/charts/chartTableTitle.js
rename to src/components/charts/chart-table-title.js
index b64a1084..b408c969 100644
--- a/src/components/charts/chartTableTitle.js
+++ b/src/components/charts/chart-table-title.js
@@ -74,8 +74,11 @@ export const allTableTitle = {
   ]
 }
 export const legendMapping = {
-  bytes_received_rate: 'Bytes Received Rate',
-  bytes_sent_rate: 'Bytes Sent Rate',
-  bytes_rate: 'Bytes Rate',
-  session_rate: 'Session Rate'
+  bytes_received_rate: i18n.global.t('trafficSummary.throughputPerSecondC2s'),
+  bytes_sent_rate: i18n.global.t('trafficSummary.throughputPerSecondS2c'),
+  bytes_rate: i18n.global.t('trafficSummary.throughputPerSecond'),
+  session_rate: i18n.global.t('trafficSummary.sessionsPerSecond'),
+  packets_rate: i18n.global.t('trafficSummary.packetsPerSecond'),
+  packets_received_rate: i18n.global.t('trafficSummary.packetsPerSecondC2s'),
+  packets_sent_rate: i18n.global.t('trafficSummary.packetsPerSecondS2c')
 }
diff --git a/src/components/charts/chartFormatter.js b/src/components/charts/chartFormatter.js
deleted file mode 100644
index 3005f622..00000000
--- a/src/components/charts/chartFormatter.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const shortList = [' ', 'K', 'M', 'G', 'T', 'Quadrillion', 'Quintillion']
-function asciiCompute (num, ascii, units, dot = 2) {
-  if (!num && num !== 0 && num !== '0') {
-    return ''
-  }
-  num = Number(num)
-  let carry = 0
-  if (num > 1) {
-    const log = Math.log(num) / Math.log(ascii)
-    carry = parseInt(log)
-    num = num / Math.pow(ascii, carry)
-  }
-  if (Number.isInteger(num)) {
-    return num + ' ' + units[carry]
-  } else {
-    return num.toFixed(dot) + ' ' + units[carry]
-  }
-}
-export function shortFormatter (value, index, dot = 2) {
-  return asciiCompute(value, 1000, shortList, dot)
-}
-export function tooltipShortFormatter (obj, index, callback, dot = 2) {
-  return asciiCompute(obj.value, 1000, shortList, dot)
-}
diff --git a/src/components/entities/LeftFilter.vue b/src/components/entities/LeftFilter.vue
index 314e3a71..e0b1d518 100644
--- a/src/components/entities/LeftFilter.vue
+++ b/src/components/entities/LeftFilter.vue
@@ -17,7 +17,6 @@
               :expand-on-click-node="false"
               :lazy="i === 0"
               highlight-current
-              :show-checkbox="i === 1"
               @node-click="nodeClick"
           >
             <template #default="{ node, data }">
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 12fc05d2..af01ce16 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -83,8 +83,8 @@
   >
     <template #title><span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span></template>
     <template #data>
-      <span>{{handleSingleValue(singleValue.value)}}</span>
-      <span v-if="chartInfo.params && chartInfo.params.unit" class="single-value__unit">{{chartInfo.params.unit}}</span>
+      <span>{{handleSingleValue[0]}}</span>
+      <span v-if="chartInfo.params && chartInfo.params.unit" class="single-value__unit">{{handleSingleValue[1]}}</span>
     </template>
   </single-value>
   <!-- 表格 -->
@@ -149,7 +149,7 @@ import * as echarts from 'echarts'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { shallowRef } from 'vue'
-import { allTableTitle, legendMapping } from '@/components/charts/chartTableTitle'
+import { allTableTitle, legendMapping } from '@/components/charts/chart-table-title'
 import {
   isEcharts,
   isSingleValue,
@@ -174,7 +174,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 { shortFormatter } from '@/components/charts/chartFormatter'
+import { shortFormatter, timeUnitFormatter } from '@/components/charts/chart-formatter'
 import { chartTableDefaultPageSize, chartTableTopOptions, storageKey, chartPieTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder, getCapitalGeo, getGeoData, lineToSpace } from '@/utils/tools'
@@ -499,6 +499,7 @@ export default {
               seriesIndex: 0,
               dataIndex: i
             })
+            self.selectPieChartName = ''
             self.loadPieTableData()
           } else {
             if (d.name === params.name) {
@@ -558,11 +559,15 @@ export default {
       }
     },
     handleSingleValue () {
-      return function (value) {
-        if (!Number(value) && Number(value) !== 0) {
-          return '-'
+      const value = this.singleValue.value
+      const unit = this.chartInfo.params.unit
+      if (!Number(value) && Number(value) !== 0) {
+        return '-'
+      } else {
+        if (unit && unit === 'ms') {
+          return Number(value) < 1 ? ['< 1', 'ms'] : timeUnitFormatter(value, null, 0)
         } else {
-          return Number(value) < 0.01 ? '< 0.01' : shortFormatter(value)
+          return Number(value) < 0.01 ? ['< 0.01', ''] : [shortFormatter(value), '']
         }
       }
     }