@#server.Name#@
+ v-if='server.Host.Platform == "freebsd"' class="freebsd icon">@#server.Name + (server.live?'':' [已离线]')#@
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [
CPU
-
-
+
+
内存
-
-
+
+
交换
-
-
+
+
@@ -68,9 +68,9 @@
硬盘
-
-
+
@@ -76,25 +76,26 @@
@#server.State?formatByteSize(server.State.NetInTransfer)+'|'+formatByteSize(server.State.NetOutTransfer):'-'#@
-
-
-
+
@@ -99,21 +99,44 @@
data: {
servers: initData,
pulled: false,
+ cache: [],
},
mounted() {
- $('.progress').progress();
$('.yellow.info.icon').popup({
popup: '.ui.content.popup'
});
},
methods: {
- isAlive(s) {
- if (!s.Host) return false
- const lastActive = new Date(s.LastActive).getTime()
- if (this.pulled > 10 && Date.now() - lastActive > 20 * 1000) {
- return false
+ formatPercent(live, used, total) {
+ const percent = live ? (parseInt(used / total * 100) || 0) : -1
+ if (!this.cache[percent]) {
+ this.cache[percent] = {
+ class: {
+ ui: true,
+ progress: true,
+ },
+ style: {
+ 'transition-duration': '300ms',
+ 'min-width': 'unset',
+ width: percent + '% !important',
+ },
+ percent,
+ }
+ if (percent < 0) {
+ this.cache[percent].style['background-color'] = 'slategray'
+ this.cache[percent].class.offline = true
+ } else if (percent < 51) {
+ this.cache[percent].style['background-color'] = 'lime'
+ this.cache[percent].class.fine = true
+ } else if (percent < 81) {
+ this.cache[percent].style['background-color'] = 'orange'
+ this.cache[percent].class.warning = true
+ } else {
+ this.cache[percent].style['background-color'] = 'crimson'
+ this.cache[percent].class.error = true
+ }
}
- return true
+ return this.cache[percent]
},
secondToDate(s) {
var d = Math.floor(s / 3600 / 24);
@@ -154,13 +177,15 @@
const keys = Object.keys(statusCards.servers)
for (let i = 0; i < keys.length; i++) {
const ns = statusCards.servers[keys[i]];
- // 进度条
- const bars = [
- $('#' + ns.ID + ' .cpu.progress'),
- $('#' + ns.ID + ' .mem.progress'),
- $('#' + ns.ID + ' .swap.progress'),
- $('#' + ns.ID + ' .disk.progress')
- ]
+ if (!ns.Host) ns.live = false
+ else {
+ const lastActive = new Date(ns.LastActive).getTime()
+ if (statusCards.pulled > 3 && Date.now() - lastActive > 5 * 1000) {
+ ns.live = false
+ } else {
+ ns.live = true
+ }
+ }
for (let j = 0; j < oldServers.length; j++) {
const os = oldServers[j];
if (ns.ID == os.ID) {
@@ -171,13 +196,6 @@
popup: '.ui.content.popup'
});
}
- // 刷新进度条
- bars.forEach((b, i) => {
- if (b[0] && b[0].dataset) {
- b.progress('set total', i == 0 ? 100 : b[0].dataset.total);
- b.progress('update progress', b[0].dataset.value);
- }
- })
}
}
ws.onclose = function () {
diff --git a/resource/template/theme-hotaru/home.html b/resource/template/theme-hotaru/home.html
index 0c39c6b..0c550b9 100644
--- a/resource/template/theme-hotaru/home.html
+++ b/resource/template/theme-hotaru/home.html
@@ -16,13 +16,13 @@
-
-
-
+
+
+
{{if ts .CustomCSS}}
-
+ {{tag "/style"}}
{{end}}
@@ -62,8 +62,8 @@
- @#isAlive(server)?'运行中':pulled>3?'已离线':'……'#@
+ :class="'progress-bar progress-bar-'+ (server.live?'success':pulled>3?'danger':'warning')">
+ @#server.live?'运行中':pulled>3?'已离线':'……'#@
-
- @#parseInt(server.State?server.State.CPU:0)#@%
+
+
+ @#formatPercent(server.State.CPU, 100).percent#@%
-
+
+
@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%
-
+
+
@@ -116,9 +117,9 @@
@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%
-
-
+
@@ -153,11 +154,43 @@
data: {
servers: initData,
pulled: false,
+ cache: [],
},
mounted() {
this.troggleDarkMode();
},
methods: {
+ formatPercent(live, used, total) {
+ const percent = live ? (parseInt(used / total * 100) || 0) : -1
+ if (!this.cache[percent]) {
+ this.cache[percent] = {
+ class: {
+ ui: true,
+ progress: true,
+ },
+ style: {
+ 'transition-duration': '300ms',
+ 'min-width': 'unset',
+ width: percent + '% !important',
+ },
+ percent,
+ }
+ if (percent < 0) {
+ this.cache[percent].style['background-color'] = 'slategray'
+ this.cache[percent].class.offline = true
+ } else if (percent < 51) {
+ this.cache[percent].style['background-color'] = 'lime'
+ this.cache[percent].class.fine = true
+ } else if (percent < 81) {
+ this.cache[percent].style['background-color'] = 'orange'
+ this.cache[percent].class.warning = true
+ } else {
+ this.cache[percent].style['background-color'] = 'crimson'
+ this.cache[percent].class.error = true
+ }
+ }
+ return this.cache[percent]
+ },
readableBytes(bytes) {
var i = Math.floor(Math.log(bytes) / Math.log(1024)),
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
@@ -165,6 +198,11 @@
return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
},
troggleDarkMode() {
+ const hour = new Date(Date.now()).getHours()
+ if (hour > 17 || hour < 4) {
+ document.body.classList.add('dark');
+ }
+ return
//darkmode
if (document.getElementById("darkmodeButton")) {
var night = parseInt(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*=\s*([^;]*).*$)|^.*$/, "$1") || '0');
@@ -189,14 +227,6 @@
console.log('Darkmode not Support');
}
},
- isAlive(s) {
- if (!s.Host) return false
- const lastActive = new Date(s.LastActive).getTime()
- if (this.pulled > 10 && Date.now() - lastActive > 20 * 1000) {
- return false
- }
- return true
- },
secondToDate(s) {
var d = Math.floor(s / 3600 / 24);
var h = Math.floor(s / 3600 % 24);
@@ -230,36 +260,20 @@
}, 1000 * 60 * 6);
}
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]];
- // 进度条
- const bars = [
- $('#' + ns.ID + ' .cpu.progress'),
- $('#' + ns.ID + ' .mem.progress'),
- $('#' + ns.ID + ' .swap.progress'),
- $('#' + ns.ID + ' .disk.progress')
- ]
- for (let j = 0; j < oldServers.length; j++) {
- const os = oldServers[j];
- if (ns.ID == os.ID) {
- break
+ if (!ns.Host) ns.live = false
+ else {
+ const lastActive = new Date(ns.LastActive).getTime()
+ if (statusCards.pulled > 3 && Date.now() - lastActive > 5 * 1000) {
+ ns.live = false
+ } else {
+ ns.live = true
}
- // 新加入的仔
- $('#' + ns.ID + ' .yellow.info.icon').popup({
- popup: '.ui.content.popup'
- });
}
- // 刷新进度条
- bars.forEach((b, i) => {
- if (b[0] && b[0].dataset) {
- b.progress('set total', i == 0 ? 100 : b[0].dataset.total);
- b.progress('update progress', b[0].dataset.value);
- }
- })
}
}
ws.onclose = function () {
+