打卡工具——UI部分

Posted 2020-11-22 cts2710

背景

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

技术概览

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。以下是我目前记录到的数据：