服务列表页带宽使用比特代替字节

internal/utils/numberutils/utils.go

@@ -42,6 +42,24 @@ func FormatBytes(bytes int64) string {
 	}
 }
 
+func FormatBits(bits int64) string {
+	if bits < Pow1024(1) {
+		return FormatInt64(bits) + "Bps"
+	} else if bits < Pow1024(2) {
+		return fmt.Sprintf("%.4fKBps", float64(bits)/float64(Pow1024(1)))
+	} else if bits < Pow1024(3) {
+		return fmt.Sprintf("%.4fMBps", float64(bits)/float64(Pow1024(2)))
+	} else if bits < Pow1024(4) {
+		return fmt.Sprintf("%.4fGBps", float64(bits)/float64(Pow1024(3)))
+	} else if bits < Pow1024(5) {
+		return fmt.Sprintf("%.4fTBps", float64(bits)/float64(Pow1024(4)))
+	} else if bits < Pow1024(6) {
+		return fmt.Sprintf("%.4fPBps", float64(bits)/float64(Pow1024(5)))
+	} else {
+		return fmt.Sprintf("%.4fEBps", float64(bits)/float64(Pow1024(6)))
+	}
+}
+
 func FormatCount(count int64) string {
 	if count < 1000 {
 		return types.String(count)

internal/web/actions/default/servers/index.go

@@ -3,7 +3,6 @@ package servers
 import (
 	"encoding/json"
 	"github.com/TeaOSLab/EdgeAdmin/internal/configloaders"
-	"github.com/TeaOSLab/EdgeAdmin/internal/utils/numberutils"
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/configutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/nodeconfigs"
@@ -225,9 +224,9 @@ func (this *IndexAction) RunGet(params struct {
 		}
 
 		// 统计数据
-		var bandwidth = ""
+		var bandwidthBits int64 = 0
 		if server.BandwidthBytes > 0 {
-			bandwidth = numberutils.FormatBytes(server.BandwidthBytes)
+			bandwidthBits = server.BandwidthBytes * 8
 		}
 
 		serverMaps = append(serverMaps, maps.Map{
@@ -247,7 +246,7 @@ func (this *IndexAction) RunGet(params struct {
 			"auditingIsOk":     auditingIsOk,
 			"user":             userMap,
 			"auditingTime":     auditingTime,
-			"bandwidth":        bandwidth,
+			"bandwidthBits":    bandwidthBits,
 		})
 	}
 	this.Data["servers"] = serverMaps

web/public/js/components/common/bits-var.js

@@ -0,0 +1,16 @@
+Vue.component("bits-var", {
+	props: ["v-bits"],
+	data: function () {
+		let bits = this.vBits
+		if (typeof bits != "number") {
+			bits = 0
+		}
+		let format = teaweb.splitFormat(teaweb.formatBits(bits))
+		return {
+			format: format
+		}
+	},
+	template:`<var class="normal">
+	<span>{{format[0]}}</span>{{format[1]}}
+</var>`
+})

web/public/js/components/common/bytes-var.js

@@ -0,0 +1,16 @@
+Vue.component("bytes-var", {
+	props: ["v-bytes"],
+	data: function () {
+		let bytes = this.vBytes
+		if (typeof bytes != "number") {
+			bytes = 0
+		}
+		let format = teaweb.splitFormat(teaweb.formatBytes(bytes))
+		return {
+			format: format
+		}
+	},
+	template:`<var class="normal">
+	<span>{{format[0]}}</span>{{format[1]}}
+</var>`
+})

web/public/js/components/common/datepicker.js

@@ -1,5 +1,5 @@
 Vue.component("datepicker", {
-	props: ["v-name", "v-value", "v-bottom-left"],
+	props: ["value", "v-name", "name", "v-value", "v-bottom-left", "placeholder"],
 	mounted: function () {
 		let that = this
 		teaweb.datepicker(this.$refs.dayInput, function (v) {
@@ -9,26 +9,44 @@ Vue.component("datepicker", {
 	},
 	data: function () {
 		let name = this.vName
+		if (name == null) {
+			name = this.name
+		}
 		if (name == null) {
 			name = "day"
 		}
 
 		let day = this.vValue
 		if (day == null) {
-			day = ""
+			day = this.value
+			if (day == null) {
+				day = ""
+			}
+		}
+
+		let placeholder = "YYYY-MM-DD"
+		if (this.placeholder != null) {
+			placeholder = this.placeholder
 		}
 
 		return {
-			name: name,
+			realName: name,
+			realPlaceholder: placeholder,
 			day: day
 		}
 	},
+	watch: {
+		value: function (v) {
+			this.day = v
+		}
+	},
 	methods: {
 		change: function () {
+			this.$emit("input", this.day) // support v-model，事件触发需要在 change 之前
 			this.$emit("change", this.day)
 		}
 	},
 	template: `<div style="display: inline-block">
-	<input type="text" :name="name" v-model="day" placeholder="YYYY-MM-DD" style="width:8.6em" maxlength="10" @input="change" ref="dayInput" autocomplete="off"/>
+	<input type="text" :name="realName" v-model="day" :placeholder="realPlaceholder" style="width:8.6em" maxlength="10" @input="change" ref="dayInput" autocomplete="off"/>
 </div>`
 })

web/public/js/utils.js

@@ -113,7 +113,6 @@ window.teaweb = {
 			reposition: !bottomLeft
 		})
 	},
-
 	formatBytes: function (bytes) {
 		bytes = Math.ceil(bytes);
 		if (bytes < Math.pow(1024, 1)) {
@@ -136,6 +135,28 @@ window.teaweb = {
 		}
 		return (Math.round(bytes * 100 / Math.pow(1024, 6)) / 100) + "EB";
 	},
+	formatBits: function (bits) {
+		bits = Math.ceil(bits);
+		if (bits < Math.pow(1024, 1)) {
+			return bits + "Bps";
+		}
+		if (bits < Math.pow(1024, 2)) {
+			return (Math.round(bits * 10000 / Math.pow(1024, 1)) / 10000) + "Kbps";
+		}
+		if (bits < Math.pow(1024, 3)) {
+			return (Math.round(bits * 10000 / Math.pow(1024, 2)) / 10000) + "Mbps";
+		}
+		if (bits < Math.pow(1024, 4)) {
+			return (Math.round(bits * 10000 / Math.pow(1024, 3)) / 10000) + "Gbps";
+		}
+		if (bits < Math.pow(1024, 5)) {
+			return (Math.round(bits * 10000 / Math.pow(1024, 4)) / 10000) + "Tbps";
+		}
+		if (bits < Math.pow(1024, 6)) {
+			return (Math.round(bits * 10000 / Math.pow(1024, 5)) / 10000) + "Pbps";
+		}
+		return (Math.round(bits * 10000 / Math.pow(1024, 6)) / 10000) + "Ebps";
+	},
 	formatNumber: function (x) {
 		if (x == null) {
 			return "null"
@@ -205,6 +226,19 @@ window.teaweb = {
 			divider: divider
 		}
 	},
+	bitsAxis: function (stats, countFunc) {
+		let axis = this.bytesAxis(stats, countFunc)
+		let unit = axis.unit
+		if (unit == "B") {
+			unit = "Bps"
+		} else {
+			unit += "bps"
+		}
+		return {
+			unit: unit,
+			divider: axis.divider
+		}
+	},
 	countAxis: function (stats, countFunc) {
 		let max = Math.max.apply(this, stats.map(countFunc))
 		let divider = 1
@@ -559,12 +593,22 @@ window.teaweb = {
 		let max = options.max
 		let interval = options.interval
 
+		let left = options.left
+		if (typeof left != "number") {
+			left = 0
+		}
+
+		let right = options.right
+		if (typeof right != "number") {
+			right = 0
+		}
+
 		let chartBox = document.getElementById(chartId)
 		if (chartBox == null) {
 			console.error("chart id '" + chartId + "' not found")
 			return
 		}
-		let chart = this.initChart(chartBox)
+		let chart = this.initChart(chartBox, options.cache)
 		let option = {
 			xAxis: {
 				data: values.map(xFunc),
@@ -591,9 +635,9 @@ window.teaweb = {
 				}
 			},
 			grid: {
-				left: 40,
+				left: 40 + left,
 				top: 10,
-				right: 20,
+				right: 20 + right,
 				bottom: 20
 			},
 			series: [
@@ -605,7 +649,8 @@ window.teaweb = {
 						color: this.DefaultChartColor
 					},
 					areaStyle: {},
-					smooth: true
+					smooth: true,
+					markLine: options.markLine
 				}
 			],
 			animation: true,
@@ -893,7 +938,11 @@ window.teaweb = {
 		return [40, -20]
 	},
 	chartMap: {}, // dom id => chart
-	initChart: function (dom) {
+	initChart: function (dom, cache) {
+		if (typeof(cache) != "boolean") {
+			cache = true
+		}
+
 		let domId = dom.getAttribute("id")
 		if (domId != null && domId.length > 0 && typeof (this.chartMap[domId]) == "object") {
 			return this.chartMap[domId]
@@ -902,7 +951,9 @@ window.teaweb = {
 		window.addEventListener("resize", function () {
 			instance.resize()
 		})
-		this.chartMap[domId] = instance
+		if (cache) {
+			this.chartMap[domId] = instance
+		}
 		return instance
 	},
 	encodeHTML: function (s) {

web/views/@default/@layout.css

@@ -731,6 +731,9 @@ var.olive {
 var.dash {
   border-bottom: 1px dashed grey;
 }
+var.normal {
+  font-style: normal;
+}
 /** checkbox **/
 .checkbox label a,
 .checkbox label {

web/views/@default/@layout.less

@@ -752,6 +752,10 @@ var.dash {
 	border-bottom: 1px dashed grey;
 }
 
+var.normal {
+	font-style: normal;
+}
+
 /** checkbox **/
 .checkbox label a, .checkbox label {
 	font-size: 0.9em !important;

web/views/@default/servers/index.css

@@ -26,4 +26,10 @@
 .server-name-td:hover .icon.setting {
   display: inline;
 }
+.bandwidth-span var {
+  font-size: 0.8em;
+}
+.bandwidth-span var span {
+  font-size: 1.2em;
+}
 /*# sourceMappingURL=index.css.map */

web/views/@default/servers/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,MAAK;EACJ,kBAAA;EACA,UAAA;EACA,UAAA;;AAJF,GAAG,QAOF;EACC,kBAAA;;AAIF;EACC,gBAAA;EACA,gBAAA;;AAGD,cAAc;EACb,UAAA;;AAGD;EACC,kBAAA;;AADD,eAGC,MAAK;EACJ,aAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,gBAAA;;AAIF,eAAe,MACd,MAAK;EACJ,eAAA","file":"index.css"}
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,MAAK;EACJ,kBAAA;EACA,UAAA;EACA,UAAA;;AAJF,GAAG,QAOF;EACC,kBAAA;;AAIF;EACC,gBAAA;EACA,gBAAA;;AAGD,cAAc;EACb,UAAA;;AAGD;EACC,kBAAA;;AADD,eAGC,MAAK;EACJ,aAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,gBAAA;;AAIF,eAAe,MACd,MAAK;EACJ,eAAA;;AAIF,eACC;EACC,gBAAA;;AAFF,eACC,IAGC;EACC,gBAAA","file":"index.css"}

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

@@ -63,7 +63,7 @@
 			<th>部署集群</th>
 			<th>域名</th>
 			<th>端口</th>
-            <th class="center" style="width: 8em">下行带宽<tip-icon content="最近5分钟峰值带宽，每5分钟更新一次"></tip-icon><sort-arrow name="trafficOutOrder"></sort-arrow></th>
+            <th class="center" style="width: 8em">下行带宽<tip-icon content="最近5分钟峰值带宽，每5分钟更新一次，单位：比特"></tip-icon><sort-arrow name="trafficOutOrder"></sort-arrow></th>
 			<th class="two wide center">状态</th>
 			<th class="two op">操作</th>
 		</tr>
@@ -103,7 +103,7 @@
 			</div>
 		</td>
         <td class="center">
-            <span v-if="server.bandwidth.length > 0">{{server.bandwidth}}/s</span>
+            <span v-if="server.bandwidthBits > 0" class="bandwidth-span"><bits-var :v-bits="server.bandwidthBits"></bits-var></span>
             <span class="disabled" v-else>-</span>
         </td>
 		<td class="center">

web/views/@default/servers/index.less

@@ -35,4 +35,14 @@
 	.icon.setting {
 		display: inline;
 	}
-}
+}
+
+.bandwidth-span {
+	var {
+		font-size: 0.8em;
+
+		span {
+			font-size: 1.2em;
+		}
+	}
+}

web/views/@default/settings/user-ui/index.html

@@ -1,128 +0,0 @@
-{$layout}
-
-<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
-    <csrf-token></csrf-token>
-
-    <table class="ui table definition selectable">
-        <tr>
-            <td class="title">产品名称 *</td>
-            <td>
-                <input type="text" name="productName" v-model="config.productName" maxlength="100"/>
-            </td>
-        </tr>
-        <tr>
-            <td>用户系统名称 *</td>
-            <td>
-                <input type="text" name="userSystemName" v-model="config.userSystemName" maxlength="100"/>
-            </td>
-        </tr>
-        <tr>
-            <td>是否显示底部开源信息</td>
-            <td>
-                <checkbox name="showOpenSourceInfo" v-model="config.showOpenSourceInfo"></checkbox>
-            </td>
-        </tr>
-        <tr>
-            <td>是否显示版本号</td>
-            <td>
-                <checkbox name="showVersion" v-model="config.showVersion"></checkbox>
-            </td>
-        </tr>
-        <tr v-show="config.showVersion">
-            <td>定制版本号</td>
-            <td>
-                <input type="text" name="version" v-model="config.version" maxlength="100"/>
-                <p class="comment">定制自己的版本号，留空表示使用系统自带的版本号。</p>
-            </td>
-        </tr>
-        <tr>
-            <td>是否显示财务相关功能</td>
-            <td>
-                <checkbox name="showFinance" v-model="config.showFinance"></checkbox>
-            </td>
-        </tr>
-        <tr>
-            <td>浏览器图标</td>
-            <td>
-                <div v-if="config.faviconFileId > 0">
-                    <a :href="'/ui/image/' + config.faviconFileId" target="_blank"><img :src="'/ui/image/' + config.faviconFileId" style="width:32px;border:1px #ccc solid;"/></a>
-                </div>
-                <div v-else>
-                    <span class="disabled">还没有上传。</span>
-                </div>
-                <div style="margin-top: 0.8em">
-                    <input type="file" name="faviconFile" accept=".png"/>
-                </div>
-                <p class="comment">在浏览器标签栏显示的图标，请使用PNG格式。</p>
-            </td>
-        </tr>
-        <tr>
-            <td>Logo</td>
-            <td>
-                <div v-if="config.logoFileId > 0">
-                    <a :href="'/ui/image/' + config.logoFileId" target="_blank"><img :src="'/ui/image/' + config.logoFileId" style="width:32px;border:1px #ccc solid;"/></a>
-                </div>
-                <div v-else>
-                    <span class="disabled">还没有上传。</span>
-                </div>
-                <div style="margin-top: 0.8em">
-                    <input type="file" name="logoFile" accept=".png"/>
-                </div>
-                <p class="comment">显示在系统界面上的图标，请使用PNG格式。</p>
-            </td>
-        </tr>
-        <tr>
-            <td>注册设置</td>
-            <td>
-                <a href="/users/setting">修改用户注册相关设置 &raquo;</a>
-            </td>
-        </tr>
-    </table>
-
-    <h4>数据看板</h4>
-    <table class="ui table definition selectable">
-        <tr>
-            <td class="title">显示流量相关数据和图表</td>
-            <td><checkbox name="showTrafficCharts" v-model="config.showTrafficCharts"></checkbox></td>
-        </tr>
-        <tr>
-            <td class="title">显示带宽相关数据和图表</td>
-            <td><checkbox name="showBandwidthCharts" v-model="config.showBandwidthCharts"></checkbox></td>
-        </tr>
-        <tr>
-            <td class="title">带宽单位</td>
-            <td>
-                <select class="ui dropdown auto-width" name="bandwidthUnit" v-model="config.bandwidthUnit">
-                    <option value="bit">比特</option>
-                    <option value="byte">字节</option>
-                </select>
-            </td>
-        </tr>
-    </table>
-
-    <h4>其他</h4>
-    <table class="ui table definition selectable">
-        <tr>
-            <td class="title">时区</td>
-            <td>
-                <div class="ui fields inline">
-                    <div class="ui field">
-                        <select class="ui dropdown" v-model="timeZoneGroupCode">
-                            <option v-for="timeZoneGroup in timeZoneGroups" :value="timeZoneGroup.code">{{timeZoneGroup.name}}</option>
-                        </select>
-                    </div>
-                    <div class="ui field">
-                        <select class="ui dropdown" name="timeZone" v-model="config.timeZone">
-                            <option v-for="timeZoneLocation in timeZoneLocations" :value="timeZoneLocation.name" v-if="timeZoneLocation.group == timeZoneGroupCode">{{timeZoneLocation.name}} ({{timeZoneLocation.offset}})</option>
-                        </select>
-                    </div>
-                </div>
-                <p class="comment">显示时间使用的时区；如果你的API节点是独立部署的，需要手动重启API节点后生效。</p>
-            </td>
-        </tr>
-    </table>
-
-    <p class="comment">修改后，在3分钟内生效。</p>
-
-    <submit-btn></submit-btn>
-</form>

web/views/@default/settings/user-ui/index.js

@@ -1,36 +0,0 @@
-Tea.context(function () {
-	this.success = NotifyReloadSuccess("保存成功")
-
-	// 时区
-	this.timeZoneGroupCode = "asia"
-	if (this.timeZoneLocation != null) {
-		this.timeZoneGroupCode = this.timeZoneLocation.group
-	}
-
-	let oldTimeZoneGroupCode = this.timeZoneGroupCode
-	let oldTimeZoneName = ""
-	if (this.timeZoneLocation != null) {
-		oldTimeZoneName = this.timeZoneLocation.name
-	}
-
-	this.$delay(function () {
-		this.$watch("timeZoneGroupCode", function (groupCode) {
-			if (groupCode == oldTimeZoneGroupCode && oldTimeZoneName.length > 0) {
-				this.config.timeZone = oldTimeZoneName
-				return
-			}
-			let firstLocation = null
-			this.timeZoneLocations.forEach(function (v) {
-				if (firstLocation != null) {
-					return
-				}
-				if (v.group == groupCode) {
-					firstLocation = v
-				}
-			})
-			if (firstLocation != null) {
-				this.config.timeZone = firstLocation.name
-			}
-		})
-	})
-})