Imdroid/angle_dtu
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：添加等待进度条

Browse Source
This commit is contained in:
fengyarnom 2025-05-24 13:41:43 +08:00
parent ceb83afff2
commit 9ef443f1a1
1 changed files with 64 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
templates/index.html
View File

@ -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;
});
}