refactor: use conventional Bell alert modules (#33)
This commit is contained in:
Vendored
+27
-29
@@ -27,25 +27,30 @@
|
||||
}));
|
||||
|
||||
let started = false;
|
||||
const startButton = qs("[data-action='start-alert']");
|
||||
startButton?.addEventListener("click", () => {
|
||||
if (started) return;
|
||||
const startButtons = qsa("[data-action='start-alert'], [data-action='table-start-alert']");
|
||||
const startAlert = () => {
|
||||
if (started) {
|
||||
toast("该预警已由王值班员开始处理");
|
||||
return;
|
||||
}
|
||||
started = true;
|
||||
startButton.disabled = true;
|
||||
startButton.textContent = "已由你开始处理";
|
||||
const state = qs("[data-alert-state]");
|
||||
state.textContent = "处理中";
|
||||
state.className = "status status-warning el-tag";
|
||||
startButtons.forEach((button) => {
|
||||
button.disabled = true;
|
||||
button.textContent = "已确认";
|
||||
});
|
||||
const dashboardState = qs("[data-alert-state]");
|
||||
dashboardState.textContent = "处理中";
|
||||
dashboardState.className = "status status-warning el-tag";
|
||||
const tableState = qs("[data-table-alert-state]");
|
||||
tableState.textContent = "处理中";
|
||||
tableState.className = "status status-warning el-tag";
|
||||
qs("[data-table-owner]").textContent = "王值班员";
|
||||
qs("[data-finish-from-table]").disabled = false;
|
||||
qs("[data-pending-count]").textContent = String(Math.max(0, number("[data-pending-count]") - 1));
|
||||
qs("[data-working-count]").textContent = String(number("[data-working-count]") + 1);
|
||||
qs("[data-owned-alert]").hidden = false;
|
||||
qs("[data-working-total]").textContent = "3 条";
|
||||
toast("已开始处理;其他人会看到这条预警由王老师负责");
|
||||
});
|
||||
|
||||
qs("[data-simulate-conflict]")?.addEventListener("click", () => {
|
||||
toast("这条预警已由李老师开始处理,你可以查看进展但不能重复领取");
|
||||
});
|
||||
toast("预警已确认并由王值班员开始处理");
|
||||
};
|
||||
startButtons.forEach((button) => button.addEventListener("click", startAlert));
|
||||
|
||||
qsa("input[name='result']").forEach((input) => input.addEventListener("change", () => {
|
||||
qs("[data-result-error]").hidden = true;
|
||||
@@ -59,20 +64,13 @@
|
||||
qs("input[name='result']")?.focus();
|
||||
return;
|
||||
}
|
||||
const note = qs("#result-note").value.trim();
|
||||
const tbody = qs("[data-history-body]");
|
||||
const row = document.createElement("tr");
|
||||
const statusClass = selected.value === "确认有危险" ? "status-danger" : selected.value === "现场正常" ? "status-success" : "status-neutral";
|
||||
row.innerHTML = `<td><span class="table-title">危险区域有人进入</span><span class="table-subtitle"></span></td><td>北围墙 01</td><td><span class="status ${statusClass} el-tag"></span></td><td>王老师</td><td>刚刚</td><td><button class="btn btn-quiet el-button-link">查看记录</button></td>`;
|
||||
qs(".table-subtitle", row).textContent = note || "未填写补充说明";
|
||||
qs(".status", row).textContent = selected.value;
|
||||
qs("button", row).addEventListener("click", () => toast("已打开完整处理记录"));
|
||||
tbody.prepend(row);
|
||||
qs("[data-owned-alert]").hidden = true;
|
||||
qs("[data-working-total]").textContent = "2 条";
|
||||
qs("[data-working-count]").textContent = String(Math.max(0, number("[data-working-count]") - 1));
|
||||
const tableState = qs("[data-table-alert-state]");
|
||||
tableState.textContent = "已关闭";
|
||||
tableState.className = "status status-success el-tag";
|
||||
qs("[data-finish-from-table]").disabled = true;
|
||||
qs("[data-completed-count]").textContent = String(number("[data-completed-count]") + 1);
|
||||
qs("[data-working-count]").textContent = String(Math.max(0, number("[data-working-count]") - 1));
|
||||
qs("[data-close-modal]", qs("#finish-alert"))?.click();
|
||||
toast(`处理已完成,现场结果:${selected.value}`);
|
||||
toast(`预警已关闭,处理结果:${selected.value}`);
|
||||
});
|
||||
})();
|
||||
|
||||
+33
-73
@@ -3,8 +3,8 @@
|
||||
<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>
|
||||
<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">
|
||||
@@ -13,9 +13,10 @@
|
||||
<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-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-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>
|
||||
@@ -26,95 +27,54 @@
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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="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>
|
||||
<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><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>
|
||||
<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="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>
|
||||
<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="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 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="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>
|
||||
|
||||
Reference in New Issue
Block a user