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

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:] + "日",
 			})
 		}

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(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ", ");

web/views/@default/dashboard/index.html

@@ -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 == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
-    <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势（GBps）</a>
+    <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
 </div>
 
 <!-- 按小时统计 -->

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"