From ae96474efa0e62f8cc82c333474864c312accfb0 Mon Sep 17 00:00:00 2001 From: GoEdgeLab Date: Sun, 11 Jul 2021 11:09:41 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9C=8B=E6=9D=BF=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E5=AD=97=E8=8A=82=E4=BB=A3=E6=9B=BF=E6=AF=94=E7=89=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/actions/default/dashboard/index.go | 7 ++-- web/public/js/utils.js | 10 ++--- web/views/@default/dashboard/index.html | 4 +- web/views/@default/dashboard/index.js | 38 ++++++++++++++++--- 4 files changed, 42 insertions(+), 17 deletions(-) diff --git a/internal/web/actions/default/dashboard/index.go b/internal/web/actions/default/dashboard/index.go index b664a7ee..345082ed 100644 --- a/internal/web/actions/default/dashboard/index.go +++ b/internal/web/actions/default/dashboard/index.go @@ -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:] + "日", }) } diff --git a/web/public/js/utils.js b/web/public/js/utils.js index c33fa1b5..30990069 100644 --- a/web/public/js/utils.js +++ b/web/public/js/utils.js @@ -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(?
- 24小时流量趋势（GBps） - 15天流量趋势（GBps） + 24小时流量趋势 + 15天流量趋势
diff --git a/web/views/@default/dashboard/index.js b/web/views/@default/dashboard/index.js index fd3e5675..55458208 100644 --- a/web/views/@default/dashboard/index.js +++ b/web/views/@default/dashboard/index.js @@ -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"