qa-score-demo.html 5.8 KB

1234
  1. <!doctype html>
  2. <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>供应监测评分卡 QA 质量评分演示</title>
  3. <style>*{box-sizing:border-box}body{margin:0;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color:#13213a;background:#eef4fb}.page{min-height:100vh;padding:28px 36px 40px}.hero{background:linear-gradient(135deg,#183f63 0%,#235f8f 100%);border-radius:10px;padding:30px 34px;color:#fff;box-shadow:0 12px 30px rgba(31,68,105,.18)}.hero h1{margin:0 0 10px;font-size:30px;letter-spacing:0}.hero p{margin:0;color:rgba(255,255,255,.84);line-height:1.7}.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}.card,.panel{background:#fff;border:1px solid #dbe6f3;border-radius:8px;box-shadow:0 10px 22px rgba(30,65,110,.08)}.card{padding:18px 20px;border-top:3px solid #3a7afe}.label{font-size:13px;color:#60708e;margin-bottom:8px}.value{font-size:28px;font-weight:700;color:#071b3b}.hint{margin-top:7px;color:#7b8aa5;font-size:12px}.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-bottom:18px}.panel{padding:20px 22px}.panel h2{margin:0 0 14px;font-size:18px}.formula{background:#f6f8fc;border:1px solid #e0e8f4;border-radius:6px;padding:14px 16px;line-height:1.8;color:#2c3b55}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.step{border:1px solid #e0e8f4;border-radius:8px;padding:14px;background:#fbfdff;min-height:104px}.step strong{display:block;color:#245b8e;margin-bottom:8px}.step span{color:#64748b;font-size:13px;line-height:1.55}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{border-bottom:1px solid #e5edf6;padding:12px 10px;text-align:left;font-size:13px}th{background:#f6f8fc;color:#41516f;font-weight:600}td.num,th.num{text-align:right}.tag{display:inline-block;padding:3px 8px;border-radius:4px;font-size:12px}.ok{color:#0a8f5b;background:#e8f8f1;border:1px solid #bdebd8}.warn{color:#d97706;background:#fff7e6;border:1px solid #ffe0a3}.bad{color:#e23d3d;background:#fff0f0;border:1px solid #ffc8c8}.note{color:#63718c;font-size:13px;line-height:1.7;margin-top:12px}@media(max-width:1100px){.summary,.steps{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}@media(max-width:680px){.page{padding:18px}.summary,.steps{grid-template-columns:1fr}.hero h1{font-size:24px}}</style></head>
  4. <body><main class="page"><section class="hero"><h1>供应监测评分卡 + QA 质量评分</h1><p>将《2026年每日QA登记表》的抽检结果纳入供应商评分卡,补充质量维度,形成成本、交付、账期、质量四项综合评分。</p></section><section class="summary"><div class="card"><div class="label">评分维度</div><div class="value">4 项</div><div class="hint">成本 / 交付 / 账期 / 质量</div></div><div class="card"><div class="label">质量权重</div><div class="value">25%</div><div class="hint">建议进入综合分</div></div><div class="card"><div class="label">预警阈值</div><div class="value">95%</div><div class="hint">低于即触发质量预警</div></div><div class="card"><div class="label">无 QA 数据</div><div class="value">80 分</div><div class="hint">临时默认值,标记待补充</div></div></section><section class="grid"><div class="panel"><h2>评分逻辑</h2><div class="formula">QA 合格率 = (抽检总数 - 不合格总数) / 抽检总数<br>质量分 = QA 合格率 x 100<br>综合分 = 成本分 x 30% + 交付分 x 30% + 账期分 x 15% + 质量分 x 25%</div><p class="note">如果供应商暂时没有匹配到 QA 抽检记录,系统不直接判定为差,而是给 80 分默认值,并在评分卡展示“暂无 QA 数据”。</p></div><div class="panel"><h2>业务价值</h2><div class="steps"><div class="step"><strong>识别风险</strong><span>把交付正常但质量波动的供应商标出来。</span></div><div class="step"><strong>统一口径</strong><span>用合格率和不合格数解释质量分来源。</span></div><div class="step"><strong>辅助采购</strong><span>综合比较价格、交期、账期和质量。</span></div><div class="step"><strong>后续扩展</strong><span>可接入批次、品类、月份趋势和扣分规则。</span></div></div></div></section><section class="panel"><h2>评分卡演示数据</h2><table><thead><tr><th>供应商名称</th><th class="num">成本分</th><th class="num">交付分</th><th class="num">账期分</th><th class="num">QA 合格率</th><th class="num">质量分</th><th class="num">综合分</th><th>预警</th></tr></thead><tbody><tr><td>德清顾舒家华高分子材料有限公司</td><td class="num">86</td><td class="num">74</td><td class="num">100</td><td class="num">98.20%</td><td class="num">98.2</td><td class="num">87.7</td><td><span class="tag ok">A级</span></td></tr><tr><td>广州市金凯迪家居用品有限公司</td><td class="num">92</td><td class="num">68</td><td class="num">90</td><td class="num">96.40%</td><td class="num">96.4</td><td class="num">84.5</td><td><span class="tag warn">交付预警</span></td></tr><tr><td>湖州高裕家居科技有限公司</td><td class="num">88</td><td class="num">70</td><td class="num">90</td><td class="num">93.50%</td><td class="num">93.5</td><td class="num">84.3</td><td><span class="tag bad">质量预警</span></td></tr><tr><td>浙江越翔家居用品有限公司</td><td class="num">80</td><td class="num">62</td><td class="num">40</td><td class="num">暂无</td><td class="num">80.0</td><td class="num">68.6</td><td><span class="tag bad">资料待维护</span></td></tr></tbody></table><p class="note">本页为离线演示界面,展示的是方案口径和样例数据;正式接入时,QA 合格率从每日 QA 登记表汇总,按供应商或供应商 + 产品维度匹配到供应监测评分卡。</p></section></main></body></html>