yeyinlaoying/neutrino-proxy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页图表改造，对接数据接口

Browse Source
This commit is contained in:
zCans
2023-03-26 22:33:17 +08:00
parent 07de9eec98
commit 98ac3c67c1
7 changed files with 146 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neutrino-proxy-admin/src/api/report.js
+8
View File
@@ -30,3 +30,11 @@ export function fetchLicenseFlowMonthReportList(query) {
params: query
})
}
export function homeData(query) {
return request({
url: '/report/home/data-view',
method: 'get',
params: query
})
}
neutrino-proxy-admin/src/utils/utils.js
+29
View File
@@ -0,0 +1,29 @@
const SIZE_UNINTS = ['B', 'KB', 'MB', 'GB', 'TB']
const SIZE_SYSTEM = 1024
/**
* 根据字节数获取大小描述
* 1、小于1024字节的以B为单位
* 2、小于1024KB的以KB为单位
* 3、小于1024M的以MB为单位
* 4、小于1024G的以GB为单位
* 5、其他以TB为单位
*/
export function getSizeDescByByteCount(byteCount) {
if (byteCount <= 0) {
return '0B'
}
let res = byteCount
let index = 0
while (index < SIZE_UNINTS.length && res >= SIZE_SYSTEM) {
res /= SIZE_SYSTEM
index++
}
if (index >= SIZE_UNINTS.length) {
index = SIZE_UNINTS.length - 1
res *= 1024
}
return parseFloat(res.toFixed(2)) + SIZE_UNINTS[index]
}
neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
+11 -6
View File
@@ -5,6 +5,7 @@
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
let that = null
export default {
props: {
@@ -28,8 +29,8 @@ export default {
type: Object,
default: () => {
return {
upload: 90, // 上行
download: 100, // 下行
upFlowBytes: 0, // 上行
downFlowBytes: 0, // 下行
text: '今日流量'
}
}
@@ -41,6 +42,7 @@ export default {
}
},
mounted() {
that = this
this.initChart()
},
beforeDestroy() {
@@ -57,7 +59,7 @@ export default {
const option = {
title: {
text: this.data.text,
subtext: '上行：' + this.data.upload + '\n\n' + '下行：' + this.data.download,
subtext: '上行：' + this.data.upFlowDesc + '\n\n' + '下行：' + this.data.downFlowDesc + '\n\n' + '汇总：' + this.data.totalFlowDesc,
textStyle: {
fontSize: 18,
fontWeight: 800,
@@ -65,7 +67,10 @@ export default {
}
},
tooltip: {
trigger: 'item'
trigger: 'item',
formatter: function(value) {
return `${value.seriesName} <br/>${value.marker} : ${value.name} ${value.name === '上行' ? that.data.upFlowDesc : that.data.downFlowDesc}`
}
},
legend: {
data: ['上行', '下行'],
@@ -93,7 +98,7 @@ export default {
},
data: [
{
value: this.data.upload,
value: this.data.upFlowBytes,
name: '上行',
lineStyle: {
normal: {
@@ -107,7 +112,7 @@ export default {
}
},
{
value: this.data.download,
value: this.data.downFlowBytes,
name: '下行',
lineStyle: {
normal: {
neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
+5 -5
View File
@@ -26,8 +26,8 @@ export default {
type: Object,
default: () => {
return {
onLine: 90, // 进度条最大值
total: 100 // 当前进度
onlineCount: 0, // 进度条最大值
totalCount: 0 // 当前进度
}
}
}
@@ -54,7 +54,7 @@ export default {
const option = {
title: {
text: 'License统计',
subtext: '在线数：' + this.data.onLine + '\n\n' + '离线数：' + (this.data.total - this.data.onLine),
subtext: '在线数：' + this.data.onlineCount + '\n\n' + '离线数：' + (this.data.totalCount - this.data.onlineCount),
textStyle: {
fontSize: 18,
fontWeight: 800,
@@ -103,7 +103,7 @@ export default {
// value当前进度 + 颜色
{
name: '在线数',
value: this.data.onLine,
value: this.data.onlineCount,
lineStyle: {
normal: {
color: '#2B81B1'
@@ -117,7 +117,7 @@ export default {
},
{
name: '离线数',
value: this.data.total - this.data.onLine,
value: this.data.totalCount - this.data.onlineCount,
lineStyle: {
normal: {
color: '#dbebf7'
neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
+5 -5
View File
@@ -24,8 +24,8 @@ export default {
type: Object,
default: () => {
return {
onLine: 90, // 进度条最大值
total: 100 // 当前进度
onlineCount: 0, // 进度条最大值
totalCount: 0 // 当前进度
}
}
}
@@ -52,7 +52,7 @@ export default {
const option = {
title: {
text: '端口映射统计',
subtext: '在线数：' + this.data.onLine + '\n\n' + '离线数：' + (this.data.total - this.data.onLine),
subtext: '在线数：' + this.data.onlineCount + '\n\n' + '离线数：' + (this.data.totalCount - this.data.onlineCount),
textStyle: {
fontSize: 18,
fontWeight: 800,
@@ -92,7 +92,7 @@ export default {
// value当前进度 + 颜色
{
name: '在线数',
value: this.data.onLine,
value: this.data.onlineCount,
lineStyle: {
normal: {
color: '#2B81B1'
@@ -106,7 +106,7 @@ export default {
},
{
name: '离线数',
value: this.data.total - this.data.onLine,
value: this.data.totalCount - this.data.onlineCount,
lineStyle: {
normal: {
color: '#dbebf7'
neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
+23 -6
View File
@@ -5,6 +5,8 @@
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { getSizeDescByByteCount } from '@/utils/utils'
let that = null
export default {
props: {
@@ -32,10 +34,11 @@ export default {
data() {
return {
chartDom: null,
colorList: ['#2B81B1', '#75ddfa', '#53a7e3', '#029fe8', '#015dae']
colorList: ['#1f92ce', '#7594fa', '#faa875']
}
},
mounted() {
that = this
this.initChart()
},
beforeDestroy() {
@@ -51,7 +54,7 @@ export default {
this.myChart = echarts.init(this.chartDom)
const seriesList = []
const legendList = []
this.data.list.forEach((item, index) => {
this.data.list && this.data.list.forEach((item, index) => {
seriesList.push({
name: item.name,
type: 'line',
@@ -71,17 +74,26 @@ export default {
normal: {
color: this.colorList[index]
}
}
},
smooth: true
})
legendList.push(item.name)
})
const option = {
title: {
text: this.data.text + '折线图',
text: this.data.text,
subtext: this.data.subtext || ''
},
tooltip: {
trigger: 'axis'
trigger: 'axis',
formatter: function(value) {
let title = that.data.text + '<br/>'
value.forEach(item => {
title = title + item.marker + item.seriesName + ' : ' + that.data.list[item.seriesIndex].label[item.dataIndex] + '<br/>'
})
return title
}
},
legend: {
data: legendList,
@@ -99,7 +111,12 @@ export default {
data: this.data.title
},
yAxis: {
type: 'value'
type: 'value',
axisLabel: {
formatter: function(value) {
return getSizeDescByByteCount(value)
}
}
},
series: seriesList
}
neutrino-proxy-admin/src/views/home/admin/index.vue
+65 -73
View File
@@ -1,40 +1,32 @@
<template>
<div class="dashboard-editor">
<div class="log-div">
</div>
<div class="container">
<el-row class="line-chart" :gutter="16">
<el-col :span="12">
<el-card>
<traffic-sum-chart :data="echartsData.trafficSumChart" :chartId="'traffic-sum-div1'"/>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<traffic-sum-chart :data="echartsData.trafficSumChart2"/>
</el-card>
</el-col>
</el-row>
<el-row class="pie-chart" :gutter="16">
<el-col :span="6">
<el-card class="box-card">
<license-chart :data="echartsData.licenseChart"/>
<license-chart :data="licenseChart" v-if="licenseChart"/>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="box-card">
<port-mapping-chart :data="echartsData.portMappingChart"/>
<port-mapping-chart :data="portMappingChart" v-if="portMappingChart"/>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="box-card">
<daily-traffic-chart :data="echartsData.dailyTrafficChart" :chartId="'daily-traffic-div'"/>
<daily-traffic-chart :data="dailyTrafficChart" :chartId="'daily-traffic-div'" v-if="dailyTrafficChart"/>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="box-card">
<daily-traffic-chart :data="echartsData.historyTrafficChart" :chartId="'history-traffic-div'"/>
<daily-traffic-chart :data="historyTrafficChart" :chartId="'history-traffic-div'" v-if="historyTrafficChart"/>
</el-card>
</el-col>
</el-row>
<el-row class="line-chart" :gutter="16">
<el-col :span="24">
<el-card>
<traffic-sum-chart :data="trafficSumChart" :chartId="'traffic-sum-div1'" v-if="trafficSumChart"/>
</el-card>
</el-col>
</el-row>
@@ -48,69 +40,69 @@ import LicenseChart from './components/LicenseChart'
import PortMappingChart from './components/PortMappingChart'
import DailyTrafficChart from './components/DailyTrafficChart'
import TrafficSumChart from './components/TrafficSumChart'
const echartsData = {
licenseChart: {
total: 100,
onLine: 80
},
portMappingChart: {
total: 100,
onLine: 25
},
dailyTrafficChart: {
upload: 300,
download: 680,
text: '今日流量'
},
historyTrafficChart: {
upload: 4100,
download: 9520,
text: '历史流量'
},
trafficSumChart: {
text: '今日流量',
subtext: '当日0-24时',
title: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00'],
list: [
{
name: '上行',
value: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '下行',
value: [112, 333, 150, 60, 99, 50, 102]
}
]
},
trafficSumChart2: {
text: '历史流量',
title: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
list: [
{
name: '上行',
value: [132, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210, 120]
},
{
name: '下行',
value: [111, 0, 50, 101, 134, 90, 230, 120, 132, 101, 60, 20]
}
]
}
}
import { homeData } from '@/api/report'
export default {
name: 'dashboard-admin',
components: { TrafficSumChart, DailyTrafficChart, PortMappingChart, LicenseChart },
data() {
return {
echartsData: echartsData
licenseChart: undefined,
portMappingChart: undefined,
dailyTrafficChart: undefined,
historyTrafficChart: undefined,
trafficSumChart: undefined
}
},
created() {
this.getHomeData()
},
mounted() {
},
methods: {
getHomeData() {
homeData().then(res => {
this.licenseChart = res.data.data.license
this.portMappingChart = res.data.data.portMapping
this.dailyTrafficChart = Object.assign(res.data.data.todayFlow, { text: '今日流量' })
this.historyTrafficChart = Object.assign(res.data.data.totalFlow, { text: '流量汇总' })
this.trafficSumChart = this.getChartData(res.data.data.last7dFlow)
})
},
getChartData(last7dFlow) {
const title = []
const downFlowDesc = []
const totalFlowDesc = []
const upFlowDesc = []
last7dFlow.dataList.forEach(item => {
title.push(item.dateStr)
totalFlowDesc.push(item.totalFlowDesc)
downFlowDesc.push(item.downFlowDesc)
upFlowDesc.push(item.upFlowDesc)
})
const list = []
last7dFlow.seriesList.forEach(item => {
let label = []
if (item.seriesName.indexOf('上') > -1) {
label = upFlowDesc
} else if (item.seriesName.indexOf('下') > -1) {
label = downFlowDesc
} else if (item.seriesName.indexOf('总') > -1) {
label = totalFlowDesc
}
list.push({
name: item.seriesName,
value: item.seriesData,
label: label
})
})
return {
text: '流量监控',
subtext: `最近${last7dFlow.dataList.length || 0}天流量监控`,
title: title,
list: list
}
}
}
}
</script>
@@ -127,9 +119,9 @@ export default {
flex: 0 0 auto;
}
.pie-chart{
padding-top: 16px;
padding-bottom: 16px;
.el-card{
min-height: 300px;
min-height: 250px;
}
}
}