实现数据看板--用户

2025-11-20 16:20:27 +08:00 · 2021-07-11 18:05:49 +08:00
parent ae96474efa
commit 5b29587864
27 changed files with 1118 additions and 1 deletions
--- a/web/views/@default/dashboard/boards/user.js
+++ b/web/views/@default/dashboard/boards/user.js
@@ -0,0 +1,154 @@
+Tea.context(function () {
+	this.$delay(function () {
+		this.reloadDailyStats()
+		this.reloadCPUChart()
+		this.reloadTopTrafficChart()
+	})
+
+	this.reloadDailyStats = function () {
+		let axis = teaweb.countAxis(this.dailyStats, function (v) {
+			return v.count
+		})
+		let max = axis.max
+		if (max < 10) {
+			max = 10
+		} else if (max < 100) {
+			max = 100
+		}
+		teaweb.renderLineChart({
+			id: "daily-stat-chart",
+			name: "用户",
+			values: this.dailyStats,
+			x: function (v) {
+				return v.day.substring(4, 6) + "-" + v.day.substring(6)
+			},
+			tooltip: function (args, stats) {
+				let index = args.dataIndex
+				return stats[index].day.substring(4, 6) + "-" + stats[index].day.substring(6) + "：" + stats[index].count
+			},
+			value: function (v) {
+				return v.count;
+			},
+			axis: axis,
+			max: max
+		})
+	}
+
+	/**
+	 * 系统信息
+	 */
+	this.nodeStatusTab = "cpu"
+
+	this.selectNodeStatusTab = function (tab) {
+		this.nodeStatusTab = tab
+		this.$delay(function () {
+			switch (tab) {
+				case "cpu":
+					this.reloadCPUChart()
+					break
+				case "memory":
+					this.reloadMemoryChart()
+					break
+				case "load":
+					this.reloadLoadChart()
+					break
+			}
+		})
+	}
+
+	this.reloadCPUChart = function () {
+		let axis = {unit: "%", divider: 1}
+		teaweb.renderLineChart({
+			id: "cpu-chart",
+			name: "CPU",
+			values: this.cpuValues,
+			x: function (v) {
+				return v.time
+			},
+			tooltip: function (args, stats) {
+				return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
+			},
+			value: function (v) {
+				return v.value * 100;
+			},
+			axis: axis,
+			max: 100
+		})
+	}
+
+	this.reloadMemoryChart = function () {
+		let axis = {unit: "%", divider: 1}
+		teaweb.renderLineChart({
+			id: "memory-chart",
+			name: "内存",
+			values: this.memoryValues,
+			x: function (v) {
+				return v.time
+			},
+			tooltip: function (args, stats) {
+				return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
+			},
+			value: function (v) {
+				return v.value * 100;
+			},
+			axis: axis,
+			max: 100
+		})
+	}
+
+	this.reloadLoadChart = function () {
+		let axis = {unit: "", divider: 1}
+		let max = this.loadValues.$map(function (k, v) {
+			return v.value
+		}).$max()
+		if (max < 10) {
+			max = 10
+		} else if (max < 20) {
+			max = 20
+		} else if (max < 100) {
+			max = 100
+		} else {
+			max = null
+		}
+		teaweb.renderLineChart({
+			id: "load-chart",
+			name: "负载",
+			values: this.loadValues,
+			x: function (v) {
+				return v.time
+			},
+			tooltip: function (args, stats) {
+				return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100) / 100)
+			},
+			value: function (v) {
+				return v.value;
+			},
+			axis: axis,
+			max: max
+		})
+	}
+
+	// 流量排行
+	this.reloadTopTrafficChart = function () {
+		let that = this
+		let axis = teaweb.bytesAxis(this.topTrafficStats, function (v) {
+			return v.bytes
+		})
+		teaweb.renderBarChart({
+			id: "top-traffic-chart",
+			name: "流量",
+			values: this.topTrafficStats,
+			x: function (v) {
+				return v.userName
+			},
+			tooltip: function (args, stats) {
+				let index = args.dataIndex
+				return stats[index].userName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[index].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[index].bytes)
+			},
+			value: function (v) {
+				return v.bytes / axis.divider;
+			},
+			axis: axis
+		})
+	}
+})