65 lines
2.8 KiB
HTML
65 lines
2.8 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="row">
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<div class="card-header">产线利用率趋势</div>
|
|
<div class="card-body"><canvas id="lineLoadChart" style="width:100%;height:260px"></canvas></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<div class="card-header">工位负荷分布</div>
|
|
<div class="card-body"><canvas id="wsLoadChart" style="width:100%;height:260px"></canvas></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">负荷预警</div>
|
|
<div class="card-body table-wrap">
|
|
<table id="warnTable"><thead><tr><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('resource-load');
|
|
function render() {
|
|
const labels = [];
|
|
for (let i = 0; i < 7; i++) labels.push(apsData.$utils.fmtDate(apsData.$utils.addMinutes(apsData.$utils.today(), i * 24 * 60)).slice(5));
|
|
const lineData = apsData.lines.map((l, idx) => labels.map(() => Math.round(40 + Math.random() * 50)));
|
|
drawLineChart('lineLoadChart', labels, lineData);
|
|
const wsNames = apsData.workstations.slice(0, 10).map(w => w.name);
|
|
const wsLoads = wsNames.map(() => Math.round(30 + Math.random() * 60));
|
|
drawBarChart('wsLoadChart', wsNames, wsLoads, '#f97316');
|
|
const tbody = document.querySelector('#warnTable tbody');
|
|
const warns = [];
|
|
apsData.lines.forEach(line => {
|
|
labels.forEach((d, i) => {
|
|
const rate = lineData[line.id - 1] ? lineData[line.id - 1][i] : 0;
|
|
if (rate > 85 || rate < 30) warns.push({ name: line.name, date: d, rate, level: rate > 85 ? 'HIGH' : 'LOW' });
|
|
});
|
|
});
|
|
tbody.innerHTML = warns.map(w => `<tr><td>${w.name}</td><td>${w.date}</td><td>${w.rate}%</td><td>${w.level === 'HIGH' ? '<span class="badge badge-danger">超负荷</span>' : '<span class="badge badge-warning">低负荷</span>'}</td></tr>`).join('') || '<tr><td colspan="4" class="text-center text-muted">无预警</td></tr>';
|
|
}
|
|
setTimeout(render, 50);
|
|
</script>
|
|
</body>
|
|
</html>
|