C控制图

src/api/analysis/index.js

@@ -1,5 +1,12 @@
 import request from "@/utils/request";
 
+export function CCompute(data) {
+  return request({
+    url: "/api/v1/spc/CCompute",
+    method: "post",
+    data,
+  });
+}
 export function NPCompute(data) {
   return request({
     url: "/api/v1/spc/NPCompute",

src/views/analysis/process/C.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="container1">
+    <div class="databox">
+      <el-scrollbar :style="{ height: Height + 'px' }">
+        <div class="box" v-show="!addStatus">
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            "
+          >
+            <div style="display: flex; align-items: center">
+              <div class="bg"></div>
+              控制图绘制
+            </div>
+
+            <el-button
+              type="primary"
+              v-print="'#print'"
+              style="margin-left: 10px; height: 25px"
+              >打 印</el-button
+            >
+          </div>
+          <div class="info">
+            <div id="print">
+              <div id="charts" :style="{ height: maxHeight / 2 + 'px' }"></div>
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { useDictionaryStore } from "@/store";
+import { CCompute } from "@/api/analysis";
+
+const tableData = ref([]);
+const chartData = ref({});
+const param = ref([
+  7, 5, 6, 8, 4, 9, 5, 6, 7, 4, 5, 10, 3, 6, 5, 7, 12, 5, 6, 4,
+]);
+const getTableData = async () => {
+  const { data } = await CCompute(param.value);
+  console.log(JSON.stringify(data), "resultDataList");
+  data.CL = data.CL.toFixed(4);
+  data.LCL = data.LCL.toFixed(4);
+  data.UCL = data.UCL.toFixed(4);
+  data.DataPoints = data.DataPoints.map((num) => {
+    return parseFloat(num.y.toFixed(4));
+  });
+  chartData.value = data;
+};
+
+const { dicts } = useDictionaryStore();
+const opOptions = ref([...dicts.spc_operation]);
+const value = ref(opOptions.value[0].remark);
+const Y1value = ref([]);
+const X1array = ref([]);
+const setY1value = () => {
+  Y1value.value = [];
+  chartData.value.DataPoints.forEach((item) => {
+    Y1value.value.push(item);
+  });
+  Y1value.value.unshift("");
+  Y1value.value.push("");
+
+  chartsOption1.value.series[0].data = Y1value.value;
+};
+
+const setX1array = async () => {
+  X1array.value = await [];
+  chartData.value.DataPoints.forEach((item, index) => {
+    X1array.value.push(index + 1);
+  });
+  X1array.value.unshift("");
+  X1array.value.push("");
+  chartsOption1.value.xAxis[0].data = X1array.value;
+};
+
+const setChart1Info = () => {
+  // chartsOption1.value.title[0].text = `上限=${showData.value.avgMax ? showData.value.avgMax : "-"}`;
+  // chartsOption1.value.title[0].text = `x̄=${showData.value.avgAvg ? showData.value.avgAvg : "-"}`;
+  chartsOption1.value.series[0].markLine.data[0].yAxis = chartData.value.UCL;
+  chartsOption1.value.series[0].markLine.data[0].label.formatter = `上限=${
+    chartData.value.UCL
+  }`;
+  chartsOption1.value.series[0].markLine.data[1].yAxis = chartData.value.LCL;
+  chartsOption1.value.series[0].markLine.data[1].label.formatter = `下限=${chartData.value.LCL}`;
+  chartsOption1.value.series[0].markLine.data[2].yAxis = chartData.value.CL;
+  chartsOption1.value.series[0].markLine.data[2].label.formatter = `x̄=${
+    chartData.value.CL
+  }`;
+  // chartsOption1.value.title[2].text = `下限=${showData.value.avgMin ? showData.value.avgMin : "0"}`;
+};
+const setChart1 = () => {
+  setChart1Info();
+  setY1value();
+  setX1array();
+  charts1.value.setOption(chartsOption1.value, true);
+};
+
+const title = ref("调阻精度");
+const showLable = ref("调阻");
+const changeSelect = () => {
+  setTimeout(async () => {
+    // showLable.value = selectRef.value.currentPlaceholder;
+    // opOptions.value.forEach((item) => {
+    //   if (item.dictLabel == showLable.value) {
+    //     lableValue.value = item.dictValue;
+    //   }
+    // });
+    // switch (showLable.value) {
+    //   case "调阻":
+    //     title.value = "调阻精度";
+    //     break;
+    //   case "粘片":
+    //     title.value = "剪切强度";
+    //     break;
+    //   case "键合":
+    //     title.value = "键合强度";
+    //     break;
+    //   default:
+    //     title.value = "调阻精度";
+    //     break;
+    // }
+    // await getTableData();
+    chartsOption1.value.title[0].text = `C控制图`;
+    setChart1();
+    // setChart2();
+  }, 0);
+};
+
+const maxHeight = ref(null);
+const maxWidth = ref(null);
+const charts1 = shallowRef(null);
+const chartsOption1 = ref({
+  title: [
+    {
+      text: `C控制图`,
+      left: "40%",
+    },
+  ],
+  grid: {
+    right: "15%",
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {},
+    },
+  },
+  tooltip: {
+    show: true,
+  },
+  xAxis: [
+    {
+      type: "category",
+      boundaryGap: false,
+      data: [],
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      scale: true, // 开启自适应缩放
+    },
+  ],
+  series: [
+    {
+      type: "line",
+      lineStyle: {
+        color: "rgb(26, 122, 240)",
+      },
+      symbolSize: 13,
+      symbol: "circle",
+      itemStyle: {
+        color: (params) => {
+          const paramValue = Number(params.value);
+          if (
+            paramValue <= Number(chartData.value.UCL) &&
+            paramValue >= Number(chartData.value.LCL)
+          ) {
+            return "rgb(26, 122, 240)";
+          } else {
+            return "red";
+          }
+        },
+      },
+      markLine: {
+        silent: true,
+        data: [
+          {
+            silent: false,
+            yAxis: 0,
+            label: {
+              position: "end",
+              formatter: `上限=${chartData.value.UCL}`,
+              color: "#333",
+            },
+            lineStyle: { type: "solid", color: "#333", width: 2 },
+          },
+          {
+            silent: false,
+            yAxis: 0,
+            label: {
+              position: "end",
+              formatter: `下限=${chartData.value.LCL}`,
+              color: "#333",
+            },
+            lineStyle: {
+              type: "solid",
+              color: "#333",
+              width: 2,
+            },
+          },
+          {
+            yAxis: 0,
+            silent: false,
+            label: {
+              position: "end",
+              formatter: ``,
+              color: "#333",
+            },
+            lineStyle: {
+              type: "solid",
+              color: "#333",
+              width: 2,
+            },
+          },
+        ],
+      },
+    },
+  ],
+});
+const Height = ref(0);
+const setHeight = () => {
+  Height.value = document.querySelector(".databox").clientHeight;
+  maxHeight.value = document.querySelector(".info").clientHeight;
+  maxWidth.value = document.querySelector(".info").clientWidth;
+};
+
+const setView = () => {
+  setHeight();
+  charts1.value = echarts.init(document.getElementById("charts"));
+  charts1.value.setOption(chartsOption1.value, true);
+};
+onMounted(() => {
+  init();
+});
+const init = (data, str) => {
+  tableData.value = data;
+
+  setHeight();
+
+  nextTick(async () => {
+    await getTableData();
+    await changeSelect();
+    charts1.value = echarts.init(document.getElementById("charts"));
+    charts1.value.setOption(chartsOption1.value, true);
+  });
+  window.addEventListener("resize", setView);
+};
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", setView);
+});
+
+// 暴露 init 方法
+defineExpose({
+  init,
+});
+</script>
+
+<style lang="scss" scoped>
+@media print {
+  #print {
+    margin-left: -18%;
+  }
+}
+.formStyle {
+  width: 400px;
+  margin: 20px auto;
+}
+.container1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: white;
+  .infobox {
+    width: 200px;
+    .header {
+      height: 120px;
+      border-bottom: 2px solid #00000010;
+      padding: 20px;
+    }
+    .body {
+      padding: 20px;
+    }
+  }
+  .databox {
+    flex: 1;
+    border-left: 2px solid #00000010;
+    .box {
+      height: 710px;
+      padding: 5px 20px;
+      display: flex;
+      flex-direction: column;
+      .illustrate {
+        padding: 20px 60px;
+      }
+      .tableTitle {
+        text-align: center;
+        margin: 10px 0;
+        padding-right: 40px;
+      }
+      .header {
+        margin-top: 20px;
+        //margin-left: 100px;
+        display: flex;
+        width: 100%;
+        height: auto;
+      }
+      //.title {
+      //  height: 50px;
+      //  display: flex;
+      //  align-items: center;
+      //  margin-bottom: 10px;
+      //  justify-content: space-between;
+      //  .btns {
+      //    display: flex;
+      //    align-items: center;
+      //    .btn {
+      //      height: 24px;
+      //      font-size: 14px;
+      //      margin: 0 5px;
+      //    }
+      //  }
+      //}
+      .info {
+        margin-top: 20px;
+        flex: 1;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>

src/views/analysis/process/index.vue

@@ -682,6 +682,9 @@
           <div class="info" v-if="value2 === 'NP'">
             <NP ref="npRef" :process="showLable" />
           </div>
+          <div class="info" v-if="value2 === 'C'">
+            <C ref="cRef" :process="showLable" />
+          </div>
         </div>
       </el-scrollbar>
     </div>
@@ -694,6 +697,7 @@ import XbarR from "./Xbar-R.vue";
 import XbarS from "./Xbar-S-2.vue";
 import P from "./P.vue";
 import NP from "./NP.vue";
+import C from "./C.vue";
 import * as echarts from "echarts";
 import { useDictionaryStore } from "@/store";
 import {
@@ -734,6 +738,13 @@ const npRefMethod = async () => {
     npRef.value.init();
   }
 };
+const cRef = ref("cRef");
+const cRefMethod = async () => {
+  await nextTick();
+  if (cRef.value) {
+    cRef.value.init();
+  }
+};
 const year = ref("0");
 const currentOption = reactive({
   total: 0,
@@ -1122,6 +1133,8 @@ const changeSelect2 = () => {
     pRefMethod();
   } else if (value2.value === "NP") {
     npRefMethod();
+  } else if (value2.value === "C") {
+    cRefMethod();
   }
 };