MES汽车零部件制造生产监控看板大屏 - IT评测·应用市场-qidao123.com

<!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/style.css">
<link href="https://fonts.loli.net/css2?family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title-bar">
<div class="title-left">
<div class="logo-container">
<img src="https://img.icons8.com/fluency/48/manufacturing.png" alt="logo" class="logo">
<div class="logo-glow"></div>
</div>
<div class="title-content">
<h1>汽车零部件制造生产监控中心</h1>
<div class="subtitle">AUTOMOTIVE PARTS MANUFACTURING MONITORING CENTER</div>
</div>
</div>
<div class="title-right">
<div class="datetime">
<div id="current-time">--:--:--</div>
<div id="current-date">---- 年 -- 月 -- 日</div>
</div>
</div>
</div>
<div class="header">
<div class="header-item">
<h3><i class="mdi mdi-gauge"></i> 设备综合效率(OEE)</h3>
<div class="value" id="oee">85%</div>
<div class="trend up">↑2.1%</div>
</div>
<div class="header-item">
<h3><i class="mdi mdi-factory"></i> 实时产能</h3>
<div class="value" id="production">2,450</div>
<div class="trend up">↑150</div>
</div>
<div class="header-item">
<h3><i class="mdi mdi-check-circle"></i> 良品率</h3>
<div class="value" id="quality">98.5%</div>
<div class="trend up">↑0.3%</div>
</div>
<div class="header-item">
<h3><i class="mdi mdi-alert-circle"></i> 异常停机率</h3>
<div class="value warning" id="downtime">2.3%</div>
<div class="trend down">↓0.5%</div>
</div>
</div>
<div class="main">
<div class="left-panel">
<div class="panel-header">
<h2><i class="mdi mdi-view-dashboard"></i> 设备状态监控</h2>
<div class="panel-tools">
<span class="tool-item"><i class="mdi mdi-refresh"></i></span>
<span class="tool-item"><i class="mdi mdi-dots-vertical"></i></span>
</div>
</div>
<div id="equipment-topology" class="chart-container"></div>
<div id="equipment-details" class="details-panel">
<h3>设备详情</h3>
<div class="params-grid">
<div class="param-item">
<span>温度</span>
<span class="value">175°C</span>
</div>
<div class="param-item">
<span>压力</span>
<span class="value">2.4MPa</span>
</div>
<div class="param-item">
<span>转速</span>
<span class="value">1200rpm</span>
</div>
</div>
</div>
</div>
<div class="center-panel">
<div class="panel-header">
<h2><i class="mdi mdi-clipboard-text"></i> 工单进度管理</h2>
<div class="panel-tools">
<span class="tool-item"><i class="mdi mdi-refresh"></i></span>
<span class="tool-item"><i class="mdi mdi-dots-vertical"></i></span>
</div>
</div>
<div id="gantt-chart" class="chart-container"></div>
<div class="order-list">
<table>
<thead>
<tr>
<th>订单编号</th>
<th>产品型号</th>
<th>计划产量</th>
<th>完成量</th>
<th>状态</th>
</tr>
</thead>
<tbody id="order-list-body">
</tbody>
</table>
</div>
</div>
<div class="right-panel">
<div class="panel-header">
<h2><i class="mdi mdi-alert"></i> 故障预警监控</h2>
<div class="panel-tools">
<span class="tool-item"><i class="mdi mdi-refresh"></i></span>
<span class="tool-item"><i class="mdi mdi-dots-vertical"></i></span>
</div>
</div>
<div id="fault-trend" class="chart-container"></div>
<div class="fault-list">
<h3>当前故障设备</h3>
<div id="fault-list-container" class="scrolling-list">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="chart-container" id="efficiency-chart"></div>
<div class="chart-container" id="quality-issues"></div>
</div>
</div>
<script>
// 更新时间
function updateDateTime() {
const now = new Date();
const timeElem = document.getElementById('current-time');
const dateElem = document.getElementById('current-date');
// 更新时间
timeElem.textContent = now.toLocaleTimeString('zh-CN', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
// 更新日期
dateElem.textContent = `${now.getFullYear()} 年 ${now.getMonth() + 1} 月 ${now.getDate()} 日`;
}
// 初始更新并设置定时器
updateDateTime();
setInterval(updateDateTime, 1000);
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script src="js/mock.js"></script>
<script src="js/main.js"></script>
</body>
</html>

复制代码