feat: enhance dashboard and robot management
This commit is contained in:
161
frontend/app.js
161
frontend/app.js
@@ -3,10 +3,31 @@ const VIEW_LABELS = {
|
||||
overview: "系统总览",
|
||||
inspection: "视频巡检",
|
||||
events: "告警中心",
|
||||
robots: "机器人管理",
|
||||
risks: "风险台账",
|
||||
channels: "通知通道",
|
||||
settings: "系统设置",
|
||||
};
|
||||
const ROBOTS = [
|
||||
{ id: "FR-001", name: "巡检一号", type: "轮式热成像", zone: "A 仓储区", status: "active", battery: 86, signal: 92, temperature: 41, progress: 68, mission: "仓储区例行巡检", distance: 3.8, sensors: ["热成像", "烟雾", "可见光"] },
|
||||
{ id: "FR-002", name: "巡检二号", type: "履带防爆型", zone: "B 生产区", status: "active", battery: 72, signal: 87, temperature: 38, progress: 43, mission: "生产线火点复核", distance: 4.6, sensors: ["热成像", "气体", "可见光"] },
|
||||
{ id: "FR-003", name: "哨兵三号", type: "固定巡检站", zone: "C 能源站", status: "charging", battery: 34, signal: 96, temperature: 36, progress: 100, mission: "自动回充", distance: 1.9, sensors: ["热成像", "烟雾", "温湿度"] },
|
||||
{ id: "FR-004", name: "云台四号", type: "升降云台型", zone: "D 装卸区", status: "offline", battery: 12, signal: 0, temperature: 29, progress: 0, mission: "等待维护", distance: 0.7, sensors: ["可见光", "烟雾"] },
|
||||
];
|
||||
|
||||
const MISSIONS = [
|
||||
{ time: "08:30", title: "仓储区例行巡检", robot: "巡检一号", status: "active", progress: 68 },
|
||||
{ time: "09:15", title: "生产线火点复核", robot: "巡检二号", status: "active", progress: 43 },
|
||||
{ time: "11:00", title: "能源站热源扫描", robot: "哨兵三号", status: "queued", progress: 0 },
|
||||
{ time: "14:30", title: "装卸区消防通道检查", robot: "待分配", status: "queued", progress: 0 },
|
||||
];
|
||||
|
||||
const ROBOT_STATUS = {
|
||||
active: { label: "任务中", tone: "active" },
|
||||
charging: { label: "充电中", tone: "charging" },
|
||||
standby: { label: "待命", tone: "standby" },
|
||||
offline: { label: "离线", tone: "offline" },
|
||||
};
|
||||
const STATUS_LABELS = {
|
||||
pending: "待处置",
|
||||
acknowledged: "已确认",
|
||||
@@ -15,8 +36,7 @@ const STATUS_LABELS = {
|
||||
|
||||
const elements = Object.fromEntries(
|
||||
[
|
||||
"ackEventsCount", "alertStatus", "allEventsCount", "channelCount",
|
||||
"channelSummary", "clearButton", "confirmFramesValue", "cooldownValue",
|
||||
"ackEventsCount", "alertStatus", "allEventsCount", "clearButton", "confirmFramesValue", "cooldownValue",
|
||||
"currentClock", "detectionList", "emptyState", "eventTableBody",
|
||||
"eventTableMeta", "feishuChannelBadge", "fireCount", "globalStatus",
|
||||
"inspectionStatus", "intervalSelect", "lastUpdated", "loadingState",
|
||||
@@ -30,7 +50,12 @@ const elements = Object.fromEntries(
|
||||
"settingWeights", "sidebar", "sidebarStatus", "sidebarStatusDot", "smokeCount",
|
||||
"sourceLabel", "todayEventCount", "toastRegion", "trendChart", "videoClock",
|
||||
"videoInput", "videoMeta", "videoPreview", "viewBreadcrumb", "viewTitle",
|
||||
"wechatChannelBadge",
|
||||
"wechatChannelBadge", "deviceOnlineRate", "dispatchRobotButton",
|
||||
"eventClosureRate", "fireRiskRatio", "missionQueue", "missionQueueCount",
|
||||
"notificationCoverage", "onlineRobotCount", "riskDonut", "riskTotal",
|
||||
"robotAverageBattery", "robotCardGrid", "robotDistance", "robotMissionCount",
|
||||
"robotNavCount", "robotSearchInput", "robotSummary", "robotTotalCount",
|
||||
"safetyGauge", "safetyScore", "smokeRiskRatio",
|
||||
].map((id) => [id, document.querySelector(`#${id}`)])
|
||||
);
|
||||
|
||||
@@ -43,6 +68,7 @@ let lastDetectionAt = 0;
|
||||
let dashboardData = null;
|
||||
let eventData = [];
|
||||
let eventFilter = "";
|
||||
let robotFilter = "all";
|
||||
|
||||
function showToast(message, type = "info") {
|
||||
const toast = document.createElement("div");
|
||||
@@ -64,6 +90,7 @@ function switchView(viewName) {
|
||||
elements.viewBreadcrumb.textContent = VIEW_LABELS[viewName];
|
||||
elements.sidebar.classList.remove("is-open");
|
||||
if (viewName === "events") loadEvents();
|
||||
if (viewName === "robots") renderRobots();
|
||||
if (["overview", "risks", "channels", "settings"].includes(viewName)) loadDashboard();
|
||||
}
|
||||
|
||||
@@ -118,8 +145,9 @@ function updateDashboard(data) {
|
||||
elements.modelStatusValue.textContent = system.weights_available ? "运行正常" : "权重缺失";
|
||||
elements.modelStatusDetail.textContent = system.weights_available ? "模型文件已就绪" : "请检查 YOLO_WEIGHTS";
|
||||
elements.modelStatusValue.className = "text-value";
|
||||
elements.channelCount.textContent = String(channelNames.length);
|
||||
elements.channelSummary.textContent = channelNames.length ? channelNames.join(" + ") : "尚未启用机器人";
|
||||
const onlineRobots = ROBOTS.filter((robot) => robot.status !== "offline").length;
|
||||
elements.onlineRobotCount.textContent = String(onlineRobots);
|
||||
elements.robotSummary.textContent = `${onlineRobots} / ${ROBOTS.length} 在线 · ${ROBOTS.filter((robot) => robot.status === "active").length} 台任务中`;
|
||||
elements.overviewMessage.textContent = summary.pending
|
||||
? `当前有 ${summary.pending} 条告警事件等待处置，请尽快进入告警中心确认。`
|
||||
: "当前无待处置事件，模型与视频巡检服务保持监测状态。";
|
||||
@@ -141,9 +169,104 @@ function updateDashboard(data) {
|
||||
elements.settingConfirmFrames.textContent = `${detection.confirm_frames} 帧`;
|
||||
elements.settingCooldown.textContent = `${detection.cooldown_seconds} 秒`;
|
||||
renderRecentEvents(data.recent_events || []);
|
||||
renderTrend(eventData.length ? eventData : data.recent_events || []);
|
||||
const visualEvents = eventData.length ? eventData : data.recent_events || [];
|
||||
renderTrend(visualEvents);
|
||||
updateCommandVisuals(visualEvents, summary, channels);
|
||||
renderRobots();
|
||||
}
|
||||
|
||||
function updateCommandVisuals(events, summary, channels) {
|
||||
const onlineRobots = ROBOTS.filter((robot) => robot.status !== "offline").length;
|
||||
const total = summary.total || 0;
|
||||
const closureRate = total ? Math.round(((summary.resolved || 0) / total) * 100) : 100;
|
||||
const notificationRate = Math.round((enabledChannelNames(channels).length / 2) * 100);
|
||||
const deviceRate = Math.round((onlineRobots / ROBOTS.length) * 100);
|
||||
const safetyScore = Math.max(42, Math.min(98, Math.round(deviceRate * 0.35 + closureRate * 0.35 + Math.max(50, notificationRate) * 0.15 + Math.max(0, 100 - (summary.pending || 0) * 8) * 0.15)));
|
||||
elements.deviceOnlineRate.textContent = `${deviceRate}%`;
|
||||
elements.eventClosureRate.textContent = `${closureRate}%`;
|
||||
elements.notificationCoverage.textContent = `${notificationRate}%`;
|
||||
elements.safetyScore.textContent = String(safetyScore);
|
||||
elements.safetyGauge.style.setProperty("--score", safetyScore);
|
||||
|
||||
let fireEvents = 0;
|
||||
let smokeEvents = 0;
|
||||
events.forEach((event) => {
|
||||
if ((event.classes || []).includes("fire")) fireEvents += 1;
|
||||
if ((event.classes || []).includes("smoke")) smokeEvents += 1;
|
||||
});
|
||||
const detectedTotal = fireEvents + smokeEvents;
|
||||
const chartTotal = Math.max(detectedTotal, 1);
|
||||
const fireArc = Math.round((fireEvents / chartTotal) * 88);
|
||||
const smokeArc = detectedTotal ? 88 - fireArc : 0;
|
||||
elements.riskTotal.textContent = String(detectedTotal);
|
||||
elements.fireRiskRatio.textContent = `${detectedTotal ? Math.round((fireEvents / detectedTotal) * 100) : 0}%`;
|
||||
elements.smokeRiskRatio.textContent = `${detectedTotal ? Math.round((smokeEvents / detectedTotal) * 100) : 0}%`;
|
||||
elements.riskDonut.style.background = `conic-gradient(var(--red) 0 ${fireArc}%, var(--cyan) ${fireArc}% ${fireArc + smokeArc}%, var(--orange) ${fireArc + smokeArc}% 100%)`;
|
||||
}
|
||||
|
||||
function renderRobots() {
|
||||
const query = (elements.robotSearchInput?.value || "").trim().toLowerCase();
|
||||
const filtered = ROBOTS.filter((robot) => {
|
||||
const matchesStatus = robotFilter === "all" || robot.status === robotFilter;
|
||||
const haystack = `${robot.id} ${robot.name} ${robot.zone} ${robot.type}`.toLowerCase();
|
||||
return matchesStatus && haystack.includes(query);
|
||||
});
|
||||
const activeCount = ROBOTS.filter((robot) => robot.status === "active").length;
|
||||
const onlineCount = ROBOTS.filter((robot) => robot.status !== "offline").length;
|
||||
const averageBattery = Math.round(ROBOTS.reduce((sum, robot) => sum + robot.battery, 0) / ROBOTS.length);
|
||||
elements.robotTotalCount.textContent = String(ROBOTS.length);
|
||||
elements.robotMissionCount.textContent = String(activeCount);
|
||||
elements.robotAverageBattery.textContent = `${averageBattery}%`;
|
||||
elements.robotDistance.textContent = `${ROBOTS.reduce((sum, robot) => sum + robot.distance, 0).toFixed(1)} km`;
|
||||
elements.robotNavCount.textContent = String(onlineCount);
|
||||
elements.robotCardGrid.innerHTML = filtered.length ? filtered.map(robotCardTemplate).join("") : '<div class="panel robot-empty">没有匹配的机器人资产</div>';
|
||||
renderMissionQueue();
|
||||
}
|
||||
|
||||
function robotCardTemplate(robot) {
|
||||
const status = ROBOT_STATUS[robot.status];
|
||||
const batteryTone = robot.battery < 25 ? "danger" : robot.battery < 45 ? "warning" : "healthy";
|
||||
const actionLabel = robot.status === "active" ? "暂停任务" : robot.status === "offline" ? "发起诊断" : "下发任务";
|
||||
return `<article class="panel robot-card" data-robot-id="${robot.id}">
|
||||
<div class="robot-card-head"><div class="robot-avatar"><span></span><i></i></div><div><span class="robot-id">${robot.id}</span><h3>${robot.name}</h3><p>${robot.type}</p></div><span class="robot-status ${status.tone}"><i></i>${status.label}</span></div>
|
||||
<div class="robot-location"><span>当前位置</span><strong>${robot.zone}</strong></div>
|
||||
<div class="robot-mission"><div><span>${robot.mission}</span><strong>${robot.progress}%</strong></div><div class="progress-track"><i style="width:${robot.progress}%"></i></div></div>
|
||||
<div class="robot-telemetry"><div><span>电量</span><strong class="${batteryTone}">${robot.battery}%</strong></div><div><span>信号</span><strong>${robot.signal}%</strong></div><div><span>机身温度</span><strong>${robot.temperature}℃</strong></div></div>
|
||||
<div class="sensor-tags">${robot.sensors.map((sensor) => `<span>${sensor}</span>`).join("")}</div>
|
||||
<div class="robot-actions"><button class="secondary-button" type="button" data-robot-action="detail">查看详情</button><button class="primary-button" type="button" data-robot-action="toggle">${actionLabel}</button>${robot.status !== "offline" ? '<button class="icon-button" type="button" data-robot-action="return" title="返回充电桩">↩</button>' : ""}</div>
|
||||
</article>`;
|
||||
}
|
||||
|
||||
function renderMissionQueue() {
|
||||
elements.missionQueueCount.textContent = String(MISSIONS.length);
|
||||
elements.missionQueue.innerHTML = MISSIONS.map((mission, index) => `<div class="mission-item"><div class="mission-time"><strong>${mission.time}</strong><span>${index + 1}</span></div><div class="mission-copy"><strong>${mission.title}</strong><span>${mission.robot}</span><div class="progress-track"><i style="width:${mission.progress}%"></i></div></div><span class="mission-status ${mission.status}">${mission.status === "active" ? "执行中" : "待执行"}</span></div>`).join("");
|
||||
}
|
||||
|
||||
function handleRobotAction(button) {
|
||||
const card = button.closest("[data-robot-id]");
|
||||
const robot = ROBOTS.find((item) => item.id === card?.dataset.robotId);
|
||||
if (!robot) return;
|
||||
const action = button.dataset.robotAction;
|
||||
if (action === "detail") {
|
||||
showToast(`${robot.name}：${robot.zone}，电量 ${robot.battery}%，信号 ${robot.signal}%`);
|
||||
return;
|
||||
}
|
||||
if (action === "return") {
|
||||
robot.status = "charging";
|
||||
robot.mission = "返回充电桩";
|
||||
robot.progress = 100;
|
||||
showToast(`${robot.name} 已收到返航指令`, "success");
|
||||
} else if (robot.status === "offline") {
|
||||
showToast(`${robot.name} 离线，已创建远程诊断工单`, "error");
|
||||
} else {
|
||||
robot.status = robot.status === "active" ? "standby" : "active";
|
||||
robot.mission = robot.status === "active" ? "临时重点区域巡检" : "待命中";
|
||||
robot.progress = robot.status === "active" ? 8 : 0;
|
||||
showToast(`${robot.name}${robot.status === "active" ? " 已开始新任务" : " 已暂停任务"}`, "success");
|
||||
}
|
||||
renderRobots();
|
||||
if (dashboardData) updateCommandVisuals(eventData.length ? eventData : dashboardData.recent_events || [], dashboardData.summary, dashboardData.system.alert_channels || {});
|
||||
}
|
||||
function setChannelReady(element, enabled) {
|
||||
element.textContent = enabled ? "已启用" : "未配置";
|
||||
element.className = enabled ? "ready" : "optional";
|
||||
@@ -400,6 +523,31 @@ document.querySelectorAll("[data-event-filter]").forEach((button) => {
|
||||
loadEvents();
|
||||
});
|
||||
});
|
||||
document.querySelectorAll("[data-robot-filter]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
robotFilter = button.dataset.robotFilter;
|
||||
document.querySelectorAll("[data-robot-filter]").forEach((item) => item.classList.toggle("is-active", item === button));
|
||||
renderRobots();
|
||||
});
|
||||
});
|
||||
elements.robotSearchInput.addEventListener("input", renderRobots);
|
||||
elements.robotCardGrid.addEventListener("click", (event) => {
|
||||
const button = event.target.closest("[data-robot-action]");
|
||||
if (button) handleRobotAction(button);
|
||||
});
|
||||
elements.dispatchRobotButton.addEventListener("click", () => {
|
||||
const available = ROBOTS.find((robot) => ["standby", "charging"].includes(robot.status));
|
||||
if (!available) {
|
||||
showToast("当前没有可调度机器人，请先暂停现有任务。", "error");
|
||||
return;
|
||||
}
|
||||
available.status = "active";
|
||||
available.mission = "临时重点区域巡检";
|
||||
available.progress = 5;
|
||||
showToast(`任务已下发给 ${available.name}`, "success");
|
||||
renderRobots();
|
||||
});
|
||||
document.querySelector(".mission-history-button")?.addEventListener("click", () => showToast("任务历史模块已就绪，可继续对接后端任务接口。"));
|
||||
elements.eventTableBody.addEventListener("click", (event) => {
|
||||
const button = event.target.closest("[data-event-id]");
|
||||
if (button) updateEventStatus(button.dataset.eventId, button.dataset.eventStatus);
|
||||
@@ -451,4 +599,5 @@ elements.clearButton.addEventListener("click", async () => {
|
||||
updateClock();
|
||||
setInterval(updateClock, 1000);
|
||||
resetSession();
|
||||
renderRobots();
|
||||
Promise.all([loadDashboard(), loadEvents()]);
|
||||
|
||||
Reference in New Issue
Block a user