60 lines
3.2 KiB
HTML
60 lines
3.2 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">
|
||
|
|
<select id="eqFilter" class="btn" style="padding:7px 10px" onchange="render()"><option value="">全部设备</option></select>
|
||
|
|
<input id="dateFrom" type="date" class="btn" style="padding:7px 10px">
|
||
|
|
<input id="dateTo" type="date" class="btn" style="padding:7px 10px">
|
||
|
|
<button class="btn btn-primary" onclick="checkAvailability()">检查可用性</button>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">检查结果</div>
|
||
|
|
<div class="card-body table-wrap">
|
||
|
|
<table id="resultTable">
|
||
|
|
<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-availability');
|
||
|
|
const eqSel = document.getElementById('eqFilter');
|
||
|
|
eqSel.innerHTML = '<option value="">全部设备</option>' + apsData.equipment.map(e => `<option value="${e.id}">${e.name}</option>`).join('');
|
||
|
|
document.getElementById('dateFrom').value = apsData.$utils.fmtDate(apsData.$utils.today());
|
||
|
|
document.getElementById('dateTo').value = apsData.$utils.fmtDate(apsData.$utils.addMinutes(apsData.$utils.today(), 7*24*60));
|
||
|
|
function render() {}
|
||
|
|
function checkAvailability() {
|
||
|
|
const eqId = eqSel.value;
|
||
|
|
const from = new Date(document.getElementById('dateFrom').value + ' 00:00');
|
||
|
|
const to = new Date(document.getElementById('dateTo').value + ' 23:59');
|
||
|
|
const list = eqId ? apsData.equipment.filter(e => e.id == eqId) : apsData.equipment;
|
||
|
|
const tbody = document.querySelector('#resultTable tbody');
|
||
|
|
tbody.innerHTML = list.map(e => {
|
||
|
|
const ws = findById(apsData.workstations, e.workstationId);
|
||
|
|
const mts = apsData.maintenance.filter(m => m.equipmentId == e.id && apsData.$utils.parseDate(m.plannedEnd) >= from && apsData.$utils.parseDate(m.plannedStart) <= to);
|
||
|
|
const mtText = mts.length ? mts.map(m => `${m.plannedStart} ~ ${m.plannedEnd} (${m.type})`).join('<br>') : '无维保计划';
|
||
|
|
const available = e.status !== 'MAINTENANCE' && e.status !== 'FAULT' && e.status !== 'OFFLINE';
|
||
|
|
return `<tr><td>${e.name}</td><td>${ws ? ws.name : '-'}</td><td>${document.getElementById('dateFrom').value} ~ ${document.getElementById('dateTo').value}</td><td class="text-muted">${mtText}</td><td>${available ? '<span class="badge badge-success">可用</span>' : '<span class="badge badge-danger">不可用</span>'}</td></tr>`;
|
||
|
|
}).join('') || '<tr><td colspan="5" class="text-center text-muted">无数据</td></tr>';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|