Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >高质量编码-考勤记录日历可视化

高质量编码-考勤记录日历可视化

原创
作者头像
MiaoGIS
发布于 2023-01-17 10:34:43
发布于 2023-01-17 10:34:43
96900
代码可运行
举报
文章被收录于专栏:Python in AI-IOTPython in AI-IOT
运行总次数:0
代码可运行

工作就要上下班打卡,月末想要查看自己的考勤情况,考勤系统通常会记录各工号下的打卡记录。

考勤记录
考勤记录

如果使用日历来展示考勤历史岂不是更直观形象。于是使用考勤系统页面里的API,由于考勤页面是后台生成的HTML,需要使用SOUP库解析为JSON。开发的考勤图表页面。支持原考勤登录验证,选择月份,日历显示上午未打卡或下午未打卡,以及周末加班打卡。

当前日期为16号,未来日期不显示颜色
当前日期为16号,未来日期不显示颜色
周末加班
周末加班
工作日未打卡
工作日未打卡

后台使用Python语言开发,requests库访问考勤系统API,flask作为Web框架。代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# -*- coding:utf-8 -*-
from flask import Flask,render_template,jsonify,request
from bs4 import BeautifulSoup as Soup
import requests
import calendar
import pandas as pd

url='考勤系统URL'
cookies={'SessionId':'登录验证'}
start=10

words=list(calendar.day_abbr)+list(calendar.month_name)[1:]

words2="一,二,三,四,五,六,日,一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月".split(',')

htmlCalendar=calendar.HTMLCalendar()
def getData(ID,year,month,cookies):
  
    req=requests.get(url,params={'ID':ID},cookies=cookies)
    text=req.text
    soup=Soup(text)
    table=soup.find('table')
    trs=table.select('tr')[1:]
    data=[[td.text.strip() for td in tr.findChildren('td',limit=2)] for tr in trs]
    calHtml=htmlCalendar.formatmonth(int(year),int(month))   
    for i,word in enumerate(words):
        calHtml=calHtml.replace(word,words2[i])
    
    return jsonify(data=data,table=str(table),calHtml=calHtml)

app = Flask(__name__)
 
@app.route("/")
def index():
    months=pd.period_range(start='2016-07',end=pd.Timestamp.now(),freq='M')
    months=months.map(str).to_list()
    
    months=list(zip(range(start,len(months)+start),months))
    return render_template('index.html',months=reversed(months))

@app.route('/check/<param>',methods=["POST"])
def check(param):
    sid=request.form.get('sid',None)
    cookies0=cookies.copy()
    print(sid)
    if sid:
        print(sid)
        cookies0['SessionId']=sid
     
    result=getData(*param.split('-'),cookies0)
    
    return result

if __name__=='__main__': 
    app.run(host='0.0.0.0',port=8000,debug=True)

前端页面代码如下:

代码语言:html
AI代码解释
复制
<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>考勤日历</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .center-block {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        table.salarybox th {
            height: 41px;
            line-height: 41px;
            border-top: 2px #333333 solid;
            border-bottom: 1px #333333 solid;
            border-left: 1px #333333 solid;
            border-right: 1px #333333 solid;
            font-size: 16px;
            text-align: center;
        }

        table.salarybox td {
            text-align: center;
            font-size: 14px;
            border-bottom: 1px #cccccc solid;
            line-height: 35px;
        }

        table.salarybox th.text_left,
        table.salarybox td.text_left {
            text-align: left;
        }

        #table {
            margin-bottom: 50px;
        }

        #calendar {
            display: inline-block;
        }

        table.month {
            width: 600px;

        }

        table.month tr {
            line-height: 50px;
        }

        table.month th,
        td {
            font-size: 20px;
            border: 1px solid;
            width: 80px;
            text-align: center;
        }
        
        .sun,.sat{
            background: lightgray;
        }
        td.blue {

            background: lightblue;
            color: blue;
            border-color: black;
        }

        td.red {
            color: red;
            background: lightpink;
            border-color: black;
        }

        sub,
        sup {
            color: gray;
            font-size: 8px;
        }

    </style>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>


    <div class="center-block text-center">

        <h1>请选择月份!</h1>
        <p class="bg-warning" style="display: inline-block;">使用时保持登录OA HR平台,日历显示红色表示上午或下午未打卡</p>
        <form class="form-inline" role="search">

            <div class="form-group">
                <input id="sid" type="text" class="form-control" placeholder="请填写你的考勤SessionId">
            </div>
            <div class="form-group">
                <select id="month" class="form-control" placeholder="">
                    {% for month in months%}
                    <option value="{{month[0]}}-{{month[1]}}">{{month[1]}}</option>
                    {% endfor %}
                </select>
            </div>

            <button type="submit" class="btn btn-default">查询</button>
        </form>

        <div class="container">

            <div class="row" id="calendar">

            </div>
            <div class="row" id="table">

            </div>
            <div class="row">
                <img src="/static/imgs/help.png" class="img-responsive">
            </div>

        </div>

    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="/static/libs/jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/static/libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script>
        $(function() {
            $('select')[0].selectedIndex = 1;

            $('form').submit(function(e) {
                e.preventDefault();
                var month = $('#month').val();
                var params = {
                    sid: $('#sid').val()
                };
                $.post('/check/' + month, params, function(data) {
                    $('#calendar').html(data['calHtml']);
                    $('#table').html(data['table']);

                    $('table.month td').map((i, x) => {
                        var num = $(x).text().trim();
                        if (num == '') {
                            return
                        }
                        var now = new Date();
                        var year0 = month.split('-')[1];
                        var month0 = month.split('-')[2];

                        if (now.getFullYear() == year0 && (now.getMonth() + 1) == month0 && num >= now.getDate()) {
                            return
                        }
                        var items = data['data'].filter(y => {

                            return y[0].substr(8, 2) == parseInt(num);
                        })
                        var item1 = items.filter(z => {
                            return z[1] < '12:00'
                        })
                        var item2 = items.filter(z => {
                            return z[1] > '12:00'
                        })

                        if (item1.length > 0 && item2.length > 0) {
                            $(x).addClass('blue');
                        } else {
                            if (item1.length < 1) {
                                $(x).prepend($("<sup>AM</sup>"));
                            }
                            if (item2.length < 1) {
                                $(x).append($("<sub>PM</sub>"));
                            }
                            $(x).addClass('red');
                        }


                    });
                    $('table.month tr').each((i, x) => {
                        $(x).find('td:gt(4)').removeClass('red').children().remove();

                    });
                    window.scrollTo(0,0);
                })
                return false;
            })
        })

    </script>
