qingban-SPC/src/views/analysis/process/Xbar-R.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 id="charts" :style="{ height: maxHeight / 2 + 'px' }"></div>
              <div id="charts1" :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";

const props = defineProps({
  process: {
    type: String,
    required: true,
  },
});
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 = [];
  tableData.value.forEach((item) => {
    Y1value.value.push(item.avg);
  });
  Y1value.value.unshift("");
  Y1value.value.push("");

  chartsOption1.value.series[0].data = Y1value.value;
};
const tableData = ref([]);
const setX1array = async () => {
  X1array.value = await [];
  tableData.value.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 = JSON.parse(
    value.value
  ).avgMax;
  chartsOption1.value.series[0].markLine.data[0].label.formatter = `上限=${
    JSON.parse(value.value).avgMax ? JSON.parse(value.value).avgMax : "0"
  }`;
  chartsOption1.value.series[0].markLine.data[1].yAxis = JSON.parse(value.value)
    .avgMin
    ? JSON.parse(value.value).avgMin
    : 0;
  chartsOption1.value.series[0].markLine.data[1].label.formatter = `下限=${JSON.parse(value.value).avgMin ? JSON.parse(value.value).avgMin : "0"}`;
  chartsOption1.value.series[0].markLine.data[2].yAxis = JSON.parse(
    value.value
  ).avgMid;
  chartsOption1.value.series[0].markLine.data[2].label.formatter = `x̄=${
    JSON.parse(value.value).avgMid
  }`;
  // chartsOption1.value.title[2].text = `下限=${showData.value.avgMin ? showData.value.avgMin : "0"}`;
};
const setChart2Info = () => {
  // chartsOption2.value.title[0].text = `上限=${showData.value.rangeMax ? showData.value.rangeMax : "-"}`;
  // chartsOption2.value.title[0].text = `R=${showData.value.rangeAvg ? showData.value.rangeAvg : "-"}`;
  chartsOption2.value.series[0].markLine.data[0].yAxis = JSON.parse(
    value.value
  ).rangeMax;
  chartsOption2.value.series[0].markLine.data[0].label.formatter = `上限=${
    JSON.parse(value.value).rangeMax ? JSON.parse(value.value).rangeMax : "0"
  }`;
  chartsOption2.value.series[0].markLine.data[1].yAxis = JSON.parse(value.value)
    .rangeMin
    ? JSON.parse(value.value).rangeMin
    : 0;
  chartsOption2.value.series[0].markLine.data[1].label.formatter = `下限=${
    JSON.parse(value.value).rangeMin ? JSON.parse(value.value).rangeMin : "0"
  }`;
  chartsOption2.value.series[0].markLine.data[2].yAxis = JSON.parse(
    value.value
  ).rangeMid;
  chartsOption2.value.series[0].markLine.data[2].label.formatter = `x̄=${
    JSON.parse(value.value).rangeMid
  }`;
  // chartsOption2.value.title[2].text = `下限=${showData.value.rangeMin ? showData.value.rangeMin : "0"}`;
};
const setChart1 = () => {
  setChart1Info();
  setY1value();
  setX1array();
  charts1.value.setOption(chartsOption1.value, true);
};
const setChart2 = () => {
  setChart2Info();
  setY2value();
  setX2array();
  charts2.value.setOption(chartsOption2.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 (process) {
      case "调阻":
        title.value = "调阻精度";
        break;
      case "粘片":
        title.value = "剪切强度";
        break;
      case "键合":
        title.value = "键合强度";
        break;
      default:
        title.value = "调阻精度";
        break;
    }
    // await getTableData();
    chartsOption1.value.title[0].text = `${title.value}的Xbar-R控制图`;
    setChart1();
    setChart2();
  }, 0);
};

