224 lines
17 KiB
HTML
224 lines
17 KiB
HTML
<html style="margin:0;padding:0;">
|
||
<div style="background-color:transparent;box-sizing:border-box;font-family:'PingFang SC','Microsoft YaHei',Arial,sans-serif;color:#1A1B1C;line-height:1.5;">
|
||
|
||
<!-- 01 页面导航流程 -->
|
||
<div style="font-size:15px;font-weight:600;margin:4px 0 10px;">① 10 个界面的导航流程（依据协议③~⑫）</div>
|
||
<div style="border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:14px;background:rgba(0,0,0,0.025);box-sizing:border-box;">
|
||
<svg viewBox="0 0 860 340" style="width:100%;height:auto;display:block;" role="img" aria-label="界面导航流程示意">
|
||
<!-- 主链 ③④⑤ -->
|
||
<rect x="10" y="20" width="120" height="54" rx="8" fill="#3D8BFD" />
|
||
<text x="70" y="40" text-anchor="middle" fill="#FFFFFF" font-size="12" font-weight="600">③ 开机密码</text>
|
||
<text x="70" y="58" text-anchor="middle" fill="#DCE8FB" font-size="10">密码 6789</text>
|
||
|
||
<line x1="130" y1="47" x2="178" y2="47" stroke="#3D8BFD" stroke-width="2" marker-end="url(#ar1)"/>
|
||
<text x="154" y="40" text-anchor="middle" fill="#6B7280" font-size="9">正确</text>
|
||
|
||
<rect x="182" y="20" width="120" height="54" rx="8" fill="#242E3A" stroke="#3D8BFD" stroke-width="1.5" />
|
||
<text x="242" y="40" text-anchor="middle" fill="#E6EDF3" font-size="12" font-weight="600">④ 自检</text>
|
||
<text x="242" y="58" text-anchor="middle" fill="#9AA7B4" font-size="10">10 项 + 进度条</text>
|
||
|
||
<line x1="302" y1="47" x2="350" y2="47" stroke="#3D8BFD" stroke-width="2" marker-end="url(#ar1)"/>
|
||
<text x="326" y="40" text-anchor="middle" fill="#6B7280" font-size="9">完成/忽略</text>
|
||
|
||
<rect x="354" y="20" width="120" height="54" rx="8" fill="#3D8BFD" />
|
||
<text x="414" y="40" text-anchor="middle" fill="#FFFFFF" font-size="12" font-weight="600">⑤ 作业选择</text>
|
||
<text x="414" y="58" text-anchor="middle" fill="#DCE8FB" font-size="10">6 个作业入口</text>
|
||
|
||
<line x1="474" y1="47" x2="522" y2="47" stroke="#3D8BFD" stroke-width="2" marker-end="url(#ar1)"/>
|
||
<text x="498" y="40" text-anchor="middle" fill="#6B7280" font-size="9">选择</text>
|
||
|
||
<rect x="526" y="20" width="120" height="54" rx="8" fill="#242E3A" stroke="#36C75A" stroke-width="1.5" />
|
||
<text x="586" y="40" text-anchor="middle" fill="#E6EDF3" font-size="12" font-weight="600">⑥~⑪ 作业界面</text>
|
||
<text x="586" y="58" text-anchor="middle" fill="#9AA7B4" font-size="10">底盘/机械臂/检测/洗消</text>
|
||
|
||
<!-- 错误密码支线 -->
|
||
<line x1="70" y1="74" x2="70" y2="110" stroke="#E5484D" stroke-width="1.5" marker-end="url(#ar2)"/>
|
||
<text x="78" y="98" fill="#E5484D" font-size="9">密码错误</text>
|
||
<rect x="10" y="112" width="120" height="46" rx="8" fill="#3A2530" stroke="#E5484D" stroke-width="1.5" />
|
||
<text x="70" y="132" text-anchor="middle" fill="#FFB4B8" font-size="11" font-weight="600">密码警告页</text>
|
||
<text x="70" y="148" text-anchor="middle" fill="#E9A6AA" font-size="9">重新输入</text>
|
||
|
||
<!-- 忘记/修改密码支线 -->
|
||
<line x1="10" y1="74" x2="10" y2="190" stroke="#F5A623" stroke-width="1.5" stroke-dasharray="4 3" marker-end="url(#ar2)"/>
|
||
<text x="18" y="140" fill="#B9791B" font-size="9">忘记/修改</text>
|
||
<rect x="10" y="194" width="120" height="86" rx="8" fill="#2E2A20" stroke="#F5A623" stroke-width="1.5" />
|
||
<text x="70" y="216" text-anchor="middle" fill="#FFD9A0" font-size="11" font-weight="600">密码管理</text>
|
||
<text x="70" y="234" text-anchor="middle" fill="#C9A25E" font-size="9">登录→勾选重置√</text>
|
||
<text x="70" y="252" text-anchor="middle" fill="#C9A25E" font-size="9">输入新密码</text>
|
||
<text x="70" y="270" text-anchor="middle" fill="#36C75A" font-size="9">“修改成功”2s</text>
|
||
|
||
<!-- 故障查询 -->
|
||
<rect x="526" y="112" width="120" height="46" rx="8" fill="#242E3A" stroke="#F5A623" stroke-width="1.5" />
|
||
<text x="586" y="132" text-anchor="middle" fill="#FFD9A0" font-size="11" font-weight="600">⑫ 故障查询</text>
|
||
<text x="586" y="148" text-anchor="middle" fill="#C9A25E" font-size="9">每页 6 条/分类筛选</text>
|
||
<line x1="474" y1="40" x2="586" y2="112" stroke="#F5A623" stroke-width="1.5" stroke-dasharray="4 3" marker-end="url(#ar2)"/>
|
||
<text x="505" y="78" fill="#B9791B" font-size="9">故障查询</text>
|
||
|
||
<!-- 急停 -->
|
||
<rect x="526" y="194" width="120" height="46" rx="8" fill="#E5484D" />
|
||
<text x="586" y="214" text-anchor="middle" fill="#FFFFFF" font-size="11" font-weight="600">急停（全局）</text>
|
||
<text x="586" y="230" text-anchor="middle" fill="#FFD9DC" font-size="9">全系统停止</text>
|
||
<line x1="586" y1="74" x2="586" y2="192" stroke="#E5484D" stroke-width="1.5" marker-end="url(#ar2)"/>
|
||
<text x="600" y="140" fill="#B33B43" font-size="9">任意界面可触发</text>
|
||
|
||
<!-- 运行中返回规则 -->
|
||
<rect x="700" y="20" width="150" height="54" rx="8" fill="#2A3442" stroke="#9AA7B4" stroke-width="1" />
|
||
<text x="775" y="40" text-anchor="middle" fill="#E6EDF3" font-size="11" font-weight="600">关键规则</text>
|
||
<text x="775" y="58" text-anchor="middle" fill="#9AA7B4" font-size="9">⑨⑩运行中返回无效</text>
|
||
|
||
<rect x="700" y="112" width="150" height="86" rx="8" fill="#2A3442" stroke="#9AA7B4" stroke-width="1" />
|
||
<text x="775" y="132" text-anchor="middle" fill="#E6EDF3" font-size="11" font-weight="600">公共框架</text>
|
||
<text x="775" y="150" text-anchor="middle" fill="#9AA7B4" font-size="9">顶条：通信/标题/急停</text>
|
||
<text x="775" y="166" text-anchor="middle" fill="#9AA7B4" font-size="9">底条：电量/电压/液位</text>
|
||
<text x="775" y="182" text-anchor="middle" fill="#9AA7B4" font-size="9">警示红字 500ms 闪烁</text>
|
||
|
||
<defs>
|
||
<marker id="ar1" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#3D8BFD"/></marker>
|
||
<marker id="ar2" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#9AA7B4"/></marker>
|
||
</defs>
|
||
</svg>
|
||
<div style="font-size:11px;color:#6B7280;margin-top:6px;">示意：依据《技术协议（初版）》③~⑫ 及文档【设计建议】绘制的导航关系；⑫可从④自检页与⑤作业选择页进入。</div>
|
||
</div>
|
||
|
||
<!-- 02 配色体系 -->
|
||
<div style="font-size:15px;font-weight:600;margin:18px 0 10px;">② 深色工业配色体系（QSS 十六进制，画布 1280×800）</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:8px;box-sizing:border-box;">
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#161C23;border:1px solid #3D4A59;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">主背景</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#161C23</div>
|
||
</div>
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#242E3A;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">面板/弹窗</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#242E3A</div>
|
||
</div>
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#2D3947;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">按钮常态</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#2D3947</div>
|
||
</div>
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#3D8BFD;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">强调主色</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#3D8BFD</div>
|
||
</div>
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#36C75A;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">成功/到位</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#36C75A</div>
|
||
</div>
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#F5A623;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">警示</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#F5A623</div>
|
||
</div>
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#E5484D;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">危险/急停</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#E5484D</div>
|
||
</div>
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#56636F;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">禁用底</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#56636F</div>
|
||
</div>
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#E6EDF3;border:1px solid #3D4A59;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">主文字</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#E6EDF3</div>
|
||
</div>
|
||
<div style="flex:1 1 96px;min-width:0;padding:10px;border-radius:10px;background:#161C23;box-sizing:border-box;">
|
||
<div style="width:100%;height:30px;border-radius:6px;background:#9AA7B4;"></div>
|
||
<div style="font-size:10px;color:#C8D3DE;margin-top:6px;">次文字</div>
|
||
<div style="font-size:10px;color:#8A96A4;">#9AA7B4</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 03 界面深色效果示意 -->
|
||
<div style="font-size:15px;font-weight:600;margin:18px 0 10px;">③ 关键界面深色效果示意（按文档线框还原，非真实截图）</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:12px;box-sizing:border-box;">
|
||
|
||
<!-- 作业选择界面示意 -->
|
||
<div style="flex:1 1 300px;min-width:0;background:#161C23;border-radius:10px;padding:12px;box-sizing:border-box;">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #3D4A59;padding-bottom:8px;">
|
||
<span style="color:#36C75A;font-size:11px;">● 通信正常</span>
|
||
<span style="color:#E6EDF3;font-size:13px;font-weight:600;">【作业选择】</span>
|
||
<span style="color:#E5484D;background:#E5484D;padding:3px 10px;border-radius:4px;font-size:10px;color:#FFFFFF;font-weight:600;">急停</span>
|
||
</div>
|
||
<div style="display:flex;gap:8px;margin-top:10px;">
|
||
<div style="width:74px;">
|
||
<div style="background:#2D3947;border:1px solid #3D8BFD;border-radius:6px;padding:8px 4px;text-align:center;color:#E6EDF3;font-size:11px;margin-bottom:6px;">机器人底盘</div>
|
||
<div style="background:#2D3947;border-radius:6px;padding:8px 4px;text-align:center;color:#9AA7B4;font-size:11px;margin-bottom:6px;">机械臂</div>
|
||
<div style="background:#2D3947;border-radius:6px;padding:8px 4px;text-align:center;color:#9AA7B4;font-size:11px;margin-bottom:6px;">气体检测仪</div>
|
||
<div style="background:#2D3947;border-radius:6px;padding:8px 4px;text-align:center;color:#9AA7B4;font-size:11px;">调试维护</div>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:6px;">
|
||
<div style="background:#242E3A;border-radius:6px;padding:6px;">
|
||
<div style="color:#9AA7B4;font-size:10px;">底盘</div>
|
||
<div style="color:#E6EDF3;font-size:11px;">电量：85% 电压：360V</div>
|
||
<div style="color:#36C75A;font-size:10px;">故障：无</div>
|
||
</div>
|
||
<div style="background:#242E3A;border-radius:6px;padding:6px;">
|
||
<div style="color:#9AA7B4;font-size:10px;">洗消</div>
|
||
<div style="color:#E6EDF3;font-size:11px;">A液位：100L 泡沫液位：30L</div>
|
||
</div>
|
||
<div style="background:#242E3A;border-radius:6px;padding:6px;">
|
||
<div style="color:#9AA7B4;font-size:10px;">机械臂</div>
|
||
<div style="color:#E6EDF3;font-size:11px;">末端XYZ 姿态RX…</div>
|
||
</div>
|
||
<div style="background:#242E3A;border-radius:6px;padding:6px;">
|
||
<div style="color:#9AA7B4;font-size:10px;">检测仪</div>
|
||
<div style="color:#E6EDF3;font-size:11px;">点火S类2级 浓度300ppb</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:64px;display:flex;flex-direction:column;gap:6px;">
|
||
<div style="background:#3D8BFD;border-radius:6px;padding:8px 2px;text-align:center;color:#FFFFFF;font-size:11px;">手动消除</div>
|
||
<div style="background:#3D8BFD;border-radius:6px;padding:8px 2px;text-align:center;color:#FFFFFF;font-size:11px;">手动消毒</div>
|
||
<div style="background:#2D3947;border-radius:6px;padding:8px 2px;text-align:center;color:#9AA7B4;font-size:11px;">返回</div>
|
||
</div>
|
||
</div>
|
||
<div style="border-top:1px solid #3D4A59;margin-top:10px;padding-top:6px;color:#9AA7B4;font-size:10px;">底盘电量：85% 底盘电压：360V 清水液位：100L 泡沫液位：30L 行车模式</div>
|
||
</div>
|
||
|
||
<!-- 手动消毒界面示意 -->
|
||
<div style="flex:1 1 300px;min-width:0;background:#161C23;border-radius:10px;padding:12px;box-sizing:border-box;">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #3D4A59;padding-bottom:8px;">
|
||
<span style="color:#36C75A;font-size:11px;">● 通信正常</span>
|
||
<span style="color:#E6EDF3;font-size:13px;font-weight:600;">【手动消毒】</span>
|
||
<span style="background:#E5484D;padding:3px 10px;border-radius:4px;font-size:10px;color:#FFFFFF;font-weight:600;">急停</span>
|
||
</div>
|
||
<div style="display:flex;gap:8px;margin-top:10px;">
|
||
<div style="width:74px;">
|
||
<div style="background:#2D3947;border-radius:6px;padding:7px 4px;text-align:center;color:#E6EDF3;font-size:11px;margin-bottom:6px;">洗消模式</div>
|
||
<div style="background:#2D3947;border-radius:6px;padding:7px 4px;text-align:center;color:#9AA7B4;font-size:11px;margin-bottom:6px;">A液位</div>
|
||
<div style="background:#2D3947;border-radius:6px;padding:7px 4px;text-align:center;color:#9AA7B4;font-size:11px;">泡沫液位</div>
|
||
</div>
|
||
<div style="flex:1;background:#242E3A;border-radius:6px;padding:8px;">
|
||
<div style="color:#9AA7B4;font-size:10px;">A药剂流量</div>
|
||
<div style="color:#E6EDF3;font-size:15px;font-weight:600;">2.0 L/min</div>
|
||
<div style="color:#9AA7B4;font-size:10px;margin-top:4px;">空压机压力</div>
|
||
<div style="color:#E6EDF3;font-size:15px;font-weight:600;">0.35 MPa</div>
|
||
<div style="display:flex;gap:4px;margin-top:6px;">
|
||
<span style="background:#2D3947;border-radius:4px;padding:2px 6px;color:#9AA7B4;font-size:9px;">发泡倍数 6</span>
|
||
<span style="background:#2D3947;border-radius:4px;padding:2px 6px;color:#9AA7B4;font-size:9px;">泡沫比例 3%</span>
|
||
</div>
|
||
</div>
|
||
<div style="width:64px;display:flex;flex-direction:column;gap:6px;">
|
||
<div style="background:#36C75A;border-radius:6px;padding:8px 2px;text-align:center;color:#FFFFFF;font-size:11px;">启动</div>
|
||
<div style="background:#2D3947;border-radius:6px;padding:8px 2px;text-align:center;color:#9AA7B4;font-size:11px;">停止</div>
|
||
<div style="background:#2D3947;border-radius:6px;padding:8px 2px;text-align:center;color:#9AA7B4;font-size:11px;">保存</div>
|
||
<div style="background:#2D3947;border-radius:6px;padding:8px 2px;text-align:center;color:#9AA7B4;font-size:11px;">返回</div>
|
||
</div>
|
||
</div>
|
||
<div style="border-top:1px solid #3D4A59;margin-top:10px;padding-top:6px;color:#9AA7B4;font-size:10px;">
|
||
指示灯：<span style="color:#36C75A;">●启停</span> <span style="color:#36C75A;">●柱塞泵</span> <span style="color:#36C75A;">●空压机</span> <span style="color:#E5484D;">●液位低</span> <span style="color:#9AA7B4;">○D1 ○D2 ○系统故障</span>
|
||
<div style="color:#E5484D;margin-top:4px;font-size:10px;">⚠ 警告：该模式下无保护功能，操作请谨慎！（红色闪烁）</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="font-size:11px;color:#6B7280;margin-top:12px;">注：以上界面效果为深色工业主题示意图，控件坐标、状态机与交互细节以 Word 说明书第 3 章为准；协议原文要求以黑体加粗引用，设计补充均标注【设计建议】。</div>
|
||
</div>
|
||
</html>
|