</body>

</html>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【文字识别】基于腾讯AI识别车牌号码,轻松写一个停车场管理系统,YYDS
本接口支持对中国大陆机动车车牌的自动定位和识别,返回地域编号和车牌号码与车牌颜色信息。
程序员晚枫
2023/01/30
2.1K0
【文字识别】基于腾讯AI识别车牌号码,轻松写一个停车场管理系统,YYDS
AI 最佳实践|用腾讯云智能文本图像增强打造一个掌上扫描仪
在日常生活、工作中, 受限于拍照技术、拍摄条件等制约,得到的文本图像往往存在光照不均、角度倾斜、文字模糊等情况。这种低质量的文本图像不仅不利于保存和后续研究,也不利于光学字符识别。为了解决以上问题,特别调研了业内相关的产品,发现腾讯云AI的文本图像增强能力可以很好的打造一个掌上扫描仪。
腾讯云AI
2023/04/26
1.7K0
AI 最佳实践|用腾讯云智能文本图像增强打造一个掌上扫描仪
【批量图片区域识别改名】有没有可以自动批量识别jpg图片上的区域文字,并直接提取文字命名的软件么? 没有我们教你基于WPF和腾讯api的方案做一个
在很多实际工作场景中,我们可能会遇到大量的图片文件,这些图片中包含特定区域的文字信息,比如发票图片上的发票号码、合同图片上的合同编号等。手动识别并为图片命名效率极低且容易出错。使用自动批量识别 JPG 图片上的区域文字,并直接提取文字为图片命名的软件,可以大大提高工作效率,减少人工操作带来的错误。
不负众望
2025/02/24
3940
【批量图片区域识别改名】有没有可以自动批量识别jpg图片上的区域文字,并直接提取文字命名的软件么? 没有我们教你基于WPF和腾讯api的方案做一个
🔍 腾讯云OCR为何物?又是如何助力各行业实现“结构化”升级?
在这个数字化和信息化高速发展的时代,各行各业都在寻求更高效的方式来管理数据。尤其是在文件处理领域,传统的人工方式已经无法满足快速、精确的需求。你有没有想过,电子票据、复杂的发票单据、跨境物流单证,甚至是各种行业的繁琐纸质材料,能不能像数字文本一样,精准读取、提取、分析?答案是:可以!这正是腾讯云智能结构化OCR技术的魅力所在。
bug菌
2024/12/17
4350
🔍 腾讯云OCR为何物?又是如何助力各行业实现“结构化”升级?
Python实现图片文字提取,准确率高达99%,100多个功能全给你!
趁着假期,给大家更新了100多个文字识别的自动化办公专用功能,本周写了3篇文章介绍了其中3个:
程序员晚枫
2023/03/02
6.4K0
Python实现图片文字提取,准确率高达99%,100多个功能全给你!
最佳实践|用腾讯云AI文字识别实现企业资质证书识别
企业经营活动中,资质证书是证明企业生产能力的必要证件,也是企业入驻各类平台、组织项目申报等必须提交的,这里面包括营业执照、税务登记证、生产许可证、高新技术企业认定证书等等。在日常工作中,以平台类企业入驻为例,要求企业上传对应的资质证书然后进行审核,但由于企业资质证书种类繁多,各行各业的资质证书都有差异,没有统一的板式,通过人工审核工作量巨大且很容易出错。
腾讯云AI
2022/07/22
6.6K1
最佳实践|用腾讯云AI文字识别实现企业资质证书识别
深入解析腾讯云文字识别OCR:技术原理、操作实践与应用思考
腾讯云文字识别OCR(Optical Character Recognition,光学字符识别)是一种将图像或手写文字转换成文本的技术。腾讯云文字识别OCR是腾讯云AI能力之一,可以将印刷体、手写体、数字、符号等多种形式的文字图像转换成可编辑文字内容,同时提供多种编程语言SDK、API等接口方式,为各行业提供高效、准确的文字识别服务。
bug菌
2023/08/29
2.7K0
深入解析腾讯云文字识别OCR:技术原理、操作实践与应用思考
Python3 下实现 腾讯人工智能API 调用
a、鹅厂近期发布了自己的人工智能 api,包括身份证ocr、名片ocr、文本分析等一堆API,因为前期项目用到图形OCR,遂实现试用了一下,发现准确率还不错,放出来给大家共享一下。
黯然销魂掌
2018/09/27
1.8K0
Python3 下实现 腾讯人工智能API 调用
免费使用微信OCR识别证件
https://fuwu.weixin.qq.com/service/detail/000ce4cec24ca026d37900ed551415
码之有理
2024/11/16
9490
最佳实践|用腾讯云AI文字识别实现企业资质证书识别
企业经营活动中,资质证书是证明企业生产能力的必要证件,也是企业入驻各类平台、组织项目申报等必须提交的,这里面包括营业执照、税务登记证、生产许可证、高新技术企业认定证书等等。 在日常工作中,以平台类企业入驻为例,要求企业上传对应的资质证书然后进行审核,但由于企业资质证书种类繁多,各行各业的资质证书都有差异,没有统一的版式,通过人工审核工作量巨大且很容易出错。 那么,有没有更智能化的方式让资质审核流程更加快捷和高效呢?搜索了国内外的文字识别产品,发现腾讯云AI文字识别新推出了智能结构化识别能力,能够识别并提取各
腾讯云AI
2022/08/26
9.6K2
最佳实践|用腾讯云AI文字识别实现企业资质证书识别
【玩转OCR | 腾讯云智能结构化OCR应用探索和场景实践】
在数字化时代,光学字符识别(OCR)技术已成为企业提升效率、降低成本的关键工具。腾讯云智能结构化OCR凭借其高精度、灵活性和易用性,正在推动跨行业高效精准的文档处理与数据提取新时代。本文将全面介绍腾讯云智能结构化OCR的功能、技术优势、应用场景以及通过实际代码示例展示其应用实践,帮助读者深入了解并有效运用这一强大的工具。
中杯可乐多加冰
2024/12/31
4410
玩转OCR | 探索腾讯云智能结构化识别新境界
通过运用先进的多模态大模型技术,腾讯云OCR能够智能建立键值对应关系,并允许客户根据自身需求定制个性化模板,从而显著提高数据抓取与录入的效率。 这一解决方案广泛适用于政务事务处理、票据核销流程、行业表单自动化填写等多个业务场景。
Eternity._
2024/12/20
2520
玩转OCR | 探索腾讯云智能结构化识别新境界
玩转OCR | 腾讯云智能结构化OCR初次体验
OCR又被称为光学字符识别技术,在数字化转型的浪潮中企业为了提高效率、降低成本的关键工具,而我们今天介绍的这款产品就是腾讯云推出的智能结构化OCR,它凭借其先进的技术和广泛的应用场景,正在推动跨行业高效精准的文档处理与数据提取新时代。
命运之光
2024/12/31
6830
玩转OCR | 腾讯云智能结构化OCR初次体验
最佳实践 | 用腾讯云智能语音打造智能对话机器人
在AI技术的推动下,智能对话机器人逐渐成为我们工作、生活中的重要效率工具,乃至是伙伴,特别是为企业带来最原始最直观的“降本增效”落地实现。
腾讯云AI
2023/04/06
5.7K0
最佳实践 | 用腾讯云智能语音打造智能对话机器人
官方推荐 | 《2分钟带你认识腾讯云文字识别》
关注腾讯云大学,了解最新行业技术动态  戳【阅读原文】查看55个腾讯云产品全集 一、课程概述 文字识别(Optical Character Recognition,OCR)基于腾讯优图实验室世界领先的深度学习技术,将图片上的文字内容,智能识别成为可编辑的文本。OCR 支持身份证、名片等卡证类和票据类的印刷体识别,也支持运单等手写体识别,支持提供定制化服务,可以有效地代替人工录入信息。  【课程目标】 了解文字识别的子产品 了解文字识别的特性 了解文字识别的应用场景 二、讲义 腾讯云提供文字识别OCR服务,
腾讯产业互联网学堂1
2023/05/29
1.5K0
官方推荐 | 《2分钟带你认识腾讯云文字识别》
基于多复杂交通场景采集帧图片的目标识别技术方案应用与实践
本人曾有幸在一家大型地图公司任职数据挖掘工程师,几乎每日要处理PB级以上多复杂场景的交通数据,其中基于大数据的超量采集帧图片处理技术具有比较强的挑战性,也可以说C端产品很多优化细节以及用户体感好坏很大程度都取决于我们对于这些实时采集帧图片的处理和分析。
fanstuck
2024/12/17
8353
基于多复杂交通场景采集帧图片的目标识别技术方案应用与实践
文字识别界的“拍立得”?抛开低效办公,彻底提高你的工作效率
朋友小君是一家创业公司老板,最近这段时间总是抱怨自己公司每天要处理的文件又多又杂,员工工作效率因此被拖慢了不少。
云巴巴
2021/10/09
4.1K0
文字识别界的“拍立得”?抛开低效办公,彻底提高你的工作效率
玩转OCR | 腾讯云智能结构化OCR全面指南
在数字化转型的浪潮中,光学字符识别(OCR)技术已成为企业提高效率、降低成本的关键工具。腾讯云智能结构化OCR凭借其先进的技术和广泛的应用场景,正在推动跨行业高效精准的文档处理与数据提取新时代。本文将全面介绍腾讯云智能结构化OCR的功能、技术优势、应用实践以及行业案例,帮助您深入了解并有效运用这一强大的工具。
Damon小智
2024/12/24
1.1K1
玩转OCR | 腾讯云智能结构化OCR全面指南
腾讯ai人工智能OCR文字识别2020.12.18
2、快速入门https://cloud.tencent.com/document/product/866/17622
用户7138673
2022/09/22
3.2K0
腾讯ai人工智能OCR文字识别2020.12.18
最佳实践|用腾讯云AI文字识别从0到1实现通信行程卡识别
疫情防控常态化下,学校为了保证孩子身体健康和安全,要求所有入校人员提供通信行程码并审核。但是通过人工审核的方式,不仅工作量极大且容易出错。作为一名软件开发工程师,我开始思考并着手调研,希望可以通过更智能的方式来解决。
腾讯云AI
2022/05/13
3K0
最佳实践|用腾讯云AI文字识别从0到1实现通信行程卡识别
推荐阅读
【文字识别】基于腾讯AI识别车牌号码,轻松写一个停车场管理系统,YYDS
2.1K0
AI 最佳实践|用腾讯云智能文本图像增强打造一个掌上扫描仪
1.7K0
【批量图片区域识别改名】有没有可以自动批量识别jpg图片上的区域文字,并直接提取文字命名的软件么? 没有我们教你基于WPF和腾讯api的方案做一个
3940
🔍 腾讯云OCR为何物?又是如何助力各行业实现“结构化”升级?
4350
Python实现图片文字提取,准确率高达99%,100多个功能全给你!
6.4K0
最佳实践|用腾讯云AI文字识别实现企业资质证书识别
6.6K1
深入解析腾讯云文字识别OCR:技术原理、操作实践与应用思考
2.7K0
Python3 下实现 腾讯人工智能API 调用
1.8K0
免费使用微信OCR识别证件
9490
最佳实践|用腾讯云AI文字识别实现企业资质证书识别
9.6K2
【玩转OCR | 腾讯云智能结构化OCR应用探索和场景实践】
4410
玩转OCR | 探索腾讯云智能结构化识别新境界
2520
玩转OCR | 腾讯云智能结构化OCR初次体验
6830
最佳实践 | 用腾讯云智能语音打造智能对话机器人
5.7K0
官方推荐 | 《2分钟带你认识腾讯云文字识别》
1.5K0
基于多复杂交通场景采集帧图片的目标识别技术方案应用与实践
8353
文字识别界的“拍立得”?抛开低效办公,彻底提高你的工作效率
4.1K0
玩转OCR | 腾讯云智能结构化OCR全面指南
1.1K1
腾讯ai人工智能OCR文字识别2020.12.18
3.2K0
最佳实践|用腾讯云AI文字识别从0到1实现通信行程卡识别
3K0
相关推荐
【文字识别】基于腾讯AI识别车牌号码,轻松写一个停车场管理系统,YYDS
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验