Qt編寫資料可視化大屏界面電子看闆系統

一、前言

目前大屏大資料可視化UI這塊非常火，趁熱也用Qt來實作一個，Qt這個一站式超大型GUI超市，沒有什麼他做不了的，大屏電子看闆當然也不在話下，有了QSS和QPainter這兩個無敵的工具組合，借用幾個Qt高手朋友的話來說，都是分分鐘。在整個系統的編寫過程中，發現數學知識真的還是蠻重要的，在重要的幾個算法點上，需要多次用到二進制一次方程才能搞定幾個算法，比如如何分組繪制柱狀圖。

二、文章導航

1. Qt編寫資料可視化大屏界面電子看闆1-布局方案 https://blog.csdn.net/feiyangqingyun/article/details/90141646
2. Qt編寫資料可視化大屏界面電子看闆2-配色方案 https://blog.csdn.net/feiyangqingyun/article/details/90166379
3. Qt編寫資料可視化大屏界面電子看闆3-建立布局 https://blog.csdn.net/feiyangqingyun/article/details/90182568
4. Qt編寫資料可視化大屏界面電子看闆4-布局另存 https://blog.csdn.net/feiyangqingyun/article/details/90229094
5. Qt編寫資料可視化大屏界面電子看闆5-恢複布局 https://blog.csdn.net/feiyangqingyun/article/details/90257468
6. Qt編寫資料可視化大屏界面電子看闆6-窗體打開關閉 https://blog.csdn.net/feiyangqingyun/article/details/90287251
7. Qt編寫資料可視化大屏界面電子看闆7-窗體浮動 https://blog.csdn.net/feiyangqingyun/article/details/90311423
8. Qt編寫資料可視化大屏界面電子看闆8-調整間距 https://blog.csdn.net/feiyangqingyun/article/details/90321253
9. Qt編寫資料可視化大屏界面電子看闆9-曲線效果 https://blog.csdn.net/feiyangqingyun/article/details/90348954
10. Qt編寫資料可視化大屏界面電子看闆10-改造QCustomPlot https://blog.csdn.net/feiyangqingyun/article/details/90402671
11. Qt編寫資料可視化大屏界面電子看闆11-自定義控件 https://blog.csdn.net/feiyangqingyun/article/details/90415449
12. Qt編寫資料可視化大屏界面電子看闆12-資料庫采集 https://blog.csdn.net/feiyangqingyun/article/details/90445667

三、電子看闆介紹

電子看闆是目視化管理的一種表現形式，即對資料的狀況一目了然地表現，主要是對于管理項目，它通過利用形象直覺而又色彩适宜的各種視覺感覺資訊來組織現場生産活動，目視管理依據人類的生理特征，在生産現場充分利用信号燈、辨別牌、符号顔色等方式來發出視覺信号，鮮明準确地刺激人的神經末梢，快速地傳遞資訊，形象直覺地将潛在的問題和浪費現象都顯現出來。以便任何人都可以及時掌握管理現狀和必要的情報，進而能夠快速制定并實施應對措施。是以，管理看闆是發現問題、解決問題的非常有效且直覺的手段，是優秀的現場管理必不可少的工具之一。（這段是複制的，哈哈！）

四、功能特點

