tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-02-02 01:28:13 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

💄 improve(ui): hotaru 主题底部进度条数据融合

Browse Source
This commit is contained in:
naiba 2020-12-20 21:47:12 +08:00
parent b46827f244
commit e912578723
3 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
resource/static/theme-hotaru/css/main.css
View File

@ -159,11 +159,6 @@ h1 {
}
}
.location-progress .bar {
height: 0.5em !important;
margin-bottom: 1em !important;
}
.ui.progress {
margin: unset !important;
}
@ -175,4 +170,21 @@ h1 {
table tr {
height: 3em !important;
}
.location-progress>.ui.progress>.bar {
height: 0.5em !important;
margin-bottom: 1em !important;
}
.state-online {
background-color: rgb(0, 235, 139);
border-radius: .3em;
margin-left: 1em;
}
.state-offline {
background-color: slategray;
border-radius: .3em;
margin-left: 1em;
}

4
resource/template/theme-default/home.html
View File

@ -98,7 +98,6 @@
delimiters: ['@#', '#@'],
data: {
servers: initData,
pulled: false,
cache: [],
},
mounted() {
@ -168,14 +167,13 @@
ws.onmessage = function (evt) {
const oldServers = statusCards.servers
statusCards.servers = JSON.parse(evt.data)
statusCards.pulled++
const keys = Object.keys(statusCards.servers)
for (let i = 0; i < keys.length; i++) {
const ns = statusCards.servers[keys[i]];
if (!ns.Host) ns.live = false
else {
const lastActive = new Date(ns.LastActive).getTime()
if (statusCards.pulled > 3 && Date.now() - lastActive > 5 * 1000) {
if (Date.now() - lastActive > 5 * 1000) {
ns.live = false
} else {
ns.live = true

27
resource/template/theme-hotaru/home.html
View File

@ -17,7 +17,7 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
<link rel="stylesheet" href="/static/theme-hotaru/css/core.css?v202012121912" type="text/css">
<link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012202117" type="text/css">
<link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012202136" type="text/css">
<link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css">
{{if ts .CustomCSS}}
{{tag "style"}}
@ -61,9 +61,8 @@
<tr v-for='server in servers' :id="server.ID">
<td>
<div class="progress">
<div style="width: 100%;"
:class="'progress-bar progress-bar-'+ (server.live?'success':pulled>3?'danger':'warning')">
<small>@#server.live?'运行中':pulled>3?'已离线':'……'#@</small>
<div :class="'state-'+ (server.live?'online':'offline')">
<small>@#server.live?'运行中':'已离线'#@</small>
</div>
</div>
</td>
@ -112,14 +111,15 @@
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img
:src="'/static/theme-hotaru/img/clients/'+(server.Host?server.Host.CountryCode.toUpperCase():'HK')+'.png'">
:src="'/static/theme-hotaru/img/clients/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'">
&nbsp;@#server.Name#@</h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div :class="formatPercent(server.live,server.State?server.State.CPU:0, 100).class">
<div
:class="formatPercent(server.live,mergeUsage(server.State, server.Host),100).class">
<div class="bar"
:style="formatPercent(server.live,server.State?server.State.CPU:0, 100).style">
:style="formatPercent(server.live,mergeUsage(server.State, server.Host),100).style">
</div>
</div>
</div>
@ -151,13 +151,21 @@
delimiters: ['@#', '#@'],
data: {
servers: initData,
pulled: false,
cache: [],
},
mounted() {
this.troggleDarkMode();
},
methods: {
mergeUsage(state, host) {
if (!state) {
return 0
}
if (!host) {
return state.CPU
}
return (state.CPU + (state.MemUsed / host.MemTotal * 100) + (state.DiskUsed / host.DiskTotal * 100)) / 3
},
formatPercent(live, used, total) {
const percent = live ? (parseInt(used / total * 100) || 0) : -1
if (!this.cache[percent]) {
@ -230,14 +238,13 @@
}
ws.onmessage = function (evt) {
statusCards.servers = JSON.parse(evt.data)
statusCards.pulled++
const keys = Object.keys(statusCards.servers)
for (let i = 0; i < keys.length; i++) {
const ns = statusCards.servers[keys[i]];
if (!ns.Host) ns.live = false
else {
const lastActive = new Date(ns.LastActive).getTime()
if (statusCards.pulled > 3 && Date.now() - lastActive > 5 * 1000) {
if (Date.now() - lastActive > 5 * 1000) {
ns.live = false
} else {
ns.live = true