增加了操作时间内锁定按钮的功能
This commit is contained in:
@@ -456,10 +456,25 @@ const std::string DASHBOARD_HTML = R"row(
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 全局存储所有设备的计时器状态
|
||||
const deviceTimers = {};
|
||||
|
||||
function sendCommand(type, id, action, value) {
|
||||
const statusEl = document.getElementById(`${type}-${id}-status-message`);
|
||||
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) {
|
||||
@@ -491,6 +506,9 @@ function sendCommand(type, id, action, value) {
|
||||
setTimeout(() => reject(new Error('请求超时')), 10000)
|
||||
);
|
||||
|
||||
// 存储计时器
|
||||
deviceTimers[`${type}-${id}`] = timer;
|
||||
|
||||
Promise.race([
|
||||
fetch('/control', {
|
||||
method: 'POST',
|
||||
@@ -502,10 +520,21 @@ function sendCommand(type, id, action, value) {
|
||||
.then(res => {
|
||||
// 立即清除计时器
|
||||
const timerEl = document.getElementById(`${type}-${id}-timer`);
|
||||
const buttons = document.querySelectorAll(`button[onclick*="sendCommand('${type}', '${id}'"]`);
|
||||
|
||||
if (timerEl) {
|
||||
clearInterval(timer);
|
||||
clearInterval(deviceTimers[`${type}-${id}`]);
|
||||
delete deviceTimers[`${type}-${id}`];
|
||||
timerEl.textContent = '';
|
||||
}
|
||||
|
||||
// 恢复按钮状态
|
||||
buttons.forEach(btn => {
|
||||
btn.disabled = false;
|
||||
btn.style.opacity = '1';
|
||||
btn.style.cursor = 'pointer';
|
||||
});
|
||||
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
@@ -519,12 +548,21 @@ function sendCommand(type, id, action, value) {
|
||||
.catch(error => {
|
||||
const statusEl = document.getElementById(`${type}-${id}-status-message`);
|
||||
const timerEl = document.getElementById(`${type}-${id}-timer`);
|
||||
const buttons = document.querySelectorAll(`button[onclick*="sendCommand('${type}', '${id}'"]`);
|
||||
|
||||
if (timerEl) {
|
||||
clearInterval(timer);
|
||||
clearInterval(deviceTimers[`${type}-${id}`]);
|
||||
delete deviceTimers[`${type}-${id}`];
|
||||
timerEl.textContent = '';
|
||||
}
|
||||
|
||||
// 恢复按钮状态
|
||||
buttons.forEach(btn => {
|
||||
btn.disabled = false;
|
||||
btn.style.opacity = '1';
|
||||
btn.style.cursor = 'pointer';
|
||||
});
|
||||
|
||||
if (statusEl) {
|
||||
if (error.message === '请求超时') {
|
||||
statusEl.textContent = '操作超时: 未收到设备反馈';
|
||||
|
||||
Reference in New Issue
Block a user