pbl-teacher-table/src/components/pages/components/exportWorksDialog.vue

<template>
  <div class="pbl">
    <div class="pdfCon" ref="reportPdf" v-loading="loading">
      <div
        class="coverPage"
        :style="{
          backgroundColor: '#FFFBDC'
        }"
      >
        <div class="coverPageLogo">
          <img
            style="height: 50px;"
            :src="schoolImg.logo ? schoolImg.logo : ''"
            alt=""
          />
        </div>
        <div class="coverPageFrom" style="z-index: 10;">
          <div class="coverPageFromTit">{{ worksDialogCon2.course }}</div>

          <div
            style="
                    font-size: 32px;
                    font-weight: 600;
                    color:rgba(176, 123, 0, 1);
                    margin: 20px 0;
                  "
          >
            作业集
          </div>
          <div class="termC">
            <div><span>2023-2024</span>学年</div>
            <div style="width: 20px;"></div>
            <div>第<span>2</span>学期</div>
          </div>
          <div class="fromCss">
            <div>
              <span>姓名:</span>
              <div class="txt">{{ worksDialogCon2.sName }}</div>
            </div>
            <div>
              <span>班级:</span>
              <div class="txt">
                {{ worksDialogCon2.class ? worksDialogCon2.class : "——" }}
              </div>
            </div>
            <div>
              <span>学校:</span>
              <div class="txt">{{ worksDialogCon2.schName }}</div>
            </div>
            <div>
              <span>指导老师:</span>
              <div class="txt">
                <div style="transform: translate(-1em, 0px);">
                  {{ worksDialogCon2.uname }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="coverPageFrom">
          <img
            style="z-index: 10;width: 70%;transform: translate(0px, -45px);"
            src="../../../assets/icon/exportPdfworks/ropt.svg"
            alt=""
          />
        </div>
      </div>

      <div
        class="coverPageCon"
        :style="{
          backgroundColor: '#FFFBDC'
        }"
      >
        <div
          style="
                  font-size: 24px;
                  font-weight: 600;
                  color: rgba(92, 80, 70, 1);
                  margin: 35px 0 20px;
                "
        >
          {{ worksDialogCon2.course }}
        </div>
        <div
          v-for="i in workList"
          :key="i.id"
          v-if="isStage(i.taskList)"
          class="stageCon"
        >
          <div v-if="CState != 5 && CState != 6" class="stageTit">
            第{{ i.id * 1 + 1 }}阶段<span v-if="i.name">:{{ i.name }}</span>
          </div>
          <div
            v-for="k in i.taskList"
            :key="k.task + 'a'"
            style="margin-bottom: 15px"
            v-if="isTask(k.toolEList)"
          >
            <div
              style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;
                  "
            >
              <div class="taskTitInd">
                <span>任务{{ k.task + 1 }}</span>
                <span>{{ k.taskTit }}</span>
              </div>
              <div>
                <!-- <span class="toolTit">文档工具</span> -->
              </div>
            </div>
            <div v-if="k.taskDetail" class="taskBri">
              <div v-html="k.taskDetail"></div>
            </div>
            <div
              class="WorksCon"
              v-for="(l, lind) in k.toolEList"
              :key="lind + 'l'"
            >
              <div v-if="l.content && l.content.length">
                <div v-if="l.tool[0] == 15">
                  <div class="toolBlk">
                    <img
                      src="../../../assets/icon/thirdToolList/answer.png"
                      alt=""
                    />
                    <div class="toolTit">
                      <div>工具{{ lind + 1 }}：问答工具</div>
                      <div>提问：{{ l.content[0][0].answerTitle }}</div>
                    </div>
                  </div>
                  <div class="answerTxt">回答:{{ l.content[0][0].answer }}</div>
                </div>
                <div v-if="l.tool[0] == 52">
                  <div class="toolBlk">
                    <img
                      src="../../../assets/icon/fourthToolList/text.png"
                      alt=""
                    />
                    <div class="toolTit">
                      <div>工具{{ lind + 1 }}：文档工具</div>
                      <div>
                        根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                      </div>
                    </div>
                  </div>
                  <div class="answerTxt" v-html="l.content[0].text"></div>
                </div>
                <div v-if="l.tool[0] == 16 || l.tool[0] == 50">
                  <div class="toolBlk">
                    <img
                      v-if="l.tool[0] == 16"
                      src="../../../assets/icon/thirdToolList/work.png"
                      alt=""
                    />
                    <img
                      v-if="l.tool[0] == 50"
                      src="../../../assets/icon/thirdToolList/plwork.png"
                      alt=""
                    />

                    <div class="toolTit">
                      <div>
                        工具{{ lind + 1 }}：{{
                          l.tool[0] == 16 ? "作业提交" : "批量上传"
                        }}
                      </div>
                      <div>
                        根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                      </div>
                    </div>
                  </div>
                  <div v-for="(i, codex) in l.content" :key="codex + 'co'">
                    <div class="answerTxt" v-html="i"></div>
                  </div>
                </div>
                <div v-if="l.tool[0] == 7 || l.tool[0] == 1 || l.tool[0] == 3">
                  <div class="toolBlk">
                    <img
                      v-if="l.tool[0] == 1"
                      src="../../../assets/icon/secondToolList/whiteBoard.png"
                      alt=""
                    />
                    <img
                      v-if="l.tool[0] == 3"
                      src="../../../assets/icon/secondToolList/mindMapping.png"
                      alt=""
                    />
                    <img
                      v-if="l.tool[0] == 7"
                      src="../../../assets/icon/secondToolList/mindNetwork.png"
                      alt=""
                    />

                    <div class="toolTit">
                      <div>
                        工具{{ lind + 1 }}：{{
                          l.tool[0] == 1
                            ? "电子白板"
                            : l.tool[0] == 7
                            ? "思维网格"
                            : "思维导图"
                        }}
                      </div>
                      <div>
                        根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                      </div>
                    </div>
                  </div>
                  <img style="max-width: 200px" :src="l.content[0]" alt="" />
                  <div>{{ l.content[0] }}</div>
                </div>
                <div v-if="l.tool[0] == 48">
                  <div class="toolBlk">
                    <img
                      src="../../../assets/icon/fourthToolList/table.png"
                      alt=""
                    />
                    <div class="toolTit">
                      <div>工具{{ lind + 1 }}：表格</div>
                      <div>
                        根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                      </div>
                    </div>
                  </div>
                  <el-form>
                    <div class="cont" v-html="l.content[0].text"></div>
                  </el-form>
                </div>
                <div v-if="l.tool[0] == 4">
                  <div class="toolBlk">
                    <img
                      src="../../../assets/icon/thirdToolList/ask.png"
                      alt=""
                    />
                    <div class="toolTit">
                      <div>工具{{ lind + 1 }}：问卷调查</div>
                      <div>标题:{{ l.content[0][0].askJson.askTitle }}</div>
                    </div>
                  </div>

                  <div
                    style="margin-bottom: 5px"
                    v-for="(i, index) in l.content[0][0].askJson.askJson"
                    :key="index"
                  >
                    <div>题目：{{ i.askstitle }}</div>
                    <el-radio-group
                      v-if="!i.type"
                      v-model="l.content[0][0].anwer[index]"
                    >
                      <el-radio
                        v-for="(item2, checkIndex) in i.checkList"
                        :key="checkIndex + 'b'"
                        :label="checkIndex"
                        disabled
                      >
                        {{ item2 }}
                      </el-radio>
                    </el-radio-group>
                    <el-checkbox-group
                      v-model="l.content[0][0].anwer[index]"
                      v-else
                    >
                      <div class="radioBox">
                        <el-checkbox
                          v-for="(item2, checkIndex) in i.checkList"
                          :key="checkIndex + 'c'"
                          :label="checkIndex"
                          disabled
                        >
                          {{ item2 }}
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                </div>
                <div v-if="l.tool[0] == 45">
                  <div class="toolBlk">
                    <img
                      src="../../../assets/icon/thirdToolList/choose.png"
                      alt=""
                    />
                    <div class="toolTit">
                      <div>工具{{ lind + 1 }}：选择题</div>
                      <div>
                        根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                      </div>
                    </div>
                  </div>
                  <div
                    v-for="(i, index) in l.content[0].testJson"
                    :key="index + 'm'"
                  >
                    <div>
                      题目:{{ i.teststitle }}
                      <span
                        v-if="
                          JSON.stringify(l.content[0].radio[index]) ==
                            JSON.stringify(i.answer)
                        "
                        style="color: #868ce4"
                        >回答正确</span
                      >
                      <span v-else style="color: red">回答错误</span>
                    </div>
                    <div
                      v-if="i.type == 1"
                      style="display: flex; flex-direction: column"
                    >
                      <el-radio-group v-model="l.content[0].radio[index]">
                        <div class="radioBox">
                          <el-radio
                            v-for="(item2, checkIndex) in i.checkList"
                            :key="checkIndex + 'b'"
                            :label="checkIndex"
                            disabled
                            :class="[
                              i.answer == checkIndex
                                ? 'redioStyle5'
                                : 'redioStyle2'
                            ]"
                          >
                            <div
                              v-if="
                                item2 && item2.imgType && item2.imgType == 1
                              "
                            >
                              <div
                                class="inImg"
                                @click.stop="previewImg(item2.src)"
                              >
                                <img
                                  style="display: block"
                                  :src="item2.src"
                                  alt=""
                                />
                              </div>
                            </div>
                            <span v-else v-html="item2"></span>
                          </el-radio>
                        </div>
                      </el-radio-group>
                    </div>
                    <div class="radioBox">
                      <el-checkbox-group
                        v-model="l.content[0].radio[index]"
                        v-if="i.type == '2'"
                      >
                        <div class="radioBox">
                          <el-checkbox
                            v-for="(item2, checkIndex) in i.checkList"
                            :key="checkIndex + 'c'"
                            :label="checkIndex"
                            disabled
                            :class="[
                              i.answer.includes(checkIndex)
                                ? 'redioStyle3'
                                : 'redioStyle4'
                            ]"
                          >
                            <div style="display: flex">
                              <div
                                v-if="
                                  item2 && item2.imgType && item2.imgType == 1
                                "
                              >
                                <div
                                  class="inImg"
                                  @click.stop="previewImg(item2.src)"
                                >
                                  <img
                                    style="display: block"
                                    :src="item2.src"
                                    alt=""
                                  />
                                </div>
                              </div>
                              <span v-else v-html="item2"></span>
                            </div>
                          </el-checkbox>
                        </div>
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
                <!-- 选择匹配 -->
                <div v-if="l.tool[0] == 41">
                  <div class="toolBlk">
                    <img
                      class="toolImg"
                      src="../../../assets/icon/thirdToolList/select.png"
                      alt=""
                    />
                    <div class="toolTit">
                      <div>工具{{ lind + 1 }}：选择匹配</div>
                      <div>
                        根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                      </div>
                    </div>
                  </div>
                  <img
                    @click.stop="previewImg(l.selectJson.url)"
                    style="max-width: 200px"
                    :src="l.selectJson.url"
                    alt=""
                  />
                  <div>
                    <span style="margin-right: 10px">选项:</span
                    ><span
                      style="margin-right: 10px"
                      v-for="(item, itInd) in l.selectJson.select"
                      :key="itInd"
                      >{{ item }}</span
                    >
                  </div>
                  <div style="margin: 10px 0;">
                    <span style="margin-right: 10px">回答:</span>

                    <div
                      style="margin-right: 10px"
                      v-for="(item, itInd) in l.content[0]"
                      :key="itInd"
                    >
                      选项{{ itInd + 1 }}：{{ l.selectJson.select[item] }}
                      <span
                        v-if="l.selectJson.answer[itInd] == l.content[0][itInd]"
                        style="color: #868ce4"
                        >回答正确</span
                      >
                      <span v-else style="color: red">回答错误</span>
                    </div>
                  </div>
                  <div>
                    <span style="margin-right: 10px">答案:</span>

                    <span
                      style="margin-right: 10px"
                      v-for="(item, itInd) in l.selectJson.answer"
                      :key="itInd"
                      >选项{{ itInd + 1 }}：{{
                        l.selectJson.select[item]
                      }}</span
                    >
                  </div>
                </div>
                <!-- <div v-if="l.tool[0] == 41">
                    <div class="toolBlk">
                      <img
                        src="../../../assets/icon/thirdToolList/select.png"
                        alt=""
                      />
                      <div class="toolTit">
                        <div>工具{{ lind + 1 }}：选择匹配</div>
                        <div>
                          根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                        </div>
                      </div>
                    </div>
                    <img
                      @click.stop="previewImg(l.selectJson.url)"
                      style="max-width: 200px"
                      :src="l.selectJson.url"
                      alt=""
                    />
                    <div>
                      <span style="margin-right: 10px">选项:</span
                      ><span
                        style="margin-right: 10px"
                        v-for="(item, itInd) in l.selectJson.select"
                        :key="itInd"
                        >{{ item }}</span
                      >
                    </div>
                    <div>
                      <span style="margin-right: 10px">学生回答:</span>
                      <span
                        style="margin-right: 10px"
                        v-for="(item, itInd) in l.content[0]"
                        :key="itInd"
                        >{{ itInd + 1 }}、{{ l.selectJson.select[item] }}</span
                      >
                    </div>
                  </div> -->

                <!-- 排序 -->
                <div v-if="l.tool[0] == 47">
                  <div class="toolBlk">
                    <img
                      src="../../../assets/icon/fourthToolList/conSentences.png"
                      alt=""
                    />
                    <div class="toolTit">
                      <div>工具{{ lind + 1 }}：排序</div>
                      <div>
                        根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                      </div>
                    </div>
                  </div>
                  <div
                    v-for="(i, index) in l.content[0]"
                    :key="index"
                    style="margin-bottom: 10px"
                  >
                    <div
                      style="
                            height: 20px;
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                          "
                    >
                      题目:
                      <div
                        class="sortTool"
                        v-for="(i, index) in i.addSentence"
                        :key="index"
                      >
                        {{ i }}
                      </div>
                      <span
                        v-if="
                          JSON.stringify(i.chooseSenList) ==
                            JSON.stringify(i.addSentence)
                        "
                        style="color: #868ce4"
                        >回答正确</span
                      >
                      <span v-else style="color: red">回答错误</span>
                    </div>
                    <div
                      style="
                            margin: 10px 0;
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                          "
                    >
                      学生回答:
                      <div
                        class="sortTool"
                        v-for="(i, index) in i.chooseSenList"
                        :key="index"
                      >
                        {{ i }}
                      </div>
                    </div>
                    <div>
                      答案:
                      <span style="margin: 0 5px">{{
                        i.addSentence.join(",")
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- ai作业得分  -->
              <div
                v-if="
                  l.content &&
                    l.content.length &&
                    l.eList &&
                    l.eList.length &&
                    (CState == 5 || CState == 6)
                "
                class="taskSco"
              >
                <div class="taskScoTit">
                  <div>
                    作业得分：<span style="color: rgba(242, 161, 75, 1)">{{
                      totalScore(l.rate)
                    }}</span>
                    分
                  </div>
                  <div>作业提交时间：{{ workTime(k.toolEList) }}</div>
                </div>

                <!-- 作业评分 -->
                <div class="taskScoCon">
                  <!-- 分数详情与素养 -->
                  <div style="flex: 1; display: flex; flex-wrap: wrap">
                    <div style="width: 315px; margin:0 20px 10px 0">
                      <div class="taskScoConTit">分数详情</div>
                      <div
                        v-for="(wItem, ind) in l.eList"
                        :key="ind + 's'"
                        class="score_box"
                        style="width: 100%"
                      >
                        <div
                          style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                width: 100%;
                                min-width: 48%;
                              "
                        >
                          <div class="RootImgBlock">
                            {{ wItem.detail }}
                          </div>

                          <el-rate
                            class="rate_size"
                            disabled-void-color="#ccc"
                            disabled
                            style="width: 130px"
                            v-model="l.rate[wItem.detail]"
                          ></el-rate>
                        </div>
                      </div>
                    </div>

                    <div style="flex: 1">
                      <div class="taskScoConTit">素养</div>
                      <div class="WorkConSY">
                        <div v-for="(wItem, ind) in l.eList" :key="ind + 's'">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            :content="wItem.detail"
                            placement="top-start"
                          >
                            <div class="RootImgBlockSy">
                              {{ wItem.target }}
                            </div>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 评语 -->
                  <div
                    style="
                          flex: 1;
                          flex-shrink: 0;
                          display: flex;
                          flex-direction: column;
                          margin-left: 10px;
                        "
                    v-if="l.rate.content"
                  >
                    <div class="taskScoConTit">评语</div>
                    <div class="WorkCon">
                      {{ l.rate.content }}
                    </div>
                  </div>
                </div>
              </div>

              <!-- 阶段  -->
              <div
                v-if="
                  l.eList &&
                    l.eList.length &&
                    CState != 5 &&
                    CState != 6 &&
                    lind == k.toolEList.length - 1
                "
                class="taskSco"
              >
                <div class="taskScoTit">
                  <div>
                    作业得分：<span style="color: rgba(242, 161, 75, 1)">{{
                      totalScore(k.toolEList[0].rate)
                    }}</span>
                    分
                  </div>
                  <div>作业提交时间：{{ workTime(k.toolEList) }}</div>
                </div>

                <!-- 作业评分 -->
                <div class="taskScoCon">
                  <!-- 分数详情与素养 -->
                  <div style="flex: 1; display: flex; flex-wrap: wrap">
                    <div style="width: 315px; margin:0 20px 10px 0">
                      <div class="taskScoConTit">分数详情</div>
                      <div
                        v-for="(wItem, ind) in l.eList"
                        :key="ind + 's'"
                        class="score_box"
                        style="width: 100%"
                      >
                        <div
                          style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                width: 100%;
                                min-width: 48%;
                              "
                        >
                          <div class="RootImgBlock">
                            {{ wItem.value }}
                          </div>

                          <el-rate
                            class="rate_size"
                            disabled-void-color="#ccc"
                            disabled
                            style="width: 130px"
                            v-model="k.toolEList[0].rate[wItem.value]"
                          ></el-rate>
                        </div>
                      </div>
                    </div>

                    <div style="flex: 1">
                      <div class="taskScoConTit">素养</div>
                      <div class="WorkConSY">
                        <div v-for="(wItem, ind) in l.eList" :key="ind + 's'">
                          <!-- <el-tooltip
                            class="item"
                            effect="dark"
                            :content="wItem.target[wItem.target.length - 1]"
                            placement="top-start"
                          > -->
                          <div class="RootImgBlockSy">
                            <span v-if="wItem.target && wItem.target.length">
                              {{ wItem.target[wItem.target.length - 1] }}</span
                            >
                            <span v-else> {{ wItem.target }}</span>
                          </div>
                          <!-- </el-tooltip> -->
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 评语 -->
                  <div
                    style="
                          flex: 1;
                          flex-shrink: 0;
                          display: flex;
                          flex-direction: column;
                          margin-left: 10px;
                        "
                    v-if="l.rate.content"
                  >
                    <div class="taskScoConTit">评语</div>
                    <div class="WorkCon">
                      {{ l.rate.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 思维导图 -->
            <div v-if="CState == 5 || CState == 6" class="taskTitInd">
              <div></div>
              <span>任务评价体系</span>
            </div>
            <exjsmind
              v-if="CState == 5 || CState == 6"
              :treeData="k.treeData"
              :keyL="k.task.toString()"
            ></exjsmind>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end;width: 100%;">
          <img :src="schoolImg.bjLogo ? schoolImg.bjLogo : ''" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import jspdf from "jspdf";
import JSZip from "jszip";
import exjsmind from "./exjsmind";

export default {
  props: [
    "uid",
    "cid",
    "worksDialog",
    "worksDialogCon",
    "digNum",
    "multipleSelection"
  ],
  components: {
    exjsmind
  },
  data() {
    return {
      workList: [],
      dyList: [],
      workEvaList: "",
      elist: [],
      CState: 0,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      uid2: this.uid,
      worksDialogCon2: this.worksDialogCon,
      courseName: "",
      loading: false,
      tableData: [],
      imgList: [
        {
          schoolId: "45facc0a-1211-11ec-80ad-005056b86db5",
          logo: require("../../../assets/icon/exportPdfworks/cocoroboLogo.svg"),
          conImg: require("../../../assets/icon/exportPdfworks/cocoroboCon.svg"),
          bjLogo: require("../../../assets/icon/exportPdfworks/logo2.svg"),
          bkColor: "#FFFBDC"
        }
      ],
      schoolImg: {}
    };
  },

  mounted() {
    if (this.digNum == 0) {
      this.downPdf();
    } else if (this.digNum == 1) {
      this.getWorks1();
    } else {
      this.batchPdf();
    }
  },
  computed: {
    isStage() {
      return function(val) {
        let isShow = false;

        val.forEach(e => {
          e.toolEList.forEach(i => {
            if (i.content.length) {
              isShow = true;
            }
          });
        });

        return isShow;
      };
    },
    isTask() {
      return function(val) {
        let isShow = false;

        val.forEach(e => {
          if (e.content.length) {
            isShow = true;
          }
        });

        return isShow;
      };
    },
    totalScore() {
      return function(val) {
        let valT = JSON.parse(JSON.stringify(val));

        if (!valT) return "0.0";

        delete valT.content;
        delete valT.comment;
        console.log("valT", JSON.parse(JSON.stringify(val)));

        let data = Object.values(valT);
        console.log("data", JSON.parse(JSON.stringify(data)));

        let new1 = data.reduce(function(pre, next, index) {
          return pre + next * 1;
        });

        if (new1 == 0) return "0.0";

        return (new1 / data.length).toFixed(1);
      };
    },
    workTime() {
      return function(val) {
        if (!val.length) return "";
        let TimeList = [];
        val.forEach(e => {
          if (e.time) {
            const timestamp = new Date(e.time).getTime();
            TimeList.push(timestamp);
          }
        });

        console.log("TimeList", TimeList);
        TimeList.sort(function(a, b) {
          return a - b; //从小到大排序
        });

        return this.convertToTimestamp(TimeList[0]);
      };
    }
  },

  methods: {
    // 时间戳转时间
    convertToTimestamp(val) {
      const date = new Date(val);

      // 使用Date对象的方法获取年、月、日、时、分、秒
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      // 格式化后的日期时间字符串
      const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDateTime;
    },
    // 下载pdf文件
    getPdf() {
      const content = this.$refs.reportPdf;
      const dpi = 300;
      html2canvas(content, {
        dpi: dpi, // 设置截图的分辨率
        scale: dpi / 96 // 设置截图缩放比例，以适应pdf的dpi
      }).then(canvas => {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;

        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = (592.28 / contentWidth) * contentHeight;

        var imgData = canvas.toDataURL("image/jpeg", 1.0);

        const pdf = new jspdf("p", "pt", [imgWidth, imgHeight]);

        pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
        pdf.save(
          this.worksDialogCon2.course +
            "-作业集-" +
            this.worksDialogCon2.sName +
            ".pdf"
        );
      });
    },

    // 压缩pdf
    async getPdf2() {
      const content = this.$refs.reportPdf;

      return new Promise((resolve, reject) => {
        const dpi = 300;
        html2canvas(content, {
          dpi: dpi, // 设置截图的分辨率
          scale: dpi / 96 // 设置截图缩放比例，以适应pdf的dpi
        })
          .then(canvas => {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;

            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = (592.28 / contentWidth) * contentHeight;

            var imgData = canvas.toDataURL("image/jpeg", 1.0);

            const pdf = new jspdf("p", "pt", [imgWidth, imgHeight]);

            pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
            var pdfData = {
              pdfName:
                this.worksDialogCon2.course +
                "-作业集-" +
                this.worksDialogCon2.sName +
                ".pdf",
              pdfCon: pdf.output("blob")
            };
            // pdfArray.push(pdfData);

            return resolve(pdfData);
          })
          .catch(err => {
            console.log(err);
          });
      });
    },

    // 图片放大查看
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    // 获取处理作业信息
    async exportPdfSet(uid, con) {
      let params = {
        uid: this.uid2,
        cid: this.cid
      };
      return new Promise((resolve, reject) => {
        this.ajax
          .get(this.$store.state.api + "selectAllWorksDetail", params)
          .then(res => {
            var worksDetail = res.data[1];
            var askInfo = res.data[3]; //问卷
            var answerInfo = res.data[4]; //问答题
            var pptInfo = res.data[5];
            var chooseInfo = res.data[6]; //选择题
            var pjInfo = res.data[7]; //个人评价作业
            var xztkInfo = res.data[8]; //选择匹配作业
            var lccjInfo = res.data[9]; //排序作业
            var bgInfo = res.data[10]; //表格作业
            var cocopiInfo = res.data[11]; //cocopi或源码编辑作业
            var wordInfo = res.data[12]; //文档作业
            this.workEvaList = res.data[13];

            let framework = [];
            if (res.data[0].length) {
              let elistData = JSON.parse(res.data[0][0].chapters);
              console.log("elistData", JSON.parse(JSON.stringify(elistData)));

              elistData.forEach((e, i) => {
                framework[i] = {
                  id: i,
                  name: e.dyName ? e.dyName : "",
                  taskList: []
                };
                e.chapterInfo[0].taskJson.forEach((k, kin) => {
                  if (k.eList && k.eList.length) {
                    k.toolChoose.forEach(y => {
                      y.eList = k.eList;
                    });
                  }
                  framework[i].taskList.push({
                    stage: i,
                    task: kin,
                    taskTit: k.task ? k.task : "",
                    taskDetail: k.taskDetail,
                    toolEList: k.toolChoose,
                    treeData: {
                      id: "0",
                      topic: k.task ? k.task : "任务" + i,
                      children: []
                    }
                  });
                });
              });
            }

            res.data[3].forEach(e => {
              e.content = JSON.parse(e.content);
            });
            res.data[4].forEach(e => {
              e.content = JSON.parse(e.content);
            });

            res.data[6].forEach((k, i) => {
              const element1 = JSON.parse(k.content)[0];

              let t = JSON.parse(k.content)[0].testJson;

              // 处理学生选择答案
              let e = [];
              t.testJson.forEach((i, y) => {
                e.push(element1.anwer[y]);
              });
              t.radio = e;

              // 处理选项

              k.content = t;
            });
            res.data[8].forEach((k, i) => {
              k.content = k.content.split(",");
            });
            res.data[9].forEach(e => {
              e.content = JSON.parse(e.content);
            });

            res.data[12].forEach(e => {
              e.content = JSON.parse(e.content);
            });
            res.data[10].forEach(e => {
              e.content = JSON.parse(e.content);
            });

            let AreaAllWork = [
              ...res.data[1],
              ...res.data[3],
              ...res.data[4],
              ...res.data[5],
              ...res.data[6],
              ...res.data[7],
              ...res.data[8],
              ...res.data[9],
              ...res.data[10],
              ...res.data[11],
              ...res.data[12]
            ];

            AreaAllWork.sort(function(a, b) {
              return a.stage - b.stage; //从小到大排序
            });
            // console.log("AreaAllWork", JSON.parse(JSON.stringify(AreaAllWork)));

            framework.forEach(e => {
              e.taskList.forEach((k, kin) => {
                k.toolEList.forEach((l, lIndex) => {
                  l.content = [];
                  l.rate = "";
                  l.time = "";
                  AreaAllWork.forEach((i, index) => {
                    i.tool = i.tool ? i.tool : 0;

                    if (
                      k.stage == i.stage &&
                      k.task == i.task &&
                      lIndex == i.tool
                    ) {
                      l.content.push(i.content);
                      l.time = i.tTime;
                    }
                  });

                  // 分数循环
                  this.workEvaList.forEach(p => {
                    p.tool = p.tool ? p.tool : 0;
                    if (
                      k.stage == p.stage &&
                      k.task == p.task &&
                      lIndex == p.tool
                    ) {
                      let rateCopy = JSON.parse(p.rate);
                      for (const key in rateCopy) {
                        if (key != "content" && key != "") {
                          rateCopy[key] = rateCopy[key] * 1;
                        }
                      }
                      l.rate = rateCopy;
                    }
                  });
                  // 将没有提交作业,但是有评分标准的数据填上数据,防止报错
                  if (
                    !l.rate &&
                    l.eList &&
                    l.eList.length &&
                    (this.CState == 5 || this.CState == 6)
                  ) {
                    l.rate = { content: "" };
                    l.eList.forEach(elp => {
                      l.rate[elp.detail] = 0;
                    });
                  } else if (
                    !l.rate &&
                    l.eList &&
                    l.eList.length &&
                    this.CState != 5 &&
                    this.CState != 6
                  ) {
                    l.rate = { content: "" };
                    l.eList.forEach(elp => {
                      l.rate[elp.value] = 0;
                    });
                  }
                  // 将素养添加进treeData中
                  if (l.eList && l.eList.length) {
                    l.eList.forEach((itemE, itemEInd) => {
                      let arr6 = k.treeData.children.some(
                        item => item.topic == itemE.target
                      );
                      if (!arr6) {
                        k.treeData.children.push({
                          id: kin + "+" + lIndex + "+" + itemEInd,
                          topic: itemE.target,
                          children: []
                        });
                      }
                    });
                  }
                });
              });
            });
            framework.forEach(e => {
              e.taskList.forEach((k, kind) => {
                k.treeData.children.forEach(l => {
                  k.toolEList.forEach((el, elind) => {
                    if (el.eList) {
                      el.eList.forEach((st, stind) => {
                        // console.log(l.topic, st.target, l.topic == st.target);

                        if (l.topic == st.target) {
                          let res3 = l.children.filter(function(item, index) {
                            return item.topic == st.detail;
                          });

                          if (!res3.length) {
                            l.children.push({
                              id: kind + "+" + elind + "+" + stind + "c",
                              topic: st.detail,
                              children: [
                                {
                                  id: kind + "+" + elind + "+" + stind + "b",
                                  topic: `工具${elind * 1 + 1}`
                                }
                              ]
                            });
                          } else {
                            l.children.forEach(lc => {
                              if (lc.topic == st.detail) {
                                lc.children.push({
                                  id: kind + "+" + elind + "+" + stind + "b",
                                  topic: `工具${elind * 1 + 1}`
                                });
                              }
                            });
                          }
                        }
                      });
                    }
                  });
                });
              });
            });

            console.log("framework", JSON.parse(JSON.stringify(framework)));

            this.Kloading = false;

            this.loading = false;
            this.workList = framework;

            setTimeout(() => {
              return resolve();
            }, 1500);
          })
          .catch(err => {
            console.error(err);
          });
      });
    },
    // 获取作业阶段人物信息
    getCourseDetail() {
      this.loading = true;
      let params = {
        cid: this.cid,
        choseClass: ""
      };
      return new Promise((resolve, reject) => {
        this.ajax
          .get(this.$store.state.api + "getCourseWorksReport2", params) //getCourseWorksReport
          .then(res => {
            this.CState = res.data[0][0].state;

            this.worksDialogCon2.uname = res.data[0][0].username;

            // let dyList = [];
            // for (var i = 0; i < dyJSON.length; i++) {
            //   dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
            //   var a = dyJSON[i].chapterInfo[0].taskJson;
            //   for (var j = 0; j < a.length; j++) {
            //     dyList[i].taskList.push({ name: a[j].task, id: j });
            //   }
            // }
            // this.dyList = dyList;

            this.imgList.forEach(e => {
              if (e.schoolId == this.oid) {
                this.schoolImg = e;
              }
            });

            return resolve();
          })
          .catch(err => {
            console.error(err);
          });
      });
    },

    // 一键打包所有作业
    async circulatePdf() {
      let _this = this;
      var zip = new JSZip();
      let pdfList = [];
      for (let i = 0; i < this.tableData.length; i++) {
        this.uid2 = this.tableData[i].userid;
        this.worksDialogCon2 = this.tableData[i];
        await this.getCourseDetail();
        await this.exportPdfSet();

        let a = await this.getPdf2();
        pdfList.push(a);
      }

      pdfList.forEach((e, index) => {
        zip.file(e.pdfName, e.pdfCon);
      });

      // 生成压缩包并提供下载链接
      zip.generateAsync({ type: "blob" }).then(function(content) {
        // 使用FileSaver保存压缩包
        saveAs(content, _this.courseName + "-作业集汇总.zip");
      });

      this.$emit("update:worksDialog", false);
      // this.worksDialog = false;
    },
    handleClose(done) {
      done();
    },
    // 下载单个文件
    async downPdf() {
      await this.getCourseDetail();
      await this.exportPdfSet();
      this.getPdf();
    },

    // 获取所有作业然后一键打包压缩包
    getWorks1() {
      this.loading = true;

      let params = {
        cid: this.cid,
        uname: "",
        choseClass: "",
        stage: "",
        task: ""
      };

      this.ajax
        .get(this.$store.state.api + "getCourseWorks6", params) //getCourseWorks4
        .then(res => {
          // this.isLoading = false;
          // this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
          if (!this.tableData.length) {
            this.loading = false;

            return this.$message.info("课程下未有提交作业");
          }
          this.courseName = this.tableData[0].course;
          this.circulatePdf();
          // console.log(res.data[0]);
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
    },
    // 批量导出作业
    batchPdf() {
      this.loading = true;
      this.tableData = JSON.parse(JSON.stringify(this.multipleSelection));
      this.courseName = this.tableData[0].course;
      this.circulatePdf();
    }
  }
};
</script>

<style scoped>
.pbl {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* padding: 20px;
  padding-top: 10px; */
  overflow: auto;
  border-radius: 10px;
  font-family: PingFang SC;
  position: relative;
}
.pdfCon {
  width: 220mm;
  margin: auto;
  position: relative;
}
.pageTit {
  width: 100%;
  text-align: left;
  font-size: 28px;
  padding: 10px 0;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.full_diy {
  min-width: 1200px !important;
}
.full_diy >>> .el-dialog {
  height: 80%;
  margin-top: 10vh !important;
  display: flex;
  flex-direction: column;
}
.full_diy >>> .el-dialog__body {
  overflow: auto;
  flex: 1;
  padding: 0 !important;
}
.full_diy >>> .el-dialog__title {
  color: #fff !important;
}
.full_diy >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.coverPage {
  /* height: 840pt; */
  padding: 150px 8% 0;
  background-color: #ccc;
  box-sizing: border-box;
  position: relative;
  background-image: url("../../../assets/icon/exportPdfworks/bcg1.svg"),
    url("../../../assets/icon/exportPdfworks/bcg2.svg");
  /* 设置每个背景的位置和尺寸，可以使用关键字或者具体的像素值，用逗号分隔 */
  background-position: top left, bottom;
  background-size: 225px, contain;

  /* 设置每个背景图片的重复方式，用逗号分隔 */
  background-repeat: no-repeat, no-repeat;
}
.coverPageLogo {
  /* padding: 40px;
  height: 120px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-bottom: 45px; */
  position: absolute;
  top: 30px;
  right: 6%;
}
.coverPageFrom {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
  margin: 0 auto;
}
.coverPageFromTit {
  font-size: 60px;
  color: rgba(92, 80, 70, 1);
  font-weight: 600;
  text-align: center;
}
.fromCss {
  border: 1.5px dashed rgba(158, 208, 255, 1);
  border-radius: 16px;
  background-color: #fff;
  padding: 40px 32px;
  width: 77%;
  font-family: PingFang SC;
  margin: 8px 0;
  color: rgba(35, 99, 205, 1);
}
.fromCss > div {
  margin-bottom: 28px;
  display: flex;
}
.fromCss > div > span {
  flex-shrink: 0;
  margin-right: 5px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(92, 80, 70, 1);
}
.fromCss > div:last-child {
  margin-bottom: 0;
}
.txt {
  width: 100%;
  border-bottom: 1px solid rgba(192, 210, 229, 1);
  text-align: center;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.coverPageCon {
  background-color: #e3edfe;
  display: flex;
  flex-direction: column;
  padding: 0 60px;
  padding-bottom: 100px;
  box-sizing: border-box;
  font-family: PingFang SC;
}
.stageCon {
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 8px;
  width: 100%;
}

.a_addBox {
  margin: 10px 0;
  background: #fff;
  padding: 0 15px;
  /* max-height: 400px; */
  /* max-height: 160px; */
  /* overflow: auto; */
}
.redioStyle >>> .el-radio__label {
  font-size: 18px;
}

.redioStyle5 >>> .el-radio__label {
  font-size: 14px;
  color: #06a7ff !important;
}
.redioStyle2 >>> .el-radio__label {
  font-size: 14px;
}

.redioStyle3 >>> .el-checkbox__label {
  font-size: 14px;
  color: #06a7ff !important;
}
.redioStyle4 >>> .el-checkbox__label {
  font-size: 14px;
}
.WorksCon >>> .el-checkbox-group {
  margin: 0 5px;
}
.sortTool {
  padding: 1px 3px;
  border: 2px #5d89c4 solid;
  margin: 0 5px;
  min-width: 20px;
  border-radius: 5px;
  text-align: center;
}
/* table 样式 */
.cont >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.cont >>> table td,
.cont >>> table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 15px 5px;
  max-width: 0px;
}

.cont >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}
.taskSco {
  background-color: rgba(243, 247, 253, 1);
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
  margin: 8px 0;
}
.score_boxTit > span {
  border-left: 3px solid rgba(54, 129, 252, 1);
  padding-left: 5px;
}
.score_boxTit {
  /* padding: 0 30px; */
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}
.inImg {
  width: 100px;
}
.inImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.radioBox {
  display: flex;
  flex-direction: column;
}
.WorksCon >>> .el-radio {
  display: flex;
  align-items: center;
  margin: 5px;
}
.WorksCon >>> .el-checkbox {
  display: flex;
  align-items: center;
  margin: 5px;
}
.RootImgBlock {
  width: 50%;
  white-space: wrap;
  /* overflow: hidden;
  text-overflow: ellipsis; */

  font-size: 12px;
}
.score_box {
  display: flex;
  align-items: center;
  font-size: 14px !important;
  /* justify-content: flex-start; */
  justify-content: space-between;
  margin-bottom: 15px;
  /* margin: 10px 0 0 30px; */
  width: 100%;
  margin: 5px 0;
  position: relative;
}
.score_box:last-child {
  margin-bottom: 0;
}
.worksTarget {
  border-left: 3px solid rgba(54, 129, 252, 1);
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}
.worksTarget > span {
  margin-left: 5px;
}
.worksTargetCon {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 12px;
}
.worksTargetCon > div {
  margin-bottom: 10px;
}
.worksTargetCon > div:last-child {
  margin: 0 !important;
}
.dialog_diy >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.worksDialogCSS >>> .el-dialog__header {
  /* padding: 9px 20px 10px; */
  background: #32455b !important;
}

.worksDialogCSS >>> .el-dialog__body {
  width: 643px !important;
}
.worksDialogCSS >>> .el-dialog {
  width: 683px !important;
}
.stageTit {
  text-align: left;
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 20px;
  color: rgba(242, 161, 75, 1);
  border-left: 5px rgba(242, 161, 75, 1) solid;
  padding-left: 5px;
}
.taskTitInd {
  font-size: 14px;
  display: flex;
  align-items: center;
}
.taskTitInd span:nth-child(1) {
  background-color: rgba(242, 161, 75, 1);
  color: #fff;
  padding: 3px 5px;
  border-radius: 4px;
  margin-right: 5px;
  box-sizing: border-box;
  font-size: 12px;
}
.taskTitInd div {
  background-color: rgba(242, 161, 75, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 10px;
}
.taskTitInd span:nth-child(2) {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 600;
}
.taskBri {
  background-color: rgba(253, 247, 243, 1);
  padding: 10px 12px;
  line-height: 20px;
  box-sizing: border-box;
  font-weight: PingFang SC;
  font-size: 12px;
  font-weight: 400;
  border-radius: 4px;
}
.toolBlk {
  display: flex;
  height: 44px;
  margin: 15px 0;
}
.toolBlk img {
  height: 100%;
  margin-right: 8px;
}
.toolTit {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.toolTit div:nth-child(1) {
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: rgba(0, 0, 0, 0.9);
  margin-right: 10px;
}
.toolTit div:nth-child(2) {
  font-family: PingFang SC;
  font-size: 11px;
  font-weight: 400;
  text-align: left;
  color: rgba(0, 0, 0, 0.9);
}
.answerTxt {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 400;
  line-height: 30px;
  padding: 0 10px;
}
.taskSco {
  background-color: rgba(253, 247, 243, 1);
  border-radius: 8px;
  padding: 10px 15px;
  box-sizing: border-box;
  margin: 8px 0;
  width: 100%;
}
.taskScoTit {
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
}
.taskScoTit div:nth-child(1) {
  color: rgba(0, 0, 0, 0.9);
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.taskScoTit div:nth-child(2) {
  color: rgba(0, 0, 0, 0.6);
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 400;
}
.taskScoCon {
  display: flex;
  justify-content: space-between;
}

.taskScoConTit {
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.9);
  border-left: 5px rgba(242, 161, 75, 1) solid;
  padding-left: 5px;
}
.WorkCon {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  font-family: PingFang SC;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  flex: 1;
}
.WorkConSY {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 400;
  flex: 1;
}
.WorkConSY div {
  margin-bottom: 8px;
}
.WorkConSY div:last-child {
  margin-bottom: 0;
}
.RootImgBlockSy {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
}
.termC {
  margin: 30px 0 45px;
  font-size: 18px;
  color: rgba(92, 80, 70, 1);
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}
.termC > div > span {
  color: rgba(176, 123, 0, 1);
  border-bottom: 2px solid rgba(242, 228, 213, 1);
  padding: 3px 10px;
  margin: 0 8px;
}
</style>