124 lines
17 KiB
HTML
124 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="YoVision Bell 面向普通用户的预警处理 MVP 交互原型">
|
||
<title>YoVision Bell · 预警处理</title>
|
||
<link rel="icon" href="data:,">
|
||
<link rel="stylesheet" href="../assets/styles.css">
|
||
<link rel="stylesheet" href="../assets/go-admin-ui.css">
|
||
<link rel="stylesheet" href="./bell.css">
|
||
</head>
|
||
<body class="go-admin-prototype bell-go-admin">
|
||
<svg class="sr-only" aria-hidden="true">
|
||
<symbol id="icon-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
|
||
<symbol id="icon-bell" viewBox="0 0 24 24"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"/></symbol>
|
||
<symbol id="icon-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||
<symbol id="icon-check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></symbol>
|
||
<symbol id="icon-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></symbol>
|
||
<symbol id="icon-refresh" viewBox="0 0 24 24"><path d="M20 6v5h-5M4 18v-5h5M18 9a7 7 0 0 0-12-2L4 11m16 2-2 4a7 7 0 0 1-12-2"/></symbol>
|
||
<symbol id="icon-fullscreen" viewBox="0 0 24 24"><path d="M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5"/></symbol>
|
||
<symbol id="icon-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></symbol>
|
||
<symbol id="icon-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></symbol>
|
||
</svg>
|
||
|
||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||
<div class="app-shell go-admin-shell" data-go-admin-shell>
|
||
<aside class="sidebar sidebar-container" data-sidebar aria-label="Bell 主导航">
|
||
<a class="brand sidebar-logo" href="../index.html"><span class="brand-mark">B</span><span class="brand-copy"><span class="brand-name">YoVision Bell</span><span class="brand-subtitle">安全预警处理</span></span></a>
|
||
<nav class="side-nav el-menu" aria-label="预警处理菜单">
|
||
<div class="menu-group"><svg aria-hidden="true"><use href="#icon-bell"></use></svg><span>我的预警</span><svg class="menu-arrow" aria-hidden="true"><use href="#icon-arrow"></use></svg></div>
|
||
<button class="active el-menu-item" data-view-target="pending" data-title="待处理"><svg aria-hidden="true"><use href="#icon-bell"></use></svg><span>待处理</span><span class="nav-count">3</span></button>
|
||
<button class="el-menu-item" data-view-target="working" data-title="处理中"><svg aria-hidden="true"><use href="#icon-clock"></use></svg><span>处理中</span><span class="nav-count">2</span></button>
|
||
<button class="el-menu-item" data-view-target="history" data-title="处理记录"><svg aria-hidden="true"><use href="#icon-check"></use></svg><span>处理记录</span></button>
|
||
</nav>
|
||
<div class="side-note"><strong>处理顺序</strong><span>先查看发生了什么，再点击“开始处理”，确认现场结果后完成记录。</span></div>
|
||
</aside>
|
||
|
||
<div class="main-column main-container">
|
||
<div class="fixed-header">
|
||
<header class="topbar navbar">
|
||
<div class="topbar-left">
|
||
<button class="navbar-action mobile-menu" type="button" data-mobile-menu aria-label="打开主导航" aria-expanded="false"><svg aria-hidden="true"><use href="#icon-menu"></use></svg></button>
|
||
<button class="navbar-action desktop-collapse" type="button" data-collapse-sidebar aria-label="折叠主导航" aria-expanded="true"><svg aria-hidden="true"><use href="#icon-menu"></use></svg></button>
|
||
<nav class="breadcrumb" aria-label="面包屑"><a href="../index.html">YoVision</a><span>/</span><span>Bell</span><span>/</span><strong data-page-name>待处理</strong></nav>
|
||
</div>
|
||
<div class="topbar-actions right-menu">
|
||
<button class="navbar-action" type="button" data-toast="可按地点或预警内容搜索" aria-label="全局搜索"><svg aria-hidden="true"><use href="#icon-search"></use></svg></button>
|
||
<button class="navbar-action desktop-only" type="button" data-toast="原型不切换浏览器全屏" aria-label="全屏"><svg aria-hidden="true"><use href="#icon-fullscreen"></use></svg></button>
|
||
<span class="prototype-pill">交互原型 · 非生产数据</span>
|
||
<button class="avatar-button" type="button" data-toast="当前用户：王老师" aria-label="打开用户菜单"><span class="avatar"><svg aria-hidden="true"><use href="#icon-user"></use></svg></span><span class="desktop-only">王老师</span></button>
|
||
</div>
|
||
</header>
|
||
<nav class="tags-view-container" aria-label="已访问页面">
|
||
<button class="tags-view-item active" data-view-target="pending" data-title="待处理" aria-current="page">待处理</button>
|
||
<button class="tags-view-item" data-view-target="working" data-title="处理中">处理中 <span aria-hidden="true">×</span></button>
|
||
<button class="tags-view-item" data-view-target="history" data-title="处理记录">处理记录 <span aria-hidden="true">×</span></button>
|
||
</nav>
|
||
</div>
|
||
|
||
<main id="main-content" class="content app-main" tabindex="-1">
|
||
<section class="view active" data-view="pending">
|
||
<div class="page-header compact-header"><div><h1>待处理</h1><p>请优先处理高风险预警。开始处理后，其他人会看到由你负责。</p></div></div>
|
||
<div class="metric-grid compact-metrics">
|
||
<article class="metric el-card"><div class="metric-label">待处理</div><div class="metric-value" data-pending-count>3</div><div class="metric-foot"><span class="status status-danger el-tag">1 条高风险</span></div></article>
|
||
<article class="metric el-card"><div class="metric-label">由我处理</div><div class="metric-value" data-working-count>0</div><div class="metric-foot"><span>完成前会保留在处理中</span></div></article>
|
||
<article class="metric el-card"><div class="metric-label">今日已完成</div><div class="metric-value" data-completed-count>18</div><div class="metric-foot"><strong>平均用时约 4 分钟</strong></div></article>
|
||
</div>
|
||
<div class="grid grid-2 bell-workbench">
|
||
<article class="card el-card alert-workbench"><header class="card-header"><div><h2>需要关注的情况</h2><p class="card-subtitle">选择一条查看地点、风险和建议</p></div><span class="status status-danger el-tag">3 条</span></header><div class="card-body alert-list" aria-label="待处理预警列表">
|
||
<button class="alert-row selected" type="button" data-select-alert="危险区域有人进入" data-location="北围墙 01" data-time="今天 10:24" data-risk="高风险" data-suggestion="先查看现场；如无法确认，请联系校内保安巡查。"><span class="severity-bar"></span><span><strong class="alert-title">危险区域有人进入</strong><span class="alert-meta"><span>北围墙 01</span><span>高风险</span><span>刚刚</span></span></span><time class="activity-time">10:24</time></button>
|
||
<button class="alert-row" type="button" data-select-alert="有人反向越过警戒线" data-location="宿舍东门 02" data-time="今天 10:19" data-risk="中风险" data-suggestion="查看现场是否有人逆向进入；确认安全后记录处理结果。"><span class="severity-bar medium"></span><span><strong class="alert-title">有人反向越过警戒线</strong><span class="alert-meta"><span>宿舍东门 02</span><span>中风险</span><span>5 分钟前</span></span></span><time class="activity-time">10:19</time></button>
|
||
<button class="alert-row" type="button" data-select-alert="危险区域有人长时间停留" data-location="食堂后门 01" data-time="今天 10:11" data-risk="中风险" data-suggestion="查看现场并确认停留原因；无法判断时请安排人员巡查。"><span class="severity-bar medium"></span><span><strong class="alert-title">危险区域有人长时间停留</strong><span class="alert-meta"><span>食堂后门 01</span><span>中风险</span><span>13 分钟前</span></span></span><time class="activity-time">10:11</time></button>
|
||
</div></article>
|
||
<article class="card el-card alert-detail"><header class="card-header"><div><h2 data-detail-title>危险区域有人进入</h2><p class="card-subtitle" data-detail-meta>北围墙 01 · 今天 10:24</p></div><span class="status status-danger el-tag" data-alert-state>高风险</span></header><div class="card-body">
|
||
<div class="situation-summary"><div><span>发生了什么</span><strong data-detail-what>危险区域有人进入</strong></div><div><span>发生地点</span><strong data-detail-location>北围墙 01</strong></div><div><span>建议怎么做</span><strong data-detail-suggestion>先查看现场；如无法确认，请联系校内保安巡查。</strong></div></div>
|
||
<div class="evidence-preview" role="img" aria-label="北围墙预警现场的模拟画面"><span>北围墙 01 · 10:23:55</span><strong>查看现场画面</strong></div>
|
||
<div class="quick-actions"><button class="btn el-button" data-toast="已打开现场画面（原型演示）">查看现场</button><button class="btn el-button" data-toast="联系人功能将在后续版本开放" disabled>联系负责人（后续开放）</button><button class="btn el-button" data-toast="转交功能将在后续版本开放" disabled>转交他人（后续开放）</button></div>
|
||
<div class="primary-task"><p>准备处理这条预警时，请点击下面的按钮。此操作只表示“你已看到并开始处理”，不代表现场情况已确认。</p><button class="btn el-button el-button-primary" data-action="start-alert">我已看到，开始处理</button></div>
|
||
<details class="technical-details"><summary>管理员技术详情</summary><div class="technical-grid"><div><span>预警编号</span><strong>BEL-A-20260812-0031</strong></div><div><span>原始事实</span><strong>2 条不可变事件</strong></div><div><span>匹配规则</span><strong>校园高危区域 · v4</strong></div><div><span>后台状态映射</span><strong>Alert new → ack → close</strong></div><div><span>来源标识</span><strong>producer-lab / evt-000042</strong></div></div></details>
|
||
</div></article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="view" data-view="working" hidden>
|
||
<div class="page-header compact-header"><div><h1>处理中</h1><p>这里显示已由你或同事开始处理、但还没有记录现场结果的预警。</p></div></div>
|
||
<article class="card el-card"><header class="card-header"><div><h2>正在处理的预警</h2><p class="card-subtitle">处理完成后必须记录现场结果</p></div><span class="status status-warning el-tag" data-working-total>2 条</span></header><div class="card-body working-list" data-working-list>
|
||
<article class="working-item" data-owned-alert hidden><div><strong>危险区域有人进入</strong><p>北围墙 01 · 由王老师处理 · 刚刚开始</p></div><button class="btn el-button el-button-primary" data-open-modal="finish-alert">记录处理结果</button></article>
|
||
<article class="working-item"><div><strong>有人反向越过警戒线</strong><p>宿舍东门 02 · 由李老师处理 · 5 分钟前开始</p></div><button class="btn el-button" data-simulate-conflict>查看处理人</button></article>
|
||
<article class="working-item"><div><strong>夜间区域有人停留</strong><p>操场西侧 · 由保安室处理 · 8 分钟前开始</p></div><button class="btn el-button" data-toast="已打开处理进展（原型演示）">查看进展</button></article>
|
||
</div></article>
|
||
</section>
|
||
|
||
<section class="view" data-view="history" hidden>
|
||
<div class="page-header compact-header"><div><h1>处理记录</h1><p>查看已经完成的处理结果；普通用户不需要理解后台事件和收据。</p></div></div>
|
||
<article class="card el-card box-card"><div class="card-body">
|
||
<form class="search-form el-form el-form-inline" data-go-admin-query data-query-input="#history-filter"><div class="form-item"><label for="history-filter">搜索记录</label><input id="history-filter" class="input el-input" data-filter-input="#history-table" placeholder="输入地点、情况或处理人"></div><div class="form-item"><label for="result-filter">处理结果</label><select id="result-filter" class="input el-select"><option>全部结果</option><option>确认有危险</option><option>误报</option><option>现场正常</option><option>无法确认</option></select></div><div class="form-actions"><button class="btn el-button el-button-primary" type="submit"><svg aria-hidden="true"><use href="#icon-search"></use></svg>搜索</button><button class="btn el-button" type="reset"><svg aria-hidden="true"><use href="#icon-refresh"></use></svg>重置</button></div></form>
|
||
<div class="table-wrap"><table id="history-table" class="el-table"><thead><tr><th>发生情况</th><th>地点</th><th>处理结果</th><th>处理人</th><th>完成时间</th><th>操作</th></tr></thead><tbody data-history-body>
|
||
<tr><td><span class="table-title">有人进入危险区域</span></td><td>教学楼楼顶</td><td><span class="status status-danger el-tag">确认有危险</span></td><td>赵老师</td><td>09:42</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开完整处理记录">查看记录</button></td></tr>
|
||
<tr><td><span class="table-title">有人反向越过警戒线</span></td><td>宿舍西门</td><td><span class="status status-neutral el-tag">误报</span></td><td>王老师</td><td>09:18</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开完整处理记录">查看记录</button></td></tr>
|
||
<tr><td><span class="table-title">危险区域有人停留</span></td><td>食堂后门</td><td><span class="status status-success el-tag">现场正常</span></td><td>李老师</td><td>08:57</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开完整处理记录">查看记录</button></td></tr>
|
||
</tbody></table></div>
|
||
<details class="technical-details admin-records"><summary>管理员：查看技术事件和审计链路</summary><div class="technical-grid"><div><span>不可变事件</span><strong>原始内容保持不变</strong></div><div><span>重复接收保护</span><strong>6 条重复收据，均未重复创建预警</strong></div><div><span>规则管理</span><strong>仅管理员可配置发布版本</strong></div><div><span>开发测试入口</span><strong>生产环境不显示合成事件注入</strong></div></div></details>
|
||
<nav class="pagination-container el-pagination" aria-label="处理记录分页"><span class="pagination-total">共 18 条</span><button type="button" disabled aria-label="上一页">‹</button><button type="button" class="active" aria-current="page">1</button><button type="button" aria-label="下一页">›</button><select class="pagination-size" aria-label="每页条数"><option>10 条/页</option><option>20 条/页</option></select></nav>
|
||
</div></article>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-backdrop el-overlay" id="finish-alert" aria-hidden="true">
|
||
<section class="modal el-dialog" role="dialog" aria-modal="true" aria-labelledby="finish-title">
|
||
<header class="modal-header el-dialog-header"><div><h2 id="finish-title">记录处理结果</h2><p class="dialog-subtitle">北围墙 01 · 危险区域有人进入</p></div><button class="btn btn-icon btn-quiet dialog-close" data-close-modal aria-label="关闭处理结果窗口">×</button></header>
|
||
<div class="modal-body el-dialog-body"><form class="el-form vertical-form"><fieldset class="result-options"><legend>现场结果 <span aria-hidden="true">*</span></legend><label class="result-card"><input type="radio" name="result" value="确认有危险"><span><strong>确认有危险</strong><small>现场确有人员进入，需要保留为真实情况</small></span></label><label class="result-card"><input type="radio" name="result" value="误报"><span><strong>误报</strong><small>画面识别有误，现场没有相关情况</small></span></label><label class="result-card"><input type="radio" name="result" value="现场正常"><span><strong>现场正常</strong><small>情况真实发生，但已确认没有危险</small></span></label><label class="result-card"><input type="radio" name="result" value="无法确认"><span><strong>无法确认</strong><small>画面或现场信息不足，需要后续复核</small></span></label><span class="field-error" data-result-error role="alert" hidden>请选择现场结果后再完成。</span></fieldset><div class="form-item"><label for="result-note">处理说明（选填）</label><textarea id="result-note" class="input el-input" rows="3" placeholder="例如：已联系保安到现场确认"></textarea></div></form></div>
|
||
<footer class="modal-footer el-dialog-footer"><button class="btn el-button" data-close-modal>取消</button><button class="btn el-button el-button-primary" type="button" data-action="finish-alert">确认结果并完成</button></footer>
|
||
</section>
|
||
</div>
|
||
<div class="toast-region" data-toast-region aria-live="polite"></div>
|
||
<script src="../assets/app.js"></script>
|
||
<script src="../assets/go-admin-shell.js"></script>
|
||
<script src="./bell.js"></script>
|
||
</body>
|
||
</html>
|