spark-store-project/ServerStatus
14
0
Fork 0
mirror of https://github.com//cppla/ServerStatus synced 2025-07-05 08:55:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

前端增加显示丢包率啊,样式待调整

Browse Source
This commit is contained in:
ubuntu 2018-08-29 13:30:32 +08:00
parent 96a4654857
commit e80575bf12
4 changed files with 26 additions and 0 deletions

4
web/css/dark.css

@ -25,17 +25,20 @@ tr.odd.expandRow > :hover { background: #000 !important; }
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
#type, tr td:nth-child(4) { display:none; visibility:hidden; } #type, tr td:nth-child(4) { display:none; visibility:hidden; }
#location, tr td:nth-child(5) { display:none; visibility:hidden; } #location, tr td:nth-child(5) { display:none; visibility:hidden; }
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#type, tr td:nth-child(4) { display:none; visibility:hidden; } #type, tr td:nth-child(4) { display:none; visibility:hidden; }
#location, tr td:nth-child(5) { display:none; visibility:hidden; } #location, tr td:nth-child(5) { display:none; visibility:hidden; }
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; } #uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
} }
@media only screen and (max-width: 533px) { @media only screen and (max-width: 533px) {
#type, tr td:nth-child(4) { display:none; visibility:hidden; } #type, tr td:nth-child(4) { display:none; visibility:hidden; }
#location, tr td:nth-child(5) { display:none; visibility:hidden; } #location, tr td:nth-child(5) { display:none; visibility:hidden; }
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; } #uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
#network, tr td:nth-child(8) { display:none; visibility:hidden; } #network, tr td:nth-child(8) { display:none; visibility:hidden; }
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
} }
@media only screen and (max-width: 450px) { @media only screen and (max-width: 450px) {
body { font-size: 10px; } body { font-size: 10px; }
@ -46,4 +49,5 @@ tr.odd.expandRow > :hover { background: #000 !important; }
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; } #uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
#network, tr td:nth-child(8) { display:none; visibility:hidden; } #network, tr td:nth-child(8) { display:none; visibility:hidden; }
#cpu, #ram, #hdd { min-width: 25px; max-width: 50px; } #cpu, #ram, #hdd { min-width: 25px; max-width: 50px; }
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
} }

4
web/css/light.css

@ -22,17 +22,20 @@ tr.odd.expandRow > :hover { background: #FFF !important; }
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
#type, tr td:nth-child(4) { display:none; visibility:hidden; } #type, tr td:nth-child(4) { display:none; visibility:hidden; }
#location, tr td:nth-child(5) { display:none; visibility:hidden; } #location, tr td:nth-child(5) { display:none; visibility:hidden; }
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#type, tr td:nth-child(4) { display:none; visibility:hidden; } #type, tr td:nth-child(4) { display:none; visibility:hidden; }
#location, tr td:nth-child(5) { display:none; visibility:hidden; } #location, tr td:nth-child(5) { display:none; visibility:hidden; }
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; } #uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
} }
@media only screen and (max-width: 533px) { @media only screen and (max-width: 533px) {
#type, tr td:nth-child(4) { display:none; visibility:hidden; } #type, tr td:nth-child(4) { display:none; visibility:hidden; }
#location, tr td:nth-child(5) { display:none; visibility:hidden; } #location, tr td:nth-child(5) { display:none; visibility:hidden; }
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; } #uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
#network, tr td:nth-child(8) { display:none; visibility:hidden; } #network, tr td:nth-child(8) { display:none; visibility:hidden; }
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
} }
@media only screen and (max-width: 450px) { @media only screen and (max-width: 450px) {
body { font-size: 10px; } body { font-size: 10px; }
@ -43,4 +46,5 @@ tr.odd.expandRow > :hover { background: #FFF !important; }
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; } #uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
#network, tr td:nth-child(8) { display:none; visibility:hidden; } #network, tr td:nth-child(8) { display:none; visibility:hidden; }
#cpu, #ram, #hdd { min-width: 25px; max-width: 50px; } #cpu, #ram, #hdd { min-width: 25px; max-width: 50px; }
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
} }

1
web/index.html

