From 9ef443f1a1c12a96d2620b4df6fce3ba182e5d86 Mon Sep 17 00:00:00 2001
From: fengyarnom <fengyarnom@gmail.com>
Date: Sat, 24 May 2025 13:41:43 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=B7=BB=E5=8A=A0=E7=AD=89?=
 =?UTF-8?q?=E5=BE=85=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/index.html | 71 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 64 insertions(+), 7 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 7c0c6a5..5d52028 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -119,6 +119,29 @@
             border-top: 1px solid #ddd;
         }
 
+        /* 加载动画样式 */
+        .loading-spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #f3f3f3;
+            border-top: 2px solid #007bff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-left: 8px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .countdown {
+            font-size: 14px;
+            color: #666;
+            margin-left: 10px;
+        }
+
         @media (max-width: 768px) {
             .controls {
                 flex-direction: column;
@@ -781,8 +804,14 @@
         // 查询最新数据（触发设备查询）
         function queryLatestData() {
             const latestDataElement = document.querySelector('.latest-data');
-            latestDataElement.style.opacity = 0.5;
-            document.getElementById('queryLatestBtn').textContent = '查询中...';
+            const queryBtn = document.getElementById('queryLatestBtn');
+            
+            latestDataElement.style.opacity = 0.6;
+            
+            // 添加加载动画和倒计时
+            const originalText = queryBtn.innerHTML;
+            queryBtn.innerHTML = '查询中<span class="loading-spinner"></span>';
+            queryBtn.disabled = true;
 
             // 先获取一次当前最新数据
             fetchLatestData();
@@ -798,23 +827,51 @@
             .then(data => {
                 if (data.success) {
                     console.log(`查询指令已发送到 ${data.sent_count} 个设备`);
-                    // 等待3秒后获取最新数据（给设备响应时间）
+                    
+                    if (data.sent_count === 0) {
+                        // 没有设备在线
+                        latestDataElement.style.opacity = 1;
+                        queryBtn.innerHTML = originalText;
+                        queryBtn.disabled = false;
+                        alert('当前没有设备在线，无法发送查询指令');
+                        return;
+                    }
+                    
+                    // 开始10秒倒计时
+                    let countdown = 10;
+                    queryBtn.innerHTML = `等待设备响应<span class="loading-spinner"></span><span class="countdown">${countdown}秒</span>`;
+                    
+                    const countdownTimer = setInterval(() => {
+                        countdown--;
+                        if (countdown > 0) {
+                            queryBtn.innerHTML = `等待设备响应<span class="loading-spinner"></span><span class="countdown">${countdown}秒</span>`;
+                        } else {
+                            clearInterval(countdownTimer);
+                            queryBtn.innerHTML = '获取最新数据中<span class="loading-spinner"></span>';
+                        }
+                    }, 1000);
+                    
+                    // 等待10秒后获取最新数据（给设备响应时间）
                     setTimeout(() => {
                         fetchLatestData();
                         loadData(); // 也刷新一下表格数据
                         latestDataElement.style.opacity = 1;
-                        document.getElementById('queryLatestBtn').textContent = '查询最新数据';
-                    }, 3000);
+                        queryBtn.innerHTML = originalText;
+                        queryBtn.disabled = false;
+                        clearInterval(countdownTimer);
+                    }, 10000);
                 } else {
                     console.error('发送查询指令失败:', data.message);
                     latestDataElement.style.opacity = 1;
-                    document.getElementById('queryLatestBtn').textContent = '查询最新数据';
+                    queryBtn.innerHTML = originalText;
+                    queryBtn.disabled = false;
                 }
             })
             .catch(error => {
                 console.error('发送查询指令出错:', error);
                 latestDataElement.style.opacity = 1;
-                document.getElementById('queryLatestBtn').textContent = '查询最新数据';
+                queryBtn.innerHTML = originalText;
+                queryBtn.disabled = false;
             });
         }