增加了操作时间内锁定按钮的功能
This commit is contained in:
@@ -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 = '操作超时: 未收到设备反馈';
|
||||||
|
|||||||
Reference in New Issue
Block a user