实时数据可视化
趋势、热力、分布三类图形按需切换，图表分段绘制，单帧预算 8ms。
1s 刷新
这是一个网页样式设计参考
分屏布局 · 灵感闪耀 · 物联网解决方案
灵感闪耀 · 数据可视化
分屏并置，把物联网 洞察速度拉到极致 左看数据，右看现场
以 50:50 分屏设计承载「数据可视化 + 增强现实」双视图：左侧滚动指标流，右侧现场影像与悬浮卡片。单屏内完成从告警发现到处置确认的闭环，减少跨系统切换带来的效率损耗。
≤180ms
数据上屏延迟（边缘缓存）
99.95%
网关链路可用性
-38%
平均排障耗时
FAQ · 常见问题分屏与实时链路，落地前先厘清这几件事
以下问答均围绕「效率与性能」展开，给出可核对的阈值与做法，便于在选型评审会上直接引用。
分屏设计会不会拖慢首屏渲染？
不会，前提是左右两栏独立加载。左栏先渲染骨架与关键数字（约 12 个 KPI），右栏影像延迟挂载；图表按需分段绘制，单帧绘制预算控制在 8ms 内。实测首屏可交互时间 1.2s 左右，比单栏长列表更快，因为可视区域被拆成两个更小的渲染任务。
协议选 MQTT 还是 HTTP 轮询？
高频测点（≥1Hz）一律走 MQTT，QoS 1 并开启会话保持；低频配置类数据用 HTTP 更省事。混合场景建议 MQTT 承载 80% 遥测、HTTP 承载配置同步，避免长连接泛滥。若终端算力受限，可退化为 5s 批量上报 + 边缘缓存补偿。
增强现实标注的定位精度怎么保证？
室内优先用视觉标记 + 蓝牙信标融合定位，目标误差 ≤30cm；室外用 RTK 差分，水平误差 ≤10cm。标注锚点写在设备主数据里而非画面像素上，画面缩放或换机位时标注位置才不会漂移。
数据可视化图表堆太多会不会反而降效？
会。单屏建议不超过 3 类图形：趋势线、状态热力、分布直方。超过后识别成本陡增。把次要指标收纳进悬浮卡片按需展开，比全部平铺在画布上更省认知带宽，交互响应也更稳。
断网时业务还能继续吗？
能。边缘节点本地存储 7 天数据并维持本地告警逻辑，网络恢复后按时间戳增量补传，冲突以设备侧时间为准。断网期间分屏视图降级为本地视图，并给出明确的离线角标，避免误判为实时数据。
方案对比三种物联网接入路径的效率取舍
按测点规模与实时性要求选择，不要为低频场景过度设计长连接与边缘算力。
| 方案 | 适用测点规模 | 端到端时延 | 带宽占用 | 断网续传 | 落地成本 |
|---|---|---|---|---|---|
| 直连云 · 轻量接入 | ≤500 点 | 300–600ms | 中（全量上报） | 不支持 | 最低，2 天可上线 |
| 边缘网关 · 增量上报 | 500–20000 点 | ≤180ms | 低（压缩 40%） | 7 天本地留存 | 中，需 1 台边缘机 |
| 边缘 + 云双活 | ≥20000 点 | 150–250ms | 低（分级聚合） | 双活互备 | 较高，需双链路 |
| 纯轮询 · 兼容旧设备 | ≤200 点 | 2–5s | 高（重复请求） | 不支持 | 低，但扩容受限 |
图文特写一块屏里，完成从发现到确认
非对称双栏：左侧现场影像占据主视觉，右侧承载指标与动作，形成「看图—读数—处置」的固定视线路径。
把「看一眼」的成本压到最低
分屏的价值不在于好看，而在于减少视线跳转次数。左栏固定趋势与阈值线，右栏固定现场与动作按钮，操作员无需在多个页面间来回切换。
配色上遵循 60-30-10：中性深底承载 60% 面积，主色用于分区与图表主体，强调色只留给关键数字与激活态，保证长时间盯屏不疲劳。
实用指导清单分屏物联网看板落地的 6 个关键动作
每条都给出可执行动作与量化阈值，可直接作为开发与验收的检查项。
01
先定分屏信息优先级，再画界面
左栏放决策数据（趋势、阈值、排名），右栏放现场证据（影像、AR 标注）。单栏信息块控制在 5±1 个，超出就折叠进悬浮卡片，避免一屏塞满导致扫描时间超过 3s。
02
上报策略用「增量 + 变化阈值」
测点变化超过量程 0.5% 才上报，静止值 30s 心跳一次。以 1 万点产线为例，带宽可从 12Mbps 降到约 7Mbps，压缩率约 40%，边缘 CPU 占用稳定在 25% 以内。
03
把刷新周期分层，而不是全局统一
关键 KPI 取 1000ms，趋势图取 2000ms，拓扑与资产清单取 60000ms。分层后主线程长任务（>50ms）数量可下降 60% 以上，滚动不再掉帧。
04
交互动效只服务状态变化
告警出现用 200ms 高亮淡入，数据更新用数字滚动而非整块闪烁；尊重系统「减弱动态效果」设置，动画降级为直接切变。动画时长统一取 150–450ms，过渡曲线统一，避免忽快忽慢。
05
移动端先做降级，再谈还原
窄屏下分屏改为上下堆叠，影像高度压到 40vh 以内；表格转卡片或横向滚动；点按区不小于 44×44px。先在 320px 宽验证无横向溢出，再回推大屏布局。
06
为断网和脏数据准备兜底路径
离线时显示明确角标并把数据源切到本地缓存；缺失值不填 0，用虚线占位；时间戳冲突以设备侧为准。验收标准：断网 30 分钟后恢复，补传数据完整率 ≥99.9%，无重复计数。
场景切换同一套分屏底座，三种运行节奏
用标签页对比不同业务场景下的配置差异，切换后内容即刻呈现，无需等待。
产线监控 · 高频率、强实时
振动与温度双通道采样，异常波动在 1s 内上屏。左栏趋势、右栏设备热力图，告警卡片支持一键派单。
1sKPI 刷新周期
≤180ms端到端时延
0.5%变化上报阈值
3 步告警到派单闭环
园区能耗 · 低频聚合、看趋势
以 15 分钟粒度汇聚电、水、气读数，分屏左侧看同比环比，右侧看楼层热力分布，重点识别夜间基载异常。
15min聚合粒度
-12%典型节能区间
24h对比窗口
6 类能耗因子拆解
远程巡检 · 影像为主、标注为辅
AR 悬浮标签叠加在巡检画面上，巡检员按预设路线逐点确认，异常点自动生成工单并回传定位。
≤30cm室内定位误差
45min单次巡检时长
100%点位留痕率
-38%排障耗时
核心能力支撑分屏体验的 5 项底座能力
每项能力都标注了可验收的量化指标，避免仅停留在概念层。
增强现实标注
锚点绑定设备主数据，画面缩放与换机位时标注不漂移，室内误差 ≤30cm。
±0.5℃ 读数偏差
边缘增量上报
变化阈值触发上报，静止值心跳保活，带宽压缩约 40%，本地留存 7 天。
-40% 带宽占用
分屏排版布局
50:50 与 60:40 两套栅格，窄屏自动堆叠，保证任意宽度下无横向溢出。
320px 最小适配宽
用户体验优化
告警到派单 3 步闭环，动效只服务状态变化，尊重系统减弱动态设置。
-38% 排障耗时