Qt/C++编写物联网管理平台2-界面框架_qt+mqtt实现嵌入式设备远程管理

一、前言

整体框架包括两个部分，一部分是UI界面框架，比如一级二级导航菜单按钮整体布局等，一部分是项目框架，上一篇文章说的是项目框架，这一篇文章来说界面框架，Qt做界面非常快速和高效，尤其是提供了可视化的界面设计，所见即所得，和大部分的开发环境类似，比如宇宙第一的VS，古老的VB，当年超级牛逼的dephi等，都是提供了可视化的所见即所得界面设计器，拖拖控件搞定，然后再去写对应的事件代码，最后编译打包发布。

Qt基本上是超大型一站式GUI超市框架，你要的各种控件都有，比如按钮、标签、文本框、下拉框、进度条等，应有尽有，就算没有的也可以自定义控件来实现，作为一个牛逼的GUI界面框架，要学好还是需要花一丢丢时间的，没有谁是一蹴而就的，做界面核心就两点：布局加配色，一般来说这是美工干的活，但是纵观国内大部分的程序员所在的公司，基本上没有美工，很可怜，需要程序员一个人全包所有的，从需求分析到详细设计到代码编写到界面设计到售后维护等。

Qt的布局提供了横向布局、垂直布局、表格布局、栅格布局，主要就这四种，学会了这几种布局其实还不够的，很多初学者会发现，达不到想要的效果，其实还要配合两个牛逼的东西，那就是控件本身的拉伸策略sizePolicy加上弹簧spacer，其中拉伸策略包括了四个要素，水平策略、垂直策略、水平伸展、垂直伸展。在一个完整的带界面的项目中，肯定需要用上这几个东西才能做出赏心悦目的界面。

Qt的配色当属QSS无敌了，这个东西据说是CSS2的子集，理论上包含了CSS2的所有写法，不过目前CSS3大行其道，QSS还不支持CSS3，估计要重写QSS解析器才行，代码量应该巨大，可能官方目前主推qml，未来估计也没有这个打算更新QSS使其支持CSS3，如果有一天支持CSS3了，那效果绝对宇宙第一了。我开源过3套QSS皮肤样式。

公众号：Qt实战，各种开源作品、经验整理、项目实战技巧，专注Qt/C++软件开发，视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发。

公众号：Qt入门和进阶，专门介绍Qt/C++相关知识点学习，帮助Qt开发者更好的深入学习Qt。多位Qt元婴期大神，一步步带你从入门到进阶，走上财务自由之路。

官方店：https://shop114595942.taobao.com/

二、功能特点

2.1 软件模块

1. 设备监控模块，包括数据监控（表格形式展示）、设备面板（面板形式展示）、地图监控（地图形式展示）、曲线监控（曲线形式展示）。
2. 数据查询模块，包括报警记录、运行记录、操作记录。
3. 系统设置模块，包括基本设置、端口管理、控制器管理、探测器管理、报警联动、类型设置等。
4. 其他设置模块，包括用户管理、地图管理、位置调整、组态设计、设备调试等。

2.2 基础功能

