一、前言

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

二、文章導(dǎo)航

文章鏈接

1-布局方案	https://qtchina.blog.csdn.net/article/details/90141646
2-配色方案	https://qtchina.blog.csdn.net/article/details/90166379
3-新建布局	https://qtchina.blog.csdn.net/article/details/90182568
4-布局另存	https://qtchina.blog.csdn.net/article/details/90229094
5-恢復(fù)布局	https://qtchina.blog.csdn.net/article/details/90257468
6-窗體打開關(guān)閉	https://qtchina.blog.csdn.net/article/details/90287251
7-窗體浮動	https://qtchina.blog.csdn.net/article/details/90311423
8-調(diào)整間距	https://qtchina.blog.csdn.net/article/details/90321253
9-曲線效果	https://qtchina.blog.csdn.net/article/details/90348954
10-改造QCustomPlot	https://qtchina.blog.csdn.net/article/details/90402671
11-自定義控件	https://qtchina.blog.csdn.net/article/details/90415449
12-數(shù)據(jù)庫采集	https://qtchina.blog.csdn.net/article/details/90445667
13-基礎(chǔ)版本	https://qtchina.blog.csdn.net/article/details/103334033
14-標(biāo)準(zhǔn)曲線圖	https://qtchina.blog.csdn.net/article/details/119631356
15-曲線面積圖	https://qtchina.blog.csdn.net/article/details/119666948
16-標(biāo)準(zhǔn)柱狀圖	https://qtchina.blog.csdn.net/article/details/119771903
17-柱狀堆積圖	https://qtchina.blog.csdn.net/article/details/119837489
18-柱狀分組圖	https://qtchina.blog.csdn.net/article/details/119881871
19-橫向柱狀圖	https://qtchina.blog.csdn.net/article/details/119944862
20-橫向分組圖	https://qtchina.blog.csdn.net/article/details/119967158
21-數(shù)據(jù)轉(zhuǎn)曲線	https://qtchina.blog.csdn.net/article/details/119980732
22-平滑曲線圖	https://qtchina.blog.csdn.net/article/details/120052833

三、電子看板介紹

電子看板是目視化管理的一種表現(xiàn)形式，即對數(shù)據(jù)的狀況一目了然地表現(xiàn)，主要是對于管理項目，它通過利用形象直觀而又色彩適宜的各種視覺感知信息來組織現(xiàn)場生產(chǎn)活動，目視管理依據(jù)人類的生理特征，在生產(chǎn)現(xiàn)場充分利用信號燈、標(biāo)識牌、符號顏色等方式來發(fā)出視覺信號，鮮明準(zhǔn)確地刺激人的神經(jīng)末梢，快速地傳遞信息，形象直觀地將潛在的問題和浪費現(xiàn)象都顯現(xiàn)出來。以便任何人都可以及時掌握管理現(xiàn)狀和必要的情報，從而能夠快速制定并實施應(yīng)對措施。因此，管理看板是發(fā)現(xiàn)問題、解決問題的非常有效且直觀的手段，是優(yōu)秀的現(xiàn)場管理必不可少的工具之一。（這段是復(fù)制的，哈哈！）

四、功能特點

采用分層設(shè)計，整體總共分三級界面，一級界面是整體布局，二級界面是單個功能模塊，三級界面是單個控件。

子控件包括餅圖、圓環(huán)圖、曲線圖、柱狀圖、柱狀分組圖、橫向柱狀圖、橫向柱狀分組圖、合格率控件、百分比控件、進(jìn)度控件、設(shè)備狀態(tài)面板、表格數(shù)據(jù)、地圖控件、視頻控件等。

二級界面可以自由拖動懸浮，支持最小化隱藏、最大化關(guān)閉、響應(yīng)雙擊自定義標(biāo)題欄。

數(shù)據(jù)源支持模擬數(shù)據(jù)（默認(rèn)）、數(shù)據(jù)庫采集、串口通信（需定制）、網(wǎng)絡(luò)通信（需定制）、網(wǎng)絡(luò)請求等，可自由設(shè)定每個子界面的采集間隔即數(shù)據(jù)刷新頻率。

采用純QWidget編寫，親測Qt4.6到Qt6.2任意版本，理論上支持后續(xù)其他Qt版本。

超強跨平臺，親測windows、linux、mac、國產(chǎn)uos、國產(chǎn)銀河麒麟kylin等系統(tǒng)，效果完美，同時還支持嵌入式linux比如樹莓派、香橙派、全志、imx6等。

同時集成了自定義控件、qchart餅圖、echart地圖等功能。

