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

This commit is contained in:
刘祥超
2021-08-30 15:23:31 +08:00
parent 19178f963e
commit 1d9d44ecc3
14 changed files with 188 additions and 99 deletions

View File

@@ -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>

View File

@@ -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 + "%"
})
}