84 lines
21 KiB
HTML
84 lines
21 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-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></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-file" viewBox="0 0 24 24"><path d="M6 2h8l4 4v16H6zM14 2v5h5M9 13h6m-6 4h6"/></symbol>
|
||
<symbol id="icon-rule" viewBox="0 0 24 24"><path d="M4 6h10m4 0h2M4 12h3m4 0h9M4 18h7m4 0h5"/><circle cx="16" cy="6" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="13" cy="18" r="2"/></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="dashboard" data-title="工作台"><svg aria-hidden="true"><use href="#icon-grid"></use></svg><span>工作台</span></button>
|
||
<button class="el-menu-item" data-view-target="alerts" 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="events" data-title="事件查询"><svg aria-hidden="true"><use href="#icon-file"></use></svg><span>事件查询</span></button>
|
||
<button class="el-menu-item" data-view-target="rules" data-title="规则配置"><svg aria-hidden="true"><use href="#icon-rule"></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="dashboard" data-title="工作台" aria-current="page">工作台</button><button class="tags-view-item" data-view-target="alerts" data-title="预警管理">预警管理 <span aria-hidden="true">×</span></button><button class="tags-view-item" data-view-target="events" data-title="事件查询">事件查询 <span aria-hidden="true">×</span></button><button class="tags-view-item" data-view-target="rules" 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="dashboard">
|
||
<div class="page-header compact-header"><div><h1>工作台</h1><p>集中查看今日预警、处理进度和最新高风险情况。</p></div><div class="page-actions"><button class="btn el-button" data-view-target="alerts">进入预警管理</button></div></div>
|
||
<div class="metric-grid"><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>2</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><article class="metric el-card"><div class="metric-label">今日事件</div><div class="metric-value">29</div><div class="metric-foot"><span>已生成 23 条预警</span></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><button class="btn btn-quiet el-button-link" data-view-target="alerts">查看全部</button></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 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></details></div></article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="view" data-view="alerts" 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="#alert-filter"><div class="form-item"><label for="alert-filter">预警关键字</label><input id="alert-filter" class="input el-input" data-filter-input="#alert-table" placeholder="预警内容、地点或处理人"></div><div class="form-item"><label for="alert-status">预警状态</label><select id="alert-status" class="input el-select"><option>全部状态</option><option>待确认</option><option>处理中</option><option>已关闭</option></select></div><div class="form-item"><label for="alert-level">风险等级</label><select id="alert-level" class="input el-select"><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="operation-bar"><div class="operation-actions"><button class="btn el-button" disabled title="请先选择预警">批量导出</button></div><span class="permission-hint">确认、关闭等操作会记录处理人和时间</span></div>
|
||
<div class="table-wrap"><table id="alert-table" class="el-table"><thead><tr><th>预警内容</th><th>地点</th><th>风险</th><th>状态</th><th>处理人</th><th>发生时间</th><th>操作</th></tr></thead><tbody data-alert-body><tr data-current-alert><td><span class="table-title">危险区域有人进入</span></td><td>北围墙 01</td><td><span class="status status-danger el-tag">高风险</span></td><td><span class="status status-danger el-tag" data-table-alert-state>待确认</span></td><td data-table-owner>—</td><td>10:24</td><td><button class="btn btn-quiet el-button-link" data-action="table-start-alert">确认</button><button class="btn btn-quiet el-button-link" data-open-modal="finish-alert" data-finish-from-table disabled>关闭</button></td></tr><tr><td><span class="table-title">有人反向越过警戒线</span></td><td>宿舍东门 02</td><td><span class="status status-warning el-tag">中风险</span></td><td><span class="status status-warning el-tag">处理中</span></td><td>李值班员</td><td>10:19</td><td><button class="btn btn-quiet el-button-link" data-toast="该预警已由李值班员处理">查看</button></td></tr><tr><td><span class="table-title">危险区域有人长时间停留</span></td><td>食堂后门 01</td><td><span class="status status-warning el-tag">中风险</span></td><td><span class="status status-success el-tag">已关闭</span></td><td>保安室</td><td>10:11</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开预警详情和处理记录">查看</button></td></tr></tbody></table></div><nav class="pagination-container el-pagination" aria-label="预警列表分页"><span class="pagination-total">共 23 条</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>
|
||
|
||
<section class="view" data-view="events" 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="#event-filter"><div class="form-item"><label for="event-filter">事件关键字</label><input id="event-filter" class="input el-input" data-filter-input="#event-table" placeholder="事件类型、来源或地点"></div><div class="form-item"><label for="event-link">关联状态</label><select id="event-link" class="input el-select"><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="event-table" class="el-table"><thead><tr><th>事件类型</th><th>来源</th><th>地点</th><th>接收时间</th><th>关联预警</th><th>操作</th></tr></thead><tbody><tr><td><span class="table-title">危险区域进入</span></td><td>视频分析服务</td><td>北围墙 01</td><td>10:23:55</td><td>BEL-A-0031</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>宿舍东门 02</td><td>10:19:12</td><td>BEL-A-0029</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>体育馆北门</td><td>10:02:31</td><td>未生成</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开原始事件详情">查看</button></td></tr></tbody></table></div><details class="technical-details"><summary>技术接收信息</summary><div class="technical-grid"><div><span>幂等依据</span><strong>生产者身份 + 来源事件编号</strong></div><div><span>重复接收</span><strong>6 条重复收据，未重复创建预警</strong></div></div></details><nav class="pagination-container el-pagination" aria-label="事件列表分页"><span class="pagination-total">共 29 条</span><button type="button" disabled aria-label="上一页">‹</button><button type="button" class="active" aria-current="page">1</button><button type="button" aria-label="下一页">›</button></nav></div></article>
|
||
</section>
|
||
|
||
<section class="view" data-view="rules" hidden>
|
||
<div class="page-header compact-header"><div><h1>规则配置</h1><p>配置哪些事件需要生成预警及其风险等级；已发布版本不会被直接修改。</p></div><div class="page-actions"><button class="btn el-button el-button-primary" data-toast="已创建规则草稿，不影响当前生效版本" title="权限：bell:rule:add">新增规则</button></div></div>
|
||
<article class="card el-card box-card"><div class="card-body"><form class="search-form el-form el-form-inline"><div class="form-item"><label for="rule-filter">规则名称</label><input id="rule-filter" class="input el-input" placeholder="输入规则名称"></div><div class="form-item"><label for="rule-status">状态</label><select id="rule-status" class="input el-select"><option>全部状态</option><option>已启用</option><option>已停用</option></select></div><div class="form-actions"><button class="btn el-button el-button-primary" type="button" data-toast="已筛选规则">搜索</button><button class="btn el-button" type="reset">重置</button></div></form><div class="table-wrap"><table class="el-table"><thead><tr><th>规则名称</th><th>事件类型</th><th>风险等级</th><th>当前版本</th><th>状态</th><th>更新时间</th><th>操作</th></tr></thead><tbody><tr><td><span class="table-title">校园高危区域</span></td><td>危险区域进入</td><td><span class="status status-danger el-tag">高风险</span></td><td>v4</td><td><span class="status status-success el-tag">已启用</span></td><td>今天 09:20</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开规则草稿编辑页" title="权限：bell:rule:edit">编辑</button></td></tr><tr><td><span class="table-title">反向越过警戒线</span></td><td>方向越线</td><td><span class="status status-warning el-tag">中风险</span></td><td>v2</td><td><span class="status status-success el-tag">已启用</span></td><td>昨天 16:08</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开规则草稿编辑页" title="权限：bell:rule:edit">编辑</button></td></tr></tbody></table></div><div class="boundary-note">规则编辑和发布受角色权限控制；自动升级、通知和排班将在后续版本提供。</div></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>
|