修复了网页操作的功能,增加了时间操作显示

This commit is contained in:
zjk
2025-05-17 23:21:45 +08:00
parent ab803d8d7e
commit d5df7d3bcc
2 changed files with 154 additions and 18 deletions
+153 -17
View File
@@ -106,6 +106,15 @@ const std::string DASHBOARD_HTML = R"row(
background-color: rgba(231, 76, 60, 0.1);
color: #c0392b;
}
.status-pending {
background-color: rgba(241, 196, 15, 0.1);
color: #f39c12;
}
.status-timer {
font-size: 12px;
color: #7f8c8d;
margin-top: 4px;
}
</style>
</head>
<body>
@@ -119,7 +128,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'fuel_cell', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'fuel_cell', 'open')">断开</button>
</div>
<div id="high_vol_bus-status-message" class="status-message"></div>
<div id="high_vol_bus-fuel_cell-status-message" class="status-message"></div>
<div id="high_vol_bus-fuel_cell-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">动力锂电池断路器</div>
@@ -127,6 +137,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'power_battery', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'power_battery', 'open')">断开</button>
</div>
<div id="high_vol_bus-power_battery-status-message" class="status-message"></div>
<div id="high_vol_bus-power_battery-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">推进电机断路器</div>
@@ -134,6 +146,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'propulsion_motor', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'propulsion_motor', 'open')">断开</button>
</div>
<div id="high_vol_bus-propulsion_motor-status-message" class="status-message"></div>
<div id="high_vol_bus-propulsion_motor-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">锂电池组仪表断路器</div>
@@ -141,6 +155,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'battery_meter', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'battery_meter', 'open')">断开</button>
</div>
<div id="high_vol_bus-battery_meter-status-message" class="status-message"></div>
<div id="high_vol_bus-battery_meter-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">DC/DC5模块断路器</div>
@@ -148,6 +164,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'dcdc5', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'dcdc5', 'open')">断开</button>
</div>
<div id="high_vol_bus-dcdc5-status-message" class="status-message"></div>
<div id="high_vol_bus-dcdc5-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">艏部高压配电箱断路器</div>
@@ -155,6 +173,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'bow_distribution', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'bow_distribution', 'open')">断开</button>
</div>
<div id="high_vol_bus-bow_distribution-status-message" class="status-message"></div>
<div id="high_vol_bus-bow_distribution-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">艉部FT装置4/5断路器</div>
@@ -162,6 +182,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'stern_ft45', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'stern_ft45', 'open')">断开</button>
</div>
<div id="high_vol_bus-stern_ft45-status-message" class="status-message"></div>
<div id="high_vol_bus-stern_ft45-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">艉舵开关1断路器</div>
@@ -169,6 +191,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'stern_rudder1', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'stern_rudder1', 'open')">断开</button>
</div>
<div id="high_vol_bus-stern_rudder1-status-message" class="status-message"></div>
<div id="high_vol_bus-stern_rudder1-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">艉舵开关2断路器</div>
@@ -176,6 +200,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'stern_rudder2', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'stern_rudder2', 'open')">断开</button>
</div>
<div id="high_vol_bus-stern_rudder2-status-message" class="status-message"></div>
<div id="high_vol_bus-stern_rudder2-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">FB预留断路器</div>
@@ -183,6 +209,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'fb_reserve', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'fb_reserve', 'open')">断开</button>
</div>
<div id="high_vol_bus-fb_reserve-status-message" class="status-message"></div>
<div id="high_vol_bus-fb_reserve-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">TYZ预留断路器</div>
@@ -190,6 +218,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'tyz_reserve', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'tyz_reserve', 'open')">断开</button>
</div>
<div id="high_vol_bus-tyz_reserve-status-message" class="status-message"></div>
<div id="high_vol_bus-tyz_reserve-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">预留断路器</div>
@@ -197,6 +227,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'reserve', 'close')">闭合</button>
<button onclick="sendCommand('high_vol_bus', 'reserve', 'open')">断开</button>
</div>
<div id="high_vol_bus-reserve-status-message" class="status-message"></div>
<div id="high_vol_bus-reserve-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">DC/DC5模块启动</div>
@@ -204,6 +236,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'dcdc5_start', 'close')">启动</button>
<button onclick="sendCommand('high_vol_bus', 'dcdc5_start', 'open')">停止</button>
</div>
<div id="high_vol_bus-dcdc5_start-status-message" class="status-message"></div>
<div id="high_vol_bus-dcdc5_start-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">冷却系统启动</div>
@@ -211,6 +245,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('high_vol_bus', 'cooling_system', 'close')">启动</button>
<button onclick="sendCommand('high_vol_bus', 'cooling_system', 'open')">停止</button>
</div>
<div id="high_vol_bus-cooling_system-status-message" class="status-message"></div>
<div id="high_vol_bus-cooling_system-timer" class="status-timer"></div>
</div>
</div>
@@ -223,7 +259,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_high_vol', 'bow_ft1_3', 'close')">闭合</button>
<button onclick="sendCommand('bow_high_vol', 'bow_ft1_3', 'open')">断开</button>
</div>
<div id="bow_high_vol-status-message" class="status-message"></div>
<div id="bow_high_vol-bow_ft1_3-status-message" class="status-message"></div>
<div id="bow_high_vol-bow_ft1_3-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">启闭机构断路器</div>
@@ -231,6 +268,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_high_vol', 'opening_mechanism', 'close')">闭合</button>
<button onclick="sendCommand('bow_high_vol', 'opening_mechanism', 'open')">断开</button>
</div>
<div id="bow_high_vol-opening_mechanism-status-message" class="status-message"></div>
<div id="bow_high_vol-opening_mechanism-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">桅杆舵机控制箱断路器</div>
@@ -238,6 +277,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_high_vol', 'mast_steering', 'close')">闭合</button>
<button onclick="sendCommand('bow_high_vol', 'mast_steering', 'open')">断开</button>
</div>
<div id="bow_high_vol-mast_steering-status-message" class="status-message"></div>
<div id="bow_high_vol-mast_steering-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">XCZ断路器</div>
@@ -245,6 +286,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_high_vol', 'xcz', 'close')">闭合</button>
<button onclick="sendCommand('bow_high_vol', 'xcz', 'open')">断开</button>
</div>
<div id="bow_high_vol-xcz-status-message" class="status-message"></div>
<div id="bow_high_vol-xcz-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">艏舵控制箱断路器</div>
@@ -252,6 +295,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_high_vol', 'bow_rudder', 'close')">闭合</button>
<button onclick="sendCommand('bow_high_vol', 'bow_rudder', 'open')">断开</button>
</div>
<div id="bow_high_vol-bow_rudder-status-message" class="status-message"></div>
<div id="bow_high_vol-bow_rudder-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">敞水盖启动电缸断路器</div>
@@ -259,6 +304,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_high_vol', 'water_cover', 'close')">闭合</button>
<button onclick="sendCommand('bow_high_vol', 'water_cover', 'open')">断开</button>
</div>
<div id="bow_high_vol-water_cover-status-message" class="status-message"></div>
<div id="bow_high_vol-water_cover-timer" class="status-timer"></div>
</div>
</div>
@@ -271,7 +318,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('meter_bus', 'battery_meter', 'close')">闭合</button>
<button onclick="sendCommand('meter_bus', 'battery_meter', 'open')">断开</button>
</div>
<div id="meter_bus-status-message" class="status-message"></div>
<div id="meter_bus-battery_meter-status-message" class="status-message"></div>
<div id="meter_bus-battery_meter-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">艏部低压配电箱断路器</div>
@@ -279,6 +327,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('meter_bus', 'bow_low_dist', 'close')">闭合</button>
<button onclick="sendCommand('meter_bus', 'bow_low_dist', 'open')">断开</button>
</div>
<div id="meter_bus-bow_low_dist-status-message" class="status-message"></div>
<div id="meter_bus-bow_low_dist-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">UNIT4仪表DC48V断路器</div>
@@ -286,6 +336,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('meter_bus', 'unit4_dc48v', 'close')">闭合</button>
<button onclick="sendCommand('meter_bus', 'unit4_dc48v', 'open')">断开</button>
</div>
<div id="meter_bus-unit4_dc48v-status-message" class="status-message"></div>
<div id="meter_bus-unit4_dc48v-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">DC-C1直流配电板断路器</div>
@@ -293,6 +345,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('meter_bus', 'dc_c1', 'close')">闭合</button>
<button onclick="sendCommand('meter_bus', 'dc_c1', 'open')">断开</button>
</div>
<div id="meter_bus-dc_c1-status-message" class="status-message"></div>
<div id="meter_bus-dc_c1-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">预留断路器1</div>
@@ -300,6 +354,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('meter_bus', 'reserve1', 'close')">闭合</button>
<button onclick="sendCommand('meter_bus', 'reserve1', 'open')">断开</button>
</div>
<div id="meter_bus-reserve1-status-message" class="status-message"></div>
<div id="meter_bus-reserve1-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">预留断路器2</div>
@@ -307,6 +363,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('meter_bus', 'reserve2', 'close')">闭合</button>
<button onclick="sendCommand('meter_bus', 'reserve2', 'open')">断开</button>
</div>
<div id="meter_bus-reserve2-status-message" class="status-message"></div>
<div id="meter_bus-reserve2-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">应急锂电池组2断路器</div>
@@ -314,6 +372,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('meter_bus', 'emergency_battery2', 'close')">闭合</button>
<button onclick="sendCommand('meter_bus', 'emergency_battery2', 'open')">断开</button>
</div>
<div id="meter_bus-emergency_battery2-status-message" class="status-message"></div>
<div id="meter_bus-emergency_battery2-timer" class="status-timer"></div>
</div>
</div>
@@ -326,7 +386,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_low_vol', 'unit1', 'close')">闭合</button>
<button onclick="sendCommand('bow_low_vol', 'unit1', 'open')">断开</button>
</div>
<div id="bow_low_vol-status-message" class="status-message"></div>
<div id="bow_low_vol-unit1-status-message" class="status-message"></div>
<div id="bow_low_vol-unit1-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">UNIT2断路器</div>
@@ -334,6 +395,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_low_vol', 'unit2', 'close')">闭合</button>
<button onclick="sendCommand('bow_low_vol', 'unit2', 'open')">断开</button>
</div>
<div id="bow_low_vol-unit2-status-message" class="status-message"></div>
<div id="bow_low_vol-unit2-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">UNIT3断路器</div>
@@ -341,6 +404,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_low_vol', 'unit3', 'close')">闭合</button>
<button onclick="sendCommand('bow_low_vol', 'unit3', 'open')">断开</button>
</div>
<div id="bow_low_vol-unit3-status-message" class="status-message"></div>
<div id="bow_low_vol-unit3-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">UNIT5断路器</div>
@@ -348,6 +413,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_low_vol', 'unit5', 'close')">闭合</button>
<button onclick="sendCommand('bow_low_vol', 'unit5', 'open')">断开</button>
</div>
<div id="bow_low_vol-unit5-status-message" class="status-message"></div>
<div id="bow_low_vol-unit5-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">艏部PZ装置断路器</div>
@@ -355,6 +422,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_low_vol', 'bow_pz', 'close')">闭合</button>
<button onclick="sendCommand('bow_low_vol', 'bow_pz', 'open')">断开</button>
</div>
<div id="bow_low_vol-bow_pz-status-message" class="status-message"></div>
<div id="bow_low_vol-bow_pz-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">预留断路器1</div>
@@ -362,6 +431,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_low_vol', 'reserve1', 'close')">闭合</button>
<button onclick="sendCommand('bow_low_vol', 'reserve1', 'open')">断开</button>
</div>
<div id="bow_low_vol-reserve1-status-message" class="status-message"></div>
<div id="bow_low_vol-reserve1-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">预留断路器2</div>
@@ -369,6 +440,8 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_low_vol', 'reserve2', 'close')">闭合</button>
<button onclick="sendCommand('bow_low_vol', 'reserve2', 'open')">断开</button>
</div>
<div id="bow_low_vol-reserve2-status-message" class="status-message"></div>
<div id="bow_low_vol-reserve2-timer" class="status-timer"></div>
</div>
<div class="breaker">
<div class="breaker-name">应急锂电池组1断路器</div>
@@ -376,26 +449,89 @@ const std::string DASHBOARD_HTML = R"row(
<button onclick="sendCommand('bow_low_vol', 'emergency_battery1', 'close')">闭合</button>
<button onclick="sendCommand('bow_low_vol', 'emergency_battery1', 'open')">断开</button>
</div>
<div id="bow_low_vol-emergency_battery1-status-message" class="status-message"></div>
<div id="bow_low_vol-emergency_battery1-timer" class="status-timer"></div>
</div>
</div>
</div>
<script>
function sendCommand(type, id, action, value) {
fetch('/control', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ device_type: type, device_id: id, action: action, value: value })
const statusEl = document.getElementById(`${type}-${id}-status-message`);
const timerEl = document.getElementById(`${type}-${id}-timer`);
let timer = null; // 将timer变量提升到函数作用域
// 显示操作中状态
if (statusEl) {
statusEl.textContent = '操作中...';
statusEl.className = 'status-message status-pending';
}
// 启动5秒计时器
if (timerEl) {
let seconds = 6;
timerEl.textContent = `等待反馈: ${seconds}秒`;
timer = setInterval(() => {
seconds--;
if (seconds > 0) {
timerEl.textContent = `等待反馈: ${seconds}秒`;
} else {
clearInterval(timer);
timerEl.textContent = '';
if (statusEl && statusEl.textContent === '操作中...') {
statusEl.textContent = '操作超时: 未收到设备反馈';
statusEl.className = 'status-message status-error';
}
}
}, 1000);
}
// 设置10秒超时
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject(new Error('请求超时')), 10000)
);
Promise.race([
fetch('/control', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ device_type: type, device_id: id, action: action, value: value })
}),
timeoutPromise
])
.then(res => {
// 立即清除计时器
const timerEl = document.getElementById(`${type}-${id}-timer`);
if (timerEl) {
clearInterval(timer);
timerEl.textContent = '';
}
return res.json();
})
.then(data => {
const statusEl = document.getElementById(`${type}-${id}-status-message`);
if (statusEl) {
statusEl.textContent = data.message || (data.success ? '操作成功' : '操作失败');
statusEl.className = data.success ? 'status-message status-success' : 'status-message status-error';
}
})
.then(res => res.json())
.then(data => {
const el = document.getElementById(type + '-status-message');
if (data.success) {
el.textContent = data.message || '操作成功';
el.className = 'status-message status-success';
} else {
el.textContent = data.message || '操作失败';
el.className = 'status-message status-error';
.catch(error => {
const statusEl = document.getElementById(`${type}-${id}-status-message`);
const timerEl = document.getElementById(`${type}-${id}-timer`);
if (timerEl) {
clearInterval(timer);
timerEl.textContent = '';
}
if (statusEl) {
if (error.message === '请求超时') {
statusEl.textContent = '操作超时: 未收到设备反馈';
} else {
statusEl.textContent = '通信错误: ' + error.message;
}
statusEl.className = 'status-message status-error';
}
});
}
+1 -1
View File
@@ -166,8 +166,8 @@ void HttpServer::handleWebSocketEvent(struct mg_connection* c, int ev, void* ev_
success = m_lowerCommManager->operate_LVA_mergencyLithiumBatteryGroup1Circuit_Breaker(opt);
}
}
const char *message = success ? "操作成功" : "操作失败";
// 返回JSON响应