msyj-admin-org/src/modules/main/components/QualityAnalysisExport.vue

<template>
  <div class="quality-analysis-export analysis-export-modal">
    <div class="print-box">
      <h1>
        阅卷质量分析
      </h1>
      <div class="quality-info">
        <p>科目：{{ pageInfo.subjectName }}</p>
        <p>考区：{{ pageInfo.areaName }}</p>
        <p>开始时间：{{ pageInfo.startTime }}</p>
        <p>结束时间：{{ pageInfo.endTime }}</p>
      </div>
      <div class="print-chart" v-if="chartData.levelsPropReportData">
        <div class="print-chart-body" v-if="!showImg">
          <echart-render
            chart-title="档位分布图"
            :animation-is-open="false"
            :chart-data="chartData.levelsPropReportData"
            chart-type="barGroup"
            ref="levelsPropChart"
          ></echart-render>
        </div>
        <div
          class="print-chart-body"
          v-show="showImg && chartData.levelsPropReportData.names.length"
        >
          <div class="print-chart-title">档位分布图：</div>
          <img src="" ref="levelsPropImg" />
        </div>
      </div>
      <div class="print-chart" v-if="chartData.deviationReportData">
        <div class="print-chart-body" v-if="!showImg">
          <echart-render
            chart-title="累计偏差"
            :animation-is-open="false"
            :chart-data="chartData.deviationReportData"
            :chart-color="['#FF7786']"
            chart-type="barReverse"
            ref="deviationChart"
          ></echart-render>
        </div>
        <div
          class="print-chart-body"
          v-show="showImg && chartData.deviationReportData.names.length"
        >
          <div class="print-chart-title">累计偏差：</div>
          <img src="" ref="deviationImg" />
        </div>
      </div>
    </div>
    <div class="print-box">
      <div class="print-chart" v-if="chartData.distanceReportData">
        <div class="print-chart-body" v-if="!showImg">
          <echart-render
            chart-title="累计误差"
            :animation-is-open="false"
            :chart-data="chartData.distanceReportData"
            :chart-color="['#22C0FF']"
            chart-type="bar"
            ref="distanceChart"
          ></echart-render>
        </div>
        <div
          class="print-chart-body"
          v-show="showImg && chartData.distanceReportData.names.length"
        >
          <div class="print-chart-title">累计误差：</div>
          <img src="" ref="distanceImg" />
        </div>
      </div>
      <div class="print-chart" v-if="chartData.callbackReportData">
        <div class="print-chart-body" v-if="!showImg">
          <echart-render
            chart-title="打回次数"
            :animation-is-open="false"
            :chart-data="chartData.callbackReportData"
            :chart-color="['#41CD7D']"
            chart-type="bar"
            ref="callbackChart"
          ></echart-render>
        </div>
        <div
          class="print-chart-body"
          v-show="showImg && chartData.callbackReportData.names.length"
        >
          <div class="print-chart-title">打回次数：</div>
          <img src="" ref="callbackImg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EchartRender from "@/components/EchartRender";
import { download } from "@/plugins/utils";
import html2canvas from "html2canvas";

export default {
  name: "quality-analysis-export",
  components: { EchartRender },
  props: {
    chartData: {
      type: Object,
      default() {
        return {};
      }
    },
    pageInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      showImg: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.levelsPropImg.src = this.$refs.levelsPropChart.getDataURL({
        backgroundColor: "#fff",
        excludeComponents: ["toolbox "]
      });
      this.$refs.deviationImg.src = this.$refs.deviationChart.getDataURL({
        backgroundColor: "#fff",
        excludeComponents: ["toolbox "]
      });
      this.$refs.distanceImg.src = this.$refs.distanceChart.getDataURL({
        backgroundColor: "#fff",
        excludeComponents: ["toolbox "]
      });
      this.$refs.callbackImg.src = this.$refs.callbackChart.getDataURL({
        backgroundColor: "#fff",
        excludeComponents: ["toolbox "]
      });

      this.showImg = true;
      this.$nextTick(() => {
        this.toExport();
      });
    });
  },
  methods: {
    async toExport() {
      let fetchAll = [];
      this.$el.childNodes.forEach(item => {
        fetchAll.push(
          html2canvas(item, {
            allowTaint: true
          })
        );
      });
      const canvasList = await Promise.all(fetchAll).catch(() => {});
      const contents = canvasList
        .filter(canvas => canvas)
        .map(canvas => canvas.toDataURL().split(",")[1]);

      if (!contents.length) {
        this.$emit("on-exported", false);
        return;
      }

      let result = true;
      const user = this.$ls.get("user", { token: "", id: "" });
      await download({
        type: "post",
        url: `${this.GLOBAL.domain}/api/exportPdf`,
        header: { Authorization: user.token, userId: user.id },
        data: {
          content: contents
        },
        fileName: `${this.pageInfo.subjectName}-${this.pageInfo.areaName}-阅卷质量分析.pdf`
      }).catch(() => {
        result = false;
      });

      this.$emit("on-exported", result);
    }
  }
};
</script>