|
|
@@ -0,0 +1,275 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>安科院项目 - 化学品预警 & RFID标签业务及H5首页</title>
|
|
|
+ <style>
|
|
|
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
+ body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f6fa; color: #222; line-height: 1.7; }
|
|
|
+ .banner { background: linear-gradient(135deg, #1a3a6b 0%, #2563eb 100%); color: #fff; padding: 40px 48px 32px; }
|
|
|
+ .banner .tag { display: inline-block; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); border-radius: 4px; font-size: 12px; padding: 2px 10px; margin-bottom: 12px; letter-spacing: 1px; }
|
|
|
+ .banner h1 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
|
|
|
+ .banner p { font-size: 14px; opacity: .8; }
|
|
|
+ .banner .meta { margin-top: 20px; display: flex; gap: 24px; flex-wrap: wrap; }
|
|
|
+ .banner .meta span { background: rgba(255,255,255,0.12); border-radius: 6px; padding: 4px 14px; font-size: 13px; }
|
|
|
+ .container { max-width: 960px; margin: 0 auto; padding: 40px 24px 80px; }
|
|
|
+ .section { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.07); margin-bottom: 32px; overflow: hidden; }
|
|
|
+ .section-header { display: flex; align-items: center; gap: 12px; padding: 20px 28px; border-bottom: 1px solid #eef0f5; }
|
|
|
+ .section-header .num { width: 32px; height: 32px; background: #2563eb; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
|
|
|
+ .section-header h2 { font-size: 17px; font-weight: 700; color: #1a3a6b; }
|
|
|
+ .section-body { padding: 24px 28px; }
|
|
|
+ .sub { margin-bottom: 28px; }
|
|
|
+ .sub:last-child { margin-bottom: 0; }
|
|
|
+ .sub h3 { font-size: 14px; font-weight: 700; color: #2563eb; margin-bottom: 10px; padding-left: 10px; border-left: 3px solid #2563eb; }
|
|
|
+ .sub p, .sub ul { font-size: 14px; color: #444; margin-bottom: 8px; }
|
|
|
+ .sub ul { padding-left: 20px; }
|
|
|
+ .sub li { margin-bottom: 4px; }
|
|
|
+ .flow { display: flex; flex-wrap: wrap; align-items: center; margin: 12px 0; }
|
|
|
+ .flow-step { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 6px 14px; font-size: 13px; color: #1d4ed8; white-space: nowrap; }
|
|
|
+ .flow-arrow { color: #93c5fd; font-size: 18px; padding: 0 4px; }
|
|
|
+ table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
|
|
|
+ th { background: #eff6ff; color: #1a3a6b; padding: 8px 14px; text-align: left; border: 1px solid #dbeafe; }
|
|
|
+ td { padding: 8px 14px; border: 1px solid #e5e7eb; color: #374151; }
|
|
|
+ tr:nth-child(even) td { background: #f9fafb; }
|
|
|
+ .tip { background: #f0fdf4; border-left: 4px solid #22c55e; border-radius: 0 6px 6px 0; padding: 10px 16px; font-size: 13px; color: #166534; margin: 10px 0; }
|
|
|
+ .tip-warn { background: #fff7ed; border-left-color: #f97316; color: #9a3412; }
|
|
|
+ .path { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 6px; padding: 6px 14px; font-size: 13px; color: #475569; margin: 6px 0; }
|
|
|
+ .path span { color: #94a3b8; }
|
|
|
+ .img-group { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
|
|
|
+ .img-card { flex: 1 1 260px; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fafafa; }
|
|
|
+ .img-card img { width: 100%; display: block; object-fit: contain; max-height: 480px; }
|
|
|
+ .img-card .img-label { text-align: center; font-size: 12px; color: #6b7280; padding: 6px 0 8px; background: #f9fafb; border-top: 1px solid #e5e7eb; }
|
|
|
+ .checklist { list-style: none; padding: 0; }
|
|
|
+ .checklist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; color: #374151; }
|
|
|
+ .checklist li:last-child { border-bottom: none; }
|
|
|
+ .checklist li::before { content: "✔"; color: #22c55e; font-weight: 700; font-size: 15px; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="banner">
|
|
|
+ <div class="tag">增补需求 · 需求设计说明</div>
|
|
|
+ <h1>安科院项目 — 化学品预警 & RFID标签业务及H5首页</h1>
|
|
|
+ <p>安科院实验室安全管理系统 · 强化危化品管控 · 优化移动端体验</p>
|
|
|
+ <div class="meta">
|
|
|
+ <span>📦 化学品违规带离预警</span>
|
|
|
+ <span>🏷️ RFID标签业务优化</span>
|
|
|
+ <span>📱 H5首页改版</span>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="container">
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-header"><div class="num">一</div><h2>文档说明</h2></div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="sub">
|
|
|
+ <ul>
|
|
|
+ <li><strong>项目名称：</strong>安科院实验室安全管理系统</li>
|
|
|
+ <li><strong>需求类型：</strong>增补需求</li>
|
|
|
+ <li><strong>涉及模块：</strong>化学品违规带离预警 / RFID标签业务优化 / H5首页改版</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="tip">目标：强化实验室危化品管控能力，实现违规行为自动识别与多渠道预警，优化移动端入口体验，提高业务触达效率。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-header"><div class="num">二</div><h2>化学品违规带离预警</h2></div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="sub">
|
|
|
+ <h3>2.1 业务背景</h3>
|
|
|
+ <p>实验室布设化学品智能终端及RFID读卡器设备（超高频）与RFID感应门（超高频）。</p>
|
|
|
+ <div class="tip tip-warn">当<strong>未领用化学品（库存内）被带离实验室</strong>时，系统需自动识别并触发报警。</div>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>2.2 业务流程</h3>
|
|
|
+ <div class="flow">
|
|
|
+ <div class="flow-step">化学品绑定RFID</div><div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step">存放实验室</div><div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step">用户未领用直接带离</div><div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step">RFID门识别</div><div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step">触发报警</div><div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step">系统记录</div><div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step">多渠道通知</div><div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step">人工处理</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>2.3 预警触发逻辑</h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>条件</th><th>说明</th></tr>
|
|
|
+ <tr><td>化学品状态</td><td>未领用</td></tr>
|
|
|
+ <tr><td>RFID识别</td><td>离开实验室区域</td></tr>
|
|
|
+ <tr><td>判定依据</td><td>最近一次操作终端开柜的人员</td></tr>
|
|
|
+ </table>
|
|
|
+ <div class="tip">满足以上条件 → 触发违规带离预警</div>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>2.4 违规人员判定规则</h3>
|
|
|
+ <p>以<strong>最近一次操作终端开柜的人员</strong>作为违规人员写入记录。新增字段：违规人员、操作时间。</p>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>2.5 报警内容规范</h3>
|
|
|
+ <div class="tip">【姓名】违规带离【xx ml】【化学品名称】离开实验室，请确认正常使用并处理。</div>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>2.6 预警记录字段设计</h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>字段</th><th>类型</th><th>说明</th></tr>
|
|
|
+ <tr><td>预警时间</td><td>datetime</td><td>自动记录</td></tr>
|
|
|
+ <tr><td>报警内容</td><td>string</td><td>格式化文案</td></tr>
|
|
|
+ <tr><td>实验室房间号</td><td>string</td><td>修改</td></tr>
|
|
|
+ <tr><td>单位</td><td>string</td><td>修改</td></tr>
|
|
|
+ <tr><td>违规人员</td><td>string</td><td>新增</td></tr>
|
|
|
+ <tr><td>状态</td><td>enum</td><td>待处理 / 已处理</td></tr>
|
|
|
+ <tr><td>处理时间</td><td>datetime</td><td>人工填写</td></tr>
|
|
|
+ <tr><td>处理人</td><td>string</td><td>操作人</td></tr>
|
|
|
+ <tr><td>操作</td><td>action</td><td>查看详情</td></tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>2.7 通知机制</h3>
|
|
|
+ <p><strong>通知对象：</strong>违规人员、实验室负责人、实验室管理员</p>
|
|
|
+ <div class="path">配置路径：<span>基础结构管理</span> → <span>预警通知</span> → <span>危险源预警</span> → <span>化学品预警配置</span></div>
|
|
|
+ <p style="margin-top:8px"><strong>支持方式：</strong>短信 / 报警电话 / 企业微信 / 声光报警（可后台配置）</p>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>2.8 报警升级机制</h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>规则</th><th>说明</th></tr>
|
|
|
+ <tr><td>升级触发</td><td>在设定时间内未处理 → 自动升级</td></tr>
|
|
|
+ <tr><td>升级方式</td><td>按层级逐级上报 / 向指定手机号发送短信</td></tr>
|
|
|
+ <tr><td>终止条件</td><td>状态变为「已处理」</td></tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-header"><div class="num">三</div><h2>化学品终端改造</h2></div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="sub">
|
|
|
+ <h3>3.1 报警记录优化</h3>
|
|
|
+ <p>列表页更新报警内容格式，展示字段：房间号、单位、违规人员，支持处理操作，与后台保持一致。</p>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>3.2 标签模块优化</h3>
|
|
|
+ <p>化学品采用超高频RFID标签，终端外挂低功率读卡器，化学品与RFID标签一对一绑定。</p>
|
|
|
+ <ul>
|
|
|
+ <li>首页入口：点击「标签」→ 直接进入"化学品标签页"，屏蔽中转页</li>
|
|
|
+ <li>RFID字段展示：后台配置启用RFID时，列表显示RFID编号字段</li>
|
|
|
+ </ul>
|
|
|
+ <div class="img-group">
|
|
|
+ <div class="img-card">
|
|
|
+ <img src="../prompt/终端标签1.png" alt="终端标签页面1" />
|
|
|
+ <div class="img-label">终端标签页 — 列表视图</div>
|
|
|
+ </div>
|
|
|
+ <div class="img-card">
|
|
|
+ <img src="../prompt/终端标签2.png" alt="终端标签页面2" />
|
|
|
+ <div class="img-label">终端标签页 — RFID字段展示</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>3.3 标签绑定与更换业务规则</h3>
|
|
|
+ <p>标签业务操作改为调用外接读卡器设备，现有逻辑保持不变：</p>
|
|
|
+ <table>
|
|
|
+ <tr><th>功能</th><th>是否调整</th></tr>
|
|
|
+ <tr><td>标签绑定</td><td>否</td></tr>
|
|
|
+ <tr><td>标签更换</td><td>否</td></tr>
|
|
|
+ <tr><td>标签解绑</td><td>否</td></tr>
|
|
|
+ </table>
|
|
|
+ <div class="img-group">
|
|
|
+ <div class="img-card">
|
|
|
+ <img src="../prompt/终端标签3.png" alt="终端标签绑定操作" />
|
|
|
+ <div class="img-label">终端标签绑定操作界面</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-header"><div class="num">四</div><h2>化学品管理后台改造</h2></div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="sub">
|
|
|
+ <h3>4.1 报警记录同步优化</h3>
|
|
|
+ <p>列表页报警内容统一格式，字段包含：房间号、单位、违规人员，展示完整预警信息，支持处理操作，与终端保持一致。</p>
|
|
|
+ <div class="img-group">
|
|
|
+ <div class="img-card">
|
|
|
+ <img src="../prompt/后台报警记录.png" alt="后台报警记录列表" />
|
|
|
+ <div class="img-label">后台报警记录列表</div>
|
|
|
+ </div>
|
|
|
+ <div class="img-card">
|
|
|
+ <img src="../prompt/后台报警详情.png" alt="后台报警详情" />
|
|
|
+ <div class="img-label">后台报警详情页</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>4.2 数据一致性要求</h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>模块</th><th>一致性要求</th></tr>
|
|
|
+ <tr><td>终端</td><td>✔ 一致</td></tr>
|
|
|
+ <tr><td>后台</td><td>✔ 一致</td></tr>
|
|
|
+ <tr><td>通知系统</td><td>✔ 一致</td></tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>4.3 配置项</h3>
|
|
|
+ <ul>
|
|
|
+ <li>RFID启用开关</li>
|
|
|
+ <li>预警通知方式配置</li>
|
|
|
+ <li>报警升级规则配置</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-header"><div class="num">五</div><h2>H5首页改版设计（安科院版本）</h2></div>
|
|
|
+ <div class="section-body">
|
|
|
+ <div class="sub">
|
|
|
+ <h3>5.1 改版目标</h3>
|
|
|
+ <ul>
|
|
|
+ <li>提升移动端使用效率</li>
|
|
|
+ <li>聚合高频功能入口</li>
|
|
|
+ <li>对齐已有成熟方案（山西农大版本）</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <h3>5.2 首页结构设计</h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>区域</th><th>内容</th></tr>
|
|
|
+ <tr><td>顶部</td><td>系统名称 / 中国安全生产科学研究院 / 个人信息 · 积分兑换 · 设置</td></tr>
|
|
|
+ <tr><td>上部（通知条幅）</td><td>应急预警 / 违规带离（化学品）通知条幅与处理，无则隐藏</td></tr>
|
|
|
+ <tr><td>中部（核心入口）</td><td>安全准入 / 安全检查 / 设备管理 / 设备登记 / 应急预警</td></tr>
|
|
|
+ <tr><td>下部（快捷入口）</td><td>进出记录 / 签退离开 / 远程开门 / 门禁授权</td></tr>
|
|
|
+ <tr><td>底部（导航标签）</td><td>Tab导航：工作台 / 实验室</td></tr>
|
|
|
+ </table>
|
|
|
+ <div class="img-group">
|
|
|
+ <div class="img-card" style="max-width:320px; margin:0 auto; flex:none;">
|
|
|
+ <img src="../prompt/H5首页.png" alt="H5首页设计稿" />
|
|
|
+ <div class="img-label">H5首页设计稿</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-header"><div class="num">六</div><h2>验收标准</h2></div>
|
|
|
+ <div class="section-body">
|
|
|
+ <ul class="checklist">
|
|
|
+ <li>能准确识别未领用带离行为</li>
|
|
|
+ <li>报警内容符合规范</li>
|
|
|
+ <li>通知链路完整可达</li>
|
|
|
+ <li>终端与后台数据一致</li>
|
|
|
+ <li>H5首页功能完整可用</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+</html>
|
anne
