|
|
@@ -78,13 +78,14 @@ const data = reactive({
|
|
|
devices: []
|
|
|
})
|
|
|
const now = ref('')
|
|
|
-let timer = null
|
|
|
+let dataTimer = null
|
|
|
+let clockTimer = null
|
|
|
|
|
|
const isFull = computed(() => data.total_spaces > 0 && data.used_spaces >= data.total_spaces)
|
|
|
|
|
|
function formatNum(n) { return (n || 0).toFixed(2) }
|
|
|
|
|
|
-function updateTime() {
|
|
|
+function updateClock() {
|
|
|
now.value = new Date().toLocaleString('zh-CN', {
|
|
|
hour: '2-digit', minute: '2-digit', second: '2-digit'
|
|
|
})
|
|
|
@@ -98,12 +99,16 @@ async function fetchData() {
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- updateTime()
|
|
|
+ updateClock()
|
|
|
fetchData()
|
|
|
- timer = setInterval(() => { updateTime(); fetchData() }, 10000)
|
|
|
+ clockTimer = setInterval(updateClock, 1000)
|
|
|
+ dataTimer = setInterval(fetchData, 10000)
|
|
|
})
|
|
|
|
|
|
-onUnmounted(() => clearInterval(timer))
|
|
|
+onUnmounted(() => {
|
|
|
+ clearInterval(clockTimer)
|
|
|
+ clearInterval(dataTimer)
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -140,12 +145,12 @@ onUnmounted(() => clearInterval(timer))
|
|
|
box-shadow: 0 0 6px var(--green);
|
|
|
}
|
|
|
.is-critical .bar-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
|
|
|
-.bar-label { font-size: 17px; font-weight: 700; letter-spacing: .04em; color: #e8f0f8; }
|
|
|
-.bar-right { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
|
|
|
+.bar-label { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: #f0f6fc; }
|
|
|
+.bar-right { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #8aa8c2; }
|
|
|
.bar-status { color: var(--green); }
|
|
|
.is-critical .bar-status { color: var(--red); }
|
|
|
.bar-divider { color: #2a3d4e; }
|
|
|
-.bar-time { font-variant-numeric: tabular-nums; }
|
|
|
+.bar-time { font-variant-numeric: tabular-nums; color: #c4d6e8; font-size: 14px; }
|
|
|
|
|
|
/* === Readouts === */
|
|
|
.readouts {
|
