106 lines
6.5 KiB
HTML
106 lines
6.5 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="addEquipmentModal()">+ 新增设备</button>
|
|
<button class="btn" onclick="addMaintenanceModal()">+ 维保计划</button>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body table-wrap">
|
|
<table id="eqTable">
|
|
<thead><tr><th>设备编码</th><th>名称</th><th>型号</th><th>所属工位</th><th>小时产能</th><th>可用率</th><th>状态</th><th>操作</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">维保计划</div>
|
|
<div class="card-body table-wrap">
|
|
<table id="mtTable">
|
|
<thead><tr><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('equipment');
|
|
function render() {
|
|
const tbody = document.querySelector('#eqTable tbody');
|
|
tbody.innerHTML = apsData.equipment.map(e => {
|
|
const ws = findById(apsData.workstations, e.workstationId);
|
|
return `<tr>
|
|
<td>${e.code}</td><td>${e.name}</td><td>${e.model}</td><td>${ws ? ws.name : '-'}</td>
|
|
<td>${e.capacityPerHour}</td><td>${Math.round(e.availabilityRate * 100)}%</td>
|
|
<td>${statusBadge(e.status, { RUNNING:'success', IDLE:'default', FAULT:'danger', MAINTENANCE:'warning', OFFLINE:'default' })}</td>
|
|
<td class="actions"><button class="btn btn-sm" onclick="viewEq(${e.id})">详情</button></td>
|
|
</tr>`;
|
|
}).join('') || '<tr><td colspan="8" class="text-center text-muted">无数据</td></tr>';
|
|
const mtb = document.querySelector('#mtTable tbody');
|
|
mtb.innerHTML = apsData.maintenance.map(m => {
|
|
const e = findById(apsData.equipment, m.equipmentId);
|
|
return `<tr><td>${e ? e.name : '-'}</td><td>${m.type}</td><td>${m.plannedStart}</td><td>${m.plannedEnd}</td><td>${m.status}</td></tr>`;
|
|
}).join('') || '<tr><td colspan="5" class="text-center text-muted">无维保计划</td></tr>';
|
|
}
|
|
function viewEq(id) {
|
|
const e = findById(apsData.equipment, id);
|
|
openModal('设备详情', `
|
|
<div class="form-row"><div class="form-group"><label>设备编码</label><input value="${e.code}" readonly></div><div class="form-group"><label>名称</label><input value="${e.name}" readonly></div></div>
|
|
<div class="form-row"><div class="form-group"><label>型号</label><input value="${e.model}" readonly></div><div class="form-group"><label>状态</label><input value="${e.status}" readonly></div></div>
|
|
<div class="form-row"><div class="form-group"><label>小时产能</label><input value="${e.capacityPerHour}" readonly></div><div class="form-group"><label>可用率</label><input value="${Math.round(e.availabilityRate*100)}%" readonly></div></div>
|
|
`);
|
|
}
|
|
function addEquipmentModal() {
|
|
const wsOpts = apsData.workstations.map(w => `<option value="${w.id}">${w.name}</option>`).join('');
|
|
openModal('新增设备', `
|
|
<div class="form-row"><div class="form-group"><label>设备编码</label><input id="e_code"></div><div class="form-group"><label>名称</label><input id="e_name"></div></div>
|
|
<div class="form-row"><div class="form-group"><label>型号</label><input id="e_model"></div><div class="form-group"><label>所属工位</label><select id="e_ws">${wsOpts}</select></div></div>
|
|
<div class="form-row"><div class="form-group"><label>小时产能</label><input id="e_cap" type="number" value="120"></div></div>
|
|
`, `
|
|
<button class="btn" onclick="closeModal()">取消</button>
|
|
<button class="btn btn-primary" onclick="saveEquipment()">保存</button>
|
|
`);
|
|
}
|
|
function saveEquipment() {
|
|
const code = document.getElementById('e_code').value.trim();
|
|
const name = document.getElementById('e_name').value.trim();
|
|
if (!code || !name) return showToast('校验失败', '请填写编码和名称', 'error');
|
|
apsData.equipment.push({ id: apsData.$utils.nextId('equipment'), code, name, model: document.getElementById('e_model').value, workstationId: Number(document.getElementById('e_ws').value), capacityPerHour: Number(document.getElementById('e_cap').value), efficiencyFactor: 1, availabilityRate: 1, status: 'RUNNING' });
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
|
}
|
|
function addMaintenanceModal() {
|
|
const eqOpts = apsData.equipment.map(e => `<option value="${e.id}">${e.name}</option>`).join('');
|
|
const d = apsData.$utils.fmtDate(apsData.$utils.addMinutes(apsData.$utils.today(), 2 * 24 * 60));
|
|
openModal('新增维保计划', `
|
|
<div class="form-row"><div class="form-group"><label>设备</label><select id="m_eq">${eqOpts}</select></div><div class="form-group"><label>类型</label><select id="m_type"><option>MAINTENANCE</option><option>INSPECTION</option><option>REPAIR</option></select></div></div>
|
|
<div class="form-row"><div class="form-group"><label>开始时间</label><input id="m_start" type="datetime-local" value="${d}T09:00"></div><div class="form-group"><label>结束时间</label><input id="m_end" type="datetime-local" value="${d}T12:00"></div></div>
|
|
`, `
|
|
<button class="btn" onclick="closeModal()">取消</button>
|
|
<button class="btn btn-primary" onclick="saveMaintenance()">保存</button>
|
|
`);
|
|
}
|
|
function saveMaintenance() {
|
|
apsData.maintenance.push({ id: apsData.$utils.nextId('maintenance'), equipmentId: Number(document.getElementById('m_eq').value), type: document.getElementById('m_type').value, plannedStart: document.getElementById('m_start').value.replace('T', ' '), plannedEnd: document.getElementById('m_end').value.replace('T', ' '), status: 'PLANNED', description: '' });
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
|
}
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|