<!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">报告生成时间：{生成时间}</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">{物料编码}</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">{材质}</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">{子编码}</span></div>
<div class="info-item"><span class="label">建档日期</span><span class="value">{建档日期}</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">{总订单数量}</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">{安全库存}</span></div>
<div class="info-item"><span class="label">在途数量</span><span class="value">{在途数量}</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>
<!-- 此处由 {生产表行} 整体替换 -->
{生产表行}
</tbody>
</table>
<div style="margin-top:8px; font-size:13px; color:#4a5568;">
<strong>汇总：</strong> 总计划 {生产总计划} 件，已完成 {生产已完成} 件，完成率 {生产完成率}%
</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>
<!-- 此处由 {半成品表行} 整体替换 -->
{半成品表行}
</tbody>
</table>
<div style="margin-top:8px; font-size:13px; color:#4a5568;">
<strong>合计半成品库存：</strong> {半成品合计} 件
</div>
</div>
<!-- ===== 页脚 ===== -->
<div class="footer">
报告编号：{报告编号} ｜ 系统自动生成，仅供参考
</div>
</div>
</body>
</html>
