114 lines
5.4 KiB
HTML
114 lines
5.4 KiB
HTML
{{define "page/home"}}
|
||
{{template "common/header" .}}
|
||
{{template "common/menu" .}}
|
||
<div class="nb-container">
|
||
<div class="ui container">
|
||
<div class="ui four status cards">
|
||
<div v-for='server in servers' class="card">
|
||
<div class="content">
|
||
<div class="header"><i v-if='server.Host.CountryCode'
|
||
:class="server.Host.CountryCode + ' flag'"></i>
|
||
<?server.Name?>
|
||
<i class="yellow info circle icon"></i>
|
||
<div class='ui content popup'>
|
||
系统：
|
||
<?server.Host.Platform?>-
|
||
<?server.Host.PlatformVersion?> [<span v-if='server.Host.Virtualization'>
|
||
<?server.Host.Virtualization?>:</span>
|
||
<?server.Host.Arch?>]<br>
|
||
CPU：
|
||
<?server.Host.CPU?><br>
|
||
硬盘：
|
||
<?server.State.DiskUsed?>/
|
||
<?server.State.DiskTotal?><br>
|
||
内存：
|
||
<?server.State.MemUsed?>/
|
||
<?server.State.MemTotal?><br>
|
||
交换：
|
||
<?server.State.SwapUsed?>/
|
||
<?server.State.SwapTotal?><br>
|
||
流量：<i class='arrow alternate circle down outline icon'></i>
|
||
<?server.State.NetInTransfer?> <i class='arrow alternate circle up outline icon'></i>
|
||
<?server.State.NetOutTransfer?><br>
|
||
启动：
|
||
<?server.Host.BootTime?><br>
|
||
版本：v
|
||
<?server.Host.Version?><br>
|
||
</div>
|
||
</div>
|
||
<div class="description">
|
||
<div class="ui grid">
|
||
<div class="three wide column">CPU</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui active progress" :data-value="server.State.CPU" data-total="100">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">内存</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui active progress" :data-value="server.State.MemUsed"
|
||
:data-total="server.State.MemTotal">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">交换</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui active progress" :data-value="server.State.SwapUsed"
|
||
:data-total="server.State.SwapTotal">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">网络</div>
|
||
<div class="thirteen wide column">
|
||
<i class="arrow alternate circle down outline icon"></i>
|
||
<?server.State.NetInSpeed?>/s
|
||
<i class="arrow alternate circle up outline icon"></i>
|
||
<?server.State.NetOutSpeed?>/s
|
||
</div>
|
||
<div class="three wide column">硬盘</div>
|
||
<div class="thirteen wide column">
|
||
<div class="ui active progress" :data-value="server.State.DiskUsed"
|
||
:data-total="server.State.DiskTotal">
|
||
<div class="bar">
|
||
<div class="progress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="three wide column">在线</div>
|
||
<div class="thirteen wide column">
|
||
<i class="clock icon"></i>
|
||
<?server.State.Uptime?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{template "common/footer" .}}
|
||
<script>
|
||
const servers = {{.Servers }};
|
||
var statusCards = new Vue({
|
||
el: 'div.status.cards',
|
||
delimiters: ['<?', '?>'],
|
||
data: {
|
||
servers,
|
||
},
|
||
mounted() {
|
||
$('.progress').progress();
|
||
$('.yellow.info.icon').popup({
|
||
popup: '.ui.content.popup'
|
||
});
|
||
},
|
||
methods: {
|
||
}
|
||
});
|
||
</script>
|
||
{{end}} |