修改刷新时间

yanzhu-ui-vue3/src/views/system/ledscreen/ledRunInfo.vue

@@ -6,7 +6,13 @@
                 <el-card class="box-card" shadow="never">
                     <template #header>
                         <div class="card-header">
-                            <span>LED服务器状态</span>
+                            <div class="header-left">
+                                <span>LED服务器状态</span>
+                                <div class="update-info">
+                                    <span>更新时间: {{ lastUpdateTime }}</span>
+                                    <span class="countdown">将于 {{ formatCountdown(countdownSeconds) }} 后刷新</span>
+                                </div>
+                            </div>
                             <el-button class="button" type="primary" @click="getServerStatus(true)">刷新状态</el-button>
                         </div>
                     </template>
@@ -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;
 }