<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>物料详细信息报告</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif;
background: #f5f7fa;
padding: 30px;
color: #2c3e50;
}
.container {
max-width: 1100px;
margin: 0 auto;
background: white;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 30px 35px;
}
.header {
background: linear-gradient(135deg, #1e2a3a, #2c3e50);
color: white;
padding: 18px 25px;
border-radius: 6px;
margin-bottom: 25px;
}
.header h1 {
font-size: 26px;
font-weight: 600;
letter-spacing: 1px;
}
.header .sub {
font-size: 14px;
opacity: 0.8;
margin-top: 5px;
}
.section {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 18px 22px;
margin-top: 22px;
}
.section-title {
font-size: 18px;
font-weight: 600;
color: #1a2a3a;
border-left: 5px solid #3498db;
padding-left: 12px;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.section-title span { margin-right: 8px; }
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px 20px;
margin-top: 8px;
}
.info-item {
display: flex;
border-bottom: 1px dashed #e2e8f0;
padding: 6px 0;
}
.info-item .label {
font-weight: 600;
color: #4a5568;
min-width: 100px;
}
.info-item .value {
color: #1a202c;
word-break: break-word;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 14px;
}
th {
background: #edf2f7;
color: #1a202c;
font-weight: 600;
padding: 10px 12px;
border: 1px solid #cbd5e0;
text-align: left;
}
td {
padding: 9px 12px;
border: 1px solid #cbd5e0;
background: white;
}
tr:hover td {
background: #f7fafc;
}
.badge {
background: #ecc94b;
color: #744210;
font-size: 12px;
padding: 2px 10px;
border-radius: 12px;
display: inline-block;
}
.empty-msg {
color: #718096;
font-style: italic;
padding: 8px 0;
}
.footer {
margin-top: 30px;
text-align: right;
font-size: 12px;
color: #a0aec0;
border-top: 1px solid #e2e8f0;
padding-top: 15px;
}
@media print {
body { background: white; padding: 10px; }
.container { box-shadow: none; border: none; }
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="header">
<h1>📦 物料详细信息报告</h1>
<div class="sub">报告生成时间：2026-07-28 15:30:22</div>
</div>
<!-- 基本信息（顶部概览） -->
<div class="section" style="margin-top:0;">
<div class="section-title"><span>📌</span> 基本信息</div>
<div class="info-grid">
<div class="info-item"><span class="label">物料编码</span><span class="value">M-2024-0089</span></div>
<div class="info-item"><span class="label">物料名称</span><span class="value">精密齿轮轴</span></div>
<div class="info-item"><span class="label">规格型号</span><span class="value">Φ25×120mm 20CrMnTi</span></div>
<div class="info-item"><span class="label">材质</span><span class="value">20CrMnTi 渗碳钢</span></div>
<div class="info-item"><span class="label">单位</span><span class="value">件</span></div>
<div class="info-item"><span class="label">终端客户</span><span class="value">某重工集团</span></div>
<div class="info-item"><span class="label">子编码</span><span class="value">SUB-0089-A</span></div>
<div class="info-item"><span class="label">建档日期</span><span class="value">2026-01-15</span></div>
</div>
</div>
<!-- 第一栏：订单与库存 -->
<div class="section">
<div class="section-title"><span>📊</span> 订单与库存</div>
<div class="info-grid">
<div class="info-item"><span class="label">总订单数量</span><span class="value">3,200</span></div>
<div class="info-item"><span class="label">未交数量</span><span class="value">1,050</span></div>
<div class="info-item"><span class="label">当前库存</span><span class="value">680</span></div>
<div class="info-item"><span class="label">安全库存</span><span class="value">300</span></div>
<div class="info-item"><span class="label">在途数量</span><span class="value">0</span></div>
</div>
</div>
<!-- 第二栏：生产情况 -->
<div class="section">
<div class="section-title"><span>🏭</span> 生产情况</div>
<table>
<thead>
<tr><th>工单号</th><th>计划数量</th><th>完成数量</th><th>预计完成日期</th><th>状态</th></tr>
</thead>
<tbody>
<tr><td>WO-2026-015</td><td>500</td><td>200</td><td>2026-08-10</td><td><span class="badge">进行中</span></td></tr>
<tr><td>WO-2026-032</td><td>800</td><td>800</td><td>2026-07-20</td><td><span class="badge" style="background:#68d391;color:#22543d;">已完成</span></td></tr>
<tr><td>WO-2026-047</td><td>600</td><td>150</td><td>2026-08-25</td><td><span class="badge">进行中</span></td></tr>
</tbody>
</table>
<div style="margin-top:8px; font-size:13px; color:#4a5568;">
<strong>汇总：</strong> 总计划 1,900 件，已完成 1,150 件，完成率 60.5%
</div>
</div>
<!-- 第三栏：半成品情况 -->
<div class="section">
<div class="section-title"><span>🔧</span> 半成品情况</div>
<table>
<thead>
<tr><th>半成品编码</th><th>半成品名称</th><th>库存数量</th><th>所在工序</th></tr>
</thead>
<tbody>
<tr><td>SEMI-001</td><td>齿轮轴毛坯</td><td>120</td><td>锻造</td></tr>
<tr><td>SEMI-002</td><td>齿轮轴半精车</td><td>80</td><td>车削</td></tr>
<tr><td>SEMI-003</td><td>齿轮轴滚齿</td><td>45</td><td>滚齿</td></tr>
</tbody>
</table>
<div style="margin-top:8px; font-size:13px; color:#4a5568;">
<strong>合计半成品库存：</strong> 245 件
</div>
</div>
<!-- 页脚 -->
<div class="footer">
报告编号：RPT-20260728-001 ｜ 系统自动生成，仅供参考
</div>
</div>
</body>
</html>
