264 lines
12 KiB
Plaintext
264 lines
12 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
|||
|
|
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
|||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<!-- <html lang="zh-CN"> -->
|
|||
|
|
<!-- BEGIN HEAD -->
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<style>
|
|||
|
|
</style>
|
|||
|
|
<title>
|
|||
|
|
<%= ServerObject.atttable.get("TOPTITLE")%>
|
|||
|
|
</title>
|
|||
|
|
<!-- 引用页头及CSS页-->
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/fullcalendar/dist/fullcalendar.min.css"/>
|
|||
|
|
<link rel="stylesheet"
|
|||
|
|
href="<%=request.getContextPath()%>/node_modules/fullcalendar/dist/fullcalendar.print.min.css" media='print'/>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/moment/min/moment.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript"
|
|||
|
|
src="<%=request.getContextPath()%>/node_modules/fullcalendar/dist/fullcalendar.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/fullcalendar/dist/locale/zh-cn.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<!-- bootstrap switch -->
|
|||
|
|
<link rel="stylesheet"
|
|||
|
|
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"/>
|
|||
|
|
<script type="text/javascript"
|
|||
|
|
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<!-- 文件上传-->
|
|||
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/css/fileinput.min.css"/>
|
|||
|
|
<script type="text/javascript"
|
|||
|
|
src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/fileinput.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/locales/zh.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<style>
|
|||
|
|
.calendarEvents {
|
|||
|
|
height: 30%;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var patroltype = "";
|
|||
|
|
|
|||
|
|
var showAllSchedulingPerDay = function (date) {
|
|||
|
|
$.post(ext.contextPath + '/work/scheduling/showSchedulingList.do', {
|
|||
|
|
date: date,
|
|||
|
|
grouptype: $('#grouptype').val(),
|
|||
|
|
patroltype: patroltype
|
|||
|
|
}, function (data) {
|
|||
|
|
$("#allSchedulingDiv").html(data);
|
|||
|
|
openModal('schedulingListModal');
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
var showSingleScheduling = function (id, datetime) {
|
|||
|
|
$.post(ext.contextPath + '/work/scheduling/edit.do', {
|
|||
|
|
id: id,
|
|||
|
|
grouptype: $('#grouptype').val(),
|
|||
|
|
patroltype: patroltype,
|
|||
|
|
datetime: datetime
|
|||
|
|
},
|
|||
|
|
function (data) {
|
|||
|
|
$("#editDiv").html(data);
|
|||
|
|
openModal('schedulingEditModal');
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
var doReloadCalendar = function () {
|
|||
|
|
$('#calendar').fullCalendar('refetchEvents');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var dosearch = function () {
|
|||
|
|
$('#calendar').fullCalendar('refetchEvents');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function titlePullTogether(event) {
|
|||
|
|
var result = "<span style='cursor: pointer;'>" + event._groupTimename + "</span><span style='cursor: pointer;'> " + event._groupDetailName + "</span>";
|
|||
|
|
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initFun() {
|
|||
|
|
$.post(ext.contextPath + "/work/groupType/getGroupTypeTreeFromDetail.do", {unitId: unitId}, function (data) {
|
|||
|
|
// console.log("sdata",data);
|
|||
|
|
patroltype = data[0].patroltype;
|
|||
|
|
var select = $("#grouptype").select2({
|
|||
|
|
data: data,
|
|||
|
|
placeholder: '请选择',//默认文字提示
|
|||
|
|
allowClear: false,//允许清空
|
|||
|
|
escapeMarkup: function (markup) {
|
|||
|
|
return markup;
|
|||
|
|
}, // 自定义格式化防止xss注入
|
|||
|
|
language: "zh-CN",
|
|||
|
|
minimumInputLength: 0,
|
|||
|
|
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
|||
|
|
formatResult: function formatRepo(repo) {
|
|||
|
|
return repo.text;
|
|||
|
|
}, // 函数用来渲染结果
|
|||
|
|
formatSelection: function formatRepoSelection(repo) {
|
|||
|
|
return repo.text;
|
|||
|
|
} // 函数用于呈现当前的选择
|
|||
|
|
});
|
|||
|
|
$("#grouptype").on("select2:select", function (e) {
|
|||
|
|
var ckdata = e.params.data;
|
|||
|
|
patroltype = ckdata.patroltype;
|
|||
|
|
doReloadCalendar();
|
|||
|
|
});
|
|||
|
|
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'});//选中元素上下居中
|
|||
|
|
if (data.length != 0) {
|
|||
|
|
select.val(data[0].id).trigger("change");//设置选中
|
|||
|
|
} else {
|
|||
|
|
select.val("").trigger("change");//设置选中
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//日历
|
|||
|
|
$('#calendar').fullCalendar({
|
|||
|
|
header: {
|
|||
|
|
left: 'prev,next today',
|
|||
|
|
center: 'title',
|
|||
|
|
right: 'month,agendaWeek,agendaDay'
|
|||
|
|
},
|
|||
|
|
// defaultDate: '2018-03-12',
|
|||
|
|
timeFormat: 'HH:mm', //定义表格中显示的时间格式如：22：30，默认格式为HH(:mm)效果是整点的时候自动隐藏分钟，例如23：00会显示成23
|
|||
|
|
displayEventEnd: true, //显示事件的结束时间，默认是false
|
|||
|
|
aspectRatio: 2, //设置日历单元格显示的宽高比,数值越小越窄高
|
|||
|
|
navLinks: true, // can click day/week names to navigate views
|
|||
|
|
eventLimit: true, // allow "more" link when too many events
|
|||
|
|
editable: false, //允许编辑
|
|||
|
|
eventStartEditable: false, //允许直接在界面中编辑事件的开始时间
|
|||
|
|
eventDurationEditable: false, //允许编辑事件的时长
|
|||
|
|
events: function (start, end, timezone, callback) { //单击日历中事件时触发的函数,实现效果是获取当前点击事件的标题,开始时间,结束时间传给DOM控件
|
|||
|
|
if (unitId != "" && $("#grouptype").val() != "") {
|
|||
|
|
var events = [];
|
|||
|
|
//console.log("val", $("#grouptype").val());
|
|||
|
|
// var starttime = moment(start).format('YYYY-MM-DD HH:mm:ss'); //使用moment.js对时间进行格式化
|
|||
|
|
// var endtime = moment(end).format('YYYY-MM-DD HH:mm:ss');
|
|||
|
|
$.post(ext.contextPath + '/work/scheduling/getlCalenderEvents.do', {
|
|||
|
|
sdt: start.format(),
|
|||
|
|
edt: end.format(),
|
|||
|
|
bizid: unitId,
|
|||
|
|
schedulingtype: $("#grouptype").val(),
|
|||
|
|
}, function (data) {
|
|||
|
|
//console.log("data", data);
|
|||
|
|
for (var i = 0; i < data.length; i++) {
|
|||
|
|
var obj = new Object();
|
|||
|
|
obj.id = data[i].id;
|
|||
|
|
// obj.title = data[i]._groupTimename + " " + data[i]._groupDetailName;
|
|||
|
|
obj.title = titlePullTogether(data[i]);
|
|||
|
|
var startdate = data[i].stdt.substring(0, 10).replace(/-/g, '/');
|
|||
|
|
var stdtts = new Date(startdate).getTime();
|
|||
|
|
var enddate = data[i].eddt.substring(0, 10).replace(/-/g, '/');
|
|||
|
|
var eddtts = new Date(enddate).getTime();
|
|||
|
|
if (eddtts > stdtts) {//跨天
|
|||
|
|
obj.color = '#3C8DBC';
|
|||
|
|
} else {
|
|||
|
|
obj.color = '#F39C12';
|
|||
|
|
}
|
|||
|
|
obj.start = data[i].stdt;
|
|||
|
|
obj.end = data[i].eddt;
|
|||
|
|
//console.log("obj", obj);
|
|||
|
|
events.push(obj);
|
|||
|
|
}
|
|||
|
|
callback(events);
|
|||
|
|
}, 'json'); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
eventClick: function (event, jsEvent, view) {
|
|||
|
|
// var datetime = moment(date).format('YYYY-MM-DD HH:mm:ss');
|
|||
|
|
showSingleScheduling(event.id, event.start._i);
|
|||
|
|
},
|
|||
|
|
dayClick: function (date, jsEvent, view) {
|
|||
|
|
// console.log(date)
|
|||
|
|
var datetime = moment(date).format('YYYY-MM-DD HH:mm:ss');
|
|||
|
|
showAllSchedulingPerDay(datetime);
|
|||
|
|
},
|
|||
|
|
eventRender: function (event, element) {//title以HTML显示（换行）
|
|||
|
|
element.html(event.title);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}, 'json');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
initFun();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
//导入
|
|||
|
|
function importExcelFun() {
|
|||
|
|
$.post(ext.contextPath + '/work/scheduling/importExcelFun.do', {unitId: unitId}, function (data) {
|
|||
|
|
$("#subDiv").html(data);
|
|||
|
|
openModal('subModal');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//导出
|
|||
|
|
function downloadExcelFun() {
|
|||
|
|
var month = moment($('#calendar').fullCalendar('getView').intervalStart).format('YYYY-MM-DD HH:mm:ss');
|
|||
|
|
var groupType = $('#grouptype').val();
|
|||
|
|
window.open(ext.contextPath + "/work/scheduling/downloadExcelFun.do?date=" + month + "&groupType=" + groupType + "&unitId=" + unitId);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<div class="content-wrapper">
|
|||
|
|
|
|||
|
|
<%-- <section class="content-header">--%>
|
|||
|
|
<%-- <h1 id="head_title"></h1>--%>
|
|||
|
|
<%-- <ol class="breadcrumb">--%>
|
|||
|
|
<%-- <li><a id='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>--%>
|
|||
|
|
<%-- </ol>--%>
|
|||
|
|
<%-- </section>--%>
|
|||
|
|
|
|||
|
|
<section class="content container-fluid">
|
|||
|
|
<div id="mainAlertdiv"></div>
|
|||
|
|
<div id="allSchedulingDiv"></div>
|
|||
|
|
<div id="singleSchedulingDiv"></div>
|
|||
|
|
<div id="subDiv"></div>
|
|||
|
|
<div id="addDiv"></div>
|
|||
|
|
<div id="editDiv"></div>
|
|||
|
|
<div id="shiftChangeDiv"></div>
|
|||
|
|
<div id="workPeopleAddDiv"></div>
|
|||
|
|
<div id="user4SelectDiv"></div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div class="form-group form-inline" style="padding:0;">
|
|||
|
|
<div class="form-group pull">
|
|||
|
|
<label class="form-label">排班类型:</label>
|
|||
|
|
<select class="form-control select2 " id="grouptype" name="grouptype"
|
|||
|
|
style="width: 220px;"></select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group pull">
|
|||
|
|
<button type="button" class="btn btn-default btn-sm" onclick="importExcelFun();"><i
|
|||
|
|
class="fa fa-cloud-upload"></i>
|
|||
|
|
Excel导入
|
|||
|
|
</button>
|
|||
|
|
<button type="button" class="btn btn-default btn-sm" onclick="downloadExcelFun();"><i
|
|||
|
|
class="fa fa-cloud-download"></i>
|
|||
|
|
Excel导出
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="box box-primary">
|
|||
|
|
<div class="box-body no-padding">
|
|||
|
|
<div id="calendar"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|