01 / 接入
多协议设备接入网关
MQTT、Modbus TCP、OPC UA、LoRaWAN 四类协议统一抽象为设备影子，屏蔽厂商差异，新设备从登记到数据可视平均 18 分钟。
协议适配种类4 类 / 12 变体
单网关并发连接20,000
首次接入耗时≤ 18 min
这是一个网页样式设计参考｜全屏折角画廊 · 物联网解决方案视觉稿
配色令牌：creative-spectrum / 深色底
全屏设计 · 互动体验 · 未来科技
让每一台设备，在灵感绽放的界面上开口说话
以全屏沉浸式创意网页承载物联网解决方案：把 128 路传感数据、设备拓扑与告警链路压缩进一屏可读的折角纸张层叠结构里，让运维人员 3 秒内看懂全局，让访客 10 秒内理解价值。
全屏设计
折角翻页层叠
横向滚动卡片带
用户体验优先
未来科技
核心能力
三张能力卡，撑起一整套物联网解决方案的体验骨架
横向滚动卡片带承载三大能力域，桌面端可拖拽/滚轮横滑，触屏端原生滑动，每张卡控制在 272–340px 宽，保证一屏可见 2.5 张以上，形成“还有更多”的浏览暗示。
02 / 编排
可视化规则编排引擎
以节点画布拖拽完成“阈值→联动→通知”编排，无需改代码即可上线新场景；规则支持灰度发布，回滚耗时小于 10 秒。
单项目规则上限500 条
规则生效延迟≤ 800 ms
灰度回滚< 10 s
03 / 呈现
全屏自适应数据呈现
同一套数据模型自动适配 21:9 大屏、16:9 控制台与 9:16 移动端三种版式，关键指标始终落在视觉第一落点，减少 60% 的滚动查找动作。
适配版式3 种
关键指标首屏可见率92%
查找耗时下降60%
数据可视化面板
把“体验好坏”变成可读的仪表，而不是一句感觉
左侧为链路各环节耗时条带，右侧为体验健康度关键数字；所有数值均为真实可采集口径，避免“看起来很好看但无法验证”的展示空转。
99.2%
设备在线率（近 7 日均值）
42s
告警从触发到闭环平均耗时
1.6s
全屏首屏可交互时间（P75）
4.7/5
运维端任务完成满意度
五段链路耗时拆解（单位 ms，取 P95）
采集上报340
边缘预处理220
规则判定160
状态同步480
界面渲染400
主色：采集/渲染
次色：同步链路
强调：异常高亮
图文混排特写
从设备上电到全屏可视，四步走完，每一步都有验收口径
折角层叠 · 特写
接入向导以折角纸张层叠推进：每完成一步，上一页向右下折起并保留窄边，让用户始终知道“我从哪里来、还剩几步”。这一互动设计把平均配置时长从 46 分钟压到 18 分钟。
- 设备登记与协议选择填写设备编号与协议类型，系统自动匹配解析模板；验收口径：解析成功率 ≥ 99%。
- 数据点映射把原始点位映射到统一指标命名；建议单设备点位不超过 64 个，超出拆分设备组。
- 规则与阈值配置设定上下限、持续时长与静默窗口（建议静默 60s 防抖）；验收口径：误报率 ≤ 2%。
- 全屏视图发布选择概览/分析/排障密度并发布；验收口径：首屏可交互 ≤ 1.6s，关键指标首屏可见率 ≥ 90%。
应用场景展示
同一套物联网解决方案，落在四个真实场景里的不同体验侧重
画廊瀑布流按场景卡片铺开，每张卡片标注该场景最该被优化的那个体验指标——避免所有场景都堆同一组数字。
实用指导清单
六条可直接照做的落地要点，每条都带阈值与避坑点
① 先定信息落点，再谈全屏铺满
把 3 个“必须第一眼看到”的指标固定在第 1 屏且不随滚动位移，其余下放。避坑：不要把 12 个指标平均铺满整屏，会让人找不到重点。
首屏关键指标 ≤ 3 个② 全屏高度用 min(86vh,760px) 控
用视口单位配合像素上限，避免超宽屏被拉成一条空荡荡的长条；移动端直接取消 min-height，改为内容自适应。
超宽屏内容占比 ≥ 70%③ 实时数据必须带静默窗口
阈值告警加 60s 静默与连续 3 次命中才触发，可把抖动误报压到 2% 以内；历史曲线采样间隔建议 1s，聚合粒度 1min。
误报率 ≤ 2%④ 横向卡片带要留“半张露出”
卡片宽 272–340px，配合 scroll-snap 对齐；露出半张是最低成本的可滑动暗示。避坑：别加自动轮播，会打断阅读。
首屏可见卡片 ≥ 2.5 张⑤ 折角层叠控制在 3 层以内
折角只是层级暗示，超过 3 层会让人误以为是可点击堆栈。折角尺寸 26–34px，圆角与卡片保持同一令牌体系。
层叠深度 ≤ 3⑥ 强调色只点 10%，且不做大面积填充
强调色仅用于按钮、激活态、关键数字与 1px 高亮线；大面积交给中性底与主色。避坑：不要整条横幅铺满高饱和色。
强调色面积 ≤ 10%常见翻车点自查（点击展开）
1) 长英文设备号撑破列宽：为所有网格子项加 min-width:0，并对长串使用 overflow-wrap:break-word。2) 用 100vw 做全宽导致横向滚动条：改用 100% 配合 max-width。3) 图片未设固定宽高比导致布局跳动：容器统一 aspect-ratio（16/10、4/3、5/4）并 object-fit:cover。4) 把入场动效写成默认 opacity:0 再靠脚本显示：无脚本时内容永久不可见，必须默认可见并用 @keyframes 自动播放。5) 装饰色块越界遮挡正文：父级 overflow:hidden，装饰元素一律 pointer-events:none 且 aria-hidden。
合作伙伴墙
与硬件、云与集成伙伴共同打磨体验细节
传感硬件伙伴模组与网关
边缘计算伙伴算力与容器
工业协议伙伴PLC 与 OPC UA
云基础设施弹性与时延
系统集成商现场交付
运维服务商7×24 响应