Merge pull request #54 from ilay1678/master
调整状态卡片上下空白高度 Co-authored-by: ilay1678 <7021399+ilay1678@users.noreply.github.com>
This commit is contained in:
naiba
GitHub
commit
c4f6837def
@ -10,89 +10,95 @@
|
|||||||
|
|
||||||
<div class="ui styled fluid accordion" v-for="group in groups">
|
<div class="ui styled fluid accordion" v-for="group in groups">
|
||||||
<div class="active title"><i class="dropdown icon"></i>@#(group.Tag!==''?group.Tag:'默认')#@</div>
|
<div class="active title"><i class="dropdown icon"></i>@#(group.Tag!==''?group.Tag:'默认')#@</div>
|
||||||
<div class="active content"><div class="ui four stackable status cards"> <div v-for='server in group.data' :id="server.ID" class="card">
|
<div class="active content">
|
||||||
<div class="content" v-if='server.Host'>
|
<div class="ui four stackable status cards">
|
||||||
<div class="header"><i :class="server.Host.CountryCode + ' flag'"></i><i
|
<div v-for='server in group.data' :id="server.ID" class="ui card">
|
||||||
v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
|
<div class="content" v-if='server.Host' style="margin-top: 10px;padding-bottom: 5px">
|
||||||
v-if='server.Host.Platform == "linux"' class="linux icon"></i><i
|
<div class="header"><i :class="server.Host.CountryCode + ' flag'"></i><i
|
||||||
v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
|
v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
|
||||||
v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name +
|
v-if='server.Host.Platform == "linux"' class="linux icon"></i><i
|
||||||
(server.live?'':' [已离线]')#@
|
v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
|
||||||
<i class="yellow info circle icon"></i>
|
v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name
|
||||||
<div class='ui content popup'>
|
+
|
||||||
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
|
(server.live?'':' [已离线]')#@
|
||||||
v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br>
|
<i class="yellow info circle icon"></i>
|
||||||
CPU：@#server.Host.CPU#@<br>
|
<div class="ui divider" style="margin-bottom: 5px"></div>
|
||||||
硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br>
|
<div class='ui content popup' style="margin-bottom: 0">
|
||||||
内存：@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br>
|
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
|
||||||
交换：@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br>
|
v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br>
|
||||||
流量：<i
|
CPU：@#server.Host.CPU#@<br>
|
||||||
class='arrow alternate circle down outline icon'></i>@#formatByteSize(server.State.NetInTransfer)#@<i
|
硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br>
|
||||||
class='arrow alternate circle up outline icon'></i>@#formatByteSize(server.State.NetOutTransfer)#@<br>
|
内存：@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br>
|
||||||
启动：@# formatTimestamp(server.Host.BootTime) #@<br>
|
交换：@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br>
|
||||||
版本：@#server.Host.Version#@<br>
|
流量：<i
|
||||||
|
class='arrow alternate circle down outline icon'></i>@#formatByteSize(server.State.NetInTransfer)#@<i
|
||||||
|
class='arrow alternate circle up outline icon'></i>@#formatByteSize(server.State.NetOutTransfer)#@<br>
|
||||||
|
启动：@# formatTimestamp(server.Host.BootTime) #@<br>
|
||||||
|
版本：@#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="formatPercent(server.live,server.State.CPU, 100).class">
|
||||||
|
<div class="bar"
|
||||||
|
:style="formatPercent(server.live,server.State.CPU, 100).style">
|
||||||
|
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">内存</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<div
|
||||||
|
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
|
||||||
|
<div class="bar"
|
||||||
|
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
|
||||||
|
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">交换</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<div
|
||||||
|
:class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
|
||||||
|
<div class="bar"
|
||||||
|
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
|
||||||
|
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">网络</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<i class="arrow alternate circle down outline icon"></i>
|
||||||
|
@#formatByteSize(server.State.NetInSpeed)#@/s
|
||||||
|
<i class="arrow alternate circle up outline icon"></i>
|
||||||
|
@#formatByteSize(server.State.NetOutSpeed)#@/s
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">硬盘</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<div
|
||||||
|
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
|
||||||
|
<div class="bar"
|
||||||
|
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
|
||||||
|
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">在线</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="content" v-else>
|
||||||
<div class="description">
|
<p>@#server.Name#@</p>
|
||||||
<div class="ui grid">
|
<p>节点已离线</p>
|
||||||
<div class="three wide column">CPU</div>
|
|
||||||
<div class="thirteen wide column">
|
|
||||||
<div :class="formatPercent(server.live,server.State.CPU, 100).class">
|
|
||||||
<div class="bar"
|
|
||||||
:style="formatPercent(server.live,server.State.CPU, 100).style">
|
|
||||||
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="three wide column">内存</div>
|
|
||||||
<div class="thirteen wide column">
|
|
||||||
<div
|
|
||||||
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
|
|
||||||
<div class="bar"
|
|
||||||
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
|
|
||||||
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="three wide column">交换</div>
|
|
||||||
<div class="thirteen wide column">
|
|
||||||
<div
|
|
||||||
:class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
|
|
||||||
<div class="bar"
|
|
||||||
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
|
|
||||||
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="three wide column">网络</div>
|
|
||||||
<div class="thirteen wide column">
|
|
||||||
<i class="arrow alternate circle down outline icon"></i>
|
|
||||||
@#formatByteSize(server.State.NetInSpeed)#@/s
|
|
||||||
<i class="arrow alternate circle up outline icon"></i>
|
|
||||||
@#formatByteSize(server.State.NetOutSpeed)#@/s
|
|
||||||
</div>
|
|
||||||
<div class="three wide column">硬盘</div>
|
|
||||||
<div class="thirteen wide column">
|
|
||||||
<div
|
|
||||||
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
|
|
||||||
<div class="bar"
|
|
||||||
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
|
|
||||||
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="three wide column">在线</div>
|
|
||||||
<div class="thirteen wide column">
|
|
||||||
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content" v-else>
|
</div>
|
||||||
<p>@#server.Name#@</p>
|
|
||||||
<p>节点已离线</p>
|
|
||||||
</div>
|
|
||||||
</div></div></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -105,7 +111,7 @@
|
|||||||
delimiters: ['@#', '#@'],
|
delimiters: ['@#', '#@'],
|
||||||
data: {
|
data: {
|
||||||
data: initData,
|
data: initData,
|
||||||
groups:[],
|
groups: [],
|
||||||
cache: [],
|
cache: [],
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -172,7 +178,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
function groupingData(data, filed){
|
|
||||||
|
function groupingData(data, filed) {
|
||||||
let map = {};
|
let map = {};
|
||||||
|
|
||||||
let dest = [];
|
let dest = [];
|
||||||
@ -204,6 +211,7 @@
|
|||||||
return dest;
|
return dest;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
||||||
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
||||||
ws.onopen = function (evt) {
|
ws.onopen = function (evt) {
|
||||||
@ -230,7 +238,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
statusCards.groups=groupingData(statusCards.servers,"Tag")
|
statusCards.groups = groupingData(statusCards.servers, "Tag")
|
||||||
}
|
}
|
||||||
ws.onclose = function () {
|
ws.onclose = function () {
|
||||||
$.suiAlert({
|
$.suiAlert({
|
||||||
@ -242,7 +250,7 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
$('.ui.accordion')
|
$('.ui.accordion')
|
||||||
.accordion({"exclusive":false})
|
.accordion({"exclusive": false})
|
||||||
;
|
;
|
||||||
</script>
|
</script>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user