新增SPC Vue控制图项目

spc-vue/src/views/CpkView.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import EChartPanel from "../components/EChartPanel.vue";
+import MetricStrip from "../components/MetricStrip.vue";
+import { useSpc } from "../composables/useSpc";
+import { createCapabilityBarOption, createHistogramOption } from "../utils/chartOptions";
+
+const { result } = useSpc();
+
+const metrics = computed(() => {
+  const cpk = result.value?.Cpk;
+  if (!cpk) return [];
+  return [
+    { label: "Cp", value: cpk.Cp, tone: cpk.Cp >= 1.33 ? ("ok" as const) : ("warn" as const) },
+    { label: "Cpk", value: cpk.Cpk, tone: cpk.Cpk >= 1.33 ? ("ok" as const) : ("warn" as const) },
+    { label: "Pp", value: cpk.Pp, tone: cpk.Pp >= 1.33 ? ("ok" as const) : ("warn" as const) },
+    { label: "Ppk", value: cpk.Ppk, tone: cpk.Ppk >= 1.33 ? ("ok" as const) : ("warn" as const) },
+    { label: "USL", value: cpk.USL },
+    { label: "LSL", value: cpk.LSL }
+  ];
+});
+
+const capabilityOption = computed(() => (result.value?.Cpk ? createCapabilityBarOption(result.value.Cpk) : null));
+const histogramOption = computed(() => (result.value?.Cpk ? createHistogramOption(result.value.Cpk) : null));
+</script>
+
+<template>
+  <article class="page-stack">
+    <MetricStrip v-if="metrics.length" :metrics="metrics" />
+    <div class="two-column">
+      <EChartPanel
+        title="过程能力指标"
+        eyebrow="Capability"
+        description="能力柱状图用于快速比较 Cp、Cpk、Pp、Ppk。页面保留 1.00 与 1.33 参考线，方便验证常见能力门槛。"
+        :option="capabilityOption"
+      />
+      <EChartPanel
+        title="直方图与正态曲线"
+        eyebrow="Distribution"
+        description="直方图展示测量值分布，并叠加正态曲线和规格限，便于判断能力指标是否被偏态或边界数据影响。"
+        :option="histogramOption"
+      />
+    </div>
+  </article>
+</template>