604 lines
31 KiB
JavaScript
604 lines
31 KiB
JavaScript
const API_ENDPOINT = "/api/detect";
|
||
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: "已确认",
|
||
resolved: "已解决",
|
||
};
|
||
|
||
const elements = Object.fromEntries(
|
||
[
|
||
"ackEventsCount", "alertStatus", "allEventsCount", "clearButton", "confirmFramesValue", "cooldownValue",
|
||
"currentClock", "detectionList", "emptyState", "eventTableBody",
|
||
"eventTableMeta", "feishuChannelBadge", "fireCount", "globalStatus",
|
||
"inspectionStatus", "intervalSelect", "lastUpdated", "loadingState",
|
||
"maxConfidence", "menuButton", "modelStatusDetail", "modelStatusValue",
|
||
"notificationDot", "overlayCanvas", "overviewMessage", "pendingEventCount",
|
||
"pendingEventsCount", "pendingNavCount", "readyApi", "readyFeishu",
|
||
"readyWechat", "readyWeights", "recentEventList", "refreshEventsButton",
|
||
"resolvedEventsCount", "riskChannelValue", "riskConfidenceValue",
|
||
"riskPendingValue", "riskStatus", "runDetectionButton", "settingConfidence",
|
||
"settingConfirmFrames", "settingCooldown", "settingImageSize", "settingIou",
|
||
"settingWeights", "sidebar", "sidebarStatus", "sidebarStatusDot", "smokeCount",
|
||
"sourceLabel", "todayEventCount", "toastRegion", "trendChart", "videoClock",
|
||
"videoInput", "videoMeta", "videoPreview", "viewBreadcrumb", "viewTitle",
|
||
"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}`)])
|
||
);
|
||
|
||
const frameCanvas = document.createElement("canvas");
|
||
let videoUrl = null;
|
||
let sessionId = null;
|
||
let detectionActive = false;
|
||
let requestInFlight = false;
|
||
let lastDetectionAt = 0;
|
||
let dashboardData = null;
|
||
let eventData = [];
|
||
let eventFilter = "";
|
||
let robotFilter = "all";
|
||
|
||
function showToast(message, type = "info") {
|
||
const toast = document.createElement("div");
|
||
toast.className = `toast ${type}`;
|
||
toast.textContent = message;
|
||
elements.toastRegion.appendChild(toast);
|
||
setTimeout(() => toast.remove(), 3600);
|
||
}
|
||
|
||
function switchView(viewName) {
|
||
if (!VIEW_LABELS[viewName]) return;
|
||
document.querySelectorAll("[data-view-panel]").forEach((panel) => {
|
||
panel.classList.toggle("is-active", panel.dataset.viewPanel === viewName);
|
||
});
|
||
document.querySelectorAll("[data-view]").forEach((button) => {
|
||
button.classList.toggle("is-active", button.dataset.view === viewName);
|
||
});
|
||
elements.viewTitle.textContent = VIEW_LABELS[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();
|
||
}
|
||
|
||
function setServiceStatus(online) {
|
||
elements.globalStatus.textContent = online ? "服务运行正常" : "服务连接异常";
|
||
elements.globalStatus.className = `status-chip ${online ? "status-online" : "status-offline"}`;
|
||
elements.sidebarStatus.textContent = online ? "服务在线" : "服务离线";
|
||
elements.sidebarStatusDot.className = `status-dot ${online ? "is-online" : "is-offline"}`;
|
||
elements.readyApi.textContent = online ? "正常" : "异常";
|
||
elements.readyApi.className = online ? "ready" : "not-ready";
|
||
}
|
||
|
||
function enabledChannelNames(channels = {}) {
|
||
const names = [];
|
||
if (channels.wechat) names.push("企业微信");
|
||
if (channels.feishu) names.push("飞书");
|
||
return names;
|
||
}
|
||
|
||
function updateClock() {
|
||
elements.currentClock.textContent = new Date().toLocaleString("zh-CN", {
|
||
hour12: false,
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
second: "2-digit",
|
||
});
|
||
}
|
||
|
||
function formatDate(value) {
|
||
if (!value) return "--";
|
||
return new Date(value).toLocaleString("zh-CN", { hour12: false });
|
||
}
|
||
|
||
function formatTime(seconds) {
|
||
if (!Number.isFinite(seconds)) return "00:00";
|
||
const minutes = Math.floor(seconds / 60);
|
||
const remaining = Math.floor(seconds % 60);
|
||
return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
|
||
}
|
||
|
||
function updateDashboard(data) {
|
||
dashboardData = data;
|
||
const { summary, system, detection } = data;
|
||
const channels = system.alert_channels || {};
|
||
const channelNames = enabledChannelNames(channels);
|
||
elements.todayEventCount.textContent = String(summary.today);
|
||
elements.pendingEventCount.textContent = String(summary.pending);
|
||
elements.pendingNavCount.textContent = String(summary.pending);
|
||
elements.notificationDot.hidden = summary.pending === 0;
|
||
elements.modelStatusValue.textContent = system.weights_available ? "运行正常" : "权重缺失";
|
||
elements.modelStatusDetail.textContent = system.weights_available ? "模型文件已就绪" : "请检查 YOLO_WEIGHTS";
|
||
elements.modelStatusValue.className = "text-value";
|
||
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} 条告警事件等待处置，请尽快进入告警中心确认。`
|
||
: "当前无待处置事件，模型与视频巡检服务保持监测状态。";
|
||
elements.readyWeights.textContent = system.weights_available ? "已就绪" : "缺失";
|
||
elements.readyWeights.className = system.weights_available ? "ready" : "not-ready";
|
||
setChannelReady(elements.readyWechat, channels.wechat);
|
||
setChannelReady(elements.readyFeishu, channels.feishu);
|
||
setChannelBadge(elements.wechatChannelBadge, channels.wechat);
|
||
setChannelBadge(elements.feishuChannelBadge, channels.feishu);
|
||
elements.riskPendingValue.textContent = String(summary.pending);
|
||
elements.riskChannelValue.textContent = `${channelNames.length} / 2`;
|
||
elements.riskConfidenceValue.textContent = `${Math.round(detection.confidence * 100)}%`;
|
||
elements.confirmFramesValue.textContent = `${detection.confirm_frames} 帧`;
|
||
elements.cooldownValue.textContent = `${detection.cooldown_seconds} 秒`;
|
||
elements.settingWeights.textContent = system.weights;
|
||
elements.settingImageSize.textContent = `${detection.image_size} px`;
|
||
elements.settingConfidence.textContent = detection.confidence.toFixed(2);
|
||
elements.settingIou.textContent = detection.iou.toFixed(2);
|
||
elements.settingConfirmFrames.textContent = `${detection.confirm_frames} 帧`;
|
||
elements.settingCooldown.textContent = `${detection.cooldown_seconds} 秒`;
|
||
renderRecentEvents(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";
|
||
}
|
||
|
||
function setChannelBadge(element, enabled) {
|
||
element.textContent = enabled ? "已启用" : "未配置";
|
||
element.className = `channel-badge ${enabled ? "enabled" : ""}`;
|
||
}
|
||
|
||
async function loadDashboard() {
|
||
try {
|
||
const response = await fetch("/api/dashboard");
|
||
if (!response.ok) throw new Error(`API ${response.status}`);
|
||
const data = await response.json();
|
||
setServiceStatus(true);
|
||
updateDashboard(data);
|
||
} catch (error) {
|
||
setServiceStatus(false);
|
||
showToast(`无法读取管理数据：${error.message}`, "error");
|
||
}
|
||
}
|
||
|
||
async function loadEvents() {
|
||
try {
|
||
const query = eventFilter ? `?status=${eventFilter}` : "";
|
||
const response = await fetch(`/api/events${query}`);
|
||
if (!response.ok) throw new Error(`API ${response.status}`);
|
||
const result = await response.json();
|
||
eventData = result.events || [];
|
||
renderEventTable(eventData);
|
||
updateEventSummary(result.summary);
|
||
renderTrend(eventData);
|
||
setServiceStatus(true);
|
||
} catch (error) {
|
||
setServiceStatus(false);
|
||
showToast(`无法读取告警事件：${error.message}`, "error");
|
||
}
|
||
}
|
||
|
||
function updateEventSummary(summary) {
|
||
elements.allEventsCount.textContent = String(summary.total);
|
||
elements.pendingEventsCount.textContent = String(summary.pending);
|
||
elements.ackEventsCount.textContent = String(summary.acknowledged);
|
||
elements.resolvedEventsCount.textContent = String(summary.resolved);
|
||
elements.pendingNavCount.textContent = String(summary.pending);
|
||
elements.notificationDot.hidden = summary.pending === 0;
|
||
}
|
||
|
||
function renderRecentEvents(events) {
|
||
if (!events.length) {
|
||
elements.recentEventList.innerHTML = "<p>暂无告警事件。开始视频巡检后，满足连续帧条件的告警会显示在这里。</p>";
|
||
return;
|
||
}
|
||
elements.recentEventList.innerHTML = events.map((event) => {
|
||
const primary = event.classes.includes("fire") ? "fire" : "smoke";
|
||
const label = event.classes.map(classLabel).join("、");
|
||
return `<div class="event-list-item"><span class="event-type-icon ${primary}">${primary === "fire" ? "火" : "烟"}</span><div class="event-description"><strong>${label}检测告警</strong><span>${formatDate(event.created_at)} · ${event.id}</span></div><strong class="event-confidence">${Math.round(event.max_confidence * 100)}%</strong><span class="event-status status-${event.status}">${STATUS_LABELS[event.status]}</span></div>`;
|
||
}).join("");
|
||
}
|
||
|
||
function renderEventTable(events) {
|
||
elements.eventTableMeta.textContent = `${events.length} 条记录`;
|
||
if (!events.length) {
|
||
elements.eventTableBody.innerHTML = '<tr><td colspan="7" class="empty-cell">当前筛选条件下暂无告警事件</td></tr>';
|
||
return;
|
||
}
|
||
elements.eventTableBody.innerHTML = events.map((event) => {
|
||
const classes = event.classes.map((name) => `<span class="type-tag type-${name}">${classLabel(name)}</span>`).join(" ");
|
||
const channels = enabledChannelNames(event.notification_channels).join(" + ") || "未发送";
|
||
return `<tr><td>${event.id}</td><td>${formatDate(event.created_at)}</td><td>${classes}</td><td>${Math.round(event.max_confidence * 100)}%</td><td>${channels}</td><td><span class="event-status status-${event.status}">${STATUS_LABELS[event.status]}</span></td><td><div class="table-actions">${event.status === "pending" ? `<button class="table-action" data-event-id="${event.id}" data-event-status="acknowledged">确认</button>` : ""}${event.status !== "resolved" ? `<button class="table-action" data-event-id="${event.id}" data-event-status="resolved">解决</button>` : ""}</div></td></tr>`;
|
||
}).join("");
|
||
}
|
||
|
||
function classLabel(name) {
|
||
return name === "fire" ? "火焰" : "烟雾";
|
||
}
|
||
|
||
async function updateEventStatus(eventId, status) {
|
||
try {
|
||
const response = await fetch(`/api/events/${eventId}`, {
|
||
method: "PATCH",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ status }),
|
||
});
|
||
if (!response.ok) throw new Error(`API ${response.status}`);
|
||
showToast(`事件 ${eventId} 已更新为${STATUS_LABELS[status]}`, "success");
|
||
await Promise.all([loadEvents(), loadDashboard()]);
|
||
} catch (error) {
|
||
showToast(`事件更新失败：${error.message}`, "error");
|
||
}
|
||
}
|
||
|
||
function renderTrend(events) {
|
||
const days = Array.from({ length: 7 }, (_, index) => {
|
||
const date = new Date();
|
||
date.setDate(date.getDate() - (6 - index));
|
||
return { key: date.toISOString().slice(0, 10), label: `${date.getMonth() + 1}/${date.getDate()}`, fire: 0, smoke: 0 };
|
||
});
|
||
events.forEach((event) => {
|
||
const day = days.find((item) => item.key === String(event.created_at).slice(0, 10));
|
||
if (!day) return;
|
||
if (event.classes.includes("fire")) day.fire += 1;
|
||
if (event.classes.includes("smoke")) day.smoke += 1;
|
||
});
|
||
const width = 720;
|
||
const height = 225;
|
||
const padding = { left: 34, right: 12, top: 14, bottom: 28 };
|
||
const maxValue = Math.max(3, ...days.flatMap((day) => [day.fire, day.smoke]));
|
||
const x = (index) => padding.left + index * ((width - padding.left - padding.right) / 6);
|
||
const y = (value) => height - padding.bottom - value * ((height - padding.top - padding.bottom) / maxValue);
|
||
const path = (key) => days.map((day, index) => `${index ? "L" : "M"}${x(index)},${y(day[key])}`).join(" ");
|
||
const gridValues = [0, Math.ceil(maxValue / 2), maxValue];
|
||
elements.trendChart.innerHTML = `<svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="none"><title>最近七天火焰与烟雾告警趋势</title>${gridValues.map((value) => `<line class="chart-grid" x1="${padding.left}" x2="${width - padding.right}" y1="${y(value)}" y2="${y(value)}"></line><text class="chart-axis-label" x="4" y="${y(value) + 3}">${value}</text>`).join("")}<path class="chart-fire" d="${path("fire")}"></path><path class="chart-smoke" d="${path("smoke")}"></path>${days.map((day, index) => `<circle class="chart-point-fire" cx="${x(index)}" cy="${y(day.fire)}" r="3"></circle><circle class="chart-point-smoke" cx="${x(index)}" cy="${y(day.smoke)}" r="3"></circle><text class="chart-axis-label" text-anchor="middle" x="${x(index)}" y="${height - 8}">${day.label}</text>`).join("")}</svg>`;
|
||
}
|
||
|
||
function clearDetectionResults() {
|
||
elements.smokeCount.textContent = "0";
|
||
elements.fireCount.textContent = "0";
|
||
elements.maxConfidence.textContent = "--";
|
||
elements.riskStatus.textContent = "待机";
|
||
elements.detectionList.innerHTML = '<p class="empty-copy">暂无检测结果</p>';
|
||
const context = elements.overlayCanvas.getContext("2d");
|
||
context.clearRect(0, 0, elements.overlayCanvas.width, elements.overlayCanvas.height);
|
||
}
|
||
|
||
function drawDetections(detections = []) {
|
||
const video = elements.videoPreview;
|
||
if (!video.videoWidth || !video.videoHeight) return;
|
||
const canvas = elements.overlayCanvas;
|
||
canvas.width = video.videoWidth;
|
||
canvas.height = video.videoHeight;
|
||
const context = canvas.getContext("2d");
|
||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||
detections.forEach((detection) => {
|
||
const [x1, y1, x2, y2] = detection.box || [];
|
||
const color = detection.class === "fire" ? "#ff665e" : "#41d6c3";
|
||
context.strokeStyle = color;
|
||
context.lineWidth = Math.max(2, canvas.width / 320);
|
||
context.strokeRect(x1, y1, x2 - x1, y2 - y1);
|
||
context.fillStyle = color;
|
||
context.font = `${Math.max(13, canvas.width / 60)}px sans-serif`;
|
||
context.fillText(`${detection.class} ${Math.round(detection.confidence * 100)}%`, x1 + 4, Math.max(18, y1 - 6));
|
||
});
|
||
}
|
||
|
||
function updateDetectionResults(result) {
|
||
const detections = result.detections || [];
|
||
const smoke = detections.filter((item) => item.class === "smoke").length;
|
||
const fire = detections.filter((item) => item.class === "fire").length;
|
||
const max = detections.reduce((highest, item) => Math.max(highest, item.confidence || 0), 0);
|
||
elements.smokeCount.textContent = String(smoke);
|
||
elements.fireCount.textContent = String(fire);
|
||
elements.maxConfidence.textContent = max ? `${Math.round(max * 100)}%` : "--";
|
||
elements.riskStatus.textContent = fire ? "高风险" : smoke ? "需关注" : "正常";
|
||
elements.detectionList.innerHTML = detections.length
|
||
? detections.map((item) => `<div class="detection-row"><span>${classLabel(item.class)}</span><strong>${Math.round(item.confidence * 100)}%</strong></div>`).join("")
|
||
: '<p class="empty-copy">未发现烟雾或火焰目标</p>';
|
||
const alert = result.alert || {};
|
||
const channelNames = enabledChannelNames(alert.notification_channels);
|
||
if (alert.triggered) {
|
||
const labels = alert.classes.map(classLabel).join("、");
|
||
elements.alertStatus.textContent = channelNames.length ? `已触发 ${channelNames.join(" + ")} 告警：${labels}` : `已生成告警事件：${labels}（机器人未配置）`;
|
||
elements.alertStatus.className = "alert-status alert-triggered";
|
||
showToast(`检测到${labels}，已生成告警事件`, "error");
|
||
loadDashboard();
|
||
} else {
|
||
const fireFrames = alert.consecutive?.fire || 0;
|
||
const smokeFrames = alert.consecutive?.smoke || 0;
|
||
elements.alertStatus.textContent = channelNames.length ? `${channelNames.join(" + ")}已启用 · 连续帧 火焰 ${fireFrames} / 烟雾 ${smokeFrames}` : `机器人未配置 · 连续帧 火焰 ${fireFrames} / 烟雾 ${smokeFrames}`;
|
||
elements.alertStatus.className = "alert-status";
|
||
}
|
||
drawDetections(detections);
|
||
elements.lastUpdated.textContent = `推理 ${result.inference_ms ?? "--"} ms`;
|
||
}
|
||
|
||
function captureFrame() {
|
||
const video = elements.videoPreview;
|
||
frameCanvas.width = video.videoWidth;
|
||
frameCanvas.height = video.videoHeight;
|
||
frameCanvas.getContext("2d").drawImage(video, 0, 0);
|
||
return new Promise((resolve) => frameCanvas.toBlob(resolve, "image/jpeg", 0.88));
|
||
}
|
||
|
||
async function detectCurrentFrame(timestamp) {
|
||
if (!detectionActive || requestInFlight || !sessionId || elements.videoPreview.paused || elements.videoPreview.ended) return;
|
||
const interval = Number(elements.intervalSelect.value);
|
||
if (timestamp - lastDetectionAt < interval) return;
|
||
lastDetectionAt = timestamp;
|
||
requestInFlight = true;
|
||
elements.loadingState.hidden = false;
|
||
try {
|
||
const frame = await captureFrame();
|
||
if (!frame) throw new Error("无法截取视频帧");
|
||
const form = new FormData();
|
||
form.append("file", frame, "video-frame.jpg");
|
||
const response = await fetch(`${API_ENDPOINT}?session_id=${encodeURIComponent(sessionId)}`, { method: "POST", body: form });
|
||
if (!response.ok) throw new Error(`API ${response.status}`);
|
||
updateDetectionResults(await response.json());
|
||
elements.inspectionStatus.textContent = "检测运行中";
|
||
elements.inspectionStatus.className = "status-chip status-online";
|
||
setServiceStatus(true);
|
||
} catch (error) {
|
||
elements.inspectionStatus.textContent = "检测异常";
|
||
elements.inspectionStatus.className = "status-chip status-offline";
|
||
showToast(`视频检测失败：${error.message}`, "error");
|
||
} finally {
|
||
requestInFlight = false;
|
||
elements.loadingState.hidden = true;
|
||
}
|
||
}
|
||
|
||
function scheduleDetection(timestamp) {
|
||
detectCurrentFrame(timestamp);
|
||
if (detectionActive) requestAnimationFrame(scheduleDetection);
|
||
}
|
||
|
||
async function startDetection() {
|
||
if (!elements.videoPreview.src) return;
|
||
detectionActive = true;
|
||
lastDetectionAt = -Infinity;
|
||
elements.runDetectionButton.textContent = "停止检测";
|
||
elements.intervalSelect.disabled = true;
|
||
try {
|
||
await elements.videoPreview.play();
|
||
requestAnimationFrame(scheduleDetection);
|
||
} catch {
|
||
stopDetection();
|
||
showToast("浏览器未允许视频播放，请手动点击播放后重试。", "error");
|
||
}
|
||
}
|
||
|
||
function stopDetection() {
|
||
detectionActive = false;
|
||
elements.runDetectionButton.textContent = "开始连续检测";
|
||
elements.intervalSelect.disabled = false;
|
||
elements.inspectionStatus.textContent = elements.videoPreview.src ? "检测已暂停" : "等待视频";
|
||
elements.inspectionStatus.className = "status-chip status-idle";
|
||
}
|
||
|
||
async function resetSession() {
|
||
const previous = sessionId;
|
||
sessionId = crypto.randomUUID();
|
||
if (previous) fetch(`/api/sessions/${encodeURIComponent(previous)}`, { method: "DELETE" }).catch(() => {});
|
||
}
|
||
|
||
document.querySelectorAll("[data-view], [data-view-jump]").forEach((control) => {
|
||
control.addEventListener("click", () => switchView(control.dataset.view || control.dataset.viewJump));
|
||
});
|
||
document.querySelectorAll("[data-event-filter]").forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
eventFilter = button.dataset.eventFilter;
|
||
document.querySelectorAll("[data-event-filter]").forEach((item) => item.classList.toggle("is-active", item === 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);
|
||
});
|
||
elements.menuButton.addEventListener("click", () => elements.sidebar.classList.toggle("is-open"));
|
||
elements.refreshEventsButton.addEventListener("click", loadEvents);
|
||
elements.runDetectionButton.addEventListener("click", () => detectionActive ? stopDetection() : startDetection());
|
||
elements.videoPreview.addEventListener("ended", stopDetection);
|
||
elements.videoPreview.addEventListener("timeupdate", () => {
|
||
elements.videoClock.textContent = `${formatTime(elements.videoPreview.currentTime)} / ${formatTime(elements.videoPreview.duration)}`;
|
||
});
|
||
elements.videoPreview.addEventListener("seeked", async () => { drawDetections([]); await resetSession(); });
|
||
elements.videoPreview.addEventListener("resize", () => drawDetections([]));
|
||
elements.videoInput.addEventListener("change", async () => {
|
||
const [file] = elements.videoInput.files;
|
||
if (!file) return;
|
||
stopDetection();
|
||
elements.videoPreview.pause();
|
||
if (videoUrl) URL.revokeObjectURL(videoUrl);
|
||
videoUrl = URL.createObjectURL(file);
|
||
elements.videoPreview.src = videoUrl;
|
||
elements.videoPreview.hidden = false;
|
||
elements.emptyState.hidden = true;
|
||
elements.sourceLabel.textContent = file.name;
|
||
elements.videoMeta.textContent = `${(file.size / 1024 / 1024).toFixed(1)} MB · 本地视频`;
|
||
elements.runDetectionButton.disabled = false;
|
||
elements.inspectionStatus.textContent = "视频已就绪";
|
||
elements.inspectionStatus.className = "status-chip status-online";
|
||
await resetSession();
|
||
clearDetectionResults();
|
||
});
|
||
elements.clearButton.addEventListener("click", async () => {
|
||
stopDetection();
|
||
elements.videoPreview.pause();
|
||
elements.videoPreview.removeAttribute("src");
|
||
elements.videoPreview.load();
|
||
elements.videoPreview.hidden = true;
|
||
if (videoUrl) URL.revokeObjectURL(videoUrl);
|
||
videoUrl = null;
|
||
elements.videoInput.value = "";
|
||
elements.sourceLabel.textContent = "未选择视频";
|
||
elements.videoMeta.textContent = "支持 MP4、WebM 等浏览器可播放格式";
|
||
elements.emptyState.hidden = false;
|
||
elements.runDetectionButton.disabled = true;
|
||
await resetSession();
|
||
clearDetectionResults();
|
||
});
|
||
|
||
updateClock();
|
||
setInterval(updateClock, 1000);
|
||
resetSession();
|
||
renderRobots();
|
||
Promise.all([loadDashboard(), loadEvents()]);
|