1.4.5.2

EdgeAdmin/web/views/@default/servers/server/stat/@requests_menu.html

@@ -0,0 +1,6 @@
+<first-menu>
+    <menu-item :href="'/servers/server/stat?serverId=' + serverId" code="minutely">即时</menu-item>
+    <menu-item :href="'/servers/server/stat/hourlyRequests?serverId=' + serverId" code="hourly">按小时</menu-item>
+    <menu-item :href="'/servers/server/stat/dailyRequests?serverId=' + serverId" code="daily">按天</menu-item>
+</first-menu>
+<div class="margin"></div>

EdgeAdmin/web/views/@default/servers/server/stat/@stat_menu.html

@@ -0,0 +1,9 @@
+<first-menu>
+    <menu-item href="/servers">网站列表</menu-item>
+    <span class="item disabled">|</span>
+    <menu-item :href="'/servers/server/stat?serverId=' + server.id" active="true">"{{server.name}}"统计</menu-item>
+    <span class="disabled item">|</span>
+    <more-items-angle
+            :v-data-url="'/servers/nearby?serverId=' + server.id"
+            :v-url="'/servers/server/stat?serverId=${serverId}'"></more-items-angle>
+</first-menu>

EdgeAdmin/web/views/@default/servers/server/stat/clients.css

@@ -0,0 +1,7 @@
+.chart-box {
+  height: 20em;
+}
+h4 span.small {
+  font-size: 0.8em;
+}
+/*# sourceMappingURL=clients.css.map */

EdgeAdmin/web/views/@default/servers/server/stat/clients.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["clients.less"],"names":[],"mappings":"AAAA;EACC,YAAA;;AAGD,EAAG,KAAI;EACN,gBAAA","file":"clients.css"}

EdgeAdmin/web/views/@default/servers/server/stat/clients.html

@@ -0,0 +1,18 @@
+{$layout}
+{$template "/echarts"}
+
+{$template "stat_menu"}
+{$template "/left_menu_with_menu"}
+<div class="right-box with-menu">
+    {$ if eq .statIsOn false}
+	<p class="ui message">
+        要想查看统计数据，需要先开启统计功能，<a :href="'/servers/server/settings/stat?serverId=' + serverId">[点击这里]</a>修改配置。
+    </p>
+    {$else}
+    <h4>操作系统排行<span class="small grey">（按月）</span></h4>
+    <div class="chart-box" id="system-chart"></div>
+
+    <h4>浏览器排行<span class="small grey">（按月）</span></h4>
+    <div class="chart-box" id="browser-chart"></div>
+    {$end}
+</div>

EdgeAdmin/web/views/@default/servers/server/stat/clients.js

@@ -0,0 +1,73 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+
+		let systemAxis = teaweb.countAxis(this.systemStats, function (v) {
+			return v.count
+		})
+		this.reloadChart("system-chart", "操作系统", this.systemStats, function (v) {
+			return v.system.name
+		}, function (args) {
+			return that.systemStats[args.dataIndex].system.name + ": " + teaweb.formatNumber(that.systemStats[args.dataIndex].count)
+		}, systemAxis)
+
+		let browserAxis = teaweb.countAxis(this.browserStats, function (v) {
+			return v.count
+		})
+		this.reloadChart("browser-chart", "浏览器", this.browserStats, function (v) {
+			return v.browser.name
+		}, function (args) {
+			return that.browserStats[args.dataIndex].browser.name + ": " + teaweb.formatNumber(that.browserStats[args.dataIndex].count)
+		}, browserAxis)
+	})
+
+	this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(xFunc),
+				axisLabel: {
+					interval: 0
+				}
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 40,
+				top: 10,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: name,
+					type: "bar",
+					data: stats.map(function (v) {
+						return v.count / axis.divider;
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					barWidth: "10em"
+				}
+			],
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+})

EdgeAdmin/web/views/@default/servers/server/stat/clients.less

@@ -0,0 +1,7 @@
+.chart-box {
+	height: 20em;
+}
+
+h4 span.small {
+	font-size: 0.8em;
+}

