Qt编写气体安全管理系统2-界面框架

一、前言

整体框架包括两个部分，一部分是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皮肤样式。

皮肤地址：https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo

文件名称：styledemo

体验地址：https://gitee.com/feiyangqingyun/QWidgetExe https://github.com/feiyangqingyun/QWidgetExe

文件名称：bin_sams.zip

二、功能特点

采集数据端口，支持串口端口+网络端口，串口支持自由设置串口号+波特率，网络支持自由设置IP地址+通讯端口，每个端口支持采集周期，默认1秒钟一个地址，支持设置通讯超时次数，默认3次，支持最大重连时间，用于重新读取离线的设备。
控制器信息，能够添加控制器名称，选择控制器地址+控制器型号，设置该控制器下面的探测器数量。
探测器信息，能够添加位号，可自由选择探测器型号，气体种类，气体符号，高报值，低报值，缓冲值，清零值，是否启用，报警声音，背景地图，存储周期，数值换算小数点位数，报警延时时间，报警的类型（HH,LL,HL）等。
控制器型号+探测器型号+气体种类+气体符号，均可自由配置。
地图支持导入和删除，所有的探测器对应地图位置可自由拖动保存。
端口信息+控制器信息+探测器信息，支持导入导出+导出到excel+打印。
运行记录+报警记录+用户记录，支持多条件组合查询，比如时间段+控制器+探测器等，所有记录支持导出到excel+打印。
导出到excel的记录支持所有excel+wps等表格文件版本，不依赖excel等软件。
可删除指定时间范围内的数据，支持自动清理早期数据，设置最大保存记录数。
支持报警短信转发，支持多个接收手机号码，可设定发送间隔，比如即时发送或者6个小时发送一次所有的报警信息，短信内容过长，自动拆分多条短信。
支持报警邮件转发，支持多个接收邮箱，可设定发送间隔，比如即时发送或者6个小时发送一次所有的报警信息，支持附件发送。
高报颜色+低报颜色+正常颜色+0值颜色+曲线背景+曲线颜色等，都可以自由选择。
软件的中文标题+英文标题+logo路径+版权所有都可以自由设置。
提供开关设置开机运行+报警声音+自动登录+记住密码等。
报警声音可设置播放次数，界面提供17种皮肤文件选择。
支持云端数据同步，可设置云端数据库的信息，比如数据库名称，用户名+密码等。
支持网络转发和网络接收，网络接收开启后，软件从udp接收数据进行解析。网络转发支持多个目标IP，这样就实现了本地采集的软件，自由将数据转到客户端，随时查看探测器数据。
自动记住用户最后停留的界面+其他信息，重启后自动应用。
报警自动切换到对应的地图，探测器按钮闪烁。
双击探测器图标，可以进行回控。
支持用户权限管理，管理员+操作员两大类，用户登录+用户退出，可以记住密码和自动登录，超过三次报错提示并关闭程序。
支持四种监控模式，设备面板监控+地图监控+表格数据监控+曲线数据监控，可自由切换，四种同步应用。
支持报警继电器联动，一个位号可以跨串口联动多个模块和继电器号，支持多对多。
本地数据存储支持sqlite+mysql，支持远程数据同步到云端数据库。自动重连。
本地设备采集到的数据实时上传到云端，以便手机APP或者web等其他方式提取。
支持两种数据源，一种是串口和网络通过协议采集设备数据，一种是数据库采集。数据库采集模式可以作为通用的系统使用。
自带设备模拟工具，支持16个设备数据模拟，同时还带数据库数据模拟，以便在没有设备的时候测试数据。
默认通信协议采用modbus协议，后期增加mqtt等物联网协议的支持，做成通用系统。
支持所有windows操作系统+linux操作系统和其他操作系统。

三、效果图

四、核心代码

#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);

    }

}