下载pdf

src/components/pages/components/exportWorksDialog.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="pbl">
+    <!-- <el-dialog
+      title="文件预览"
+      :visible.sync="worksDialog"
+      :before-close="handleClose"
+      class="worksDialogCSS"
+      :append-to-body="true"
+    > -->
+      <div slot="title" class="header-title">
+        <div style="color: #fff">导出作业集</div>
+      </div>
     <div ref="reportPdf" v-loading="loading">
       <div
         class="coverPage"
@@ -8,10 +18,10 @@
         }"
       >
         <div class="coverPageLogo">
-          <img :src="schoolImg.logo ? schoolImg.logo : '' " alt="" />
+          <img :src="schoolImg.logo ? schoolImg.logo : ''" alt="" />
         </div>
         <div class="coverPageFrom">
-          <div class="coverPageFromTit">{{ worksDialogCon.course }}</div>
+          <div class="coverPageFromTit">{{ worksDialogCon2.course }}</div>
           <div
             style="
                   font-size: 36px;
@@ -25,15 +35,15 @@
           <div class="fromCss">
             <div>
               <span>姓名:</span>
-              <div class="txt">{{ worksDialogCon.sName }}</div>
+              <div class="txt">{{ worksDialogCon2.sName }}</div>
             </div>
             <div>
               <span>班级:</span>
-              <div class="txt">{{ worksDialogCon.class }}</div>
+              <div class="txt">{{ worksDialogCon2.class }}</div>
             </div>
             <div>
               <span>学校:</span>
-              <div class="txt">{{ worksDialogCon.schName }}</div>
+              <div class="txt">{{ worksDialogCon2.schName }}</div>
             </div>
             <!-- <div>
               <span>指导老师:</span>
@@ -42,7 +52,10 @@
           </div>
         </div>
         <div class="coverPageFrom">
-          <img :src="schoolImg.conImg ? schoolImg.conImg :'../../../assets/icon/exportPdfworks/cocoroboCon.svg'" alt="" />
+          <img
+            src="../../../assets/icon/exportPdfworks/cocoroboCon.svg"
+            alt=""
+          />
         </div>
       </div>
       <div class="coverPageCon">
@@ -371,10 +384,8 @@
                 </div>
               </div>
               <div
-                v-if="
-                  state == 5 && item[0].stage == i.id && item[0].task == k.id
-                "
-                v-for="(item, index) in elist"
+                v-if="item.stage == i.id && item.task == k.id && item.data && item.data.length"
+                v-for="(item, index) in elist[i.id]"
                 :key="index"
               >
                 <div class="taskSco">
@@ -389,7 +400,7 @@
                     <div style="font-weight: 600; color: rgba(0, 0, 0, 0.9)">
                       任务得分:
                       <span style="color: rgba(54, 129, 252, 1)">{{
-                        totalScore(item[0].data)
+                        totalScore(item.data)
                       }}</span
                       >分
                     </div>
@@ -409,7 +420,7 @@
                       <div>
                         <div class="score_boxTit"><span>分数详情</span></div>
                         <div
-                          v-for="(l, ind) in item[0].data"
+                          v-for="(l, ind) in item.data"
                           :key="ind + 's'"
                           class="score_box"
                         >
@@ -435,12 +446,12 @@
                       </div>
                     </div>
                     <div style="width: 49%">
-                      <div class="worksTarget" v-if="isShow(item[0].data)">
+                      <div class="worksTarget" v-if="isShow(item.data)">
                         <span>目标</span>
                       </div>
-                      <div class="worksTargetCon" v-if="isShow(item[0].data)">
+                      <div class="worksTargetCon" v-if="isShow(item.data)">
                         <div
-                          v-for="(r, tarIndex) in item[0].data"
+                          v-for="(r, tarIndex) in item.data"
                           :key="tarIndex"
                         >
                           <span> {{ r.target }}</span>
@@ -455,14 +466,18 @@
         </div>
       </div>
     </div>
+  <!-- </el-dialog> -->
+
   </div>
 </template>
 
 <script>
 import html2canvas from "html2canvas";
 import jspdf from "jspdf";
