From 37517d527988602a5b665ea5116f8a8f457c65e9 Mon Sep 17 00:00:00 2001 From: zhangshun <453905631@qq.com> Date: Mon, 29 Jun 2026 09:18:24 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9ESPC=20Vue=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E5=9B=BE=E9=A1=B9=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- spc-vue/.gitignore | 3 + spc-vue/README.md | 31 + spc-vue/index.html | 13 + spc-vue/package-lock.json | 2182 ++++++++++++++++++++++ spc-vue/package.json | 23 + spc-vue/src/App.vue | 39 + spc-vue/src/components/EChartPanel.vue | 58 + spc-vue/src/components/JsonPreview.vue | 12 + spc-vue/src/components/MetricStrip.vue | 14 + spc-vue/src/components/SpcInputPanel.vue | 54 + spc-vue/src/composables/useSpc.ts | 133 ++ spc-vue/src/config.ts | 3 + spc-vue/src/data/sampleSpc.ts | 25 + spc-vue/src/main.ts | 6 + spc-vue/src/router.ts | 22 + spc-vue/src/services/wasmSpcClient.ts | 136 ++ spc-vue/src/styles.css | 478 +++++ spc-vue/src/types/spc.ts | 96 + spc-vue/src/utils/chartOptions.ts | 187 ++ spc-vue/src/views/CpkView.vue | 45 + spc-vue/src/views/OverviewView.vue | 56 + spc-vue/src/views/RChartView.vue | 45 + spc-vue/src/views/SChartView.vue | 45 + spc-vue/src/views/XBarRView.vue | 46 + spc-vue/src/views/XBarSView.vue | 45 + spc-vue/tsconfig.json | 19 + spc-vue/vite.config.ts | 48 + 27 files changed, 3864 insertions(+) create mode 100644 spc-vue/.gitignore create mode 100644 spc-vue/README.md create mode 100644 spc-vue/index.html create mode 100644 spc-vue/package-lock.json create mode 100644 spc-vue/package.json create mode 100644 spc-vue/src/App.vue create mode 100644 spc-vue/src/components/EChartPanel.vue create mode 100644 spc-vue/src/components/JsonPreview.vue create mode 100644 spc-vue/src/components/MetricStrip.vue create mode 100644 spc-vue/src/components/SpcInputPanel.vue create mode 100644 spc-vue/src/composables/useSpc.ts create mode 100644 spc-vue/src/config.ts create mode 100644 spc-vue/src/data/sampleSpc.ts create mode 100644 spc-vue/src/main.ts create mode 100644 spc-vue/src/router.ts create mode 100644 spc-vue/src/services/wasmSpcClient.ts create mode 100644 spc-vue/src/styles.css create mode 100644 spc-vue/src/types/spc.ts create mode 100644 spc-vue/src/utils/chartOptions.ts create mode 100644 spc-vue/src/views/CpkView.vue create mode 100644 spc-vue/src/views/OverviewView.vue create mode 100644 spc-vue/src/views/RChartView.vue create mode 100644 spc-vue/src/views/SChartView.vue create mode 100644 spc-vue/src/views/XBarRView.vue create mode 100644 spc-vue/src/views/XBarSView.vue create mode 100644 spc-vue/tsconfig.json create mode 100644 spc-vue/vite.config.ts diff --git a/spc-vue/.gitignore b/spc-vue/.gitignore new file mode 100644 index 0000000..804bd4a --- /dev/null +++ b/spc-vue/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +*.local diff --git a/spc-vue/README.md b/spc-vue/README.md new file mode 100644 index 0000000..265db89 --- /dev/null +++ b/spc-vue/README.md @@ -0,0 +1,31 @@ +# SPC 控制图 Vue 验证项目 + +这个目录是一个独立的 Vue 3 + Vite + ECharts 项目,用于验证 `Cmd_Spc` 的 WASM 计算结果。每一种控制图都拆成独立路由,方便后续把单个页面或组件集成到其他项目。 + +## 本地运行 + +```powershell +cd spc-vue +npm install +npm run dev +``` + +开发环境会通过 Vite 插件把主项目的 `../public/wasm` 映射到 `/wasm`。执行 `npm run build` 时会自动把 `smart_math.js` 和 `smart_math.wasm` 复制到 `dist/wasm`。 + +## 页面路由 + +- `/overview`:SPC 总览和关键指标 +- `/xbar-r`:Xbar 控制图,控制限来自 XR 结果 +- `/r-chart`:R 极差控制图 +- `/xbar-s`:Xbar 控制图,控制限来自 XS 结果 +- `/s-chart`:S 标准差控制图 +- `/cpk`:过程能力与直方图 + +## 接口校验重点 + +`KinematicsWebAPI::func` 会把业务返回统一包装成顶层 `success: true`,所以页面不会只判断顶层 `success`。SPC 调用成功必须同时满足: + +- 顶层 `success !== false` +- `res_data` 存在 +- `res_data.error` 不存在 +- `res_data.XR`、`res_data.XS`、`res_data.Cpk` 都存在 diff --git a/spc-vue/index.html b/spc-vue/index.html new file mode 100644 index 0000000..1474ca1 --- /dev/null +++ b/spc-vue/index.html @@ -0,0 +1,13 @@ + + +
+ + + +SPC Vue
+{{ eyebrow }}
+{{ description }}
+{{ JSON.stringify(value || {}, null, 2) }}
+ Overview
++ 页面启动后会自动调用一次 `Cmd_Spc`。左侧可以替换 n、k、规格限和测量数据,所有控制图页面共用同一份计算结果。 +
+使用子组均值和极差验证过程中心与短期组内波动,适合小子组连续型数据。
+使用子组均值和样本标准差验证过程稳定性,适合子组容量较大或需要标准差口径的场景。
+结合规格限、直方图和正态曲线,检查过程能力指标与数据分布是否相互印证。
+