<!--
 * @Author: zwq
 * @Date: 2022-09-15 10:22:12
 * @LastEditors: zwq
 * @LastEditTime: 2023-01-09 14:18:18
 * @Description: 均值极差控制图
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <query-form
      ref="queryForm"
      :f-type="1"
      :page-name="'均值极差控制图'"
      :data-form="dataForm"
      :showRaw="chartVisible"
      @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="chartRef"
          :chartLineName="'XbarRGraph'"
          :lineIndex="0"
          :title="chartTitle"
          :y-name1="yName1"
          :y-name2="yName2"
          :mrGraphEntity="dataList.mrGraphEntity"
          :processCapability="dataList.processCapability"
          :rcl="dataList.rcl"
          :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.rcl"
                :key="index + 'rcl'"
                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-row :gutter="6" v-else>
      <el-empty description="无数据"></el-empty>
    </el-row>
    <!-- 原始数据 -->
    <raw-data
      :lineIndex="0"
      :dataList="dataList.mrGraphEntity.list"
      v-if="rawDataVisible"
      ref="rawDataRef"
    ></raw-data>
  </el-card>
</template>

<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-2line.vue";
import rawData from "../components/rawData";
export default {
  mixins: [processPage],
  data() {
    return {
      dataForm: {},
      loading: true,
      urlOptions: {
        exportUrl: "/basic/unit/export",
      },
      chartVisible: false,
      rawDataVisible: false,
      chartTitle: "均值极差控制图",
      yName1: "均值",
      yName2: "极差",
      rightList: [],
      waring: [],
    };
  },
  components: {
    queryForm,
    chartLine,
    rawData,
  },
  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/XbarRGraph", {
            ...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,
            // });
            if (res.data.sl) {
              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,
            // });
            if (res.data.standardDiviation) {
              Object.keys(res.data.standardDiviation).map((key) => {
                this.rightList.push({
                  name: key,
                  value: res.data.standardDiviation[key],
                });
              });
            }
            if (res.data.processCapability) {
              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],
                  });
                }
              });
            }
            if (res.data.mrGraphEntity) {
              this.chartVisible = true;
              this.$nextTick(() => {
                this.$refs.chartRef.initChartLine();
              });
            } else {
              this.chartVisible = false;
              this.$message({
                message: "没有发现数据",
                type: "warning",
              });
            }
          })
          .catch(() => {});
      });
    },
    rawData() {
      this.rawDataVisible = true;
      this.$nextTick(() => {
        this.$refs.rawDataRef.init();
      });
    },
  },
};
</script>

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