+import JSZip from "jszip";
+
 export default {
-  props: ["uid", "cid", "worksDialog", "worksDialogCon"],
+  props: ["uid", "cid", "worksDialog", "worksDialogCon","digNum"],
   data() {
     return {
       workList: [],
@@ -472,7 +487,11 @@ export default {
       state: 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",
@@ -485,18 +504,24 @@ export default {
     };
   },
   watch: {
-    uid(newl) {
-        this.getCourseDetail();
-    }
+    // uid(newl) {
+    //     this.getCourseDetail();
+    // }
   },
   mounted() {
-
-      this.getCourseDetail();
-    
+    if (this.digNum == 0) {
+      this.downPdf()
+    }else{
+     this.getWorks1()
+    }
+      // this.getCourseDetail();
   },
   computed: {
     isShow() {
       return function(val) {
+        if (!val) {
+          return 0
+        }
         let num = 0;
         val.forEach(i => {
           if (i.target) {
@@ -508,6 +533,9 @@ export default {
     },
     totalScore() {
       return function(val) {
+        if (!val) {
+          return "0.0"
+        }
         let a = 0;
         val.forEach(e => {
           if (e.sco) {
@@ -521,54 +549,96 @@ export default {
   },
 
   methods: {
-    getPdf() {
+    // 下载pdf文件
+    async 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;
+      return new Promise((resolve, reject) => {
+        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 pageData = canvas.toDataURL("image/jpeg", 1.0);
 
-          //页面偏移
-          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]);
 
-          var pdf = new jspdf("", "pt", [contentWidth, contentHeight]);
+            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+            //当内容未超过pdf一页显示的范围，无需分页
+            // if (leftHeight < pageHeight) {
+            pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);
 
-          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
-          //当内容未超过pdf一页显示的范围，无需分页
-          // if (leftHeight < pageHeight) {
-          pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);
+            pdf.save(
+              this.worksDialogCon2.course +
+                "-作业集-" +
+                this.worksDialogCon2.sName +
+                ".pdf"
+            );
+            return resolve()
+          })
+          .catch(err => {
+            console.log(err);
+          });
+      });
+    },
 
-          pdf.save(
-            this.worksDialogCon.course +
-              "-作业集-" +
-              this.worksDialogCon.sName +
-              ".pdf"
-          );
+    // 压缩pdf
+    async getPdf2() {
+      let domHeight = this.$refs.reportPdf.offsetHeight;
+      // console.log('this.$refs.reportPdf',this.$refs.reportPdf.offsetHeight);
+      let maxHeight = 64257;
+      return new Promise((resolve, reject) => {
+        html2canvas(this.$refs.reportPdf, {
+          useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
+          scale: maxHeight / domHeight > 1 ? 1 : maxHeight / domHeight
         })
-        .catch(err => {
-          console.log(err);
-        });
+          .then(canvas => {
+            const contentWidth = canvas.width;
+            const contentHeight = canvas.height;
+
+            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);
+
+            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);
+          });
+      });
     },
 
-     exportPdfSet(uid, con) {
+    // 图片放大查看
+    previewImg(url) {
+      this.$hevueImgPreview(url);
+    },
+    // 获取处理作业信息
+    async exportPdfSet(uid, con) {
       let params = {
-        uid: this.uid,
+        uid: this.uid2,
         cid: this.cid
       };
-     
-      this.ajax
+      return new Promise((resolve, reject) => {
+        this.ajax
           .get(this.$store.state.api + "selectAllWorksDetail", params)
           .then(res => {
             var worksDetail = res.data[1];
@@ -584,41 +654,60 @@ export default {
             var wordInfo = res.data[12]; //文档作业
             this.workEvaList = res.data[13];
 
+            this.elist = [] 
             if (res.data[0].length) {
-              let elistData = JSON.parse(res.data[0][0].chapters)[0]
-                .chapterInfo[0].taskJson;
+              let elistData = JSON.parse(res.data[0][0].chapters);
+
               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 });
+                e.chapterInfo[0].taskJson.forEach((k, kin) => {
+                  this.elist[i].push({ stage: i, task: kin, data: k.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;
-                      }
+            this.elist.forEach((e) => {
+              e.forEach((m, min) => {
+                this.workEvaList.forEach((i) => {
+                  if (
+                    m.stage == i.stage &&
+                    m.task == i.task &&
+                    this.worksDialogCon2.userid == i.userid &&
+                    m.data && m.data.length
+                  ) {
+                    
+                    if (m.data) {
+                      m.data.forEach((l) => {
+                        l.sco = 0;
+                        console.log('l.detail',l.detail);
+                        
+                        if (isNaN(parseFloat(l.detail)) && l.detail) {
+                          var key2 = l.detail
+                          .match(/[\u4e00-\u9fa5a-zA-Z]+/g)
+                          .join("");
+                        }else{
+                          var key2 = l.detail
+                        }
+                        let rateCopy = JSON.parse(i.rate);
+                        for (const key in rateCopy) {
+                          if (isNaN(parseFloat(l.detail)) && l.detail) {
+                            var key3 = key
+                            .match(/[\u4e00-\u9fa5a-zA-Z]+/g)
+                            .join("");
+                          }else{
+                            var key3 = key
+                          }
+                          if (key2.indexOf(key3) != -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);
@@ -707,59 +796,125 @@ export default {
             // console.log("phaseList", phaseList);
             this.workList = phaseList;
             setTimeout(() => {
-              this.getPdf();
-              return resolve(1);
-              // this.$emit("update:worksDialog", false);
+              return resolve();              
             }, 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;
+      return new Promise((resolve, reject) => {
+        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);
+            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 });
+            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.dyList = dyList;
 
-          this.imgList.forEach(e => {
-            console.log(e.schoolId, this.oid);
-            if (e.schoolId == this.oid) {
-              this.schoolImg = e;
-            }
+            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();
+        await 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;
 
-          this.exportPdfSet();
+            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);
         });
-      
-
-    },
-    
-   
+    }
   }
 };
 </script>
@@ -1036,4 +1191,19 @@ export default {
 .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: 850px !important;
+}
+.worksDialogCSS >>> .el-dialog {
+  width: 888px !important;
+}
 </style>

src/components/pages/components/studentWorksDetail.vue

@@ -4389,7 +4389,9 @@ export default {
 .max_diy >>> .el-dialog__body {
   height: 800px;
 }
-
+.dialog_diy2 {
+  overflow: hidden;
+}
 .dialog_diy2 >>> .el-dialog__header {
   padding: 9px 20px 10px;
   background: #32455b !important;

src/components/pages/components/workData.vue

@@ -172,9 +172,9 @@
             <div class="JsonTit">
               <div style="width:94%;margin: 0 auto;font-size: 26px;">{{ dataJson.title }}</div>
               <div class="JsonTitBtn" v-if="dialogVisible">
-                <!-- <el-button @click="exportWorkPdf" type="primary" size="small"
+                <el-button @click="exportWorkPdf" type="primary" size="small"
                   >一键导出</el-button
-                > -->
+                >
                 <el-button @click="exportData" type="primary" size="small"
                   >自定义导出</el-button
                 >

src/components/pages/components/worksDetail2.vue

@@ -1558,7 +1558,7 @@
       <div slot="title" class="header-title">
         <div style="color: #fff">导出作业集</div>
       </div>
-      <exportWorksDialog ref="exportW"  :oid="oid" :worksDialog.sync="worksDialog" :worksDialogCon="worksDialogCon" :uid="exportPdfSetUid" :cid="id"></exportWorksDialog>
+      <exportWorksDialog  :key="exportW" :digNum="digNum" :oid="oid" :worksDialog.sync="worksDialog" :worksDialogCon="worksDialogCon" :uid="exportPdfSetUid" :cid="id"></exportWorksDialog>
     </el-dialog>
   </div>
 </template>
@@ -1813,7 +1813,9 @@ export default {
       allWorkData:[],
       worksDialog : false,
       worksDialogCon : {},
-      exportPdfSetUid:''
+      exportPdfSetUid:'',
+      exportW:0,
+      digNum:0
     };
   },
   computed: {
@@ -1896,6 +1898,23 @@ export default {
     });
   },
   methods: {
+    // 导出所有作业
+    exportPdfSetAllWork(){
+      this.worksDialog = true;
+      this.digNum = 1
+      this.exportW++
+      
+    },
+   
+    // 按任务查看导出作业集
+    exportPdfSetBtn(uid, con) {
+      this.worksDialog = true;
+      this.worksDialogCon = con;
+      this.exportPdfSetUid = uid;
+      this.digNum = 0
+
+      this.exportW++
+    },
     cutTabData(val){
       this.cutTabNum = val;
       this.page = 1;
@@ -2883,18 +2902,7 @@ export default {
           console.error(err);
         });
     },
-    // 导出所有作业
-    exportPdfSetAllWork(){
-      this.worksDialog = true;
-    },
-   
-    // 按任务查看导出作业集
-    exportPdfSetBtn(uid, con) {
-      // console.log('con',con);
-      this.worksDialog = true;
-      this.worksDialogCon = con;
-      this.exportPdfSetUid = uid;
-    },
+  
     checkAsk(askJson) {
       this.askJson = askJson;
       this.dialogVisible4 = true;
@@ -4605,7 +4613,7 @@ export default {
   background: #32455b !important;
 }
 .worksDialogCSS >>> .el-dialog__header {
-  padding: 9px 20px 10px;
+  /* padding: 9px 20px 10px; */
   background: #32455b !important;
 }
 
@@ -4646,6 +4654,9 @@ export default {
 .max_diy >>> .el-dialog__body {
   height: 800px;
 }
+.dialog_diy2 {
+  overflow: hidden;
+}
 
 .dialog_diy2 >>> .el-dialog__header {
   padding: 9px 20px 10px;