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

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) {