TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-11-11 01:50:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

数据看板使用字节代替比特

Browse Source
This commit is contained in:
GoEdgeLab
2021-07-11 11:09:41 +08:00
parent 8d1965d997
commit ae96474efa
4 changed files with 42 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
internal/web/actions/default/dashboard/index.go
View File

@@ -6,7 +6,6 @@ import (
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
"github.com/iwind/TeaGo/maps"
"math"
"regexp"
)
@@ -58,7 +57,7 @@ func (this *IndexAction) RunGet(params struct{}) {
if len(resp.DailyTrafficStats) > 0 {
todayTrafficBytes = resp.DailyTrafficStats[len(resp.DailyTrafficStats)-1].Bytes
}
todayTrafficString := numberutils.FormatBits(todayTrafficBytes * 8)
todayTrafficString := numberutils.FormatBytes(todayTrafficBytes)
result := regexp.MustCompile(`^(?U)(.+)([a-zA-Z]+)$`).FindStringSubmatch(todayTrafficString)
if len(result) > 2 {
this.Data["todayTraffic"] = result[1]
@@ -73,7 +72,7 @@ func (this *IndexAction) RunGet(params struct{}) {
statMaps := []maps.Map{}
for _, stat := range resp.HourlyTrafficStats {
statMaps = append(statMaps, maps.Map{
"count": math.Ceil((float64(stat.Bytes)*8/1000/1000/1000)*1000) / 1000,
"bytes": stat.Bytes,
"hour": stat.Hour[8:],
})
}
@@ -85,7 +84,7 @@ func (this *IndexAction) RunGet(params struct{}) {
statMaps := []maps.Map{}
for _, stat := range resp.DailyTrafficStats {
statMaps = append(statMaps, maps.Map{
"count": math.Ceil((float64(stat.Bytes)*8/1000/1000/1000)*1000) / 1000,
"bytes": stat.Bytes,
"day": stat.Day[4:6] + "月" + stat.Day[6:] + "日",
})
}

10
web/public/js/utils.js
View File

@@ -118,18 +118,18 @@ window.teaweb = {
return bytes + "B";
}
if (bytes < 1024 * 1024) {
return (Math.ceil(bytes * 100 / 1024) / 100) + "K";
return (Math.round(bytes * 100 / 1024) / 100) + "K";
}
if (bytes < 1024 * 1024 * 1024) {
return (Math.ceil(bytes * 100 / 1024 / 1024) / 100) + "M";
return (Math.round(bytes * 100 / 1024 / 1024) / 100) + "M";
}
if (bytes < 1024 * 1024 * 1024 * 1024) {
return (Math.ceil(bytes * 100 / 1024 / 1024 / 1024) / 100) + "G";
return (Math.round(bytes * 100 / 1024 / 1024 / 1024) / 100) + "G";
}
if (bytes < 1024 * 1024 * 1024 * 1024 * 1024) {
return (Math.ceil(bytes * 100 / 1024 / 1024 / 1024 / 1024) / 100) + "T";
return (Math.round(bytes * 100 / 1024 / 1024 / 1024 / 1024) / 100) + "T";
}
return (Math.ceil(bytes * 100 / 1024 / 1024 / 1024 / 1024 / 1024) / 100) + "P";
return (Math.round(bytes * 100 / 1024 / 1024 / 1024 / 1024 / 1024) / 100) + "P";
},
formatNumber: function (x) {
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ", ");

4
web/views/@default/dashboard/index.html
View File

@@ -45,8 +45,8 @@
<div class="ui divider"></div>
<div class="ui menu tabular">
<a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势（GBps）</a>
<a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势（GBps）</a>
<a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
<a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
</div>
<!-- 按小时统计 -->

38
web/views/@default/dashboard/index.js
View File

@@ -35,19 +35,32 @@ Tea.context(function () {
}
this.reloadHourlyTrafficChart = function () {
let axis = teaweb.bytesAxis(this.hourlyTrafficStats, function (v) {
return v.bytes
})
let chartBox = document.getElementById("hourly-traffic-chart-box")
let chart = echarts.init(chartBox)
let that = this
let option = {
xAxis: {
data: this.hourlyTrafficStats.map(function (v) {
return v.hour;
})
},
yAxis: {},
yAxis: {
axisLabel: {
formatter: function (v) {
return v + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: "{c} GB"
formatter: function (args) {
let index = args.dataIndex
return that.hourlyTrafficStats[index].hour + "时：" + teaweb.formatBytes(that.hourlyTrafficStats[index].bytes)
}
},
grid: {
left: 40,
@@ -59,7 +72,7 @@ Tea.context(function () {
name: "流量",
type: "line",
data: this.hourlyTrafficStats.map(function (v) {
return v.count;
return v.bytes / axis.divider;
}),
itemStyle: {
color: "#9DD3E8"
@@ -85,19 +98,32 @@ Tea.context(function () {
}
this.reloadDailyTrafficChart = function () {
let axis = teaweb.bytesAxis(this.dailyTrafficStats, function (v) {
return v.bytes
})
let chartBox = document.getElementById("daily-traffic-chart-box")
let chart = echarts.init(chartBox)
let that = this
let option = {
xAxis: {
data: this.dailyTrafficStats.map(function (v) {
return v.day;
})
},
yAxis: {},
yAxis: {
axisLabel: {
formatter: function (v) {
return v + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: "{c} GB"
formatter: function (args) {
let index = args.dataIndex
return that.dailyTrafficStats[index].day + "：" + teaweb.formatBytes(that.dailyTrafficStats[index].bytes)
}
},
grid: {
left: 40,
@@ -109,7 +135,7 @@ Tea.context(function () {
name: "流量",
type: "line",
data: this.dailyTrafficStats.map(function (v) {
return v.count;
return v.bytes / axis.divider;
}),
itemStyle: {
color: "#9DD3E8"