this is a push
This commit is contained in:
222
frontend/app.js
222
frontend/app.js
@@ -3,31 +3,10 @@ const VIEW_LABELS = {
|
||||
overview: "系统总览",
|
||||
inspection: "视频巡检",
|
||||
events: "告警中心",
|
||||
robots: "机器人管理",
|
||||
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: "已确认",
|
||||
@@ -38,7 +17,7 @@ const elements = Object.fromEntries(
|
||||
[
|
||||
"ackEventsCount", "alertStatus", "allEventsCount", "clearButton", "confirmFramesValue", "cooldownValue",
|
||||
"currentClock", "detectionList", "emptyState", "eventTableBody",
|
||||
"eventTableMeta", "feishuChannelBadge", "fireCount", "globalStatus",
|
||||
"eventTableMeta", "fireCount", "globalStatus",
|
||||
"inspectionStatus", "intervalSelect", "lastUpdated", "loadingState",
|
||||
"maxConfidence", "menuButton", "modelStatusDetail", "modelStatusValue",
|
||||
"notificationDot", "overlayCanvas", "overviewMessage", "pendingEventCount",
|
||||
@@ -50,12 +29,14 @@ const elements = Object.fromEntries(
|
||||
"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",
|
||||
"deviceOnlineRate", "eventClosureRate", "fireRiskRatio",
|
||||
"notificationCoverage", "onlineRobotCount", "overviewDeliveryCount",
|
||||
"overviewFeishuState", "overviewPolicyText", "overviewWechatState",
|
||||
"refreshRobotsButton", "riskDonut", "riskTotal", "robotCardGrid",
|
||||
"robotConfiguredCount", "robotDeliveredCount", "robotFailedCount",
|
||||
"robotNavCount", "robotPolicyConfirm", "robotPolicyCooldown",
|
||||
"robotSummary", "robotTotalCount", "safetyGauge", "safetyScore",
|
||||
"smokeRiskRatio",
|
||||
].map((id) => [id, document.querySelector(`#${id}`)])
|
||||
);
|
||||
|
||||
@@ -68,7 +49,6 @@ let lastDetectionAt = 0;
|
||||
let dashboardData = null;
|
||||
let eventData = [];
|
||||
let eventFilter = "";
|
||||
let robotFilter = "all";
|
||||
|
||||
function showToast(message, type = "info") {
|
||||
const toast = document.createElement("div");
|
||||
@@ -90,8 +70,8 @@ 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();
|
||||
if (viewName === "robots") loadRobots();
|
||||
if (["overview", "risks", "settings"].includes(viewName)) loadDashboard();
|
||||
}
|
||||
|
||||
function setServiceStatus(online) {
|
||||
@@ -145,9 +125,10 @@ function updateDashboard(data) {
|
||||
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} 台任务中`;
|
||||
const robotPayload = data.robots || { robots: [], summary: {} };
|
||||
const robotSummary = robotPayload.summary || {};
|
||||
elements.onlineRobotCount.textContent = String(robotSummary.configured || 0);
|
||||
elements.robotSummary.textContent = `${robotSummary.configured || 0} / ${robotSummary.total || 2} 已配置 · 成功投递 ${robotSummary.delivered || 0} 次`;
|
||||
elements.overviewMessage.textContent = summary.pending
|
||||
? `当前有 ${summary.pending} 条告警事件等待处置，请尽快进入告警中心确认。`
|
||||
: "当前无待处置事件，模型与视频巡检服务保持监测状态。";
|
||||
@@ -155,8 +136,6 @@ function updateDashboard(data) {
|
||||
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)}%`;
|
||||
@@ -171,22 +150,26 @@ function updateDashboard(data) {
|
||||
renderRecentEvents(data.recent_events || []);
|
||||
const visualEvents = eventData.length ? eventData : data.recent_events || [];
|
||||
renderTrend(visualEvents);
|
||||
updateCommandVisuals(visualEvents, summary, channels);
|
||||
renderRobots();
|
||||
updateCommandVisuals(visualEvents, summary, channels, robotSummary);
|
||||
renderRobots(robotPayload);
|
||||
}
|
||||
|
||||
function updateCommandVisuals(events, summary, channels) {
|
||||
const onlineRobots = ROBOTS.filter((robot) => robot.status !== "offline").length;
|
||||
function updateCommandVisuals(events, summary, channels, robotSummary = {}) {
|
||||
const totalRobots = robotSummary.total || 2;
|
||||
const configuredRobots = robotSummary.configured || 0;
|
||||
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}%`;
|
||||
const notificationRate = Math.round((configuredRobots / totalRobots) * 100);
|
||||
const safetyScore = Math.max(42, Math.min(98, Math.round(notificationRate * 0.35 + closureRate * 0.35 + Math.max(0, 100 - (summary.pending || 0) * 8) * 0.3)));
|
||||
elements.deviceOnlineRate.textContent = `${notificationRate}%`;
|
||||
elements.eventClosureRate.textContent = `${closureRate}%`;
|
||||
elements.notificationCoverage.textContent = `${notificationRate}%`;
|
||||
elements.safetyScore.textContent = String(safetyScore);
|
||||
elements.safetyGauge.style.setProperty("--score", safetyScore);
|
||||
elements.overviewWechatState.textContent = channels.wechat ? "已配置" : "未配置";
|
||||
elements.overviewFeishuState.textContent = channels.feishu ? "已配置" : "未配置";
|
||||
elements.overviewPolicyText.textContent = `${dashboardData?.detection?.confirm_frames || 3} 帧确认`;
|
||||
elements.overviewDeliveryCount.textContent = `累计成功 ${robotSummary.delivered || 0} 次`;
|
||||
|
||||
let fireEvents = 0;
|
||||
let smokeEvents = 0;
|
||||
@@ -204,79 +187,84 @@ function updateCommandVisuals(events, summary, channels) {
|
||||
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();
|
||||
async function loadRobots() {
|
||||
try {
|
||||
const response = await fetch("/api/robots");
|
||||
const result = await response.json();
|
||||
if (!response.ok) throw new Error(result.detail || `API ${response.status}`);
|
||||
renderRobots(result);
|
||||
setServiceStatus(true);
|
||||
} catch (error) {
|
||||
setServiceStatus(false);
|
||||
showToast(`无法读取机器人状态：${error.message}`, "error");
|
||||
}
|
||||
}
|
||||
|
||||
function renderRobots(payload = { robots: [], summary: {} }) {
|
||||
const robots = payload.robots || [];
|
||||
const summary = payload.summary || {};
|
||||
elements.robotTotalCount.textContent = String(summary.total || robots.length);
|
||||
elements.robotConfiguredCount.textContent = String(summary.configured || 0);
|
||||
elements.robotDeliveredCount.textContent = String(summary.delivered || 0);
|
||||
elements.robotFailedCount.textContent = String(summary.failed || 0);
|
||||
elements.robotNavCount.textContent = String(summary.configured || 0);
|
||||
elements.robotPolicyConfirm.textContent = `${dashboardData?.detection?.confirm_frames || 3} 帧连续命中后发送`;
|
||||
elements.robotPolicyCooldown.textContent = `${dashboardData?.detection?.cooldown_seconds || 60} 秒内同类不重复发送`;
|
||||
elements.robotCardGrid.innerHTML = robots.length
|
||||
? robots.map(robotCardTemplate).join("")
|
||||
: '<article class="panel robot-empty">暂无机器人通道数据</article>';
|
||||
}
|
||||
|
||||
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>
|
||||
const platformClass = robot.id === "wechat" ? "wechat" : "feishu";
|
||||
const platformMark = robot.id === "wechat" ? "微" : "飞";
|
||||
const statusLabel = robot.configured ? "已配置" : "未配置";
|
||||
const lastActivity = robot.last_test_at || robot.last_delivery_at;
|
||||
const activityText = lastActivity ? formatDate(lastActivity) : "尚无发送记录";
|
||||
const statusText = robot.last_status === "success" ? "最近发送成功" : robot.last_status === "failed" ? "最近发送失败" : "等待首次发送";
|
||||
const credential = robot.id === "wechat" ? "WECHAT_WEBHOOK_URL" : "FEISHU_WEBHOOK_URL";
|
||||
return `<article class="panel message-robot-card ${robot.configured ? "is-configured" : ""}" data-robot-id="${robot.id}">
|
||||
<div class="message-robot-head"><div class="platform-logo ${platformClass}">${platformMark}</div><div><span class="robot-id">${robot.id.toUpperCase()} ROBOT</span><h3>${robot.name}群机器人</h3><p>${robot.id === "wechat" ? "群聊 Markdown 与告警截图" : "群聊交互卡片与签名校验"}</p></div><span class="robot-status ${robot.configured ? "active" : "offline"}"><i></i>${statusLabel}</span></div>
|
||||
<div class="capability-list">${robot.capabilities.map((capability) => `<span>${capability}</span>`).join("")}</div>
|
||||
<div class="delivery-metrics"><div><span>成功投递</span><strong>${robot.delivered}</strong></div><div><span>失败</span><strong class="${robot.failed ? "danger" : ""}">${robot.failed}</strong></div><div><span>连接测试</span><strong>${robot.tests}</strong></div></div>
|
||||
<div class="robot-activity"><span>${statusText}</span><strong>${activityText}</strong></div>
|
||||
<div class="credential-key"><span>服务端配置</span><code>${credential}${robot.id === "feishu" ? " / FEISHU_SECRET" : ""}</code></div>
|
||||
${robot.last_error ? `<p class="delivery-error">${escapeHtml(robot.last_error)}</p>` : ""}
|
||||
<button class="primary-button test-robot-button" type="button" data-test-robot="${robot.id}" ${robot.configured ? "" : "disabled"}>${robot.configured ? "发送测试消息" : "配置后可测试"}</button>
|
||||
</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("");
|
||||
async function testRobot(channel, button) {
|
||||
const originalText = button.textContent;
|
||||
button.disabled = true;
|
||||
button.textContent = "正在发送";
|
||||
try {
|
||||
const response = await fetch(`/api/robots/${encodeURIComponent(channel)}/test`, { method: "POST" });
|
||||
const result = await response.json();
|
||||
if (!response.ok) throw new Error(result.detail || `API ${response.status}`);
|
||||
showToast(`${result.robot.name}测试消息发送成功`, "success");
|
||||
await Promise.all([loadRobots(), loadDashboard()]);
|
||||
} catch (error) {
|
||||
showToast(`测试消息发送失败：${error.message}`, "error");
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.textContent = originalText;
|
||||
}
|
||||
}
|
||||
|
||||
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 escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
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");
|
||||
@@ -523,31 +511,11 @@ 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.refreshRobotsButton.addEventListener("click", loadRobots);
|
||||
elements.robotCardGrid.addEventListener("click", (event) => {
|
||||
const button = event.target.closest("[data-robot-action]");
|
||||
if (button) handleRobotAction(button);
|
||||
const button = event.target.closest("[data-test-robot]");
|
||||
if (button) testRobot(button.dataset.testRobot, 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);
|
||||
|
||||
@@ -22,9 +22,8 @@
|
||||
<button class="nav-item is-active" type="button" data-view="overview"><span class="nav-icon">▦</span><span>系统总览</span></button>
|
||||
<button class="nav-item" type="button" data-view="inspection"><span class="nav-icon">▶</span><span>视频巡检</span></button>
|
||||
<button class="nav-item" type="button" data-view="events"><span class="nav-icon">!</span><span>告警中心</span><span class="nav-count" id="pendingNavCount">0</span></button>
|
||||
<button class="nav-item" type="button" data-view="robots"><span class="nav-icon">⌾</span><span>机器人管理</span><span class="nav-count nav-count-cyan" id="robotNavCount">4</span></button>
|
||||
<button class="nav-item" type="button" data-view="robots"><span class="nav-icon">⌁</span><span>消息机器人</span><span class="nav-count nav-count-cyan" id="robotNavCount">0</span></button>
|
||||
<button class="nav-item" type="button" data-view="risks"><span class="nav-icon">◇</span><span>风险台账</span></button>
|
||||
<button class="nav-item" type="button" data-view="channels"><span class="nav-icon">⌁</span><span>通知通道</span></button>
|
||||
<button class="nav-item" type="button" data-view="settings"><span class="nav-icon">⚙</span><span>系统设置</span></button>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
@@ -64,18 +63,24 @@
|
||||
<article class="stat-card"><div class="stat-head"><span>今日告警</span><span class="stat-symbol warning">!</span></div><strong id="todayEventCount">0</strong><small>系统产生的有效告警事件</small></article>
|
||||
<article class="stat-card"><div class="stat-head"><span>待处置事件</span><span class="stat-symbol danger">●</span></div><strong id="pendingEventCount">0</strong><small>需要值班人员确认处理</small></article>
|
||||
<article class="stat-card"><div class="stat-head"><span>模型状态</span><span class="stat-symbol success">✓</span></div><strong id="modelStatusValue" class="text-value">检查中</strong><small id="modelStatusDetail">正在读取权重状态</small></article>
|
||||
<article class="stat-card"><div class="stat-head"><span>在线机器人</span><span class="stat-symbol info">⌾</span></div><strong id="onlineRobotCount">0</strong><small id="robotSummary">正在同步机器人编队</small></article>
|
||||
<article class="stat-card"><div class="stat-head"><span>消息机器人</span><span class="stat-symbol info">⌁</span></div><strong id="onlineRobotCount">0</strong><small id="robotSummary">正在读取通知通道</small></article>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-command-grid">
|
||||
<article class="panel safety-score-panel">
|
||||
<div class="panel-header"><div><p class="section-kicker">SAFETY INDEX</p><h3>综合安全指数</h3></div><span class="trend-badge">较昨日 +2.4%</span></div>
|
||||
<div class="safety-score-body"><div id="safetyGauge" class="safety-gauge" style="--score: 86"><div><strong id="safetyScore">86</strong><span>安全</span></div></div><div class="score-breakdown"><div><span>设备在线率</span><strong id="deviceOnlineRate">--</strong></div><div><span>事件闭环率</span><strong id="eventClosureRate">--</strong></div><div><span>通知覆盖率</span><strong id="notificationCoverage">--</strong></div></div></div>
|
||||
<div class="safety-score-body"><div id="safetyGauge" class="safety-gauge" style="--score: 86"><div><strong id="safetyScore">86</strong><span>安全</span></div></div><div class="score-breakdown"><div><span>机器人可用率</span><strong id="deviceOnlineRate">--</strong></div><div><span>事件闭环率</span><strong id="eventClosureRate">--</strong></div><div><span>通知覆盖率</span><strong id="notificationCoverage">--</strong></div></div></div>
|
||||
</article>
|
||||
<article class="panel zone-map-panel">
|
||||
<div class="panel-header"><div><p class="section-kicker">ZONE MONITORING</p><h3>重点区域态势</h3></div><button class="text-button" type="button" data-view-jump="robots">查看编队 →</button></div>
|
||||
<div class="zone-map" aria-label="园区重点区域态势图"><div class="map-grid"></div><span class="zone-block zone-a">A 仓储区</span><span class="zone-block zone-b">B 生产区</span><span class="zone-block zone-c">C 能源站</span><span class="zone-block zone-d">D 装卸区</span><span class="robot-dot robot-dot-1" title="巡检一号"></span><span class="robot-dot robot-dot-2" title="巡检二号"></span><span class="robot-dot robot-dot-3 is-warning" title="哨兵三号"></span><span class="camera-sweep"></span></div>
|
||||
<div class="zone-legend"><span><i class="dot-online"></i>正常</span><span><i class="dot-warning"></i>需关注</span><span><i class="dot-offline"></i>离线</span></div>
|
||||
<article class="panel message-flow-panel">
|
||||
<div class="panel-header"><div><p class="section-kicker">MESSAGE DELIVERY</p><h3>告警消息触达链路</h3></div><button class="text-button" type="button" data-view-jump="robots">管理机器人 →</button></div>
|
||||
<div class="message-flow" aria-label="告警消息触达流程">
|
||||
<div class="flow-node source"><span>01</span><strong>烟火识别</strong><small>YOLO 实时推理</small></div>
|
||||
<i class="flow-connector"></i>
|
||||
<div class="flow-node policy"><span>02</span><strong>告警确认</strong><small id="overviewPolicyText">连续帧策略</small></div>
|
||||
<i class="flow-connector split"></i>
|
||||
<div class="flow-destinations"><div class="flow-node channel"><span class="wechat-dot">微</span><strong>企业微信</strong><small id="overviewWechatState">检查中</small></div><div class="flow-node channel"><span class="feishu-dot">飞</span><strong>飞书</strong><small id="overviewFeishuState">检查中</small></div></div>
|
||||
</div>
|
||||
<div class="flow-foot"><span>检测结果只在达到确认阈值后发送</span><strong id="overviewDeliveryCount">累计成功 0 次</strong></div>
|
||||
</article>
|
||||
<article class="panel risk-donut-panel">
|
||||
<div class="panel-header"><div><p class="section-kicker">RISK MIX</p><h3>风险类型分布</h3></div><span class="micro-copy">近 7 日</span></div>
|
||||
@@ -156,42 +161,33 @@
|
||||
</section>
|
||||
|
||||
<section class="view" id="view-robots" data-view-panel="robots">
|
||||
<div class="page-intro robot-page-intro"><div><p class="section-kicker">ROBOT FLEET OPERATIONS</p><h2>机器人资产与任务管理</h2><p>集中掌握巡检机器人在线状态、任务进度、能源与传感器健康度。</p></div><button id="dispatchRobotButton" class="primary-button" type="button">＋ 创建巡检任务</button></div>
|
||||
<div class="page-intro robot-page-intro"><div><p class="section-kicker">MESSAGING ROBOT OPERATIONS</p><h2>消息机器人管理</h2><p>管理企业微信与飞书群机器人，监控告警投递状态并执行连接测试。</p></div><button id="refreshRobotsButton" class="secondary-button" type="button">刷新状态</button></div>
|
||||
<div class="fleet-stat-grid">
|
||||
<article class="fleet-stat"><span>资产总数</span><strong id="robotTotalCount">0</strong><small>台巡检设备</small></article>
|
||||
<article class="fleet-stat"><span>执行任务</span><strong id="robotMissionCount">0</strong><small>正在自动巡检</small></article>
|
||||
<article class="fleet-stat"><span>平均电量</span><strong id="robotAverageBattery">0%</strong><small>编队能源健康</small></article>
|
||||
<article class="fleet-stat"><span>今日里程</span><strong id="robotDistance">0 km</strong><small>累计巡检距离</small></article>
|
||||
<article class="fleet-stat"><span>支持平台</span><strong id="robotTotalCount">0</strong><small>企业微信与飞书</small></article>
|
||||
<article class="fleet-stat"><span>已配置</span><strong id="robotConfiguredCount">0</strong><small>可接收告警消息</small></article>
|
||||
<article class="fleet-stat"><span>成功投递</span><strong id="robotDeliveredCount">0</strong><small>本次服务运行期间</small></article>
|
||||
<article class="fleet-stat"><span>发送失败</span><strong id="robotFailedCount">0</strong><small>需要检查网络或凭据</small></article>
|
||||
</div>
|
||||
<div class="fleet-toolbar"><div class="filter-group" role="group" aria-label="机器人状态筛选"><button type="button" class="filter-button is-active" data-robot-filter="all">全部</button><button type="button" class="filter-button" data-robot-filter="active">任务中</button><button type="button" class="filter-button" data-robot-filter="charging">充电中</button><button type="button" class="filter-button" data-robot-filter="offline">离线</button></div><label class="search-field"><span>⌕</span><input id="robotSearchInput" type="search" placeholder="搜索编号、名称或区域" /></label></div>
|
||||
<div class="robot-management-grid">
|
||||
<div id="robotCardGrid" class="robot-card-grid"></div>
|
||||
<aside class="panel mission-panel">
|
||||
<div class="panel-header"><div><p class="section-kicker">MISSION QUEUE</p><h3>今日任务队列</h3></div><span id="missionQueueCount" class="nav-count nav-count-cyan">0</span></div>
|
||||
<div id="missionQueue" class="mission-queue"></div>
|
||||
<button class="secondary-button mission-history-button" type="button">查看任务历史</button>
|
||||
<div class="robot-management-grid message-robot-layout">
|
||||
<div id="robotCardGrid" class="message-robot-grid"><article class="panel robot-empty">正在读取机器人状态</article></div>
|
||||
<aside class="panel robot-policy-panel">
|
||||
<div class="panel-header"><div><p class="section-kicker">DELIVERY POLICY</p><h3>告警发送策略</h3></div><span class="status-chip status-online">自动执行</span></div>
|
||||
<div class="policy-chain"><div><span>1</span><p><strong>连续帧确认</strong><small id="robotPolicyConfirm">--</small></p></div><div><span>2</span><p><strong>生成告警内容</strong><small>目标类型、置信度与检测时间</small></p></div><div><span>3</span><p><strong>并行发送</strong><small>向所有已配置机器人投递</small></p></div><div><span>4</span><p><strong>分类冷却</strong><small id="robotPolicyCooldown">--</small></p></div></div>
|
||||
<div class="credential-note"><strong>凭据安全</strong><p>Webhook 与签名密钥只保存在服务端 <code>.env</code>，页面不会读取或展示敏感值。</p></div>
|
||||
</aside>
|
||||
</div>
|
||||
<article class="panel robot-config-panel"><div class="panel-header"><div><p class="section-kicker">CONFIGURATION</p><h3>机器人接入</h3></div></div><div class="config-steps"><div><span>01</span><p><strong>创建群机器人</strong><small>在企业微信群或飞书群中添加自定义机器人。</small></p></div><div><span>02</span><p><strong>写入服务端配置</strong><small><code>WECHAT_WEBHOOK_URL</code> / <code>FEISHU_WEBHOOK_URL</code></small></p></div><div><span>03</span><p><strong>重启并测试</strong><small>重启服务后，在机器人卡片中发送测试消息。</small></p></div></div></article>
|
||||
</section>
|
||||
<section class="view" id="view-risks" data-view-panel="risks">
|
||||
<div class="page-intro"><div><p class="section-kicker">RISK REGISTER</p><h2>风险台账</h2><p>从模型阈值、告警策略和处置状态评估当前风险治理情况。</p></div></div>
|
||||
<div class="risk-grid">
|
||||
<article class="panel risk-card"><span class="risk-level high">高风险</span><h3>未处置告警事件</h3><strong id="riskPendingValue">0</strong><p>待值班人员确认的火焰或烟雾事件。</p><button class="text-button" type="button" data-view-jump="events">进入告警中心 →</button></article>
|
||||
<article class="panel risk-card"><span class="risk-level medium">策略风险</span><h3>告警通知覆盖</h3><strong id="riskChannelValue">0 / 2</strong><p>建议至少启用一个机器人通知通道。</p><button class="text-button" type="button" data-view-jump="channels">检查通知通道 →</button></article>
|
||||
<article class="panel risk-card"><span class="risk-level medium">策略风险</span><h3>告警通知覆盖</h3><strong id="riskChannelValue">0 / 2</strong><p>建议至少启用一个机器人通知通道。</p><button class="text-button" type="button" data-view-jump="robots">管理消息机器人 →</button></article>
|
||||
<article class="panel risk-card"><span class="risk-level low">模型策略</span><h3>检测置信度阈值</h3><strong id="riskConfidenceValue">--</strong><p>阈值过低会增加误报，过高可能遗漏早期烟雾。</p><button class="text-button" type="button" data-view-jump="settings">查看系统参数 →</button></article>
|
||||
</div>
|
||||
<article class="panel checklist-panel"><div class="panel-header"><div><p class="section-kicker">PREVENTION CHECKLIST</p><h3>火灾预防工作清单</h3></div></div><div class="checklist"><label><input type="checkbox" />视频监控覆盖重点区域</label><label><input type="checkbox" />告警机器人可正常接收消息</label><label><input type="checkbox" />值班人员明确事件处置流程</label><label><input type="checkbox" />模型权重与阈值定期复核</label><label><input type="checkbox" />消防通道和设备状态已巡查</label><label><input type="checkbox" />告警事件完成闭环记录</label></div></article>
|
||||
</section>
|
||||
|
||||
<section class="view" id="view-channels" data-view-panel="channels">
|
||||
<div class="page-intro"><div><p class="section-kicker">NOTIFICATION CHANNELS</p><h2>通知通道</h2><p>管理告警触达方式。敏感凭据保存在服务端本地环境文件中。</p></div></div>
|
||||
<div class="channel-grid">
|
||||
<article class="panel channel-card"><div class="channel-logo wechat-logo">微</div><div class="channel-content"><div><h3>企业微信群机器人</h3><span id="wechatChannelBadge" class="channel-badge">未配置</span></div><p>告警时发送 Markdown 消息与带检测框截图。</p><code>WECHAT_WEBHOOK_URL</code></div></article>
|
||||
<article class="panel channel-card"><div class="channel-logo feishu-logo">飞</div><div class="channel-content"><div><h3>飞书自定义机器人</h3><span id="feishuChannelBadge" class="channel-badge">未配置</span></div><p>告警时发送红色交互卡片，支持签名校验。</p><code>FEISHU_WEBHOOK_URL / FEISHU_SECRET</code></div></article>
|
||||
</div>
|
||||
<article class="panel config-guide"><div class="panel-header"><div><p class="section-kicker">CONFIGURATION</p><h3>配置说明</h3></div></div><ol><li>在企业微信或飞书群中添加自定义机器人并复制 Webhook。</li><li>将 Webhook 填入项目根目录 <code>.env</code> 对应字段。</li><li>飞书开启签名校验时，同时填写 <code>FEISHU_SECRET</code>。</li><li>重启后端服务，平台将自动显示通道启用状态。</li></ol></article>
|
||||
</section>
|
||||
|
||||
<section class="view" id="view-settings" data-view-panel="settings">
|
||||
<div class="page-intro"><div><p class="section-kicker">SYSTEM SETTINGS</p><h2>系统设置</h2><p>查看当前生效的模型和告警参数。配置修改后需重启服务。</p></div></div>
|
||||
<div class="settings-grid">
|
||||
|
||||
@@ -218,50 +218,34 @@ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-even
|
||||
.score-breakdown div { display: grid; grid-template-columns: 1fr auto; gap: 10px; border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
|
||||
.score-breakdown span { color: var(--muted); font-size: 10px; }
|
||||
.score-breakdown strong { font-size: 13px; font-variant-numeric: tabular-nums; }
|
||||
.zone-map { position: relative; min-height: 190px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, #0b1820, #0e222b); }
|
||||
.map-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(#31515b 1px, transparent 1px), linear-gradient(90deg, #31515b 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 95%); }
|
||||
.zone-block { position: absolute; display: grid; place-items: center; border: 1px solid #2a4650; background: #102630c7; color: #73909a; font-size: 9px; letter-spacing: .08em; }
|
||||
.zone-a { top: 20px; left: 20px; width: 35%; height: 66px; }.zone-b { top: 20px; right: 20px; width: 48%; height: 98px; }.zone-c { bottom: 18px; left: 20px; width: 42%; height: 66px; }.zone-d { right: 20px; bottom: 18px; width: 41%; height: 46px; }
|
||||
.robot-dot { position: absolute; z-index: 2; width: 11px; height: 11px; border: 2px solid #cafff7; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px #41d6c31a, 0 0 15px var(--cyan); }
|
||||
.robot-dot::after { content: ""; position: absolute; inset: -7px; border: 1px solid #41d6c34d; border-radius: 50%; animation: livePulse 2.4s infinite; }.robot-dot-1 { top: 54px; left: 28%; }.robot-dot-2 { top: 76px; right: 31%; }.robot-dot-3 { right: 19%; bottom: 34px; }.robot-dot.is-warning { border-color: #ffe0ad; background: var(--orange); box-shadow: 0 0 0 5px #ffad4d1c, 0 0 15px var(--orange); }
|
||||
.camera-sweep { position: absolute; top: 50%; left: 50%; width: 115px; height: 115px; transform: translate(-50%, -50%); border: 1px solid #41d6c31a; border-radius: 50%; background: conic-gradient(from 10deg, #41d6c31f, transparent 24%); animation: sweep 8s linear infinite; }
|
||||
@keyframes sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
|
||||
.zone-legend { display: flex; justify-content: flex-end; gap: 14px; padding-top: 12px; color: var(--muted); font-size: 9px; }.zone-legend span { display: flex; align-items: center; gap: 6px; }.zone-legend i { width: 7px; height: 7px; border-radius: 50%; }.dot-online { background: var(--cyan); }.dot-warning { background: var(--orange); }.dot-offline { background: #60717a; }
|
||||
.message-flow-panel { min-width: 0; }
|
||||
.message-flow { display: grid; min-height: 190px; grid-template-columns: minmax(95px, 1fr) 36px minmax(95px, 1fr) 36px minmax(120px, 1.2fr); align-items: center; gap: 8px; border: 1px solid var(--line); padding: 18px; background: linear-gradient(145deg, #0b1820, #0e222b); }
|
||||
.flow-node { display: grid; min-height: 100px; align-content: center; justify-items: center; gap: 7px; border: 1px solid #2a4650; padding: 12px; background: #102630c7; text-align: center; }.flow-node > span { color: var(--cyan); font-size: 9px; letter-spacing: .12em; }.flow-node strong { font-size: 11px; }.flow-node small { color: var(--muted); font-size: 8px; line-height: 1.5; }.flow-node.policy { border-color: #37645e; background: #13302f; }.flow-node.channel { min-height: 76px; grid-template-columns: 28px 1fr; justify-items: start; gap: 2px 9px; text-align: left; }.flow-node.channel > span { grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; color: white; font-weight: 800; }.flow-node.channel small { grid-column: 2; }.wechat-dot { background: #20b969; }.feishu-dot { background: #3370ff; }.flow-destinations { display: grid; gap: 9px; }.flow-connector { position: relative; height: 1px; background: #31515b; }.flow-connector::after { content: ""; position: absolute; top: -3px; right: -1px; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent var(--cyan); }.flow-foot { display: flex; justify-content: space-between; gap: 15px; padding-top: 12px; color: var(--muted); font-size: 9px; }.flow-foot strong { color: var(--cyan); font-size: 9px; }
|
||||
.donut-layout { display: grid; height: calc(100% - 45px); align-items: center; justify-items: center; gap: 20px; }
|
||||
.risk-donut { position: relative; display: grid; width: 142px; height: 142px; place-items: center; border-radius: 50%; background: conic-gradient(var(--red) 0 45%, var(--cyan) 45% 78%, var(--orange) 78% 100%); }
|
||||
.risk-donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }.risk-donut > div { position: relative; display: grid; justify-items: center; }.risk-donut strong { font-size: 30px; }.risk-donut span { color: var(--muted); font-size: 9px; }
|
||||
.donut-legend { display: grid; width: 100%; gap: 8px; }.donut-legend div { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding: 7px 0; font-size: 10px; }.donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); }.donut-legend i { width: 8px; height: 8px; }.legend-device { display: inline-block; background: var(--orange); }
|
||||
.overview-grid-lower { margin-top: 14px; }
|
||||
|
||||
/* Robot fleet */
|
||||
/* Messaging robots */
|
||||
.fleet-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
||||
.fleet-stat { position: relative; display: grid; min-height: 118px; align-content: center; gap: 7px; overflow: hidden; border: 1px solid var(--line); padding: 18px 20px; background: linear-gradient(135deg, var(--surface), #10232d); }
|
||||
.fleet-stat::after { content: ""; position: absolute; right: -34px; bottom: -48px; width: 108px; height: 108px; border: 1px solid #41d6c316; border-radius: 50%; box-shadow: 0 0 0 18px #41d6c308; }.fleet-stat span, .fleet-stat small { color: var(--muted); font-size: 10px; }.fleet-stat strong { font-size: 27px; font-variant-numeric: tabular-nums; }
|
||||
.fleet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; }
|
||||
.search-field { display: flex; width: min(300px, 100%); height: 36px; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 0 11px; background: var(--surface); color: var(--muted); }.search-field:focus-within { border-color: var(--cyan); }.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
|
||||
.robot-management-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 14px; }.robot-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
|
||||
.robot-card { display: grid; gap: 15px; transition: border-color .2s ease, transform .2s ease; }.robot-card:hover { transform: translateY(-2px); border-color: #31545d; }
|
||||
.robot-card-head { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; }.robot-card-head h3 { margin: 2px 0 3px; font-size: 15px; }.robot-card-head p { margin: 0; color: var(--muted); font-size: 9px; }.robot-id { color: var(--cyan); font-size: 8px; letter-spacing: .12em; }
|
||||
.robot-avatar { position: relative; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #28515a; background: linear-gradient(145deg, #17343d, #0a171e); }.robot-avatar span { width: 24px; height: 15px; border: 2px solid var(--cyan); border-radius: 5px 5px 3px 3px; }.robot-avatar span::before, .robot-avatar span::after { content: ""; position: absolute; bottom: 8px; width: 7px; height: 7px; border: 2px solid #86fff1; border-radius: 50%; background: #0c1c24; }.robot-avatar span::before { left: 8px; }.robot-avatar span::after { right: 8px; }.robot-avatar i { position: absolute; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
|
||||
.robot-status { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 5px 8px; color: var(--muted); font-size: 9px; }.robot-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.robot-status.active { border-color: #29664b; background: var(--green-soft); color: var(--green); }.robot-status.charging { border-color: #355f83; background: var(--blue-soft); color: var(--blue); }.robot-status.standby { color: var(--orange); }.robot-status.offline { background: #222d32; color: #7a8a91; }
|
||||
.robot-location { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-soft); padding: 10px 12px; background: #0b171e; }.robot-location span { color: var(--muted); font-size: 9px; }.robot-location strong { font-size: 10px; }
|
||||
.robot-mission { display: grid; gap: 8px; }.robot-mission > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }.robot-mission span { color: var(--muted); }.robot-mission strong { color: var(--cyan); }
|
||||
.progress-track { height: 4px; overflow: hidden; background: #1a3039; }.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #238f87, var(--cyan)); box-shadow: 0 0 8px #41d6c355; }
|
||||
.robot-telemetry { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-soft); background: var(--line-soft); gap: 1px; }.robot-telemetry div { display: grid; justify-items: center; gap: 5px; padding: 11px 4px; background: #0d1b23; }.robot-telemetry span { color: var(--muted); font-size: 8px; }.robot-telemetry strong { font-size: 11px; }.robot-telemetry .healthy { color: var(--green); }.robot-telemetry .warning { color: var(--orange); }.robot-telemetry .danger { color: var(--red); }
|
||||
.sensor-tags { display: flex; flex-wrap: wrap; gap: 6px; }.sensor-tags span { border: 1px solid #24424b; padding: 4px 7px; background: #10232b; color: #8eabb2; font-size: 8px; }.robot-actions { display: flex; gap: 8px; }.robot-actions .secondary-button, .robot-actions .primary-button { flex: 1; min-height: 34px; }.robot-actions .icon-button { flex: 0 0 36px; height: 34px; }
|
||||
.robot-empty { grid-column: 1 / -1; padding: 60px 20px; color: var(--muted); text-align: center; }.mission-panel { position: sticky; top: 98px; }.mission-queue { display: grid; margin-top: 4px; }.mission-item { display: grid; grid-template-columns: 44px 1fr auto; align-items: start; gap: 10px; border-top: 1px solid var(--line-soft); padding: 14px 0; }.mission-time { display: grid; justify-items: center; gap: 6px; }.mission-time strong { color: var(--cyan); font-size: 10px; }.mission-time span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 8px; }.mission-copy { display: grid; gap: 6px; }.mission-copy strong { font-size: 10px; }.mission-copy span { color: var(--muted); font-size: 9px; }.mission-status { border: 1px solid var(--line); padding: 4px 6px; color: var(--muted); font-size: 8px; }.mission-status.active { border-color: #29664b; color: var(--green); }.mission-history-button { width: 100%; margin-top: 8px; }
|
||||
|
||||
.message-robot-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 14px; margin-top: 16px; }.message-robot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.message-robot-card { display: grid; gap: 15px; transition: transform .2s ease, border-color .2s ease; }.message-robot-card:hover { transform: translateY(-2px); border-color: #31545d; }.message-robot-card.is-configured { border-top-color: #2f7568; }
|
||||
.message-robot-head { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px; }.message-robot-head h3 { margin: 2px 0 4px; font-size: 15px; }.message-robot-head p { margin: 0; color: var(--muted); font-size: 9px; }.platform-logo { display: grid; width: 48px; height: 48px; place-items: center; color: white; font-size: 17px; font-weight: 800; }.platform-logo.wechat { background: #20b969; }.platform-logo.feishu { background: #3370ff; }.robot-id { color: var(--cyan); font-size: 8px; letter-spacing: .12em; }.robot-status { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 5px 8px; color: var(--muted); font-size: 9px; }.robot-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.robot-status.active { border-color: #29664b; background: var(--green-soft); color: var(--green); }.robot-status.offline { background: #222d32; color: #7a8a91; }
|
||||
.capability-list { display: flex; flex-wrap: wrap; gap: 7px; }.capability-list span { border: 1px solid #24424b; padding: 5px 8px; background: #10232b; color: #8eabb2; font-size: 8px; }.delivery-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-soft); background: var(--line-soft); gap: 1px; }.delivery-metrics div { display: grid; justify-items: center; gap: 6px; padding: 13px 5px; background: #0d1b23; }.delivery-metrics span { color: var(--muted); font-size: 8px; }.delivery-metrics strong { font-size: 16px; }.delivery-metrics .danger { color: var(--red); }.robot-activity, .credential-key { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 11px; }.robot-activity span, .credential-key span { color: var(--muted); font-size: 9px; }.robot-activity strong { font-size: 9px; }.credential-key code { color: var(--cyan); font-size: 8px; text-align: right; overflow-wrap: anywhere; }.delivery-error { margin: 0; border-left: 2px solid var(--red); padding: 8px 10px; background: var(--red-soft); color: #ffaaa5; font-size: 9px; line-height: 1.5; }.test-robot-button { width: 100%; min-height: 36px; }.test-robot-button:disabled { cursor: not-allowed; opacity: .5; }
|
||||
.robot-policy-panel { position: sticky; top: 98px; }.policy-chain { display: grid; }.policy-chain > div { display: grid; grid-template-columns: 28px 1fr; gap: 10px; border-top: 1px solid var(--line-soft); padding: 13px 0; }.policy-chain > div > span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #316059; color: var(--cyan); font-size: 8px; }.policy-chain p { display: grid; gap: 4px; margin: 0; }.policy-chain strong { font-size: 10px; }.policy-chain small { color: var(--muted); font-size: 9px; line-height: 1.5; }.credential-note { margin-top: 8px; border: 1px solid #2a4650; padding: 13px; background: #0b171e; }.credential-note strong { font-size: 10px; }.credential-note p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }.credential-note code { color: var(--cyan); }.robot-empty { grid-column: 1 / -1; padding: 60px 20px; color: var(--muted); text-align: center; }.robot-config-panel { margin-top: 14px; }.config-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line-soft); background: var(--line-soft); }.config-steps > div { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 16px; background: var(--surface-2); }.config-steps > div > span { color: var(--cyan); font-size: 10px; }.config-steps p { display: grid; gap: 6px; margin: 0; }.config-steps strong { font-size: 10px; }.config-steps small { color: var(--muted); font-size: 9px; line-height: 1.5; }.config-steps code { color: var(--cyan); overflow-wrap: anywhere; }
|
||||
@media (max-width: 1280px) {
|
||||
.dashboard-command-grid { grid-template-columns: 1fr 1.25fr; }
|
||||
.risk-donut-panel { grid-column: 1 / -1; min-height: auto !important; }
|
||||
.donut-layout { grid-template-columns: 160px 1fr; }
|
||||
.robot-management-grid { grid-template-columns: 1fr; }.mission-panel { position: static; }.robot-card-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.message-robot-layout { grid-template-columns: 1fr; }.robot-policy-panel { position: static; }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.dashboard-command-grid, .fleet-stat-grid { grid-template-columns: 1fr 1fr; }
|
||||
.zone-map-panel { grid-column: 1 / -1; }
|
||||
.robot-card-grid { grid-template-columns: 1fr; }
|
||||
.message-flow-panel { grid-column: 1 / -1; }
|
||||
.message-robot-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.hero-actions, .fleet-toolbar { width: 100%; align-items: stretch; flex-direction: column; }.live-pill { justify-content: center; }.dashboard-command-grid, .fleet-stat-grid { grid-template-columns: 1fr; }.zone-map-panel, .risk-donut-panel { grid-column: auto; }.safety-score-body { grid-template-columns: 1fr; justify-items: center; }.score-breakdown { width: 100%; }.donut-layout { grid-template-columns: 1fr; }.robot-page-intro .primary-button, .search-field { width: 100%; }.robot-card-head { grid-template-columns: 44px 1fr; }.robot-status { grid-column: 2; width: fit-content; }.robot-actions { flex-wrap: wrap; }.robot-actions .icon-button { flex-basis: 100%; width: 100%; }.mission-item { grid-template-columns: 40px 1fr; }.mission-status { grid-column: 2; width: fit-content; }
|
||||
.hero-actions { width: 100%; align-items: stretch; flex-direction: column; }.live-pill { justify-content: center; }.dashboard-command-grid, .fleet-stat-grid, .config-steps { grid-template-columns: 1fr; }.message-flow-panel, .risk-donut-panel { grid-column: auto; }.safety-score-body { grid-template-columns: 1fr; justify-items: center; }.score-breakdown { width: 100%; }.donut-layout { grid-template-columns: 1fr; }.message-flow { grid-template-columns: 1fr; }.flow-connector { width: 1px; height: 20px; justify-self: center; }.flow-connector::after { top: auto; right: -3px; bottom: -1px; border-width: 6px 4px 0; border-color: var(--cyan) transparent transparent; }.message-robot-head { grid-template-columns: 44px 1fr; }.robot-status { grid-column: 2; width: fit-content; }.robot-activity, .credential-key { align-items: flex-start; flex-direction: column; }.credential-key code { text-align: left; }
|
||||
}
|
||||
Reference in New Issue
Block a user