1. 采用分層設計，整體總共分三級界面，一級界面是整體布局，二級界面是單個功能子產品，三級界面是單個控件。
2. 子控件包括餅圖+圓環圖+曲線圖+柱狀圖+柱狀分組圖+橫向柱狀圖+橫向柱狀分組圖+合格率控件+百分比控件+進度控件+裝置狀态面闆+表格資料+地圖控件+視訊控件等。
3. 二級界面可以自由拖動懸浮，支援最小化最大化關閉，響應輕按兩下自定義标題欄。
4. 資料源支援模拟資料（預設）、資料庫采集、序列槽通信（需定制）、網絡通信（需定制）、網絡請求等，可自由設定每個子界面的采集間隔即資料重新整理頻率。
5. 采用純QWidget編寫，親測Qt4.6到Qt5.15任意版本，理論上支援後續其他Qt版本，親測win+linux+mac+uos+kylin等系統，效果完美，同時還支援嵌入式linux比如樹莓派、香橙派、全志、imx6等。
6. 同時內建了自定義控件+qchart餅圖+echart地圖功能。
7. 内置多套配色風格樣式（紫色、藍色、深藍、黑色），預設紫色，支援任何分辨率。
8. 可設定标題+目标分辨率+布局方案，啟動立即應用。
9. 可設定主背景顔色+面闆顔色+十字線遊标顔色。
10. 可設定多條曲線顔色，沒有設定顔色的情況下内置15套精美顔色随機應用。
11. 可設定标題欄背景顔色+文字顔色。
12. 可設定曲線圖表背景顔色+文字顔色+網格顔色。
13. 可設定正常顔色+警戒顔色+報警顔色+禁用顔色+百分比進度顔色。
14. 可分别設定各種字型大小，比如全局+軟體名稱+标題欄+子标題欄+加粗标簽等。
15. 可設定标題欄高度+表頭高度+行高度。
16. 曲線支援遊标+懸停高亮資料點和顯示值，柱狀圖支援頂部（可設定頂端+上部+中間+底部）顯示資料，全部自适應計算位置。
17. 主界面直接滑鼠右鍵切換布局+配色方案+關閉開啟某個二級窗體。
18. 自動記憶所有子視窗的大小和位置，下次啟動立即應用。
19. 動态加載布局方案菜單，可以動态建立布局、恢複布局、儲存布局、另存布局等，使用者可以制造任意布局。
20. 二級窗體，輕按兩下從主窗體分離出來浮動，可以自由調整大小。再次輕按兩下标題欄最大化，再次輕按兩下還原，相當于子子產品也可以全屏顯示作為一個大屏，這樣就可以一個大屏拓展出多個子大屏，放大檢視子子產品的資料詳情。
21. 每個子產品都可以自定義采集速度，如果是資料庫采集會自動排隊處理，後期還可以拓展每個子子產品都獨立的資料庫采集。
22. 提供系統設定視窗進行整體的配置參數設定。
23. 提供精美炫酷的大屏地圖子產品，包括靜态圖檔+閃爍效果+遷徙效果+世界地圖+區域地圖等，可指定點的經緯度坐标，識别單擊響應，可以做地圖跳轉等，每個點都可以不同的顔色和提示資訊，功能超牛逼！
24. 除了提供大屏系統外，還将每個子產品都做了獨立的子產品示例界面，每個子產品都可以獨立學習使用，裡面用到的控件也單獨做了控件示例界面，友善學習每個控件如何使用，考慮着實周到！
25. 超級詳細的開發和使用手冊，其中包括詳細的資料庫說明、子產品對照圖、控件對照圖、項目結構代碼說明、使用方法等！

五、配置檔案說明

（1）、基本配置參數

字段	描述	預設值
WorkMode	工作模式 timer-模拟資料 db-資料庫采集 tcp-網絡采集 http-post請求	db
MapStyle	中間地圖樣式 image-靜态圖檔 point-閃爍點 move-遷徙圖	point
Title	軟體标題，顯示在軟體中間頂部	數字化工廠資訊中心
Ratio	分辨率，目前無意義	4096*216
Layout	布局方案，每次切換布局方案以後都會儲存	完整布局
Theme	配色方案，每次切換配色方案以後都會儲存	紫色風格
VideoAddr	視訊流位址，視訊子產品播放的視訊位址	鳳凰衛視
AutoRun	是否開機啟動	false
MoveEnable	子產品是否可以拖動，啟用以後子產品可以任意拖動	true
CutLeftBottom	底部布局左側是否切掉
CutRightBottom	底部布局右側是否切掉
StaticLine	是否繪制靜态定位線，為假則繪制遊标十字線
ShowPercent	Y軸是否顯示百分比
StepY	Y軸大尺度步長	6
CursorHideTime	使用者不操作滑鼠自動隐藏滑鼠的時間間隔，機關秒	5

（2）、顔色配置參數

