feat(web): add unit and event management views

web/html/equipment-panel.html

@@ -7,5 +7,11 @@
     <input id="equipmentKeyword" placeholder="搜索编码或名称" />
     <button type="button" class="secondary" id="refreshEquipmentBtn">刷新</button>
   </div>
+  <div class="toolbar equipment-batch-toolbar">
+    <div class="muted" id="selectedEquipmentSummary">已选 0 台设备</div>
+    <select id="equipmentBatchUnitId"></select>
+    <button type="button" class="secondary" id="clearEquipmentSelectionBtn">清空选择</button>
+    <button type="button" id="applyEquipmentUnitBtn">批量设单元</button>
+  </div>
   <div class="list equipment-list" id="equipmentList"></div>
 </section>

web/html/logs-panel.html

@@ -1,6 +1,18 @@
 <section class="panel bottom-middle">
+  <div class="stack-panel">
+    <div class="stack-section event-section">
+      <div class="panel-head">
+        <h2>系统事件</h2>
+        <button type="button" class="secondary" id="refreshEventBtn">刷新</button>
+      </div>
+      <div class="list event-list" id="eventList"></div>
+    </div>
+
+    <div class="stack-section stack-section-bordered log-section">
       <div class="panel-head">
         <h2>实时日志</h2>
       </div>
       <div class="log" id="logView"></div>
+    </div>
+  </div>
 </section>

web/html/modals.html

@@ -1,3 +1,55 @@
+<div class="modal hidden" id="unitModal">
+  <div class="modal-content modal-sm">
+    <div class="modal-head">
+      <h3>控制单元配置</h3>
+      <button class="secondary" id="closeUnitModal">X</button>
+    </div>
+    <form id="unitForm" class="form">
+      <input type="hidden" id="unitId" />
+      <label>
+        编码
+        <input id="unitCode" required />
+      </label>
+      <label>
+        名称
+        <input id="unitName" required />
+      </label>
+      <label>
+        说明
+        <input id="unitDescription" />
+      </label>
+      <label class="check-row">
+        <input type="checkbox" id="unitEnabled" checked />
+        <span>启用</span>
+      </label>
+      <label>
+        投煤运行时间（秒）
+        <input id="unitRunTimeSec" type="number" min="0" value="0" />
+      </label>
+      <label>
+        投煤停止时间（秒）
+        <input id="unitStopTimeSec" type="number" min="0" value="0" />
+      </label>
+      <label>
+        投煤累计阈值（秒）
+        <input id="unitAccTimeSec" type="number" min="0" value="0" />
+      </label>
+      <label>
+        布料机运行时间（秒）
+        <input id="unitBlTimeSec" type="number" min="0" value="0" />
+      </label>
+      <label class="check-row">
+        <input type="checkbox" id="unitManualAck" checked />
+        <span>故障恢复后需人工确认</span>
+      </label>
+      <div class="form-actions">
+        <button type="button" class="secondary" id="unitReset">清空</button>
+        <button type="submit" id="unitSubmit">保存</button>
+      </div>
+    </form>
+  </div>
+</div>
+
 <div class="modal hidden" id="equipmentModal">
   <div class="modal-content modal-sm">
     <div class="modal-head">
@@ -6,6 +58,10 @@
     </div>
     <form id="equipmentForm" class="form">
       <input type="hidden" id="equipmentId" />
+      <label>
+        所属单元
+        <select id="equipmentUnitId"></select>
+      </label>
       <label>
         编码
         <input id="equipmentCode" required />
@@ -45,7 +101,7 @@
     <div class="tree" id="nodeTree"></div>
     <div class="modal-foot">
       <div class="muted" id="selectedCount">已选中 0 个节点</div>
-      <button id="createPoints">创建点位</button>
+      <button id="createPoints">创建设备点位</button>
     </div>
   </div>
 </div>

web/html/source-panel.html

@@ -1,7 +1,22 @@
 <section class="panel bottom-left">
