You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
416 lines
21 KiB
416 lines
21 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
<script src="js/jquery-2.1.3.min.js"></script>
|
|
<link href="layui/css/layui.css" rel="stylesheet" />
|
|
<script src="layui/layui.js"></script>
|
|
<style type="text/css">
|
|
html {
|
|
height: 98%;
|
|
}
|
|
|
|
body {
|
|
height: 98%;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.clsDiv1 {
|
|
width: 60%;
|
|
/*text-align: center;*/
|
|
margin: 0 auto;
|
|
line-height: 50px;
|
|
background-color: #edecec;
|
|
padding: 10px 10px 20px 10px;
|
|
border: 1px solid #a4a1a1;
|
|
border-radius: 15px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
layui.use(['laydate', 'table'], function () {
|
|
var laydate = layui.laydate;
|
|
var table = layui.table;
|
|
//日期时间范围
|
|
laydate.render({
|
|
elem: '#test10'
|
|
, type: 'datetime'
|
|
, range: true
|
|
, value: '2022-05-01 00:00:00 - 2022-12-01 00:00:00'
|
|
// , show: true
|
|
});
|
|
|
|
|
|
|
|
var dataArr = [
|
|
{ "id": "10001", "rwTitle": "任务1", "zxEmp": "张三,李四", "warnTime": "2022-11-13 09:30:00", "endTime": "2022-11-16 09:30:00", "rwSub": "5/5", "OkTime": "2022-11-10 10:21:33", "rwState": "已完成", "rwRemark": "完成领导部署任务", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10002", "rwTitle": "任务2", "zxEmp": "张三,李四", "warnTime": "2022-11-13 09:30:00", "endTime": "2022-11-16 09:30:00", "rwSub": "5/5", "OkTime": "", "rwState": "逾期完成", "rwRemark": "完成领导部署任务", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10003", "rwTitle": "任务3", "zxEmp": "张三,李四", "warnTime": "2022-11-13 09:30:00", "endTime": "2022-11-16 09:30:00", "rwSub": "5/5", "OkTime": "2022-11-10 12:21:33", "rwState": "已完成", "rwRemark": "完成领导部署任务", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10004", "rwTitle": "任务4", "zxEmp": "张三,李四", "warnTime": "2022-11-13 09:30:00", "endTime": "2022-11-16 09:30:00", "rwSub": "1/5", "OkTime": "", "rwState": "未完成", "rwRemark": "完成领导部署任务", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10005", "rwTitle": "任务5", "zxEmp": "张三,李四", "warnTime": "2022-11-13 09:30:00", "endTime": "2022-11-16 09:30:00", "rwSub": "4/5", "OkTime": "", "rwState": "逾期完成", "rwRemark": "完成领导部署任务", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10006", "rwTitle": "任务6", "zxEmp": "张三,李四", "warnTime": "2022-11-13 09:30:00", "endTime": "2022-11-16 09:30:00", "rwSub": "3/5", "OkTime": "", "rwState": "未完成", "rwRemark": "完成领导部署任务", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10007", "rwTitle": "任务7", "zxEmp": "张三,李四", "warnTime": "2022-11-13 09:30:00", "endTime": "2022-11-16 09:30:00", "rwSub": "3/5", "OkTime": "", "rwState": "未完成", "rwRemark": "完成领导部署任务", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10008", "rwTitle": "任务8", "zxEmp": "张三,李四", "warnTime": "2022-11-13 09:30:00", "endTime": "2022-11-16 09:30:00", "rwSub": "5/5", "OkTime": "2022-11-10 13:21:33", "rwState": "已完成", "rwRemark": "完成领导部署任务", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10009", "rwTitle": "任务9", "zxEmp": "张三,李四", "warnTime": "2022-11-13 09:30:00", "endTime": "2022-11-16 09:30:00", "rwSub": "5/5", "OkTime": "2022-11-10 14:21:33", "rwState": "已完成", "rwRemark": "完成领导部署任务", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10010", "rwTitle": "任务10", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "逾期完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10011", "rwTitle": "任务11", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "未完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10012", "rwTitle": "任务12", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "已完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10013", "rwTitle": "任务13", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "未完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10014", "rwTitle": "任务14", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "未完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10015", "rwTitle": "任务15", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "已完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10016", "rwTitle": "任务16", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "未完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10017", "rwTitle": "任务17", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "已完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10018", "rwTitle": "任务18", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "未完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10019", "rwTitle": "任务19", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "已完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
{ "id": "10020", "rwTitle": "任务20", "zxEmp": "张三", "warnTime": "2022-11-15 09:30:00", "endTime": "2022-11-18 09:30:00", "rwSub": "0/0", "rwState": "未完成", "rwRemark": "完成领导安排工作", "createTime": "2022-11-10 17:21:33" },
|
|
];
|
|
|
|
table.render({
|
|
elem: '#test'
|
|
, data: dataArr
|
|
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
|
, cols: [[
|
|
//{ field: 'id', align: "center", title: 'ID', sort: true }
|
|
{ field: 'rwTitle', align: "center", title: '任务标题' }
|
|
, { field: 'warnTime', align: "center", title: '提醒时间' }
|
|
, { field: 'endTime', align: "center", title: '截止时间' }
|
|
, { field: 'rwState', align: "center", title: '完成状态' }
|
|
, { field: 'OkTime', align: "center", title: '完成时间' }
|
|
, { field: 'rwRemark', align: "center", title: '任务描述' }
|
|
, { field: 'createTime', align: "center", title: '创建时间' }
|
|
]]
|
|
, page: true
|
|
, limits: [10, 15, 20, 25]
|
|
, limit: 10
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="layui-tab layui-tab-card" style="height:280px;">
|
|
|
|
<div>
|
|
<label class="layui-form-label">时间范围</label>
|
|
<div class="layui-input-inline" style="width:300px;">
|
|
<input type="text" class="layui-input" id="test10" placeholder=" - " style="width:300px;">
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">综合汇总查询</li>
|
|
<li>部门汇总查询</li>
|
|
<li>个人汇总查询</li>
|
|
|
|
</ul>
|
|
<div class="layui-tab-content">
|
|
<div class="layui-tab-item layui-show">
|
|
<!--综合统计查询-->
|
|
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo grid-demo-bg1">
|
|
<div class="clsDiv1">
|
|
<h2>总数</h2>
|
|
<h1>120</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-blue" lay-percent="100%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>已完成</h2>
|
|
<h1>72</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-green" lay-percent="60%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo grid-demo-bg1">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>未完成</h2>
|
|
<h1>48</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-orange" lay-percent="40%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>今日完成</h2>
|
|
<h1>12</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-green" lay-percent="10%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>逾期完成</h2>
|
|
<h1>12</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-blue" lay-percent="10%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>已逾期</h2>
|
|
<h1>24</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<!--部门统计查询-->
|
|
|
|
<form class="layui-form" action="">
|
|
|
|
<div class="layui-input-inline">
|
|
<select name="city" lay-verify="" style="width:120px; font-size:18px;">
|
|
<option value="">选择部门</option>
|
|
<option value="010">指挥中心</option>
|
|
<option value="010">作战训练科</option>
|
|
<option value="010">政治部</option>
|
|
<option value="010">政治工作科</option>
|
|
<option value="010">防火监督科</option>
|
|
<option value="010">宣教中心</option>
|
|
<option value="010">后勤保障科</option>
|
|
<option value="021">全媒体中心</option>
|
|
<option value="010">应急通信勤务班</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="button" class="layui-btn layui-btn-normal">搜索</button>
|
|
|
|
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo grid-demo-bg1">
|
|
<div class="clsDiv1">
|
|
<h2>总数</h2>
|
|
<h1>120</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-blue" lay-percent="100%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>已完成</h2>
|
|
<h1>72</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-green" lay-percent="60%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo grid-demo-bg1">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>未完成</h2>
|
|
<h1>48</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-orange" lay-percent="40%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>今日完成</h2>
|
|
<h1>12</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-green" lay-percent="10%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>逾期完成</h2>
|
|
<h1>12</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-blue" lay-percent="10%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>已逾期</h2>
|
|
<h1>24</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
|
|
<form class="layui-form" action="">
|
|
|
|
<div class="layui-input-inline">
|
|
<select name="city" lay-verify="" style="width:120px; font-size:18px;">
|
|
<option value="">选择人员</option>
|
|
<option value="010">孙振涛</option>
|
|
<option value="010">刘松林</option>
|
|
<option value="010">加永拉姆</option>
|
|
<option value="010">甘露</option>
|
|
<option value="010">李智欣</option>
|
|
<option value="010">罗松扎西</option>
|
|
<option value="010">吴行兵</option>
|
|
<option value="021">刘毅</option>
|
|
<option value="010">崔壮壮</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="button" class="layui-btn layui-btn-normal">搜索</button>
|
|
|
|
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo grid-demo-bg1">
|
|
<div class="clsDiv1">
|
|
<h2>总数</h2>
|
|
<h1>120</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-blue" lay-percent="100%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>已完成</h2>
|
|
<h1>72</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-green" lay-percent="60%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo grid-demo-bg1">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>未完成</h2>
|
|
<h1>48</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-orange" lay-percent="40%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>今日完成</h2>
|
|
<h1>12</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-green" lay-percent="10%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>逾期完成</h2>
|
|
<h1>12</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-blue" lay-percent="10%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo">
|
|
|
|
<div class="clsDiv1">
|
|
<h2>已逾期</h2>
|
|
<h1>24</h1>
|
|
<div class="layui-progress">
|
|
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<table class="layui-hide" id="test"></table>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|