wlcb-smart-city-case/src/main/resources/static/route/casestatistics/department-grid.html
cuibaocheng b6977f84fe 增加单位的疑难案件 / 标杆案件
修改查询的方式
增加了疑难案件和标案案件的只看自己标记的案件的功能, 以及只能自己取消标记的功能
增加单位的网格员效率统计
修改了单位的网格员效率统计的相关逻辑
2021-12-08 17:56:31 +08:00

760 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<base href="/case/">
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
<style>
a:hover { color : #009688 ; }
</style>
</head>
<body>
<div class="layui-anim layui-anim-fadein">
<div class="layui-row">
<div class="layui-col-md3" id="tableDepartmentDiv">
<div class="layui-card">
<div class="layui-card-body">
<input id="queryMode" value="" type="hidden"/>
<div id="headerToolBarBox"></div>
<table class="layui-hide" id="dataTableDepartment" lay-filter="dataTableDepartment"></table>
<script type="text/html" id="headerToolBar">
<input id="departmentId" type="hidden" value=""/>
</script>
</div>
</div>
</div>
<div class="layui-col-md9">
<div class="layui-card">
<div class="layui-card-body">
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
<div class="layui-inline">
<input type="hidden" id="startTimeA">
<input type="text" style="cursor:pointer;" id="startTime" class="layui-input search-item" placeholder="开始时间" readonly>
</div>
<div class="layui-inline">
<input type="hidden" id="endTimeA">
<input type="text" id="endTime" style="cursor:pointer;" class="layui-input search-item" placeholder="结束时间" readonly>
</div>
<button type="button" id="search" style="margin-left: 15px;" class="layui-btn layui-btn-sm">
<i class="fa fa-lg fa-search"></i> 搜索
</button>
<button type="button" id="selectYear" class="layui-btn layui-btn-sm">
<i class="fa fa-lg fa-calendar-o"></i> 统计本年
</button>
<button type="button" id="selectMonth" class="layui-btn layui-btn-sm">
<i class="fa fa-lg fa-calendar"></i> 统计本月
</button>
<button type="button" id="excel" class="layui-btn layui-btn-sm">
<i class="fa fa-lg fa-download"></i> 导出Excel
</button>
</div>
<!-- <div id="headerToolBarBox" style="padding-bottom: 10px"></div>-->
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
<!-- <script type="text/html" id="headerToolBar">-->
<!-- <div style="text-align: center;width:100% !important;font-size: 17px">-->
<!-- -->
<!-- <h2 style="cursor:pointer;" class="{{d.departmentId == '110889' ? '' : 'callback'}}">{{d.departmentId == '110889' ? '' : '<i class="fa fa-lg fa-reply-all "></i>'}}<u >{{d.departmentName}}</u> {{d.title}}</h2>-->
<!-- </div>-->
<!-- </script>-->
</div>
</div>
</div>
</div>
</div>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script>
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index',
excel: 'layui_exts/excel',
}).use(['index', 'table', 'laydate', 'common', 'laytpl', 'excel'], function() {
var $ = layui.$;
var $win = $(window);
var table = layui.table;
var admin = layui.admin;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
var common = layui.common;
var excel = layui.excel;
var resizeTimeout = null;
var tableUrl = 'api/casestatistics/departmentgridlist';
var tableDepartmentUrl = 'api/casestatistics/departmenttree';
var tableDepartmentExcelUrl = 'api/casestatistics/departmentgridexcel';
// 初始化区域表格
function initTableDepartment() {
var width = $("#tableDepartmentDiv").width() - 33;
table.render({
elem: '#dataTableDepartment',
id: 'dataTableDepartment',
url: top.restAjax.path(tableDepartmentUrl, []),
width: admin.screen() > 1 ? '100%' : '',
height: $win.height() - 62,
defaultToolbar: [],
cols: [
[
{field: 'departmentName', width: width/3*2, title: '部门', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
},
{field: 'dataCount', width: width/3, title: '网格员数量', align:'center',
templet: function(row) {
var rowData = row[this.field];
var departmentId = row["departmentId"];
return '<u><a departmentId="' + departmentId + '" style="cursor: pointer;color:#0066ff;" href="javascript:void(0);" class="departmentDataEvent">' +
rowData + "位网格员"
'</a></u>';
}
}
]
],
parseData: function(data) {
laytpl(document.getElementById('headerToolBar').innerHTML).render(data, function(html) {
document.getElementById('headerToolBarBox').innerHTML = html;
});
console.log(data);
return {
'code': 0,
'data': data
};
}
});
}
// 初始化表格
function initTable() {
table.render({
elem: '#dataTable',
id: 'dataTable',
url: top.restAjax.path(tableUrl, []),
width: admin.screen() > 1 ? '100%' : '',
height: $win.height() - 62,
limit: 20,
limits: [20, 40, 60, 80, 100, 200],
defaultToolbar: [],
request: {
pageName: 'page',
limitName: 'rows'
},
cols: [
[
{field: 'name', width: 180, title: '网格员', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
},
{field: 'reportNumber', width: 120, title: '上报数', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
},
{field: 'processesNumber', width: 120, title: '处理数', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
},
{field: 'eventNumber', width: 120, title: '事件量', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
},
{field: 'overtimeNumber', width: 120, title: '超时量', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
},
{field: 'notOvertimeNumber', width: 120, title: '未超时量', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
},
{field: 'completeNumber', width: 120, title: '完成量', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
},
{field: 'notCompleteNumber', width: 120, title: '未完成量', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData;
}
},
{field: 'overtimeProportionNumber', width: 120, title: '超时占比', align:'center',
templet: function(row) {
var rowData = row[this.field];
return rowData + "%";
}
},
]
],
page: true,
parseData: function(data) {
return {
'code': 0,
'msg': '',
'count': data.total,
'data': data.rows
};
}
});
}
// 重载区域表格
function reloadTableArea() {
table.reload('dataTableDepartment', {
url: top.restAjax.path(tableDepartmentUrl, []),
where: {
departmentId:$("#departmentId").val(),
time: new Date()
},
height: $win.height() - 62,
});
}
// 重载表格
function reloadTable(currentPage) {
table.reload('dataTable', {
url: top.restAjax.path(tableUrl, []),
where: {
startTime: $('#startTime').val(),
endTime: $('#endTime').val(),
departmentId:$("#departmentId").val(),
selectYear:$("#selectYear").hasClass("layui-btn-normal"),
selectMonth:$("#selectMonth").hasClass("layui-btn-normal"),
time: new Date()
},page: {
curr: currentPage
},
height: $win.height() - 62,
});
}
$(document).on("click",".departmentDataEvent", function() {
$("#departmentId").val($(this).attr("departmentId"));
reloadTable();
});
$(document).on("click","#excel", function() {
var requestData = {
startTime: $('#startTime').val(),
endTime: $('#endTime').val(),
departmentId:$("#departmentId").val(),
selectYear:$("#selectYear").hasClass("layui-btn-normal"),
selectMonth:$("#selectMonth").hasClass("layui-btn-normal"),
queryMode:$("#queryMode").val(),
time: new Date()
}
exportApiDemo(tableDepartmentExcelUrl, requestData);
});
$(document).on("click","#selectYear", function() {
if(!$(this).hasClass("layui-btn-normal")) {
$("#selectMonth").removeClass("layui-btn-normal");
$('#startTime').val("");
$('#endTime').val("");
}
$(this).toggleClass("layui-btn-normal");
reloadTable();
});
$(document).on("click","#selectMonth", function() {
if(!$(this).hasClass("layui-btn-normal")) {
$("#selectYear").removeClass("layui-btn-normal");
$('#startTime').val("");
$('#endTime').val("");
}
$(this).toggleClass("layui-btn-normal");
reloadTable();
});
$(document).on("click",".callback", function() {
$("#departmentId").val($("#areaParentId").val());
$("#queryMode").val("");
reloadTableArea();
reloadTable();
});
// 初始化日期
function initDate() {
// 日期选择
laydate.render({
elem: '#startTime',
type: 'month',
format: 'yyyy年MM月',
max: 0 ,
done: function(value, date, endDate){
$("#startTimeA").val(date.year + "-" + date.month);
if($("#endTimeA").val()) {
var endTimeArr = $("#endTimeA").val().split("-");
var start = new Date(date.year, date.month);
var end = new Date(endTimeArr[0], endTimeArr[1]);
if (start > end) {
layer.msg("开始时间错误");
setTimeout(function () {
$("#startTime").val("");
$("#startTimeA").val("");
}, 20);
return false;
}else {
$("#selectYear").removeClass("layui-btn-normal");
$("#selectMonth").removeClass("layui-btn-normal");
}
}else {
$("#selectYear").removeClass("layui-btn-normal");
$("#selectMonth").removeClass("layui-btn-normal");
}
}
});
laydate.render({
elem: '#endTime',
type: 'month',
format: 'yyyy年MM月',
max: 0,
done: function(value, date, endDate){
$("#endTimeA").val(date.year + "-" + date.month);
if($("#startTimeA").val()) {
var endTimeArr = $("#startTimeA").val().split("-");
var start = new Date(endTimeArr[0], endTimeArr[1]);
var end = new Date(date.year, date.month);
if (start > end) {
layer.msg("结束时间错误");
setTimeout(function () {
$("#endTime").val("");
$("#endTimeA").val("");
}, 20);
return false;
}else {
$("#selectYear").removeClass("layui-btn-normal");
$("#selectMonth").removeClass("layui-btn-normal");
}
}else {
$("#selectYear").removeClass("layui-btn-normal");
$("#selectMonth").removeClass("layui-btn-normal");
}
}
});
}
initTableDepartment();
initTable();
initDate();
// 事件 - 搜索
$(document).on('click', '#search', function() {
reloadTable(1);
});
/**
* 导出接口数据
*/
function exportApiDemo(url, requestData) {
var timestart = Date.now()
var loadLayerIndex = top.dialog.msg("正在导出Excel数据中...", {icon: 16, time: 0, shade: 0.3});
$.ajax({
url: url,
dataType: 'json',
data: requestData,
success: function (res) {
var list = res;
/**
* v单元格的值
* t单元格的类型 'b'布尔值、'n'数字、'e'错误、's'字符串、'd'日期
* s单元格的样式
*/
var data = [
{
departmentName: {
v: "网格员效率统计",
s: {
alignment: {
horizontal: 'center',
vertical: 'center'
},
font: {
bold:true,
sz: 20,
color: {
rgb: "FF0187FA"
}
},
// fill: {
// bgColor: {
// indexed: 64
// },
// fgColor: {
// rgb: "FFF"
// }
// }
}
}, name: '', reportNumber: '', processesNumber: '', eventNumber: '', overtimeNumber: '', notOvertimeNumber: '', completeNumber: '', notCompleteNumber: '', overtimeProportionNumber: ''
},// 被合并的列数据也需要填充上
{
departmentName: {
v:'部门',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
},
name: {
v:'网格员',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
},
reportNumber: {
v:'上报数',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
}, processesNumber: {
v:'处理数',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
}, eventNumber: {
v:'事件量',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
},overtimeNumber: {
v:'超时量',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
}, notOvertimeNumber: {
v:'未超时量',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
}, completeNumber: {
v:'完成量',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
},notCompleteNumber: {
v:'未完成量',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
}, overtimeProportionNumber: {
v:'超时占比',
s:{
alignment: {
horizontal: 'center',
},
font: {
bold:true
}
}
},
}
];
for(var j = 0 ; j < list.length; j++) {
var dataList = list[j].dataList;
var departmentName = list[j].departmentName;
if(requestData.queryMode != "queryCurrentArea") {
data.push({
departmentName: {
v: departmentName ,
s: {
alignment: {
horizontal: 'center',
vertical: 'center'
},
font: {
bold:true,
sz: 12,
color: {
rgb: "FF0187FA"
}
},
// fill: {
// bgColor: {
// indexed: 64
// },
// fgColor: {
// rgb: "FFF"
// }
// }
}
},
name:{
v: dataList.length + "位网格员",
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
reportNumber: {
v: (dataList.length > 0 ? "" : "-"),
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
processesNumber: {
v: (dataList.length > 0 ? "" : "-"),
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
eventNumber: {
v: (dataList.length > 0 ? "" : "-"),
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
overtimeNumber: {
v: (dataList.length > 0 ? "" : "-"),
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
notOvertimeNumber: {
v: (dataList.length > 0 ? "" : "-"),
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
completeNumber: {
v: (dataList.length > 0 ? "" : "-"),
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
notCompleteNumber: {
v: (dataList.length > 0 ? "" : "-"),
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
overtimeProportionNumber: {
v: (dataList.length > 0 ? "" : "-"),
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
}
});
}
for(var i = 0 ; i < dataList.length; i++) {
var rowData = dataList[i];
data.push(
{
departmentName:{
v:rowData.departmentName,
t:"s",
s:{
alignment: {
horizontal: 'center',
},
font: {
color: {
rgb: "FFD700"
}
},
}
},
name:{
v:rowData.name,
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
reportNumber: {
v:rowData.reportNumber,
t:"n",
s:{
alignment: {
horizontal: 'center',
}
}
},
processesNumber: {
v:rowData.processesNumber,
t:"n",
s:{
alignment: {
horizontal: 'center',
}
}
},
eventNumber: {
v:rowData.eventNumber,
t:"n",
s:{
alignment: {
horizontal: 'center',
}
}
},
overtimeNumber: {
v:rowData.overtimeNumber,
t:"n",
s:{
alignment: {
horizontal: 'center',
}
}
},
notOvertimeNumber: {
v:rowData.notOvertimeNumber,
t:"n",
s:{
alignment: {
horizontal: 'center',
}
}
},
completeNumber: {
v:rowData.completeNumber,
t:"n",
s:{
alignment: {
horizontal: 'center',
}
}
},
notCompleteNumber: {
v:rowData.notCompleteNumber,
t:"n",
s:{
alignment: {
horizontal: 'center',
}
}
},
overtimeProportionNumber: {
v:rowData.overtimeProportionNumber + "%",
t:"s",
s:{
alignment: {
horizontal: 'center',
}
}
},
}
);
}
}
// 列合并
var mergeConf = excel.makeMergeConfig([
['A1', 'J1']
])
// A列宽 200, 默认给80
var colConf = excel.makeColConfig({
'A': 150,
'B': 150,
}, 140);
// 每一行的行高, 默认给20
var rowConf = excel.makeRowConfig({
1: 30,
}, 20)
excel.exportExcel({
sheet1: data
}, "网格员效率统计" + '.xlsx', 'xlsx', {
extend: {
sheet1: {
'!merges': mergeConf
, '!cols': colConf
, '!rows': rowConf
}
}
})
var timeend = Date.now()
var spent = (timeend - timestart) / 1000
top.dialog.close(loadLayerIndex);
layer.msg('导出耗时 :' + spent + ' s')
}
, error: function () {
layer.alert('获取数据失败, 请检查网络');
}
});
}
});
</script>
</body>
</html>