84 lines
5.3 KiB
HTML
84 lines
5.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>工厂日历管理 - 智能排产系统</title>
|
|||
|
|
<link rel="stylesheet" href="../css/common.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<header class="header" id="header"></header>
|
|||
|
|
<div class="body">
|
|||
|
|
<aside class="sidebar" id="sidebar"></aside>
|
|||
|
|
<main class="main">
|
|||
|
|
<h1 class="page-title">工厂日历管理</h1>
|
|||
|
|
<div class="toolbar">
|
|||
|
|
<button class="btn btn-primary" onclick="addHolidayModal()">+ 新增节假日</button>
|
|||
|
|
<button class="btn" onclick="addShiftCalModal()">+ 班次排班</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">节假日/例外日期</div>
|
|||
|
|
<div class="card-body table-wrap">
|
|||
|
|
<table id="holidayTable"><thead><tr><th>日期</th><th>名称</th><th>类型</th><th>工作时长</th></tr></thead><tbody></tbody></table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">班次日历（未来14天）</div>
|
|||
|
|
<div class="card-body table-wrap">
|
|||
|
|
<table id="shiftCalTable"><thead><tr><th>产线</th><th>日期</th><th>班次</th><th>是否工作</th><th>班组</th></tr></thead><tbody></tbody></table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="../js/data.js"></script>
|
|||
|
|
<script src="../js/common.js"></script>
|
|||
|
|
<script>
|
|||
|
|
initPage('factory-calendar');
|
|||
|
|
function render() {
|
|||
|
|
const ht = document.querySelector('#holidayTable tbody');
|
|||
|
|
ht.innerHTML = apsData.holidays.map(h => `<tr><td>${h.date}</td><td>${h.name}</td><td>${h.type}</td><td>${h.workHours}</td></tr>`).join('') || '<tr><td colspan="4" class="text-center text-muted">无节假日</td></tr>';
|
|||
|
|
const st = document.querySelector('#shiftCalTable tbody');
|
|||
|
|
st.innerHTML = apsData.shiftCalendar.slice(0, 50).map(sc => {
|
|||
|
|
const line = findById(apsData.lines, sc.lineId);
|
|||
|
|
const shift = findById(apsData.shifts, sc.shiftId);
|
|||
|
|
const team = findById(apsData.teams, sc.teamId);
|
|||
|
|
return `<tr><td>${line ? line.name : '-'}</td><td>${sc.date}</td><td>${shift ? shift.name : '-'}</td><td>${sc.isWorking ? '<span class="badge badge-success">是</span>' : '<span class="badge badge-default">否</span>'}</td><td>${team ? team.name : '-'}</td></tr>`;
|
|||
|
|
}).join('') || '<tr><td colspan="5" class="text-center text-muted">无排班</td></tr>';
|
|||
|
|
}
|
|||
|
|
function addHolidayModal() {
|
|||
|
|
const opts = apsData.factories.map(f => `<option value="${f.id}">${f.name}</option>`).join('');
|
|||
|
|
openModal('新增节假日', `
|
|||
|
|
<div class="form-row"><div class="form-group"><label>工厂</label><select id="h_fid">${opts}</select></div><div class="form-group"><label>日期</label><input id="h_date" type="date"></div></div>
|
|||
|
|
<div class="form-row"><div class="form-group"><label>名称</label><input id="h_name"></div><div class="form-group"><label>类型</label><select id="h_type"><option>HOLIDAY</option><option>WEEKEND</option><option>ADJUSTED_WORKDAY</option></select></div></div>
|
|||
|
|
`, `<button class="btn" onclick="closeModal()">取消</button><button class="btn btn-primary" onclick="saveHoliday()">保存</button>`);
|
|||
|
|
}
|
|||
|
|
function saveHoliday() {
|
|||
|
|
apsData.holidays.push({ id: apsData.$utils.nextId('holiday'), factoryId: Number(document.getElementById('h_fid').value), date: document.getElementById('h_date').value, name: document.getElementById('h_name').value, type: document.getElementById('h_type').value, workHours: 0, createdAt: apsData.$utils.fmtDateTime(new Date()) });
|
|||
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
|||
|
|
}
|
|||
|
|
function addShiftCalModal() {
|
|||
|
|
const lOpts = apsData.lines.map(l => `<option value="${l.id}">${l.name}</option>`).join('');
|
|||
|
|
const sOpts = apsData.shifts.map(s => `<option value="${s.id}">${s.name}</option>`).join('');
|
|||
|
|
const tOpts = apsData.teams.map(t => `<option value="${t.id}">${t.name}</option>`).join('');
|
|||
|
|
openModal('新增班次排班', `
|
|||
|
|
<div class="form-row"><div class="form-group"><label>产线</label><select id="sc_line">${lOpts}</select></div><div class="form-group"><label>日期</label><input id="sc_date" type="date"></div></div>
|
|||
|
|
<div class="form-row"><div class="form-group"><label>班次</label><select id="sc_shift">${sOpts}</select></div><div class="form-group"><label>班组</label><select id="sc_team">${tOpts}</select></div></div>
|
|||
|
|
`, `<button class="btn" onclick="closeModal()">取消</button><button class="btn btn-primary" onclick="saveShiftCal()">保存</button>`);
|
|||
|
|
}
|
|||
|
|
function saveShiftCal() {
|
|||
|
|
apsData.shiftCalendar.push({ id: apsData.$utils.nextId('shiftCalendar'), lineId: Number(document.getElementById('sc_line').value), date: document.getElementById('sc_date').value, shiftId: Number(document.getElementById('sc_shift').value), isWorking: true, teamId: Number(document.getElementById('sc_team').value), maxWorkers: 10, createdAt: apsData.$utils.fmtDateTime(new Date()) });
|
|||
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
|||
|
|
}
|
|||
|
|
render();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|