@ -90,6 +90,7 @@
<th id="cpu">处理器</th> <th id="cpu">处理器</th>
<th id="ram">内存</th> <th id="ram">内存</th>
<th id="hdd">硬盘</th> <th id="hdd">硬盘</th>
<th id="ping">丢包率(CU|CT|CM)</th>
</tr> </tr>
</thead> </thead>
<tbody id="servers"> <tbody id="servers">

17
web/js/serverstatus.js

@ -97,6 +97,7 @@ function uptime() {
"<td id=\"cpu\"><div class=\"progress progress-striped active\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" + "<td id=\"cpu\"><div class=\"progress progress-striped active\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
"<td id=\"memory\"><div class=\"progress progress-striped active\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" + "<td id=\"memory\"><div class=\"progress progress-striped active\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
"<td id=\"hdd\"><div class=\"progress progress-striped active\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" + "<td id=\"hdd\"><div class=\"progress progress-striped active\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
"<td id=\"ping\"><div class=\"progress progress-striped active\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
"</tr>" + "</tr>" +
"<tr class=\"expandRow " + hack + "\"><td colspan=\"12\"><div class=\"accordian-body collapse\" id=\"rt" + i + "\">" + "<tr class=\"expandRow " + hack + "\"><td colspan=\"12\"><div class=\"accordian-body collapse\" id=\"rt" + i + "\">" +
"<div id=\"expand_mem\">加载中</div>" + "<div id=\"expand_mem\">加载中</div>" +
@ -165,6 +166,9 @@ function uptime() {
TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-danger"; TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-danger";
TableRow.children["hdd"].children[0].children[0].style.width = "100%"; TableRow.children["hdd"].children[0].children[0].style.width = "100%";
TableRow.children["hdd"].children[0].children[0].innerHTML = "<small>关闭</small>"; TableRow.children["hdd"].children[0].children[0].innerHTML = "<small>关闭</small>";
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-danger";
TableRow.children["ping"].children[0].children[0].style.width = "100%";
TableRow.children["ping"].children[0].children[0].innerHTML = "<small>关闭</small>";
if(ExpandRow.hasClass("in")) { if(ExpandRow.hasClass("in")) {
ExpandRow.collapse("hide"); ExpandRow.collapse("hide");
} }
@ -267,6 +271,16 @@ function uptime() {
TableRow.children["hdd"].children[0].children[0].innerHTML = HDD + "%"; TableRow.children["hdd"].children[0].children[0].innerHTML = HDD + "%";
ExpandRow[0].children["expand_hdd"].innerHTML = "硬盘: " + bytesToSize(result.servers[i].hdd_used*1024*1024, 2) + " / " + bytesToSize(result.servers[i].hdd_total*1024*1024, 2); ExpandRow[0].children["expand_hdd"].innerHTML = "硬盘: " + bytesToSize(result.servers[i].hdd_used*1024*1024, 2) + " / " + bytesToSize(result.servers[i].hdd_total*1024*1024, 2);
// ping
var PING_10010 = result.servers[i].ping_10010.toFixed(2);
var PING_189 = result.servers[i].ping_189.toFixed(2);
var PING_10086 = result.servers[i].ping_10086.toFixed(2);
if (PING_10010 >= 5.0 || PING_189 >= 5.0 || PING_10086 >= 5.0)
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-danger";
else
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-success";
TableRow.children["ping"].children[0].children[0].innerHTML = PING_10010 + "% 💻 " + PING_189 + "% 💻 " + PING_10086 + "%";
// Custom // Custom
if (result.servers[i].custom) { if (result.servers[i].custom) {
ExpandRow[0].children["expand_custom"].innerHTML = result.servers[i].custom ExpandRow[0].children["expand_custom"].innerHTML = result.servers[i].custom
@ -302,6 +316,9 @@ function uptime() {
TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-error"; TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-error";
TableRow.children["hdd"].children[0].children[0].style.width = "100%"; TableRow.children["hdd"].children[0].children[0].style.width = "100%";
TableRow.children["hdd"].children[0].children[0].innerHTML = "<small>错误</small>"; TableRow.children["hdd"].children[0].children[0].innerHTML = "<small>错误</small>";
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-error";
TableRow.children["ping"].children[0].children[0].style.width = "100%";
TableRow.children["ping"].children[0].children[0].innerHTML = "<small>错误</small>";
if(ExpandRow.hasClass("in")) { if(ExpandRow.hasClass("in")) {
ExpandRow.collapse("hide"); ExpandRow.collapse("hide");
} }