一、前言

設備面板展示數據，相對于表格展示，可能在一個頁面中能夠展示的設備數據量少一些，但是有些用戶和場景，又需要這種面板的形式，可能更生動形象一些。尤其是經過這么些年的社會的毒打，我的原則是：用戶是上帝和大爺，盡量站在用戶的角度換位思考，只要是合理或者基本合理的需求，甚至說只要不是太過分，給錢就干。

其實這種面板展示數據的需求，從我剛開始工作的時候，編寫的軟件，就已經有了，比如一臺主機對應一個設備面板，除了顯示對應的數值（電壓值、電流值等），每個面板上還有按鈕提供用戶交互操作。對于通用的物聯網平臺來說，需要進行交互的場景很少，絕大部分都是用來展示采集到的數據，所以本系統的面板就顯示對于的數據，如果需要回控操作的話，雙擊對應面板彈出詳細面板信息進行操作。

設備面板幾個特色功能：

• 不同狀態不同顏色，正常采用全局樣式顏色、離線采用禁用顏色、低報黃色、高報紅色等。
• 雙擊分兩種，離線狀態下雙擊立即重新采集該設備，在線狀態下雙擊彈出詳情面板。
• 面板可選多種樣式，普通樣式，儀表樣式等。

二、功能特點

2.1 軟件模塊

設備監控模塊，包括數據監控（表格形式展示）、設備面板（面板形式展示）、地圖監控（地圖形式展示）、曲線監控（曲線形式展示）。

數據查詢模塊，包括報警記錄、運行記錄、操作記錄。

系統設置模塊，包括基本設置、端口管理、控制器管理、探測器管理、報警聯動、類型設置等。

其他設置模塊，包括用戶管理、地圖管理、位置調整、組態設計、設備調試等。

2.2 基礎功能

設備數據采集，支持串口、網絡，串口可設置串口號、波特率，網絡可設置IP地址、通訊端口。

每個端口支持采集周期時間，默認1秒鐘一個設備。

支持設置通訊超時次數，默認3次。

支持最大重連時間，用于重新讀取離線的設備。

控制器信息，能夠添加控制器名稱，選擇控制器地址、控制器型號，設置該控制器下面的探測器數量。

探測器信息，能夠添加位號、探測器型號、氣體種類、氣體符號、高報值、低報值、緩沖值、清零值、是否啟用、報警聲音、背景地圖、存儲周期、數值換算小數點位數、報警延時時間、報警的類型（HH,LL,HL）等。

類型管理可配置控制器型號、探測器型號、氣體種類、氣體符號等。

地圖支持導入和刪除，所有的探測器在地圖上的位置可自由拖動保存。

端口信息、控制器信息、探測器信息、類型信息、用戶信息等，都支持導入、導出、導出到excel、打印。

運行記錄、報警記錄、操作記錄，都支持多條件組合查詢，比如時間段、控制器、探測器等，所有記錄支持導出到excel/pdf和打印。

運行記錄、報警記錄、操作記錄都可刪除指定時間范圍內的數據。

系統設置可選擇對應表最大保存記錄數，自動清理早期數據，留出足夠的空間存儲重要的數據。

報警短信轉發，支持多個接收手機號碼，可設定發送間隔，比如即時發送或者6個小時發送一次所有的報警信息，短信內容過長，自動拆分多條短信。

報警郵件轉發，支持多個接收郵箱，可設定發送間隔，比如即時發送或者6個小時發送一次所有的報警信息，支持附件發送。

設置軟件的中文標題、英文標題、logo路徑、版權所有等。

開關設置開機運行、報警聲音、自動登錄、記住密碼等。

報警聲音可設置播放次數，界面風格樣式提供18套皮膚文件選擇。

用戶管理，包括用戶權限配置，不同用戶可以有不同模塊的權限。

用戶登錄和用戶退出，可以記住密碼和自動登錄，超過三次報錯提示并關閉程序。

