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 = '查询中';
+ 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 = `等待设备响应${countdown}秒`;
+
+ const countdownTimer = setInterval(() => {
+ countdown--;
+ if (countdown > 0) {
+ queryBtn.innerHTML = `等待设备响应${countdown}秒`;
+ } else {
+ clearInterval(countdownTimer);
+ queryBtn.innerHTML = '获取最新数据中';
+ }
+ }, 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;
});
}