qingban-SPC/src/views/analysis/process/P.vue

<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 ref="chartRef" style="width: 100%; height: 400px"></div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
import { PCompute } from "@/api/analysis";

// 假设的数据
var chartData = ref([]);

const param = {
  x: {
    defectCount: 30,
    sampleSize: 500,
  },
  x2: {
    defectCount: 50,
    sampleSize: 600,
  },
};

const getTableData = async (resultData) => {
  // 转换函数
  const transformData = (data) => {
    const result = [];
    let sampleId = 1;

    // 遍历原始数据，排除 total 属性
    for (const key in data) {
      if (key !== "total") {
        const item = data[key];
        result.push({
          sampleId: sampleId.toString(),
          value: item.p,
          ewma: item.cl,
          ucl: item.ucl,
          lcl: item.lcl,
        });
        sampleId++;
      }
    }

    return result;
  };

  // 转换后的数据
  const formattedData = ref(transformData(resultData));
  chartData.value = formattedData.value;
};

const chartRef = ref(null);
const chartInstance = ref(null);

const prepareData = () => {
  let sampleIds = chartData.value.map((item) => item.sampleId);
  let values = chartData.value.map((item) => item.value);
  let ewmaValues = chartData.value.map((item) => item.ewma);
  let uclValues = chartData.value.map((item) => item.ucl);
  let lclValues = chartData.value.map((item) => item.lcl);

  // 保留四位小数
  values = values.map((num) => parseFloat(num.toFixed(4)));
  ewmaValues = ewmaValues.map((num) => parseFloat(num.toFixed(4)));
  uclValues = uclValues.map((num) => parseFloat(num.toFixed(4)));
  lclValues = lclValues.map((num) => parseFloat(num.toFixed(4)));

  return {
    sampleIds,
    values,
    ewmaValues,
    uclValues,
    lclValues,
  };
};

const initChart = (chartDom) => {
  const myChart = echarts.init(chartDom);
  const { sampleIds, values, ewmaValues, uclValues, lclValues } = prepareData();

  const option = {
    title: {
      text: "P控制图",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: true, // 不留白，从原点开始
      data: sampleIds,
    },
    yAxis: {
      type: "value",
      // name: "EWMA值",
    },
    series: [
      {
        name: "数值",
        type: "line",
        // step: "start",
        symbol: "circle", //将小圆点改成实心 不写symbol默认空心
        symbolSize: 8,
        data: values.map((value, index) => ({
          value,
          itemStyle: {
            color:
              value > uclValues[index] || value < lclValues[index]
                ? "red"
                : "blue",
          },
        })),
      },
      {
        name: "均值",
        type: "line",
        showSymbol: false,
        data: ewmaValues,
        lineStyle: {
          color: "green",
        },
      },
      // {
      //   name: "均值",
      //   type: "line",
      //   data: Array(sampleIds.length).fill(meanValue),
      //   showSymbol: false,
      //   lineStyle: {
      //     color: "green",
      //     type: "solid",
      //   },
      // },
      {
        name: "UCL",
        type: "line",
        data: uclValues,
        showSymbol: false,
        lineStyle: {
          color: "red",
          type: "dashed",
        },
      },
      {
        name: "LCL",
        type: "line",
        data: lclValues,
        showSymbol: false,
        lineStyle: {
          color: "red",
          type: "dashed",
        },
      },
    ],
    color: ["blue", "green", "red", "red", "black"],
  };

  myChart.setOption(option);
  chartInstance.value = myChart;
};

const resizeChart = () => {
  if (chartInstance.value) {
    chartInstance.value.resize();
  }
};

onMounted(() => {
  window.addEventListener("resize", resizeChart);
});

watch(chartData, () => {
  if (chartInstance.value) {
    const { sampleIds, values, ewmaValues, uclValues, lclValues, meanValue } =
      prepareData();
    const option = {
      title: [
        {
          text: `P控制图`,
          left: "40%",
        },
      ],
      xAxis: {
        data: sampleIds,
      },
      series: [
        {
          data: values.map((value, index) => ({
            value,
            itemStyle: {
              color:
                value > uclValues[index] || value < lclValues[index]
                  ? "red"
                  : "blue",
            },
          })),
        },
        {
          data: ewmaValues,
        },
        {
          data: uclValues,
        },
        {
          data: lclValues,
        },
        {
          data: Array(sampleIds.length).fill(meanValue),
        },
      ],
    };
    chartInstance.value.setOption(option);
  }
});

const init = (data) => {
  if (data) {
    nextTick(async () => {
      await getTableData(data);
      await initChart(chartRef.value);
    });
  }
};

// 暴露 init 方法
defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
/* 样式可以根据需要进行调整 */
.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>