数据看板和节点看板都改成异步加载

2025-11-03 20:40:26 +08:00 · 2021-08-30 15:23:31 +08:00
parent cedf2b8aee
commit 41c5bef9f4
14 changed files with 188 additions and 99 deletions
--- a/internal/web/actions/default/clusters/cluster/init.go
+++ b/internal/web/actions/default/clusters/cluster/init.go
@@ -47,6 +47,7 @@ func init() {
 			Get("/thresholds", new(thresholds.IndexAction)).
 			Get("/detail", new(node.DetailAction)).
 			GetPost("/boards", new(nodeboards.IndexAction)).
+			Post("/boards/data", new(nodeboards.DataAction)).
 			GetPost("/updateDNSPopup", new(node.UpdateDNSPopupAction)).

 			// 分组相关
--- a/internal/web/actions/default/clusters/cluster/node/boards/data.go
+++ b/internal/web/actions/default/clusters/cluster/node/boards/data.go
@@ -0,0 +1,41 @@
+// Copyright 2021 Liuxiangchao iwind.liu@gmail.com. All rights reserved.
+
+package boards
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/iwind/TeaGo/maps"
+)
+
+type DataAction struct {
+	actionutils.ParentAction
+}
+
+func (this *DataAction) RunPost(params struct {
+	ClusterId int64
+	NodeId    int64
+}) {
+	resp, err := this.RPC().ServerStatBoardRPC().ComposeServerStatNodeBoard(this.AdminContext(), &pb.ComposeServerStatNodeBoardRequest{NodeId: params.NodeId})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	this.Data["board"] = maps.Map{
+		"isActive":            resp.IsActive,
+		"trafficInBytes":      resp.TrafficInBytes,
+		"trafficOutBytes":     resp.TrafficOutBytes,
+		"countConnections":    resp.CountConnections,
+		"countRequests":       resp.CountRequests,
+		"countAttackRequests": resp.CountAttackRequests,
+		"cpuUsage":            resp.CpuUsage,
+		"memoryUsage":         resp.MemoryUsage,
+		"memoryTotalSize":     resp.MemoryTotalSize,
+		"load":                resp.Load,
+		"cacheDiskSize":       resp.CacheDiskSize,
+		"cacheMemorySize":     resp.CacheMemorySize,
+	}
+
+	this.Success()
+}
--- a/internal/web/actions/default/clusters/cluster/node/boards/index.go
+++ b/internal/web/actions/default/clusters/cluster/node/boards/index.go
@@ -38,7 +38,14 @@ func (this *IndexAction) RunGet(params struct {
 		this.RedirectURL("/clusters/cluster/node?clusterId=" + strconv.FormatInt(params.ClusterId, 10) + "&nodeId=" + strconv.FormatInt(params.NodeId, 10))
 		return
 	}
+	
+	this.Show()
+}

+func (this *IndexAction) RunPost(params struct {
+	ClusterId int64
+	NodeId    int64
+}) {
 	resp, err := this.RPC().ServerStatBoardRPC().ComposeServerStatNodeBoard(this.AdminContext(), &pb.ComposeServerStatNodeBoardRequest{NodeId: params.NodeId})
 	if err != nil {
 		this.ErrorPage(err)
@@ -200,33 +207,5 @@ func (this *IndexAction) RunGet(params struct {
 		this.Data["metricCharts"] = chartMaps
 	}

-	this.Show()
-}
-
-func (this *IndexAction) RunPost(params struct {
-	ClusterId int64
-	NodeId    int64
-}) {
-	resp, err := this.RPC().ServerStatBoardRPC().ComposeServerStatNodeBoard(this.AdminContext(), &pb.ComposeServerStatNodeBoardRequest{NodeId: params.NodeId})
-	if err != nil {
-		this.ErrorPage(err)
-		return
-	}
-
-	this.Data["board"] = maps.Map{
-		"isActive":            resp.IsActive,
-		"trafficInBytes":      resp.TrafficInBytes,
-		"trafficOutBytes":     resp.TrafficOutBytes,
-		"countConnections":    resp.CountConnections,
-		"countRequests":       resp.CountRequests,
-		"countAttackRequests": resp.CountAttackRequests,
-		"cpuUsage":            resp.CpuUsage,
-		"memoryUsage":         resp.MemoryUsage,
-		"memoryTotalSize":     resp.MemoryTotalSize,
-		"load":                resp.Load,
-		"cacheDiskSize":       resp.CacheDiskSize,
-		"cacheMemorySize":     resp.CacheMemorySize,
-	}
-
 	this.Success()
 }
--- a/internal/web/actions/default/dashboard/boards/index.go
+++ b/internal/web/actions/default/dashboard/boards/index.go
@@ -40,6 +40,11 @@ func (this *IndexAction) RunGet(params struct{}) {
 		}
 	}

+	this.Show()
+}
+
+func (this *IndexAction) RunPost(params struct {
+}) {
 	// 读取看板数据
 	resp, err := this.RPC().AdminRPC().ComposeAdminDashboard(this.AdminContext(), &pb.ComposeAdminDashboardRequest{
 		ApiVersion: teaconst.APINodeVersion,
@@ -249,5 +254,5 @@ func (this *IndexAction) RunGet(params struct{}) {
 		this.Data["metricCharts"] = chartMaps
 	}

-	this.Show()
+	this.Success()
 }
--- a/internal/web/actions/default/dashboard/init.go
+++ b/internal/web/actions/default/dashboard/init.go
@@ -16,12 +16,11 @@ func init() {

 			// 看板
 			Prefix("/dashboard/boards").
-			Get("", new(boards.IndexAction)).
+			GetPost("", new(boards.IndexAction)).
 			Get("/waf", new(boards.WafAction)).
 			Post("/wafLogs", new(boards.WafLogsAction)).
 			Get("/dns", new(boards.DnsAction)).
 			Get("/user", new(boards.UserAction)).
-
 			EndAll()
 	})
 }