四種監控模式，設備面板監控、地圖監控、表格數據監控、曲線數據監控，可自由切換，四種模式下都實時展示采集到的數據，報警閃爍等。

報警繼電器聯動，一個位號可以跨串口聯動多個模塊和繼電器號，支持多對多。

2.3 特色功能

通信協議支持modbus_com、modbus_tcp_rtu，后期拓展mqtt等協議。

數據源除了真實的硬件設備采集，還可選數據庫采集，這樣用戶可以安排其他程序員比如java程序員將前端采集好的數據放到數據庫，本系統直接從數據庫采集即可。數據庫采集模式可以作為通用的系統使用，更適合多人多系統協作。

智能跳過超時的設備，加快對在線設備的采集速度，當設備數量很多的時候尤其有用。

對智能跳過的超時的設備，在設定的重連時間自動采集一次，以便探測設備是否又重新上線。

每個探測器可控是否啟用，不啟用則不會采集，也不會在界面顯示，相當于運行階段臨時關閉。

探測器可設置緩沖值和報警延時時間，在該值附近波動產生的報警，不計入報警，只有持續處于報警值且超過報警延時時間才算真正報警，這樣可以規避很多波動導致的誤報。

探測器可設置存儲周期，按照設定的時間來存儲一條運行記錄，可以按照重要程度對重要性高的設定存儲周期短一些，不重要的設定大一些，這樣可以節省不少的存儲空間，也保證了重要的數據及時存儲。

探測器可設置清零值，在一些高精度高靈敏的設備可能出廠的時候默認值未必是0，需要設定清零值來表示初始值。

探測器可設置小數點，用于計算后的真實數據控制小數點點位顯示，相當于除以10、除以100、除以1000，這樣大部分的探測器數據直接通過小數點位設置控制真實換算后的值，極個別的需要特殊轉換的可以在通信協議中約定。

探測器報警的類型支持多種，有些設備是高于某個值高報，低于某個值低報，而有些設備是在最小值最大值范圍內是高報，低于最小值低報，高于最大值正常。這樣可以分情況處理，涵蓋各種報警類型。

原創數據導入、導出、打印機制，跨平臺不依賴任何組件，瞬間導出數據。

導出到excel的記錄支持所有excel、wps等表格文件版本，不依賴excel等軟件。

高報顏色、低報顏色、正常顏色、默認值顏色等，都可以自由設置。

支持云端數據同步，將本地采集到的數據實時同步到云端。

支持網絡轉發和網絡接收，網絡接收開啟后，軟件從udp接收數據進行解析。網絡轉發支持多個目標IP，這樣就實現了本地采集的軟件，自由將數據轉到客戶端，隨時查看采集到的數據。

自動記住用戶最后停留的界面以及其他配置信息，重啟后自動應用。

報警自動切換到對應的地圖，探測器按鈕閃爍，表格數據對應顏色顯示。

雙擊探測器圖標，彈出對應探測器詳細信息，可以根據需要定制回控操作。

數據庫支持多種，包括sqlite、mysql、sqlserver、postgresql、oracle、人大金倉等。

本地設備采集到的數據實時上傳到云端，以便手機APP或者web等其他方式提取。

自帶設備模擬工具，支持不同型號的多個設備數據模擬，同時還帶數據庫數據模擬，以便在沒有設備的時候測試數據。

標準modbus協議，各種控制器類型、探測器類型、種類、符號等全部自定義，非常靈活和強大，通信協議示例數據非常完整，通用各種modbus協議系統，適用于各種應用場景接入。

同時集成了串口通信、網絡通信、數據庫通信、數據導入導出打印、通信協議解析、界面UI、全局換膚等眾多組件和知識點，非常適合新手入門和進階。

支持xp、win7、win10、、win11、linux、mac、各種國產系統（UOS、中標麒麟、銀河麒麟等）、嵌入式linux等系統。

