<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>次品原因分析及解决方案报表</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<style>
:root {
--bg: #f3f7ff;
--card: #ffffff;
--text: #1b2a3a;
--muted: #5f728a;
--border: #e4ebf5;
--blue: #2d6cdf;
--violet: #7456ff;
--teal: #14b8a6;
}
* { box-sizing: border-box; }
body {
margin: 0;
color: var(--text);
font-family: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: radial-gradient(circle at 10% 0%, #e7efff 0%, #f3f7ff 34%, #f6f9ff 100%);
}
.wrap {
max-width: 1240px;
margin: 0 auto;
padding: 20px 18px 36px;
}
.hero {
padding: 26px 28px;
border-radius: 20px;
background: linear-gradient(120deg, #1d4ed8 0%, #4f46e5 60%, #0ea5e9 100%);
color: #fff;
box-shadow: 0 16px 36px rgba(37, 99, 235, 0.26);
margin-bottom: 18px;
}
.hero h1 {
margin: 0 0 10px;
font-size: 28px;
letter-spacing: .3px;
}
.hero p {
margin: 0;
color: rgba(255,255,255,.93);
line-height: 1.75;
font-size: 14px;
}
.kpi-grid {
margin: 18px 0;
display: grid;
grid-template-columns: repeat(4, minmax(180px, 1fr));
gap: 12px;
}
.kpi {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px;
box-shadow: 0 8px 18px rgba(22, 40, 77, 0.06);
}
.kpi .label {
color: var(--muted);
font-size: 12px;
margin-bottom: 7px;
}
.kpi .val {
font-size: 24px;
font-weight: 700;
color: #173866;
}
.kpi .sub {
margin-top: 6px;
color: #6f8198;
font-size: 12px;
}
.grid-2 {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 10px 20px rgba(23, 50, 94, 0.06);
padding: 18px;
}
.section-title {
margin: 0 0 12px;
font-size: 18px;
color: #1f3f67;
display: flex;
align-items: center;
gap: 8px;
}
.section-title::before {
content: "";
width: 6px;
height: 18px;
border-radius: 999px;
background: linear-gradient(180deg, var(--blue), var(--teal));
}
.chart {
height: 360px;
width: 100%;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 0;
}
.chip {
font-size: 12px;
border: 1px solid #dce6f7;
background: #f7faff;
color: #31557f;
padding: 4px 10px;
border-radius: 999px;
}
.table-wrap {
overflow: auto;
border: 1px solid var(--border);
border-radius: 12px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 860px;
}
th, td {
border-bottom: 1px solid #ebf0f8;
padding: 10px 12px;
text-align: left;
vertical-align: top;
line-height: 1.6;
}
th {
background: #f6f9ff;
color: #35567f;
font-weight: 600;
}
tr:last-child td { border-bottom: none; }
.muted {
color: var(--muted);
font-size: 13px;
line-height: 1.8;
margin: 0;
}
.bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.ol {
margin: 0;
padding-left: 18px;
color: #2e4867;
line-height: 1.85;
font-size: 14px;
}
@media (max-width: 980px) {
.kpi-grid { grid-template-columns: 1fr 1fr; }
.grid-2, .bottom-grid { grid-template-columns: 1fr; }
.chart { height: 320px; }
}
</style>
</head>
<body>
<div class="wrap">
<div class="hero">
<h1>次品原因分析及解决方案报表</h1>
<p>
数据来源：c:\trae_learning\03_project_agint\次品单.xlsx（Sheet1）<br/>
分析样本：2057条次品单，时间范围 2026-02-28 ~ 2026-03-31
</p>
</div>
<div class="kpi-grid">
<div class="kpi">
<div class="label">样本总量</div>
<div class="val">2,057</div>
<div class="sub">次品单记录数</div>
</div>
<div class="kpi">
<div class="label">Top5占比</div>
<div class="val">36.61%</div>
<div class="sub">帕累托关键区间</div>
</div>
<div class="kpi">
<div class="label">短期降幅目标</div>
<div class="val">-4.4%</div>
<div class="sub">总次品件数（1周）</div>
</div>
<div class="kpi">
<div class="label">长期降幅目标</div>
<div class="val">-11.0%</div>
<div class="sub">总次品件数（1~3个月）</div>
</div>
</div>
<div class="grid-2">
<div class="card">
<h2 class="section-title">帕累托分析（Top5原因）</h2>
<div id="paretoChart" class="chart"></div>
</div>
<div class="card">
<h2 class="section-title">状态分布</h2>
<div id="statusChart" class="chart"></div>
</div>
</div>
<div class="card">
<h2 class="section-title">责任部门高频分布（Top5原因涉及）</h2>
<div id="deptChart" class="chart"></div>
<div class="chip-list">
<span class="chip">前海-渠道部：370</span>
<span class="chip">前海-品控部：160</span>
<span class="chip">前海-物流部：93</span>
<span class="chip">采购部：55</span>
<span class="chip">订单信息部：74</span>
</div>
</div>
<div class="card">
<h2 class="section-title">1. 数据说明与假设</h2>
<p class="muted">已识别字段（按表结构映射）：defective_bn（次品单号）、second_questine_type（二级问题类型）、handler_department（处理部门/产生工序）、create_time（创建时间）。</p>
<p class="muted">统计口径：共2057条记录，时间范围 2026-02-28 ~ 2026-03-31。原始数据未提供“数量”字段，按每条次品单=1件计算。次品损失金额测算按80元/件估算（用于内部预算评估）。</p>
</div>
<div class="card">
<h2 class="section-title">2. 原因占比（Top5，帕累托风格）</h2>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>排名</th>
<th>二级问题类型（second_questine_type）</th>
<th>数量</th>
<th>占比</th>
<th>累计占比</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>折/断/碎/裂</td><td>256</td><td>12.45%</td><td>12.45%</td></tr>
<tr><td>2</td><td>实物与效果图不符</td><td>156</td><td>7.58%</td><td>20.03%</td></tr>
<tr><td>3</td><td>图片模糊</td><td>127</td><td>6.17%</td><td>26.20%</td></tr>
<tr><td>4</td><td>折断碎裂</td><td>115</td><td>5.59%</td><td>31.79%</td></tr>
<tr><td>5</td><td>发错产品</td><td>99</td><td>4.81%</td><td>36.61%</td></tr>
</tbody>
</table>
</div>
<p class="muted">结论：前5大原因合计占比36.61%，为优先改善对象。</p>
</div>
<div class="card">
<h2 class="section-title">3. 根因分析（人机料法环）</h2>
<div class="table-wrap">
<table>
<thead>
<tr><th>主要原因</th><th>根因1（维度）</th><th>根因2（维度）</th></tr>
</thead>
<tbody>
<tr><td>折/断/碎/裂</td><td>渠道端包装SOP执行不一致，缓冲层不足，运输中受压开裂（人+法）</td><td>部分包材抗压等级低于产品脆弱等级，未做分级选材（料+机）</td></tr>
<tr><td>实物与效果图不符</td><td>打样版本变更与量产版本同步延迟，造成描述与实物偏差（法）</td><td>品控侧外观一致性检查项覆盖不足，关键特征未强检（机+法）</td></tr>
<tr><td>图片模糊</td><td>拍摄工位光照/背景标准不统一，导致图像质量波动（环+机）</td><td>上传前缺少清晰度二次校验，审核规则偏宽松（人+法）</td></tr>
<tr><td>折断碎裂</td><td>脆弱件未强制“禁压/朝上”标识，分拣搬运中产生二次损伤（法+环）</td><td>高峰期分拣节拍过快，人工堆码不规范（人）</td></tr>
<tr><td>发错产品</td><td>拣货后未做“订单-SKU-规格”双重校验，错发未被拦截（法+机）</td><td>相似SKU货位邻近，视觉识别难度高，防错设计不足（料+环）</td></tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<h2 class="section-title">4. 解决方案（短期/长期+责任岗位）</h2>
<div class="table-wrap">
<table>
<thead>
<tr><th>原因</th><th>短期措施（1周内）</th><th>长期措施（1~3个月）</th><th>建议责任岗位</th></tr>
</thead>
<tbody>
<tr><td>折/断/碎/裂</td><td>上线脆弱品加固包装清单；对高风险订单出库前抽检20%并留图</td><td>建立包材分级标准与系统自动推荐规则</td><td>包装组长、仓储主管、物流质量经理</td></tr>
<tr><td>实物与效果图不符</td><td>冻结旧版图文模板；异常单48小时内完成版本核验闭环</td><td>搭建打样-量产版本一致性管控（PLM/ERP联动）</td><td>产品经理、打样主管、品控经理</td></tr>
<tr><td>图片模糊</td><td>拍照位补光与背景统一；执行“模糊即退回”规则</td><td>引入清晰度识别模型并联动工单拦截</td><td>视觉质检、客服质检主管、IT产品经理</td></tr>
<tr><td>折断碎裂</td><td>脆弱品强制粘贴“禁压/朝上”标签；高峰班次增设复核岗</td><td>重构仓内动线与堆码策略，设脆弱品专区</td><td>仓储主管、现场运营经理</td></tr>
<tr><td>发错产品</td><td>增加打包前二次扫码；相似SKU临时隔离</td><td>推行Poka-Yoke防错：货位重排+电子标签+系统强校验</td><td>仓储主管、WMS产品经理、班组长</td></tr>
</tbody>
</table>
</div>
</div>
<div class="bottom-grid">
<div class="card">
<h2 class="section-title">5. 预期效果（量化）</h2>
<div class="table-wrap">
<table>
<thead>
<tr><th>指标</th><th>基线</th><th>短期目标（1周）</th><th>长期目标（1~3个月）</th></tr>
</thead>
<tbody>
<tr><td>Top5原因次品件数</td><td>753件</td><td>663件（-90，约-12%）</td><td>527件（-226，约-30%）</td></tr>
<tr><td>总次品件数（按样本2057）</td><td>2057件</td><td>1967件（约-4.4%）</td><td>1831件（约-11.0%）</td></tr>
<tr><td>次品损失金额（假设80元/件）</td><td>164,560元</td><td>157,360元（节约7,200元）</td><td>146,480元（节约18,080元）</td></tr>
</tbody>
</table>
</div>
<p class="muted">补充说明（假设）：若月总出货量为100,000单，则次品率可由2.06%下降至约1.83%（长期）。</p>
</div>
<div class="card">
<h2 class="section-title">6. 执行优先级建议</h2>
<ol class="ol">
<li>先做“发错产品 + 破损类”双线并行治理，优先拿短期成果。</li>
<li>建立周度追踪面板：新增次品数、Top5占比、复发率、关闭时效。</li>
<li>建立月度评审机制：流程固化率、系统拦截率、单件损失金额下降幅度。</li>
<li>将改善措施固化为SOP，并与绩效指标、质检抽检联动。</li>
</ol>
</div>
</div>
</div>
<script>
const reasonNames = ['折/断/碎/裂', '实物与效果图不符', '图片模糊', '折断碎裂', '发错产品'];
const reasonValues = [256, 156, 127, 115, 99];
const reasonRate = [12.45, 7.58, 6.17, 5.59, 4.81];
const cumRate = [12.45, 20.03, 26.20, 31.79, 36.61];
const pareto = echarts.init(document.getElementById('paretoChart'));
pareto.setOption({
tooltip: { trigger: 'axis' },
legend: { top: 2, textStyle: { color: '#4f6785' } },
grid: { left: 48, right: 56, top: 46, bottom: 52 },
xAxis: { type: 'category', data: reasonNames, axisLabel: { color: '#4f6785', interval: 0, rotate: 16 } },
yAxis: [
{ type: 'value', name: '数量', axisLabel: { color: '#4f6785' }, splitLine: { lineStyle: { color: '#eef3fa' } } },
{ type: 'value', name: '累计占比', max: 100, axisLabel: { formatter: '{value}%', color: '#4f6785' } }
],
series: [
{ name: '数量', type: 'bar', data: reasonValues, barWidth: 28, itemStyle: { borderRadius: [8, 8, 0, 0], color: '#4f7cff' } },
{ name: '累计占比', type: 'line', yAxisIndex: 1, data: cumRate, smooth: true, symbolSize: 8, itemStyle: { color: '#12b886' }, lineStyle: { width: 3 } }
]
});
const status = echarts.init(document.getElementById('statusChart'));
status.setOption({
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
legend: { bottom: 4, textStyle: { color: '#4f6785' } },
series: [{
type: 'pie',
radius: ['48%', '72%'],
center: ['50%', '47%'],
label: { formatter: '{b}\n{d}%' },
data: [
{ name: '未处理', value: 1142, itemStyle: { color: '#f59e0b' } },
{ name: '审核通过', value: 646, itemStyle: { color: '#10b981' } },
{ name: '审核拒绝', value: 258, itemStyle: { color: '#ef4444' } },
{ name: '其他', value: 11, itemStyle: { color: '#94a3b8' } }
]
}]
});
const dept = echarts.init(document.getElementById('deptChart'));
dept.setOption({
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: { left: 92, right: 24, top: 20, bottom: 28 },
xAxis: { type: 'value', splitLine: { lineStyle: { color: '#eef3fa' } }, axisLabel: { color: '#4f6785' } },
yAxis: { type: 'category', axisLabel: { color: '#4f6785' }, data: ['前海-渠道部', '前海-品控部', '前海-物流部', '订单信息部', '采购部'] },
series: [{
type: 'bar',
data: [370, 160, 93, 74, 55],
barWidth: 18,
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#60a5fa' },
{ offset: 1, color: '#7c3aed' }
]),
borderRadius: [0, 8, 8, 0]
},
label: { show: true, position: 'right', color: '#445f82' }
}]
});
window.addEventListener('resize', () => {
pareto.resize();
status.resize();
dept.resize();
});
</script>
</body>
</html>
index.html
md
README.md
index.html