• 3727阅读
  • 7回复

Qt编写数据可视化大屏界面电子看板1-布局方案 [复制链接]

上一主题 下一主题
离线liudianwu
 

只看楼主 倒序阅读 楼主  发表于: 2019-05-12
一、前言
布局方案在整个数据可视化大屏界面电子看板系统中,是除了基础功能以外的核心功能之一,只有具备了布局方案这个功能,才能让用户随意调整自己想要的布局,保存成自定义名称的布局配置文件,这样就大大增加了灵活性,可以更好的适应各种分辨率,毕竟客户的电脑运行环境各种各样的都有,模块数量众多,有些不想展示,有些需要特别放大展示,有些需要偶尔全屏展示等,这些布局用户都可以自己定义好保存配置方案,存储到指定的目录下,下次启动会自动生成对应的布局菜单文件让用户自行选择切换。
二、电子看板介绍
电子看板是目视化管理的一种表现形式,即对数据的状况一目了然地表现,主要是对于管理项目,它通过利用形象直观而又色彩适宜的各种视觉感知信息来组织现场生产活动,目视管理依据人类的生理特征,在生产现场充分利用信号灯、标识牌、符号颜色等方式来发出视觉信号,鲜明准确地刺激人的神经末梢,快速地传递信息,形象直观地将潜在的问题和浪费现象都显现出来。以便任何人都可以及时掌握管理现状和必要的情报,从而能够快速制定并实施应对措施。因此,管理看板是发现问题、解决问题的非常有效且直观的手段,是优秀的现场管理必不可少的工具之一。
三、功能特点
1:整体总共分三级界面,一级界面是整体布局,二级界面是单个功能模块,三级界面是单个控件。2:子控件包括饼图+圆环图+曲线图+柱状图+柱状分组图+横向柱状图+横向柱状分组图+合格率控件+百分比控件+进度控件+设备状态面板+表格数据+地图控件+视频控件+其他控件等。3:二级界面可以自由拖动悬浮,支持最小化最大化关闭,响应双击自定义标题栏。4:数据源支持数据库采集(默认)、网络通信、网络请求等,可自由设定每个子界面的采集间隔即数据刷新频率。5:采用纯QWidget编写,支持Qt4.6到Qt5.12.3任何版本,支持嵌入式linux比如树莓派、香橙派、全志、imx6等。6:提供三个内核版本,自定义控件版本+qchart版本+echart版本。7:内置多套配色风格样式,默认紫色,支持任何分辨率。8:可设置标题+目标分辨率+布局方案,启动立即应用。9:可设置主背景颜色+面板颜色+十字线游标颜色。10:可设置多条曲线颜色,没有设置颜色的情况下内置15套精美颜色随机应用。11:可设置标题栏背景颜色+文字颜色。12:可设置曲线图表背景颜色+文字颜色+网格颜色。13:可设置正常颜色+警戒颜色+报警颜色+禁用颜色+百分比进度颜色。14:可分别设置各种字体大小,比如全局+软件名称+标题栏+子标题栏+加粗标签等。15:可设置标题栏高度+表头高度+行高度。16:曲线支持游标+悬停高亮数据点和显示值,柱状图支持顶部(可设置顶端+上部+中间+底部)显示数据,全部自适应计算位置。17:主界面直接鼠标右键切换布局+配色方案+关闭开启某个二级窗体。18:自动记忆所有子窗口的大小和位置,下次启动立即应用。19:动态加载布局方案菜单,可以动态新建布局、恢复布局、保存布局、另存布局等,用户可以制造任意布局。20:二级窗体,双击从主窗体分离出来浮动,可以自由调整大小。再次双击标题栏最大化,再次双击还原。21:每个模块都可以自定义采集速度,如果是数据库采集会自动排队处理。
  四、配置文件说明
  (1)、基本配置参数
