Files
yovision/prototypes/sense/index.html
T

148 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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 Sense 面向网管与非技术设备管理员的 MVP 交互原型">
<title>YoVision Sense · 摄像头管理</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="./sense.css">
</head>
<body class="go-admin-prototype sense-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-camera" viewBox="0 0 24 24"><path d="M15 10l4.5-2.5v9L15 14z"/><rect x="3" y="6" width="12" height="12" rx="2"/></symbol>
<symbol id="icon-monitor" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="14" rx="2"/><path d="M8 22h8m-4-4v4"/></symbol>
<symbol id="icon-zone" viewBox="0 0 24 24"><path d="M5 4l14 2 2 12-11 3-7-8z"/><circle cx="5" cy="4" r="1"/><circle cx="19" cy="6" r="1"/><circle cx="21" cy="18" r="1"/><circle cx="10" cy="21" r="1"/><circle cx="3" cy="13" r="1"/></symbol>
<symbol id="icon-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></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="Sense 主导航">
<a class="brand sidebar-logo" href="../index.html"><span class="brand-mark">S</span><span class="brand-copy"><span class="brand-name">YoVision Sense</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-camera"></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="overview" data-title="设备概况"><svg aria-hidden="true"><use href="#icon-grid"></use></svg><span>设备概况</span></button>
<button class="el-menu-item" data-view-target="devices" data-title="摄像头管理"><svg aria-hidden="true"><use href="#icon-camera"></use></svg><span>摄像头管理</span></button>
<button class="el-menu-item" data-view-target="live" data-title="实时画面"><svg aria-hidden="true"><use href="#icon-monitor"></use></svg><span>实时画面</span></button>
<button class="el-menu-item" data-view-target="zones" data-title="警戒区域"><svg aria-hidden="true"><use href="#icon-zone"></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>Sense</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="overview" data-title="设备概况" aria-current="page">设备概况</button>
<button class="tags-view-item" data-view-target="devices" data-title="摄像头管理">摄像头管理 <span aria-hidden="true">×</span></button>
<button class="tags-view-item" data-view-target="live" data-title="实时画面">实时画面 <span aria-hidden="true">×</span></button>
<button class="tags-view-item" data-view-target="zones" 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="overview">
<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-open-modal="add-camera"><svg aria-hidden="true"><use href="#icon-plus"></use></svg>添加摄像头</button></div></div>
<div class="metric-grid">
<article class="metric el-card"><div class="metric-label">摄像头</div><div class="metric-value">6</div><div class="metric-foot"><strong>5 台正常</strong><span>· 1 台待处理</span></div></article>
<article class="metric el-card"><div class="metric-label">实时画面</div><div class="metric-value">5</div><div class="metric-foot"><strong>全部可查看</strong></div></article>
<article class="metric el-card"><div class="metric-label">已启用警戒区域</div><div class="metric-value">7</div><div class="metric-foot"><span>另有 1 个未发布草稿</span></div></article>
<article class="metric el-card"><div class="metric-label">需要处理</div><div class="metric-value">1</div><div class="metric-foot"><span class="status status-danger el-tag">账号验证失败</span></div></article>
</div>
<div class="grid grid-2">
<article class="card el-card attention-card"><header class="card-header"><div><h2>需要你处理</h2><p class="card-subtitle">每个问题都提供原因和下一步操作</p></div><span class="status status-danger el-tag">1 项</span></header><div class="card-body">
<div class="recovery-item"><div><strong>宿舍东门 02 暂时无法连接</strong><p>原因:摄像头拒绝了当前账号。影响:该位置暂时没有实时画面。</p></div><button class="btn el-button el-button-primary" data-open-modal="recover-camera">重新输入账号密码</button></div>
</div></article>
<article class="card el-card"><header class="card-header"><div><h2>系统运行情况</h2><p class="card-subtitle">日常使用只需关注是否正常</p></div><span class="status status-success el-tag">正常</span></header><div class="card-body stack">
<div class="description-row"><span>摄像头服务</span><strong>运行正常</strong><span class="status status-success el-tag">正常</span></div>
<div class="description-row"><span>配置保存</span><strong>已同步,12 秒前检查</strong><span class="status status-success el-tag">正常</span></div>
<details class="advanced-panel"><summary>查看高级信息</summary><div class="advanced-content"><div><span>媒体服务</span><strong>MediaMTX · 5/5 paths converged</strong></div><div><span>智能分析连接</span><strong>Brain adapter · 未配置(不影响独立运行)</strong></div><div><span>预警平台连接</span><strong>Bell connector · 未安装(不影响独立运行)</strong></div></div></details>
</div></article>
</div>
</section>
<section class="view" data-view="devices" 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-open-modal="add-camera"><svg aria-hidden="true"><use href="#icon-plus"></use></svg>添加摄像头</button></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="#device-filter">
<div class="form-item"><label for="device-filter">摄像头</label><input id="device-filter" class="input el-input" data-filter-input="#device-table" placeholder="输入名称、位置或状态"></div>
<div class="form-item"><label for="device-status">运行状态</label><select id="device-status" class="input el-select"><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="operation-bar"><div class="operation-actions"><button class="btn el-button" data-open-modal="add-camera">自动发现摄像头</button></div><span class="permission-hint">推荐先使用自动发现;找不到时再手工添加</span></div>
<div class="table-wrap"><table id="device-table" class="el-table"><thead><tr><th>摄像头</th><th>位置</th><th>运行状态</th><th>画面清晰度</th><th>操作</th></tr></thead><tbody>
<tr><td><span class="table-title">北围墙 01</span><span class="table-subtitle">已稳定运行 4 天</span></td><td>北围墙</td><td><span class="status status-success el-tag">正常</span></td><td>高清(推荐)</td><td><button class="btn btn-quiet el-button-link" data-view-target="live">查看画面</button></td></tr>
<tr><td><span class="table-title">宿舍东门 02</span><span class="table-subtitle">账号验证失败</span></td><td>宿舍东门</td><td><span class="status status-danger el-tag">需要处理</span></td><td>标清</td><td><button class="btn btn-quiet el-button-link" data-open-modal="recover-camera">重新输入账号密码</button></td></tr>
<tr><td><span class="table-title">食堂后门 01</span><span class="table-subtitle">已发现,尚未完成设置</span></td><td>食堂后门</td><td><span class="status status-warning el-tag">等待设置</span></td><td>系统将自动推荐</td><td><button class="btn btn-quiet el-button-link" data-open-modal="add-camera">继续设置</button></td></tr>
</tbody></table></div>
<details class="advanced-panel table-advanced"><summary>网管高级信息</summary><div class="advanced-content advanced-grid"><div><span>北围墙 01</span><strong>192.168.10.21 · ONVIF · MainStream 1080p</strong></div><div><span>宿舍东门 02</span><strong>192.168.10.32 · ONVIF · SubStream 720p</strong></div><div><span>食堂后门 01</span><strong>192.168.10.45 · 手工添加 · Profile 待探测</strong></div></div></details>
<nav class="pagination-container el-pagination" aria-label="摄像头列表分页"><span class="pagination-total">共 3 条</span><button type="button" disabled aria-label="上一页">‹</button><button type="button" class="active" aria-current="page">1</button><button type="button" disabled 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="live" hidden>
<div class="page-header compact-header"><div><h1>实时画面</h1><p>选择摄像头即可查看;连接中断时画面会保留并给出恢复操作。</p></div><div class="page-actions"><select class="input el-select" aria-label="选择摄像头"><option>北围墙 01</option><option>宿舍东门 02(需要处理)</option></select><button class="btn el-button" data-toast="正在重新连接,当前画面会继续保留"><svg aria-hidden="true"><use href="#icon-refresh"></use></svg>重新连接</button></div></div>
<div class="grid grid-2"><article class="card el-card"><header class="card-header"><h2>北围墙 01</h2><span class="status status-success el-tag">画面正常</span></header><div class="card-body"><div class="video-stage sense-video-stage" role="img" aria-label="北围墙摄像头的模拟实时画面,画面中显示危险区域"><div class="camera-caption">北围墙 01 · 高清</div><div class="zone-shape"></div><span class="zone-label">危险区域 A</span><span class="video-time">2026-08-12 10:18:24</span></div></div></article><article class="card el-card"><header class="card-header"><h2>画面状态</h2></header><div class="card-body description-list"><div class="description-row"><span>当前质量</span><strong>高清 · 画面流畅</strong></div><div class="description-row"><span>连接状态</span><strong>稳定运行 4 小时 18 分</strong></div><details class="advanced-panel"><summary>查看高级信息</summary><div class="advanced-content"><div><span>协议与服务</span><strong>WebRTC / MediaMTX</strong></div><div><span>源画面</span><strong>MainStream · 1920×1080</strong></div><div><span>实时指标</span><strong>1.8 Mbps · 延迟 340 ms</strong></div></div></details></div></article></div>
</section>
<section class="view" data-view="zones" hidden>
<div class="page-header compact-header"><div><h1>警戒区域</h1><p>在画面上标出需要重点关注的区域,保存后再发布生效。</p></div><div class="page-actions"><button class="btn el-button" data-toast="警戒方向已反转,尚未保存">反转警戒方向</button><button class="btn el-button el-button-primary" data-toast="草稿已保存,发布前不会影响当前规则">保存草稿</button></div></div>
<div class="grid grid-2"><article class="card el-card"><header class="card-header"><div><h2>在画面上绘制</h2><p class="card-subtitle">拖动控制点调整范围</p></div></header><div class="card-body"><div class="video-stage sense-zone-canvas" role="img" aria-label="区域编辑画布,包含五边形危险区域"><div class="camera-caption">北围墙 01 · 高清画面</div><div class="zone-shape"></div><span class="zone-label">危险区域 A · 未发布</span></div></div></article><article class="card el-card"><header class="card-header"><h2>区域设置</h2><span class="status status-warning el-tag">未发布</span></header><div class="card-body"><form class="el-form vertical-form"><div class="form-item"><label for="zone-name">区域名称</label><input id="zone-name" class="input el-input" value="危险区域 A"></div><div class="form-item"><label for="zone-rule">发现以下情况时提醒</label><select id="zone-rule" class="input el-select"><option>有人进入危险区域</option><option>有人反向越过警戒线</option><option>区域内人员聚集</option></select></div><div class="form-item"><label for="zone-camera">使用摄像头</label><input id="zone-camera" class="input el-input" value="北围墙 01 · 高清" readonly></div><div class="boundary-note">如果更换画面清晰度,系统会提示重新校准,避免警戒范围偏移。</div><details class="advanced-panel"><summary>网管高级信息</summary><div class="advanced-content"><div><span>绑定画面</span><strong>MainStream · 1920×1080</strong></div><div><span>保存方式</span><strong>归一化坐标 · 草稿 v8</strong></div></div></details><div class="form-footer"><button type="button" class="btn el-button el-button-primary" data-toast="警戒区域已发布并生效;上一版本仍可追溯">发布并生效</button></div></form></div></article></div>
</section>
</main>
</div>
</div>
<div class="modal-backdrop el-overlay" id="add-camera" aria-hidden="true">
<section class="modal el-dialog wizard-dialog" role="dialog" aria-modal="true" aria-labelledby="add-camera-title">
<header class="modal-header el-dialog-header"><div><h2 id="add-camera-title">添加摄像头</h2><p class="dialog-subtitle" data-wizard-step-label>第 1 步,共 6 步</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">
<ol class="wizard-progress" aria-label="添加摄像头进度"><li class="active">查找方式</li><li>选择设备</li><li>账号</li><li>测试</li><li>预览</li><li>完成</li></ol>
<div class="wizard-panel active" data-wizard-panel="0"><h3>怎样查找摄像头?</h3><p>推荐自动查找同一网络中的摄像头;找不到时再手工填写地址。</p><label class="choice-card selected"><input type="radio" name="discover-method" value="auto" checked><span><strong>自动查找(推荐)</strong><small>无需知道网络地址,约需 10 秒</small></span></label><label class="choice-card"><input type="radio" name="discover-method" value="manual"><span><strong>手工填写地址</strong><small>适合已知道摄像头地址的网管</small></span></label></div>
<div class="wizard-panel" data-wizard-panel="1" hidden><div data-auto-choice><h3>选择要添加的摄像头</h3><p>已找到 2 台尚未添加的设备。</p><label class="choice-card selected"><input type="radio" name="camera-choice" checked><span><strong>教学楼西门 · 192.168.10.88</strong><small>海康摄像头 · 信号正常</small></span></label><label class="choice-card"><input type="radio" name="camera-choice"><span><strong>体育馆北门 · 192.168.10.91</strong><small>大华摄像头 · 信号正常</small></span></label></div><div data-manual-choice hidden><h3>填写摄像头地址</h3><p>请输入网管提供的局域网地址,系统会自动检查可用的接入方式。</p><div class="form-item"><label for="manual-address">摄像头地址</label><input id="manual-address" class="input el-input" inputmode="url" placeholder="例如 192.168.10.88"><span class="help">无需填写协议、端口或画面配置,系统会自动探测。</span></div></div></div>
<div class="wizard-panel" data-wizard-panel="2" hidden><h3>输入摄像头账号</h3><p>账号只用于连接该摄像头,保存后不会显示密码。</p><form class="el-form vertical-form"><div class="form-item"><label for="wizard-name">摄像头名称</label><input id="wizard-name" class="input el-input" value="教学楼西门 01"></div><div class="form-item"><label for="wizard-user">用户名</label><input id="wizard-user" class="input el-input" value="operator" autocomplete="off"></div><div class="form-item"><label for="wizard-password">密码</label><input id="wizard-password" class="input el-input" type="password" autocomplete="new-password"><span class="help">原型不会保存输入内容。</span></div></form></div>
<div class="wizard-panel" data-wizard-panel="3" hidden><h3>测试连接</h3><p>系统会检查账号、网络和画面,并自动选择推荐清晰度。</p><div class="test-status" data-connection-status role="status"><strong>尚未测试</strong><span>点击“测试连接”继续。</span></div><div class="inline-actions"><button class="btn el-button el-button-primary" type="button" data-test-connection>测试连接</button><button class="btn el-button" type="button" data-simulate-failure>演示失败与恢复</button></div></div>
<div class="wizard-panel" data-wizard-panel="4" hidden><h3>确认画面</h3><p>画面清楚且位置正确即可继续。</p><div class="video-stage wizard-preview" role="img" aria-label="教学楼西门摄像头预览画面"><div class="camera-caption">教学楼西门 01 · 高清(推荐)</div><span class="video-time">实时预览</span></div><details class="advanced-panel"><summary>网管高级信息</summary><div class="advanced-content"><div><span>接入方式</span><strong>ONVIF</strong></div><div><span>画面配置</span><strong>MainStream · 1920×1080</strong></div></div></details></div>
<div class="wizard-panel" data-wizard-panel="5" hidden><div class="completion-state"><span class="completion-mark" aria-hidden="true">✓</span><h3>摄像头已准备好</h3><p>教学楼西门 01 将以高清画面运行。完成后可立即查看实时画面或配置警戒区域。</p></div></div>
</div>
<footer class="modal-footer el-dialog-footer"><button class="btn el-button" type="button" data-wizard-back disabled>上一步</button><button class="btn el-button el-button-primary" type="button" data-wizard-next>下一步</button></footer>
</section>
</div>
<div class="modal-backdrop el-overlay" id="recover-camera" aria-hidden="true">
<section class="modal el-dialog" role="dialog" aria-modal="true" aria-labelledby="recover-title">
<header class="modal-header el-dialog-header"><h2 id="recover-title">恢复宿舍东门 02</h2><button class="btn btn-icon btn-quiet dialog-close" data-close-modal aria-label="关闭恢复窗口">×</button></header>
<div class="modal-body el-dialog-body"><div class="recovery-summary"><strong>摄像头拒绝了当前账号</strong><p>该位置暂时没有实时画面。请重新输入摄像头账号密码,然后测试连接。</p></div><form class="el-form vertical-form"><div class="form-item"><label for="recover-user">用户名</label><input id="recover-user" class="input el-input" value="operator"></div><div class="form-item"><label for="recover-password">新密码</label><input id="recover-password" class="input el-input" type="password" autocomplete="new-password" placeholder="输入摄像头当前密码"><span class="field-error" data-recovery-error role="alert" hidden>密码不能为空,请输入后再测试。</span></div></form><div class="test-status" data-recovery-status role="status"><strong>等待测试</strong><span>保存前必须确认能够连接。</span></div><details class="advanced-panel"><summary>网管高级信息</summary><div class="advanced-content"><div><span>设备地址</span><strong>192.168.10.32</strong></div><div><span>错误来源</span><strong>ONVIF authentication rejected</strong></div></div></details></div>
<footer class="modal-footer el-dialog-footer"><button class="btn el-button" data-close-modal>取消</button><button class="btn el-button" type="button" data-recovery-test>测试连接</button><button class="btn el-button el-button-primary" type="button" data-recovery-save disabled>保存并恢复</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="./sense.js"></script>
</body>
</html>