1. 设备数据采集，支持串口、网络，串口可设置串口号、波特率，网络可设置IP地址、通讯端口。
2. 每个端口支持采集周期时间，默认1秒钟一个设备。
3. 支持设置通讯超时次数，默认3次。
4. 支持最大重连时间，用于重新读取离线的设备。
5. 控制器信息，能够添加控制器名称，选择控制器地址、控制器型号，设置该控制器下面的探测器数量。
6. 探测器信息，能够添加位号、探测器型号、气体种类、气体符号、高报值、低报值、缓冲值、清零值、是否启用、报警声音、背景地图、存储周期、数值换算小数点位数、报警延时时间、报警的类型（HH,LL,HL）等。
7. 类型管理可配置控制器型号、探测器型号、气体种类、气体符号等。
8. 地图支持导入和删除，所有的探测器在地图上的位置可自由拖动保存。
9. 端口信息、控制器信息、探测器信息、类型信息、用户信息等，都支持导入、导出、导出到excel、打印。
10. 运行记录、报警记录、操作记录，都支持多条件组合查询，比如时间段、控制器、探测器等，所有记录支持导出到excel/pdf和打印。
11. 运行记录、报警记录、操作记录都可删除指定时间范围内的数据。
12. 系统设置可选择对应表最大保存记录数，自动清理早期数据，留出足够的空间存储重要的数据。
13. 报警短信转发，支持多个接收手机号码，可设定发送间隔，比如即时发送或者6个小时发送一次所有的报警信息，短信内容过长，自动拆分多条短信。
14. 报警邮件转发，支持多个接收邮箱，可设定发送间隔，比如即时发送或者6个小时发送一次所有的报警信息，支持附件发送。
15. 设置软件的中文标题、英文标题、logo路径、版权所有等。
16. 开关设置开机运行、报警声音、自动登录、记住密码等。
17. 报警声音可设置播放次数，界面风格样式提供18套皮肤文件选择。
18. 用户管理，包括用户权限配置，不同用户可以有不同模块的权限。
19. 用户登录和用户退出，可以记住密码和自动登录，超过三次报错提示并关闭程序。
20. 四种监控模式，设备面板监控、地图监控、表格数据监控、曲线数据监控，可自由切换，四种模式下都实时展示采集到的数据，报警闪烁等。
21. 报警继电器联动，一个位号可以跨串口联动多个模块和继电器号，支持多对多。

2.3 特色功能

1. 通信协议支持modbus_com、modbus_tcp_rtu，后期拓展mqtt等协议。
2. 数据源除了真实的硬件设备采集，还可选数据库采集，这样用户可以安排其他程序员比如java程序员将前端采集好的数据放到数据库，本系统直接从数据库采集即可。数据库采集模式可以作为通用的系统使用，更适合多人多系统协作。
3. 智能跳过超时的设备，加快对在线设备的采集速度，当设备数量很多的时候尤其有用。
4. 对智能跳过的超时的设备，在设定的重连时间自动采集一次，以便探测设备是否又重新上线。
5. 每个探测器可控是否启用，不启用则不会采集，也不会在界面显示，相当于运行阶段临时关闭。
6. 探测器可设置缓冲值和报警延时时间，在该值附近波动产生的报警，不计入报警，只有持续处于报警值且超过报警延时时间才算真正报警，这样可以规避很多波动导致的误报。
7. 探测器可设置存储周期，按照设定的时间来存储一条运行记录，可以按照重要程度对重要性高的设定存储周期短一些，不重要的设定大一些，这样可以节省不少的存储空间，也保证了重要的数据及时存储。
8. 探测器可设置清零值，在一些高精度高灵敏的设备可能出厂的时候默认值未必是0，需要设定清零值来表示初始值。
9. 探测器可设置小数点，用于计算后的真实数据控制小数点点位显示，相当于除以10、除以100、除以1000，这样大部分的探测器数据直接通过小数点位设置控制真实换算后的值，极个别的需要特殊转换的可以在通信协议中约定。
10. 探测器报警的类型支持多种，有些设备是高于某个值高报，低于某个值低报，而有些设备是在最小值最大值范围内是高报，低于最小值低报，高于最大值正常。这样可以分情况处理，涵盖各种报警类型。
11. 原创数据导入、导出、打印机制，跨平台不依赖任何组件，瞬间导出数据。
12. 导出到excel的记录支持所有excel、wps等表格文件版本，不依赖excel等软件。
13. 高报颜色、低报颜色、正常颜色、默认值颜色等，都可以自由设置。
14. 支持云端数据同步，将本地采集到的数据实时同步到云端。
15. 支持网络转发和网络接收，网络接收开启后，软件从udp接收数据进行解析。网络转发支持多个目标IP，这样就实现了本地采集的软件，自由将数据转到客户端，随时查看采集到的数据。
16. 自动记住用户最后停留的界面以及其他配置信息，重启后自动应用。
17. 报警自动切换到对应的地图，探测器按钮闪烁，表格数据对应颜色显示。
18. 双击探测器图标，弹出对应探测器详细信息，可以根据需要定制回控操作。
19. 数据库支持多种，包括sqlite、mysql、sqlserver、postgresql、oracle、人大金仓等。
20. 本地设备采集到的数据实时上传到云端，以便手机APP或者web等其他方式提取。
21. 自带设备模拟工具，支持不同型号的多个设备数据模拟，同时还带数据库数据模拟，以便在没有设备的时候测试数据。
22. 标准modbus协议，各种控制器类型、探测器类型、种类、符号等全部自定义，非常灵活和强大，通信协议示例数据非常完整，通用各种modbus协议系统，适用于各种应用场景接入。
23. 同时集成了串口通信、网络通信、数据库通信、数据导入导出打印、通信协议解析、界面UI、全局换肤等众多组件和知识点，非常适合新手入门和进阶。
24. 支持xp、win7、win10、、win11、linux、mac、各种国产系统（UOS、中标麒麟、银河麒麟等）、嵌入式linux等系统。
25. 注释完整，项目结构清晰，超级详细完整的使用开发手册，精确到每个代码文件的功能说明，不断持续迭代版本。

