refactor: remove countdown/spin from header, simplify status bar
This commit is contained in:
ngfchl
@@ -163,6 +163,19 @@
|
||||
color: var(--dim)
|
||||
}
|
||||
|
||||
.hmid .ant-spin {
|
||||
vertical-align: middle;
|
||||
margin-right: 2px
|
||||
}
|
||||
|
||||
.app-header > span:last-child,
|
||||
.app-header > div:last-child {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
@@ -386,8 +399,8 @@
|
||||
|
||||
.dc-spinner {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
@@ -395,10 +408,21 @@
|
||||
|
||||
.dc-spinner-txt {
|
||||
position: absolute;
|
||||
font-size: 7px;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
font-family: var(--mono);
|
||||
color: var(--text)
|
||||
color: var(--text);
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.ant-spin-dot {
|
||||
color: var(--accent) !important
|
||||
}
|
||||
|
||||
.ant-spin-text {
|
||||
color: var(--text) !important;
|
||||
font-size: 12px !important;
|
||||
font-family: var(--mono) !important
|
||||
}
|
||||
|
||||
.dc-sub {
|
||||
@@ -407,16 +431,6 @@
|
||||
color: var(--dim)
|
||||
}
|
||||
|
||||
.dc-time {
|
||||
font-size: 10px;
|
||||
color: var(--dim);
|
||||
font-family: var(--mono);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px
|
||||
}
|
||||
|
||||
.dc-sub {
|
||||
padding: 1px 16px 0;
|
||||
font-size: 10px;
|
||||
@@ -440,9 +454,20 @@
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.dc-left { border-right: none; border-bottom: 1px solid var(--border); margin-bottom: 8px }
|
||||
.dc-col { flex: none !important; width: 100% }
|
||||
.dashboard { display: none !important }
|
||||
.dc-left {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
.dc-col {
|
||||
flex: none !important;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: none !important
|
||||
}
|
||||
}
|
||||
|
||||
.dc-gpu-full {
|
||||
@@ -962,7 +987,7 @@
|
||||
</div>
|
||||
|
||||
<div class="dashboard" v-if="deviceCount > 0">
|
||||
<a-row :gutter="[12,12]">
|
||||
<a-row :gutter="[12,12]">
|
||||
<a-col :md="12">
|
||||
<div class="dash-card">
|
||||
<div class="dash-title">硬件状态</div>
|
||||
@@ -1037,7 +1062,8 @@
|
||||
<!-- 全部在线 -->
|
||||
<template v-for="name in onlineDevices">
|
||||
<div class="device-card" :key="name">
|
||||
<div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time"><span class="dc-spinner"><a-icon type="loading" style="font-size:16px;color:var(--accent)" spin/><span class="dc-spinner-txt">{{ countdownVal }}</span></span></span></div>
|
||||
<div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time">{{ ago(devices[name].info.last_seen) }}</span>
|
||||
</div>
|
||||
<div class="dc-sub"
|
||||
v-if="devices[name].info.motherboard && (devices[name].info.motherboard.manufacturer || devices[name].info.motherboard.product)">
|
||||
{{ devices[name].info.motherboard.manufacturer }} {{ devices[name].info.motherboard.product }}
|
||||
@@ -1098,14 +1124,15 @@
|
||||
hwOnlyDevices.length }} 台仅硬件在线
|
||||
</div>
|
||||
<div class="device-card" :key="name">
|
||||
<div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time"><span class="dc-spinner"><a-icon type="loading" style="font-size:16px;color:var(--accent)" spin/><span class="dc-spinner-txt">{{ countdownVal }}</span></span></span></div>
|
||||
<div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time">{{ ago(devices[name].info.last_seen) }}</span>
|
||||
</div>
|
||||
<div class="dc-sub"
|
||||
v-if="devices[name].info.motherboard && (devices[name].info.motherboard.manufacturer || devices[name].info.motherboard.product)">
|
||||
{{ devices[name].info.motherboard.manufacturer }} {{ devices[name].info.motherboard.product }}
|
||||
</div>
|
||||
<div class="dc-bd" style="padding:4px 14px 8px">
|
||||
<hw-section :cpu="getLive(name).cpu||{}" :memory="getLive(name).memory||{}"
|
||||
:info="devices[name].info" :is-on="true"></hw-section>
|
||||
:info="devices[name].info" :is-on="true"></hw-section>
|
||||
<gpu-section :gpus="getLive(name).gpus||[]" :expanded-gpu="expandedGpu"
|
||||
@toggle-gpu="toggleGpu"></gpu-section>
|
||||
</div>
|
||||
@@ -1118,7 +1145,8 @@
|
||||
}} 台仅矿池在线
|
||||
</div>
|
||||
<div class="device-card offline" :key="name">
|
||||
<div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time"><span class="dc-spinner"><a-icon type="loading" style="font-size:16px;color:var(--accent)" spin/><span class="dc-spinner-txt">{{ countdownVal }}</span></span></span></div>
|
||||
<div class="dc-hd"><span class="dc-name">{{ name }}</span><span class="dc-time">{{ ago(devices[name].info.last_seen) }}</span>
|
||||
</div>
|
||||
<div class="dc-bd" style="padding:4px 14px 8px">
|
||||
<mining-section :mining="devices[name].mining"
|
||||
:history="devices[name].hash_history"></mining-section>
|
||||
@@ -1134,7 +1162,7 @@
|
||||
<div class="device-card offline" :key="name">
|
||||
<div class="dc-hd">
|
||||
<span class="dc-name">{{ name }}</span>
|
||||
<span class="dc-time"><span class="dc-spinner"><a-icon type="loading" style="font-size:16px;color:var(--accent)" spin/><span class="dc-spinner-txt">{{ countdownVal }}</span></span></span>
|
||||
<span class="dc-time">{{ ago(devices[name].info.last_seen) }}</span>
|
||||
</div>
|
||||
<div class="dc-bd"
|
||||
style="padding:4px 14px 8px;display:flex;align-items:center;justify-content:space-between">
|
||||
@@ -1495,10 +1523,7 @@
|
||||
devices: {},
|
||||
expandedGpu: null,
|
||||
clock: '',
|
||||
ws: null,
|
||||
refreshing: true,
|
||||
refreshInterval: 30,
|
||||
countdownVal: 30
|
||||
ws: null
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
@@ -1574,17 +1599,6 @@
|
||||
return e && e.mining ? e.mining.country || '' : ''
|
||||
},
|
||||
ago: ago,
|
||||
showRefresh: function () {
|
||||
var self = this;
|
||||
self.refreshing = true;
|
||||
self.countdownVal = self.refreshInterval;
|
||||
setTimeout(function () {
|
||||
self.refreshing = false
|
||||
}, 600)
|
||||
},
|
||||
countdown: function (iso) {
|
||||
return this.countdownVal + 's'
|
||||
},
|
||||
toggleGpu: function (i) {
|
||||
this.expandedGpu = i
|
||||
},
|
||||
@@ -1625,6 +1639,7 @@
|
||||
var p = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
this.ws = new WebSocket(p + '//' + location.host + '/ws/monitor');
|
||||
this.ws.onopen = function () {
|
||||
self.wsOnline = true;
|
||||
self.loginConn = '';
|
||||
setTimeout(function () {
|
||||
if (!self.authed) self.sendAuth(mid, pw)
|
||||
@@ -1669,18 +1684,29 @@
|
||||
this.loginLoading = false;
|
||||
localStorage.removeItem('mm_pw');
|
||||
break;
|
||||
case'snapshot':
|
||||
this.devices = {};
|
||||
if (msg.devices) this.devices = Object.assign({}, msg.devices);
|
||||
if (this.authed) this.wsOnline = true;
|
||||
this.showRefresh();
|
||||
break;
|
||||
case'snapshot':
|
||||
var k;
|
||||
for (k in devices) delete devices[k];
|
||||
if (msg.devices) for (k in msg.devices) devices[k] = msg.devices[k];
|
||||
for (k in cards) {
|
||||
cards[k].remove();
|
||||
delete cards[k]
|
||||
}
|
||||
if (sepNode) {
|
||||
sepNode.remove();
|
||||
sepNode = null
|
||||
}
|
||||
if (authed) {
|
||||
$('ws-dot').className = 'dot on';
|
||||
$('ws-txt').textContent = '已连接'
|
||||
}
|
||||
scheduleRender();
|
||||
break;
|
||||
case'device':
|
||||
var prev = this.devices[msg.machine];
|
||||
this.$set(this.devices, msg.machine, msg.device);
|
||||
if (prev && prev.hash_history && (!msg.device.hash_history || !msg.device.hash_history.length)) this.$set(this.devices[msg.machine], 'hash_history', prev.hash_history);
|
||||
this.showRefresh();
|
||||
break;
|
||||
break;
|
||||
case'mining':
|
||||
var mi = msg.mining || {};
|
||||
var oAt = mi.opened_at > 0 ? new Date(mi.opened_at).toISOString() : null;
|
||||
@@ -1701,8 +1727,7 @@
|
||||
}, online: false, mining: mi, hash_history: msg.hash_history
|
||||
})
|
||||
}
|
||||
this.showRefresh();
|
||||
break;
|
||||
break;
|
||||
case'remove':
|
||||
this.$delete(this.devices, msg.machine);
|
||||
this.expandedGpu = null;
|
||||
@@ -1715,18 +1740,6 @@
|
||||
setInterval(function () {
|
||||
self.clock = new Date().toLocaleTimeString('zh-CN', {hour12: false})
|
||||
}, 1000);
|
||||
setInterval(function () {
|
||||
if (self.authed && self.countdownVal > 0) {
|
||||
self.countdownVal--;
|
||||
if (self.countdownVal <= 0) {
|
||||
self.countdownVal = self.refreshInterval;
|
||||
self.refreshing = true;
|
||||
setTimeout(function () {
|
||||
self.refreshing = false
|
||||
}, 600)
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
var savedId = localStorage.getItem('mm_id') || '';
|
||||
var savedPw = localStorage.getItem('mm_pw') || '';
|
||||
if (savedId && savedPw) {
|
||||
|
||||
Reference in New Issue
Block a user