QT自定义控件之智能化工流程系统

一、产品展示

本次项目依旧沿用熟悉的技术栈：C++、Qt、QPainter。

依托 C++ 高性能的底层能力，结合 Qt 的界面框架，再借助 QPainter 完成自定义绘图渲染，实现化工工艺场景下流体对象的可视化绘制。本次演示主要还原智能化工液体介质之间的交互与流转流程，通过图形直观体现各个设备、介质个体之间的数据关联与业务逻辑联动，以此对外展示软件的部分可视化运行效果。

ps：偶尔能沉下心做点自己热爱的开发，真的是一种很舒服的状态。没有产品经理提需求，没有测试工程师提 bug ，也没有项目经理追着要进度。完全顺着自己的想法去实现，哪怕这份作品没有多少人看见、得不到外界的认可，可依旧很享受整个创作的过程。看着一行行代码落地，属于自己的作品从无到有，在手中成型并完整呈现出来。能始终保有一件愿意为之坚持的事，大抵就是开发者身上那点手艺人的执念。

二、软件实现流程

1、背景图片

想要实现一张具备科技感的智能化业务背景图，在正规项目团队里通常会有专职 UI 工程师负责产出。一般流程是产品经理输出交互原型之后，UI 工程师基于原型规范，完成视觉设计，输出项目所需的背景素材。

但实际开发中，视觉效果并不会直接拿来就可以用，很多细节需求需要产品、UI、开发多方沟通对齐。经过多轮沟通调整，最终才能拿到符合软件实际运行要求、可以直接投入程序使用的背景资源。

2、实现过程

这次实现的是"智能化工流程系统"，首先是默认的状态下，A罐和B罐都处于满罐状态，C罐和D罐则处于空罐状态，如下所示：

点击界面上的「开始」按钮触发流程后，程序启动模拟工况：A 罐与 B 罐内部液位开始向下递减，连通管道同步渲染水流动画效果，A、B 罐关联的三组阀门指示灯进入闪烁状态。

流程执行延时 5 秒后，触发 C 罐液位上升动画。

当 C 罐液位达到 100% 满罐阈值时，停止 A、B 罐的液位变化、管道水流动画以及阀门指示灯闪烁；与此同时，切换流程状态，开启通向 D 罐管路的水流动画，并且启动对应管路阀门指示灯的闪烁效果。

3、部分源码展示

复制代码

//开始启动
void MainWindow::on_pushButton_clicked()
{
    //化学试剂A罐
    m_ABTimer->start(600);
 
    //开启水流特效
    ui->widget->Set_DisplayEvent_IsShow(0,1);
    ui->widget->Set_DisplayEvent_IsShow(1,1);
    ui->widget->Set_DisplayEvent_IsShow(2,1);
    ui->widget->Set_DisplayEvent_IsShow(6,1);
    ui->widget->Set_DisplayEvent_IsShow(7,1);
 
    //启动A罐、B罐警示灯闪烁效果
    m_ABLightTimer->start(500);
 
    WaitSeconds(5000);
 
     //阀门开启之后水流效果
    ui->widget->Set_DisplayEvent_IsShow(3,1);
    ui->widget->Set_DisplayEvent_IsShow(4,1);
 
    ui->widget->Set_DisplayEvent_IsShow(8,1);
    ui->widget->Set_DisplayEvent_IsShow(9,1);
 
    //试剂C罐容器上升效果
    m_CTimer->start(500);
 
}

void MainWindow::Slot_D_TimeOut()
{
    m_D_CurrentNum +=1;
 
    if(m_D_CurrentNum >=100)
    {
         m_DTimer->stop();
 
         m_CLightTimer->stop();
 
         ui->widget->Set_DisplayEvent_IsShow(10,0);
         ui->widget->Set_DisplayEvent_IsShow(11,0);
         ui->widget->Set_DisplayEvent_IsShow(12,0);
         ui->widget->Set_DisplayEvent_IsShow(13,0);
    }
 
    ui->widget->Set_TextChangeEvent(3,QString::number(m_D_CurrentNum));
 
    QString percentage = QString("%1%").arg(QString::number(m_D_CurrentNum));
 
    ui->widget->Set_TextChangeEvent(4,percentage);
 
    //C罐下降感
    int ret = 100-m_D_CurrentNum;
 
    ui->widget->Set_TextChangeEvent(2,QString::number(ret));
 
    //取消AB罐的流水特效
    for(int i = 0; i <= 9; i++)
    {
        ui->widget->Set_DisplayEvent_IsShow(i,0);
    }
 
    m_ABLightTimer->stop();
 
    ui->widget->update();
}

三、源码分享

如果大家对整体效果感兴趣，可以去某站（详细原版视频内容），源码分享可来V号，同名"Q态王"

详情视频可见某站链接：（欢迎大家来某站点赞关注加评论，谢谢~）

附上链接：https://www.bilibili.com/video/BV1YxuA6sE8o/?spm_id_from=333.1387.homepage.video_card.click&vd_source=c4c0b00a46915ab1a22749c23e952741