EdgeAdmin/web/views/@default/servers/server/stat/dailyRequests.css

@@ -0,0 +1,7 @@
+.chart-box {
+  height: 21em;
+}
+h4 span.small {
+  font-size: 0.8em;
+}
+/*# sourceMappingURL=dailyRequests.css.map */

EdgeAdmin/web/views/@default/servers/server/stat/dailyRequests.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dailyRequests.less"],"names":[],"mappings":"AAAA;EACC,YAAA;;AAGD,EAAG,KAAI;EACN,gBAAA","file":"dailyRequests.css"}

EdgeAdmin/web/views/@default/servers/server/stat/dailyRequests.html

@@ -0,0 +1,16 @@
+{$layout}
+{$template "/echarts"}
+
+{$template "stat_menu"}
+{$template "/left_menu_with_menu"}
+<div class="right-box with-menu">
+    {$template "requests_menu"}
+
+    <div class="ui column">
+        <h4>请求数统计（按天）</h4>
+        <div class="chart-box" id="daily-requests-chart"></div>
+
+        <h4>流量统计（按天）</h4>
+        <div class="chart-box" id="daily-traffic-chart"></div>
+    </div>
+</div>

EdgeAdmin/web/views/@default/servers/server/stat/dailyRequests.js

@@ -0,0 +1,180 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+
+		this.reloadRequestsChart("daily-requests-chart", "请求数统计", this.dailyStats, function (args) {
+			if (args.seriesIndex == 0) {
+				return that.dailyStats[args.dataIndex].day + " 请求数: " + teaweb.formatNumber(that.dailyStats[args.dataIndex].countRequests)
+			}
+			if (args.seriesIndex == 1) {
+				let ratio = 0
+				if (that.dailyStats[args.dataIndex].countRequests > 0) {
+					ratio = Math.round(that.dailyStats[args.dataIndex].countCachedRequests * 10000 / that.dailyStats[args.dataIndex].countRequests) / 100
+				}
+				return that.dailyStats[args.dataIndex].day + " 缓存请求数: " + teaweb.formatNumber(that.dailyStats[args.dataIndex].countCachedRequests) + ", 命中率：" + ratio + "%"
+			}
+			return ""
+		})
+		this.reloadTrafficChart("daily-traffic-chart", "流量统计", this.dailyStats, function (args) {
+			if (args.seriesIndex == 0) {
+				return that.dailyStats[args.dataIndex].day + " 流量: " + teaweb.formatBytes(that.dailyStats[args.dataIndex].bytes)
+			}
+			if (args.seriesIndex == 1) {
+				let ratio = 0
+				if (that.dailyStats[args.dataIndex].bytes > 0) {
+					ratio = Math.round(that.dailyStats[args.dataIndex].cachedBytes * 10000 / that.dailyStats[args.dataIndex].bytes) / 100
+				}
+				return that.dailyStats[args.dataIndex].day + " 缓存流量: " + teaweb.formatBytes(that.dailyStats[args.dataIndex].cachedBytes) + ", 命中率：" + ratio + "%"
+			}
+			return ""
+		})
+	})
+
+	this.reloadRequestsChart = function (chartId, name, stats, tooltipFunc) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+
+		let axis = teaweb.countAxis(stats, function (v) {
+			return Math.max(v.countRequests, v.countCachedRequests)
+		})
+
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(function (v) {
+					return v.day.substr(5)
+				})
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 50,
+				top: 40,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: "请求数",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countRequests / axis.divider
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					areaStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					smooth: true
+				},
+				{
+					name: "缓存请求数",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countCachedRequests / axis.divider
+					}),
+					itemStyle: {
+						color: "#61A0A8"
+					},
+					areaStyle: {
+						color: "#61A0A8"
+					},
+					smooth: true
+				}
+			],
+			legend: {
+				data: ['请求数', '缓存请求数']
+			},
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+
+	this.reloadTrafficChart = function (chartId, name, stats, tooltipFunc) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+
+		let axis = teaweb.bytesAxis(stats, function (v) {
+			return Math.max(v.bytes, v.cachedBytes)
+		})
+
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(function (v) {
+					return v.day.substr(5)
+				})
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 50,
+				top: 40,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: "流量",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.bytes / axis.divider
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					areaStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					smooth: true
+				},
+				{
+					name: "缓存流量",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.cachedBytes / axis.divider
+					}),
+					itemStyle: {
+						color: "#61A0A8"
+					},
+					areaStyle: {
+						color: "#61A0A8"
+					},
+					smooth: true
+				}
+			],
+			legend: {
+				data: ['流量', '缓存流量']
+			},
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+})

