332 lines
14 KiB
HTML
332 lines
14 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>GO2 Inspection Console</title>
|
||
|
|
<link rel="stylesheet" href="/styles.css?v=20260601a" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main class="dashboard-shell">
|
||
|
|
<header class="topbar">
|
||
|
|
<div class="brand-block">
|
||
|
|
<span class="brand-mark"></span>
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">OPEN SOURCE NAV2</p>
|
||
|
|
<h1>稀土萃取槽自主巡检系统</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="top-right">
|
||
|
|
<div class="top-meta">
|
||
|
|
<span id="clockText" class="system-clock">--:--:--</span>
|
||
|
|
<span id="lastUpdateText" class="status-pill">等待数据</span>
|
||
|
|
</div>
|
||
|
|
<section id="dwellProgressPanel" class="dwell-progress-panel" hidden>
|
||
|
|
<div class="dwell-progress-meta">
|
||
|
|
<strong id="dwellProgressTitle">等待到点</strong>
|
||
|
|
<span id="dwellProgressTime">0.0 / 3.0s</span>
|
||
|
|
</div>
|
||
|
|
<div class="dwell-progress-bar" aria-label="到点停留进度">
|
||
|
|
<span id="dwellProgressBar"></span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div class="top-status">
|
||
|
|
<span id="cameraChip" class="chip">Camera</span>
|
||
|
|
<span id="navStatus" class="chip">Nav2</span>
|
||
|
|
<span id="poseStatus" class="chip">Pose</span>
|
||
|
|
<span id="locStatus" class="chip">定位</span>
|
||
|
|
<span id="safetyStatus" class="chip">安全链路</span>
|
||
|
|
<span id="goalStatus" class="chip">Goal</span>
|
||
|
|
<span id="routeStatus" class="chip">Route</span>
|
||
|
|
<span id="dwellStatus" class="chip">停留</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="layout-grid">
|
||
|
|
<aside class="side-panel">
|
||
|
|
<section class="module video-module">
|
||
|
|
<div class="module-header">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">GO2 LIVE</p>
|
||
|
|
<h2>实时视频</h2>
|
||
|
|
</div>
|
||
|
|
<span id="networkText" class="status-pill">等待</span>
|
||
|
|
</div>
|
||
|
|
<div class="video-frame">
|
||
|
|
<img id="videoFeed" src="/api/video" alt="GO2 实时视频" />
|
||
|
|
<div class="scan-line"></div>
|
||
|
|
<div class="corner-frame"></div>
|
||
|
|
<div id="videoHint" class="video-hint">连接摄像头</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="module">
|
||
|
|
<div class="module-header compact">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">TELEMETRY</p>
|
||
|
|
<h2>实时状态</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="telemetry-list">
|
||
|
|
<div class="metric-row">
|
||
|
|
<span>模式</span>
|
||
|
|
<strong id="modeText">go2_robot_nav2</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row">
|
||
|
|
<span>地图</span>
|
||
|
|
<strong id="mapText">等待</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row wide">
|
||
|
|
<span>位姿</span>
|
||
|
|
<strong id="poseText">等待</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row wide">
|
||
|
|
<span>定位核验</span>
|
||
|
|
<strong id="localizationText">等待</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row wide">
|
||
|
|
<span>定位精度</span>
|
||
|
|
<strong id="amclQualityText" style="font-variant-numeric: tabular-nums">等待</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row wide">
|
||
|
|
<span>安全链路</span>
|
||
|
|
<strong id="safetyText">等待 /scan + TF + 位姿</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row">
|
||
|
|
<span>目标</span>
|
||
|
|
<strong id="goalText">idle</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row">
|
||
|
|
<span>停留进度</span>
|
||
|
|
<strong id="dwellText">等待</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row wide">
|
||
|
|
<span>实时识别</span>
|
||
|
|
<strong id="segmentText">等待到点</strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="module route-module">
|
||
|
|
<div class="module-header compact">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">INSPECTION ROUTE</p>
|
||
|
|
<h2>固定巡检</h2>
|
||
|
|
</div>
|
||
|
|
<span id="routeText" class="status-pill">未保存</span>
|
||
|
|
</div>
|
||
|
|
<div class="route-editor">
|
||
|
|
<input id="routeNameInput" type="text" value="默认巡检路线" aria-label="路线名称" hidden />
|
||
|
|
<div id="routeProgressText" class="route-progress">等待路线</div>
|
||
|
|
<div id="waypointTable" class="waypoint-table">
|
||
|
|
<div class="waypoint-table-header">
|
||
|
|
<span class="wp-col-idx">#</span>
|
||
|
|
<span class="wp-col-name">名称</span>
|
||
|
|
<span class="wp-col-x">X</span>
|
||
|
|
<span class="wp-col-y">Y</span>
|
||
|
|
<span class="wp-col-yaw">Yaw(deg)</span>
|
||
|
|
<span class="wp-col-en">启用</span>
|
||
|
|
<span class="wp-col-act">操作</span>
|
||
|
|
</div>
|
||
|
|
<div id="waypointRows" class="waypoint-rows"></div>
|
||
|
|
</div>
|
||
|
|
<div class="waypoint-actions">
|
||
|
|
<button id="wpAddEmptyBtn" type="button">添加空白航点</button>
|
||
|
|
<button id="wpAddFromPoseBtn" type="button" class="primary">从当前位姿添加</button>
|
||
|
|
<button id="wpSaveBtn" type="button" class="primary">保存到 YAML</button>
|
||
|
|
</div>
|
||
|
|
<div id="routeList" class="route-list" hidden></div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="module">
|
||
|
|
<div class="module-header compact">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">SLAM QA</p>
|
||
|
|
<h2>地图质量</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="quality-stack">
|
||
|
|
<div>
|
||
|
|
<span>地图质量</span>
|
||
|
|
<strong id="qualityText">等待 /map</strong>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>位姿来源</span>
|
||
|
|
<strong id="poseSourceText">等待</strong>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>地图来源</span>
|
||
|
|
<strong id="mapSourceText">等待</strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<section class="map-stage">
|
||
|
|
<div class="map-header">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">RVIZ WEB</p>
|
||
|
|
<h2>地图导航</h2>
|
||
|
|
</div>
|
||
|
|
<div class="map-readout">
|
||
|
|
<span id="toolText">查看</span>
|
||
|
|
<span id="messageText">dashboard ready</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section class="mission-strip">
|
||
|
|
<div class="mission-item">
|
||
|
|
<span>任务状态</span>
|
||
|
|
<strong id="missionStateText">等待</strong>
|
||
|
|
</div>
|
||
|
|
<div class="mission-item">
|
||
|
|
<span>位置误差</span>
|
||
|
|
<strong id="positionErrorText">--</strong>
|
||
|
|
</div>
|
||
|
|
<div class="mission-item">
|
||
|
|
<span>朝向误差</span>
|
||
|
|
<strong id="yawErrorText">--</strong>
|
||
|
|
</div>
|
||
|
|
<div class="mission-item">
|
||
|
|
<span>到点停留</span>
|
||
|
|
<strong id="dwellStateText">等待</strong>
|
||
|
|
</div>
|
||
|
|
<div class="mission-item wide">
|
||
|
|
<span>下一步</span>
|
||
|
|
<strong id="nextStepText">等待状态刷新</strong>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="operatorAlert" class="operator-alert">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">OPERATOR FOCUS</p>
|
||
|
|
<h2 id="alertTitle">等待系统状态</h2>
|
||
|
|
</div>
|
||
|
|
<strong id="alertBody">启动导航、确认定位后再执行目标点或固定巡检。</strong>
|
||
|
|
<span id="alertSeverity" class="status-pill">STANDBY</span>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="map-workbench">
|
||
|
|
<div class="canvas-column">
|
||
|
|
<div class="canvas-wrap" id="canvasWrap">
|
||
|
|
<canvas id="mapCanvas" width="1280" height="820"></canvas>
|
||
|
|
<div id="canvasEmpty" class="canvas-empty">等待 /map 数据</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="hint-bar">
|
||
|
|
<span id="hintText">选择工具后，在地图上按住拖出方向。</span>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<section class="segment-console-below-map">
|
||
|
|
<div class="console-header">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">SEGMENT API</p>
|
||
|
|
<h2>识别接口调用</h2>
|
||
|
|
</div>
|
||
|
|
<span id="segmentConsoleSummary" class="status-pill">等待巡检</span>
|
||
|
|
</div>
|
||
|
|
<pre id="segmentConsoleLog" class="console-log" aria-live="polite"></pre>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<aside class="ops-stack">
|
||
|
|
<section class="control-panel">
|
||
|
|
<div class="panel-header">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">COMMANDS</p>
|
||
|
|
<h2>操作区</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-dock">
|
||
|
|
<div class="control-group">
|
||
|
|
<span>系统</span>
|
||
|
|
<button id="refreshBtn" type="button">刷新</button>
|
||
|
|
<button id="startNavBtn" type="button" class="primary">启动导航</button>
|
||
|
|
</div>
|
||
|
|
<div class="control-group">
|
||
|
|
<span>导航</span>
|
||
|
|
<button id="stopNavBtn" type="button" class="danger">停止导航</button>
|
||
|
|
</div>
|
||
|
|
<div class="control-group">
|
||
|
|
<span>任务</span>
|
||
|
|
<button id="goalBtn" type="button" class="primary">目标点</button>
|
||
|
|
<button id="showPoseBtn" type="button">记录位姿</button>
|
||
|
|
</div>
|
||
|
|
<div class="control-group">
|
||
|
|
<span>巡检</span>
|
||
|
|
<button id="patrolExecutorBtn" type="button" class="amber">启动巡检服务</button>
|
||
|
|
<button id="routeStartBtn" type="button" class="primary">开始巡检</button>
|
||
|
|
</div>
|
||
|
|
<div class="control-group">
|
||
|
|
<span>路线</span>
|
||
|
|
<button id="routeEditBtn" type="button">路线编辑</button>
|
||
|
|
<button id="routeSaveBtn" type="button">保存路线</button>
|
||
|
|
</div>
|
||
|
|
<div class="control-group single-action">
|
||
|
|
<span>轨迹</span>
|
||
|
|
<button id="clearTrailBtn" type="button">清除轨迹</button>
|
||
|
|
</div>
|
||
|
|
<div class="control-group emergency">
|
||
|
|
<span>安全</span>
|
||
|
|
<button id="routeCancelBtn" type="button" class="danger">取消巡检</button>
|
||
|
|
<button id="stopBtn" type="button" class="danger">停止</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="launchCheckPanel" class="launch-check-panel" hidden>
|
||
|
|
<div class="panel-header compact">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">INSPECTION START</p>
|
||
|
|
<h2>检查运行</h2>
|
||
|
|
</div>
|
||
|
|
<span id="launchCheckStatus" class="status-pill">等待</span>
|
||
|
|
</div>
|
||
|
|
<div class="launch-progress" aria-label="巡检前置检查进度">
|
||
|
|
<span id="launchCheckProgress"></span>
|
||
|
|
</div>
|
||
|
|
<div id="launchCheckList" class="preflight-list launch-check-list"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="preflight-panel">
|
||
|
|
<div class="panel-header">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">PREFLIGHT</p>
|
||
|
|
<h2>启动检查</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="preflightList" class="preflight-list"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="diagnostics-console" id="poseConsoleSection">
|
||
|
|
<div class="console-header">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">LIVE POSE</p>
|
||
|
|
<h2>实时点位</h2>
|
||
|
|
</div>
|
||
|
|
<span id="poseConsoleSummary" class="status-pill">未启动</span>
|
||
|
|
</div>
|
||
|
|
<pre id="poseConsoleLog" class="console-log" aria-live="polite"></pre>
|
||
|
|
</section>
|
||
|
|
<section class="diagnostics-console">
|
||
|
|
<div class="console-header">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">RUNTIME CONSOLE</p>
|
||
|
|
<h2>诊断控制台</h2>
|
||
|
|
</div>
|
||
|
|
<span id="consoleSummary" class="status-pill">等待状态</span>
|
||
|
|
</div>
|
||
|
|
<pre id="consoleLog" class="console-log" aria-live="polite"></pre>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</aside>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
<script src="/app.js?v=20260601a"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|