mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-04 13:10:26 +08:00
69 lines
2.9 KiB
HTML
69 lines
2.9 KiB
HTML
|
{$layout}
|
|||
|
|
{$template "/echarts"}
|
|||
|
|
|
|||
|
|
<div class="ui four columns grid">
|
|||
|
|
<div class="ui column">
|
|||
|
|
<h4>在线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
|
|||
|
|
<div class="value"><span>{{board.countActiveNodes}}</span>个</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ui column">
|
|||
|
|
<h4>离线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
|
|||
|
|
<div class="value"><span :class="{red: board.countInactiveNodes > 0}">{{board.countInactiveNodes}}</span>个</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ui column">
|
|||
|
|
<h4>服务</h4>
|
|||
|
|
<div class="value"><span>{{board.countServers}}</span>个</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ui column no-border">
|
|||
|
|
<h4>用户</h4>
|
|||
|
|
<div class="value"><span>{{board.countUsers}}</span>个</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="ui menu tabular">
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<!-- 按小时统计流量 -->
|
|||
|
|
<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
|
|||
|
|
|
|||
|
|
<!-- 按日统计流量 -->
|
|||
|
|
<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
|
|||
|
|
|
|||
|
|
<div class="ui divider"></div>
|
|||
|
|
|
|||
|
|
<div class="ui menu tabular">
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<!-- 按小时统计访问量 -->
|
|||
|
|
<div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>
|
|||
|
|
|
|||
|
|
<!-- 按日统计访问量 -->
|
|||
|
|
<div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>
|
|||
|
|
|
|||
|
|
<div class="ui divider"></div>
|
|||
|
|
|
|||
|
|
<!-- 域名排行 -->
|
|||
|
|
<h4>域名排行 <span>（24小时）</span></h4>
|
|||
|
|
<div class="chart-box" id="top-domains-chart"></div>
|
|||
|
|
|
|||
|
|
<div class="ui divider"></div>
|
|||
|
|
|
|||
|
|
<!-- 节点排行 -->
|
|||
|
|
<h4>节点排行 <span>（24小时）</span></h4>
|
|||
|
|
<div class="chart-box" id="top-nodes-chart"></div>
|
|||
|
|
|
|||
|
|
<div class="ui divider"></div>
|
|||
|
|
|
|||
|
|
<div class="ui menu tabular">
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
|
|||
|
|
<div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
|
|||
|
|
<div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></div>
|