EdgeAdmin/web/views/@default/servers/server/stat/dailyRequests.less

@@ -0,0 +1,7 @@
+.chart-box {
+	height: 21em;
+}
+
+h4 span.small {
+	font-size: 0.8em;
+}

EdgeAdmin/web/views/@default/servers/server/stat/hourlyRequests.css

@@ -0,0 +1,7 @@
+.chart-box {
+  height: 21em;
+}
+h4 span.small {
+  font-size: 0.8em;
+}
+/*# sourceMappingURL=hourlyRequests.css.map */

EdgeAdmin/web/views/@default/servers/server/stat/hourlyRequests.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["hourlyRequests.less"],"names":[],"mappings":"AAAA;EACC,YAAA;;AAGD,EAAG,KAAI;EACN,gBAAA","file":"hourlyRequests.css"}

EdgeAdmin/web/views/@default/servers/server/stat/hourlyRequests.html

@@ -0,0 +1,16 @@
+{$layout}
+{$template "/echarts"}
+
+{$template "stat_menu"}
+{$template "/left_menu_with_menu"}
+<div class="right-box with-menu">
+    {$template "requests_menu"}
+
+    <div class="ui column">
+        <h4>请求数统计（小时）</h4>
+        <div class="chart-box" id="hourly-requests-chart"></div>
+
+        <h4>流量统计（小时）</h4>
+        <div class="chart-box" id="hourly-traffic-chart"></div>
+    </div>
+</div>

EdgeAdmin/web/views/@default/servers/server/stat/hourlyRequests.js

@@ -0,0 +1,180 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+
+		this.reloadRequestsChart("hourly-requests-chart", "请求数统计", this.hourlyStats, function (args) {
+			if (args.seriesIndex == 0) {
+				return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 请求数: " + teaweb.formatNumber(that.hourlyStats[args.dataIndex].countRequests)
+			}
+			if (args.seriesIndex == 1) {
+				let ratio = 0
+				if (that.hourlyStats[args.dataIndex].countRequests > 0) {
+					ratio = Math.round(that.hourlyStats[args.dataIndex].countCachedRequests * 10000 / that.hourlyStats[args.dataIndex].countRequests) / 100
+				}
+				return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 缓存请求数: " + teaweb.formatNumber(that.hourlyStats[args.dataIndex].countCachedRequests) + ", 命中率：" + ratio + "%"
+			}
+			return ""
+		})
+		this.reloadTrafficChart("hourly-traffic-chart", "流量统计", this.hourlyStats, function (args) {
+			if (args.seriesIndex == 0) {
+				return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 流量: " + teaweb.formatBytes(that.hourlyStats[args.dataIndex].bytes)
+			}
+			if (args.seriesIndex == 1) {
+				let ratio = 0
+				if (that.hourlyStats[args.dataIndex].bytes > 0) {
+					ratio = Math.round(that.hourlyStats[args.dataIndex].cachedBytes * 10000 / that.hourlyStats[args.dataIndex].bytes) / 100
+				}
+				return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 缓存流量: " + teaweb.formatBytes(that.hourlyStats[args.dataIndex].cachedBytes) + ", 命中率：" + ratio + "%"
+			}
+			return ""
+		})
+	})
+
+	this.reloadRequestsChart = function (chartId, name, stats, tooltipFunc) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+
+		let axis = teaweb.countAxis(stats, function (v) {
+			return Math.max(v.countRequests, v.countCachedRequests)
+		})
+
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(function (v) {
+					return v.hour
+				})
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 50,
+				top: 40,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: "请求数",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countRequests / axis.divider
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					areaStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					smooth: true
+				},
+				{
+					name: "缓存请求数",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countCachedRequests / axis.divider
+					}),
+					itemStyle: {
+						color: "#61A0A8"
+					},
+					areaStyle: {
+						color: "#61A0A8"
+					},
+					smooth: true
+				}
+			],
+			legend: {
+				data: ['请求数', '缓存请求数']
+			},
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+
+	this.reloadTrafficChart = function (chartId, name, stats, tooltipFunc) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+
+		let axis = teaweb.bytesAxis(stats, function (v) {
+			return Math.max(v.bytes, v.cachedBytes)
+		})
+
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(function (v) {
+					return v.hour
+				})
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 50,
+				top: 40,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: "流量",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.bytes / axis.divider
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					areaStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					smooth: true
+				},
+				{
+					name: "缓存流量",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.cachedBytes / axis.divider
+					}),
+					itemStyle: {
+						color: "#61A0A8"
+					},
+					areaStyle: {
+						color: "#61A0A8"
+					},
+					smooth: true
+				}
+			],
+			legend: {
+				data: ['流量', '缓存流量']
+			},
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+})