字段描述默认值
WorkMode工作模式 timer-模拟数据 db-数据库采集 tcp-网络采集 http-post请求timer
Title软件标题,显示在软件中间顶部数字化工厂信息中心
Ratio分辨率,目前无意义4096*216
Layout布局方案,每次切换布局方案以后都会保存完整布局
Theme配色方案,每次切换配色方案以后都会保存紫色风格
VideoAddr视频流地址,视频模块播放的视频地址凤凰卫视
AutoRun是否开机启动false
MoveEnable模块是否可以拖动,启用以后模块可以任意拖动true
CutLeftBottom底部布局左侧是否切掉true
CutRightBottom底部布局右侧是否切掉true
StaticLine是否绘制静态定位线,为假则绘制游标十字线true

(2)、颜色配置参数
字段描述默认值
ColorMainBg主背景颜色QColor(4, 7, 38)
ColorPanelBg面板背景颜色QColor(26, 29, 60)
ColorLine十字线定位线颜色QColor(255, 0, 0)
ColorLine1线条1颜色QColor(0, 176, 180)
ColorLine2线条2颜色QColor(32, 159, 223)
ColorLine3线条3颜色QColor(255, 192, 0)
ColorTitleBg标题栏背景颜色QColor(48, 48, 85)
ColorTitleText标题栏文字颜色QColor(255, 255, 255)
ColorChartBg曲线图表背景颜色QColor(38, 41, 74)
ColorChartText曲线图表文字颜色QColor(250, 250, 250)
ColorChartGrid曲线图表网格颜色QColor(180, 180, 180)
ColorOk正常颜色QColor(0, 176, 180)
ColorLow警戒颜色QColor(255, 192, 0)
ColorAlarm报警颜色QColor(214, 77, 84)
ColorDisable禁用背景颜色QColor(210, 210, 210)
ColorPercent环形百分比背景颜色QColor(0, 254, 254)

(3)、字体和尺寸配置参数
字段描述默认值
MainFont全局字号微软雅黑,12
NameFont软件名称字号19
LabFont加粗标签字号12
DeviceFont设备面板字号12
SubTitleFont模块子标题栏字号13
TitleFont模块标题栏字号15
TitleHeight模块标题栏高度23
HeadHeight表格表头高度28
RowHeight表格行高度25

(4)、采集速度配置参数,单位毫秒
字段描述默认值
IntervalModule1模块1采集间隔5000
IntervalModule2模块2采集间隔5000
IntervalModule3模块3采集间隔5000
IntervalModule4模块4采集间隔5000
IntervalModule5模块5采集间隔5000
IntervalModule6模块6采集间隔5000
IntervalModule7模块7采集间隔5000
IntervalModule8模块8采集间隔5000

(5)、本地数据库配置参数
字段描述默认值
LocalDBType本地数据库类型,Sqlite、Mysql等Mysql
LocalDBIP本地数据库主机地址127.0.0.1
LocalDBPort本地数据库端口3306
LocalDBName本地数据库名称bigscreen
LocalUserName本地数据库用户名root
LocalUserPwd本地数据库密码,以密文存储root

五、特别说明
  1. 执行文件同级文件夹有layout+layout_1440+layout_1920,程序默认自动识别分辨率并加载对应的布局文件夹,比如1920分辨率则从layout_1920文件夹加载布局,并作为整体布局文件夹。
  2. 程序默认是模拟数据,如果需要从数据库采集则修改配置文件WorkMode=db即可。
  3. 如果发现布局拖动乱了,可以直接鼠标右键选择恢复布局即可,在保存布局以前。
  4. 在中间地图模块鼠标右键可以弹出菜单,切换布局和配色方案等。
  5. 在模块的标题栏上右键可以弹出默认的dock菜单,用来显示和隐藏各模块。
  6. 软件关闭过程中会自动保存布局,下次启动以后自动应用。
  7. 如果使用的默认的默认的配色方案比如紫色风格,则配置文件中的颜色全部无效,会自动应用代码中的颜色,如果需要启用自定义的颜色,则将配置文件的 Theme=\x81ea\x5b9a\x4e49\x98ce\x683c 即可。此时打开软件会应用配置文件中的颜色。
  8. 右键菜单可以截图保存,默认命名为 配色方案名称_布局方案名称.png 保存在snap目录下。
  9. 如果是XP系统请先执行fixff.cmd,用来修复ffmpeg在XP上不可用的BUG。
  10. 可执行文件下载地址:https://pan.baidu.com/s/1o97IGvZgTgDhlkuXQa4B0w 提取码:r2bv ,会不定期更新程序,欢迎各位提出批评和建议。