內(nèi)置多套配色風(fēng)格樣式（紫色、藍(lán)色、深藍(lán)、黑色），默認(rèn)紫色，自適應(yīng)任意分辨率。

可設(shè)置系統(tǒng)標(biāo)題、目標(biāo)分辨率、布局方案，啟動立即應(yīng)用。

可設(shè)置主背景顏色、面板顏色、十字線游標(biāo)顏色等各種顏色。

可設(shè)置多條曲線不同顏色，沒有設(shè)置顏色的情況下內(nèi)置多套精美顏色隨機應(yīng)用。

可設(shè)置標(biāo)題欄背景顏色、文字顏色。

可設(shè)置曲線圖表背景顏色、文字顏色、網(wǎng)格顏色。

可設(shè)置正常顏色、警戒顏色、報警顏色、禁用顏色、百分比進(jìn)度顏色。

可分別設(shè)置各種字體大小，比如全局字體、軟件名稱、標(biāo)題欄、子標(biāo)題欄、加粗標(biāo)簽等。

可設(shè)置標(biāo)題欄高度、表頭高度、行高度。

曲線支持游標(biāo)、定位線、懸停高亮數(shù)據(jù)點、懸停顯示值。

柱狀圖支持頂部（可設(shè)置頂端、上部、中間、底部）顯示數(shù)據(jù)，全部自適應(yīng)計算位置。

支持平滑曲線，內(nèi)置多種平滑曲線算法，還支持面積圖平滑。

面積圖填充顏色可選多種規(guī)則比如單色透明度填充、透明度漸變填充等。

數(shù)據(jù)庫支持sqlite、mysql、postgresql、oracle、國產(chǎn)人大金倉等數(shù)據(jù)庫。

主界面直接鼠標(biāo)右鍵切換布局、配色方案、關(guān)閉開啟某個二級窗體。

自動記憶所有子窗口的大小和位置，下次啟動立即應(yīng)用。

動態(tài)加載布局方案菜單，可以動態(tài)新建布局、恢復(fù)布局、保存布局、另存布局等，用戶可以制造任意布局。

二級窗體，雙擊從主窗體分離出來浮動，可以自由調(diào)整大小。再次雙擊標(biāo)題欄最大化，再次雙擊還原。

子模塊也可以全屏顯示作為一個大屏，這樣就可以一個大屏拓展出多個子大屏，放大查看子模塊的數(shù)據(jù)詳情，適用多屏展示。

每個模塊都可以自定義采集速度，如果是數(shù)據(jù)庫采集會自動排隊處理，后期還可以拓展每個子模塊都獨立的數(shù)據(jù)庫采集。

提供系統(tǒng)設(shè)置模塊進(jìn)行整體的配置參數(shù)設(shè)置，效果立即應(yīng)用。

提供精美炫酷的大屏地圖模塊，包括靜態(tài)圖片、閃爍效果、遷徙效果、世界地圖、區(qū)域地圖等，可指定點的經(jīng)緯度坐標(biāo)，識別單擊響應(yīng)，可以做地圖跳轉(zhuǎn)等，每個點都可以不同的顏色和提示信息。

除了提供大屏系統(tǒng)外，還將每個模塊都做了獨立的模塊示例界面，每個模塊都可以獨立學(xué)習(xí)使用，里面用到的控件也單獨做了控件示例界面，方便學(xué)習(xí)每個控件如何使用。

非常詳細(xì)的開發(fā)和使用手冊，其中包括數(shù)據(jù)庫說明、模塊對照圖、控件對照圖、項目結(jié)構(gòu)、代碼說明（精確到每個類）、演示demo、使用方法等。

五、配置文件說明

（1）、基本參數(shù)

字段描述默認(rèn)值

WorkMode	工作模式 timer-模擬數(shù)據(jù) db-數(shù)據(jù)庫采集 tcp-網(wǎng)絡(luò)采集 http-post請求	db
MapStyle	中間地圖樣式 image-靜態(tài)圖片 point-閃爍點 move-遷徙圖	point
Title	軟件標(biāo)題，顯示在軟件中間頂部	數(shù)字化工廠信息中心
Ratio	分辨率，目前無意義	4096*216
Layout	布局方案，每次切換布局方案以后都會保存	完整布局
Theme	配色方案，每次切換配色方案以后都會保存	紫色風(fēng)格
VideoAddr	視頻流地址，視頻模塊播放的視頻地址	鳳凰衛(wèi)視
AutoRun	是否開機啟動	false
MoveEnable	模塊是否可以拖動，啟用以后模塊可以任意拖動	true
CutLeftBottom	底部布局左側(cè)是否切掉	true
CutRightBottom	底部布局右側(cè)是否切掉	true
StaticLine	是否繪制靜態(tài)定位線，為假則繪制游標(biāo)十字線	true
ShowPercent	Y軸是否顯示百分比	true
StepY	Y軸大尺度步長	6
CursorHideTime	用戶不操作鼠標(biāo)自動隱藏鼠標(biāo)的時間間隔，單位秒	5