EdgeAdmin/web/views/@default/servers/server/stat/hourlyRequests.less

@@ -0,0 +1,7 @@
+.chart-box {
+	height: 21em;
+}
+
+h4 span.small {
+	font-size: 0.8em;
+}

EdgeAdmin/web/views/@default/servers/server/stat/index.css

@@ -0,0 +1,7 @@
+.chart-box {
+  height: 14em;
+}
+h4 span.small {
+  font-size: 0.8em;
+}
+/*# sourceMappingURL=index.css.map */

EdgeAdmin/web/views/@default/servers/server/stat/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACC,YAAA;;AAGD,EAAG,KAAI;EACN,gBAAA","file":"index.css"}

EdgeAdmin/web/views/@default/servers/server/stat/index.html

@@ -0,0 +1,16 @@
+{$layout}
+{$template "/echarts"}
+
+{$template "stat_menu"}
+{$template "/left_menu_with_menu"}
+<div class="right-box with-menu">
+    {$template "requests_menu"}
+
+    <div class="ui column">
+        <h4>请求数统计（即时）</h4>
+        <div class="chart-box" id="minutely-requests-chart"></div>
+
+        <h4>流量统计（即时）</h4>
+        <div class="chart-box" id="minutely-traffic-chart"></div>
+    </div>
+</div>

EdgeAdmin/web/views/@default/servers/server/stat/index.js

