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-02-12 18:06:34 +08:00
parent 235541364e
commit 2b9c942b5b
6 changed files with 151 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
+12 -9
View File
@@ -1,5 +1,5 @@
<template>
<div :class="className" :id="dailyTrafficChart.isHistory ? 'history-traffic-div' : 'daily-traffic-div'" :style="{height:height,width:width}"></div>
<div :class="className" :id="chartId" :style="{height:height,width:width}"></div>
</template>
<script>
@@ -8,6 +8,10 @@ require('echarts/theme/macarons') // echarts theme
export default {
props: {
chartId: {
type: String,
default: 'daily-traffic-div'
},
className: {
type: String,
default: 'chart'
@@ -20,13 +24,13 @@ export default {
type: String,
default: '160px'
},
dailyTrafficChart: {
data: {
type: Object,
default: () => {
return {
upload: 90, // 上行
download: 100, // 下行
isHistory: false
text: '今日流量'
}
}
}
@@ -48,12 +52,11 @@ export default {
},
methods: {
initChart() {
const isHistory = this.dailyTrafficChart.isHistory
this.chartDom = document.getElementById(isHistory ? 'history-traffic-div' : 'daily-traffic-div')
this.chartDom = document.getElementById(this.chartId)
this.myChart = echarts.init(this.chartDom)
const option = {
title: {
text: isHistory ? '历史流量' : '今日流量',
text: this.data.text,
left: 'center',
bottom: '0',
textStyle: {
@@ -71,7 +74,7 @@ export default {
},
series: [
{
name: isHistory ? '历史流量' : '今日流量',
name: this.data.text,
type: 'pie',
radius: '68%',
// 隐藏指示线
@@ -93,11 +96,11 @@ export default {
},
data: [
{
value: this.dailyTrafficChart.upload,
value: this.data.upload,
name: '上行'
},
{
value: this.dailyTrafficChart.download,
value: this.data.download,
name: '下行'
}
],
neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
+4 -4
View File
@@ -20,7 +20,7 @@ export default {
type: String,
default: '160px'
},
licenseChart: {
data: {
type: Object,
default: () => {
return {
@@ -51,7 +51,7 @@ export default {
this.myChart = echarts.init(this.chartDom)
const option = {
title: {
text: this.licenseChart.onLine,
text: this.data.onLine,
subtext: 'License在线数',
left: 'center',
top: '32%',
@@ -94,11 +94,11 @@ export default {
// value当前进度 + 颜色
{
name: '在线数',
value: this.licenseChart.onLine
value: this.data.onLine
},
{
name: '离线数',
value: this.licenseChart.total - this.licenseChart.onLine
value: this.data.total - this.data.onLine
}
]
}
neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
+4 -4
View File
@@ -20,7 +20,7 @@ export default {
type: String,
default: '160px'
},
portMappingChart: {
data: {
type: Object,
default: () => {
return {
@@ -51,7 +51,7 @@ export default {
this.myChart = echarts.init(this.chartDom)
const option = {
title: {
text: this.portMappingChart.onLine,
text: this.data.onLine,
subtext: '端口映射在线数',
left: 'center',
top: '32%',
@@ -94,11 +94,11 @@ export default {
// value当前进度 + 颜色
{
name: '在线数',
value: this.portMappingChart.onLine
value: this.data.onLine
},
{
name: '离线数',
value: this.portMappingChart.total - this.portMappingChart.onLine
value: this.data.total - this.data.onLine
}
]
}
neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
+43 -30
View File
@@ -1,5 +1,5 @@
<template>
<div :class="className" id="traffic-sum-div" :style="{height:height,width:width}"></div>
<div :class="className" :id="chartId" :style="{height:height,width:width}"></div>
</template>
<script>
@@ -8,6 +8,14 @@ require('echarts/theme/macarons') // echarts theme
export default {
props: {
chartId: {
type: String,
default: 'traffic-sum-div'
},
data: {
type: Object,
default: {}
},
className: {
type: String,
default: 'chart'
@@ -19,20 +27,12 @@ export default {
height: {
type: String,
default: '380px'
},
licenseChart: {
type: Object,
default: () => {
return {
onLine: 90, // 进度条最大值
total: 100 // 当前进度
}
}
}
},
data() {
return {
chartDom: null
chartDom: null,
colorList: ['#75ddfa', '#2B81B1', '#53a7e3', '#029fe8', '#015dae']
}
},
mounted() {
@@ -47,18 +47,44 @@ export default {
},
methods: {
initChart() {
this.chartDom = document.getElementById('traffic-sum-div')
this.chartDom = document.getElementById(this.chartId)
this.myChart = echarts.init(this.chartDom)
const seriesList = []
const legendList = []
this.data.list.forEach((item, index) => {
seriesList.push({
name: item.name,
type: 'line',
stack: 'Total',
data: item.value,
areaStyle: {
normal: {
color: this.colorList[index] + '7f'
}
},
lineStyle: {
normal: {
color: this.colorList[index]
}
},
itemStyle: {
normal: {
color: this.colorList[index]
}
}
})
legendList.push(item.name)
})
const option = {
title: {
text: '今日流量折线图',
subtext: '当日0-24时'
text: this.data.text + '折线图',
subtext: this.data.subtext || ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['上行', '下行'],
data: legendList,
left: 'right'
},
grid: {
@@ -70,25 +96,12 @@ export default {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00']
data: this.data.title
},
yAxis: {
type: 'value'
},
series: [
{
name: '上行',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '下行',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
series: seriesList
}
option && this.myChart.setOption(option)
}
neutrino-proxy-admin/src/views/home/admin/index.vue
+84 -56
View File
@@ -1,45 +1,44 @@
<template>
<div class="dashboard-editor-container">
<el-row :gutter="8">
<el-col :span="12">
<el-card class="box-card">
<el-row>
<el-col :span="24">
<el-row>
<el-col :span="12">
<license-chart :licenseChart="echartsData.licenseChart"/>
</el-col>
<el-col :span="12">
<port-mapping-chart :portMappingChart="echartsData.portMappingChart"/>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<daily-traffic-chart :dailyTrafficChart="echartsData.dailyTrafficChart"/>
</el-col>
<el-col :span="12">
<daily-traffic-chart :dailyTrafficChart="echartsData.historyTrafficChart"/>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<el-col :span="24">
<table-chart :tableChart="echartsData.tableChart"/>
</el-col>
</el-card>
</el-col>
</el-row>
<el-row class="line-chart">
<el-col :span="24">
<el-card>
<traffic-sum-chart/>
</el-card>
</el-col>
</el-row>
<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"/>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="box-card">
<port-mapping-chart :data="echartsData.portMappingChart"/>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="box-card">
<daily-traffic-chart :data="echartsData.dailyTrafficChart" :chartId="'daily-traffic-div'"/>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="box-card">
<daily-traffic-chart :data="echartsData.historyTrafficChart" :chartId="'history-traffic-div'"/>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
@@ -48,7 +47,6 @@
import LicenseChart from './components/LicenseChart'
import PortMappingChart from './components/PortMappingChart'
import DailyTrafficChart from './components/DailyTrafficChart'
import TableChart from './components/TableChart'
import TrafficSumChart from './components/TrafficSumChart'
const echartsData = {
@@ -63,25 +61,47 @@ const echartsData = {
dailyTrafficChart: {
upload: 300,
download: 680,
isHistory: false
text: '今日流量'
},
historyTrafficChart: {
upload: 4100,
download: 9520,
isHistory: true
text: '历史流量'
},
tableChart: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' },
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }
]
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]
}
]
}
}
export default {
name: 'dashboard-admin',
components: { TrafficSumChart, TableChart, DailyTrafficChart, PortMappingChart, LicenseChart },
components: { TrafficSumChart, DailyTrafficChart, PortMappingChart, LicenseChart },
data() {
return {
echartsData: echartsData
@@ -96,12 +116,20 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
.dashboard-editor{
min-height: calc(100vh - 85px);
padding: 16px;
background-color: rgb(240, 242, 245);
.line-chart {
margin-top: 16px;
background-color: #f5f7fa;
.container {
display: flex;
flex-direction: column;
.line-chart, .pie-chart{
flex: 0 0 auto;
}
.pie-chart{
padding-top: 16px;
}
}
}
</style>
neutrino-proxy-admin/src/views/home/index.vue
+4 -3
View File
@@ -23,9 +23,10 @@ export default {
])
},
created() {
if (!this.roles.includes('admin')) {
this.currentRole = 'editorDashboard'
}
// 游客首页
// if (!this.roles.includes('admin')) {
// this.currentRole = 'editorDashboard'
// }
}
}
</script>