plc_control/web/feeder/js/units.js

248 lines
8.0 KiB
JavaScript

import { apiFetch } from "./api.js";
import { dom } from "./dom.js";
import { loadEvents } from "./events.js";
import { renderEquipments } from "./equipment.js";
import { state } from "./state.js";
function equipmentCount(unitId) {
return state.equipments.filter((item) => {
const equipment = item.equipment || item;
return equipment.unit_id === unitId;
}).length;
}
export function renderUnitOptions(selected = "", target = dom.equipmentUnitId, includeEmpty = true) {
if (!target) {
return;
}
const options = [];
if (includeEmpty) {
options.push('<option value="">未绑定单元</option>');
}
state.units.forEach((unit) => {
const isSelected = unit.id === selected ? "selected" : "";
options.push(`<option value="${unit.id}" ${isSelected}>${unit.code} / ${unit.name}</option>`);
});
target.innerHTML = options.join("");
}
export function resetUnitForm() {
dom.unitForm.reset();
dom.unitId.value = "";
dom.unitEnabled.checked = true;
dom.unitManualAck.checked = true;
dom.unitRunTimeSec.value = "10";
dom.unitStopTimeSec.value = "10";
dom.unitAccTimeSec.value = "20";
dom.unitBlTimeSec.value = "10";
}
function openUnitModal() {
dom.unitModal.classList.remove("hidden");
}
export function closeUnitModal() {
dom.unitModal.classList.add("hidden");
}
export function openCreateUnitModal() {
resetUnitForm();
openUnitModal();
}
function openEditUnitModal(unit) {
dom.unitId.value = unit.id || "";
dom.unitCode.value = unit.code || "";
dom.unitName.value = unit.name || "";
dom.unitDescription.value = unit.description || "";
dom.unitEnabled.checked = !!unit.enabled;
dom.unitRunTimeSec.value = String(unit.run_time_sec ?? 0);
dom.unitStopTimeSec.value = String(unit.stop_time_sec ?? 0);
dom.unitAccTimeSec.value = String(unit.acc_time_sec ?? 0);
dom.unitBlTimeSec.value = String(unit.bl_time_sec ?? 0);
dom.unitManualAck.checked = !!unit.require_manual_ack_after_fault;
openUnitModal();
}
async function selectUnit(unitId) {
state.selectedUnitId = state.selectedUnitId === unitId ? null : unitId;
renderUnits();
renderEquipments();
await loadEvents();
}
function runtimeBadge(runtime) {
if (!runtime) return '<span class="badge offline">OFFLINE</span>';
if (runtime.comm_locked) return '<span class="badge offline">COMM ERR</span>';
if (runtime.fault_locked) return '<span class="badge danger">FAULT</span>';
const stateLabels = {
stopped: 'STOPPED',
running: 'RUNNING',
distributor_running: 'DIST RUN',
fault_locked: 'FAULT',
comm_locked: 'COMM ERR',
};
const stateCls = {
stopped: '',
running: 'online',
distributor_running: 'online',
fault_locked: 'danger',
comm_locked: 'offline',
};
const label = stateLabels[runtime.state] ?? runtime.state;
const cls = stateCls[runtime.state] ?? '';
return `<span class="badge ${cls}">${label}</span>`;
}
export function renderUnits() {
dom.unitList.innerHTML = "";
if (!state.units.length) {
dom.unitList.innerHTML = '<div class="list-item"><div class="muted">暂无控制单元</div></div>';
return;
}
state.units.forEach((unit) => {
const card = document.createElement("div");
const selected = state.selectedUnitId === unit.id;
card.className = `list-item unit-card ${selected ? "selected" : ""}`;
const runtime = state.runtimes.get(unit.id);
card.innerHTML = `
<div class="row">
<strong>${unit.code}</strong>
${runtimeBadge(runtime)}
<span class="badge ${unit.enabled ? "" : "offline"}">${unit.enabled ? "EN" : "DIS"}</span>
</div>
<div>${unit.name}</div>
<div class="muted">设备 ${equipmentCount(unit.id)} 台 | Acc ${runtime ? Math.floor(runtime.display_acc_sec / 1000) : 0}s</div>
<div class="muted">Run ${unit.run_time_sec}s / Stop ${unit.stop_time_sec}s / Acc ${unit.acc_time_sec}s / BL ${unit.bl_time_sec}s</div>
<div class="row unit-card-actions"></div>
`;
card.addEventListener("click", () => {
selectUnit(unit.id).catch((error) => {
dom.statusText.textContent = error.message;
});
});
const actions = card.querySelector(".unit-card-actions");
const editBtn = document.createElement("button");
editBtn.className = "secondary";
editBtn.textContent = "Edit";
editBtn.addEventListener("click", (event) => {
event.stopPropagation();
openEditUnitModal(unit);
});
const deleteBtn = document.createElement("button");
deleteBtn.className = "danger";
deleteBtn.textContent = "Delete";
deleteBtn.addEventListener("click", (event) => {
event.stopPropagation();
deleteUnit(unit.id).catch((error) => {
dom.statusText.textContent = error.message;
});
});
actions.append(editBtn, deleteBtn);
const isAutoOn = runtime?.auto_enabled;
const startBlocked = !isAutoOn && (runtime?.fault_locked || runtime?.manual_ack_required || runtime?.rem_local);
const autoBtn = document.createElement("button");
autoBtn.className = isAutoOn ? "danger" : "secondary";
autoBtn.textContent = isAutoOn ? "Stop Auto" : "Start Auto";
autoBtn.disabled = startBlocked;
autoBtn.title = startBlocked
? (runtime?.fault_locked ? "设备故障中,无法启动自动控制"
: runtime?.rem_local ? "设备处于本地模式(REM关),无法启动自动控制"
: "需人工确认故障后才可启动自动控制")
: (isAutoOn ? "停止自动控制" : "启动自动控制");
autoBtn.addEventListener("click", (e) => {
e.stopPropagation();
const url = `/api/control/unit/${unit.id}/${isAutoOn ? "stop-auto" : "start-auto"}`;
apiFetch(url, { method: "POST" }).then(() => loadUnits()).catch(() => {});
});
actions.append(autoBtn);
if (runtime?.manual_ack_required) {
const ackBtn = document.createElement("button");
ackBtn.className = "danger";
ackBtn.textContent = "Ack Fault";
ackBtn.title = "人工确认解除故障锁定";
ackBtn.addEventListener("click", (e) => {
e.stopPropagation();
apiFetch(`/api/control/unit/${unit.id}/ack-fault`, { method: "POST" })
.then(() => loadUnits()).catch(() => {});
});
actions.append(ackBtn);
}
dom.unitList.appendChild(card);
});
}
export async function loadUnits() {
const response = await apiFetch("/api/unit?page=1&page_size=-1");
state.units = response.data || [];
state.unitMap = new Map(state.units.map((unit) => [unit.id, unit]));
if (state.selectedUnitId && !state.unitMap.has(state.selectedUnitId)) {
state.selectedUnitId = null;
}
state.units.forEach((unit) => {
if (unit.runtime) state.runtimes.set(unit.id, unit.runtime);
});
renderUnits();
renderUnitOptions(dom.equipmentUnitId?.value || "", dom.equipmentUnitId);
renderUnitOptions(dom.equipmentBatchUnitId?.value || "", dom.equipmentBatchUnitId);
document.dispatchEvent(new Event("units-loaded"));
}
export async function saveUnit(event) {
event.preventDefault();
const payload = {
code: dom.unitCode.value.trim(),
name: dom.unitName.value.trim(),
description: dom.unitDescription.value.trim() || null,
enabled: dom.unitEnabled.checked,
run_time_sec: Number(dom.unitRunTimeSec.value || 0),
stop_time_sec: Number(dom.unitStopTimeSec.value || 0),
acc_time_sec: Number(dom.unitAccTimeSec.value || 0),
bl_time_sec: Number(dom.unitBlTimeSec.value || 0),
require_manual_ack_after_fault: dom.unitManualAck.checked,
};
const id = dom.unitId.value;
await apiFetch(id ? `/api/unit/${id}` : "/api/unit", {
method: id ? "PUT" : "POST",
body: JSON.stringify(payload),
});
closeUnitModal();
await loadUnits();
renderEquipments();
await loadEvents();
}
export async function deleteUnit(unitId) {
if (!window.confirm("Delete this unit?")) {
return;
}
await apiFetch(`/api/unit/${unitId}`, { method: "DELETE" });
if (state.selectedUnitId === unitId) {
state.selectedUnitId = null;
}
closeUnitModal();
await loadUnits();
renderEquipments();
await loadEvents();
}