CN-65 feat: 流量曲线图、饼图、其他内容

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: {

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) {

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: {

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]
+  }
+}

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,

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')
 }

src/components/charts/chartFormatter.js

@@ -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)
-}

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 }">