diff --git a/yanzhu-ui-vue3/src/views/system/ledscreen/ledRunInfo.vue b/yanzhu-ui-vue3/src/views/system/ledscreen/ledRunInfo.vue index bc93145e..6e92fd9a 100644 --- a/yanzhu-ui-vue3/src/views/system/ledscreen/ledRunInfo.vue +++ b/yanzhu-ui-vue3/src/views/system/ledscreen/ledRunInfo.vue @@ -6,7 +6,13 @@ @@ -205,6 +211,7 @@ const dialogTitle = ref("查看LED屏"); // 定时器 let timer = null; +let countdownTimer = null; // 服务器状态 const serverStatus = ref({ @@ -212,6 +219,10 @@ const serverStatus = ref({ connectedCount: 0 }); +// 更新时间和倒计时 +const lastUpdateTime = ref(''); +const countdownSeconds = ref(30); + // 表格选择 const ids = ref([]); const single = ref(true); @@ -294,7 +305,12 @@ function getServerStatus(showMsg) { serverStatus.value.isRunning = isRunningMatch ? isRunningMatch[1] === "运行中" : false; serverStatus.value.connectedCount = connectedCountMatch ? parseInt(connectedCountMatch[1]) : 0; - if(showMsg){ + + // 更新时间和重置倒计时 + updateLastUpdateTime(); + resetCountdown(); + + if (showMsg) { proxy.$modal.msgSuccess("服务器状态已刷新"); } }).catch(error => { @@ -302,6 +318,43 @@ function getServerStatus(showMsg) { }); } +/** 更新最后更新时间 */ +function updateLastUpdateTime() { + const now = new Date(); + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + lastUpdateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; +} + +/** 格式化倒计时 */ +function formatCountdown(seconds) { + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; + return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`; +} + +/** 重置倒计时 */ +function resetCountdown() { + countdownSeconds.value = 30; +} + +/** 启动倒计时定时器 */ +function startCountdown() { + if (countdownTimer) { + clearInterval(countdownTimer); + } + countdownTimer = setInterval(() => { + countdownSeconds.value--; + if (countdownSeconds.value <= 0) { + resetCountdown(); + } + }, 1000); +} + /** 查询所有屏幕(使用LED控制器接口) */ function getAllScreensFromController() { loading.value = true; @@ -391,9 +444,12 @@ function submitForm() { onMounted(() => { getServerStatus(); getAllScreensFromController(); - + // 启动定时器,每30秒刷新一次服务器状态 startTimer(); + + // 启动倒计时定时器 + startCountdown(); }); // 启动定时器 @@ -413,6 +469,10 @@ function stopTimer() { clearInterval(timer); timer = null; } + if (countdownTimer) { + clearInterval(countdownTimer); + countdownTimer = null; + } } // 组件卸载前清除定时器 @@ -432,6 +492,25 @@ onBeforeUnmount(() => { align-items: center; } +.header-left { + display: flex; + flex-direction: column; + gap: 8px; +} + +.update-info { + display: flex; + align-items: center; + gap: 15px; + font-size: 12px; + color: #909399; +} + +.update-info .countdown { + color: #409EFF; + font-weight: 500; +} + .dialog-footer { text-align: right; }