|
|
@@ -0,0 +1,1039 @@
|
|
|
+<template>
|
|
|
+ <div class="pbl">
|
|
|
+ <div ref="reportPdf" v-loading="loading">
|
|
|
+ <div
|
|
|
+ class="coverPage"
|
|
|
+ :style="{
|
|
|
+ backgroundColor: schoolImg.bkColor ? schoolImg.bkColor : '#E5EFFE'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="coverPageLogo">
|
|
|
+ <img :src="schoolImg.logo ? schoolImg.logo : '' " alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="coverPageFrom">
|
|
|
+ <div class="coverPageFromTit">{{ worksDialogCon.course }}</div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgba(54, 129, 252, 1);
|
|
|
+ margin: 20px 0;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 作业集
|
|
|
+ </div>
|
|
|
+ <div class="fromCss">
|
|
|
+ <div>
|
|
|
+ <span>姓名:</span>
|
|
|
+ <div class="txt">{{ worksDialogCon.sName }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>班级:</span>
|
|
|
+ <div class="txt">{{ worksDialogCon.class }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>学校:</span>
|
|
|
+ <div class="txt">{{ worksDialogCon.schName }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div>
|
|
|
+ <span>指导老师:</span>
|
|
|
+ <div class="txt"></div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="coverPageFrom">
|
|
|
+ <img :src="schoolImg.conImg ? schoolImg.conImg :'../../../assets/icon/exportPdfworks/cocoroboCon.svg'" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="coverPageCon">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgba(58, 59, 152, 1);
|
|
|
+ margin: 20px 0 10px 0;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 作业集
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="i.stageData.length"
|
|
|
+ v-for="i in workList"
|
|
|
+ :key="i.id"
|
|
|
+ class="stageCon"
|
|
|
+ >
|
|
|
+ <div style="text-align: center; font-weight: 600; font-size: 16px">
|
|
|
+ 第{{ i.id * 1 + 1 }}阶段<span v-if="i.name">:{{ i.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-for="k in i.taskList"
|
|
|
+ :key="k.id + 'a'"
|
|
|
+ style="margin-bottom: 15px"
|
|
|
+ >
|
|
|
+ <div v-if="k.taskData && k.taskData.length">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span class="taskTitInd">任务{{ k.id + 1 }}</span>
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0, 0, 0, 0.9);
|
|
|
+ "
|
|
|
+ >{{ k.name }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- <span class="toolTit">文档工具</span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="WorksCon" v-for="l in k.taskData" :key="l.id">
|
|
|
+ <!-- 截图图片 -->
|
|
|
+ <div v-if="l.type == 1">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit">截图工具</div>
|
|
|
+ </div>
|
|
|
+ <img style="max-width: 200px" :src="l.content" alt="" />
|
|
|
+ <div>{{ l.content }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 问卷 -->
|
|
|
+ <div v-if="l.type == 2">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit">问卷工具</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 标题:{{ l.content[0].askJson.askTitle }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="margin-bottom: 5px"
|
|
|
+ v-for="(i, index) in l.content[0].askJson.askJson"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div>题目：{{ i.askstitle }}</div>
|
|
|
+ <el-radio-group
|
|
|
+ v-if="!i.type"
|
|
|
+ v-model="l.content[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].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.type == 3">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit">问答工具</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 题目:{{ l.content[0].answerTitle }}
|
|
|
+ </div>
|
|
|
+ <div>回答:{{ l.content[0].answer }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- word文档类 -->
|
|
|
+ <div v-if="l.type == 4">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit">word工具</div>
|
|
|
+ </div>
|
|
|
+ <div>{{ l.content }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- 视频 -->
|
|
|
+ <div v-if="l.type == 5">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit">视频工具</div>
|
|
|
+ </div>
|
|
|
+ <div>{{ l.content }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 选择匹配工具 -->
|
|
|
+ <div v-if="l.type == 7">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit" style="width: 85px">
|
|
|
+ 选择匹配工具
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>{{ l.content }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 选择题工具 -->
|
|
|
+ <div v-if="l.type == 8">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit" style="width: 75px">选择题工具</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-for="(i, index) in l.content.testJson"
|
|
|
+ :key="index + 'm'"
|
|
|
+ >
|
|
|
+ <div>题目:{{ i.teststitle }}</div>
|
|
|
+ <div
|
|
|
+ v-if="i.type == 1"
|
|
|
+ style="display: flex; flex-direction: column"
|
|
|
+ >
|
|
|
+ <el-radio-group v-model="l.content.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.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.type == 9">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit" style="width: 85px">排序工具</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-for="(i, index) in l.content"
|
|
|
+ :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 v-if="l.type == 10">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit">表格工具</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form>
|
|
|
+ <div class="cont" v-html="l.content.text"></div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 文档作业 -->
|
|
|
+ <div v-if="l.type == 13">
|
|
|
+ <div style="display: flex; justify-content: flex-end">
|
|
|
+ <div class="toolTit">文档工具</div>
|
|
|
+ </div>
|
|
|
+ <div v-html="l.content.text"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ state == 5 && item[0].stage == i.id && item[0].task == k.id
|
|
|
+ "
|
|
|
+ v-for="(item, index) in elist"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="taskSco">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div style="font-weight: 600; color: rgba(0, 0, 0, 0.9)">
|
|
|
+ 任务得分:
|
|
|
+ <span style="color: rgba(54, 129, 252, 1)">{{
|
|
|
+ totalScore(item[0].data)
|
|
|
+ }}</span
|
|
|
+ >分
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ line-height: 21px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 提交时间: 2024-07-12 17:36:06
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <div style="width: 49%">
|
|
|
+ <div>
|
|
|
+ <div class="score_boxTit"><span>分数详情</span></div>
|
|
|
+ <div
|
|
|
+ v-for="(l, ind) in item[0].data"
|
|
|
+ :key="ind + 's'"
|
|
|
+ class="score_box"
|
|
|
+ >
|
|
|
+ <el-tooltip
|
|
|
+ class="item"
|
|
|
+ effect="dark"
|
|
|
+ :content="l.detail"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <div class="RootImgBlock">
|
|
|
+ {{ l.detail }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <el-rate
|
|
|
+ class="rate_size"
|
|
|
+ disabled-void-color="#ccc"
|
|
|
+ disabled
|
|
|
+ style="min-width: 120px"
|
|
|
+ v-model="l.sco"
|
|
|
+ ></el-rate>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 49%">
|
|
|
+ <div class="worksTarget" v-if="isShow(item[0].data)">
|
|
|
+ <span>目标</span>
|
|
|
+ </div>
|
|
|
+ <div class="worksTargetCon" v-if="isShow(item[0].data)">
|
|
|
+ <div
|
|
|
+ v-for="(r, tarIndex) in item[0].data"
|
|
|
+ :key="tarIndex"
|
|
|
+ >
|
|
|
+ <span> {{ r.target }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import html2canvas from "html2canvas";
|
|
|
+import jspdf from "jspdf";
|
|
|
+export default {
|
|
|
+ props: ["uid", "cid", "worksDialog", "worksDialogCon"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ workList: [],
|
|
|
+ dyList: [],
|
|
|
+ workEvaList: "",
|
|
|
+ elist: [],
|
|
|
+ state: 0,
|
|
|
+ oid: this.$route.query.oid,
|
|
|
+ org: this.$route.query.org,
|
|
|
+ loading: false,
|
|
|
+ imgList: [
|
|
|
+ {
|
|
|
+ schoolId: "45facc0a-1211-11ec-80ad-005056b86db5",
|
|
|
+ logo: require("../../../assets/icon/exportPdfworks/cocoroboLogo.svg"),
|
|
|
+ conImg: require("../../../assets/icon/exportPdfworks/cocoroboCon.svg"),
|
|
|
+ bkColor: "#E5EFFE"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ schoolImg: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ uid(newl) {
|
|
|
+ this.getCourseDetail();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ this.getCourseDetail();
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isShow() {
|
|
|
+ return function(val) {
|
|
|
+ let num = 0;
|
|
|
+ val.forEach(i => {
|
|
|
+ if (i.target) {
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return num * 1;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ totalScore() {
|
|
|
+ return function(val) {
|
|
|
+ let a = 0;
|
|
|
+ val.forEach(e => {
|
|
|
+ if (e.sco) {
|
|
|
+ a += e.sco * 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (a == 0) return "0.0";
|
|
|
+ return (a / val.length).toFixed(1);
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ getPdf() {
|
|
|
+ let domHeight = this.$refs.reportPdf.offsetHeight;
|
|
|
+ // console.log('this.$refs.reportPdf',this.$refs.reportPdf.offsetHeight);
|
|
|
+ let maxHeight = 64257;
|
|
|
+ html2canvas(this.$refs.reportPdf, {
|
|
|
+ useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
|
|
|
+ scale: maxHeight / domHeight > 1 ? 1 : maxHeight / domHeight
|
|
|
+ })
|
|
|
+ .then(canvas => {
|
|
|
+ const contentWidth = canvas.width;
|
|
|
+ const contentHeight = canvas.height;
|
|
|
+
|
|
|
+ let pageHeight = (contentWidth / 592.28) * 841.89;
|
|
|
+ let leftHeight = contentHeight;
|
|
|
+
|
|
|
+ //页面偏移
|
|
|
+ var position = 0;
|
|
|
+ //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
|
|
|
+ var imgWidth = 595.28; // A4 宽度
|
|
|
+ var imgHeight = (592.28 / contentWidth) * contentHeight; // A4总高度
|
|
|
+ var pageData = canvas.toDataURL("image/jpeg", 1.0);
|
|
|
+
|
|
|
+ var pdf = new jspdf("", "pt", [contentWidth, contentHeight]);
|
|
|
+
|
|
|
+ //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
|
|
|
+ //当内容未超过pdf一页显示的范围，无需分页
|
|
|
+ // if (leftHeight < pageHeight) {
|
|
|
+ pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);
|
|
|
+
|
|
|
+ pdf.save(
|
|
|
+ this.worksDialogCon.course +
|
|
|
+ "-作业集-" +
|
|
|
+ this.worksDialogCon.sName +
|
|
|
+ ".pdf"
|
|
|
+ );
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ exportPdfSet(uid, con) {
|
|
|
+ let params = {
|
|
|
+ uid: this.uid,
|
|
|
+ cid: this.cid
|
|
|
+ };
|
|
|
+
|
|
|
+ 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];
|
|
|
+
|
|
|
+ if (res.data[0].length) {
|
|
|
+ let elistData = JSON.parse(res.data[0][0].chapters)[0]
|
|
|
+ .chapterInfo[0].taskJson;
|
|
|
+ elistData.forEach((e, i) => {
|
|
|
+ this.elist[i] = [];
|
|
|
+ let a = e.id.split("-");
|
|
|
+ this.elist[i].push({ stage: a[0], task: a[1], data: e.eList });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.elist.forEach(e => {
|
|
|
+ this.workEvaList.forEach(i => {
|
|
|
+ if (e[0].stage == i.stage && e[0].task == i.task) {
|
|
|
+ e[0].data.forEach(l => {
|
|
|
+ l.sco = 0;
|
|
|
+
|
|
|
+ let key2 = l.detail
|
|
|
+ .match(/[\u4e00-\u9fa5a-zA-Z]+/g)
|
|
|
+ .join("");
|
|
|
+ // console.log("key2", key2);
|
|
|
+
|
|
|
+ let rateCopy = JSON.parse(i.rate);
|
|
|
+ for (const key in rateCopy) {
|
|
|
+ // console.log("key", key);
|
|
|
+
|
|
|
+ // let key3 = key.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
|
|
|
+ if (key2.indexOf(key) != -1 && key != "content") {
|
|
|
+ l.sco = rateCopy[key] * 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // console.log("this.elist", this.elist);
|
|
|
+ // console.log("this.workEvaList", this.workEvaList);
|
|
|
+
|
|
|
+ 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];
|
|
|
+ // console.log("JSON.parse(element1.content)[0]", element1);
|
|
|
+
|
|
|
+ let t = JSON.parse(k.content)[0].testJson;
|
|
|
+ // console.log("t", JSON.parse(JSON.stringify(t)));
|
|
|
+ // console.log("k", k);
|
|
|
+
|
|
|
+ // 处理学生选择答案
|
|
|
+ let e = [];
|
|
|
+ t.testJson.forEach((i, y) => {
|
|
|
+ e.push(element1.anwer[y]);
|
|
|
+ });
|
|
|
+ t.radio = e;
|
|
|
+
|
|
|
+ // 处理选项
|
|
|
+
|
|
|
+ k.content = t;
|
|
|
+ });
|
|
|
+ // console.log("res.data[6]", res.data[6]);
|
|
|
+
|
|
|
+ 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; //从小到大排序
|
|
|
+ });
|
|
|
+
|
|
|
+ let phaseList = JSON.parse(JSON.stringify(this.dyList));
|
|
|
+
|
|
|
+ phaseList.forEach(e => {
|
|
|
+ e.stageData = [];
|
|
|
+ AreaAllWork.forEach((k, index) => {
|
|
|
+ if (k.stage == e.id) {
|
|
|
+ e.stageData.push(k);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ phaseList.forEach(e => {
|
|
|
+ e.stageData.forEach((l, index) => {
|
|
|
+ e.taskList.forEach(k => {
|
|
|
+ if (l.task == k.id) {
|
|
|
+ if (k.taskData && k.taskData.length) {
|
|
|
+ k.taskData.push(l);
|
|
|
+ } else {
|
|
|
+ k.taskData = [];
|
|
|
+ k.taskData.push(l);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.loading = false;
|
|
|
+
|
|
|
+ // console.log("phaseList", phaseList);
|
|
|
+ this.workList = phaseList;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getPdf();
|
|
|
+ return resolve(1);
|
|
|
+ // this.$emit("update:worksDialog", false);
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ previewImg(url) {
|
|
|
+ this.$hevueImgPreview(url);
|
|
|
+ },
|
|
|
+ getCourseDetail() {
|
|
|
+ this.loading = true;
|
|
|
+ let params = {
|
|
|
+ cid: this.cid,
|
|
|
+ choseClass: ""
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "getCourseWorksReport2", params) //getCourseWorksReport
|
|
|
+ .then(res => {
|
|
|
+ this.state = res.data[0][0].state;
|
|
|
+
|
|
|
+ var dyJSON = JSON.parse(res.data[0][0].chapters);
|
|
|
+
|
|
|
+ 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 => {
|
|
|
+ console.log(e.schoolId, this.oid);
|
|
|
+ if (e.schoolId == this.oid) {
|
|
|
+ this.schoolImg = e;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.exportPdfSet();
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</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;
|
|
|
+}
|
|
|
+.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 {
|
|
|
+ min-height: 850px;
|
|
|
+ background-color: #ccc;
|
|
|
+}
|
|
|
+.coverPageLogo {
|
|
|
+ padding: 40px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.coverPageFrom {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 70%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.coverPageFromTit {
|
|
|
+ font-size: 48px;
|
|
|
+ color: rgba(58, 59, 152, 1);
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.fromCss {
|
|
|
+ border: 1.5px dashed rgba(158, 208, 255, 1);
|
|
|
+ border-radius: 16px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 24px 32px;
|
|
|
+ width: 300px;
|
|
|
+ color: rgba(35, 99, 205, 1);
|
|
|
+}
|
|
|
+.fromCss > div {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.fromCss > div > span {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.stageCon {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.toolTit {
|
|
|
+ background-color: rgba(243, 247, 253, 1);
|
|
|
+ color: rgba(54, 115, 232, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 3px 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 65px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 5px 0;
|
|
|
+}
|
|
|
+.taskTitInd {
|
|
|
+ background-color: rgba(54, 129, 252, 1);
|
|
|
+ color: #fff;
|
|
|
+ padding: 3px 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 3px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.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: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 12px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.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; */
|
|
|
+ margin: 10px 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;
|
|
|
+}
|
|
|
+</style>
|