@@ -0,0 +1,189 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+
+		// 每N分钟取一次
+		let newStats = []
+		for (let i = 0; i < this.minutelyStats.length; i++) {
+			if (i % 5 == 0) {
+				newStats.push(this.minutelyStats[i])
+			}
+		}
+		this.minutelyStats = newStats
+
+		this.reloadRequestsChart("minutely-requests-chart", "请求数统计", this.minutelyStats, function (args) {
+			if (args.seriesIndex == 0) {
+				return that.minutelyStats[args.dataIndex].day + " " + that.minutelyStats[args.dataIndex].minute + "<br/>请求数: " + teaweb.formatNumber(that.minutelyStats[args.dataIndex].countRequests)
+			}
+			if (args.seriesIndex == 1) {
+				let ratio = 0
+				if (that.minutelyStats[args.dataIndex].countRequests > 0) {
+					ratio = Math.round(that.minutelyStats[args.dataIndex].countCachedRequests * 10000 / that.minutelyStats[args.dataIndex].countRequests) / 100
+				}
+				return that.minutelyStats[args.dataIndex].day + " " + that.minutelyStats[args.dataIndex].minute + "<br/>缓存请求数: " + teaweb.formatNumber(that.minutelyStats[args.dataIndex].countCachedRequests) + "<br/>命中率：" + ratio + "%"
+			}
+			return ""
+		})
+		this.reloadTrafficChart("minutely-traffic-chart", "流量统计", this.minutelyStats, function (args) {
+			if (args.seriesIndex == 0) {
+				return that.minutelyStats[args.dataIndex].day + " " + that.minutelyStats[args.dataIndex].minute + "<br/>流量: " + teaweb.formatBytes(that.minutelyStats[args.dataIndex].bytes)
+			}
+			if (args.seriesIndex == 1) {
+				let ratio = 0
+				if (that.minutelyStats[args.dataIndex].bytes > 0) {
+					ratio = Math.round(that.minutelyStats[args.dataIndex].cachedBytes * 10000 / that.minutelyStats[args.dataIndex].bytes) / 100
+				}
+				return that.minutelyStats[args.dataIndex].day + " " + that.minutelyStats[args.dataIndex].minute + "<br/>缓存流量: " + teaweb.formatBytes(that.minutelyStats[args.dataIndex].cachedBytes) + "<br/>命中率：" + ratio + "%"
+			}
+			return ""
+		})
+	})
+
+	this.reloadRequestsChart = function (chartId, name, stats, tooltipFunc) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+
+		let axis = teaweb.countAxis(stats, function (v) {
+			return Math.max(v.countRequests, v.countCachedRequests)
+		})
+
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(function (v) {
+					return v.minute
+				})
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 50,
+				top: 40,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: "请求数",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countRequests / axis.divider
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					areaStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					smooth: true
+				},
+				{
+					name: "缓存请求数",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countCachedRequests / axis.divider
+					}),
+					itemStyle: {
+						color: "#61A0A8"
+					},
+					areaStyle: {
+						color: "#61A0A8"
+					},
+					smooth: true
+				}
+			],
+			legend: {
+				data: ['请求数', '缓存请求数']
+			},
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+
+	this.reloadTrafficChart = function (chartId, name, stats, tooltipFunc) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+
+		let axis = teaweb.bytesAxis(stats, function (v) {
+			return Math.max(v.bytes, v.cachedBytes)
+		})
+
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(function (v) {
+					return v.minute
+				})
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 50,
+				top: 40,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: "流量",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.bytes / axis.divider
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					areaStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					smooth: true
+				},
+				{
+					name: "缓存流量",
+					type: "line",
+					data: stats.map(function (v) {
+						return v.cachedBytes / axis.divider
+					}),
+					itemStyle: {
+						color: "#61A0A8"
+					},
+					areaStyle: {
+						color: "#61A0A8"
+					},
+					smooth: true
+				}
+			],
+			legend: {
+				data: ['流量', '缓存流量']
+			},
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+})

EdgeAdmin/web/views/@default/servers/server/stat/index.less

@@ -0,0 +1,7 @@
+.chart-box {
+	height: 14em;
+}
+
+h4 span.small {
+	font-size: 0.8em;
+}

EdgeAdmin/web/views/@default/servers/server/stat/providers.css

@@ -0,0 +1,7 @@
+.chart-box {
+  height: 20em;
+}
+h4 span.small {
+  font-size: 0.8em;
+}
+/*# sourceMappingURL=providers.css.map */

EdgeAdmin/web/views/@default/servers/server/stat/providers.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["providers.less"],"names":[],"mappings":"AAAA;EACC,YAAA;;AAGD,EAAG,KAAI;EACN,gBAAA","file":"providers.css"}

EdgeAdmin/web/views/@default/servers/server/stat/providers.html

@@ -0,0 +1,15 @@
+{$layout}
+{$template "/echarts"}
+
+{$template "stat_menu"}
+{$template "/left_menu_with_menu"}
+<div class="right-box with-menu">
+    {$ if eq .statIsOn false}
+    <p class="ui message">
+        要想查看统计数据，需要先开启统计功能，<a :href="'/servers/server/settings/stat?serverId=' + serverId">[点击这里]</a>修改配置。
+    </p>
+    {$else}
+    <h4>运营商排行<span class="small grey">（按月）</span></h4>
+    <div class="chart-box" id="provider-chart"></div>
+    {$end}
+</div>

