工业物联网可视化大屏如何搭建？实时数据+告警+地图完整方案

物联网大屏核心：IoT平台输出标准化数据接口 → 大屏前端组件渲染 → 布局、样式、交互、告警、适配。

常见场景：智慧电力、智慧水务、智慧路灯、工厂能耗、机房监控、智慧畜牧。

> 核心链路：设备 → 网关 → IoT平台(时序库/关系库) → API/websocket → 可视化大屏。

> 数据来源：MQTT消息、设备属性、时序历史数据、告警数据、设备统计数据。

一、两种实现路线

路线A：IoT平台自带大屏(零代码/低代码，快速落地)

适用：项目工期短，不需要深度定制，私有化/公有云IoT平台

代表：ThingsBoard、JetLinks、阿里云IoT大屏、移动OneNET可视化

- 优点：不用写前后端代码;数据源直接绑定平台内设备、物模型;自带地图、仪表盘、柱状图、告警组件;支持自动刷新;支持导出部署。

- 缺点：样式自由度有限，复杂定制化图表、特殊动画难改;部分开源版本高级组件受限。

- 流程：

1. IoT平台已经完成设备接入、物模型、时序数据存储;

2. 打开可视化/仪表盘模块，新建大屏;

3. 拖拽组件：数字卡片、折线图、柱状图、饼图、地图、告警列表、设备状态;

4. 组件绑定数据源：选择设备属性、时序测点、告警统计;

5. 调整布局、配色、标题，设置自动刷新间隔;

6. 全屏展示，支持浏览器、投屏。

路线B：自研大屏(前后端分离，高度定制，项目常用)

适用：需要定制UI、集成自有业务系统、多页面复杂大屏项目

技术栈：

- 前端：Vue3 + ECharts / Apache ECharts GL(图表、地图)、DataV(大屏组件库，边框、装饰、数字翻牌器)

- 数据对接：`WebSocket`(实时数据) + HTTP Rest API(历史、统计数据)

- 后端：直接调用IoT平台开放API，做数据聚合;也可读取IoT平台导出到时序数据库(InfluxDB / TDengine)

> 最佳实践：前端不直接访问IoT平台，中间做一层业务服务做数据代理，避免密钥暴露、权限不可控。

流程：

1. IoT侧：设备数据入库(时序库存历史，业务库存告警、设备档案)

2. 中间服务层：封装接口，提供：实时测点、统计汇总、告警列表、设备在线数;websocket推送实时变更;

3. 前端大屏页面：布局排版，引入DataV大屏装饰组件 + ECharts图表;

4. 前端拉取/订阅接口数据，渲染图表;定时更新数字、状态;

5. 适配1920×1080 / 3840×2160投屏分辨率;全屏模式。

二、物联网大屏标准模块清单(通用模板)

一套完整IoT大屏一般包含这些板块，可以直接照着搭建：

1. 顶部标题栏

项目名称、时间日期、设备总览统计：设备总数、在线数、离线数、告警总数。

2. 地图区域(核心)

点位地图，标记设备位置;颜色区分在线/离线/告警;点击点位弹窗显示设备实时测点。

> 智慧路灯、水务、电力项目必用。

3. 关键指标卡片(数字翻牌)

实时数值：总功率、总用水量、温度、电压、累计能耗等，支持异常变色。

4. 趋势图表

- 折线图：温度、电压等测点历史趋势(小时/日/月)

- 柱状图：各区域统计对比

- 饼图：设备在线占比、告警类型占比

5. 告警信息面板

实时告警滚动列表：告警时间、设备名称、告警等级、告警内容;红色高亮严重告警。

6. 设备明细/区域统计

分区域分组统计;设备状态列表。

7. 底部信息栏

版权、版本信息。

三、数据对接关键要点(重点避坑)

1、实时数据怎么拿

- 方案1：WebSocket推送(推荐大屏)：中间服务订阅IoT平台MQTT，数据变化主动推送给前端，延迟低。

- 方案2：轮询HTTP接口：35秒定时请求接口;简单，但有延迟，服务器压力大，设备量大不推荐。

> ❌禁止：前端页面直接连接MQTT Broker，会暴露设备密钥，安全风险极高。

2、历史时序数据

IoT平台时序数据(TDengine/InfluxDB)，由后端聚合：按小时、按天聚合，不要前端拉取原始海量测点，否则页面卡顿。

3、告警数据

来源IoT平台告警引擎：告警等级、告警时间、设备ID;大屏只展示未恢复/最新告警。

4、性能问题(大屏常见坑)

1. 设备点位多，不要一次性返回全部数据;做分页、聚合。

2. 图表不要高频刷新，趋势图1030s刷新一次，实时数值25s刷新。

3. 大屏投屏4K分辨率，注意字体、图表自适应缩放。

4. 浏览器长时间投屏，内存泄漏：页面定时重置、销毁图表实例。

聚英云平台服务套餐

四、开源工具选型

ThingsBoard：开箱即用IoT可视化，自带大屏，私有化部署首选;内置全部图表、地图、告警组件;直接绑定物模型测点;

JetLinks：国产开源IoT平台，内置可视化仪表盘，适合国内工业物联网项目;

DataV Vue：自研大屏前端组件库，边框、数字翻牌器，做酷炫大屏UI;

ECharts：图表、地图核心库，自研大屏必选;

TDengine：时序数据库，存储海量物联网测点历史数据;

> 如果是多协议网关接入项目：优先用ThingsBoard做整套方案：网关转MQTT接入平台，平台直接拖拽生成大屏，不需要写代码快速交付原型。

五、最简落地步骤(项目实操)

1. 确认IoT平台已经完成多协议设备接入，物模型配置完成，数据正常上报、时序存储开启。

2. 确定大屏需求：需要哪些指标，哪些实时、哪些历史，是否需要地图，投屏分辨率。

3. 选型：快速交付选平台自带大屏;定制UI选自研DataV+ECharts。

4. 数据源配置：绑定设备测点、告警、统计指标。

5. 页面布局，调试刷新频率，告警颜色、阈值样式。

6. 压力测试：长时间投屏运行测试，检查卡顿、内存、数据延迟。

7. 部署：浏览器全屏访问，投屏展示。

六、常见坑总结

1. 把原始MQTT直接丢前端大屏：密钥泄露，绝对禁止。

2. 大屏拉取全量原始时序点，不做聚合，页面卡死。

3. 刷新频率设置过高，服务器压力暴涨。

4. 忽略离线、异常状态，大屏只展示正常数据。

5. 投屏分辨率适配问题，大屏组件错位。