@layout("/common/_container.html"){
|
<style>
|
.schedule-wrap { padding: 10px 20px; }
|
.schedule-header { margin-bottom: 15px; }
|
.schedule-header .line { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
|
.schedule-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
|
.schedule-copy .lbl { color: #333; min-width: 60px; }
|
.schedule-copy input { width: 130px; }
|
.schedule-switch { margin-left: 20px; display: flex; align-items: center; gap: 6px; }
|
.calendar-panel { border: 1px solid #e5e6e7; margin-top: 15px; }
|
.calendar-toolbar { height: 48px; display: flex; align-items: center; justify-content: center; gap: 16px; border-bottom: 1px solid #e5e6e7; }
|
.calendar-toolbar .nav-btn { cursor: pointer; color: #1ab394; }
|
.calendar-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
|
.calendar-table th, .calendar-table td { border: 1px solid #e5e6e7; vertical-align: top; height: 88px; padding: 6px; }
|
.calendar-table th { height: 36px; text-align: center; font-weight: 600; }
|
.calendar-day { cursor: pointer; position: relative; }
|
.calendar-day.other { color: #aaa; background: #fafafa; cursor: default; }
|
.calendar-day.active { outline: 2px solid #1ab394; outline-offset: -2px; }
|
.calendar-day .num { font-size: 14px; font-weight: 600; }
|
.calendar-day .tag { margin-top: 6px; display: inline-block; padding: 2px 6px; border-radius: 2px; color: #fff; font-size: 12px; }
|
.calendar-day .tag.ok { background: #1c84c6; }
|
.calendar-day .tag.warn { background: #f8ac59; }
|
.calendar-day .tag.none { background: #999; }
|
.shift-panel { margin-top: 16px; display: none; }
|
.driver-tag { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 8px; border-radius: 2px; color: #fff; background: #1c84c6; }
|
.driver-tag.manual { background: #f8ac59; }
|
.driver-tag .del { margin-left: 8px; cursor: pointer; }
|
</style>
|
|
<div class="schedule-wrap">
|
<input type="hidden" id="lineId" value="${lineId!}"/>
|
<input type="hidden" id="companyId" value="${companyId!}"/>
|
<input type="hidden" id="autoPlanValue" value="${autoPlan!2}"/>
|
|
<div class="schedule-header">
|
<div class="line">排班管理</div>
|
<div style="margin-bottom: 10px;">线路名称：<b id="lineName">${lineName!}</b> 企业：<b id="companyName">${companyName!}</b></div>
|
<div class="schedule-copy">
|
<span class="lbl">排班复制</span>
|
<span>复制日期</span>
|
<input type="text" class="form-control" id="copyStartDate" placeholder="开始日期"/>
|
<span>至</span>
|
<input type="text" class="form-control" id="copyEndDate" placeholder="结束日期"/>
|
<span>粘贴起始日期</span>
|
<input type="text" class="form-control" id="targetStartDate" placeholder="选择日期"/>
|
<button class="btn btn-primary btn-sm" onclick="TLineSchedule.copySchedule()">确认复制</button>
|
<div class="schedule-switch">
|
<span>开启智能排班</span>
|
<input type="checkbox" id="autoPlanSwitch" onchange="TLineSchedule.onAutoPlanChange(this)">
|
</div>
|
</div>
|
</div>
|
|
<div class="calendar-panel">
|
<div class="calendar-toolbar">
|
<span class="nav-btn" onclick="TLineSchedule.prevMonth()">< 上月</span>
|
<span id="calendarMonthText"></span>
|
<span class="nav-btn" onclick="TLineSchedule.nextMonth()">下月 ></span>
|
</div>
|
<table class="calendar-table">
|
<thead>
|
<tr>
|
<th>星期一</th>
|
<th>星期二</th>
|
<th>星期三</th>
|
<th>星期四</th>
|
<th>星期五</th>
|
<th>星期六</th>
|
<th>星期日</th>
|
</tr>
|
</thead>
|
<tbody id="calendarBody"></tbody>
|
</table>
|
</div>
|
|
<div class="shift-panel" id="shiftPanel">
|
<h4 id="selectedDayText"></h4>
|
<table class="table table-striped table-bordered">
|
<thead>
|
<tr>
|
<th style="width: 20%;">班次</th>
|
<th style="width: 10%;">车次数</th>
|
<th style="width: 55%;">司机（黄色为后台手动排班）</th>
|
<th style="width: 15%;">操作</th>
|
</tr>
|
</thead>
|
<tbody id="shiftTableBody"></tbody>
|
</table>
|
</div>
|
</div>
|
|
<script src="${ctxPath}/static/modular/system/tLine/tLine_schedule.js"></script>
|
<script>
|
laydate.render({elem: '#copyStartDate'});
|
laydate.render({elem: '#copyEndDate'});
|
laydate.render({elem: '#targetStartDate'});
|
</script>
|
@}
|
