增加了操作时间内锁定按钮的功能

This commit is contained in:
zjk
2025-05-17 23:27:36 +08:00
parent d5df7d3bcc
commit 2c6e0d2679
+41 -3
View File
@@ -456,10 +456,25 @@ const std::string DASHBOARD_HTML = R"row(
</div> </div>
<script> <script>
// 全局存储所有设备的计时器状态
const deviceTimers = {};
function sendCommand(type, id, action, value) { function sendCommand(type, id, action, value) {
const statusEl = document.getElementById(`${type}-${id}-status-message`); const statusEl = document.getElementById(`${type}-${id}-status-message`);
const timerEl = document.getElementById(`${type}-${id}-timer`); const timerEl = document.getElementById(`${type}-${id}-timer`);
let timer = null; // 将timer变量提升到函数作用域 const buttons = document.querySelectorAll(`button[onclick*="sendCommand('${type}', '${id}'"]`);
// 检查是否已有计时器运行
if (deviceTimers[`${type}-${id}`]) {
return;
}
// 禁用按钮
buttons.forEach(btn => {
btn.disabled = true;
btn.style.opacity = '0.6';
btn.style.cursor = 'not-allowed';
});
// 显示操作中状态 // 显示操作中状态
if (statusEl) { if (statusEl) {
@@ -491,6 +506,9 @@ function sendCommand(type, id, action, value) {
setTimeout(() => reject(new Error('请求超时')), 10000) setTimeout(() => reject(new Error('请求超时')), 10000)
); );
// 存储计时器
deviceTimers[`${type}-${id}`] = timer;
Promise.race([ Promise.race([
fetch('/control', { fetch('/control', {
method: 'POST', method: 'POST',
@@ -502,10 +520,21 @@ function sendCommand(type, id, action, value) {
.then(res => { .then(res => {
// 立即清除计时器 // 立即清除计时器
const timerEl = document.getElementById(`${type}-${id}-timer`); const timerEl = document.getElementById(`${type}-${id}-timer`);
const buttons = document.querySelectorAll(`button[onclick*="sendCommand('${type}', '${id}'"]`);
if (timerEl) { if (timerEl) {
clearInterval(timer); clearInterval(deviceTimers[`${type}-${id}`]);
delete deviceTimers[`${type}-${id}`];
timerEl.textContent = ''; timerEl.textContent = '';
} }
// 恢复按钮状态
buttons.forEach(btn => {
btn.disabled = false;
btn.style.opacity = '1';
btn.style.cursor = 'pointer';
});
return res.json(); return res.json();
}) })
.then(data => { .then(data => {
@@ -519,12 +548,21 @@ function sendCommand(type, id, action, value) {
.catch(error => { .catch(error => {
const statusEl = document.getElementById(`${type}-${id}-status-message`); const statusEl = document.getElementById(`${type}-${id}-status-message`);
const timerEl = document.getElementById(`${type}-${id}-timer`); const timerEl = document.getElementById(`${type}-${id}-timer`);
const buttons = document.querySelectorAll(`button[onclick*="sendCommand('${type}', '${id}'"]`);
if (timerEl) { if (timerEl) {
clearInterval(timer); clearInterval(deviceTimers[`${type}-${id}`]);
delete deviceTimers[`${type}-${id}`];
timerEl.textContent = ''; timerEl.textContent = '';
} }
// 恢复按钮状态
buttons.forEach(btn => {
btn.disabled = false;
btn.style.opacity = '1';
btn.style.cursor = 'pointer';
});
if (statusEl) { if (statusEl) {
if (error.message === '请求超时') { if (error.message === '请求超时') {
statusEl.textContent = '操作超时: 未收到设备反馈'; statusEl.textContent = '操作超时: 未收到设备反馈';