81 lines
4.3 KiB
HTML
81 lines
4.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="addMatrixModal()">+ 新增换线时间</button>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body table-wrap">
|
|
<table id="matrixTable">
|
|
<thead><tr><th>产线</th><th>切换前产品</th><th>切换后产品</th><th>换线时间(分)</th><th>类型</th><th>快速换线</th><th>操作</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script src="../js/data.js"></script>
|
|
<script src="../js/common.js"></script>
|
|
<script>
|
|
initPage('changeover');
|
|
function render() {
|
|
const tbody = document.querySelector('#matrixTable tbody');
|
|
const matrix = apsData.changeoverMatrix || [];
|
|
tbody.innerHTML = matrix.map(m => {
|
|
const line = findById(apsData.lines, m.lineId);
|
|
const from = findById(apsData.materials, m.fromProductId);
|
|
const to = findById(apsData.materials, m.toProductId);
|
|
return `<tr>
|
|
<td>${line ? line.name : '-'}</td><td>${from ? from.name : '-'}</td><td>${to ? to.name : '-'}</td>
|
|
<td>${m.changeoverTimeMinutes}</td><td>${m.changeoverType}</td>
|
|
<td>${m.isQuickChangeAvailable ? `<span class="badge badge-success">${m.quickChangeTimeMinutes}分</span>` : '<span class="badge badge-default">否</span>'}</td>
|
|
<td class="actions"><button class="btn btn-sm btn-danger" onclick="delMatrix(${m.id})">删除</button></td>
|
|
</tr>`;
|
|
}).join('') || '<tr><td colspan="7" class="text-center text-muted">无换线矩阵</td></tr>';
|
|
}
|
|
function addMatrixModal() {
|
|
const lOpts = apsData.lines.map(l => `<option value="${l.id}">${l.name}</option>`).join('');
|
|
const pOpts = apsData.materials.filter(m => m.type === 'FINISHED_PRODUCT').map(p => `<option value="${p.id}">${p.name}</option>`).join('');
|
|
openModal('新增换线时间', `
|
|
<div class="form-row"><div class="form-group"><label>产线</label><select id="m_line">${lOpts}</select></div><div class="form-group"><label>类型</label><select id="m_type"><option>LINE_CHANGE</option><option>DIE_CHANGE</option><option>BOTH</option></select></div></div>
|
|
<div class="form-row"><div class="form-group"><label>切换前产品</label><select id="m_from">${pOpts}</select></div><div class="form-group"><label>切换后产品</label><select id="m_to">${pOpts}</select></div></div>
|
|
<div class="form-row"><div class="form-group"><label>换线时间(分)</label><input id="m_time" type="number" value="30"></div><div class="form-group"><label>快速换线时间(分)</label><input id="m_qtime" type="number" value="15"></div></div>
|
|
`, `<button class="btn" onclick="closeModal()">取消</button><button class="btn btn-primary" onclick="saveMatrix()">保存</button>`);
|
|
}
|
|
function saveMatrix() {
|
|
if (!apsData.changeoverMatrix) apsData.changeoverMatrix = [];
|
|
apsData.changeoverMatrix.push({
|
|
id: apsData.$utils.nextId('changeoverMatrix'),
|
|
lineId: Number(document.getElementById('m_line').value),
|
|
fromProductId: Number(document.getElementById('m_from').value),
|
|
toProductId: Number(document.getElementById('m_to').value),
|
|
changeoverTimeMinutes: Number(document.getElementById('m_time').value),
|
|
changeoverType: document.getElementById('m_type').value,
|
|
isQuickChangeAvailable: true,
|
|
quickChangeTimeMinutes: Number(document.getElementById('m_qtime').value),
|
|
createdAt: apsData.$utils.fmtDateTime(new Date())
|
|
});
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
|
}
|
|
function delMatrix(id) {
|
|
apsData.changeoverMatrix = (apsData.changeoverMatrix || []).filter(m => m.id != id);
|
|
apsData.$utils.save(apsData); showToast('已删除'); render();
|
|
}
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|