const maxHeight = ref(null);
const maxWidth = ref(null);
const charts1 = shallowRef(null);
const charts2 = shallowRef(null);
const chartsOption1 = ref({
  title: [
    // {
    //   text: `x̄=${showData.value.avgAvg ? showData.value.avgAvg : "-"}`,
    //   right: "5%",
    //   top: "42%",
    //   textStyle: {
    //     fontSize: 15,
    //     color: "#333",
    //     fontWeight: 100,
    //   },
    // },
    {
      text: `${title.value}的Xbar-R控制图`,
      left: "40%",
    },
    {
      text: "均",
      left: "4%",
      top: "42%",
    },
    {
      text: "值",
      left: "4%",
      top: "49%",
    },
  ],
  grid: {
    right: "15%",
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  tooltip: {
    show: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      type: "line",
      lineStyle: {
        color: "rgb(26, 122, 240)",
      },
      symbolSize: 13,
      symbol: "circle",
      itemStyle: {
        color: (params) => {
          const avg = JSON.parse(value.value);
          const paramValue = Number(params.value);
          if (
            paramValue <= Number(avg.avgMax) &&
            paramValue >= Number(avg.avgMin)
          ) {
            return "rgb(26, 122, 240)";
          } else {
            return "red";
          }
        },
      },
      markLine: {
        silent: true,
        data: [
          {
            silent: false,
            yAxis: 0,
            label: {
              position: "end",
              formatter: `上限=${JSON.parse(value.value).avgMax ? JSON.parse(value.value).avgMax : "-"}`,
              color: "#333",
            },
            lineStyle: { type: "solid", color: "#333", width: 2 },
          },
          {
            silent: false,
            yAxis: 0,
            label: {
              position: "end",
              formatter: `下限=${JSON.parse(value.value).avgMin ? JSON.parse(value.value).avgMin : "-"}`,
              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 chartsOption2 = ref({
  title: [
    // {
    //   text: `R=${showData.value.rangeAvg ? showData.value.rangeAvg : "-"}`,
    //   right: "5%",
    //   top: "42%",
    //   textStyle: {
    //     fontSize: 15,
    //     color: "#333",
    //     fontWeight: 100,
    //   },
    // },
    {
      text: "极",
      left: "4%",
      top: "42%",
    },
    {
      text: "值",
      left: "4%",
      top: "49%",
    },
  ],
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    right: "15%",
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  tooltip: {
    show: true,
  },
  series: [
    {
      type: "line",
      lineStyle: {
        color: "rgb(26, 122, 240)",
      },
      symbolSize: 13,
      symbol: "circle",
      itemStyle: {
        color: (params) => {
          const range = JSON.parse(value.value);
          const paramValue = Number(params.value);
          if (
            paramValue <= Number(range.rangeMax) &&
            paramValue >= Number(range.rangeMin)
          ) {
            return "rgb(26, 122, 240)";
          } else {
            return "red";
          }
        },
      },
      markLine: {
        silent: true,
        data: [
          {
            silent: false,
            yAxis: 0,
            label: {
              position: "end",
              formatter: `上限=${JSON.parse(value.value).rangeMax ? JSON.parse(value.value).rangeMax : "-"}`,
              color: "#333",
            },
            lineStyle: { type: "solid", color: "#333", width: 2 },
          },
          {
            silent: false,
            yAxis: 0,
            label: {
              position: "end",
              formatter: `下限=${JSON.parse(value.value).rangeMin ? JSON.parse(value.value).rangeMin : "-"}`,
              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 Y2value = ref([]);
const X2array = ref([]);
const setY2value = () => {
  Y2value.value = [];
  tableData.value.forEach((item) => {
    Y2value.value.push(item.range);
  });
  Y2value.value.unshift("");
  Y2value.value.push("");
  chartsOption2.value.series[0].data = Y2value.value;
};
const setX2array = () => {
  X2array.value = [];
  tableData.value.forEach((item, index) => {
    X2array.value.push(index + 1);
  });
  X2array.value.unshift("");
  X2array.value.push("");
  chartsOption2.value.xAxis[0].data = X2array.value;
};

const setView = () => {
  setHeight();
  charts1.value = echarts.init(document.getElementById("charts"));
  charts2.value = echarts.init(document.getElementById("charts1"));
  charts1.value.setOption(chartsOption1.value, true);
  charts2.value.setOption(chartsOption2.value, true);
};
onMounted(() => {
  init();
});
const init = (data) => {

  tableData.value = data;
  changeSelect();
  setHeight();
  nextTick(() => {
    charts1.value = echarts.init(document.getElementById("charts"));
    charts2.value = echarts.init(document.getElementById("charts1"));
    charts1.value.setOption(chartsOption1.value, true);
    charts2.value.setOption(chartsOption2.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>