<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MES System Frontend</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; }
#header { background: #333; color: #fff; padding: 10px 20px; font-size: 24px; }
#sidebar { width: 200px; height: calc(100vh - 20px); background: #f4f4f4; position: fixed; overflow: auto; padding: 10px 0; }
#content { margin-left: 210px; padding: 20px; }
ul { list-style-type: none; padding: 0; }
li { cursor: pointer; padding: 10px; border-bottom: 1px solid #ccc; }
li:hover { background: #ddd; }
.hidden { display: none; }
</style>
</head>
<body>
<div id="header">
MES系统
</div>
<div id="sidebar">
<ul>
<!-- Production Management Section -->
<li onclick="toggleList('production-management')">生产管理
<ul id="production-management" class="hidden">
<li onclick="jumpToPage('production-planning.html')">生产计划与调度</li>
<li onclick="jumpToPage('order-management.html')">订单管理</li>
<li onclick="jumpToPage('production-tracking.html')">生产执行跟踪</li>
</ul>
</li>
<!-- Process Management Section -->
<li onclick="toggleList('process-management')">工艺管理
<ul id="process-management" class="hidden">
<li onclick="jumpToPage('process-route.html')">工艺路线定义</li>
<li onclick="jumpToPage('process-parameters.html')">工艺参数监控</li>
<li onclick="jumpToPage('bom-management.html')">BOM管理</li>
</ul>
</li>
<!-- Equipment Management Section -->
<li onclick="toggleList('equipment-management')">设备管理
<ul id="equipment-management" class="hidden">
<li onclick="jumpToPage('equipment-status.html')">设备状态监控</li>
<li onclick="jumpToPage('maintenance-plan.html')">维护与保养计划</li>
<li onclick="jumpToPage('fault-analysis.html')">故障记录与分析</li>
</ul>
</li>
<!-- Quality Management Section -->
<li onclick="toggleList('quality-management')">质量管理
<ul id="quality-management" class="hidden">
<li onclick="jumpToPage('quality-inspection.html')">质量检验记录</li>
<li onclick="jumpToPage('nonconforming-goods.html')">不合格品处理</li>
<li onclick="jumpToPage('quality-data-analysis.html')">质量数据分析</li>
</ul>
</li>
<!-- Material Management Section -->
<li onclick="toggleList('material-management')">物料管理
<ul id="material-management" class="hidden">
<li onclick="jumpToPage('material-inventory.html')">物料库存监控</li>
<li onclick="jumpToPage('material-trace.html')">物料流转跟踪</li>
<li onclick="jumpToPage('material-consumption.html')">物料消耗分析</li>
</ul>
</li>
<!-- Reporting and Analysis Section -->
<li onclick="toggleList('reporting-and-analysis')">报表与统计分析
<ul id="reporting-and-analysis" class="hidden">
<li onclick="jumpToPage('real-time-report.html')">实时数据报表</li>
<li onclick="jumpToPage('historical-data.html')">历史数据分析</li>
<li onclick="jumpToPage('statistical-charts.html')">统计图表展示</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1>Welcome to MES System</h1>
<p>Select a function from the sidebar to get started.</p>
</div>
<script>
function toggleList(listId) {
var list = document.getElementById(listId);
if (list.classList.contains('hidden')) {
list.classList.remove('hidden');
} else {
list.classList.add('hidden');
}
}
function jumpToPage(page) {
window.location.href = page;
}
</script>
</body>
</html>