三、体验地址

1. 国内站点：https://gitee.com/feiyangqingyun
2. 国际站点：https://github.com/feiyangqingyun
3. 个人主页：https://blog.csdn.net/feiyangqingyun
4. 知乎主页：https://www.zhihu.com/people/feiyangqingyun
5. 产品主页：https://blog.csdn.net/feiyangqingyun/article/details/97565652
6. 在线文档：https://feiyangqingyun.gitee.io/qwidgetdemo/iotsystem/
7. 体验地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取码：o05q 文件名：bin_iotsystem.zip。
8. 文章导航：https://qtchina.blog.csdn.net/article/details/121330922

四、效果图

五、核心代码

#include "frmview.h"
#include "ui_frmview.h"
#include "quiwidget.h"
#include "dbhelper.h"
#include "iconfont.h"
#include "deviceserver.h"
#include "devicehelper.h"
#include "alarmlink.h"
#include "soundapi.h"
#include "deviceserver.h"

#include "frmviewdevice.h"
#include "frmviewmap.h"
#include "frmviewdata.h"
#include "frmviewplot.h"
#include "frmdevicecontrol.h"

frmView::frmView(QWidget *parent) : QWidget(parent), ui(new Ui::frmView)
{
    ui->setupUi(this);
    this->initForm();
    this->initControl();
    QTimer::singleShot(1000, this, SLOT(initServer()));
}

frmView::~frmView()
{
    delete ui;
}

void frmView::initForm()
{
    ui->navTitleTable->setText("警情消息");
    ui->navTitleTable->setLeftIcon(0xf108);
    ui->navTitleTable->setRightIcon4(0xf1f7);
    ui->navTitleTable->setRightIcon5(0xf1f8);
    ui->navTitleTree->setText("设备列表");
    ui->navTitleTree->setLeftIcon(0xf0e8);
    ui->navTitleTree->setRightIcon5(0xf021);
    ui->navTitleList->setText("地图列表");
    ui->navTitleList->setLeftIcon(0xf0e8);
    ui->navTitleList->setRightIcon5(0xf021);
    ui->widgetLeft->setFixedWidth(App::LeftWidth);
    ui->widgetRight->setFixedWidth(App::RightWidth);

    connect(ui->navTitleTable, SIGNAL(mousePressed(int)), this, SLOT(mousePressed(int)));
    connect(AppEvent::Instance(), SIGNAL(doubleClicked(ButtonDefence *)), this, SLOT(doubleClicked(ButtonDefence *)));

    frmViewDevice *viewDevice = new frmViewDevice;
    ui->stackedWidget->addWidget(viewDevice);

    frmViewMap *viewMap = new frmViewMap;
    ui->stackedWidget->addWidget(viewMap);

    frmViewData *viewData = new frmViewData;
    ui->stackedWidget->addWidget(viewData);

    frmViewPlot *viewPlot = new frmViewPlot;
    ui->stackedWidget->addWidget(viewPlot);

    connect(this, SIGNAL(itemClicked(QString)), viewDevice, SLOT(itemClicked(QString)));
    connect(DeviceServer::Instance(), SIGNAL(receiveAlarm(QString, QString, quint8)), this, SLOT(receiveAlarm(QString, QString, quint8)));

    DeviceHelper::setTableData(viewData->getTable());
    DeviceHelper::setTableWidget(ui->tableWidget);
    DeviceHelper::setTreeWidget(ui->treeWidget);
    DeviceHelper::setListWidget(ui->listWidget);
    DeviceHelper::setPanelWidget(viewDevice->getPanleWidget());
    DeviceHelper::setLabel(viewMap->getLabel());
}

