|
|
@@ -44,7 +44,7 @@
|
|
|
</div>
|
|
|
<div class="bottomRight">
|
|
|
<div class="rightButton" @click="updateState(an.id)">提交</div>
|
|
|
- <div class="rightButton">导出</div>
|
|
|
+ <div class="rightButton" @click="exportAnli(an)">导出</div>
|
|
|
<div class="rightButton">开始教学</div>
|
|
|
<div
|
|
|
class="rightButton"
|
|
|
@@ -122,6 +122,119 @@ export default {
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
+ exportAnli(res) {
|
|
|
+ console.log(res);
|
|
|
+ let _html = "";
|
|
|
+ var _title = "";
|
|
|
+ let info = JSON.parse(res.info);
|
|
|
+ _title += `
|
|
|
+ <iframe style="display: none;" name="downloadFile"></iframe>
|
|
|
+ <h1>项目名称：${info.title}</h1>
|
|
|
+ `;
|
|
|
+ _title += `<h3>比赛类别：${res.typename}</h3>`;
|
|
|
+ _title += `<h4>单位：${res.schoolName}</h4>`;
|
|
|
+ _title += `<h4>项目简介：${info.courseText}</h4>`;
|
|
|
+
|
|
|
+ let overview = JSON.parse(res.overview);
|
|
|
+ var _overview = "";
|
|
|
+ var oArray = [
|
|
|
+ { j: "driQuestion", name: "驱动性问题" },
|
|
|
+ { j: "tarDesign", name: "目标设计" },
|
|
|
+ { j: "actiDesign", name: "活动设计" },
|
|
|
+ { j: "evaDesign", name: "评价设计" },
|
|
|
+ { j: "other", name: "其他补充" },
|
|
|
+ ];
|
|
|
+ for (var k = 0; k < oArray.length; k++) {
|
|
|
+ _overview += `<h2>${oArray[k].name}</h2>`;
|
|
|
+ // <a :href="`${完整的下载地址}`" target="downloadFile">{{文件名称}}</a>
|
|
|
+ // <iframe style="display: none;" name="downloadFile"></iframe>
|
|
|
+ _overview += `<div>${overview[oArray[k].j].brief}</div>`;
|
|
|
+ var _div = document.createElement("div");
|
|
|
+ for (var i = 0; i < overview[oArray[k].j].data.length; i++) {
|
|
|
+ var _div2 = document.createElement("div");
|
|
|
+ _div2.innerHTML = ` <a href="${
|
|
|
+ overview[oArray[k].j].data[i].url
|
|
|
+ }" target="downloadFile">${ overview[oArray[k].j].data[i].name}</a>`;
|
|
|
+ _div.appendChild(_div2);
|
|
|
+ }
|
|
|
+ _overview += `<div>${_div.innerHTML}</div>`
|
|
|
+ }
|
|
|
+
|
|
|
+ let process = JSON.parse(res.process).actBox;
|
|
|
+ var _process = '';
|
|
|
+ for(var z = 0;z<process.length;z++){
|
|
|
+ _process+=`<h3>活动${z+1}</h3>`
|
|
|
+ _process+=`<h3>活动名称:${process[z].actName}</h3>`
|
|
|
+ let pAarray = [
|
|
|
+ {j:'driQuestion',name:'活动实施'},
|
|
|
+ {j:'tarDesign',name:'活动工具'},
|
|
|
+ {j:'tarDesign',name:'活动描述'},
|
|
|
+ {j:'actiDesign',name:'活动成果'}
|
|
|
+ ]
|
|
|
+ for(var i = 0;i<pAarray.length;i++){
|
|
|
+ _process += `<h3>${pAarray[i].name}：${process[z][pAarray[i].j].title}</h3>`;
|
|
|
+ _process += `<div>活动描述</div>`;
|
|
|
+ _process += `<div>${process[z][pAarray[i].j].brief}</div>`;
|
|
|
+ _process += `<div>学习内容</div>`;
|
|
|
+ var _div = document.createElement("div");
|
|
|
+ for (var c = 0; c < process[z][pAarray[i].j].data.length; c++) {
|
|
|
+ var _div2 = document.createElement("div");
|
|
|
+ _div2.innerHTML = ` <a href="${
|
|
|
+ process[z][pAarray[i].j].data[c].url
|
|
|
+ }" target="downloadFile">${ process[z][pAarray[i].j].data[c].name}</a>`;
|
|
|
+ _div.appendChild(_div2);
|
|
|
+ }
|
|
|
+ _process += `<div>${_div.innerHTML}</div>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ let results = JSON.parse(res.results);
|
|
|
+ let _results = ''
|
|
|
+ _results += `<h3>项目成效</h3>`
|
|
|
+ _results += `<div>${results.proEffText}</div>`
|
|
|
+ _results += `<h3>项目反思</h3>`
|
|
|
+ _results += `<div>${results.proRefText}</div>`
|
|
|
+
|
|
|
+ _html = _title + _overview + _process + _results;
|
|
|
+ console.log("_overview", overview);
|
|
|
+ console.log("_process", process);
|
|
|
+ console.log("_results", results);
|
|
|
+ this.generate(_html, { title: info.title, username: res.username });
|
|
|
+ },
|
|
|
+ async generate(a, data) {
|
|
|
+ // 将html文件中需要用到的数据挂载到store上
|
|
|
+ this.$store.commit("update", ["report", a]);
|
|
|
+ console.log(this.$store.state.report);
|
|
|
+ const content = `<!DOCTYPE html>
|
|
|
+ <html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>报告</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ ${this.$store.state.report}
|
|
|
+ </body>
|
|
|
+ </html>`;
|
|
|
+ // debugger
|
|
|
+ // 生成报告
|
|
|
+ const link = document.createElement("a");
|
|
|
+ let dname = data.title + "-" + data.username + ".html";
|
|
|
+ // link.download = "报告.html"; // 文件名
|
|
|
+ link.download = dname; // 文件名
|
|
|
+ link.style.display = "none";
|
|
|
+ // 创建文件流
|
|
|
+ // 创建bolb实例时，内容一定要放在[]中
|
|
|
+ const blob = new Blob([content], {
|
|
|
+ type: "text/plain;charset='utf-8'",
|
|
|
+ });
|
|
|
+ link.href = window.URL.createObjectURL(blob);
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
this.selectAnLi();
|
|
|
@@ -209,12 +322,12 @@ export default {
|
|
|
padding-left: 30px;
|
|
|
}
|
|
|
.anliNav > div:nth-child(1) {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ /* font-weight: bold; */
|
|
|
}
|
|
|
.anliNav > div:nth-child(2) {
|
|
|
- font-weight: bold;
|
|
|
- margin: 15px 0 10px 0;
|
|
|
+ /* font-weight: bold; */
|
|
|
+ margin: 10px 0 10px 0;
|
|
|
}
|
|
|
.anliNav > div:nth-child(3) {
|
|
|
color: #aba8a8;
|
|
|
@@ -237,7 +350,7 @@ export default {
|
|
|
.rightButton {
|
|
|
background: #499eef;
|
|
|
color: #fff;
|
|
|
- width: 60px;
|
|
|
+ /* width: 60px; */
|
|
|
height: 30px;
|
|
|
text-align: center;
|
|
|
line-height: 30px;
|
|
|
@@ -245,5 +358,6 @@ export default {
|
|
|
border-radius: 5px;
|
|
|
cursor: pointer;
|
|
|
margin-right: 20px;
|
|
|
+ padding: 0 15px;
|
|
|
}
|
|
|
</style>
|
