spc/src/views/process-inspection/Metrological/XbarSGraph.vue

<!--
 * @Author: zwq
 * @Date: 2022-09-15 10:22:53
 * @LastEditors: zwq
 * @LastEditTime: 2022-12-16 15:31:13
 * @Description: 均值标准差控制图
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <query-form
      ref="queryForm"
      :page-name="'均值标准差控制图'"
      :data-form="dataForm"
      @getDataList="getDataList"
      @rawData="rawData"
      @exportHandle="exportHandle"
    />
    <el-row :gutter="6" v-if="chartVisible">
      <el-col :span="19">
        <chart-line
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          ref="chart1Ref"
          :chartLineName="'XbarSGraph'"
          :lineIndex="1"
          :title="chartTitle"
          :y-name1="yName1"
          :y-name2="yName2"
          :mrGraphEntity="dataList.msdGraphEntity"
          :processCapability="dataList.processCapability"
          :rcl="dataList.scl"
          :sl="dataList.sl"
          :xbarCL="dataList.xbarCL"
        ></chart-line>
      </el-col>
      <el-col :span="5" style="margin-top: 20px;">
        <el-card>
          <div v-for="item in rightList" :key="item.name" class="rightDiv">
            {{ item.name }}<span style="float:right">{{ parseFloat(item.value).toFixed(4) }}</span>
          </div>
          <el-collapse>
            <el-collapse-item title="均值数值" name="0">
              <div
                v-for="(val, key, index) in this.dataList.xbarCL"
                :key="index + 'xbar'"
                class="rightDiv"
              >
                {{ key
                }}<span style="float:right">{{
                  val.length ? val : parseFloat(val).toFixed(4)
                }}</span>
              </div>
            </el-collapse-item>
            <el-collapse-item title="标准差数值" name="1">
              <div
                v-for="(val, key, index) in this.dataList.scl"
                :key="index + 'scl'"
                class="rightDiv"
              >
                {{ key
                }}<span style="float:right">{{
                  val.length ? val : parseFloat(val).toFixed(4)
                }}</span>
              </div>
            </el-collapse-item>
            <el-collapse-item title="waring:" name="2">
              <div v-for="item in waring" :key="item" class="rightDiv">{{ item }}</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-2line.vue";
export default {
  mixins: [processPage],
  data() {
    return {
      dataForm: {},
      loading: true,
      urlOptions: {
        exportUrl: "/basic/unit/export",
      },
      chartVisible: false,
      chartTitle: "均值标准差控制图",
      yName1: "均值",
      yName2: "标准差",
      rightList: [],
      waring: [],
    };
  },
  components: {
    queryForm,
    chartLine,
  },
  created() {
    this.$nextTick(() => {
      this.$refs.queryForm.getArr();
    });
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.$refs.queryForm.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        this.$http
          .post("/processInspection/XbarSGraph", {
            ...this.dataForm,
          })
          .then(({ data: res }) => {
            this.dataListLoading = false;
            if (res.code !== 0) {
              this.dataList = [];
              this.rightList = [];
              this.loading = false;
              return this.$message.error(res.msg);
            }
            this.loading = false;
            this.dataList = res.data;
            this.rightList = [];
            // this.rightList.push({
            //   name: "cl(上图)",
            //   value: res.data.xbarCL.cl,
            // });
            // this.rightList.push({
            //   name: "lcl(上图)",
            //   value: res.data.xbarCL.lcl,
            // });
            // this.rightList.push({
            //   name: "ucl(上图)",
            //   value: res.data.xbarCL.ucl,
            // });
            Object.keys(res.data.sl).map((key) => {
              this.rightList.push({
                name: key,
                value: res.data.sl[key],
              });
            });
            // this.rightList.push({
            //   name: "cl(下图)",
            //   value: res.data.rcl.cl,
            // });
            // this.rightList.push({
            //   name: "lcl(下图)",
            //   value: res.data.rcl.lcl,
            // });
            // this.rightList.push({
            //   name: "ucl(下图)",
            //   value: res.data.rcl.ucl,
            // });
            Object.keys(res.data.standardDiviation).map((key) => {
              this.rightList.push({
                name: key,
                value: res.data.standardDiviation[key],
              });
            });
            Object.keys(res.data.processCapability).map((key) => {
              if (key === "warming") {
                this.waring = res.data.processCapability[key];
              } else {
                this.rightList.push({
                  name: key,
                  value: res.data.processCapability[key],
                });
              }
            });
            this.chartVisible = true;
            this.$nextTick(() => {
              this.$refs.chart1Ref.initChartLine();
            });
          })
          .catch(() => {});
      });
    },
    rawData() {
      console.log("原始数据");
    },
  },
};
</script>

<style scoped>
.rightDiv {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #fdfdfd;
  border-bottom: 1px solid #f5f5f5;
  overflow: hidden;
}
</style>