From c2dd94e2585ba89704016423e368769386bd2f54 Mon Sep 17 00:00:00 2001
From: shenzhouyu <zhouyu.shen@xujiesoft.com>
Date: Tue, 28 Jul 2026 10:51:25 +0800
Subject: [PATCH] =?UTF-8?q?cpp=EF=BC=8Cppk=E6=8A=A5=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/qc/qc_report.js                       |    5 +
 .../modules/report/SPCProcess_Stability.vue   | 1531 +++++++++++++++++
 2 files changed, 1536 insertions(+)
 create mode 100644 src/views/modules/report/SPCProcess_Stability.vue

diff --git a/src/api/qc/qc_report.js b/src/api/qc/qc_report.js
index b3164f0..16ef64b 100644
--- a/src/api/qc/qc_report.js
+++ b/src/api/qc/qc_report.js
@@ -33,3 +33,8 @@ export const getOQCDetailReport = data => createAPI('/pms/qcReport/getOQCDetailR
 
 // 导出
 export const downloadQcDetailRecord = data => createAPI('/pms/qcReport/downloadQcDetailRecord','post',data, 'download')
+
+// SPC 过程能力报表
+export const getSpcMaterials = data => createAPI('/pms/qcReport/getSpcMaterials', 'post', data)
+export const getSpcInspectionItems = data => createAPI('/pms/qcReport/getSpcInspectionItems', 'post', data)
+export const getSpcMeasurements = data => createAPI('/pms/qcReport/getSpcMeasurements', 'post', data)
diff --git a/src/views/modules/report/SPCProcess_Stability.vue b/src/views/modules/report/SPCProcess_Stability.vue
new file mode 100644
index 0000000..d7a4a05
--- /dev/null
+++ b/src/views/modules/report/SPCProcess_Stability.vue
@@ -0,0 +1,1531 @@
+<template>
+  <div class="spc-page">
+    <div class="container">
+      <section class="query-bar">
+        <div class="query-head">
+          <div class="query-title">Query Parameters · 查询条件</div>
+          <div class="stage-toggle">
+            <button :class="{ on: stage === 'ppk' }" @click="switchStage('ppk')">样品阶段 · 短期 PPK</button>
+            <button :class="{ on: stage === 'cpk' }" @click="switchStage('cpk')">量产阶段 · 长期 CPK</button>
+          </div>
+        </div>
+        <div class="query-body">
+          <div class="qr qr-1">
+            <div class="field">
+              <label>工单号</label>
+              <input v-model="query.woNumber" type="text" placeholder="工单号">
+            </div>
+            <div class="field">
+              <label>设备编号</label>
+              <input v-model="query.deviceNo" type="text" placeholder="设备编号">
+            </div>
+            <div class="field">
+              <label>操作员</label>
+              <input v-model="query.operator" type="text" placeholder="操作员">
+            </div>
+            <div class="field">
+              <label class="picker-label" @click="openPartDialog">
+                <span class="req">*</span>物料编码:
+              </label>
+              <input :value="query.partNo" type="text" readonly class="picker-input" placeholder="点击标签选择" @click="openPartDialog">
+            </div>
+            <div class="field">
+              <label>物料名称</label>
+              <input :value="query.partDesc" type="text" readonly>
+            </div>
+            <div class="field">
+              <label class="picker-label" :class="{ disabled: !query.partNo }" @click="openItemDialog">
+                <span class="req">*</span>检验项目编码:
+              </label>
+              <input :value="query.itemNo" type="text" readonly class="picker-input" placeholder="点击标签选择" @click="openItemDialog">
+            </div>
+            <div class="field">
+              <label>检验项目名称</label>
+              <input :value="query.itemDesc" type="text" readonly>
+            </div>
+          </div>
+          <div class="qr qr-2">
+            <div class="field">
+              <label>开始日期</label>
+              <input v-model="query.startDate" type="date">
+            </div>
+            <div class="field">
+              <label>截止日期</label>
+              <input v-model="query.endDate" type="date">
+            </div>
+            <div class="field">
+              <label>子组容量 n (2-15)</label>
+              <input v-model.number="query.nVal" type="number" min="2" max="15">
+            </div>
+            <div class="field">
+              <label>子组数 k</label>
+              <input v-model.number="query.kVal" type="number" min="5" max="200">
+            </div>
+            <button class="btn btn-primary" :disabled="loading" @click="runCalc">{{ loading ? '计算中...' : '计算' }}</button>
+            <!-- <button class="btn btn-ghost" @click="exportCSV">导出</button> -->
+          </div>
+        </div>
+      </section>
+
+      <div v-if="warnMsg" class="warn-box show" v-html="warnMsg"></div>
+
+      <!-- KPI -->
+      <section v-if="!hasResult" class="kpi-strip empty">
+        <div class="empty-tip">请点击「计算」生成报表</div>
+      </section>
+      <section v-else class="kpi-strip">
+        <template v-if="stage === 'ppk'">
+          <div class="kpi-cell" :class="ppkOk ? 'ok' : 'ng'">
+            <div class="kpi-label">PPK (Sample)</div>
+            <div class="kpi-value">{{ fm(result.Ppk, 2) }}</div>
+            <div class="kpi-sub">标准≥1.67 <span class="kpi-badge" :class="ppkOk ? 'ok' : 'ng'">{{ ppkOk ? 'PASS' : 'FAIL' }}</span></div>
+          </div>
+          <div class="kpi-cell accent">
+            <div class="kpi-label">Pp</div>
+            <div class="kpi-value">{{ fm(result.Pp, 2) }}</div>
+            <div class="kpi-sub">过程潜力</div>
+          </div>
+          <div class="kpi-cell">
+            <div class="kpi-label">PPU / PPL</div>
+            <div class="kpi-value">{{ fm(result.PPU, 2) }} / {{ fm(result.PPL, 2) }}</div>
+            <div class="kpi-sub">上侧 / 下侧</div>
+          </div>
+          <div class="kpi-cell amber">
+            <div class="kpi-label">σ WITHIN</div>
+            <div class="kpi-value">{{ fm(result.sigma, 4) }}<span class="unit">{{ itemSpec.unit || '' }}</span></div>
+            <div class="kpi-sub">组内·R̄/d₂</div>
+          </div>
+          <div class="kpi-cell">
+            <div class="kpi-label">样本量</div>
+            <div class="kpi-value">{{ result.N }}</div>
+            <div class="kpi-sub">{{ result.gCnt }}×{{ result.groups[0].length }} 子组</div>
+          </div>
+          <div class="kpi-cell" :class="ppkOk ? 'ok' : 'ng'">
+            <div class="kpi-label">判定</div>
+            <div class="kpi-value">{{ ppkOk ? 'OK' : 'NG' }}</div>
+            <div class="kpi-sub">
+              <span class="kpi-badge" :class="gradeBadgeClass(gradeCpk(result.Ppk))">{{ gradeCpk(result.Ppk).label }}</span>
+              {{ ppkOk ? '满足样品准入' : '需改善制程' }}
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="kpi-cell" :class="cpkOk ? 'ok' : 'ng'">
+            <div class="kpi-label">CPK (Mass Prod)</div>
+            <div class="kpi-value">{{ fm(result.Cpk, 2) }}</div>
+            <div class="kpi-sub">标准≥1.33 <span class="kpi-badge" :class="cpkOk ? 'ok' : 'ng'">{{ cpkOk ? 'PASS' : 'FAIL' }}</span></div>
+          </div>
+          <div class="kpi-cell accent">
+            <div class="kpi-label">Cp</div>
+            <div class="kpi-value">{{ fm(result.Cp, 2) }}</div>
+            <div class="kpi-sub">过程能力</div>
+          </div>
+          <div class="kpi-cell">
+            <div class="kpi-label">CPU / CPL</div>
+            <div class="kpi-value">{{ fm(result.CPU, 2) }} / {{ fm(result.CPL, 2) }}</div>
+            <div class="kpi-sub">上侧 / 下侧</div>
+          </div>
+          <div class="kpi-cell amber">
+            <div class="kpi-label">σ OVERALL</div>
+            <div class="kpi-value">{{ fm(result.sO, 4) }}<span class="unit">{{ itemSpec.unit || '' }}</span></div>
+            <div class="kpi-sub">整体·样本标准差</div>
+          </div>
+          <div class="kpi-cell">
+            <div class="kpi-label">PPM</div>
+            <div class="kpi-value">{{ formatNum(result.ppmT) }}</div>
+            <div class="kpi-sub">USL侧:{{ formatNum(result.ppmU) }} LSL侧:{{ formatNum(result.ppmL) }}</div>
+          </div>
+          <div class="kpi-cell" :class="cpkOk ? 'ok' : 'ng'">
+            <div class="kpi-label">判定</div>
+            <div class="kpi-value">{{ cpkOk ? 'OK' : 'NG' }}</div>
+            <div class="kpi-sub">
+              <span class="kpi-badge" :class="gradeBadgeClass(gradeCpk(result.Cpk))">{{ gradeCpk(result.Cpk).label }}</span>
+              {{ cpkOk ? '量产稳定受控' : '需改善制程' }}
+            </div>
+          </div>
+        </template>
+      </section>
+
+      <section class="main-grid">
+        <aside>
+          <div class="panel">
+            <div class="panel-head"><div class="panel-title">过程能力指数</div></div>
+            <div class="panel-body side-stat">
+              <div v-if="!hasResult" class="wait-tip">等待计算...</div>
+              <template v-else-if="stage === 'ppk'">
+                <div class="stat-block">
+                  <div class="stat-block-title">样品阶段 · PPK</div>
+                  <div class="stat-row"><span class="k">总均值 X̄̄</span><span class="v">{{ fm(result.Xb) }} {{ itemSpec.unit || '' }}</span></div>
+                  <div class="stat-row"><span class="k">平均极差 R̄</span><span class="v">{{ fm(result.Rb) }}</span></div>
+                  <div class="stat-row"><span class="k">组内σ</span><span class="v">{{ fm(result.sigma, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">样本 N</span><span class="v">{{ result.N }} ({{ result.gCnt }}×{{ result.groups[0].length }})</span></div>
+                </div>
+                <div class="stat-block amber">
+                  <div class="stat-block-title">能力指数</div>
+                  <div class="stat-row"><span class="k">Pp</span><span class="v">{{ fm(result.Pp) }}</span></div>
+                  <div class="stat-row"><span class="k">PPU (USL)</span><span class="v">{{ fm(result.PPU) }}</span></div>
+                  <div class="stat-row"><span class="k">PPL (LSL)</span><span class="v">{{ fm(result.PPL) }}</span></div>
+                  <div class="stat-row"><span class="k">Ppk</span><span class="v" :class="tagClass(result.Ppk, 1.67)">{{ fm(result.Ppk) }}</span></div>
+                </div>
+              </template>
+              <template v-else-if="hasResult">
+                <div class="stat-block">
+                  <div class="stat-block-title">量产阶段 · CPK</div>
+                  <div class="stat-row"><span class="k">总均值 X̄</span><span class="v">{{ fm(result.Xa) }} {{ itemSpec.unit || '' }}</span></div>
+                  <div class="stat-row"><span class="k">整体σ (s)</span><span class="v">{{ fm(result.sO, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">样本总数 N</span><span class="v">{{ result.N }}</span></div>
+                </div>
+                <div class="stat-block amber">
+                  <div class="stat-block-title">能力指数</div>
+                  <div class="stat-row"><span class="k">Cp</span><span class="v">{{ fm(result.Cp) }}</span></div>
+                  <div class="stat-row"><span class="k">CPU (USL)</span><span class="v">{{ fm(result.CPU) }}</span></div>
+                  <div class="stat-row"><span class="k">CPL (LSL)</span><span class="v">{{ fm(result.CPL) }}</span></div>
+                  <div class="stat-row"><span class="k">Cpk</span><span class="v" :class="tagClass(result.Cpk, 1.33)">{{ fm(result.Cpk) }}</span></div>
+                </div>
+              </template>
+            </div>
+          </div>
+
+          <div class="panel">
+            <div class="panel-head"><div class="panel-title">控制界限 / 分布参数</div></div>
+            <div class="panel-body side-stat">
+              <div v-if="!hasResult" class="wait-tip">等待计算...</div>
+              <template v-else-if="stage === 'ppk'">
+                <div class="stat-block steel">
+                  <div class="stat-block-title">X-bar 图界限</div>
+                  <div class="stat-row"><span class="k">UCL</span><span class="v">{{ fm(result.XU, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">CL (X̄̄)</span><span class="v">{{ fm(result.Xb, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">LCL</span><span class="v">{{ fm(result.XL, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">系数 A₂</span><span class="v">{{ getCt(result.groups[0].length).A2.toFixed(3) }}</span></div>
+                </div>
+                <div class="stat-block steel">
+                  <div class="stat-block-title">R 图界限</div>
+                  <div class="stat-row"><span class="k">UCL</span><span class="v">{{ fm(result.RU, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">CL (R̄)</span><span class="v">{{ fm(result.Rb, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">LCL</span><span class="v">{{ fm(result.RL, 4) }}</span></div>
+                </div>
+              </template>
+              <template v-else-if="hasResult">
+                <div class="stat-block steel">
+                  <div class="stat-block-title">正态分布参数</div>
+                  <div class="stat-row"><span class="k">μ (均值)</span><span class="v">{{ fm(result.Xa, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">σ (标准差)</span><span class="v">{{ fm(result.sO, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">USL +3σ</span><span class="v">{{ fm(result.Xa + 3 * result.sO, 4) }}</span></div>
+                  <div class="stat-row"><span class="k">LSL -3σ</span><span class="v">{{ fm(result.Xa - 3 * result.sO, 4) }}</span></div>
+                </div>
+                <div class="stat-block steel">
+                  <div class="stat-block-title">PPM 预估</div>
+                  <div class="stat-row"><span class="k">USL 侧 PPM</span><span class="v">{{ formatNum(result.ppmU) }}</span></div>
+                  <div class="stat-row"><span class="k">LSL 侧 PPM</span><span class="v">{{ formatNum(result.ppmL) }}</span></div>
+                  <div class="stat-row"><span class="k">总 PPM</span><span class="v" :class="ppmTagClass(result.ppmT)">{{ formatNum(result.ppmT) }}</span></div>
+                </div>
+              </template>
+            </div>
+          </div>
+
+          <div class="panel">
+            <div class="panel-head"><div class="panel-title">判定准则</div></div>
+            <div class="panel-body">
+              <ul v-if="hasResult" class="criterion-list">
+                <li v-for="(c, idx) in criteriaList" :key="idx">
+                  <div class="ck" :class="c.pass ? 'pass' : 'fail'"><span class="dot"></span>{{ c.label }}</div>
+                  <div class="cv">{{ c.value }}</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </aside>
+
+        <div>
+          <div class="chart-stack">
+            <template v-if="hasResult && stage === 'ppk'">
+              <div class="chart-card">
+                <div class="chart-head">
+                  <div class="chart-title"><span class="num">01</span> X-bar 控制图</div>
+                  <div class="chart-meta">
+                    <span>CL:<b>{{ fm(result.Xb, 4) }}</b></span>
+                    <span>UCL:<b>{{ fm(result.XU, 4) }}</b></span>
+                    <span>LCL:<b>{{ fm(result.XL, 4) }}</b></span>
+                  </div>
+                </div>
+                <div class="chart-body"><div ref="chartXbar" class="chart-el"></div></div>
+              </div>
+              <div class="chart-card">
+                <div class="chart-head">
+                  <div class="chart-title"><span class="num b">02</span> R 控制图</div>
+                  <div class="chart-meta">
+                    <span>CL:<b>{{ fm(result.Rb, 4) }}</b></span>
+                    <span>UCL:<b>{{ fm(result.RU, 4) }}</b></span>
+                    <span>LCL:<b>{{ fm(result.RL, 4) }}</b></span>
+                  </div>
+                </div>
+                <div class="chart-body"><div ref="chartR" class="chart-el"></div></div>
+              </div>
+            </template>
+            <template v-else-if="hasResult">
+              <div class="chart-card">
+                <div class="chart-head">
+                  <div class="chart-title"><span class="num">01</span> I-MR 控制图</div>
+                  <div class="chart-meta">
+                    <span>I-CL:<b>{{ fm(result.Xa, 4) }}</b></span>
+                    <span>MR̄:<b>{{ fm(result.MRbar, 4) }}</b></span>
+                    <span>MR-UCL:<b>{{ fm(result.MR_UCL, 4) }}</b></span>
+                  </div>
+                </div>
+                <div class="chart-body"><div ref="chartIMR" class="chart-el"></div></div>
+              </div>
+              <div class="chart-card">
+                <div class="chart-head">
+                  <div class="chart-title"><span class="num b">02</span> 直方图 + 正态分布</div>
+                  <div class="chart-meta">
+                    <span>μ:<b>{{ fm(result.Xa, 4) }}</b></span>
+                    <span>σ:<b>{{ fm(result.sO, 4) }}</b></span>
+                  </div>
+                </div>
+                <div class="chart-body"><div ref="chartHist" class="chart-el"></div></div>
+              </div>
+            </template>
+          </div>
+
+          <section class="table-panel">
+            <div class="panel-head">
+              <div class="panel-title">子组 / 样本明细数据</div>
+            </div>
+            <div class="table-wrap">
+              <table v-if="hasResult && stage === 'ppk'" class="detail">
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th v-for="(g, i) in result.groups" :key="'h'+i" class="num">G{{ String(i + 1).padStart(2, '0') }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="j in nVal" :key="'x'+j">
+                    <td>X{{ j }}</td>
+                    <td v-for="(g, i) in result.groups" :key="'xv'+i+j" class="num">{{ g[j - 1] != null ? Number(g[j - 1]).toFixed(3) : '' }}</td>
+                  </tr>
+                  <tr>
+                    <td style="font-weight:700">X̄</td>
+                    <td v-for="(v, i) in result.means" :key="'m'+i" class="num" style="font-weight:700">{{ Number(v).toFixed(4) }}</td>
+                  </tr>
+                  <tr>
+                    <td style="font-weight:700">R</td>
+                    <td v-for="(v, i) in result.ranges" :key="'r'+i" class="num">{{ Number(v).toFixed(4) }}</td>
+                  </tr>
+                  <tr>
+                    <td style="font-weight:700">X̄判定</td>
+                    <td v-for="(v, i) in result.means" :key="'mx'+i">
+                      <span class="row-tag" :class="(v > result.XU || v < result.XL) ? 'ng' : 'ok'">{{ (v > result.XU || v < result.XL) ? '超限' : 'OK' }}</span>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td style="font-weight:700">R判定</td>
+                    <td v-for="(v, i) in result.ranges" :key="'rx'+i">
+                      <span class="row-tag" :class="v > result.RU ? 'ng' : 'ok'">{{ v > result.RU ? '超限' : 'OK' }}</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <table v-else-if="hasResult" class="detail" ref="detailTable">
+                <thead>
+                  <tr>
+                    <th>#</th>
+                    <th>子组</th>
+                    <th v-for="j in nVal" :key="'ch'+j" class="num">X{{ j }}</th>
+                    <th class="num">X̄</th>
+                    <th class="num">R</th>
+                    <th>判定</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, i) in cpkTableRows" :key="'cr'+i">
+                    <td>{{ i + 1 }}</td>
+                    <td>G{{ String(i + 1).padStart(2, '0') }}</td>
+                    <td v-for="(v, j) in row.vals" :key="'cv'+i+j" class="num">{{ v != null ? Number(v).toFixed(3) : '' }}</td>
+                    <td class="num" style="font-weight:700">{{ Number(row.mean).toFixed(4) }}</td>
+                    <td class="num">{{ Number(row.range).toFixed(4) }}</td>
+                    <td><span class="row-tag" :class="row.out ? 'ng' : 'ok'">{{ row.out ? '超规' : 'OK' }}</span></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </section>
+        </div>
+      </section>
+
+      <footer class="footer">
+        <div class="l">
+          <span><b>DOC</b> QP-8.2-03-R05</span>
+          <span><b>CONFIDENTIALITY</b> Internal Use Only</span>
+        </div>
+        <div>SPC Workstation · Marvis Process Control Suite</div>
+      </footer>
+    </div>
+
+    <!-- 物料选择弹框 -->
+    <el-dialog title="物料选择" :close-on-click-modal="false" :visible.sync="partDialog.visible" width="620px" append-to-body>
+      <el-form :inline="true" label-position="top" :model="partDialog" @keyup.enter.native="searchPartList">
+        <el-form-item label="物料编码">
+          <el-input v-model="partDialog.partNo" clearable style="width: 140px"></el-input>
+        </el-form-item>
+        <el-form-item label="物料名称">
+          <el-input v-model="partDialog.partDesc" clearable style="width: 160px"></el-input>
+        </el-form-item>
+        <el-form-item label=" ">
+          <el-button type="primary" @click="searchPartList">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="partDialog.loading"
+        :data="partDialog.list"
+        :height="340"
+        border
+        highlight-current-row
+        style="width: 100%;"
+        @row-dblclick="onPartRowDblClick">
+        <el-table-column prop="partNo" label="物料编码" header-align="center" align="center" min-width="140" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="partDesc" label="物料名称" header-align="center" align="center" min-width="220" show-overflow-tooltip></el-table-column>
+      </el-table>
+      <el-pagination
+        style="margin-top: 12px; text-align: right;"
+        layout="total, sizes, prev, pager, next"
+        :current-page="partDialog.page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="partDialog.limit"
+        :total="partDialog.total"
+        @size-change="onPartSizeChange"
+        @current-change="onPartPageChange">
+      </el-pagination>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="partDialog.visible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 检验项目选择弹框 -->
+    <el-dialog title="检验项目选择" :close-on-click-modal="false" :visible.sync="itemDialog.visible" width="720px" append-to-body>
+      <el-form :inline="true" label-position="top" :model="itemDialog" @keyup.enter.native="searchItemList">
+        <el-form-item label="检验项目编码">
+          <el-input v-model="itemDialog.itemNo" clearable style="width: 140px"></el-input>
+        </el-form-item>
+        <el-form-item label="检验项目名称">
+          <el-input v-model="itemDialog.itemDesc" clearable style="width: 160px"></el-input>
+        </el-form-item>
+        <el-form-item label=" ">
+          <el-button type="primary" @click="searchItemList">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="itemDialog.loading"
+        :data="itemDialog.list"
+        :height="340"
+        border
+        highlight-current-row
+        style="width: 100%;"
+        @row-dblclick="onItemRowDblClick">
+        <el-table-column prop="itemNo" label="检验项目编码" header-align="center" align="center" min-width="130" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="itemDesc" label="检验项目名称" header-align="center" align="center" min-width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="lsl" label="LSL" header-align="center" align="center" width="90"></el-table-column>
+        <el-table-column prop="usl" label="USL" header-align="center" align="center" width="90"></el-table-column>
+      </el-table>
+      <el-pagination
+        style="margin-top: 12px; text-align: right;"
+        layout="total, sizes, prev, pager, next"
+        :current-page="itemDialog.page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="itemDialog.limit"
+        :total="itemDialog.total"
+        @size-change="onItemSizeChange"
+        @current-change="onItemPageChange">
+      </el-pagination>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="itemDialog.visible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getSpcMaterials,
+  getSpcInspectionItems,
+  getSpcMeasurements
+} from '@/api/qc/qc_report.js'
+
+const CT_TABLE = {
+  2: { d2: 1.128, A2: 1.880, D3: 0, D4: 3.267, c4: 0.7979 },
+  3: { d2: 1.693, A2: 1.023, D3: 0, D4: 2.574, c4: 0.8862 },
+  4: { d2: 2.059, A2: 0.729, D3: 0, D4: 2.282, c4: 0.9213 },
+  5: { d2: 2.326, A2: 0.577, D3: 0, D4: 2.114, c4: 0.9400 },
+  6: { d2: 2.534, A2: 0.483, D3: 0, D4: 2.004, c4: 0.9515 },
+  7: { d2: 2.704, A2: 0.419, D3: 0.076, D4: 1.924, c4: 0.9594 },
+  8: { d2: 2.847, A2: 0.373, D3: 0.136, D4: 1.864, c4: 0.9650 },
+  9: { d2: 2.970, A2: 0.337, D3: 0.184, D4: 1.816, c4: 0.9693 },
+  10: { d2: 3.078, A2: 0.308, D3: 0.223, D4: 1.777, c4: 0.9727 },
+  11: { d2: 3.173, A2: 0.285, D3: 0.256, D4: 1.744, c4: 0.9754 },
+  12: { d2: 3.258, A2: 0.266, D3: 0.283, D4: 1.717, c4: 0.9776 },
+  13: { d2: 3.336, A2: 0.249, D3: 0.307, D4: 1.693, c4: 0.9794 },
+  14: { d2: 3.407, A2: 0.235, D3: 0.328, D4: 1.672, c4: 0.9810 },
+  15: { d2: 3.472, A2: 0.223, D3: 0.347, D4: 1.653, c4: 0.9823 }
+}
+
+function getCt (n) {
+  const t = CT_TABLE[n]
+  if (!t) return { d2: 3.472 + (n - 15) * 0.06, A2: 0.223 * (15 / n), D3: 0.347, D4: 1.653, c4: 0.9823 }
+  return t
+}
+
+function mean (arr) {
+  return arr.reduce((a, b) => a + b, 0) / arr.length
+}
+
+function sSam (arr) {
+  const mu = mean(arr)
+  const n = arr.length
+  return n < 2 ? 0 : Math.sqrt(arr.reduce((a, x) => a + (x - mu) * (x - mu), 0) / (n - 1))
+}
+
+function erf (x) {
+  const s = x < 0 ? -1 : 1
+  x = Math.abs(x)
+  const p = 0.3275911
+  const a1 = 0.254829592
+  const a2 = -0.284496736
+  const a3 = 1.421413741
+  const a4 = -1.453152027
+  const a5 = 1.061405429
+  const t = 1 / (1 + p * x)
+  return s * (1 - (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-x * x))
+}
+
+function phi (z) {
+  return 0.5 * (1 + erf(z / Math.SQRT2))
+}
+
+export default {
+  data () {
+    return {
+      stage: 'ppk',
+      loading: false,
+      hasResult: false,
+      warnMsg: '',
+      rawData: [],
+      itemSpec: { unit: '', LSL: null, USL: null, Target: null },
+      result: null,
+      chartInst: {},
+      partDialog: {
+        visible: false,
+        loading: false,
+        partNo: '',
+        partDesc: '',
+        list: [],
+        page: 1,
+        limit: 20,
+        total: 0
+      },
+      itemDialog: {
+        visible: false,
+        loading: false,
+        itemNo: '',
+        itemDesc: '',
+        list: [],
+        page: 1,
+        limit: 20,
+        total: 0
+      },
+      query: {
+        userName: this.$store.state.user.name,
+        woNumber: '',
+        deviceNo: '',
+        operator: '',
+        partNo: '',
+        partDesc: '',
+        itemNo: '',
+        itemDesc: '',
+        startDate: '2026-06-01',
+        endDate: '2026-06-30',
+        nVal: 5,
+        kVal: 25
+      }
+    }
+  },
+  computed: {
+    nVal () {
+      return Math.min(15, Math.max(2, +this.query.nVal || 5))
+    },
+    kVal () {
+      return Math.min(200, Math.max(5, +this.query.kVal || 25))
+    },
+    ppkOk () {
+      return this.result && this.result.Ppk >= 1.67
+    },
+    cpkOk () {
+      return this.result && this.result.Cpk >= 1.33
+    },
+    criteriaList () {
+      if (!this.result) return []
+      if (this.stage === 'ppk') {
+        const pk = this.result.Ppk
+        const pp = this.result.Pp
+        const g = this.result.gCnt
+        return [
+          { label: 'Ppk ≥ 1.67', pass: pk >= 1.67, value: this.fm(pk, 2) },
+          { label: 'Ppk ≥ 0.8 × Pp', pass: pp && pk >= pp * 0.8, value: pp ? this.fm(pk / pp, 2) : '--' },
+          { label: 'X-bar 无超限', pass: this.result.xOut === 0, value: this.result.xOut + ' / ' + g },
+          { label: 'R 无超限', pass: this.result.rOut === 0, value: this.result.rOut + ' / ' + g },
+          { label: '子组 ≥ 20', pass: g >= 20, value: String(g) }
+        ]
+      }
+      const ck = this.result.Cpk
+      const cp = this.result.Cp
+      return [
+        { label: 'Cpk ≥ 1.33', pass: ck >= 1.33, value: this.fm(ck, 2) },
+        { label: 'Cp ≥ 1.33', pass: cp >= 1.33, value: this.fm(cp, 2) },
+        { label: 'PPM ≤ 300', pass: this.result.ppmT < 300, value: this.formatNum(this.result.ppmT) },
+        { label: 'N ≥ 30', pass: this.result.N >= 30, value: String(this.result.N) },
+        { label: '正态性检验', pass: true, value: '--' }
+      ]
+    },
+    cpkTableRows () {
+      if (!this.result || !this.result.data) return []
+      const n = this.nVal
+      const k = this.kVal
+      const groups = []
+      for (let i = 0; i < k && i * n < this.result.data.length; i++) {
+        groups.push(this.result.data.slice(i * n, i * n + n))
+      }
+      const LSL = this.itemSpec.LSL
+      const USL = this.itemSpec.USL
+      return groups.map(g => {
+        const mi = mean(g)
+        const ri = Math.max(...g) - Math.min(...g)
+        const out = (USL !== null && mi > USL) || (LSL !== null && mi < LSL)
+        return { vals: g, mean: mi, range: ri, out }
+      })
+    }
+  },
+  mounted () {
+    window.addEventListener('resize', this.resizeCharts)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.resizeCharts)
+    this.destroyCharts()
+  },
+  methods: {
+    getCt,
+    fm (v, d) {
+      if (v === null || v === undefined || isNaN(v)) return '--'
+      if (v === 999.99) return '999.99'
+      return Number(v).toFixed(d || 2)
+    },
+    formatNum (v) {
+      if (v === null || v === undefined) return '--'
+      return Number(v).toLocaleString()
+    },
+    gradeCpk (v) {
+      if (v === null || v === undefined || isNaN(v) || v === 999.99 || v === '--') {
+        return { n: 'N/A', c: 'gray', label: 'N/A' }
+      }
+      const x = +v
+      if (x >= 2.00) return { n: 'A++', c: 'ok', label: 'A++·特优' }
+      if (x >= 1.67) return { n: 'A+', c: 'ok', label: 'A+·优秀' }
+      if (x >= 1.33) return { n: 'A', c: 'ok', label: 'A·良好' }
+      if (x >= 1.00) return { n: 'B', c: 'warn', label: 'B·勉强' }
+      if (x >= 0.67) return { n: 'C', c: 'warn', label: 'C·不足' }
+      return { n: 'D', c: 'ng', label: 'D·严重不足' }
+    },
+    gradeBadgeClass (g) {
+      if (g.c === 'ok') return 'ok'
+      if (g.c === 'warn') return 'warn'
+      return 'ng'
+    },
+    tagClass (v, okThreshold) {
+      if (v >= okThreshold) return 'tag-ok'
+      if (v >= 1.0) return 'tag-warn'
+      return 'tag-ng'
+    },
+    ppmTagClass (v) {
+      if (v < 300) return 'tag-ok'
+      if (v < 1000) return 'tag-warn'
+      return 'tag-ng'
+    },
+    toNum (v) {
+      if (v === null || v === undefined || v === '') return null
+      const n = Number(v)
+      return isNaN(n) ? null : n
+    },
+    openPartDialog () {
+      this.partDialog.partNo = ''
+      this.partDialog.partDesc = ''
+      this.partDialog.page = 1
+      this.partDialog.visible = true
+      this.loadPartList()
+    },
+    searchPartList () {
+      this.partDialog.page = 1
+      this.loadPartList()
+    },
+    onPartSizeChange (val) {
+      this.partDialog.limit = val
+      this.partDialog.page = 1
+      this.loadPartList()
+    },
+    onPartPageChange (val) {
+      this.partDialog.page = val
+      this.loadPartList()
+    },
+    async loadPartList () {
+      this.partDialog.loading = true
+      try {
+        const res = await getSpcMaterials({
+          userName: this.query.userName,
+          partNo: this.partDialog.partNo || undefined,
+          partDesc: this.partDialog.partDesc || undefined,
+          page: this.partDialog.page,
+          limit: this.partDialog.limit
+        })
+        if (res.data && res.data.code === 0 && res.data.page) {
+          this.partDialog.list = res.data.page.list || []
+          this.partDialog.total = res.data.page.totalCount || 0
+          this.partDialog.page = res.data.page.currPage || this.partDialog.page
+          this.partDialog.limit = res.data.page.pageSize || this.partDialog.limit
+        }
+      } catch (e) {
+        console.error(e)
+        this.$message.error('物料列表加载失败')
+      } finally {
+        this.partDialog.loading = false
+      }
+    },
+    onPartRowDblClick (row) {
+      this.query.partNo = row.partNo || ''
+      this.query.partDesc = row.partDesc || ''
+      this.query.itemNo = ''
+      this.query.itemDesc = ''
+      this.hasResult = false
+      this.warnMsg = ''
+      this.destroyCharts()
+      this.partDialog.visible = false
+    },
+    openItemDialog () {
+      if (!this.query.partNo) {
+        this.$message.warning('请先选择物料编码')
+        return
+      }
+      this.itemDialog.itemNo = ''
+      this.itemDialog.itemDesc = ''
+      this.itemDialog.page = 1
+      this.itemDialog.visible = true
+      this.loadItemList()
+    },
+    searchItemList () {
+      this.itemDialog.page = 1
+      this.loadItemList()
+    },
+    onItemSizeChange (val) {
+      this.itemDialog.limit = val
+      this.itemDialog.page = 1
+      this.loadItemList()
+    },
+    onItemPageChange (val) {
+      this.itemDialog.page = val
+      this.loadItemList()
+    },
+    async loadItemList () {
+      this.itemDialog.loading = true
+      try {
+        const res = await getSpcInspectionItems({
+          userName: this.query.userName,
+          partNo: this.query.partNo,
+          itemNo: this.itemDialog.itemNo || undefined,
+          itemDesc: this.itemDialog.itemDesc || undefined,
+          page: this.itemDialog.page,
+          limit: this.itemDialog.limit
+        })
+        if (res.data && res.data.code === 0 && res.data.page) {
+          this.itemDialog.list = res.data.page.list || []
+          this.itemDialog.total = res.data.page.totalCount || 0
+          this.itemDialog.page = res.data.page.currPage || this.itemDialog.page
+          this.itemDialog.limit = res.data.page.pageSize || this.itemDialog.limit
+        }
+      } catch (e) {
+        console.error(e)
+        this.$message.error('检验项目列表加载失败')
+      } finally {
+        this.itemDialog.loading = false
+      }
+    },
+    onItemRowDblClick (row) {
+      this.query.itemNo = row.itemNo || ''
+      this.query.itemDesc = row.itemDesc || ''
+      this.hasResult = false
+      this.warnMsg = ''
+      this.destroyCharts()
+      this.itemDialog.visible = false
+    },
+    switchStage (s) {
+      if (this.stage === s) return
+      this.stage = s
+      if (this.hasResult) {
+        this.runCalc()
+      }
+    },
+    async runCalc () {
+      if (!this.query.partNo) {
+        this.$message.warning('请选择物料编码')
+        return
+      }
+      if (!this.query.itemNo) {
+        this.$message.warning('请选择检验项目编码')
+        return
+      }
+      const n = this.nVal
+      const k = this.kVal
+      this.loading = true
+      this.warnMsg = ''
+      try {
+        const res = await getSpcMeasurements({
+          userName: this.query.userName,
+          partNo: this.query.partNo,
+          itemNo: this.query.itemNo,
+          woNumber: this.query.woNumber || undefined,
+          deviceNo: this.query.deviceNo || undefined,
+          operator: this.query.operator || undefined,
+          startDate: this.query.startDate || undefined,
+          endDate: this.query.endDate || undefined
+        })
+        if (!res.data || res.data.code !== 0) {
+          this.warnMsg = (res.data && res.data.msg) || '查询失败'
+          this.hasResult = false
+          return
+        }
+        const data = res.data.data || {}
+        const measurements = (data.measurements || []).map(Number).filter(v => !isNaN(v))
+        this.rawData = measurements
+        this.itemSpec = {
+          unit: data.unit || '',
+          LSL: this.toNum(data.lsl),
+          USL: this.toNum(data.usl),
+          Target: this.toNum(data.target != null ? data.target : data.defaultValue)
+        }
+
+        const requiredN = k * n
+        if (measurements.length < requiredN) {
+          this.warnMsg = '数据不足：当前筛选条件下共 <b>' + measurements.length + '</b> 条数据，但需求 <b>' + requiredN + '</b> 条（' + k + '×' + n + '）。请调整子组容量 n 或子组数 k 后重新计算。'
+          this.hasResult = false
+          this.destroyCharts()
+          return
+        }
+
+        let calcResult
+        if (this.stage === 'ppk') {
+          calcResult = this.calcPPK(measurements, k, n)
+        } else {
+          calcResult = this.calcCPK(measurements.slice(0, k * n))
+        }
+        if (calcResult.error) {
+          this.warnMsg = calcResult.msg
+          this.hasResult = false
+          return
+        }
+        if (calcResult.w && calcResult.w.length) {
+          this.warnMsg = calcResult.w.join('<br>')
+        }
+        this.result = calcResult
+        this.hasResult = true
+        this.$nextTick(() => this.renderCharts())
+      } catch (e) {
+        this.warnMsg = '计算失败：' + (e.message || e)
+        this.hasResult = false
+      } finally {
+        this.loading = false
+      }
+    },
+    calcPPK (dataAll, k, n) {
+      const data = dataAll.slice()
+      const N = data.length
+      const groups = []
+      for (let i = 0; i < k && i * n < data.length; i++) {
+        groups.push(data.slice(i * n, i * n + n))
+      }
+      const gCnt = groups.length
+      if (gCnt === 0) return { error: true, msg: '无有效子组' }
+      const means = []
+      const ranges = []
+      let swR = 0
+      let swN = 0
+      groups.forEach(g => {
+        const ni = g.length
+        const r = Math.max(...g) - Math.min(...g)
+        const xm = mean(g)
+        means.push(xm)
+        ranges.push(r)
+        swR += r * ni
+        swN += ni
+      })
+      const Rb = swR / swN
+      const Xb = mean(means)
+      let swD = 0
+      groups.forEach(g => { swD += getCt(g.length).d2 * g.length })
+      const dav = swD / swN || 1
+      const sigma = Rb / dav
+      const LSL = this.itemSpec.LSL
+      const USL = this.itemSpec.USL
+      const T = this.itemSpec.Target || ((LSL !== null && USL !== null) ? (LSL + USL) / 2 : null)
+      const w = []
+      if (gCnt < 20) w.push('有效子组=' + gCnt + '<20，组内估计可能不稳定')
+      if (LSL !== null && USL !== null && (USL - LSL) > 50) w.push('公差跨度' + (USL - LSL).toFixed(1) + '>50，请核实单位')
+      if (n > 10) w.push('n=' + n + '>10，建议用Xbar-S图（此处仍用R图）')
+      const s = sigma || 0
+      const safe = v => (s === 0 ? 999.99 : v)
+      let Pp
+      let PPU
+      let PPL
+      let Ppk
+      if (s === 0) {
+        Pp = PPU = PPL = Ppk = 999.99
+        w.push('组内σ=0（无变异），指数定为999.99')
+      } else {
+        Pp = (LSL !== null && USL !== null) ? (USL - LSL) / (6 * s) : null
+        PPU = USL !== null ? safe((USL - Xb) / (3 * s)) : null
+        PPL = LSL !== null ? safe((Xb - LSL) / (3 * s)) : null
+        Ppk = (PPU !== null && PPL !== null) ? Math.min(PPU, PPL) : (PPU || PPL)
+      }
+      const cf = getCt(n)
+      const XU = Xb + cf.A2 * Rb
+      const XL = Xb - cf.A2 * Rb
+      const RU = cf.D4 * Rb
+      const RL = cf.D3 * Rb
+      const xOut = means.filter(v => v > XU || v < XL).length
+      const rOut = ranges.filter(v => v > RU).length
+      return { groups, means, ranges, Xb, Rb, sigma, Pp, PPU, PPL, Ppk, XU, XL, RU, RL, T, gCnt, N, w, xOut, rOut }
+    },
+    calcCPK (dataAll) {
+      const data = dataAll.slice()
+      const N = data.length
+      if (N === 0) return { error: true, msg: '无数据' }
+      const Xa = mean(data)
+      const sO = sSam(data)
+      const LSL = this.itemSpec.LSL
+      const USL = this.itemSpec.USL
+      const T = this.itemSpec.Target || ((LSL !== null && USL !== null) ? (LSL + USL) / 2 : null)
+      const w = []
+      if (N < 30) w.push('样本量N=' + N + '<30，整体估计可能不稳定')
+      if (LSL !== null && USL !== null && (USL - LSL) > 50) w.push('公差跨度' + (USL - LSL).toFixed(1) + '>50，请核实单位')
+      const s = sO || 0
+      const safe = v => (s === 0 ? 999.99 : v)
+      let Cp
+      let CPU
+      let CPL
+      let Cpk
+      let ppmU = 0
+      let ppmL = 0
+      if (s === 0) {
+        Cp = CPU = CPL = Cpk = 999.99
+        w.push('整体σ=0（无变异），指数定为999.99')
+      } else {
+        Cp = (LSL !== null && USL !== null) ? (USL - LSL) / (6 * s) : null
+        CPU = USL !== null ? safe((USL - Xa) / (3 * s)) : null
+        CPL = LSL !== null ? safe((Xa - LSL) / (3 * s)) : null
+        Cpk = (CPU !== null && CPL !== null) ? Math.min(CPU, CPL) : (CPU || CPL)
+        if (USL !== null) ppmU = Math.round((1 - phi((USL - Xa) / s)) * 1e6)
+        if (LSL !== null) ppmL = Math.round(phi((LSL - Xa) / s) * 1e6)
+      }
+      const mr = []
+      for (let i = 1; i < data.length; i++) mr.push(Math.abs(data[i] - data[i - 1]))
+      const MRbar = mr.length ? mean(mr) : 0
+      const MR_UCL = 3.267 * MRbar
+      return { data, Xa, sO, N, Cp, CPU, CPL, Cpk, ppmU, ppmL, ppmT: ppmU + ppmL, T, w, mr, MRbar, MR_UCL }
+    },
+    destroyCharts () {
+      Object.keys(this.chartInst).forEach(k => {
+        try { this.chartInst[k].dispose() } catch (e) { /* ignore */ }
+      })
+      this.chartInst = {}
+    },
+    resizeCharts () {
+      Object.keys(this.chartInst).forEach(k => {
+        try { this.chartInst[k].resize() } catch (e) { /* ignore */ }
+      })
+    },
+    getEcharts () {
+      return window.echarts
+    },
+    renderCharts () {
+      this.destroyCharts()
+      const echarts = this.getEcharts()
+      if (!echarts) return
+      const LSL = this.itemSpec.LSL
+      const USL = this.itemSpec.USL
+      if (this.stage === 'ppk') {
+        this.$nextTick(() => {
+          this.renderXbarChart(echarts, LSL, USL)
+          this.renderRChart(echarts)
+        })
+      } else {
+        this.$nextTick(() => {
+          this.renderIMRChart(echarts)
+          this.renderHistChart(echarts, LSL, USL)
+        })
+      }
+    },
+    // ECharts 3.x 样式需写在 normal 下，否则颜色/虚线不生效
+    lineSeries (name, data, color, opts) {
+      opts = opts || {}
+      return {
+        name: name,
+        type: 'line',
+        data: data,
+        yAxisIndex: opts.yAxisIndex || 0,
+        symbol: opts.symbol === undefined ? 'circle' : opts.symbol,
+        symbolSize: opts.symbolSize == null ? 6 : opts.symbolSize,
+        showSymbol: opts.showSymbol !== false,
+        smooth: !!opts.smooth,
+        itemStyle: {
+          normal: {
+            color: color,
+            borderColor: color,
+            lineStyle: {
+              color: color,
+              width: opts.width == null ? 2 : opts.width,
+              type: opts.lineType || 'solid'
+            }
+          }
+        },
+        lineStyle: {
+          normal: {
+            color: color,
+            width: opts.width == null ? 2 : opts.width,
+            type: opts.lineType || 'solid'
+          }
+        }
+      }
+    },
+    barSeries (name, data, color) {
+      return {
+        name: name,
+        type: 'bar',
+        data: data,
+        barMaxWidth: 26,
+        barGap: '30%',
+        itemStyle: {
+          normal: {
+            // 图中浅天蓝纯色柱，无渐变
+            color: color,
+            borderColor: color,
+            borderWidth: 0,
+            barBorderRadius: [3, 3, 0, 0]
+          },
+          emphasis: {
+            color: color
+          }
+        }
+      }
+    },
+    axisTooltip () {
+      return {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'line',
+          lineStyle: { color: '#94A3B8', type: 'dashed' }
+        },
+        backgroundColor: 'rgba(15,23,42,.88)',
+        borderWidth: 0,
+        textStyle: { color: '#fff', fontSize: 12 },
+        padding: [8, 12],
+        formatter: function (params) {
+          if (!params || !params.length) return ''
+          var lines = [params[0].axisValueLabel || params[0].name]
+          for (var i = 0; i < params.length; i++) {
+            var p = params[i]
+            if (p.value == null || p.value === '') continue
+            var marker = p.marker || ''
+            var val = typeof p.value === 'number' ? Number(p.value).toFixed(4) : p.value
+            lines.push(marker + ' ' + p.seriesName + ': ' + val)
+          }
+          return lines.join('<br/>')
+        }
+      }
+    },
+    renderXbarChart (echarts, LSL, USL) {
+      if (!this.$refs.chartXbar) return
+      const labels = this.result.groups.map((_, i) => 'G' + (i + 1))
+      const chart = echarts.init(this.$refs.chartXbar)
+      const series = [
+        this.lineSeries('X-bar', this.result.means, '#1B4D89', { symbolSize: 6, width: 2 }),
+        this.lineSeries('UCL', labels.map(() => this.result.XU), '#B91C1C', { symbol: 'none', showSymbol: false, lineType: 'dashed', width: 1.5 }),
+        this.lineSeries('LCL', labels.map(() => this.result.XL), '#B91C1C', { symbol: 'none', showSymbol: false, lineType: 'dashed', width: 1.5 })
+      ]
+      if (USL !== null) {
+        series.push(this.lineSeries('USL', labels.map(() => USL), '#047857', { symbol: 'none', showSymbol: false, lineType: 'dotted', width: 1.5 }))
+      }
+      if (LSL !== null) {
+        series.push(this.lineSeries('LSL', labels.map(() => LSL), '#047857', { symbol: 'none', showSymbol: false, lineType: 'dotted', width: 1.5 }))
+      }
+      chart.setOption({
+        color: ['#1B4D89', '#B91C1C', '#B91C1C', '#047857', '#047857'],
+        tooltip: this.axisTooltip(),
+        legend: {
+          top: 0,
+          data: series.map(s => s.name),
+          textStyle: { fontSize: 10, color: '#475569' }
+        },
+        grid: { left: 55, right: 24, top: 40, bottom: 30 },
+        xAxis: {
+          type: 'category',
+          data: labels,
+          boundaryGap: false,
+          axisLabel: { fontSize: 10, color: '#64748B' },
+          axisLine: { lineStyle: { color: '#E2E8F0' } },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          name: '子组均值',
+          nameTextStyle: { fontSize: 10, color: '#64748B' },
+          axisLabel: { fontSize: 10, color: '#64748B' },
+          axisLine: { show: false },
+          splitLine: { lineStyle: { color: '#E2E8F0' } },
+          scale: true
+        },
+        series: series
+      })
+      this.chartInst.xbar = chart
+    },
+    renderRChart (echarts) {
+      if (!this.$refs.chartR) return
+      const labels = this.result.groups.map((_, i) => 'G' + (i + 1))
+      const chart = echarts.init(this.$refs.chartR)
+      const series = [
+        this.barSeries('R', this.result.ranges, '#5BC0DE'),
+        this.lineSeries('UCL', labels.map(() => this.result.RU), '#B91C1C', { symbol: 'none', showSymbol: false, lineType: 'dashed', width: 1.5 }),
+        this.lineSeries('LCL', labels.map(() => this.result.RL), '#B91C1C', { symbol: 'none', showSymbol: false, lineType: 'dashed', width: 1.5 })
+      ]
+      chart.setOption({
+        color: ['#5BC0DE', '#B91C1C', '#B91C1C'],
+        tooltip: this.axisTooltip(),
+        legend: {
+          top: 0,
+          data: ['R', 'UCL', 'LCL'],
+          textStyle: { fontSize: 10, color: '#475569' }
+        },
+        grid: { left: 55, right: 24, top: 40, bottom: 30 },
+        xAxis: {
+          type: 'category',
+          data: labels,
+          axisLabel: { fontSize: 10, color: '#64748B' },
+          axisLine: { lineStyle: { color: '#E2E8F0' } },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          name: '极差 R',
+          nameTextStyle: { fontSize: 10, color: '#64748B' },
+          axisLabel: { fontSize: 10, color: '#64748B' },
+          axisLine: { show: false },
+          splitLine: { lineStyle: { color: '#E2E8F0' } }
+        },
+        series: series
+      })
+      this.chartInst.r = chart
+    },
+    renderIMRChart (echarts) {
+      if (!this.$refs.chartIMR) return
+      const labels = this.result.data.map((_, i) => i + 1)
+      const mrAll = [null].concat(this.result.mr)
+      const chart = echarts.init(this.$refs.chartIMR)
+      const series = [
+        this.lineSeries('单值 I', this.result.data, '#1B4D89', { symbolSize: 4, width: 2, yAxisIndex: 0 }),
+        this.lineSeries('I-CL', labels.map(() => this.result.Xa), '#D97706', { symbol: 'none', showSymbol: false, lineType: 'dashed', width: 1.5, yAxisIndex: 0 }),
+        this.lineSeries('MR', mrAll, '#3B82C4', { symbolSize: 4, width: 2, yAxisIndex: 1 }),
+        this.lineSeries('MR-UCL', labels.map(() => this.result.MR_UCL), '#B91C1C', { symbol: 'none', showSymbol: false, lineType: 'dashed', width: 1.5, yAxisIndex: 1 })
+      ]
+      chart.setOption({
+        color: ['#1B4D89', '#D97706', '#3B82C4', '#B91C1C'],
+        tooltip: this.axisTooltip(),
+        legend: {
+          top: 0,
+          data: ['单值 I', 'I-CL', 'MR', 'MR-UCL'],
+          textStyle: { fontSize: 10, color: '#475569' }
+        },
+        grid: { left: 55, right: 55, top: 40, bottom: 30 },
+        xAxis: {
+          type: 'category',
+          data: labels,
+          boundaryGap: false,
+          axisLabel: { fontSize: 10, color: '#64748B' },
+          axisLine: { lineStyle: { color: '#E2E8F0' } },
+          splitLine: { show: false }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '单值',
+            nameTextStyle: { fontSize: 10, color: '#64748B' },
+            axisLabel: { fontSize: 10, color: '#64748B' },
+            splitLine: { lineStyle: { color: '#E2E8F0' } },
+            scale: true
+          },
+          {
+            type: 'value',
+            name: '移动极差 MR',
+            nameTextStyle: { fontSize: 10, color: '#64748B' },
+            axisLabel: { fontSize: 10, color: '#64748B' },
+            splitLine: { show: false }
+          }
+        ],
+        series: series
+      })
+      this.chartInst.imr = chart
+    },
+    renderHistChart (echarts, LSL, USL) {
+      if (!this.$refs.chartHist) return
+      const d = this.result.data
+      const sig = this.result.sO || 1
+      const mu = this.result.Xa
+      const min = Math.min(...d)
+      const max = Math.max(...d)
+      const bins = Math.min(20, Math.max(8, Math.round(Math.sqrt(d.length))))
+      const w = (max - min) / bins || 0.01
+      const cnt = Array(bins).fill(0)
+      d.forEach(x => {
+        let idx = Math.floor((x - min) / w)
+        if (idx >= bins) idx = bins - 1
+        cnt[idx]++
+      })
+      const hLabels = cnt.map((_, i) => (min + i * w).toFixed(2))
+      const norm = cnt.map((_, i) => {
+        const x = min + (i + 0.5) * w
+        return sig > 0 ? (1 / (sig * Math.sqrt(2 * Math.PI))) * Math.exp(-(x - mu) * (x - mu) / (2 * sig * sig)) * d.length * w : 0
+      })
+      const markLineData = []
+      if (USL !== null) {
+        markLineData.push({
+          name: 'USL',
+          xAxis: String(USL),
+          lineStyle: { normal: { color: '#047857', type: 'dotted', width: 1.5 } },
+          label: { normal: { formatter: 'USL', textStyle: { color: '#047857' } } }
+        })
+      }
+      if (LSL !== null) {
+        markLineData.push({
+          name: 'LSL',
+          xAxis: String(LSL),
+          lineStyle: { normal: { color: '#047857', type: 'dotted', width: 1.5 } },
+          label: { normal: { formatter: 'LSL', textStyle: { color: '#047857' } } }
+        })
+      }
+      const chart = echarts.init(this.$refs.chartHist)
+      const series = [
+        this.barSeries('频数', cnt, '#50B1E1'),
+        this.lineSeries('正态拟合', norm, '#D97706', { symbol: 'none', showSymbol: false, smooth: true, width: 2 })
+      ]
+      if (markLineData.length) {
+        series[1].markLine = {
+          symbol: 'none',
+          data: markLineData
+        }
+      }
+      chart.setOption({
+        color: ['#50B1E1', '#D97706'],
+        tooltip: this.axisTooltip(),
+        legend: {
+          top: 0,
+          data: ['频数', '正态拟合'],
+          textStyle: { fontSize: 10, color: '#475569' }
+        },
+        grid: { left: 55, right: 24, top: 40, bottom: 48 },
+        xAxis: {
+          type: 'category',
+          data: hLabels,
+          name: '测量值 (' + (this.itemSpec.unit || '') + ')',
+          nameTextStyle: { fontSize: 10, color: '#64748B' },
+          axisLabel: { fontSize: 10, color: '#64748B', rotate: 30 },
+          axisLine: { lineStyle: { color: '#E2E8F0' } },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          name: '频数',
+          nameTextStyle: { fontSize: 10, color: '#64748B' },
+          axisLabel: { fontSize: 10, color: '#64748B' },
+          splitLine: { lineStyle: { color: '#E2E8F0' } }
+        },
+        series: series
+      })
+      this.chartInst.hist = chart
+    },
+    exportCSV () {
+      if (!this.hasResult) {
+        this.$message.warning('请先计算后再导出')
+        return
+      }
+      let csv = '\uFEFF'
+      if (this.stage === 'ppk') {
+        const headers = [''].concat(this.result.groups.map((_, i) => 'G' + String(i + 1).padStart(2, '0')))
+        csv += headers.join(',') + '\n'
+        for (let j = 0; j < this.nVal; j++) {
+          const row = ['X' + (j + 1)]
+          this.result.groups.forEach(g => row.push(g[j] != null ? Number(g[j]).toFixed(3) : ''))
+          csv += row.join(',') + '\n'
+        }
+        csv += ['X̄'].concat(this.result.means.map(v => Number(v).toFixed(4))).join(',') + '\n'
+        csv += ['R'].concat(this.result.ranges.map(v => Number(v).toFixed(4))).join(',') + '\n'
+      } else {
+        const headers = ['#', '子组'].concat(Array.from({ length: this.nVal }, (_, i) => 'X' + (i + 1))).concat(['X̄', 'R', '判定'])
+        csv += headers.join(',') + '\n'
+        this.cpkTableRows.forEach((row, i) => {
+          const vals = row.vals.map(v => (v != null ? Number(v).toFixed(3) : ''))
+          while (vals.length < this.nVal) vals.push('')
+          csv += [i + 1, 'G' + String(i + 1).padStart(2, '0')].concat(vals).concat([
+            Number(row.mean).toFixed(4),
+            Number(row.range).toFixed(4),
+            row.out ? '超规' : 'OK'
+          ]).join(',') + '\n'
+        })
+      }
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'spc_data.csv'
+      a.click()
+      URL.revokeObjectURL(url)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.spc-page {
+  --ink-900: #0F172A;
+  --ink-700: #1E293B;
+  --ink-500: #334155;
+  --ink-400: #475569;
+  --ink-300: #64748B;
+  --line: #E2E8F0;
+  --line-soft: #F1F5F9;
+  --paper-2: #F4F6F8;
+  --accent: #1B4D89;
+  --steel: #3B82C4;
+  --amber: #D97706;
+  --rust: #C2410C;
+  --signal-ok: #047857;
+  --signal-ng: #B91C1C;
+  --signal-warn: #B45309;
+  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.04);
+  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
+  color: var(--ink-700);
+  background: #f5f7fa;
+  font-size: 13px;
+  line-height: 1.5;
+  min-height: 100%;
+  padding: 0 4px 12px;
+  box-sizing: border-box;
+}
+.container { max-width: 1680px; margin: 0 auto; overflow-x: hidden; }
+.query-bar { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); margin-bottom: 16px; }
+.query-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 18px; border-bottom: 1px solid var(--line-soft); background: var(--paper-2);
+}
+.query-title {
+  display: flex; align-items: center; gap: 10px;
+  font-size: 12px; font-weight: 700; color: var(--ink-700); letter-spacing: 1px; text-transform: uppercase;
+}
+.query-title::before { content: ""; width: 4px; height: 16px; background: var(--accent); }
+.stage-toggle { display: flex; gap: 10px; }
+.stage-toggle button {
+  background: #fff; border: 1px solid var(--line); padding: 8px 20px;
+  font-family: inherit; font-size: 12px; color: var(--ink-400); cursor: pointer;
+  letter-spacing: .8px; font-weight: 600; transition: .15s;
+}
+.stage-toggle button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
+.stage-toggle button:not(.on):hover { color: var(--ink-700); border-color: var(--ink-300); }
+.query-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
+.qr { display: grid; gap: 10px 14px; align-items: end; }
+.qr-1 { grid-template-columns: 1fr 1fr 1fr 1.5fr 1.5fr 1.5fr 1.5fr; }
+.qr-2 { grid-template-columns: 1.2fr 1.2fr 1fr 1fr auto auto; justify-content: start; }
+.field { display: flex; flex-direction: column; gap: 4px; }
+.field label {
+  font-size: 10px; color: var(--ink-400); letter-spacing: 1px;
+  text-transform: uppercase; font-weight: 600;
+}
+.field label .req { color: var(--rust); }
+.field label.picker-label {
+  color: #13c2c2;
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.field label.picker-label .req {
+  color: #f56c6c;
+  margin-right: 2px;
+}
+.field label.picker-label.disabled {
+  color: #a8abb2;
+  cursor: not-allowed;
+}
+.field input.picker-input { cursor: pointer; }
+.field input, .field select {
+  height: 34px; padding: 0 10px; border: 1px solid var(--line);
+  background: #fff; font-family: inherit; font-size: 12px; color: var(--ink-700); width: 100%;
+}
+.field input:focus, .field select:focus {
+  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(27,77,137,.08);
+}
+.btn {
+  height: 34px; padding: 0 20px; border: 0; cursor: pointer; font-family: inherit;
+  font-size: 12px; font-weight: 600; letter-spacing: .8px;
+  display: inline-flex; align-items: center; gap: 5px; transition: all .15s;
+}
+.btn:disabled { opacity: .6; cursor: not-allowed; }
+.btn-primary { background: var(--accent); color: #fff; }
+.btn-primary:hover:not(:disabled) { background: var(--ink-900); }
+.btn-ghost { background: #fff; color: var(--ink-700); border: 1px solid var(--line); }
+.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
+.kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 16px; }
+.kpi-strip.empty { grid-template-columns: 1fr; }
+.empty-tip, .wait-tip {
+  padding: 28px; text-align: center; color: var(--ink-300); font-size: 13px;
+  background: #fff; border: 1px solid var(--line);
+}
+.wait-tip { padding: 20px; font-size: 12px; border: 0; background: transparent; }
+.kpi-cell {
+  padding: 12px 14px; position: relative; background: #fff;
+  border: 1px solid var(--line); box-shadow: var(--shadow-1);
+}
+.kpi-cell::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--steel);
+}
+.kpi-cell.ok::before { background: var(--signal-ok); }
+.kpi-cell.ng::before { background: var(--signal-ng); }
+.kpi-cell.accent::before { background: var(--accent); }
+.kpi-cell.amber::before { background: var(--amber); }
+.kpi-label {
+  font-size: 10px; color: var(--ink-400); letter-spacing: 1.5px;
+  text-transform: uppercase; font-weight: 600;
+}
+.kpi-value {
+  font-size: 28px; font-weight: 800; color: var(--ink-900); margin-top: 6px;
+  font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.5px;
+}
+.kpi-cell.ok .kpi-value { color: var(--signal-ok); }
+.kpi-cell.ng .kpi-value { color: var(--signal-ng); }
+.kpi-value .unit { font-size: 12px; color: var(--ink-400); font-weight: 500; margin-left: 3px; letter-spacing: 0; }
+.kpi-sub { font-size: 11px; color: var(--ink-400); margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.kpi-badge {
+  display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 700;
+  letter-spacing: .8px; background: var(--line-soft); color: var(--ink-500);
+}
+.kpi-badge.ok { background: rgba(4,120,87,.1); color: var(--signal-ok); }
+.kpi-badge.ng { background: rgba(185,28,28,.1); color: var(--signal-ng); }
+.kpi-badge.warn { background: rgba(180,83,9,.12); color: var(--signal-warn); }
+.main-grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; margin-bottom: 16px; }
+.main-grid > div { min-width: 0; overflow: visible; }
+.main-grid aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+.main-grid aside .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.main-grid aside .panel:nth-child(1),
+.main-grid aside .panel:nth-child(2) { flex: 3; }
+.main-grid aside .panel:nth-child(3) { flex: 1.5; }
+.main-grid aside .panel-body { flex: 1; }
+.panel { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
+.panel-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 16px; border-bottom: 1px solid var(--line-soft); background: var(--paper-2);
+}
+.panel-title {
+  display: flex; align-items: center; gap: 10px;
+  font-size: 12px; font-weight: 700; color: var(--ink-700); letter-spacing: 1px; text-transform: uppercase;
+}
+.panel-title::before { content: ""; width: 4px; height: 14px; background: var(--amber); }
+.panel-body { padding: 14px 16px; }
+.side-stat { display: flex; flex-direction: column; gap: 12px; }
+.stat-block { padding: 12px 14px; background: var(--paper-2); border-left: 3px solid var(--accent); }
+.stat-block.amber { border-left-color: var(--amber); }
+.stat-block.steel { border-left-color: var(--steel); }
+.stat-block-title {
+  font-size: 10px; color: var(--ink-400); letter-spacing: 1.5px;
+  text-transform: uppercase; font-weight: 700; margin-bottom: 8px;
+}
+.stat-row {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 4px 0; font-size: 12px;
+}
+.stat-row + .stat-row { border-top: 1px dashed var(--line); }
+.stat-row .k { color: var(--ink-400); }
+.stat-row .v { color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }
+.stat-row .v.tag-ok { color: var(--signal-ok); }
+.stat-row .v.tag-ng { color: var(--signal-ng); }
+.stat-row .v.tag-warn { color: var(--signal-warn); }
+.criterion-list { padding: 0; margin: 0; }
+.criterion-list li {
+  list-style: none; display: flex; align-items: center; justify-content: space-between;
+  padding: 7px 0; font-size: 11px; border-bottom: 1px dashed var(--line);
+}
+.criterion-list li:last-child { border-bottom: 0; }
+.criterion-list .ck { display: flex; align-items: center; gap: 8px; color: var(--ink-500); }
+.criterion-list .ck .dot { width: 8px; height: 8px; background: var(--ink-300); border-radius: 50%; }
+.criterion-list .ck.pass .dot { background: var(--signal-ok); }
+.criterion-list .ck.fail .dot { background: var(--signal-ng); }
+.criterion-list .cv { font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
+.chart-stack { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; overflow: visible; }
+.chart-card { background: #fff; border: 1px solid var(--line); overflow: visible; position: relative; z-index: 1; }
+.chart-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
+}
+.chart-title {
+  display: flex; align-items: center; gap: 10px;
+  font-size: 12px; font-weight: 700; color: var(--ink-700); letter-spacing: 1px;
+}
+.chart-title .num { background: var(--accent); color: #fff; padding: 1px 6px; font-size: 10px; font-weight: 800; }
+.chart-title .num.b { background: var(--amber); }
+.chart-meta { font-size: 10px; color: var(--ink-400); display: flex; gap: 14px; }
+.chart-meta b { color: var(--ink-700); }
+.chart-body { height: 280px; padding: 8px 4px 0; overflow: visible; position: relative; }
+.chart-el { width: 100%; height: 100%; }
+.table-panel { background: #fff; border: 1px solid var(--line); }
+.table-wrap { max-height: 360px; overflow: auto; }
+table.detail { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
+table.detail thead th {
+  position: sticky; top: 0; background: var(--ink-900); color: #fff;
+  padding: 8px 10px; text-align: left; font-weight: 600; font-size: 11px;
+  letter-spacing: .8px; text-transform: uppercase; border-right: 1px solid rgba(255,255,255,.08); z-index: 1;
+}
+table.detail thead th.num { text-align: right; }
+table.detail tbody td {
+  padding: 6px 10px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
+}
+table.detail tbody td:first-child { white-space: nowrap; min-width: 64px; }
+table.detail tbody td.num { text-align: right; }
+table.detail tbody tr:nth-child(even) td { background: var(--paper-2); }
+table.detail tbody tr:hover td { background: rgba(27,77,137,.05); }
+.row-tag {
+  display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: .5px;
+}
+.row-tag.ok { background: rgba(4,120,87,.1); color: var(--signal-ok); }
+.row-tag.ng { background: rgba(185,28,28,.1); color: var(--signal-ng); }
+.warn-box {
+  background: #fffbf0; border: 1px solid var(--amber); color: var(--signal-warn);
+  padding: 10px 14px; margin-bottom: 16px; font-size: 12px; border-radius: 4px;
+}
+.warn-box.show::before { content: "⚠ "; font-weight: 700; }
+.footer {
+  margin-top: 24px; padding: 14px 0 0; border-top: 1px solid var(--line);
+  display: flex; justify-content: space-between; align-items: center;
+  color: var(--ink-300); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
+}
+.footer .l { display: flex; gap: 16px; }
+.footer .l b { color: var(--ink-500); }
+@media (max-width: 1280px) {
+  .main-grid { grid-template-columns: 1fr; }
+  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
+  .qr-1 { grid-template-columns: repeat(4, 1fr); }
+  .qr-2 { grid-template-columns: repeat(3, 1fr); }
+}
+</style>