void frmView::initTree()
{
    DeviceHelper::initDeviceTree();
    DeviceHelper::initDeviceStyle();
}

void frmView::initControl()
{
    DeviceHelper::initDeviceData();
    DeviceHelper::initDeviceTable();
    DeviceHelper::initDeviceTree();
    DeviceHelper::initDeviceMap();
    DeviceHelper::initDevicePanel();
    DeviceHelper::initDeviceButton();

    if (ui->listWidget->count() > 0) {
        ui->listWidget->setCurrentRow(0);
        on_listWidget_pressed();
    }
}

void frmView::initServer()
{
    //启动设备解析
    DeviceServer::Instance()->init();
    DeviceServer::Instance()->start();
}

void frmView::mousePressed(int index)
{
    if (index == 5) {
        //改变声音图标并停止报警声音
        ui->navTitleTable->setRightIcon4(0xf1f7);
        SoundAPI::Instance()->stop();
        if (App::WorkMode == 0) {
            AlarmLink::Instance()->reset();
        }
    } else if (index == 6) {
        //清空临时消息
        DeviceHelper::clearMsg();
    }
}

void frmView::doubleClicked(ButtonDefence *btn)
{
    if (App::CurrentUserType.contains("管理员")) {
        if (btn->getButtonStatus() == ButtonDefence::ButtonStatus_Error) {
            //双击重连当前端口下的所有设备
            QString portName = DBHelper::getPortName(btn->property("deviceName").toString());
            DeviceServer::Instance()->readValue(portName, 255, true);
        } else {
            //弹出详细信息
            QString positionID = btn->property("positionID").toString();
            frmDeviceControl::Instance()->setPositionID(positionID);
            frmDeviceControl::Instance()->show();
        }
    }
}

void frmView::on_listWidget_pressed()
{
    int row = ui->listWidget->currentRow();
    if (row < 0) {
        return;
    }

    DeviceHelper::initDeviceMapCurrent(DBData::MapNames.at(row));
}

void frmView::on_treeWidget_itemPressed(QTreeWidgetItem *item, int column)
{
    if (item->parent() != 0) {
        emit itemClicked(item->text(column));
    }
}

void frmView::setIndex(int index)
{
    ui->stackedWidget->setCurrentIndex(index);
    bool visible = (index == 0 || index == 2);
    ui->widgetLeft->setVisible(!(index == 3));
    ui->widgetRight->setVisible(!(index == 3));
    ui->navTitleTree->setVisible(visible);
    ui->treeWidget->setVisible(visible);
    ui->navTitleList->setVisible(!visible);
    ui->listWidget->setVisible(!visible);
}

void frmView::receiveAlarm(const QString &deviceName, const QString &positionID, quint8 alarmType)
{
    if (alarmType == 0 || alarmType == 2) {
        ui->navTitleTable->setRightIcon4(0xf0a2);
    } else {
        ui->navTitleTable->setRightIcon4(0xf1f7);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168