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> |