55 lines
3.4 KiB
HTML
55 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>YoVision Bell 值班台</title>
|
|
<link rel="stylesheet" href="/bell-console/assets/style.css">
|
|
<script defer src="/bell-console/assets/app.js"></script>
|
|
</head>
|
|
<body>
|
|
<a class="skip" href="#alerts">跳到预警列表</a>
|
|
<header>
|
|
<div><p class="eyebrow">YOVISION · BELL</p><h1>预警处置值班台</h1></div>
|
|
<div class="connection"><span class="dot" aria-hidden="true"></span><span id="connectionText">等待授权</span></div>
|
|
</header>
|
|
<main>
|
|
<section id="authPanel" class="auth card" aria-labelledby="authTitle">
|
|
<div><h2 id="authTitle">连接本机工程控制台</h2><p>令牌仅保存在当前页面内存，刷新后需重新输入。</p></div>
|
|
<label>控制台令牌<input id="token" type="password" autocomplete="off" spellcheck="false"></label>
|
|
<button id="connect" type="button">连接并加载</button>
|
|
</section>
|
|
|
|
<div id="workspace" class="workspace" hidden>
|
|
<section class="queue card" aria-labelledby="queueTitle">
|
|
<div class="section-head"><div><p class="eyebrow">真实 PostgreSQL 状态</p><h2 id="queueTitle">预警队列</h2></div><button id="refresh" class="secondary" type="button">刷新</button></div>
|
|
<div class="filters" role="group" aria-label="按状态筛选">
|
|
<button class="filter active" data-state="" aria-pressed="true">全部</button>
|
|
<button class="filter" data-state="open" aria-pressed="false">待确认</button>
|
|
<button class="filter" data-state="acknowledged" aria-pressed="false">处理中</button>
|
|
<button class="filter" data-state="closed" aria-pressed="false">已关闭</button>
|
|
</div>
|
|
<div id="alerts" tabindex="-1" aria-busy="false"></div>
|
|
<button id="more" class="secondary full" type="button" hidden>加载更多</button>
|
|
</section>
|
|
|
|
<section class="detail card" aria-labelledby="detailTitle">
|
|
<div id="detailEmpty" class="empty"><span aria-hidden="true">◎</span><h2 id="detailTitle">选择一条预警</h2><p>查看关联事件、规则版本与不可变处置时间线。</p></div>
|
|
<div id="detailContent" hidden>
|
|
<div class="section-head"><div><p id="detailSeverity" class="badge"></p><h2 id="detailName"></h2><code id="detailId"></code></div><span id="detailState" class="state"></span></div>
|
|
<dl id="facts" class="facts"></dl>
|
|
<div class="notice"><strong>证据切片尚未启用</strong><span>当前只展示事件事实，不虚构截图或录像。</span></div>
|
|
<div class="notice muted"><strong>升级与通知尚未启用</strong><span>当前没有倒计时、短信、语音或送达状态。</span></div>
|
|
<h3>关联事件</h3><div id="events"></div>
|
|
<h3>处置时间线</h3><ol id="timeline" class="timeline"></ol>
|
|
<label for="note">处置备注（可选，最多 500 字）</label><textarea id="note" maxlength="500" rows="3"></textarea>
|
|
<div class="actions"><button id="ack" type="button">确认接手</button><button id="close" type="button">关闭预警</button></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<div id="status" class="toast" role="status" aria-live="polite" hidden></div>
|
|
<div id="errors" class="toast error" role="alert" aria-live="assertive" hidden></div>
|
|
</body>
|
|
</html>
|