注釋完整，項目結構清晰，超級詳細完整的使用開發手冊，精確到每個代碼文件的功能說明，不斷持續迭代版本。

三、體驗地址

國內站點：https://gitee.com/feiyangqingyun

國際站點：https://github.com/feiyangqingyun

個人主頁：https://blog.csdn.net/feiyangqingyun

知乎主頁：https://www.zhihu.com/people/feiyangqingyun

產品主頁：https://blog.csdn.net/feiyangqingyun/article/details/97565652

在線文檔：https://feiyangqingyun.gitee.io/qwidgetdemo/iotsystem/

體驗地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取碼：o05q 文件名：bin_iotsystem.zip。

文章導航：https://qtchina.blog.csdn.net/article/details/121330922

四、效果圖

五、相關代碼

#include "frmdevicenode.h" #include "ui_frmdevicenode.h" #include "quihelper.h" #include "iconhelper.h" #include "dbquery.h" #include "deviceserver.h" #include "frmdevicecontrol.h"frmDeviceNode::frmDeviceNode(QWidget *parent) : QWidget(parent), ui(new Ui::frmDeviceNode) {ui->setupUi(this);this->initForm();this->initStyle();//this->initControl(); }frmDeviceNode::~frmDeviceNode() {delete ui; }bool frmDeviceNode::eventFilter(QObject *watched, QEvent *event) {//要區分在線離線的情況//在線雙擊則彈出具體詳情面板//離線雙擊則重連當前端口下的所有設備if (event->type() == QEvent::MouseButtonDblClick) {if (!online) {QString deviceName = this->property("deviceName").toString();QString portName = DbQuery::getPortName(deviceName);DeviceServer::Instance()->readValue(portName, 255, true);} else {QString positionID = this->property("positionID").toString();frmDeviceControl::Instance()->setPositionID(positionID);frmDeviceControl::Instance()->show();}}return QWidget::eventFilter(watched, event); }void frmDeviceNode::initForm() {value = 0;online = true;alarm = false;select = false;this->installEventFilter(this);QFont font;font.setPixelSize(QUIConfig::FontSize + 2);ui->labNodeInfo->setFont(font);ui->labNodeInfo->setFixedHeight(30);//設置圖形字體QFont iconFont = IconHelper::getIconFontAwesome();ui->labNodeNamex->setFont(iconFont);ui->labPositionIDx->setFont(iconFont);ui->labNodeTypex->setFont(iconFont);ui->labNodeValuex->setFont(iconFont);ui->labNodeNamex->setText(QChar(0xf132));ui->labPositionIDx->setText(QChar(0xf015));ui->labNodeTypex->setText(QChar(0xf124));ui->labNodeValuex->setText(QChar(0xf0c3));//通過弱屬性控制樣式ui->devicePanel2->setProperty("form", "panel");ui->deviceTitle1->setProperty("form", "panel");ui->devicePanel1->setProperty("form", "panel");ui->deviceTitle1->setProperty("flag", "paneltitle");ui->devicePanel1->setProperty("flag", "panelcontrol");//可以自行根據項目需要調整范圍值小數點等ui->gaugeSpeed->setUnit("");ui->gaugeSpeed->setPrecision(0);ui->gaugeSpeed->setDigitCount(3);ui->gaugeSpeed->setRange(0, 200);ui->gaugeSpeed->setValue(ui->gaugeSpeed->getMinValue()); }void frmDeviceNode::initStyle() {//根據不同的面板樣式隱藏對應的面板if (AppConfig::PanelStyle == 0) {ui->widget1->setVisible(true);ui->widget2->setVisible(false);} else if (AppConfig::PanelStyle == 1) {ui->widget1->setVisible(false);ui->widget2->setVisible(true);}QString textColor, bgColor;if (alarm) {//判斷低報還是高報QString positionID = this->property("positionID").toString();int index = DbData::NodeInfo_PositionID.indexOf(positionID);bool alarmLimit = DbData::NodeInfo_AlarmLimit.at(index);bool alarmUpper = DbData::NodeInfo_AlarmUpper.at(index);//bool alarmOther = DbData::NodeInfo_AlarmOther.at(index);//報警面板顏色textColor = "#EEEEEE";if (alarmLimit) {bgColor = AppConfig::ColorLimit;} else if (alarmUpper) {bgColor = AppConfig::ColorUpper;} else {bgColor = AppConfig::ColorOther;}//報警狀態下的選中將顏色加個透明度if (select) {QColor color(bgColor);bgColor = QString("rgba(%1,%2,%3,150)").arg(color.red()).arg(color.green()).arg(color.blue());}} else {//選中面板顏色textColor = online ? QUIConfig::TextColor : QUIConfig::BorderColor;bgColor = select ? QUIConfig::DarkColorStart : QUIConfig::NormalColorStart;}QStringList qss;//儀表盤中的數碼管禁用樣式qss << QString("QLCDNumber:disabled{background:%1;}").arg(QUIConfig::NormalColorStart);//儀表樣式中的節點信息標簽qss << QString("#labNodeInfo{color:%1;background:%2;}").arg(textColor).arg(alarm ? bgColor : QUIConfig::DarkColorEnd);//儀表樣式面板需要調整下顏色if (AppConfig::PanelStyle == 1 && alarm) {textColor = QUIConfig::TextColor;bgColor = select ? QUIConfig::DarkColorStart : QUIConfig::NormalColorStart;}//全局文字顏色qss << QString("*{color:%1;}GaugeSpeed{qproperty-textColor:%1;}").arg(textColor);//整體面板背景顏色qss << QString("#deviceTitle1,#devicePanel1,#devicePanel2{background:%1;}").arg(bgColor);this->setStyleSheet(qss.join("")); }void frmDeviceNode::initControl() {QString positionID = this->property("positionID").toString();QString nodeName = this->property("nodeName").toString();QString nodeType = this->property("nodeType").toString();QString nodeSign = this->property("nodeSign").toString();ui->labNodeName->setText("名稱: " + nodeName);ui->labPositionID->setText("位號: " + positionID);ui->labNodeType->setText("型號: " + nodeType);ui->labNodeValue->setText(QString("數值: %1 %2").arg(value).arg(nodeSign));ui->gaugeSpeed->setText(nodeSign);ui->gaugeSpeed->setValue(value);ui->labNodeInfo->setText(positionID + " -- " + nodeName); }void frmDeviceNode::setValue(float value) {this->value = value;QString nodeType = this->property("nodeType").toString();QString nodeSign = this->property("nodeSign").toString();//有兩個傳感器是開關量,數值是1 2顯示時用正常和異常代替if (nodeType == "SJ-0001" || nodeType == "JG-0001") {ui->labNodeValue->setText(QString("數值: %1").arg(value == 1 ? "正常" : "異常"));ui->gaugeSpeed->setValue(value == 1 ? ui->gaugeSpeed->getMinValue() : ui->gaugeSpeed->getMaxValue());} else {ui->labNodeValue->setText(QString("數值: %1 %2").arg(value).arg(nodeSign));ui->gaugeSpeed->setValue(value);} }void frmDeviceNode::setOnline(bool online) {if (this->online != online) {this->online = online;if (!online) {this->value = 0;this->alarm = false;this->select = false;}this->setEnabled(online);this->initStyle();this->initControl();} }void frmDeviceNode::setAlarm(bool alarm) {//可能由低報轉為高報所以這里不要做過濾判斷this->alarm = alarm;this->initStyle(); }void frmDeviceNode::setSelect(bool select) {if (this->select != select) {this->select = select;this->initStyle();} }

總結

以上是生活随笔為你收集整理的Qt编写物联网管理平台33-设备面板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。