<!--
 * @Author: zwq
 * @Date: 2022-09-15 10:22:53
 * @LastEditors: zwq
 * @LastEditTime: 2022-12-01 10:23:38
 * @Description: P图
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <query-form
      :page-name="'NP图'"
      :data-form="dataForm"
      @getDataList="getDataList"
      @rawData="rawData"
      @exportHandle="exportHandle"
    />
    <el-row :gutter="6" v-if="chartVisible">
      <el-col :span="24">
        <chart-line
          ref="CGraph"
          :chartLineName="'CGraph'"
          :yName="'缺陷率'"
          :title="chartTitle"
          :data-list="dataList.list"
        ></chart-line>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-3line.vue";
export default {
  mixins: [processPage],
  data() {
    return {
      urlOptions: {
        exportUrl: "/basic/unit/export",
      },
      chartVisible: false,
      chartTitle: "P图",
    };
  },
  components: {
    queryForm,
    chartLine,
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.$http
        .post("/processInspection/PGraphTest")
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.dataList = [];
            this.rightList = [];
            return this.$message.error(res.msg);
          }
          this.dataList = res.data;
          this.chartVisible = true;
          this.$nextTick(() => {
            this.$refs.CGraph.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>
