后台使用Flask + Excel ,前端使用 Bootstrap .
后端python 代码：
import ast
import json
from flask import jsonify ,Flask,request
from flask import render_template
import datetime
import pandas as pd
import textwrap
import time,threading
import tkinter as tk
import ttkbootstrap as ttk
from random import choice
from ttkbootstrap.constants import *
import openpyxl
from openpyxl import Workbook ,load_workbook #导入模块
import re
import os
from tkinter import messagebox # 弹出提示框
from tkinter.scrolledtext import ScrolledText
app = Flask (__name__,static_folder="static")
# app = Flask(__name__,template_folder='../xxxx',static_folder="../xxxx")
# 读取excel表格中的日期
def xldate_as_datetime(xldate, datemode=0):
if datemode not in (0, 1):
raise Exception(datemode)
if xldate == 0.00:
return datetime.time(0, 0, 0)
if xldate < 0.00:
raise Exception(xldate)
xldays = int(xldate)
frac = xldate - xldays
seconds = int(round(frac * 86400.0))
assert 0 <= seconds <= 86400
if seconds == 86400:
seconds = 0
xldays += 1
# if xldays >= _XLDAYS_TOO_LARGE[datemode]:
# raise XLDateTooLarge(xldate)
if xldays == 0:
# second = seconds % 60; minutes = seconds // 60
minutes, second = divmod(seconds, 60)
# minute = minutes % 60; hour = minutes // 60
hour, minute = divmod(minutes, 60)
return datetime.time(hour, minute, second)
if xldays < 61 and datemode == 0:
raise Exception(xldate)
return (
datetime.datetime.fromordinal(xldays + 693594 + 1462 * datemode)
+ datetime.timedelta(seconds=seconds)
)
#template_folder='../xxxx' 指 前端文件的目录
#static_folder="../xxxx" 指 静态文件的目录
@app.route('/', methods=["GET"])
# def start_server():
# app.run(host='0.0.0.0',port=8080)
def index():
wb = openpyxl.load_workbook('工作任务统计.xlsx')
# 获取workbook中所有的表格
# sheets = wb.get_sheet_names()
sheets = wb.sheetnames
# print(sheets)
# 循环遍历所有sheet
未完成任务 = []
已完成任务 = []
未完成任务计数 = 0
未完成任务分类计数 = []
已完成任务计数 = 0
已完成任务分类计数 = []
工作结束时间=[]
已完成工作结束时间 = []
任务开始时间=[]
共几个工作人员=len(sheets)
按月统计每人任务数量 = [] # 存放每月人员名称
for ii in range(len(sheets)):
sheet = wb.get_sheet_by_name(sheets[ii])
for r in range(2, sheet.max_row):
# print(sheet.cell(row=r, column=7).value)
if sheet.cell(row=r, column=7).value is None: #判断表格数据是否为空
# print('111111111111111111111111111111')
# print(sheet.cell(row=r, column=7).value)
continue
hh = sheet.cell(row=r, column=7).value
hh = str(hh)[5:7] # 得到安排工作月份
reg="".join(re.findall("[\u4e00-\u9fa5]",str(sheet))) #得到sheet表名称
按月统计每人任务数量.append(str(reg) +" " +hh )
# 利用pandas模块下的value_counts方法(这里需要安装pandas模块）
# print(按月统计每人任务数量)
dict2 = {}
for key in 按月统计每人任务数量:
dict2[key] = dict2.get(key, 0) + 1
print(dict2)
res = {}
for i, j in dict2.items(): #感谢优快云 请叫我问哥 https://blog.youkuaiyun.com/soonway2010?type=ask
n, m = i.split()
res.setdefault(n, [0] * 12)[int(m) - 1] += j
# print(res)
valsname=res.keys()
valsname=list(valsname)
# print(valsname)
vals = res.values()
vals=list(vals)
for i in range(len(sheets)):
sheet = wb.get_sheet_by_name(sheets[i])
# print('\n\n第' + str(i + 1) + '个sheet: ' + sheet.title + '->>>')
for r in range(1, sheet.max_row + 1):
if sheet.cell(row=r, column=10).value == "否":
未完成任务计数 = 未完成任务计数 + 1
# 未完成任务分类计数[sheet.title] =未完成任务计数+1
未完成任务分类计数.append(sheet.title)
aa=sheet.cell(row=r, column=8).value
# bb=xldate_as_datetime(aa) #将excel读取到日期格式数据进行转换。
bb=str(aa)[0:10] #去年时间保留日期
hh = sheet.cell(row=r, column=7).value
hh = str(hh)[5:7] #得到安排工作月份
任务开始时间.append(hh+"月")
工作结束时间.append(bb)
未完成任务.append(sheet.cell(row=r, column=5).value)
# 未完成任务分类计数.append(未完成任务计数+1)
if sheet.cell(row=r, column=10).value == "是":
已完成任务计数 = 已完成任务计数 + 1
aa = sheet.cell(row=r, column=8).value
hh=sheet.cell(row=r, column=7).value
hh=str(hh)[5:7]
# bb = xldate_as_datetime(aa) # 将excel读取到日期格式数据进行转换。
bb = str(aa)[0:10] # 去年时间保留日期
已完成工作结束时间.append(bb)
任务开始时间.append(hh+"月")
已完成任务分类计数.append(sheet.title)
已完成任务.append(sheet.cell(row=r, column=3).value)
总任务数 = 未完成任务计数 + 已完成任务计数
dict = {} #统计任务开始时间中每个月安排多少次工作。
for key in 任务开始时间:
dict[key] = dict.get(key, 0) + 1
global 任务开始月份,任务月份工作量统计
任务开始月份 = list(dict.keys())
任务开始月份 = re.findall("\d+", str(任务开始月份))
任务月份工作量统计=str(list(dict.values())).replace('[', '')
任务月份工作量统计=任务月份工作量统计.replace(']', '')
# 任务月份工作量统计=''.join(任务月份工作量统计)
# print(任务月份工作量统计)
# print("...........................................")
# print(未完成任务分类计数)
# print("...........................................")
#print(任务开始时间)
# print("总任务数: " + str(总任务数))
# print(未完成任务)
# print(已完成任务)
# print(未完成任务计数)
# print(已完成任务计数)
每个人完成任务计数 = {}
每个人未完成任务计数 = {}
未完成人员姓名= []
未完成人员任务数量=[]
已完成人员姓名 = []
已完成人员任务数量 = []
for i in range(len(sheets)):
sheet = wb.get_sheet_by_name(sheets[i])
每个人完成任务计数.update({sheets[i]: 已完成任务分类计数.count(sheets[i])})
每个人未完成任务计数.update({sheets[i]: 未完成任务分类计数.count(sheets[i])})
for x, y in 每个人完成任务计数.items(): # 通过使用 items() 函数遍历键和值：
# print(x, y)
未完成人员姓名.append(x)
未完成人员任务数量.append(y)
for x, y in 每个人未完成任务计数.items(): # 通过使用 items() 函数遍历键和值：
# print(x, y)
已完成人员姓名.append(x)
已完成人员任务数量.append(y)
valsname2=str(valsname)
print(type(valsname2))
return render_template("index.html",valsname2=valsname2,valsname=valsname,vals=vals,任务月份工作量统计=任务月份工作量统计,共几个工作人员=共几个工作人员,已完成工作结束时间=已完成工作结束时间,工作结束时间=工作结束时间,总任务数=str(总任务数),已经完成=已完成任务计数,未完成=未完成任务计数,未完成人员姓名=未完成人员姓名,未完成人员任务数量=未完成人员任务数量,已完成人员姓名=已完成人员姓名,已完成人员任务数量=已完成人员任务数量,已完成任务分类计数=已完成任务分类计数,已完成任务=已完成任务,未完成任务=未完成任务,未完成任务分类计数=未完成任务分类计数)
@app.route('/echarts', methods=["GET"]) #echarts 名字可以改为任意，但一定要与HTML文件中一至
def echarts():
return jsonify(任务开始月份=任务开始月份,任务月份工作量统计=任务月份工作量统计,)
app.run(host='0.0.0.0',port=80)
前端index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>DashboardKit Bootstrap 5 Admin Template</title>
<!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 11]>
<![endif]-->
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="DashboardKit is made using Bootstrap 5 design framework. Download the free admin template & use it for your project.">
<meta name="keywords" content="DashboardKit, Dashboard Kit, Dashboard UI Kit, Bootstrap 5, Admin Template, Admin Dashboard, CRM, CMS, Free Bootstrap Admin Template">
<meta name="author" content="DashboardKit ">
<!-- Favicon icon -->
<!-- font css -->
<link rel="stylesheet" href="static/css/feather.css">
<link rel="stylesheet" href="static/css/fontawesome.css">
<link rel="stylesheet" href="static/css/material.css">
<!-- vendor css -->
<link rel="stylesheet" href="static/css/style.css" id="main-style-link">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/echarts/5.4.0/echarts.min.js"></script>
</head>
<body class="">
<!-- [ Pre-loader ] start -->
<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>
<!-- [ Pre-loader ] End -->
<!-- [ Mobile header ] start -->
<div class="pc-mob-header pc-header">
<div class="pcm-logo">
<img src="static/picture/logo.svg" alt="" class="logo logo-lg">
</div>
<div class="pcm-toolbar">
<a href="#!" class="pc-head-link" id="mobile-collapse">
<div class="hamburger hamburger--arrowturn">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</a>
<a href="#!" class="pc-head-link" id="headerdrp-collapse">
<i data-feather="align-right"></i>
</a>
<a href="#!" class="pc-head-link" id="header-collapse">
<i data-feather="more-vertical"></i>
</a>
</div>
</div>
<!-- [ Mobile header ] End -->
<!-- [ navigation menu ] start -->
<nav class="pc-sidebar ">
<div class="navbar-wrapper">
<div class="m-header">
<a href="" class="b-brand">
<!-- ======== change your logo hear ============ -->
<img src="static/picture/logo.svg" alt="" class="logo logo-lg">
<img src="static/picture/logo-sm.svg" alt="" class="logo logo-sm">
</a>
</div>
<div class="navbar-content">
<ul class="pc-navbar">
<li class="pc-item pc-caption">
<label>Navigation</label>
</li>
<li class="pc-item">
<a href="" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">home</i></span><span class="pc-mtext">Dashboard</span></a>
</li>
<li class="pc-item pc-caption">
<label>Elements</label>
<span>UI Components</span>
</li>
<li class="pc-item">
<a href="bc_typography.html" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">business_center</i></span><span class="pc-mtext">Typography</span></a>
</li>
<li class="pc-item">
<a href="icon-feather.html" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">history_edu</i></span><span class="pc-mtext">Icons</span></a>
</li>
<li class="pc-item pc-caption">
<label>table</label>
</li>
<li class="pc-item">
<a href="tbl_bootstrap.html" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">table_rows</i></span><span class="pc-mtext">Bootstrap table</span></a>
</li>
<li class="pc-item pc-caption">
<label>Chart & Maps</label>
<span>Tones of readymade charts</span>
</li>
<li class="pc-item">
<a href="chart-apex.html" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">bubble_chart</i></span><span class="pc-mtext">Chart</span></a>
</li>
<li class="pc-item">
<a href="map-google.html" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">my_location</i></span><span class="pc-mtext">Maps</span></a>
</li>
<li class="pc-item pc-caption">
<label>Pages</label>
<span>Redymade Pages</span>
</li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link"><span class="pc-micon"><i class="material-icons-two-tone">https</i></span><span class="pc-mtext">Authentication</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="auth-signup.html" target="_blank">Sign up</a></li>
<li class="pc-item"><a class="pc-link" href="auth-signin.html" target="_blank">Sign in</a></li>
</ul>
</li>
<li class="pc-item pc-caption">
<label>Other</label>
<span>Extra more things</span>
</li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link"><span class="pc-micon"><i class="material-icons-two-tone">list_alt</i></span><span class="pc-mtext">Menu levels</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Menu Level 2.1</a></li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Menu level 2.2<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.2</a></li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Menu level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Menu level 4.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Menu level 4.2</a></li>
</ul>
</li>
</ul>
</li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Menu level 2.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.2</a></li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Menu level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Menu level 4.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Menu level 4.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pc-item"><a href="sample-page.html" class="pc-link "><span class="pc-micon"><i class="material-icons-two-tone">storefront</i></span><span class="pc-mtext">Sample page</span></a></li>
</ul>
<div class="card text-center">
<div class="card-body">
<button type="button" class="btn-close btn-close-white" data-dismiss="alert" aria-hidden="true"></button>
<i class="feather icon-sunset f-40"></i>
Copyright © 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a>
</div>
</div>
</div>
</div>
</nav>
<!-- [ navigation menu ] end -->
<!-- [ Header ] start -->
<header class="pc-header ">
<div class="header-wrapper">
<div class="me-auto pc-mob-drp">
<ul class="list-unstyled">
</ul>
</div>
<div class="ms-auto">
<ul class="list-unstyled">
<li class="dropdown pc-h-item">
<a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="material-icons-two-tone">search</i>
</a>
<div class="dropdown-menu dropdown-menu-end pc-h-dropdown drp-search">
<form class="px-3">
<div class="form-group mb-0 d-flex align-items-center">
<i data-feather="search"></i>
<input type="search" class="form-control border-0 shadow-none" placeholder="Search here. . .">
</div>
</form>
</div>
</li>
<li class="dropdown pc-h-item">
<a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="static/picture/avatar-2.jpg" alt="user-image" class="user-avtar">
<span>
<span class="user-name">Joseph William</span>
<span class="user-desc">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
<div class=" dropdown-header">
<h5 class="text-overflow m-0"><span class="badge bg-light-primary"><a href="index1.html" target="_blank">Upgrade to
Pro</a></span></h5>
</div>
<a href="auth-signin.html" class="dropdown-item">
<i class="material-icons-two-tone">chrome_reader_mode</i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<!-- [ Header ] end -->
<!-- [ Main Content ] start -->
<div class="pc-container">
<div class="pcoded-content">
<!-- [ breadcrumb ] start -->
<div class="page-header">
<div class="page-block">
<div class="row align-items-center">
<div class="col-md-6">
<div class="page-header-title">
<h5 class="m-b-10">Dashboard sale</h5>
</div>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="">Home</a></li>
<li class="breadcrumb-item">Dashboard sale</li>
</ul>
</div>
</div>
</div>
</div>
<!-- [ breadcrumb ] end -->
<!-- [ Main Content ] start -->
<div class="row">
<!-- support-section start -->
<div class="col-xl-6 col-md-12">
<div class="card flat-card">
<div class="row-table">
<div class="col-sm-6 card-body br">
<div class="row">
<div class="col-sm-4">
<i class="material-icons-two-tone text-primary mb-1">group</i>
</div>
<div class="col-sm-8 text-md-center">
<h5>{{总任务数}}</h5>
<span>总任务数</span>
</div>
</div>
</div>
<div class="col-sm-6 d-none d-md-table-cell d-lg-table-cell d-xl-table-cell card-body br">
<div class="row">
<div class="col-sm-4">
<i class="material-icons-two-tone text-primary mb-1">language</i>
</div>
<div class="col-sm-8 text-md-center">
<h5>{{已经完成}}</h5>
<span>已经完成</span>
</div>
</div>
</div>
<div class="col-sm-6 card-body">
<div class="row">
<div class="col-sm-4">
<i class="material-icons-two-tone text-primary mb-1">unarchive</i>
</div>
<div class="col-sm-8 text-md-center">
<h5>{{未完成}}</h5>
<span>未完成</span>
</div>
</div>
</div>
</div>
<!-- [ basic-table ] start -->
<div class="col-md-15">
<div class="card">
<div class="card-header">
<h5>任务分类统计</h5>
<span class="d-block m-t-5">use class <code>table</code> inside table element</span>
</div>
<div class="card-body table-border-style">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>任务总量</th>
<th>完成任务数</th>
<th>未完成数量</th>
<th>完成百分比</th>
</tr>
</thead>
<tbody>
{%for x in range(共几个工作人员)%}
<tr>
<td>{{x+1}}</td>
<td>{{未完成人员姓名[x]}}</td>
<td>{{未完成人员任务数量[x]+已完成人员任务数量[x]}}</td>
<td>{{未完成人员任务数量[x]}}</td>
<td>{{已完成人员任务数量[x]}}</td>
<td>{{'{0:0.0f}'.format(未完成人员任务数量[x]/(未完成人员任务数量[x]+已完成人员任务数量[x])*100)}}</td>
</tr>
{%endfor%}
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- [ basic-table ] end -->
</div>
<div class="row">
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>任务完成情况统计</h5>
</div>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
title: {
text: '任务完成情况统计',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '任务完成情况',
type: 'pie',
radius: '50%',
data: [
{ value: {{已经完成}}, name: '已完成任务' },
{ value: {{未完成}}, name: '未完成任务' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div>
<div >
<div class="card">
<div class="card-header">
<h5>月工作任务量</h5>
</div>
<div id="container" style="width: 100%;height:400px;"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
const posList = [
'left',
'right',
'top',
'bottom',
'inside',
'insideTop',
'insideLeft',
'insideRight',
'insideBottom',
'insideTopLeft',
'insideTopRight',
'insideBottomLeft',
'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
const labelOption = {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
};
myChart.setOption({
series: [
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
}
]
});
}
};
const labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {}
}
};
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['{{valsname[0]}}','{{valsname[1]}}','{{valsname[2]}}', '{{valsname[3]}}']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '{{valsname[3]}}',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: {{vals[3]}}
},
{
name: '{{valsname[0]}}',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: {{vals[0]}}
},
{
name: '{{valsname[1]}}',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: {{vals[1]}}
},
{
name: '{{valsname[2]}}',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: {{vals[2]}}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</div>
</div>
</div>
</div>
<!-- support-section end -->
<!-- 饼形图 start -->
<div class="col-xl-6 col-md-12"style="width:40%";>
</div>
<!-- 饼形图 end -->
<!-- [ Contextual-table ] start -->
<div class="col-md-12" style="width:100%;">
<div class="card">
<div class="card-header">
<h5>未完成任务列表-共{{未完成}}个</h5>
<span class="d-block m-t-5">{{valsname[0]}},{{valsname[1]}},{{valsname[2]}}, {{valsname[3]}} For Make row Contextual add Contextual class like <code>.table-success</code> in <code> tr tag</code> and For cell add Contextual class in <code> td or th tag</code> .</span>
</div>
<div class="pro-scroll"style="position:relative;overflow: auto;">
<div class="card-body p-0">
<table class="table table-bordered table-striped table-hover" style="word-break:break-all; word-wrap:break-all;">
<thead>
<tr>
<th>序号</th>
<th>任务名称</th>
<th>承办人</th>
<th>工作结束时间</th>
</tr>
</thead>
<tbody>
{%for x in range(未完成)%}
<tr class="table-success">
<td>{{x+1}}</td>
<td class="text-wrap">{{未完成任务[x]}}</td>
<td>{{未完成任务分类计数[x]}}</td>
<td>{{工作结束时间[x]}}</td>
</tr>
{%endfor%}
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- [ Contextual-table ] end -->
<!-- [ Contextual-table ] start -->
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h5>已完成任务列表-共{{已经完成}}个</h5>
<span class="d-block m-t-5">For Make row Contextual add Contextual class like <code>.table-success</code> in <code> tr tag</code> and For cell add Contextual class in <code> td or th tag</code> .</span>
</div>
<div class="pro-scroll"style="height:500px;position:relative;overflow: auto;">
<div class="card-body p-0">
<table class="table table-bordered table-striped table-hover with-check" style="word-break:break-all; word-wrap:break-all;">
<thead>
<tr>
<th>序号</th>
<th>任务名称</th>
<th>承办人</th>
<th>工作结束时间</th>
</tr>
</thead>
<tbody>
{%for x in range(已经完成)%}
<tr class="table-success">
<td>{{x+1}}</td>
<td class="text-wrap">{{已完成任务[x]}}</td>
<td>{{已完成任务分类计数[x]}}</td>
<td>{{已完成工作结束时间[x]}}</td>
</tr>
{%endfor%}
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- [ Contextual-table ] end -->
</div>
</div>
<!-- [ Main Content ] end -->
</div>
<!-- [ Main Content ] end -->
<!-- Warning Section start -->
<!-- Older IE warning message -->
<!--[if lt IE 11]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade
<br/>to any of the following web browsers to access this website.
</p>
<div class="iew-container">
<ul class="iew-download">
<li>
<a href="http://www.google.com/chrome/">
<img src="assets/images/browser/chrome.png" alt="Chrome">
<div>Chrome</div>
</a>
</li>
<li>
<a href="#">
<img src="assets/images/browser/firefox.png" alt="Firefox">
<div>Firefox</div>
</a>
</li>
<li>
<a href="#">
<img src="assets/images/browser/opera.png" alt="Opera">
<div>Opera</div>
</a>
</li>
<li>
<a href="#">
<img src="assets/images/browser/safari.png" alt="Safari">
<div>Safari</div>
</a>
</li>
<li>
<a href="#">
<img src="assets/images/browser/ie.png" alt="">
<div>IE (11 & above)</div>
</a>
</li>
</ul>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Warning Section Ends -->
<!-- Required Js -->
<script src="static/js/vendor-all.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/pcoded.js"></script>
<script src="static/js/feather.min.js"></script>
<!-- Apex Chart -->
<script src="static/js/apexcharts.min.js"></script>
<div class="fixed-button active"><a href="#" target="_blank" class="btn btn-md btn-success"><i class="material-icons-two-tone text-white">shopping_cart</i> Upgrade
To
Pro</a> </div>
<!-- custom-chart js -->
<script src="static/js/dashboard-sale.js"></script>
</body>
</html>
完成后页面：
扫一扫
1198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