EdgeAdmin/web/views/@default/servers/server/stat/providers.js

@@ -0,0 +1,64 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+
+		let axis = teaweb.countAxis(this.providerStats, function (v) {
+			return v.count
+		})
+		this.reloadChart("provider-chart", "运营商", this.providerStats, function (v) {
+			return v.provider.name
+		}, function (args) {
+			return that.providerStats[args.dataIndex].provider.name + ": " + teaweb.formatNumber(that.providerStats[args.dataIndex].count)
+		}, axis)
+	})
+
+	this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(xFunc),
+				axisLabel: {
+					interval: 0
+				}
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 40,
+				top: 10,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: name,
+					type: "bar",
+					data: stats.map(function (v) {
+						return v.count / axis.divider;
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					barWidth: "10em"
+				}
+			],
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+})

EdgeAdmin/web/views/@default/servers/server/stat/providers.less

@@ -0,0 +1,7 @@
+.chart-box {
+	height: 20em;
+}
+
+h4 span.small {
+	font-size: 0.8em;
+}

EdgeAdmin/web/views/@default/servers/server/stat/regions.css

@@ -0,0 +1,7 @@
+.chart-box {
+  height: 20em;
+}
+h4 span.small {
+  font-size: 0.8em;
+}
+/*# sourceMappingURL=regions.css.map */

EdgeAdmin/web/views/@default/servers/server/stat/regions.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["regions.less"],"names":[],"mappings":"AAAA;EACC,YAAA;;AAGD,EAAG,KAAI;EACN,gBAAA","file":"regions.css"}

EdgeAdmin/web/views/@default/servers/server/stat/regions.html

@@ -0,0 +1,27 @@
+{$layout}
+{$template "/echarts"}
+
+{$template "stat_menu"}
+{$template "/left_menu_with_menu"}
+<div class="right-box with-menu">
+    {$ if eq .statIsOn false}
+	<p class="ui message">
+        要想查看统计数据，需要先开启统计功能，<a :href="'/servers/server/settings/stat?serverId=' + serverId">[点击这里]</a>修改配置。
+    </p>
+    {$else}
+        <h4>地区排行<span class="small grey">（按月）</span></h4>
+        <div class="chart-box" id="country-chart">
+
+        </div>
+
+        <h4>省市排行<span class="small grey">（按月）</span></h4>
+        <div class="chart-box" id="province-chart">
+
+        </div>
+
+        <h4>城市排行<span class="small grey">（按月）</span></h4>
+        <div class="chart-box" id="city-chart">
+
+        </div>
+    {$end}
+</div>

EdgeAdmin/web/views/@default/servers/server/stat/regions.js

@@ -0,0 +1,85 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+
+		// 地区
+		let countryAxis = teaweb.countAxis(this.countryStats, function (v) {
+			return v.count
+		})
+		this.reloadChart("country-chart", "地区", this.countryStats, function (v) {
+			return v.country.name
+		}, function (args) {
+			return that.countryStats[args.dataIndex].country.name + ": " + teaweb.formatNumber(that.countryStats[args.dataIndex].count)
+		}, countryAxis)
+
+		// 省份
+		let provinceAxis = teaweb.countAxis(this.provinceStats, function (v) {
+			return v.count
+		})
+		this.reloadChart("province-chart", "省市", this.provinceStats, function (v) {
+			return v.province.name
+		}, function (args) {
+			return that.provinceStats[args.dataIndex].country.name + ": " + that.provinceStats[args.dataIndex].province.name + " " + teaweb.formatNumber(that.provinceStats[args.dataIndex].count)
+		}, provinceAxis)
+
+		// 城市
+		let cityAxis = teaweb.countAxis(this.cityStats, function (v) {
+			return v.count
+		})
+		this.reloadChart("city-chart", "城市", this.cityStats, function (v) {
+			return v.city.name
+		}, function (args) {
+			return that.cityStats[args.dataIndex].country.name + ": " + that.cityStats[args.dataIndex].province.name + " " + that.cityStats[args.dataIndex].city.name + " " + teaweb.formatNumber(that.cityStats[args.dataIndex].count)
+		}, cityAxis)
+	})
+
+	this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(xFunc),
+				axisLabel: {
+					interval: 0
+				}
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 40,
+				top: 10,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: name,
+					type: "bar",
+					data: stats.map(function (v) {
+						return v.count / axis.divider;
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					barWidth: "10em"
+				}
+			],
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+})

