Qt编写物联网管理平台35-实时曲线

一、前言

设备采集到的数据，通过曲线展示也是一种非常好的方式，尽管之前已经有了表格数据展示、设备面板展示、设备地图展示等，实时曲线也是一种不错的方式，这个用户自由选择，反正通过端口已经拿到了所有要采集的数据，根据通信协议已经把所有设备的数据解析好了，至于何种展示形式，都可以很方便的把数据传入进行处理。

目前做的实时曲线展示，采用的用户自己选择某个设备进行监听，近期经过再次研究qcustomplot的功能，发现其实qcustomplot内置了一个控件中摆放多个曲线，每条曲线都可以独立的坐标轴系统，大概在2014年的时候开始用的qcustomplot控件，当时也有这个一个设备多条曲线的场景，如果坐标轴范围一样，这还可以多条曲线公用坐标轴，如果不同曲线坐标轴范围相差很大，多条曲线显示在一块会显示的很不明确，就算不同的曲线有不同的坐标轴，也很容易搞混。所以后面又做成了一条曲线对应一个qcustomplot控件，好处是很明确，缺点也很多，就是一下子增加了很多内存占用，而且CPU占用在数据展示很快的时候，非常大，每个曲线控件都在刷新。于是一个曲线控件同时包含多个曲线而且垂直分布在布局中，一次性刷新，这个大大提升性能，后面准备把这种展示形式引入，替换现有的方案，比如每次选中一个控制器，该控制器下面的所有设备的实时曲线一次性绘制到曲线控件中。

二、功能特点

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

四、效果图

五、相关代码

void frmMultiPlot::initPlot()
{
    //颜色集合
    QList<QColor> colors = CustomPlotHelper::getColorList();

    //拿到布局对象指针
    QCPLayoutGrid *layout = plot->plotLayout();
    //把之前的布局清除
    layout->clear();
    //设置行间距
    layout->setRowSpacing(0);
    layout->setColumnSpacing(0);

    //清空曲线图
    plot->clearGraphs();
    this->clearPlot();

    //循环添加多个曲线图
    int count = ui->cboxCount->currentText().toInt();
    for (int i = 0; i < count; ++i) {
        QCPAxisRect *axisRect = new QCPAxisRect(plot);
        //设置边距不然默认边距比较大,第一个和末一个不设置,留点空隙更好看
        if (i > 0 && i < count - 1) {
            axisRect->setMinimumMargins(QMargins(0, 0, 15, 0));
        }

        //设置最小尺寸,超过了则会自动拉伸图表控件,在曲线很多的时候特别有用不然挤一块
        axisRect->setMinimumSize(100, 100);

        //拿到XY坐标轴对象
        QCPAxis *xAxis = axisRect->axis(QCPAxis::atBottom);
        QCPAxis *yAxis = axisRect->axis(QCPAxis::atLeft);
        yAxis->setLabel(QString("曲线 %1").arg(i + 1));

        //网格线不可见
        xAxis->grid()->setVisible(false);
        yAxis->grid()->setVisible(false);

        //为了方便显示设置底部X轴标识为时间标识
        int type = ui->cboxType->currentIndex();
        if (type == 1 || type == 2) {
            //坐标轴格式为时间
            QSharedPointer<QCPAxisTickerTime> timeTicker(new QCPAxisTickerTime);
            timeTicker->setTimeFormat("%h:%m:%s");
            xAxis->setTicker(timeTicker);
            xAxis->setRange(0, maxX, Qt::AlignRight);
        } else if (type == 3) {
            //坐标轴格式为文本
            QSharedPointer<QCPAxisTickerText> textTicker(new QCPAxisTickerText);
            for (int i = 0; i < max2; ++i) {
                textTicker->addTick(i, STRTIME);
            }
            xAxis->setTicker(textTicker);
            xAxis->setRange(0, max2);
        } else {
            xAxis->setRange(0, maxX);
        }

        //设置坐标轴记号标识数量
        xAxis->ticker()->setTickCount(10);
        yAxis->ticker()->setTickCount(3);

        //设置刻度原点
        yAxis->ticker()->setTickOrigin(1);
        //设置坐标轴范围,可以根据项目自行调整
        yAxis->setRange(0, maxY + 2);

        //将坐标轴添加到布局中
        layout->addElement(i, 0, axisRect);
        //添加对应的画布,对应坐标轴为刚刚产生的坐标轴,底部作为X轴,左侧作为Y轴
        QCPGraph *graph = plot->addGraph(xAxis, yAxis);
        //开启平滑算法
        graph->setSmooth(ui->cboxSmooth->currentIndex());
        //关闭抗锯齿
        //graph->setAntialiased(false);

        //取随机颜色设置颜色
        QColor color = colors.at(rand() % colors.count());
        graph->setPen(QPen(color, 1));
        if (ui->ckBg->isChecked()) {
            //背景颜色在颜色基础上加个透明度更好看
            //也可以自行设置渐变颜色
            QColor c = color;
            c.setAlpha(100);
            graph->setBrush(c);
        }

        xAxis->setLabelColor(color);
        yAxis->setLabelColor(color);
        xAxis->setTickLabelColor(color);
        yAxis->setTickLabelColor(color);
        xAxis->setBasePen(color);
        yAxis->setBasePen(color);
        xAxis->setTickPen(color);
        yAxis->setTickPen(color);
        xAxis->setSubTickPen(color);
        yAxis->setSubTickPen(color);
        //xAxis->grid()->setPen(color);
        //yAxis->grid()->setPen(color);
        //xAxis->grid()->setZeroLinePen(color);
        //yAxis->grid()->setZeroLinePen(color);
    }

    //设置滚动条的最小尺寸为布局的最小尺寸,这样会自动产生滚动条效果
    ui->scrollAreaWidgetContents->setMinimumSize(layout->minimumOuterSizeHint());
    //重新绘制
    plot->replot();
}