ColorMainBg	主背景顔色	QColor(4, 7, 38)
ColorPanelBg	面闆背景顔色	QColor(26, 29, 60)
ColorLine	十字線定位線顔色	QColor(255, 0, 0)
ColorLine1	線條1顔色	QColor(0, 176, 180)
ColorLine2	線條2顔色	QColor(32, 159, 223)
ColorLine3	線條3顔色	QColor(255, 192, 0)
ColorTitleBg	标題欄背景顔色	QColor(48, 48, 85)
ColorTitleText	标題欄文字顔色	QColor(255, 255, 255)
ColorChartBg	曲線圖表背景顔色	QColor(38, 41, 74)
ColorChartText	曲線圖表文字顔色	QColor(250, 250, 250)
ColorChartGrid	曲線圖表網格顔色	QColor(180, 180, 180)
ColorOk	正常顔色
ColorLow	警戒顔色
ColorAlarm	報警顔色	QColor(214, 77, 84)
ColorDisable	禁用背景顔色	QColor(210, 210, 210)
ColorPercent	環形百分比背景顔色	QColor(0, 254, 254)

（3）、字型和尺寸配置參數

MainFont	全局字号	微軟雅黑，12
NameFont	軟體名稱字号	19
LabFont	加粗标簽字号	12
DeviceFont	裝置面闆字号
SubTitleFont	子產品子标題欄字号	13
TitleFont	子產品标題欄字号	15
TitleHeight	子產品标題欄高度	23
HeadHeight	表格表頭高度	28
RowHeight	表格行高度	25

（4）、采集速度配置參數

IntervalModule1	子產品1采集間隔	5000
IntervalModule2	子產品2采集間隔
IntervalModule3	子產品3采集間隔
IntervalModule4	子產品4采集間隔
IntervalModule5	子產品5采集間隔
IntervalModule6	子產品6采集間隔
IntervalModule7	子產品7采集間隔
IntervalModule8	子產品8采集間隔

（5）、本地資料庫配置參數

LocalDBType	本地資料庫類型，Sqlite、Mysql等	Mysql
LocalDBIP	本地資料庫主機位址	127.0.0.1
LocalDBPort	本地資料庫端口	3306
LocalDBName	本地資料庫名稱	bigscreen
LocalUserName	本地資料庫使用者名	root
LocalUserPwd	本地資料庫密碼

六、特别說明

1. 可執行檔案同級檔案夾有layout+layout_1440+layout_1920，程式預設自動識别分辨率并加載對應的布局檔案夾，比如1920分辨率則從layout_1920檔案夾加載布局，并作為整體布局檔案夾。
2. 程式預設是模拟資料，如果需要從資料庫采集則修改配置檔案WorkMode=db即可。
3. 如果發現布局拖動亂了，可以直接滑鼠右鍵選擇恢複布局即可，在儲存布局以前。
4. 在中間地圖子產品滑鼠右鍵可以彈出菜單，切換布局和配色方案等。
5. 在子產品的标題欄上右鍵可以彈出預設的dock菜單，用來顯示和隐藏各子產品。
6. 軟體關閉過程中會自動儲存布局，下次啟動以後自動應用。
7. 如果使用的預設的預設的配色方案比如紫色風格，則配置檔案中的顔色全部無效，會自動應用代碼中的顔色，如果需要啟用自定義的顔色，則将配置檔案的 Theme=\x81ea\x5b9a\x4e49\x98ce\x683c 即可。此時打開軟體會應用配置檔案中的顔色。
8. 右鍵菜單可以截圖儲存，預設命名為 配色方案名稱_布局方案名稱.png 儲存在snap目錄下。
9. 如果是XP系統請先執行fixff.cmd，用來修複ffmpeg在XP上不可用的BUG。
10. 在二級窗體的标題欄上右鍵彈出子產品菜單，可以對單個子產品打開關閉，其他地方右鍵全局菜單。
11. 體驗位址：https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取碼：01jf 檔案名：bin_bigscreen.zip。
12. 會不定期更新程式，歡迎各位提出批評和建議。

七、布局方案+配色方案

八、子產品運作圖