物聯網大屏核心：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. 投屏分辨率適配問題，大屏組件錯位。