EdgeAdmin/web/views/@default/servers/server/stat/regions.less

@@ -0,0 +1,7 @@
+.chart-box {
+	height: 20em;
+}
+
+h4 span.small {
+	font-size: 0.8em;
+}

EdgeAdmin/web/views/@default/servers/server/stat/waf.css

@@ -0,0 +1,26 @@
+.grid {
+  margin-top: 2em !important;
+  margin-left: 2em !important;
+}
+.grid .column {
+  margin-bottom: 2em;
+  border-right: 1px #eee solid;
+}
+.grid .column div.value {
+  margin-top: 1.5em;
+}
+.grid .column div.value span {
+  font-size: 2em;
+  margin-right: 0.2em;
+}
+.grid .column.no-border {
+  border-right: 0;
+}
+.chart-box {
+  height: 20em;
+}
+h4 .color-span {
+  font-size: 0.6em;
+  padding: 2px 4px;
+}
+/*# sourceMappingURL=waf.css.map */

EdgeAdmin/web/views/@default/servers/server/stat/waf.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["waf.less"],"names":[],"mappings":"AAAA;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAIF;EACC,YAAA;;AAGD,EAAG;EACF,gBAAA;EACA,gBAAA","file":"waf.css"}

EdgeAdmin/web/views/@default/servers/server/stat/waf.html

@@ -0,0 +1,44 @@
+{$layout}
+{$template "/echarts"}
+
+{$template "stat_menu"}
+{$template "/left_menu_with_menu"}
+<div class="right-box with-menu">
+    <div class="ui three columns grid">
+        <div class="ui column">
+            <h4>今日拦截</h4>
+            <div class="value"><span>{{countDailyBlock}}</span>次</div>
+        </div>
+
+        <div class="ui column">
+            <h4>今日验证码验证</h4>
+            <div class="value"><span>{{countDailyCaptcha}}</span>次</div>
+        </div>
+
+        <div class="ui column no-border">
+            <h4>今日记录</h4>
+            <div class="value"><span>{{countDailyLog}}</span>次</div>
+        </div>
+
+        <div class="ui column">
+            <h4>本周拦截</h4>
+            <div class="value"><span>{{countWeeklyBlock}}</span>次</div>
+        </div>
+
+        <div class="ui column no-border">
+            <h4>本月拦截</h4>
+            <div class="value"><span>{{countMonthlyBlock}}</span>次</div>
+        </div>
+    </div>
+
+    <h4>近15日趋势
+        <span class="color-span" style="background: #9DD3E8">全部</span>
+        <span class="color-span" style="background: #F39494">拦截</span>
+        <span class="color-span" style="background: #FBD88A">验证码</span>
+        <span class="color-span" style="background: #879BD7">记录</span>
+    </h4>
+    <div class="chart-box" id="daily-chart"></div>
+
+    <h4>拦截类型分布</h4>
+    <div class="chart-box" id="group-chart"></div>
+</div>

EdgeAdmin/web/views/@default/servers/server/stat/waf.js

