mirror of
https://github.com/nezhahq/nezha.git
synced 2025-01-22 12:48:14 -05:00
引入Vue
This commit is contained in:
奶爸
parent
8d791d91c1
commit
9f7f101e7f
@ -123,11 +123,13 @@ func reportState() {
|
|||||||
for {
|
for {
|
||||||
if endReport.After(time.Now()) {
|
if endReport.After(time.Now()) {
|
||||||
monitor.TrackNetworkSpeed()
|
monitor.TrackNetworkSpeed()
|
||||||
_, err = client.ReportState(ctx, monitor.GetState(1).PB())
|
_, err = client.ReportState(ctx, monitor.GetState(2).PB())
|
||||||
if err != nil {
|
if err != nil {
|
||||||
log.Printf("reportState error %v", err)
|
log.Printf("reportState error %v", err)
|
||||||
time.Sleep(delayWhenError)
|
time.Sleep(delayWhenError)
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
time.Sleep(time.Second * 1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -52,4 +52,8 @@
|
|||||||
|
|
||||||
.status.cards .description {
|
.status.cards .description {
|
||||||
padding-bottom: 1rem !important;
|
padding-bottom: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.cards .ui.content.popup {
|
||||||
|
min-width: 250px;
|
||||||
}
|
}
|
||||||
@ -7,6 +7,7 @@
|
|||||||
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
<script src="https://cdnjs.loli.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
|
<script src="https://cdnjs.loli.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
|
||||||
<script src="/static/semantic-ui-alerts.min.js"></script>
|
<script src="/static/semantic-ui-alerts.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||||||
<script src="/static/main.js?t_={{fs}}"></script>
|
<script src="/static/main.js?t_={{fs}}"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@ -4,28 +4,43 @@
|
|||||||
<div class="nb-container">
|
<div class="nb-container">
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<div class="ui four status cards">
|
<div class="ui four status cards">
|
||||||
{{range $server := .Servers}}
|
<div v-for='server in servers' class="card">
|
||||||
<div class="card">
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="header">{{if $server.Host.CountryCode}}<i
|
<div class="header"><i v-if='server.Host.CountryCode'
|
||||||
class="{{$server.Host.CountryCode}} flag"></i>{{end}}{{$server.Name}}
|
:class="server.Host.CountryCode + ' flag'"></i>
|
||||||
<i data-html="
|
<?server.Name?>
|
||||||
<div class='content'>
|
<i class="yellow info circle icon"></i>
|
||||||
系统：{{$server.Host.Platform}}-{{$server.Host.PlatformVersion}} [{{if $server.Host.Virtualization}}{{$server.Host.Virtualization}}:{{end}}{{$server.Host.Arch}}]<br>
|
<div class='ui content popup'>
|
||||||
CPU：{{$server.Host.CPU}}<br>
|
系统：
|
||||||
硬盘：{{$server.State.DiskUsed|bf}}/{{$server.State.DiskTotal|bf}}<br>
|
<?server.Host.Platform?>-
|
||||||
内存：{{$server.State.MemUsed|bf}}/{{$server.State.MemTotal|bf}}<br>
|
<?server.Host.PlatformVersion?> [<span v-if='server.Host.Virtualization'>
|
||||||
交换：{{$server.State.SwapUsed|bf}}/{{$server.State.SwapTotal|bf}}<br>
|
<?server.Host.Virtualization?>:</span>
|
||||||
流量：<i class='arrow alternate circle down outline icon'></i>{{$server.State.NetInTransfer|bf}} <i class='arrow alternate circle up outline icon'></i>{{$server.State.NetOutTransfer|bf}}<br>
|
<?server.Host.Arch?>]<br>
|
||||||
启动：{{$server.Host.BootTime|stf}}<br>
|
CPU：
|
||||||
版本：v{{$server.Host.Version}}<br>
|
<?server.Host.CPU?><br>
|
||||||
</div>" class="yellow info circle icon"></i>
|
硬盘：
|
||||||
|
<?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>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<div class="ui grid">
|
<div class="ui grid">
|
||||||
<div class="three wide column">CPU</div>
|
<div class="three wide column">CPU</div>
|
||||||
<div class="thirteen wide column">
|
<div class="thirteen wide column">
|
||||||
<div class="ui active progress" data-value="{{$server.State.CPU}}" data-total="100">
|
<div class="ui active progress" :data-value="server.State.CPU" data-total="100">
|
||||||
<div class="bar">
|
<div class="bar">
|
||||||
<div class="progress"></div>
|
<div class="progress"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -33,8 +48,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="three wide column">内存</div>
|
<div class="three wide column">内存</div>
|
||||||
<div class="thirteen wide column">
|
<div class="thirteen wide column">
|
||||||
<div class="ui active progress" data-value="{{$server.State.MemUsed}}"
|
<div class="ui active progress" :data-value="server.State.MemUsed"
|
||||||
data-total="{{$server.State.MemTotal}}">
|
:data-total="server.State.MemTotal">
|
||||||
<div class="bar">
|
<div class="bar">
|
||||||
<div class="progress"></div>
|
<div class="progress"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -42,8 +57,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="three wide column">交换</div>
|
<div class="three wide column">交换</div>
|
||||||
<div class="thirteen wide column">
|
<div class="thirteen wide column">
|
||||||
<div class="ui active progress" data-value="{{$server.State.SwapUsed}}"
|
<div class="ui active progress" :data-value="server.State.SwapUsed"
|
||||||
data-total="{{$server.State.SwapTotal}}">
|
:data-total="server.State.SwapTotal">
|
||||||
<div class="bar">
|
<div class="bar">
|
||||||
<div class="progress"></div>
|
<div class="progress"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -51,14 +66,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="three wide column">网络</div>
|
<div class="three wide column">网络</div>
|
||||||
<div class="thirteen wide column">
|
<div class="thirteen wide column">
|
||||||
<i
|
<i class="arrow alternate circle down outline icon"></i>
|
||||||
class="arrow alternate circle down outline icon"></i>{{$server.State.NetInSpeed|bf}}/s
|
<?server.State.NetInSpeed?>/s
|
||||||
<i class="arrow alternate circle up outline icon"></i>{{$server.State.NetOutSpeed|bf}}/s
|
<i class="arrow alternate circle up outline icon"></i>
|
||||||
|
<?server.State.NetOutSpeed?>/s
|
||||||
</div>
|
</div>
|
||||||
<div class="three wide column">硬盘</div>
|
<div class="three wide column">硬盘</div>
|
||||||
<div class="thirteen wide column">
|
<div class="thirteen wide column">
|
||||||
<div class="ui active progress" data-value="{{$server.State.DiskUsed}}"
|
<div class="ui active progress" :data-value="server.State.DiskUsed"
|
||||||
data-total="{{$server.State.DiskTotal}}">
|
:data-total="server.State.DiskTotal">
|
||||||
<div class="bar">
|
<div class="bar">
|
||||||
<div class="progress"></div>
|
<div class="progress"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -66,19 +82,33 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="three wide column">在线</div>
|
<div class="three wide column">在线</div>
|
||||||
<div class="thirteen wide column">
|
<div class="thirteen wide column">
|
||||||
<i class="clock icon"></i>{{$server.State.Uptime|sf}}
|
<i class="clock icon"></i>
|
||||||
|
<?server.State.Uptime?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{template "common/footer" .}}
|
{{template "common/footer" .}}
|
||||||
<script>
|
<script>
|
||||||
$('.yellow.info.circle.icon').popup();
|
const servers = {{.Servers }};
|
||||||
$('.progress').progress();
|
var statusCards = new Vue({
|
||||||
|
el: 'div.status.cards',
|
||||||
|
delimiters: ['<?', '?>'],
|
||||||
|
data: {
|
||||||
|
servers,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
$('.progress').progress();
|
||||||
|
$('.yellow.info.icon').popup({
|
||||||
|
popup: '.ui.content.popup'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
{{end}}
|
{{end}}
|
||||||
Loading…
Reference in New Issue
Block a user