gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chenjinsong
2021-07-20 18:58:55 +08:00
parent d37f5ec1d0
commit 05178b25be
11 changed files with 105 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
build/webpack.config.js
View File

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

4
src/assets/css/common.scss
View File

@@ -60,3 +60,7 @@ th *:first-letter,
height: 100%;
width: 100%;
}
.el-table__empty-block {
width: 100% !important;
}

2
src/components/charts/ChartTable.vue
View File

@@ -45,7 +45,7 @@
</template>
<script>
import { shortFormatter } from '@/components/charts/chartFormatter'
import { shortFormatter } from '@/components/charts/chart-formatter'
export default {
name: 'ChartTable',
props: {

5
src/components/charts/PieTable.vue
View File

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

2
src/components/charts/StatisticsLegend.vue
View File

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

55
src/components/charts/chart-formatter.js Normal file
View File

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

15
src/components/charts/chart-options.js
View File

@@ -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,

11
src/components/charts/chartTableTitle.js → src/components/charts/chart-table-title.js
View File

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

24
src/components/charts/chartFormatter.js
View File

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

1
src/components/entities/LeftFilter.vue
View File

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

17
src/views/charts/Chart.vue
View File

@@ -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) {
const value = this.singleValue.value
const unit = this.chartInfo.params.unit
if (!Number(value) && Number(value) !== 0) {
return '-'
} else {
return Number(value) < 0.01 ? '< 0.01' : shortFormatter(value)
if (unit && unit === 'ms') {
return Number(value) < 1 ? ['< 1', 'ms'] : timeUnitFormatter(value, null, 0)
} else {
return Number(value) < 0.01 ? ['< 0.01', ''] : [shortFormatter(value), '']
}
}
}