（2）、顏色配置參數(shù)

字段描述默認(rèn)值

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	標(biāo)題欄背景顏色	QColor(48, 48, 85)
ColorTitleText	標(biāo)題欄文字顏色	QColor(255, 255, 255)
ColorChartBg	曲線圖表背景顏色	QColor(38, 41, 74)
ColorChartText	曲線圖表文字顏色	QColor(250, 250, 250)
ColorChartGrid	曲線圖表網(wǎng)格顏色	QColor(180, 180, 180)
ColorOk	正常顏色	QColor(0, 176, 180)
ColorLow	警戒顏色	QColor(255, 192, 0)
ColorAlarm	報警顏色	QColor(214, 77, 84)
ColorDisable	禁用背景顏色	QColor(210, 210, 210)
ColorPercent	環(huán)形百分比背景顏色	QColor(0, 254, 254)

（3）、字體和尺寸配置參數(shù)

字段描述默認(rèn)值

MainFont	全局字號	微軟雅黑，12
NameFont	軟件名稱字號	19
LabFont	加粗標(biāo)簽字號	12
DeviceFont	設(shè)備面板字號	12
SubTitleFont	模塊子標(biāo)題欄字號	13
TitleFont	模塊標(biāo)題欄字號	15
TitleHeight	模塊標(biāo)題欄高度	23
HeadHeight	表格表頭高度	28
RowHeight	表格行高度	25

（4）、采集速度配置參數(shù)

字段描述默認(rèn)值

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

（5）、本地數(shù)據(jù)庫配置參數(shù)

字段描述默認(rèn)值

LocalDBType	本地數(shù)據(jù)庫類型，Sqlite、Mysql等	Mysql
LocalDBIP	本地數(shù)據(jù)庫主機地址	127.0.0.1
LocalDBPort	本地數(shù)據(jù)庫端口	3306
LocalDBName	本地數(shù)據(jù)庫名稱	bigscreen
LocalUserName	本地數(shù)據(jù)庫用戶名	root
LocalUserPwd	本地數(shù)據(jù)庫密碼	root

六、特別說明

可執(zhí)行文件同級文件夾有l(wèi)ayout+layout_1440+layout_1920，程序默認(rèn)自動識別分辨率并加載對應(yīng)的布局文件夾，比如1920分辨率則從layout_1920文件夾加載布局，并作為整體布局文件夾。

程序默認(rèn)是模擬數(shù)據(jù)，如果需要從數(shù)據(jù)庫采集則修改配置文件WorkMode=db即可。

如果發(fā)現(xiàn)布局拖動亂了，可以直接鼠標(biāo)右鍵選擇恢復(fù)布局即可，在保存布局以前。

在中間地圖模塊鼠標(biāo)右鍵可以彈出菜單，切換布局和配色方案等。

在模塊的標(biāo)題欄上右鍵可以彈出默認(rèn)的dock菜單，用來顯示和隱藏各模塊。

軟件關(guān)閉過程中會自動保存布局，下次啟動以后自動應(yīng)用。

如果使用的默認(rèn)的默認(rèn)的配色方案比如紫色風(fēng)格，則配置文件中的顏色全部無效，會自動應(yīng)用代碼中的顏色，如果需要啟用自定義的顏色，則將配置文件的 Theme=\x81ea\x5b9a\x4e49\x98ce\x683c 即可。此時打開軟件會應(yīng)用配置文件中的顏色。

右鍵菜單可以截圖保存，默認(rèn)命名為 配色方案名稱_布局方案名稱.png 保存在snap目錄下。

如果是XP系統(tǒng)請先執(zhí)行fixff.cmd，用來修復(fù)ffmpeg在XP上不可用的BUG。

在二級窗體的標(biāo)題欄上右鍵彈出模塊菜單，可以對單個模塊打開關(guān)閉，其他地方右鍵全局菜單。

體驗地址：https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取碼：01jf 文件名：bin_bigscreen.zip。

會不定期更新程序，歡迎各位提出批評和建議。

七、布局方案+配色方案

八、模塊運行圖

總結(jié)

以上是生活随笔為你收集整理的Qt编写数据可视化大屏界面电子看板系统的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。