610 lines
35 KiB
HTML
610 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>手环端软件交互与功能流程故事板</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
background-color: #0B0F19;
|
||
color: #E2E8F0;
|
||
margin: 0;
|
||
padding: 40px 20px;
|
||
line-height: 1.6;
|
||
}
|
||
.container {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
h1 {
|
||
font-size: 2.2rem;
|
||
color: #00E5FF;
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.subtitle {
|
||
text-align: center;
|
||
color: #94A3B8;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 40px;
|
||
}
|
||
.section-title {
|
||
font-size: 1.5rem;
|
||
color: #FFB74D;
|
||
border-bottom: 2px solid #1E293B;
|
||
padding-bottom: 8px;
|
||
margin-top: 50px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.card {
|
||
background-color: #1E293B;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
margin-bottom: 30px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 24px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||
border: 1px solid #334155;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 24px rgba(0,0,0,0.4);
|
||
}
|
||
.screen-container {
|
||
flex: 0 0 256px;
|
||
height: 128px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 15px rgba(0,229,255,0.15);
|
||
background-color: #0A0D14;
|
||
}
|
||
.details-container {
|
||
flex: 1;
|
||
}
|
||
.step-name {
|
||
font-size: 1.25rem;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-top: 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.9rem;
|
||
}
|
||
th, td {
|
||
text-align: left;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid #334155;
|
||
}
|
||
th {
|
||
color: #94A3B8;
|
||
font-weight: 600;
|
||
width: 90px;
|
||
}
|
||
td {
|
||
color: #E2E8F0;
|
||
}
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 0.8rem;
|
||
font-weight: bold;
|
||
}
|
||
.badge-red { background-color: #7f1d1d; color: #fca5a5; }
|
||
.badge-green { background-color: #064e3b; color: #6ee7b7; }
|
||
.badge-blue { background-color: #1e3a8a; color: #93c5fd; }
|
||
.badge-orange { background-color: #7c2d12; color: #ffedd5; }
|
||
.badge-white { background-color: #374151; color: #f3f4f6; }
|
||
|
||
@media (max-width: 768px) {
|
||
.card {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.screen-container {
|
||
flex: 0 0 auto;
|
||
}
|
||
}
|
||
|
||
@keyframes flash {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>手环端软件交互与功能流程</h1>
|
||
<div class="subtitle">1.6寸 OLED 屏幕像素级画面与系统行为对照故事板</div>\n <!-- SVG Mindmap -->\n <div class="card" style="flex-direction: column; align-items: stretch; background-color: #0D111A; border: 1px solid #1E293B;">\n <div class="step-name" style="text-align: center; color: #FFB74D;">手环软件系统功能架构脑图 (思维导图)</div>\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 480" width="100%" height="auto">
|
||
<!-- Definitions for gradients and shadows -->
|
||
<defs>
|
||
<filter id="shadow" x="-5%" y="-5%" width="110%" height="110%">
|
||
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000000" flood-opacity="0.5"/>
|
||
</filter>
|
||
<linearGradient id="blueGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#00E5FF"/>
|
||
<stop offset="100%" stop-color="#00838F"/>
|
||
</linearGradient>
|
||
<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#FFB74D"/>
|
||
<stop offset="100%" stop-color="#EF6C00"/>
|
||
</linearGradient>
|
||
<linearGradient id="purpleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#E040FB"/>
|
||
<stop offset="100%" stop-color="#7B1FA2"/>
|
||
</linearGradient>
|
||
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#69F0AE"/>
|
||
<stop offset="100%" stop-color="#00B0FF"/>
|
||
</linearGradient>
|
||
</defs>
|
||
|
||
<!-- Background Grid -->
|
||
<rect width="800" height="480" fill="#0D111A" rx="12"/>
|
||
|
||
<!-- Connection Lines (Behind Nodes) -->
|
||
<!-- Central connections -->
|
||
<path d="M 400 240 L 220 120" stroke="#334155" stroke-width="2" fill="none"/>
|
||
<path d="M 400 240 L 220 240" stroke="#334155" stroke-width="2" fill="none"/>
|
||
<path d="M 400 240 L 220 360" stroke="#334155" stroke-width="2" fill="none"/>
|
||
<path d="M 400 240 L 580 120" stroke="#334155" stroke-width="2" fill="none"/>
|
||
<path d="M 400 240 L 580 240" stroke="#334155" stroke-width="2" fill="none"/>
|
||
<path d="M 400 240 L 580 360" stroke="#334155" stroke-width="2" fill="none"/>
|
||
|
||
<!-- Sub connections Left -->
|
||
<path d="M 120 120 L 40 100" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 120 120 L 40 140" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 120 240 L 40 220" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 120 240 L 40 260" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 120 360 L 40 340" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 120 360 L 40 380" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
|
||
<!-- Sub connections Right -->
|
||
<path d="M 680 120 L 760 100" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 680 120 L 760 140" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
|
||
<path d="M 680 240 L 760 200" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 680 240 L 760 240" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 680 240 L 760 280" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
|
||
<path d="M 680 360 L 760 300" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 680 360 L 760 340" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 680 360 L 760 380" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
<path d="M 680 360 L 760 420" stroke="#1E293B" stroke-width="1.5" fill="none"/>
|
||
|
||
<!-- Central Root Node -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="320" y="210" width="160" height="60" rx="30" fill="url(#blueGrad)"/>
|
||
<text x="400" y="246" fill="#0A0D14" font-family="system-ui, sans-serif" font-size="16" font-weight="bold" text-anchor="middle">手环系统主逻辑</text>
|
||
</g>
|
||
|
||
<!-- ================= LEFT SIDE NODES ================= -->
|
||
<!-- Node L1: 待机时钟 -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="120" y="100" width="100" height="40" rx="6" fill="#1E293B" stroke="#00E5FF" stroke-width="1"/>
|
||
<text x="170" y="125" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">待机模式</text>
|
||
</g>
|
||
<!-- L1 Sub nodes -->
|
||
<rect x="10" y="85" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="50" y="102" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">数字时间显示</text>
|
||
<rect x="10" y="125" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="50" y="142" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">系统电量展示</text>
|
||
|
||
<!-- Node L2: 射频监听 -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="120" y="220" width="100" height="40" rx="6" fill="#1E293B" stroke="#00E5FF" stroke-width="1"/>
|
||
<text x="170" y="245" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">后台监测</text>
|
||
</g>
|
||
<!-- L2 Sub nodes -->
|
||
<rect x="10" y="205" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="50" y="222" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">被动接收433M</text>
|
||
<rect x="10" y="245" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="50" y="262" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">地址码合法校验</text>
|
||
|
||
<!-- Node L3: 安全防区 -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="120" y="340" width="100" height="40" rx="6" fill="#1E293B" stroke="#00E5FF" stroke-width="1"/>
|
||
<text x="170" y="365" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">防区状态</text>
|
||
</g>
|
||
<!-- L3 Sub nodes -->
|
||
<rect x="10" y="325" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="50" y="342" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">🔒 已布防图标</text>
|
||
<rect x="10" y="365" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="50" y="382" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">🔓 已撤防图标</text>
|
||
|
||
<!-- ================= RIGHT SIDE NODES ================= -->
|
||
<!-- Node R1: 报警响应 -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="580" y="100" width="100" height="40" rx="6" fill="#1E293B" stroke="#FF1744" stroke-width="1"/>
|
||
<text x="630" y="125" fill="#FF1744" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">告警响应</text>
|
||
</g>
|
||
<!-- R1 Sub nodes -->
|
||
<rect x="710" y="85" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="750" y="102" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">OLED显示警报</text>
|
||
<rect x="710" y="125" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="750" y="142" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">LED点亮对应色</text>
|
||
|
||
<!-- Node R2: SOS紧急 -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="580" y="220" width="100" height="40" rx="6" fill="#1E293B" stroke="#FF1744" stroke-width="1"/>
|
||
<text x="630" y="245" fill="#FF1744" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">SOS呼救</text>
|
||
</g>
|
||
<!-- R2 Sub nodes -->
|
||
<rect x="710" y="185" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="750" y="202" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">短按发送求救码</text>
|
||
<rect x="710" y="225" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="750" y="242" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">马达持续长振</text>
|
||
<rect x="710" y="265" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="750" y="282" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">长按5s绑定IPC</text>
|
||
|
||
<!-- Node R3: 配对对码 -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="580" y="340" width="100" height="40" rx="6" fill="#1E293B" stroke="#FFB74D" stroke-width="1"/>
|
||
<text x="630" y="365" fill="#FFB74D" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">对码配对</text>
|
||
</g>
|
||
<!-- R3 Sub nodes -->
|
||
<rect x="710" y="285" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="750" y="302" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">同时按▲+▼进入</text>
|
||
<rect x="710" y="325" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="750" y="342" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">按▲/▼滚动选类型</text>
|
||
<rect x="710" y="365" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="750" y="382" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">物理触发捕获码</text>
|
||
<rect x="710" y="405" width="80" height="26" rx="4" fill="#0F172A" stroke="#334155" stroke-width="1"/>
|
||
<text x="750" y="422" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">按SOS保存并同步</text>
|
||
|
||
</svg>\n </div>
|
||
|
||
<!-- Section 1 -->
|
||
<div class="section-title">一、 待机与安全防区模式</div>
|
||
|
||
<!-- Card 1.1 -->
|
||
<div class="card">
|
||
<div class="screen-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128" viewBox="0 0 256 128">
|
||
<rect width="256" height="128" rx="8" fill="#0A0D14"/>
|
||
<text x="12" y="20" fill="#5A6275" font-family="system-ui, sans-serif" font-size="10" font-weight="bold">WATCH</text>
|
||
<rect x="210" y="11" width="22" height="10" rx="2" fill="none" stroke="#5A6275" stroke-width="1"/>
|
||
<rect x="212" y="13" width="14" height="6" rx="1" fill="#00E5FF"/>
|
||
<rect x="233" y="14" width="2" height="4" rx="1" fill="#5A6275"/>
|
||
<text x="186" y="20" fill="#5A6275" font-family="system-ui, sans-serif" font-size="9">85%</text>
|
||
<text x="128" y="85" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="48" font-weight="bold" text-anchor="middle" letter-spacing="1">10:35</text>
|
||
<text x="128" y="112" fill="#5A6275" font-family="system-ui, sans-serif" font-size="11" text-anchor="middle">THU 07-02</text>
|
||
</svg>
|
||
</div>
|
||
<div class="details-container">
|
||
<div class="step-name">1.1 待机模式（未加入布防）</div>
|
||
<table>
|
||
<tr><th>触发动作</th><td>系统正常上电启动，或报警/配对结束后的常态。</td></tr>
|
||
<tr><th>屏幕显示</th><td>顶部显示 WATCH 及电池百分比，中央大字显示数字时钟，底部显示星期日期。</td></tr>
|
||
<tr><th>LED 灯效</th><td>关闭（无灯）</td></tr>
|
||
<tr><th>马达反馈</th><td>静止（不振动）</td></tr>
|
||
<tr><th>逻辑状态</th><td>433MHz 接收管使能，持续监听总线信号。</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 1.2 -->
|
||
<div class="card">
|
||
<div class="screen-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128" viewBox="0 0 256 128">
|
||
<rect width="256" height="128" rx="8" fill="#0A0D14"/>
|
||
<g transform="translate(12, 10)">
|
||
<rect x="0" y="5" width="8" height="6" rx="1" fill="#FF1744"/>
|
||
<path d="M2,5 L2,3 C2,1.5 6,1.5 6,3 L6,5" fill="none" stroke="#FF1744" stroke-width="1.5"/>
|
||
<text x="14" y="11" fill="#FF1744" font-family="system-ui, sans-serif" font-size="9" font-weight="bold">已布防 ZONE 1-N</text>
|
||
</g>
|
||
<rect x="210" y="11" width="22" height="10" rx="2" fill="none" stroke="#5A6275" stroke-width="1"/>
|
||
<rect x="212" y="13" width="14" height="6" rx="1" fill="#00E5FF"/>
|
||
<rect x="233" y="14" width="2" height="4" rx="1" fill="#5A6275"/>
|
||
<text x="128" y="85" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="48" font-weight="bold" text-anchor="middle" letter-spacing="1">10:35</text>
|
||
<text x="128" y="112" fill="#5A6275" font-family="system-ui, sans-serif" font-size="11" text-anchor="middle">THU 07-02</text>
|
||
</svg>
|
||
</div>
|
||
<div class="details-container">
|
||
<div class="step-name">1.2 系统布防状态（ARMED）</div>
|
||
<table>
|
||
<tr><th>触发动作</th><td>接收到 IPC 发出的 433MHz 布防广播。</td></tr>
|
||
<tr><th>屏幕显示</th><td>状态栏左侧显示 <span class="badge badge-red">🔒</span> 并滚动展示“已布防 ZONE 1-N”，其余保持时钟。</td></tr>
|
||
<tr><th>LED 灯效</th><td>红色呼吸灯慢闪（根据客户要求配置）</td></tr>
|
||
<tr><th>马达反馈</th><td>接收广播瞬间短振 1 次（150ms）</td></tr>
|
||
<tr><th>逻辑状态</th><td>进入布防状态，后续除 ZONE 0 外，ZONE 1-N 的触发也会引发手环报警。</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 1.3 -->
|
||
<div class="card">
|
||
<div class="screen-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128" viewBox="0 0 256 128">
|
||
<rect width="256" height="128" rx="8" fill="#0A0D14"/>
|
||
<g transform="translate(12, 10)">
|
||
<rect x="0" y="5" width="8" height="6" rx="1" fill="#00E676"/>
|
||
<path d="M2,5 L2,3 C2,1.5 5,1.5 5,3 L5,4" fill="none" stroke="#00E676" stroke-width="1.5"/>
|
||
<text x="14" y="11" fill="#00E676" font-family="system-ui, sans-serif" font-size="9" font-weight="bold">已撤防 ZONE 1-N</text>
|
||
</g>
|
||
<rect x="210" y="11" width="22" height="10" rx="2" fill="none" stroke="#5A6275" stroke-width="1"/>
|
||
<rect x="212" y="13" width="14" height="6" rx="1" fill="#00E5FF"/>
|
||
<rect x="233" y="14" width="2" height="4" rx="1" fill="#5A6275"/>
|
||
<text x="128" y="85" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="48" font-weight="bold" text-anchor="middle" letter-spacing="1">10:35</text>
|
||
<text x="128" y="112" fill="#5A6275" font-family="system-ui, sans-serif" font-size="11" text-anchor="middle">THU 07-02</text>
|
||
</svg>
|
||
</div>
|
||
<div class="details-container">
|
||
<div class="step-name">1.3 系统撤防状态（DISARMED）</div>
|
||
<table>
|
||
<tr><th>触发动作</th><td>接收到 IPC 发出的 433MHz 撤防广播。</td></tr>
|
||
<tr><th>屏幕显示</th><td>状态栏左侧显示 <span class="badge badge-green">🔓</span> 并展示“已撤防 ZONE 1-N”，其余保持时钟。</td></tr>
|
||
<tr><th>LED 灯效</th><td>绿色慢闪 3 次后熄灭</td></tr>
|
||
<tr><th>马达反馈</th><td>接收广播瞬间短振 1 次（150ms）</td></tr>
|
||
<tr><th>逻辑状态</th><td>系统处于撤防，ZONE 1-N 的探测触发将被忽略，但 ZONE 0 永久布防区仍能触发报警。</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 2 -->
|
||
<div class="section-title">二、 传感器配对流程（手环端四步）</div>
|
||
|
||
<!-- Card 2.1 -->
|
||
<div class="card">
|
||
<div class="screen-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128" viewBox="0 0 256 128">
|
||
<rect width="256" height="128" rx="8" fill="#0A0D14"/>
|
||
<text x="128" y="20" fill="#5A6275" font-family="system-ui, sans-serif" font-size="10" font-weight="bold" text-anchor="middle">PAIRING MODE</text>
|
||
<g transform="translate(128, 56)" stroke="#FFB74D" fill="none" stroke-width="2">
|
||
<circle cx="0" cy="0" r="4" fill="#FFB74D"/>
|
||
<path d="M-8,-8 A12,12 0 0,1 8,-8" stroke-linecap="round"/>
|
||
<path d="M-15,-15 A22,22 0 0,1 15,-15" stroke-linecap="round"/>
|
||
<path d="M-22,-22 A32,32 0 0,1 22,-22" stroke-linecap="round" stroke-dasharray="2 2"/>
|
||
</g>
|
||
<text x="128" y="96" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">正在搜索 433MHz 信号...</text>
|
||
<text x="128" y="114" fill="#FFB74D" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">请触发目标传感器 | P-00</text>
|
||
</svg>
|
||
</div>
|
||
<div class="details-container">
|
||
<div class="step-name">Step 1：进入配对模式（搜索信号）</div>
|
||
<table>
|
||
<tr><th>触发动作</th><td>用户同时长按 <span class="badge badge-white">▲</span> + <span class="badge badge-white">▼</span> 按键 3 秒。</td></tr>
|
||
<tr><th>屏幕显示</th><td>顶部展示 PAIRING MODE，中央显示天线雷达 <span class="badge badge-orange">📡</span> 波纹动态动画，底部提示等待信号。</td></tr>
|
||
<tr><th>LED 灯效</th><td>白色快速闪烁（3Hz），以示配对工作状态</td></tr>
|
||
<tr><th>马达反馈</th><td>短振 1 次（100ms）作为物理按键确认反馈</td></tr>
|
||
<tr><th>超时机制</th><td>30 秒内若无信号输入，自动退出配对返回时钟待机。</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2.2 -->
|
||
<div class="card">
|
||
<div class="screen-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128" viewBox="0 0 256 128">
|
||
<rect width="256" height="128" rx="8" fill="#0A0D14"/>
|
||
<text x="128" y="18" fill="#FFB74D" font-family="system-ui, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" letter-spacing="1">配对模式 P-00</text>
|
||
<text x="24" y="44" fill="#374151" font-family="system-ui, sans-serif" font-size="11">🚪 门磁/窗磁</text>
|
||
<rect x="12" y="54" width="232" height="28" rx="4" fill="none" stroke="#00E5FF" stroke-width="1.5"/>
|
||
<rect x="220" y="62" width="12" height="12" rx="6" fill="#FF9800"/>
|
||
<text x="24" y="72" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="13" font-weight="bold">👤 人体感应 PIR</text>
|
||
<text x="24" y="102" fill="#374151" font-family="system-ui, sans-serif" font-size="11">🔥 烟雾传感器</text>
|
||
<path d="M244,48 L244,96" stroke="#1F2937" stroke-width="2" stroke-linecap="round"/>
|
||
<path d="M244,64 L244,80" stroke="#00E5FF" stroke-width="4" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="details-container">
|
||
<div class="step-name">Step 2：滚动选择配对类型</div>
|
||
<table>
|
||
<tr><th>操作方式</th><td>短按 <span class="badge badge-white">▲</span> 或 <span class="badge badge-white">▼</span> 进行列表滚动。</td></tr>
|
||
<tr><th>屏幕显示</th><td>展示 3 行滚动列表，当前选中行（如 PIR）加粗并加边框，右侧有滚动条指示。</td></tr>
|
||
<tr><th>LED 灯效</th><td>持续白色快闪</td></tr>
|
||
<tr><th>选中指示</th><td>选中类型的边框会变粗，并在右侧提示对应的专属颜色块。</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2.3 -->
|
||
<div class="card">
|
||
<div class="screen-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128" viewBox="0 0 256 128">
|
||
<rect width="256" height="128" rx="8" fill="#0A0D14"/>
|
||
<circle cx="128" cy="42" r="22" fill="none" stroke="#00E676" stroke-width="3"/>
|
||
<path d="M118,42 L125,49 L138,34" fill="none" stroke="#00E676" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<text x="128" y="88" fill="#00E676" font-family="system-ui, sans-serif" font-size="16" font-weight="bold" text-anchor="middle">对码已保存</text>
|
||
<text x="128" y="110" fill="#B9F6CA" font-family="system-ui, sans-serif" font-size="12" text-anchor="middle">ADDR: 0x37A86 | TYPE: PIR</text>
|
||
</svg>
|
||
</div>
|
||
<div class="details-container">
|
||
<div class="step-name">Step 3-A：配对保存成功</div>
|
||
<table>
|
||
<tr><th>触发动作</th><td>触发目标传感器，发射码与选择类型相符，短按 <span class="badge badge-white">SOS</span> 保存。</td></tr>
|
||
<tr><th>屏幕显示</th><td>中央大号绿色 <span class="badge badge-green">✓</span> 图标，文字展示“对码已保存”及捕获的 24位地址码。</td></tr>
|
||
<tr><th>LED 灯效</th><td>绿色常亮 2 秒后熄灭</td></tr>
|
||
<tr><th>马达反馈</th><td>强力长振 1 次（400ms）确认写入成功</td></tr>
|
||
<tr><th>名称同步</th><td>接收来自 IPC 摄像头的广播，自动用自定义中文名称替换默认传感器类型名称。</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2.4 -->
|
||
<div class="card">
|
||
<div class="screen-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128" viewBox="0 0 256 128">
|
||
<rect width="256" height="128" rx="8" fill="#0A0D14"/>
|
||
<rect x="4" y="4" width="248" height="120" rx="6" fill="none" stroke="#FF1744" stroke-width="1.5"/>
|
||
<circle cx="128" cy="42" r="22" fill="none" stroke="#FF1744" stroke-width="3"/>
|
||
<path d="M118,32 L138,52 M138,32 L118,52" fill="none" stroke="#FF1744" stroke-width="4" stroke-linecap="round"/>
|
||
<text x="128" y="88" fill="#FF1744" font-family="system-ui, sans-serif" font-size="16" font-weight="bold" text-anchor="middle">对码匹配失败</text>
|
||
<text x="128" y="110" fill="#FF8A80" font-family="system-ui, sans-serif" font-size="11" text-anchor="middle">代码类型不一致，请重试</text>
|
||
</svg>
|
||
</div>
|
||
<div class="details-container">
|
||
<div class="step-name">Step 3-B：对码匹配失败（类型不一致）</div>
|
||
<table>
|
||
<tr><th>触发动作</th><td>触发了传感器，但其发射的代码类型与手环当前选中的菜单类型不符。</td></tr>
|
||
<tr><th>屏幕显示</th><td>红色大圆圈 <span class="badge badge-red">❌</span> 图标，大字“对码匹配失败”及提示“代码类型不一致”。</td></tr>
|
||
<tr><th>LED 灯效</th><td>红色快闪 3 次</td></tr>
|
||
<tr><th>马达反馈</th><td>双击快速短振（100ms + 100ms）</td></tr>
|
||
<tr><th>自动恢复</th><td>界面停留 2 秒后，自动退回到 Step 2 传感器列表选择页面。</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Section 3 -->
|
||
<div class="section-title">三、 报警告警模式</div>
|
||
|
||
<!-- Card 3.1 -->
|
||
<div class="card">
|
||
<div class="screen-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128" viewBox="0 0 256 128">
|
||
<rect width="256" height="128" rx="8" fill="#0A0D14"/>
|
||
<rect x="4" y="4" width="248" height="120" rx="6" fill="none" stroke="#FF3D00" stroke-width="2" stroke-dasharray="8 4"/>
|
||
<g transform="translate(116, 20)">
|
||
<path d="M4,28 L4,2 L18,2 L18,28 Z" fill="none" stroke="#FF3D00" stroke-width="2"/>
|
||
<path d="M4,2 L18,5 L18,25 L4,28 Z" fill="#FF3D00" opacity="0.8"/>
|
||
<circle cx="14" cy="15" r="1.5" fill="#0A0D14"/>
|
||
</g>
|
||
<text x="128" y="82" fill="#FF3D00" font-family="system-ui, sans-serif" font-size="16" font-weight="bold" text-anchor="middle">🚪 前门门磁 触发</text>
|
||
<text x="128" y="105" fill="#FF8A80" font-family="system-ui, sans-serif" font-size="12" text-anchor="middle">ZONE 0 | 红色报警</text>
|
||
</svg>
|
||
</div>
|
||
<div class="details-container">
|
||
<div class="step-name">3.1 传感器报警触发（以门磁为例）</div>
|
||
<table>
|
||
<tr><th>触发动作</th><td>待机状态下，接收到已配对传感器发送的报警 433MHz 数据帧。</td></tr>
|
||
<tr><th>屏幕显示</th><td>全屏红色闪烁虚线框，中央显示开门状态的 <span class="badge badge-red">🚪</span> 图标，底部显示自定义中文名称。</td></tr>
|
||
<tr><th>LED 灯效</th><td>对应传感器专属颜色（门磁对应红色，PIR对应橙色，水浸对应黄色）</td></tr>
|
||
<tr><th>马达反馈</th><td>对应传感器特定振动模式（门磁为：1次短振 300ms，每 5 秒循环一次）</td></tr>
|
||
<tr><th>自动退出</th><td>报警发射停止后，5 秒自动超时退出，恢复时钟待机。</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 3.2 -->
|
||
<div class="card">
|
||
<div class="screen-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128" viewBox="0 0 256 128">
|
||
<rect width="256" height="128" rx="8" fill="#0A0D14"/>
|
||
<rect x="4" y="4" width="248" height="120" rx="6" fill="none" stroke="#FF1744" stroke-width="2"/>
|
||
<rect x="8" y="8" width="240" height="112" rx="4" fill="none" stroke="#FF1744" stroke-width="1" stroke-dasharray="6 3"/>
|
||
<g transform="translate(116, 20)" fill="#FF1744">
|
||
<rect x="2" y="18" width="20" height="6" rx="1"/>
|
||
<path d="M4,18 C4,8 20,8 20,18 Z"/>
|
||
<line x1="-4" y1="6" x2="2" y2="12" stroke="#FF1744" stroke-width="2" stroke-linecap="round"/>
|
||
<line x1="12" y1="-4" x2="12" y2="4" stroke="#FF1744" stroke-width="2" stroke-linecap="round"/>
|
||
<line x1="28" y1="6" x2="22" y2="12" stroke="#FF1744" stroke-width="2" stroke-linecap="round"/>
|
||
</g>
|
||
<text x="128" y="85" fill="#FF1744" font-family="system-ui, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" letter-spacing="2">🚨 紧急求救 SOS</text>
|
||
<text x="128" y="108" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">手环触发 | 最高优先级</text>
|
||
</svg>
|
||
</div>
|
||
<div class="details-container">
|
||
<div class="step-name">3.2 紧急 SOS 触发（最高优先级）</div>
|
||
<table>
|
||
<tr><th>触发动作</th><td>用户在手环上短按 SOS 键，或接收到其它手环广播的 SOS 求救信号。</td></tr>
|
||
<tr><th>屏幕显示</th><td>红色宽警告边框，中央闪烁旋转警灯 <span class="badge badge-red">🚨</span>，全屏显示“紧急求救 SOS”。</td></tr>
|
||
<tr><th>LED 灯效</th><td>红色极速闪烁（5Hz）</td></tr>
|
||
<tr><th>马达反馈</th><td>持续不断的长周期振动（1200ms 长振循环），用于在危急状态下唤醒睡眠或提醒用户。</td></tr>
|
||
<tr><th>解除机制</th><td>长按手环按键或在 IPC 主机/手机 APP 上点击“解除警报”。</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Section 4 -->
|
||
<div class="section-title">四、 传感器与振动灯效映射表</div>
|
||
<div class="card" style="flex-direction: column; background-color: #0F172A; border: 1px solid #334155;">
|
||
<div class="step-name" style="color: #FFB74D;">7类传感器及手环动作参数汇总</div>
|
||
<table style="font-size: 0.95rem; line-height: 1.8;">
|
||
<thead>
|
||
<tr style="border-bottom: 2px solid #334155; color: #94A3B8;">
|
||
<th>代码</th>
|
||
<th>类型</th>
|
||
<th>LED 颜色</th>
|
||
<th>振动模式</th>
|
||
<th>单次振动时长</th>
|
||
<th>振动间隔</th>
|
||
<th>应用场景说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><b>0001 (A)</b></td>
|
||
<td>🚪 门磁/窗磁</td>
|
||
<td><span class="badge" style="background-color: #7f1d1d; color: #fca5a5;">● 红色</span></td>
|
||
<td>1 次短振</td>
|
||
<td>300 ms</td>
|
||
<td>—</td>
|
||
<td>进出口边界安全防护（最高优先级）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>0010 (B)</b></td>
|
||
<td>👤 人体感应 PIR</td>
|
||
<td><span class="badge" style="background-color: #7c2d12; color: #ffedd5;">● 橙色</span></td>
|
||
<td>2 次短振</td>
|
||
<td>300 ms</td>
|
||
<td>200 ms</td>
|
||
<td>室内移动探测及婴儿防翻身/攀爬监控</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>0011 (C)</b></td>
|
||
<td>🔥 烟雾传感器</td>
|
||
<td><span class="badge" style="background-color: #064e3b; color: #6ee7b7;">● 绿色</span></td>
|
||
<td>3 次短振</td>
|
||
<td>200 ms</td>
|
||
<td>150 ms</td>
|
||
<td>火灾烟雾探测与厨房安全监控</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>0100 (D)</b></td>
|
||
<td>🆘 紧急按钮</td>
|
||
<td><span class="badge" style="background-color: #1e3a8a; color: #93c5fd;">● 蓝色</span></td>
|
||
<td>1 次长振</td>
|
||
<td>800 ms</td>
|
||
<td>—</td>
|
||
<td>人工手动紧急一键求助呼叫</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>0101 (E)</b></td>
|
||
<td>💨 气体传感器</td>
|
||
<td><span class="badge" style="background-color: #581c87; color: #e9d5ff;">● 紫色</span></td>
|
||
<td>4 次短振</td>
|
||
<td>200 ms</td>
|
||
<td>100 ms</td>
|
||
<td>一氧化碳/天然气泄漏高危报警</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>0110 (F)</b></td>
|
||
<td>💧 水浸传感器</td>
|
||
<td><span class="badge" style="background-color: #78350f; color: #fef3c7;">● 黄色</span></td>
|
||
<td>2 次长振</td>
|
||
<td>600 ms</td>
|
||
<td>300 ms</td>
|
||
<td>水管漏水/积水外溢高湿防护</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>0111 (G)</b></td>
|
||
<td>📳 振动传感器</td>
|
||
<td><span class="badge" style="background-color: #134e5e; color: #e0f7fa;">● 青色</span></td>
|
||
<td>连续 3 次</td>
|
||
<td>150 ms</td>
|
||
<td>100 ms</td>
|
||
<td>保险柜/主门防撬外力振动监测</td>
|
||
</tr>
|
||
<tr>
|
||
<td><b>1000 (SOS)</b></td>
|
||
<td>🚨 手环紧急求救</td>
|
||
<td><span class="badge" style="background-color: #7f1d1d; color: #fca5a5; animation: flash 1s infinite;">● 红色闪烁</span></td>
|
||
<td>持续长振</td>
|
||
<td>1200 ms 循环</td>
|
||
<td>—</td>
|
||
<td>手环端独立发起最高优先级报警（凌驾所有Zone）</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|