feat：添加等待进度条

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;
+            const queryBtn = document.getElementById('queryLatestBtn');
-            document.getElementById('queryLatestBtn').textContent = '查询中...';
+            
+            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 = '查询最新数据';
+                        queryBtn.innerHTML = originalText;
-                    }, 3000);
+                        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;
             });
         }