打卡工具——UI部分

Posted cts2710

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了打卡工具——UI部分相关的知识,希望对你有一定的参考价值。

背景

?对象在菊厂加班很辛苦,就想着要不把加班情况记录下来,过一段时间做个数据可视化看看。我这边都是通过他下班给我打电话或者发微信来记录时间的,所以数据肯定还是有误差的,而且有几次加班到凌晨,他自己都忘了打卡还是根据给我发微信的时间补卡的哈哈(论及时汇报的重要性)。

技术概览

  1. pyqt5
  2. matplotlib
  3. mysql
  4. pandas
    ?UI界面是用pyqt5实现的,可以通过QTdesigner拖动控件实现,真的很直观方便,调整好位置,更改样式,后续再添加逻辑即可。这里的QSS样式和CSS非常类似,不再多做介绍。

整体框架

技术图片

?根目录下主要有存放UI代码(ui)和其他逻辑(lib)的文件夹,main文件是主函数,控制ui界面的打开。config.ini是基本配置文件,里面是填写默认数据库用户名、密码、数据库、表名称的,目前只支持mysql。xlsx文件是打卡工具上的数据导出的,剩下的png图片也都是打卡工具生成的图表。ui分为:打卡工具主界面、成功提示界面、失败提示界面,lib中只有生成图表的代码。

工具简介

技术图片

打卡工具如上图所示:

  1. 左边部分就是表格控件(QTableWidget),右边部分是使用了垂直布局(verticalLayoutWidget),然后依次是标签(QLabel),行编辑(QLineEdit),按钮(QPushButton)若干。
  2. 同步mysql:①打开打卡工具会自动把数据库里的记录同步过来;②点击按钮也可以手动同步数据库,这里同步的依据是ui界面上的表格数据,手动点击同步会把当前UI表覆盖mysql表。
  3. 导出Excel:把当前表格的数据导出到Excel文件中。
  4. 创建图表:生成加班等级柱形图、加班等级占比饼图、各年各月每日加班情况折线图、各年每月总加班时长柱状图。
  5. 打卡啦:记录当前日期时间。

调整.ui文件

?我这里只能简单介绍下,详情请戳右边。入门教程
技术图片

?基类需要改成QWidget,继承基类的构造函数。

def __init__(self):
        super(Ui_Form, self).__init__()

?其他模块的导入,控件的样式位置都可以根据需求调整,ui界面可以通过如下代码打开:

if __name__ == '__main__':
    app = QApplication(sys.argv)
    uiIns = Ui_Form()
    uiIns.show()
    sys.exit(app.exec())

控件方法

#设置窗口标题
self.setWindowTitle("打卡工具")
设置窗口大小(固定,可调整)
self.setFixedSize(610, 521)
self.resize(670, 521)
#设置密码隐藏
self.psw_edit.setEchoMode(QLineEdit.Password)
#设置按钮提示语
self.mysql_button.setToolTip("以当前表格数据为准,会先清数据库记录,再导入数据")
#设置垂直水平滚动条
self.tableWidget.setVerticalScrollBarPolicy(QtCore.Qt.ScrollBarAsNeeded)
self.tableWidget.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAsNeeded)
#表格不可编辑
self.tableWidget.setEditTriggers(QAbstractItemView.NoEditTriggers)
#垂直水平表头显示与否
self.tableWidget.horizontalHeader().setVisible(True)
self.tableWidget.verticalHeader().setVisible(False)
#设置表格行列数
self.tableWidget.setRowCount(1)
self.tableWidget.setColumnCount(3)
#设置表头名称
self.tableWidget.setHorizontalHeaderLabels(['日期', '星期', '打卡时间'])
#获取某行某列的内容
self.tableWidget.item(r, 0).text()
# 设置窗口背景透明
self.setAttribute(QtCore.Qt.WA_TranslucentBackground)

工具方法

  1. self.getIni()只是读取下ini文件,用re匹配出数据。
  2. self.click_clockin()是点击‘打卡啦’按钮会调用的方法,需要关联下控件,关联方式如下。这个方法严格按照时间顺序添加记录,不然就弹错误提示,还要判断打卡时间是不是和最新记录时间一致,再选择要不要新增行还是修改行记录。
  3. self.click_mysql_button()和self.auto_sync_mysql()分别是手动自动同步数据库,这个放在另一章节详细讨论。
  4. self.click_excel_button()也是需要关联控件的,点击即可生成excel,还会有成功失败弹框提示,这里有用到列表解析式来生成表格记录,生成的记录列表创建pd.DataFrame(),再用to_excel()直接生成文档,简单粗暴。
  5. self.click_createChart_button()也放到第二章吧(才不是因为偷懒)
# 按钮关联
self.button.clicked.connect(self.click_clockin)

总结

?以上就是我打卡工具的简单介绍,源码的话可以去我的github获取,后续会打包一个.exe的工具上传到github。以下是我目前记录到的数据:
技术图片
技术图片
技术图片
技术图片

以上是关于打卡工具——UI部分的主要内容,如果未能解决你的问题,请参考以下文章

打卡工具——数据可视化部分

带有片段的两个面板 UI 与单独的活动

Android开发——UI_片段

vs2003:快速片段工具

从 fragmentActivity 刷新片段 UI

我们可以在活动 xml 中编写 UI 以及在片段 xm 中编写 UI 吗?