六、效果图

七、核心代码
  1. #include "mainwindow.h"
  2. #include "ui_mainwindow.h"
  3. #include "quiwidget.h"
  4. #include "appinit.h"
  5. #include "customtitlebar.h"
  6. MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
  7. {
  8.     ui->setupUi(this);
  9.     this->initForm();
  10.     this->changeLayout(App::Layout, true);
  11. }
  12. MainWindow::~MainWindow()
  13. {
  14.     delete ui;
  15. }
  16. void MainWindow::closeEvent(QCloseEvent *)
  17. {
  18.     closeAll();
  19. }
  20. void MainWindow::initForm()
  21. {
  22.     this->setWindowTitle(App::Title);
  23.     //this->setProperty("canMove", true);
  24.     this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint);
  25.     //自动根据分辨率找合适的默认的布局文件夹
  26.     layoutPath = QUIHelper::appPath() + "/layout";
  27.     if (QUIHelper::deskWidth() == 1440) {
  28.         QDir dir(QUIHelper::appPath() + "/layout_1440");
  29.         if (dir.exists()) {
  30.             layoutPath = QUIHelper::appPath() + "/layout_1440";
  31.         }
  32.     } else if (QUIHelper::deskWidth() == 1920) {
  33.         QDir dir(QUIHelper::appPath() + "/layout_1920");
  34.         if (dir.exists()) {
  35.             layoutPath = QUIHelper::appPath() + "/layout_1920";
  36.         }
  37.     }
  38.     module1 = new frmModule1;
  39.     module2 = new frmModule2;
  40.     module3 = new frmModule3;
  41.     module4 = new frmModule4;
  42.     module5 = new frmModule5;
  43.     module6 = new frmModule6;
  44.     module7 = new frmModule7;
  45.     module8 = new frmModule8;
  46.     moduleCenter = new frmModuleCenter;
  47.     moduleVideo = new frmModuleVideo;
  48.     //启动模拟数据或者数据采集
  49.     module1->start(App::IntervalModule1);
  50.     module2->start(App::IntervalModule2);
  51.     module3->start(App::IntervalModule3);
  52.     module4->start(App::IntervalModule4);
  53.     module5->start(App::IntervalModule5);
  54.     module6->start(App::IntervalModule6);
  55.     module7->start(App::IntervalModule7);
  56.     module8->start(App::IntervalModule8);
  57.     //实例化停靠窗体
  58.     newWidget(module1, "年度产量汇总");
  59.     newWidget(module2, "当月计划达成率");
  60.     newWidget(module3, "设备监控");
  61.     newWidget(module4, "模具进度");
  62.     newWidget(module5, "负荷分布");
  63.     newWidget(module6, "送检一次合格率");
  64.     newWidget(module7, "品质管理");
  65.     newWidget(module8, "物料管理");
  66.     newWidget(moduleVideo, "视频监控");
  67.     QList<QWidget *> widgets;
  68.     widgets << module1 << module2 << module3 << module4 << module5 << module6 << module7 << module8 << moduleCenter << moduleVideo;
  69.     connect(moduleCenter, SIGNAL(changeLayout(QString)), this, SLOT(changeLayout(QString)));
  70.     connect(moduleCenter, SIGNAL(saveLayout(QString, int)), this, SLOT(saveLayout(QString, int)));
  71.     connect(moduleCenter, SIGNAL(changeTheme(QString)), this, SLOT(changeTheme(QString)));
  72.     connect(moduleCenter, SIGNAL(closeAll()), this, SLOT(closeAll()));
  73.     //设置拉伸策略
  74.     for (int i = 0; i < widgets.count(); i++) {
  75.         widgets.at(i)->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
  76.     }
  77.     //设置中心窗体
  78.     this->setCentralWidget(moduleCenter);
  79.     //设置停靠参数,不允许重叠,只允许拖动
  80.     this->setDockOptions(QMainWindow::AnimatedDocks);
  81.     //将底部左侧作为左侧区域,底部右侧作为右侧区域,否则底部区域会填充拉伸
  82.     if (App::CutLeftBottom) {
  83.         setCorner(Qt::BottomLeftCorner, Qt::LeftDockWidgetArea);
  84.     }
  85.     if (App::CutRightBottom) {
  86.         setCorner(Qt::BottomRightCorner, Qt::RightDockWidgetArea);
  87.     }
  88. }
  89. void MainWindow::clearWidget()
  90. {
  91.     for (int i = 0; i < widgets.count(); i++) {
  92.         this->removeDockWidget(widgets.at(i));
  93.     }
  94. }
  95. void MainWindow::initWidget()
  96. {
  97.     //添加左侧窗体
  98.     addWidget(widgets.at(0), 0);
  99.     addWidget(widgets.at(7), 0);
  100.     addWidget(widgets.at(3), 0);
  101.     //添加右侧窗体
  102.     addWidget(widgets.at(6), 1);
  103.     addWidget(widgets.at(4), 1);
  104.     addWidget(widgets.at(5), 1);
  105.     //添加底部窗体
  106.     addWidget(widgets.at(2), 3);
  107.     addWidget(widgets.at(1), 3);
  108.     addWidget(widgets.at(8), 3);
  109. }
  110. void MainWindow::newWidget(QWidget *widget, const QString &title)
  111. {
  112.     //自定义停靠窗体标题栏
  113.     QString objName = widget->objectName();
  114.     CustomTitleBar *titleBar = new CustomTitleBar;
  115.     titleBar->setObjectName("titleBar_" + objName);
  116.     titleBar->setTitle(title);
  117.     //实例化停靠窗体
  118.     QDockWidget *dockWidget = new QDockWidget;
  119.     dockWidget->setObjectName("dockWidget_" + objName);
  120.     dockWidget->setWindowTitle(title);
  121.     dockWidget->setTitleBarWidget(titleBar);
  122.     dockWidget->setWidget(widget);
  123.     //如果设置了不可移动则只允许关闭
  124.     if (!App::MoveEnable) {
  125.         dockWidget->setFeatures(QDockWidget::DockWidgetClosable);
  126.     }
  127.     //设置顶部不可停靠
  128.     dockWidget->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea | Qt::BottomDockWidgetArea);
  129.     widgets << dockWidget;
  130. }
  131. void MainWindow::addWidget(QDockWidget *widget, int position)
  132. {
  133.     //设置停靠位置
  134.     Qt::DockWidgetArea area;
  135.     if (position == 0) {
  136.         area = Qt::LeftDockWidgetArea;
  137.     } else if (position == 1) {
  138.         area = Qt::RightDockWidgetArea;
  139.     } else if (position == 2) {
  140.         area = Qt::TopDockWidgetArea;
  141.     } else if (position == 3) {
  142.         area = Qt::BottomDockWidgetArea;
  143.     }
  144.     this->addDockWidget(area, widget);
  145.     //如果是首次生成布局则需要全部可见
  146.     QString file = QString("%1/%2.ini").arg(layoutPath).arg(App::Layout);
  147.     if (!QFile(file).exists()) {
  148.         widget->setVisible(true);
  149.     }
  150. }
  151. void MainWindow::changeLayout(const QString &layout, bool init)
  152. {
  153.     //首次加载不需要比较是否和配置文件一样
  154.     bool needLoad = init;
  155.     if (!init && App::Layout != layout) {
  156.         needLoad = true;
  157.         //先保存原有布局
  158.         saveLayout(App::Layout, 2);
  159.     }
  160.     if (needLoad) {
  161.         App::Layout = layout;
  162.         App::writeConfig();
  163.         this->clearWidget();
  164.         this->initWidget();
  165.         this->initLayout(App::Layout);
  166.         //全屏+QWebEngineView控件一起会产生右键菜单无法弹出的BUG,需要上移一个像素
  167.         QRect rect = qApp->desktop()->screenGeometry();
  168. #if 1
  169.         rect.setY(-1);
  170.         rect.setHeight(rect.height());
  171. #else
  172.         rect.setX(30);
  173.         rect.setY(40);
  174.         rect.setWidth(1370);
  175.         rect.setHeight(795);
  176. #endif
  177.         this->setGeometry(rect);
  178.     }
  179. }
  180. void MainWindow::initLayout(const QString &layout)
  181. {
  182.     QString file = QString("%1/%2.ini").arg(layoutPath).arg(layout);
  183.     QSettings set(file, QSettings::IniFormat);
  184.     set.beginGroup("MainWindow");
  185.     restoreState(set.value("State").toByteArray());
  186.     set.endGroup();
  187. }
  188. //type: 0-新建布局 1-恢复布局 2-保存布局 3-布局另存
  189. void MainWindow::saveLayout(const QString &layout, int type)
  190. {
  191.     //如果为空则表示是恢复布局
  192.     if (type == 0) {
  193.         App::Layout = layout;
  194.         this->changeLayout(App::Layout, true);
  195.         return;
  196.     } else if (type == 1) {
  197.         this->changeLayout(App::Layout, true);
  198.         return;
  199.     }
  200.     QString file = QString("%1/%2.ini").arg(layoutPath).arg(layout);
  201.     QSettings set(file, QSettings::IniFormat);
  202.     set.beginGroup("MainWindow");
  203.     set.setValue("State", saveState());
  204.     set.endGroup();
  205.     App::Layout = layout;
  206.     App::writeConfig();
  207. }
  208. void MainWindow::changeTheme(const QString &theme)
  209. {
  210.     //必须是风格改变了才需要重新应用
  211.     if (App::Theme != theme) {
  212.         App::Theme = theme;
  213.         App::writeConfig();
  214.         AppInit::Instance()->initTheme();
  215.         AppInit::Instance()->initStyle();
  216.     }
  217. }
  218. void MainWindow::closeAll()
  219. {
  220.     saveLayout(App::Layout, 2);
  221.     QUIHelper::sleep(100);
  222.     exit(0);
  223. }



欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线toby520

只看该作者 1楼 发表于: 2019-05-12
QtQML多多指教开发社区 http://qtclub.heilqt.com
将QtCoding进行到底
关注移动互联网,关注金融
开发跨平台客户端,服务于金融行业
专业定制界面
群号:312125701   373955953(qml控件定做)
离线305750665

只看该作者 2楼 发表于: 2019-05-12
     威武的刘总
雨田哥: 群号:853086607
QQ: 3246214072

刘典武-feiyangqingyun:专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!QQ:517216493

只看该作者 3楼 发表于: 2019-05-12
厉害了
离线mengkun

只看该作者 4楼 发表于: 2019-05-13
满满的干货,感谢刘老师!受益匪浅!
离线fzw003

只看该作者 5楼 发表于: 2019-05-13
数据可视化大屏界面我见过用web+electron的方案据说也支持跨平台,跟web+Qtwebengine的方案很类似。纯原生widget做这些布局最大的缺陷每次的更新调试改动都要重新编译exe。 web部署则更高效一些,忽略性能上的一些缺陷,现有的硬件技术早已弥补了这些缺陷,甚至有点像热更新,即改即更新,前端未来Html+js占比份额居高,无论从技术和人才储备来说都远大于原生市场,论坛里不是用哥们用Typescript渲染了一套你的控件吗。哈哈,纯属胡编乱造,如有雷同纯属巧合。
离线liudianwu

只看该作者 6楼 发表于: 2019-05-13
回 fzw003 的帖子
fzw003:数据可视化大屏界面我见过用web+electron的方案据说也支持跨平台,跟web+Qtwebengine的方案很类似。纯原生widget做这些布局最大的缺陷每次的更新调试改动都要重新编译exe。 web部署则更高效一些,忽略性能上的一些缺陷,现有的硬件技术早已弥补了这些缺陷,甚至有点像热更新,即改 .. (2019-05-13 08:27) 

是的,BS架构的是主流,我主要是寻找一个细分市场,比如嵌入式linux。
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350

只看该作者 7楼 发表于: 2019-05-14
按照你的做了没效果
快速回复
限100 字节
 
上一个 下一个