近年來，資料視覺化大屏的出現，掀起一番又一番的浪潮，眾多企業主紛紛想要打造屬於自己的 “酷炫吊炸天” 的霸道總裁大屏駕駛艙。今天為大家分享的是 【物聯網平臺數據統計】。
話不多說，開始分享乾貨，歡迎討論！
首先看動態效果圖 ：
再看實時分片資料圖：
一、 確定需求方案
1、確定產品上線部署的螢幕LED解析度
1280px*768px，F11全屏後佔滿整屏且無捲軸；其它解析度螢幕均可自適應顯示。
2、功能模組
平臺數據分佈
線上 離線
裝置線上情況
接入工廠型別
監控列表
告警資訊
報警記錄
資料記錄
3、部署方式
基於免安裝可執行程式：
支援Windows、Linux、Mac等各種主流作業系統；將可執行程式exe複製到伺服器上即可，無需其它環境依賴；
觀看方式：
既可在伺服器上直接觀看程式介面，也可遠端使用瀏覽器開啟播放，支援Chrome瀏覽器、360瀏覽器等主流瀏覽器。
二、整體架構設計
前端基於Echarts開源庫設計，使用WebStorm編輯器；
後端基於Python Web實現，使用Pycharm編輯器；
資料傳輸格式：JSON；
資料來源型別：目前已支援PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，還可以定製HTTP API介面方式或其它型別資料庫。
資料更新方式：摒棄了前端頁面定時拉取的方式（這種方式帶來嚴重的資源浪費），採用後端資料實時更新，實時推送到前端展示；
三、編碼實現 （基於篇幅及可讀性考慮，此處展示部分關鍵程式碼）
1.前端html程式碼
<！DOCTYPE html>
裝置線上情況 接入工廠型別 平臺數據分佈| 監控列表 | |||||
|---|---|---|---|---|---|
| {{ item。categories }} | |||||
| {{ y。company }} | {{ y。dtuCnt }} | {{ y。plcCnt }} | {{ y。dataCnt }} | {{ y。alarm }} |
告警資訊
{{alarm。alarm}}條故障資訊
{{alarm。fault}}條 報警記錄- {{ item。msg }}
資料記錄| 欄位 | 欄位 | 欄位 | 欄位 | 欄位 |
|---|---|---|---|---|
| 欄位 | 欄位 | 欄位 | 欄位 | 欄位 |
|---|---|---|---|---|
2.前端JS程式碼
var scn_data={ alarm：{alarm：10，fault：10}， dtu：{ on：150，off：150}， plc：{on：10，off：10}， industy：{v1：10，v2：11，v3：12，v3：14，v4：15，v5：17，v6：18}， online：{v1：10，v2：11，v3：12，v3：14，v4：15，v5：17，v6：18}， almMsg：［{msg：“2017年5月4日市A區12#機器氣壓過高報警”}， {msg：“上海市A區12#機器氣壓過高報警”}， {msg：“江蘇省12#機器氣壓過高報警”}， {msg：“河南省鄭州市B區12#機器氣壓過高報警”}， {msg：“河南省鄭州市B區12#機器氣壓過高報警”}， {msg：“河南省鄭州市B區12#機器氣壓過高報警”}， {msg：“河南省鄭州市B區12#機器氣壓過高報警”} ］， msgCnt：［{msg：100，alm：20}， {msg：200，alm：40}， {msg：300，alm：50}， {msg：400，alm：35}， {msg：400，alm：40}， {msg：400，alm：11}， {msg：400，alm：66}， {msg：100，alm：77}， {msg：200，alm：88}， {msg：300，alm：22}， {msg：400，alm：99}， {msg：400，alm：100}， {msg：400，alm：111}， {msg：400，alm：222}， {msg：100，alm：333}， {msg：200，alm：11}， {msg：300，alm：33}， {msg：400，alm：55}， {msg：400，alm：77}， {msg：400，alm：90} ］， map：［{area：“山東”，cnt：20}， {area：“浙江”，cnt：40}， {area：“江蘇”，cnt：50}， {area：“遼寧”，cnt：50} ］， factoryHeader：［ {“categories”：“單位名”}， {“categories”：“閘道器數”}， {“categories”：“裝置數”}， {“categories”：“資料點”}， {“categories”：“報警”}， {“categories”：“操作”} ］， factory：［ {“company”：“寶鋼”，“dtuCnt”： 200， “plcCnt”： 400，“dataCnt”： 5000，“alarm”： “無”}， {“company”：“造紙廠”，“dtuCnt”： 3000，“plcCnt”： 2000，“dataCnt”： 1000，“alarm”： “無”}， {“company”：“鍋爐廠”，“dtuCnt”： 1500，“plcCnt”： 1000，“dataCnt”： 500，“alarm”： “無”}， {“company”：“鍋爐二廠”，“dtuCnt”： 1500，“plcCnt”： 300，“dataCnt”： 1200，“alarm”： “溫度上限報警>120”}， {“company”：“鍋爐三廠”，“dtuCnt”： 1000，“plcCnt”： 800，“dataCnt”： 200，“alarm”： “無”}， {“company”：“鍋爐三廠”，“dtuCnt”： 1000，“plcCnt”： 800，“dataCnt”： 200，“alarm”： “無”}， {“company”：“鍋爐三廠”，“dtuCnt”： 1000，“plcCnt”： 800，“dataCnt”： 200，“alarm”： “無”}， {“company”：“鍋爐三廠”，“dtuCnt”： 1000，“plcCnt”： 800，“dataCnt”： 200，“alarm”： “無”}， {“company”：“鍋爐三廠”，“dtuCnt”： 1000，“plcCnt”： 800，“dataCnt”： 200，“alarm”： “無”}， {“company”：“鍋爐三廠”，“dtuCnt”： 1000，“plcCnt”： 800，“dataCnt”： 200，“alarm”： “無”} ］ }；var vm = new Vue（{ el： ‘#content’， data： scn_data， methods： { details： function（） { } }}）
3.後端python程式碼
import _threadimport sysfrom PyQt5。QtWidgets import *from PyQt5。QtCore import *from PyQt5。QtWebEngineWidgets import QWebEngineViewfrom pyecharts import Geofrom PyQt5。QtCore import QUrlfrom win32api import GetSystemMetricsfrom PyQt5 import QtGuifrom httpserver import *from asyncJson import * class MainWindow（QMainWindow）： def __init__（self， *args， **kwargs）： super（）。__init__（*args， **kwargs） self。loadfinished = False self。setWindowTitle（‘大屏展示’） self。showMaximized（） #全屏顯示 self。showFullScreen（） self。isFullScreen = True self。webview = WebEngineView（） self。webview。load（QUrl（index_url）） self。setCentralWidget（self。webview） QShortcut（QtGui。QKeySequence（“Escape”）， self， self。Esc） self。webview。loadFinished。connect（self。SetLoadFinished） _thread。start_new_thread（HttpServer， （）） _thread。start_new_thread（self。ChangeData， （）） def SetLoadFinished（self）： self。loadfinished = True #模擬重新整理資料 def ChangeData（self）： while 1： time。sleep（3） #頁面載入完畢再開始重新整理資料 if self。loadfinished == False ： continue change_all_json（） # change_chart_map（） try： self。webview。page（）。runJavaScript（“async_data（）”） except Exception as e： print（e） #按ESC全屏或縮小 def Esc（self）： if self。isFullScreen == True ： self。isFullScreen = False #不加這句的話，標題欄就看不到了 self。showNormal（） #設定固定寬高 self。setGeometry（GetSystemMetrics（0）/2， GetSystemMetrics（1）/2， 1280， 768） #再移動到螢幕中央 screen = QDesktopWidget（）。screenGeometry（） size = self。geometry（） self。move（（screen。width（） - size。width（）） / 2， （screen。height（） - size。height（）） / 2） else： self。showFullScreen（） self。isFullScreen = True class WebEngineView（QWebEngineView）： windowList = ［］ # 重寫createwindow（） def createWindow（self， QWebEnginePage_WebWindowType）： new_webview = WebEngineView（） new_window = MainWindow（） new_window。setCentralWidget（new_webview） #new_window。show（） self。windowList。append（new_window） #注：沒有這句會崩潰！！！ return new_webview if __name__ == “__main__”： app = QApplication（sys。argv） w = MainWindow（） w。show（） sys。exit（app。exec_（））
四、上線執行
本次分享結束，歡迎討論！
感謝：本專案引用了網際網路大牛的前端程式碼，然後定製開發實現了後端伺服器，最終實現了視覺化大屏的完整方案。
