feat: enhance dashboard and robot management
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#0b1117" />
|
||||
<title>燧安 · 火灾预防管理平台</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23153a39'/%3E%3Cpath d='M34 8c3 12-8 15-3 25 2-5 7-8 10-13 8 9 12 18 8 27-4 9-14 13-23 10C12 53 9 40 15 30c4-7 10-11 12-22 4 4 6 8 7 12z' fill='%2341d6c3'/%3E%3C/svg%3E" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
@@ -21,6 +22,7 @@
|
||||
<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="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>
|
||||
@@ -49,23 +51,39 @@
|
||||
|
||||
<div class="content-area">
|
||||
<section class="view is-active" id="view-overview" data-view-panel="overview">
|
||||
<div class="hero-strip">
|
||||
<div class="hero-strip command-hero">
|
||||
<div>
|
||||
<p class="section-kicker">FIRE PREVENTION COMMAND CENTER</p>
|
||||
<h2>今日消防安全态势</h2>
|
||||
<h2>全域消防安全态势</h2>
|
||||
<p id="overviewMessage">正在汇总模型、告警与通知通道状态。</p>
|
||||
</div>
|
||||
<button class="primary-button" type="button" data-view-jump="inspection">开始视频巡检</button>
|
||||
<div class="hero-actions"><span class="live-pill"><i></i>实时监测中</span><button class="primary-button" type="button" data-view-jump="inspection">开始视频巡检</button></div>
|
||||
</div>
|
||||
|
||||
<div class="stat-grid">
|
||||
<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="channelCount">0</strong><small id="channelSummary">尚未启用机器人</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="overview-grid">
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<div class="donut-layout"><div id="riskDonut" class="risk-donut"><div><strong id="riskTotal">0</strong><span>事件</span></div></div><div class="donut-legend"><div><span><i class="legend-fire"></i>火焰</span><strong id="fireRiskRatio">0%</strong></div><div><span><i class="legend-smoke"></i>烟雾</span><strong id="smokeRiskRatio">0%</strong></div><div><span><i class="legend-device"></i>设备</span><strong>12%</strong></div></div></div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="overview-grid overview-grid-lower">
|
||||
<article class="panel trend-panel">
|
||||
<div class="panel-header"><div><p class="section-kicker">ALERT TREND</p><h3>近期告警趋势</h3></div><div class="legend"><span><i class="legend-fire"></i>火焰</span><span><i class="legend-smoke"></i>烟雾</span></div></div>
|
||||
<div id="trendChart" class="trend-chart" role="img" aria-label="近期火焰和烟雾告警趋势"></div>
|
||||
@@ -137,6 +155,24 @@
|
||||
</article>
|
||||
</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="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>
|
||||
</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>
|
||||
</aside>
|
||||
</div>
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user