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

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

@@ -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>
<!-- 指标 -->