01 字段契约冻结 ≤18 字段
设备模型先落成 JSON Schema 再写代码,遥测字段控制在 18 个以内、单字段长度 ≤64 字符;避坑:不要把厂商私有字段直接透传到前端,否则后续每接一类设备都要改一次界面。
图文混排特写
极简抽象的核心不是删减功能,而是把四层职责压到一条可验证的链路上:设备抽象层只做归一化,边缘层只做确定性计算,平台层只做编排,体验层只做呈现。任何跨层耦合都会在界面上以「波纹断层」提示。
LAYER / 01→04 · SLA 目标 99.95%
把 Modbus、OPC UA、MQTT、LoRaWAN 等 17 类协议统一收敛为 18 个核心字段,前端只消费抽象模型,不再感知协议差异;新增一类协议的平均接入工时为 1.5 人日。
先冻结字段契约,再写适配器。建议把设备模型拆为「身份 / 遥测 / 指令 / 事件」四组,组间禁止横向引用;契约评审通过后再进入编码,可减少后期返工约 40%。
把阈值告警、去抖动、聚合窗口放在边缘执行:采集频率 1kHz 时建议聚合窗口设 200ms,抖动阈值取量程的 2%,可将上行流量压到原始数据的 6% 以内。
体验层只暴露三层信息:状态、趋势、动作。所有卡片吸附 12 列栅格,间距取 4/8pt 节奏(12 / 16 / 24px),分隔一律使用 1px 细线,避免阴影堆叠造成视觉噪音。
上线前跑三项验收:链路压测(≥5,000 msg/s)、弱网注入(丢包 5%)、可访问性对比度(正文 ≥4.5:1)。灰度按 5% → 25% → 100% 三档推进,每档观察 24 小时关键指标。
合作伙伴墙
统一适配接口使伙伴设备平均 3 天完成联调,兼容既有工业网关而不需替换现场硬件。
数据可视化面板
面板只保留四类读数,超出部分折叠到二级视图。所有数字均取最近 15 分钟滑动窗口,柱状条使用主色到暖色的明度过渡,强调色仅用于关键数字。
WINDOW / 15min · REFRESH 5s
上行消息速率
6,420msg/s
峰值 8,900 msg/s · 容量水位 92%
指令成功率
99.86%
重试阈值 3 次 · 退避 200ms
边缘命中率
83.4%
本地闭环 42ms · 云端回源 310ms
体验层首屏
1.18s
LCP 目标 ≤1.5s · 图片懒加载已开启
AR 巡检单次耗时
3.6min
较纸质流程缩短 58%
实用指导清单
以下要点按「先契约、再性能、后体验」排序,每条都给出可测量阈值与常见避坑点,可直接作为交付验收单使用。
设备模型先落成 JSON Schema 再写代码,遥测字段控制在 18 个以内、单字段长度 ≤64 字符;避坑:不要把厂商私有字段直接透传到前端,否则后续每接一类设备都要改一次界面。
采集频率高于 10Hz 时必须在边缘做窗口聚合,建议 200ms 窗口 + 2% 量程去抖;此项通常可把上行带宽压到原始数据的 6%–10%,是弱网现场最先见效的一步。
边缘节点本地缓存按「72 小时 + 断点续传」配置,落盘使用追加写并每 10 分钟校验一次;避坑:不要把缓存放在内存,现场断电会导致整段遥测丢失。
卡片间距取 12 / 16 / 24px 三档,分隔线统一 1px 低对比描边;强调色使用面积不超过整屏 10%,只用于按钮、激活态与关键数字,避免大面积高饱和填充。
入场动画用 @keyframes 加载即播放、以 animation-delay 错峰 80–120ms;所有动效必须配 prefers-reduced-motion 降级,且元素默认可见,不得依赖脚本添加类名才显示。
正文对比度 ≥4.5:1、可交互元素点按区 ≥44×44px、:focus-visible 焦点环宽 2px;图片一律写描述性 alt 并加 loading="lazy",装饰性图形标记 aria-hidden。
核心能力卡片
硬边描边 + 偏移阴影的卡片语言,与 1px 细线栅格保持同一秩序感。
Capability 01
17 类协议适配器统一收敛为 18 字段模型,新增协议平均 1.5 人日完成联调,无需改动前端呈现层。
Capability 02
规则引擎下沉到边缘,告警与联动本地闭环 42ms,弱网下仍保持控制指令不丢、不乱序。
Capability 03
以增强现实叠加设备状态、以虚拟现实做厂区巡检演练,配合极简抽象界面降低现场认知负荷。
应用场景展示
每个场景均给出关键量化指标,便于对照自身现场的改造收益。
提交现场设备清单与协议类型,我们将在 3 个工作日内给出字段映射表、边缘部署拓扑与灰度上线计划。