--- a/internal/web/helpers/user_must_auth.go
+++ b/internal/web/helpers/user_must_auth.go
@@ -240,6 +240,18 @@ func (this *userMustAuth) modules(adminId int64) []maps.Map {
 					"url":  "/clusters/logs",
 					"code": "log",
 				},
+				/**{
+					"name": "IP资源",
+					"url":  "/clusters/ip-addrs",
+					"code": "ipAddr",
+					"isOn": teaconst.IsPlus,
+				},
+				{
+					"name": "监控",
+					"url":  "/clusters/monitors",
+					"code": "monitor",
+					"isOn": teaconst.IsPlus,
+				},**/
 				{
 					"name": "SSH认证",
 					"url":  "/clusters/grants",
--- a/web/views/@default/clusters/cluster/boards/index.html
+++ b/web/views/@default/clusters/cluster/boards/index.html
@@ -2,13 +2,13 @@
 {$template "/echarts"}

 <!-- 加载中 -->
-<div>
+<div style="margin-top: 0.8em">
    <div class="ui message loading" v-if="isLoading">
        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
    </div>
 </div>

-<div class="ui four columns grid">
+<div class="ui four columns grid" v-show="!isLoading">
    <div class="ui column">
        <h4>在线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
        <div class="value"><span class="green">{{board.countActiveNodes}}</span>个</div>
@@ -27,7 +27,7 @@
    </div>
 </div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <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天流量趋势</a>
 </div>
@@ -40,7 +40,7 @@

 <div class="ui divider"></div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
    <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
 </div>
@@ -54,18 +54,18 @@
 <div class="ui divider"></div>

 <!-- 域名排行 -->
-<h4>域名访问排行 <span>（24小时）</span></h4>
+<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-domains-chart"></div>

 <div class="ui divider"></div>

 <!-- 节点排行 -->
-<h4>节点访问排行 <span>（24小时）</span></h4>
+<h4 v-show="!isLoading">节点访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-nodes-chart"></div>

 <div class="ui divider"></div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">节点CPU</a>
    <a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">节点内存</a>
    <a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">节点负载</a>
--- a/web/views/@default/clusters/cluster/node/boards/index.html
+++ b/web/views/@default/clusters/cluster/node/boards/index.html
@@ -2,8 +2,15 @@
 {$template "../node_menu"}
 {$template "/echarts"}

+<!-- 加载中 -->
+<div>
+    <div class="ui message loading" v-if="isLoading">
+        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
+    </div>
+</div>
+
 <!-- 概况 -->
-<div class="ui four columns grid">
+<div class="ui four columns grid" v-if="!isLoading">
    <div class="ui column">
        <h4>在线状态</h4>
        <div class="value">
@@ -61,7 +68,7 @@

 <div class="ui divider"></div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <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天流量趋势</a>
 </div>
@@ -74,7 +81,7 @@

 <div class="ui divider"></div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
    <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
 </div>
@@ -88,13 +95,13 @@
 <div class="ui divider"></div>

 <!-- 域名排行 -->
-<h4>域名访问排行 <span>（24小时）</span></h4>
+<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-domains-chart"></div>

 <div class="ui divider"></div>

 <!-- CPU、内存、负载 -->
-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">节点CPU</a>
    <a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">节点内存</a>
    <a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">节点负载</a>
@@ -106,7 +113,7 @@

 <!-- 缓存 -->
 <div class="ui divider"></div>
-<h4>缓存目录用量<span v-if="cacheDirUsed.length > 0">（使用：{{cacheDirUsed}}/总量：{{cacheDirTotal}}/剩余：{{cacheDirAvail}}）</span></h4>
+<h4 v-show="!isLoading">缓存目录用量<span v-if="cacheDirUsed.length > 0">（使用：{{cacheDirUsed}}/总量：{{cacheDirTotal}}/剩余：{{cacheDirAvail}}）</span></h4>
 <div class="chart-box" id="cache-dirs-chart"></div>

 <!-- 指标 -->
--- a/web/views/@default/clusters/cluster/node/boards/index.js
+++ b/web/views/@default/clusters/cluster/node/boards/index.js
@@ -1,4 +1,8 @@
 Tea.context(function () {
+	this.isLoading = true
+	this.board = {}
+	this.metricCharts = []
+
 	this.upNode = function (nodeId) {
 		teaweb.confirm("确定要手动上线此节点吗？", function () {
 			this.$post("/clusters/cluster/node/up")
@@ -32,8 +36,6 @@ Tea.context(function () {
 		this.board.cacheDiskSize = teaweb.formatBytes(this.board.cacheDiskSize)
 		this.board.cacheMemorySize = teaweb.formatBytes(this.board.cacheMemorySize)
 	}
-	this.loadBoard()
-

 	/**
 	 * 流量统计
@@ -41,18 +43,37 @@ Tea.context(function () {
 	this.trafficTab = "hourly"

 	this.$delay(function () {
-		this.reloadHourlyTrafficChart()
-		this.reloadHourlyRequestsChart()
-		this.reloadTopDomainsChart()
-		this.reloadCPUChart()
-		this.reloadCacheDirsChart()
+		this.$post("$")
+			.params({
+				clusterId: this.clusterId,
+				nodeId: this.node.id
+			})
+			.timeout(60)
+			.success(function (resp) {
+				for (let k in resp.data) {
+					this[k] = resp.data[k]
+				}
+
+				this.loadBoard()
+
+				this.isLoading = false
+
+				this.$delay(function () {
+					this.reloadHourlyTrafficChart()
+					this.reloadHourlyRequestsChart()
+					this.reloadTopDomainsChart()
+					this.reloadCPUChart()
+					this.reloadCacheDirsChart()
+
+					this.renderCacheDirData()
+
+					this.refreshBoard()
+				})
+			})
 	})
-	this.$delay(function () {
-		this.refreshBoard()
-	}, 30000)

 	this.refreshBoard = function () {
-		this.$post("$")
+		this.$post(".data")
 			.params({
 				clusterId: this.clusterId,
 				nodeId: this.node.id
@@ -64,7 +85,7 @@ Tea.context(function () {
 			.done(function () {
 				this.$delay(function () {
 					this.refreshBoard()
-				}, 60000)
+				}, 30000)
 			})
 	}

@@ -467,15 +488,18 @@ Tea.context(function () {
 	this.cacheDirTotal = ""
 	this.cacheDirAvail = ""
 	this.cacheDirAvailWarning = false
-	if (this.cacheDirValues.length > 0) {
-		let lastStat = this.cacheDirValues.$last()
-		if (lastStat.value != null && lastStat.value.dirs != null && lastStat.value.dirs.length > 0) {
-			this.cacheDirUsed = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].used)
-			this.cacheDirTotal = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].total)
-			this.cacheDirAvail = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].avail)
-			this.cacheDirAvailWarning = (this.cacheDirValues.$last().value.dirs[0].avail < 1024 * 1024 * 1024 * 10)
+	this.renderCacheDirData = function () {
+		if (this.cacheDirValues.length > 0) {
+			let lastStat = this.cacheDirValues.$last()
+			if (lastStat.value != null && lastStat.value.dirs != null && lastStat.value.dirs.length > 0) {
+				this.cacheDirUsed = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].used)
+				this.cacheDirTotal = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].total)
+				this.cacheDirAvail = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].avail)
+				this.cacheDirAvailWarning = (this.cacheDirValues.$last().value.dirs[0].avail < 1024 * 1024 * 1024 * 10)
+			}
 		}
 	}
+
 	this.reloadCacheDirsChart = function () {
 		let axis = {unit: "%", divider: 1}
 		teaweb.renderLineChart({
--- a/web/views/@default/dashboard/boards/index.html
+++ b/web/views/@default/dashboard/boards/index.html
@@ -1,40 +1,47 @@
 {$layout}
 {$template "/echarts"}

+{$template "menu"}
+
+<!-- 加载中 -->
+<div style="margin-top: 0.8em">
+    <div class="ui message loading" v-if="isLoading">
+        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
+    </div>
+</div>
+
 <!-- 没有节点提醒 -->
-<div class="ui icon message warning" v-if="dashboard.defaultClusterId > 0 && dashboard.countNodes == 0">
+<div class="ui icon message warning" v-if="!isLoading && dashboard.defaultClusterId > 0 && dashboard.countNodes == 0">
    <i class="icon warning circle"></i>
    <a :href="'/clusters/cluster/createNode?clusterId=' + dashboard.defaultClusterId">还没有在集群中添加节点，现在去添加？添加节点后才可部署网站服务。</a>
 </div>

 <!-- 升级提醒 -->
-<div class="ui icon message error" v-if="nodeUpgradeInfo.count > 0">
+<div class="ui icon message error" v-if="!isLoading && nodeUpgradeInfo.count > 0">
    <i class="icon warning circle"></i>
    <a href="/clusters">
    升级提醒：有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
 </div>
-<div class="ui icon message error" v-if="monitorNodeUpgradeInfo.count > 0 && teaIsPlus">
+<div class="ui icon message error" v-if="!isLoading && monitorNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/settings/monitorNodes">升级提醒：有 {{monitorNodeUpgradeInfo.count}} 个监控节点需要升级到 v{{monitorNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
-<div class="ui icon message error" v-if="userNodeUpgradeInfo.count > 0 && teaIsPlus">
+<div class="ui icon message error" v-if="!isLoading && userNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/settings/userNodes">升级提醒：有 {{userNodeUpgradeInfo.count}} 个用户节点需要升级到 v{{userNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
-<div class="ui icon message error" v-if="apiNodeUpgradeInfo.count > 0">
+<div class="ui icon message error" v-if="!isLoading && apiNodeUpgradeInfo.count > 0">
    <i class="icon warning circle"></i>
    <a href="/api">升级提醒：有 {{apiNodeUpgradeInfo.count}} 个API节点需要升级到 v{{apiNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
-<div class="ui icon message error" v-if="nsNodeUpgradeInfo.count > 0 && teaIsPlus">
+<div class="ui icon message error" v-if="!isLoading && nsNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/ns/clusters">升级提醒：有 {{nsNodeUpgradeInfo.count}} 个DNS节点需要升级到 v{{nsNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
 </div>
-<div class="ui icon message error" v-if="authorityNodeUpgradeInfo.count > 0 && teaIsPlus">
+<div class="ui icon message error" v-if="!isLoading && authorityNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/settings/authority/nodes">升级提醒：有 {{authorityNodeUpgradeInfo.count}} 个企业版认证节点需要升级到 v{{authorityNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
 </div>

-{$template "menu"}
-
 <!-- 统计图表 -->
-<div class="ui four columns grid">
+<div class="ui four columns grid" v-if="!isLoading">
    <div class="ui column">
        <h4>集群<link-icon href="/clusters" v-if="dashboard.canGoNodes"></link-icon></h4>
        <div class="value"><span>{{dashboard.countNodeClusters}}</span>个</div>
@@ -69,7 +76,7 @@
 <div class="ui divider"></div>

 <!-- 流量 -->
-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <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天流量趋势</a>
 </div>
@@ -82,7 +89,7 @@

 <div class="ui divider"></div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
    <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
 </div>
@@ -94,13 +101,13 @@
 <div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>

 <!-- 域名排行 -->
-<h4>域名访问排行 <span>（24小时）</span></h4>
+<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-domains-chart"></div>

 <div class="ui divider"></div>

 <!-- 节点排行 -->
-<h4>节点访问排行 <span>（24小时）</span></h4>
+<h4 v-show="!isLoading">节点访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-nodes-chart"></div>

 <!-- 指标 -->
--- a/web/views/@default/dashboard/boards/index.js
+++ b/web/views/@default/dashboard/boards/index.js
@@ -1,11 +1,24 @@
 Tea.context(function () {
+	this.isLoading = true
 	this.trafficTab = "hourly"
+	this.metricCharts = []

 	this.$delay(function () {
-		this.reloadHourlyTrafficChart()
-		this.reloadHourlyRequestsChart()
-		this.reloadTopDomainsChart()
-		this.reloadTopNodesChart()
+		this.$post("$")
+			.success(function (resp) {
+				for (let k in resp.data) {
+					this[k] = resp.data[k]
+				}
+
+				this.isLoading = false
+
+				this.$delay(function () {
+					this.reloadHourlyTrafficChart()
+					this.reloadHourlyRequestsChart()
+					this.reloadTopDomainsChart()
+					this.reloadTopNodesChart()
+				})
+			})
 	})

 	this.selectTrafficTab = function (tab) {
@@ -24,15 +37,15 @@ Tea.context(function () {
 	this.reloadHourlyTrafficChart = function () {
 		let stats = this.hourlyTrafficStats
 		this.reloadTrafficChart("hourly-traffic-chart-box", stats, function (args) {
-				let index = args.dataIndex
-				let cachedRatio = 0
-				let attackRatio = 0
-				if (stats[index].bytes > 0) {
-					cachedRatio = Math.round(stats[index].cachedBytes * 10000 / stats[index].bytes) / 100
-					attackRatio = Math.round(stats[index].attackBytes * 10000 / stats[index].bytes) / 100
-				}
+			let index = args.dataIndex
+			let cachedRatio = 0
+			let attackRatio = 0
+			if (stats[index].bytes > 0) {
+				cachedRatio = Math.round(stats[index].cachedBytes * 10000 / stats[index].bytes) / 100
+				attackRatio = Math.round(stats[index].attackBytes * 10000 / stats[index].bytes) / 100
+			}

-				return stats[index].day + " " + stats[index].hour  + "时<br/>总流量：" + teaweb.formatBytes(stats[index].bytes) + "<br/>缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "<br/>拦截比例：" + attackRatio + "%"
+			return stats[index].day + " " + stats[index].hour + "时<br/>总流量：" + teaweb.formatBytes(stats[index].bytes) + "<br/>缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "<br/>拦截比例：" + attackRatio + "%"
 		})
 	}

--- a/web/views/@default/db/node.html
+++ b/web/views/@default/db/node.html
@@ -13,7 +13,7 @@
        <td>
            <label-on :v-is-on="node.isOn"></label-on>

-            <div v-if="status != null" style="margin-top: 0.8em">
+            <div v-if="node.isOn && status != null" style="margin-top: 0.8em">
                <div v-if="status.isOk">
                    <p class="comment">
                        <span v-if="status.version.length > 0">版本： v{{status.version}} /</span>
--- a/web/views/@default/servers/server/boards/index.html
+++ b/web/views/@default/servers/server/boards/index.html
@@ -14,7 +14,7 @@
    </div>
 </div>

-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <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天流量趋势</a>
 </div>
@@ -26,7 +26,7 @@
 <div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>

 <div class="ui divider"></div>
-<div class="ui menu tabular">
+<div class="ui menu tabular" v-show="!isLoading">
    <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
    <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
 </div>
@@ -40,7 +40,7 @@
 <div class="ui divider"></div>

 <!-- 域名排行 -->
-<h4>域名访问排行 <span>（24小时）</span></h4>
+<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
 <div class="chart-box" id="top-domains-chart"></div>

 <div class="ui divider"></div>
--- a/web/views/@default/servers/server/boards/index.js
+++ b/web/views/@default/servers/server/boards/index.js
@@ -30,12 +30,13 @@ Tea.context(function () {
 				for (let k in resp.data) {
 					this[k] = resp.data[k]
 				}
-
-				this.reloadHourlyTrafficChart()
-				this.reloadHourlyRequestsChart()
-				this.reloadTopDomainsChart()
-
 				this.isLoading = false
+
+				this.$delay(function () {
+					this.reloadHourlyTrafficChart()
+					this.reloadHourlyRequestsChart()
+					this.reloadTopDomainsChart()
+				})
 			})
 	}

@@ -63,7 +64,7 @@ Tea.context(function () {
 				attackRatio = Math.round(stats[index].attackBytes * 10000 / stats[index].bytes) / 100
 			}

-			return stats[index].day + " " + stats[index].hour  + "时<br/>总流量：" + teaweb.formatBytes(stats[index].bytes) + "<br/>缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "<br/>拦截比例：" + attackRatio + "%"
+			return stats[index].day + " " + stats[index].hour + "时<br/>总流量：" + teaweb.formatBytes(stats[index].bytes) + "<br/>缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "<br/>拦截比例：" + attackRatio + "%"
 		})
 	}