@@ -0,0 +1,172 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+
+		this.countDailyBlock = teaweb.formatCount(this.countDailyBlock)
+		this.countDailyCaptcha = teaweb.formatCount(this.countDailyCaptcha)
+		this.countDailyLog = teaweb.formatCount(this.countDailyLog)
+		this.countWeeklyBlock = teaweb.formatCount(this.countWeeklyBlock)
+		this.countMonthlyBlock = teaweb.formatCount(this.countMonthlyBlock)
+
+		this.totalDailyStats = this.logDailyStats.map(function (v, k) {
+			return {
+				day: v.day,
+				count: that.logDailyStats[k].count + that.blockDailyStats[k].count + that.captchaDailyStats[k].count
+			}
+		})
+		let dailyAxis = teaweb.countAxis(this.totalDailyStats, function (v) {
+			return v.count
+		})
+		this.reloadLineChart("daily-chart", "规则分组", this.totalDailyStats, function (v) {
+			return v.day.substring(4, 6) + "-" + v.day.substring(6)
+		}, function (args) {
+			return that.logDailyStats[args.dataIndex].day.substring(4, 6) + "-" + that.logDailyStats[args.dataIndex].day.substring(6) + ": 拦截: "
+				+ teaweb.formatNumber(that.blockDailyStats[args.dataIndex].count) + ", 验证码: " + teaweb.formatNumber(that.captchaDailyStats[args.dataIndex].count) + ", 记录: " + teaweb.formatNumber(that.logDailyStats[args.dataIndex].count)
+		}, dailyAxis)
+
+		let groupAxis = teaweb.countAxis(this.groupStats, function (v) {
+			return v.count
+		})
+		let total = this.groupStats.$sum(function (k, v) {
+			return v.count
+		})
+		this.reloadBarChart("group-chart", "规则分组", this.groupStats, function (v) {
+			return v.group.name
+		}, function (args) {
+			let percent = ""
+			if (total > 0) {
+				percent = ", 占比: " + (Math.round(that.groupStats[args.dataIndex].count * 100 * 100 / total) / 100) + "%"
+			}
+			return that.groupStats[args.dataIndex].group.name + ": " + teaweb.formatNumber(that.groupStats[args.dataIndex].count) + percent
+		}, groupAxis)
+	})
+
+	this.reloadLineChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+		let that = this
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(xFunc)
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 40,
+				top: 10,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: name,
+					type: "line",
+					data: this.totalDailyStats.map(function (v, index) {
+						return that.totalDailyStats[index].count / axis.divider;
+					}),
+					areaStyle: {},
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					smooth: true
+				},
+				{
+					name: name,
+					type: "line",
+					data: this.logDailyStats.map(function (v) {
+						return v.count / axis.divider;
+					}),
+					itemStyle: {
+						color: "#879BD7"
+					},
+					smooth: true
+				},
+				{
+					name: name,
+					type: "line",
+					data: this.blockDailyStats.map(function (v) {
+						return v.count / axis.divider;
+					}),
+					itemStyle: {
+						color: "#F39494"
+					},
+					smooth: true
+				},
+				{
+					name: name,
+					type: "line",
+					data: this.captchaDailyStats.map(function (v) {
+						return v.count / axis.divider;
+					}),
+					itemStyle: {
+						color: "#FBD88A"
+					},
+					smooth: true
+				}
+			],
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+
+	this.reloadBarChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+		let chart = teaweb.initChart(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(xFunc)
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 40,
+				top: 10,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: name,
+					type: "bar",
+					data: stats.map(function (v) {
+						return v.count / axis.divider;
+					}),
+					itemStyle: {
+						color: teaweb.DefaultChartColor
+					},
+					barWidth: "10em"
+				}
+			],
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+})

EdgeAdmin/web/views/@default/servers/server/stat/waf.less

@@ -0,0 +1,31 @@
+.grid {
+	margin-top: 2em !important;
+	margin-left: 2em !important;
+
+	.column {
+		margin-bottom: 2em;
+		border-right: 1px #eee solid;
+
+		div.value {
+			margin-top: 1.5em;
+
+			span {
+				font-size: 2em;
+				margin-right: 0.2em;
+			}
+		}
+	}
+
+	.column.no-border {
+		border-right: 0;
+	}
+}
+
+.chart-box {
+	height: 20em;
+}
+
+h4 .color-span {
+	font-size: 0.6em;
+	padding: 2px 4px;
+}