void frmMultiPlot::loadData()
{
    if (!isVisible()) {
        return;
    }

    //不同类型不同值
    int type = ui->cboxType->currentIndex();
    if (type == 1 || type == 2) {
        key = timeStart.msecsTo(QDateTime::currentDateTime()) / 1000.0;
    } else {
        key++;
    }

    int count = plot->plotLayout()->elementCount();
    for (int i = 0; i < count; ++i) {
        //拿到对应画布的坐标轴
        QCPAxisRect *axisRect = (QCPAxisRect *)plot->plotLayout()->elementAt(i);
        QCPAxis *xAxis = axisRect->axis(QCPAxis::atBottom);
        QCPGraph *graph = plot->graph(i);
        int dataCount = graph->dataCount() - 1;

        //把最前面那个数据移除掉并重新设置X轴范围值
        if (type == 1 || type == 2) {
            graph->data().data()->removeBefore(key - 10);
            xAxis->setRange(key, 10, Qt::AlignRight);
        } else if (type == 3) {
            QCPAxisTickerText *ticker = (QCPAxisTickerText *)xAxis->ticker().data();
            ticker->addTick(key, STRTIME);
            if (dataCount >= max2) {
                //每次移除最前面那个,超过了也需要移除不然会内存一直涨
                ticker->ticks().remove(ticker->ticks().firstKey());
                graph->data().data()->removeBefore(key - max2);
                xAxis->setRange(key - max2, key);
            }
        } else {
            if (dataCount >= maxX) {
                graph->data().data()->removeBefore(key - maxX);
                xAxis->setRange(key - maxX, key);
            }
        }

        //随机模拟数据添加到图表
        //double value = qSin(key) * 5;
        double value = QUIHelper::getRandValue(1, maxY, true, true);
        graph->addData(key, value);
        //qDebug() << dataCount << key << value;

        //自动调整Y轴范围范围
        //graph->rescaleValueAxis();
    }

    //全部设置好以后再更新
    plot->replot();
}

void frmMultiPlot::clearPlot()
{
    //复位数据
    int index = ui->cboxType->currentIndex();
    if (index == 1) {
        timeStart = QDateTime::currentDateTime();
    } else if (index == 2) {
        QDateTime now = QDateTime::currentDateTime();
        timeStart = QDateTime::fromString(now.toString("yyyy-MM-dd 00:00:00"), "yyyy-MM-dd HH:mm:ss");
    } else {
        key = -1;
    }

    //清空数据及复位坐标轴范围
    int count = plot->graphCount();
    for (int i = 0; i < count; ++i) {
        plot->graph(i)->data().data()->clear();
        QCPAxisRect *axisRect = (QCPAxisRect *)plot->plotLayout()->elementAt(i);
        QCPAxis *xAxis = axisRect->axis(QCPAxis::atBottom);
        if (index == 1 || index == 2) {
            xAxis->setRange(0, maxX, Qt::AlignRight);
        } else if (index == 3) {
            xAxis->setRange(0, max2);
        } else {
            xAxis->setRange(0, maxX);
        }
    }
}

标签：设置,Qt,yAxis,color,报警,35,坐标轴,实时,xAxis
来源： https://www.cnblogs.com/feiyangqingyun/p/16392819.html