+  <div class="stack-panel">
+    <div class="stack-section">
+      <div class="panel-head">
+        <h2>控制单元</h2>
+        <div class="toolbar">
+          <button type="button" class="secondary" id="refreshUnitBtn">刷新</button>
+          <button type="button" id="newUnitBtn">+ 新增</button>
+        </div>
+      </div>
+      <div class="list unit-list" id="unitList"></div>
+    </div>
+
+    <div class="stack-section stack-section-bordered">
       <div class="panel-head">
         <h2>数据源</h2>
-    <button id="openSourceForm">+ 新增</button>
+        <button type="button" id="openSourceForm">+ 新增</button>
       </div>
       <div class="source-panels" id="sourceList"></div>
+    </div>
+  </div>
 </section>

web/js/app.js

@@ -2,9 +2,12 @@ import { withStatus } from "./api.js";
 import { openChart, renderChart } from "./chart.js";
 import { dom } from "./dom.js";
 import { closeApiDocDrawer, openApiDocDrawer } from "./docs.js";
+import { loadEvents } from "./events.js";
 import {
+  applyBatchEquipmentUnit,
   clearEquipmentFilter,
   clearPointBinding,
+  clearSelectedEquipments,
   closeEquipmentModal,
   loadEquipments,
   openCreateEquipmentModal,
@@ -29,19 +32,28 @@ import {
 } from "./points.js";
 import { state } from "./state.js";
 import { loadSources, saveSource } from "./sources.js";
+import { closeUnitModal, loadUnits, openCreateUnitModal, resetUnitForm, renderUnits, saveUnit } from "./units.js";
 
 function bindEvents() {
+  dom.unitForm.addEventListener("submit", (event) => withStatus(saveUnit(event)));
   dom.sourceForm.addEventListener("submit", (event) => withStatus(saveSource(event)));
   dom.equipmentForm.addEventListener("submit", (event) => withStatus(saveEquipment(event)));
   dom.pointBindingForm.addEventListener("submit", (event) => withStatus(savePointBinding(event)));
   dom.batchBindingForm.addEventListener("submit", (event) => withStatus(saveBatchBinding(event)));
 
+  dom.unitResetBtn.addEventListener("click", resetUnitForm);
+  dom.refreshUnitBtn.addEventListener("click", () => withStatus(loadUnits().then(loadEvents)));
+  dom.newUnitBtn.addEventListener("click", openCreateUnitModal);
+  dom.closeUnitModalBtn.addEventListener("click", closeUnitModal);
+
   dom.sourceResetBtn.addEventListener("click", () => dom.sourceForm.reset());
   dom.equipmentResetBtn.addEventListener("click", resetEquipmentForm);
   dom.refreshEquipmentBtn.addEventListener("click", () => withStatus(loadEquipments()));
   dom.newEquipmentBtn.addEventListener("click", openCreateEquipmentModal);
   dom.closeEquipmentModalBtn.addEventListener("click", closeEquipmentModal);
   dom.clearEquipmentFilterBtn.addEventListener("click", () => withStatus(clearEquipmentFilter()));
+  dom.applyEquipmentUnitBtn.addEventListener("click", () => withStatus(applyBatchEquipmentUnit()));
+  dom.clearEquipmentSelectionBtn.addEventListener("click", clearSelectedEquipments);
 
   dom.openPointModalBtn.addEventListener("click", openPointCreateModal);
   dom.pointSourceSelect.addEventListener("change", () => {
@@ -82,6 +94,7 @@ function bindEvents() {
 
   dom.openApiDocBtn.addEventListener("click", () => withStatus(openApiDocDrawer()));
   dom.closeApiDocBtn.addEventListener("click", closeApiDocDrawer);
+  dom.refreshEventBtn.addEventListener("click", () => withStatus(loadEvents()));
 
   dom.refreshChartBtn.addEventListener("click", () => {
     if (!state.chartPointId) {
@@ -111,6 +124,10 @@ function bindEvents() {
       withStatus(loadEquipments());
     }
   });
+
+  document.addEventListener("equipments-updated", () => {
+    renderUnits();
+  });
 }
 
 async function bootstrap() {
@@ -122,8 +139,10 @@ async function bootstrap() {
   startLogs();
   startPointSocket();
 
+  await withStatus(loadUnits());
   await withStatus(loadSources());
   await withStatus(loadEquipments());
+  await withStatus(loadEvents());
   await withStatus(loadPoints());
 }
 

web/js/dom.js

@@ -3,6 +3,8 @@ const byId = (id) => document.getElementById(id);
 export const dom = {
   statusText: byId("statusText"),
   sourceList: byId("sourceList"),
+  unitList: byId("unitList"),
+  eventList: byId("eventList"),
   nodeTree: byId("nodeTree"),
   pointList: byId("pointList"),
   pointsPageInfo: byId("pointsPageInfo"),
@@ -18,11 +20,24 @@ export const dom = {
   chartTitle: byId("chartTitle"),
   chartSummary: byId("chartSummary"),
   pointModal: byId("pointModal"),
+  unitModal: byId("unitModal"),
   sourceModal: byId("sourceModal"),
   equipmentModal: byId("equipmentModal"),
   pointBindingModal: byId("pointBindingModal"),
   batchBindingModal: byId("batchBindingModal"),
   apiDocDrawer: byId("apiDocDrawer"),
+  unitForm: byId("unitForm"),
+  unitId: byId("unitId"),
+  unitCode: byId("unitCode"),
+  unitName: byId("unitName"),
+  unitDescription: byId("unitDescription"),
+  unitEnabled: byId("unitEnabled"),
+  unitRunTimeSec: byId("unitRunTimeSec"),
+  unitStopTimeSec: byId("unitStopTimeSec"),
+  unitAccTimeSec: byId("unitAccTimeSec"),
+  unitBlTimeSec: byId("unitBlTimeSec"),
+  unitManualAck: byId("unitManualAck"),
+  unitResetBtn: byId("unitReset"),
   sourceForm: byId("sourceForm"),
   sourceId: byId("sourceId"),
   sourceName: byId("sourceName"),
@@ -31,14 +46,23 @@ export const dom = {
   sourceResetBtn: byId("sourceReset"),
   equipmentForm: byId("equipmentForm"),
   equipmentId: byId("equipmentId"),
+  equipmentUnitId: byId("equipmentUnitId"),
   equipmentCode: byId("equipmentCode"),
   equipmentName: byId("equipmentName"),
   equipmentKind: byId("equipmentKind"),
   equipmentDescription: byId("equipmentDescription"),
   equipmentResetBtn: byId("equipmentReset"),
   equipmentKeyword: byId("equipmentKeyword"),
+  equipmentBatchUnitId: byId("equipmentBatchUnitId"),
+  selectedEquipmentSummary: byId("selectedEquipmentSummary"),
   equipmentList: byId("equipmentList"),
+  refreshUnitBtn: byId("refreshUnitBtn"),
+  newUnitBtn: byId("newUnitBtn"),
+  closeUnitModalBtn: byId("closeUnitModal"),
   closeEquipmentModalBtn: byId("closeEquipmentModal"),
+  refreshEventBtn: byId("refreshEventBtn"),
+  applyEquipmentUnitBtn: byId("applyEquipmentUnitBtn"),
+  clearEquipmentSelectionBtn: byId("clearEquipmentSelectionBtn"),
   pointBindingForm: byId("pointBindingForm"),
   bindingPointId: byId("bindingPointId"),
   bindingPointName: byId("bindingPointName"),

web/js/equipment.js

@@ -8,9 +8,61 @@ function equipmentOf(item) {
   return item && item.equipment ? item.equipment : item;
 }
 
+function currentUnitLabel(unitId) {
+  if (!unitId) {
+    return "未绑定单元";
+  }
+  const unit = state.unitMap.get(unitId);
+  return unit ? `${unit.code} / ${unit.name}` : "未知单元";
+}
+
+function filteredEquipments() {
+  if (!state.selectedUnitId) {
+    return state.equipments;
+  }
+
+  return state.equipments.filter((item) => {
+    const equipment = equipmentOf(item);
+    return equipment.unit_id === state.selectedUnitId;
+  });
+}
+
+function renderEquipmentUnitOptions(selected = "", target = dom.equipmentUnitId) {
+  if (!target) {
+    return;
+  }
+
+  const options = ['<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("");
+}
+
+function renderBatchUnitOptions(selected = "") {
+  if (!dom.equipmentBatchUnitId) {
+    return;
+  }
+
+  const options = ['<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>`);
+  });
+  dom.equipmentBatchUnitId.innerHTML = options.join("");
+}
+
+function updateSelectedEquipmentSummary() {
+  if (!dom.selectedEquipmentSummary) {
+    return;
+  }
+  dom.selectedEquipmentSummary.textContent = `已选 ${state.selectedEquipmentIds.size} 台设备`;
+}
+
 export function renderBindingEquipmentOptions(selected = "", target = dom.bindingEquipmentId) {
   const options = ['<option value="">Unbound</option>'];
-  state.equipments.forEach((item) => {
+  filteredEquipments().forEach((item) => {
     const equipment = equipmentOf(item);
     const isSelected = equipment.id === selected ? "selected" : "";
     options.push(
@@ -28,6 +80,7 @@ export function renderBatchBindingDefaults() {
 export function resetEquipmentForm() {
   dom.equipmentForm.reset();
   dom.equipmentId.value = "";
+  renderEquipmentUnitOptions("");
 }
 
 function openEquipmentModal() {
@@ -45,6 +98,7 @@ export function openCreateEquipmentModal() {
 
 function openEditEquipmentModal(equipment) {
   dom.equipmentId.value = equipment.id || "";
+  dom.equipmentUnitId.value = equipment.unit_id || "";
   dom.equipmentCode.value = equipment.code || "";
   dom.equipmentName.value = equipment.name || "";
   dom.equipmentKind.value = equipment.kind || "";
@@ -61,6 +115,21 @@ async function selectEquipment(equipmentId) {
   await loadPoints();
 }
 
+function toggleEquipmentSelection(equipmentId, checked) {
+  if (checked) {
+    state.selectedEquipmentIds.add(equipmentId);
+  } else {
+    state.selectedEquipmentIds.delete(equipmentId);
+  }
+  updateSelectedEquipmentSummary();
+}
+
+export function clearSelectedEquipments() {
+  state.selectedEquipmentIds.clear();
+  renderEquipments();
+  updateSelectedEquipmentSummary();
+}
+
 export function clearEquipmentFilter() {
   state.selectedEquipmentId = null;
   state.pointsPage = 1;
@@ -71,29 +140,37 @@ export function clearEquipmentFilter() {
 
 export function renderEquipments() {
   dom.equipmentList.innerHTML = "";
+  updateSelectedEquipmentSummary();
+
   const activeEquipment = state.selectedEquipmentId
     ? state.equipmentMap.get(state.selectedEquipmentId) || null
     : null;
   dom.clearEquipmentFilterBtn.textContent = activeEquipment
-    ? `设备筛选: ${activeEquipment.name}`
+    ? `设备筛选 ${activeEquipment.name}`
-    : "设备筛选: 全部";
+    : "设备筛选 全部";
 
-  if (!state.equipments.length) {
+  const items = filteredEquipments();
+  if (!items.length) {
     dom.equipmentList.innerHTML = '<div class="list-item"><div class="muted">No equipment</div></div>';
     return;
   }
 
-  state.equipments.forEach((item) => {
+  items.forEach((item) => {
     const equipment = equipmentOf(item);
     const box = document.createElement("div");
     box.className = `list-item equipment-card ${state.selectedEquipmentId === equipment.id ? "selected" : ""}`;
     box.innerHTML = `
+      <label class="equipment-select-row">
+        <input type="checkbox" data-equipment-select="true" ${state.selectedEquipmentIds.has(equipment.id) ? "checked" : ""} />
+        <span class="muted">批量选择</span>
+      </label>
       <div class="row">
         <strong>${equipment.code}</strong>
         <span class="badge">${item.point_count ?? 0} pts</span>
       </div>
       <div>${equipment.name}</div>
       <div class="muted">${equipment.kind || "No type"}</div>
+      <div class="muted">单元: ${currentUnitLabel(equipment.unit_id)}</div>
       <div class="row equipment-card-actions"></div>
     `;
 
@@ -103,6 +180,14 @@ export function renderEquipments() {
       });
     });
 
+    const checkbox = box.querySelector('input[data-equipment-select="true"]');
+    checkbox.addEventListener("click", (event) => {
+      event.stopPropagation();
+    });
+    checkbox.addEventListener("change", (event) => {
+      toggleEquipmentSelection(equipment.id, event.target.checked);
+    });
+
     const actionRow = box.querySelector(".equipment-card-actions");
 
     const editBtn = document.createElement("button");
@@ -141,6 +226,15 @@ export async function loadEquipments() {
       return [equipment.id, equipment];
     }),
   );
+
+  state.selectedEquipmentIds.forEach((id) => {
+    if (!state.equipmentMap.has(id)) {
+      state.selectedEquipmentIds.delete(id);
+    }
+  });
+
+  renderEquipmentUnitOptions(dom.equipmentUnitId?.value || "");
+  renderBatchUnitOptions(dom.equipmentBatchUnitId?.value || "");
   renderBindingEquipmentOptions();
   renderBatchBindingDefaults();
   if (state.selectedEquipmentId && !state.equipmentMap.has(state.selectedEquipmentId)) {
@@ -148,12 +242,15 @@ export async function loadEquipments() {
   }
   renderEquipments();
   updatePointFilterSummary();
+  document.dispatchEvent(new Event("equipments-updated"));
 }
 
 export async function saveEquipment(event) {
   event.preventDefault();
 
+  const unitId = dom.equipmentUnitId.value || null;
   const payload = {
+    unit_id: unitId,
     code: dom.equipmentCode.value.trim(),
     name: dom.equipmentName.value.trim(),
     kind: dom.equipmentKind.value.trim() || null,
@@ -176,6 +273,25 @@ export async function saveEquipment(event) {
   await loadPoints();
 }
 
+export async function applyBatchEquipmentUnit() {
+  if (!state.selectedEquipmentIds.size) {
+    throw new Error("请先选择设备");
+  }
+
+  const value = dom.equipmentBatchUnitId.value;
+  await apiFetch("/api/equipment/batch/set-unit", {
+    method: "PUT",
+    body: JSON.stringify({
+      equipment_ids: Array.from(state.selectedEquipmentIds),
+      unit_id: value || null,
+    }),
+  });
+
+  clearSelectedEquipments();
+  renderBatchUnitOptions("");
+  await loadEquipments();
+}
+
 export async function deleteEquipment(equipmentId) {
   if (!window.confirm("Delete this equipment?")) {
     return;
@@ -185,6 +301,7 @@ export async function deleteEquipment(equipmentId) {
   if (state.selectedEquipmentId === equipmentId) {
     state.selectedEquipmentId = null;
   }
+  state.selectedEquipmentIds.delete(equipmentId);
   resetEquipmentForm();
   closeEquipmentModal();
   clearSelectedPoints();

web/js/events.js

@@ -0,0 +1,48 @@
+import { apiFetch } from "./api.js";
+import { dom } from "./dom.js";
+import { state } from "./state.js";
+
+function formatTime(value) {
+  if (!value) {
+    return "--";
+  }
+  return value;
+}
+
+export function renderEvents() {
+  dom.eventList.innerHTML = "";
+
+  if (!state.events.length) {
+    dom.eventList.innerHTML = '<div class="list-item"><div class="muted">暂无事件</div></div>';
+    return;
+  }
+
+  state.events.forEach((item) => {
+    const row = document.createElement("div");
+    row.className = "list-item event-card";
+    row.innerHTML = `
+      <div class="row">
+        <strong>${item.event_type}</strong>
+        <span class="badge">${(item.level || "info").toUpperCase()}</span>
+      </div>
+      <div>${item.message}</div>
+      <div class="muted">${formatTime(item.created_at)}</div>
+    `;
+    dom.eventList.appendChild(row);
+  });
+}
+
+export async function loadEvents() {
+  const params = new URLSearchParams({
+    page: "1",
+    page_size: "20",
+  });
+
+  if (state.selectedUnitId) {
+    params.set("unit_id", state.selectedUnitId);
+  }
+
+  const response = await apiFetch(`/api/event?${params.toString()}`);
+  state.events = response.data || [];
+  renderEvents();
+}

web/js/state.js

@@ -1,8 +1,13 @@
 export const state = {
+  units: [],
+  unitMap: new Map(),
+  selectedUnitId: null,
   sources: [],
+  events: [],
   equipments: [],
   equipmentMap: new Map(),
   selectedEquipmentId: null,
+  selectedEquipmentIds: new Set(),
   selectedSourceId: null,
   selectedNodeIds: new Set(),
   selectedPointIds: new Set(),

web/js/units.js

@@ -0,0 +1,185 @@
+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 = "0";
+  dom.unitStopTimeSec.value = "0";
+  dom.unitAccTimeSec.value = "0";
+  dom.unitBlTimeSec.value = "0";
+}
+
+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();
+}
+
+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" : ""}`;
+    card.innerHTML = `
+      <div class="row">
+        <strong>${unit.code}</strong>
+        <span class="badge ${unit.enabled ? "" : "offline"}">${unit.enabled ? "ENABLED" : "DISABLED"}</span>
+      </div>
+      <div>${unit.name}</div>
+      <div class="muted">设备 ${equipmentCount(unit.id)} 台</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);
+    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;
+  }
+
+  renderUnits();
+  renderUnitOptions(dom.equipmentUnitId?.value || "", dom.equipmentUnitId);
+  renderUnitOptions(dom.equipmentBatchUnitId?.value || "", dom.equipmentBatchUnitId);
+}
+
+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();
+}

web/styles.css

@@ -101,6 +101,24 @@ body {
   overflow: hidden;
 }
 
+.stack-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.stack-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 0;
+}
+
+.stack-section-bordered {
+  border-top: 1px solid var(--border-light);
+}
+
 /* ── Panel Header ───────────────────────────────── */
 
 .panel-head {
@@ -408,6 +426,25 @@ button.danger:hover { background: var(--danger-hover); }
   background: var(--surface);
 }
 
+.equipment-batch-toolbar {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-light);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.equipment-batch-toolbar .muted {
+  min-width: 90px;
+}
+
+.equipment-batch-toolbar select {
+  flex: 1;
+  min-width: 0;
+  padding: 7px 10px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
 /* ── Form ─────────────────────────────────────────── */
 
 .form {
@@ -623,6 +660,43 @@ button.danger:hover { background: var(--danger-hover); }
   max-height: 50vh;
 }
 
+.unit-list,
+.event-list {
+  padding-top: 6px;
+}
+
+.unit-card-actions {
+  padding-top: 4px;
+}
+
+.event-card {
+  cursor: default;
+}
+
+.event-card:hover {
+  background: var(--surface);
+  border-color: var(--border);
+}
+
+.event-section {
+  flex-basis: 42%;
+}
+
+.log-section {
+  flex-basis: 58%;
+}
+
+.equipment-select-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.equipment-select-row input {
+  margin: 0;
+}
+
 .drawer-backdrop {
   position: fixed;
   inset: 0;