|
@@ -1,17 +1,18 @@
|
|
|
<template>
|
|
|
- <div class="pbl" style="position: relative">
|
|
|
- <div class="AiBtn" v-if="isDown">
|
|
|
- <div style="display: flex;">
|
|
|
- <el-button type="primary" size="small" @click="getAiAnalysisCon2"
|
|
|
- >AI分析</el-button
|
|
|
- >
|
|
|
- <el-button type="primary" @click="getPdf" size="small"
|
|
|
- >导出报告</el-button
|
|
|
- >
|
|
|
+ <div
|
|
|
+ class="pbl">
|
|
|
+ <div class="pdfCon" ref="reportPdf" v-loading="loading">
|
|
|
+ <div class="AiBtn" v-if="isDown">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-button type="primary" size="small" @click="getAiAnalysisCon2"
|
|
|
+ >AI分析</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" @click="isGetPdf" size="small"
|
|
|
+ >导出报告</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 15px;">最后一次分析:{{ cTime }}</div>
|
|
|
</div>
|
|
|
- <div style="margin-top: 15px;">最后一次分析:{{ cTime }}</div>
|
|
|
- </div>
|
|
|
- <div ref="reportPdf" v-loading="loading">
|
|
|
<!-- 封面 -->
|
|
|
<div
|
|
|
class="coverPage"
|
|
@@ -30,7 +31,7 @@
|
|
|
<div class="coverPageFromTit">
|
|
|
<img
|
|
|
style="width: 90%;"
|
|
|
- src="../../../assets/icon/exportPdfworks/title.png"
|
|
|
+ src="../../../assets/icon/exportPdfworks/title.svg"
|
|
|
alt=""
|
|
|
/>
|
|
|
</div>
|
|
@@ -70,7 +71,11 @@
|
|
|
</div>
|
|
|
<div>
|
|
|
<span>指导老师:</span>
|
|
|
- <div class="txt" style="transform: translate(-2em, 0px);">{{ worksDialogCon2.uname }}</div>
|
|
|
+ <div class="txt">
|
|
|
+ <div style="transform: translate(-1em, 0px);">
|
|
|
+ {{ worksDialogCon2.uname }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -109,7 +114,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
- style="display: flex;justify-content: space-between; height: 275px;margin-bottom: 40px"
|
|
|
+ style="display: flex;justify-content: space-between; height: 200px;margin-bottom: 40px"
|
|
|
>
|
|
|
<div style="width: 49%;height: 100%;">
|
|
|
<div
|
|
@@ -183,7 +188,7 @@
|
|
|
>
|
|
|
工具使用情况
|
|
|
</div>
|
|
|
- <div ref="ringChart" style="height: 270px; width: 100%"></div>
|
|
|
+ <div ref="ringChart" style="height: 200px; width: 100%"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -341,7 +346,7 @@
|
|
|
<li>素养发展情况</li>
|
|
|
</div>
|
|
|
<div class="suy">素养发展雷达图</div>
|
|
|
- <div style="width: 100%; background-color: #fff;border-radius: 10px;">
|
|
|
+ <div style="width: 100%; background-color: #fff;border-radius: 10px;border: 1px solid #ccc;">
|
|
|
<div
|
|
|
ref="moreChart"
|
|
|
style="width: 85%;margin: auto; height: 400px"
|
|
@@ -351,7 +356,7 @@
|
|
|
<div class="suy">素养发展总览</div>
|
|
|
<div
|
|
|
v-if="treeData"
|
|
|
- style=" width: 100%;background-color: #fff;border-radius: 10px;"
|
|
|
+ style=" width: 100%;background-color: #fff;border-radius: 10px;border: 1px solid #ccc;"
|
|
|
>
|
|
|
<exjsmind :treeData="treeData"> </exjsmind>
|
|
|
</div>
|
|
@@ -409,7 +414,7 @@
|
|
|
<div
|
|
|
v-for="k in i.taskList"
|
|
|
:key="k.task + 'a'"
|
|
|
- style="margin-bottom: 15px"
|
|
|
+ class="taskCon"
|
|
|
v-if="isTask(k.toolEList)"
|
|
|
>
|
|
|
<div
|
|
@@ -436,7 +441,10 @@
|
|
|
v-for="(l, lind) in k.toolEList"
|
|
|
:key="lind + 'l'"
|
|
|
>
|
|
|
- <div style="padding: 10px 16px;box-sizing: border-box;" v-if="l.content && l.content.length">
|
|
|
+ <div
|
|
|
+ style="padding: 10px 16px;box-sizing: border-box;"
|
|
|
+ v-if="l.content && l.content.length"
|
|
|
+ >
|
|
|
<div v-if="l.tool[0] == 15">
|
|
|
<div class="toolBlk">
|
|
|
<img
|
|
@@ -529,6 +537,7 @@
|
|
|
<img
|
|
|
@click.stop="previewImg(l.content[0])"
|
|
|
style="max-width: 200px"
|
|
|
+ v-if="isDown"
|
|
|
:src="l.content[0]"
|
|
|
alt=""
|
|
|
/>
|
|
@@ -642,6 +651,7 @@
|
|
|
@click.stop="previewImg(item2.src)"
|
|
|
>
|
|
|
<img
|
|
|
+ v-if="isDown"
|
|
|
style="display: block"
|
|
|
:src="item2.src"
|
|
|
alt=""
|
|
@@ -681,6 +691,7 @@
|
|
|
@click.stop="previewImg(item2.src)"
|
|
|
>
|
|
|
<img
|
|
|
+ v-if="isDown"
|
|
|
style="display: block"
|
|
|
:src="item2.src"
|
|
|
alt=""
|
|
@@ -710,6 +721,7 @@
|
|
|
</div>
|
|
|
|
|
|
<img
|
|
|
+ v-if="isDown"
|
|
|
@click.stop="previewImg(l.selectJson.url)"
|
|
|
style="max-width: 200px"
|
|
|
:src="l.selectJson.url"
|
|
@@ -824,7 +836,7 @@
|
|
|
<div class="taskScoCon">
|
|
|
<!-- 分数详情与素养 -->
|
|
|
<div style="flex: 1; display: flex; flex-wrap: wrap">
|
|
|
- <div style="width: 322px; margin:0 20px 10px 0">
|
|
|
+ <div style="width: 410px; margin:0 20px 10px 0">
|
|
|
<div class="taskScoConTit">分数详情</div>
|
|
|
<div
|
|
|
v-for="(wItem, ind) in l.eList"
|
|
@@ -929,7 +941,7 @@ export default {
|
|
|
"worksDialogCon",
|
|
|
"digNum"
|
|
|
],
|
|
|
- // digNum0 导出单个作业集 digNum1导出所有任务
|
|
|
+ // digNum0 导出单个作业集 digNum1导出所有任务 digNum2查看
|
|
|
components: {
|
|
|
exjsmind
|
|
|
},
|
|
@@ -948,7 +960,6 @@ export default {
|
|
|
studyTime: "",
|
|
|
// 登录时长
|
|
|
loginTime: "",
|
|
|
- suImg: "",
|
|
|
|
|
|
canvasLing: [false, false, false, false, false, false, false],
|
|
|
// 编辑图表分析
|
|
@@ -1069,7 +1080,7 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
schoolImg: {},
|
|
|
- treeData: '',
|
|
|
+ treeData: "",
|
|
|
languageSetting: "",
|
|
|
polygonData: [],
|
|
|
polygonData2: [],
|
|
@@ -1436,7 +1447,7 @@ export default {
|
|
|
children: [
|
|
|
{
|
|
|
id: kind + "+" + elind + "+" + stind + "b",
|
|
|
- topic: `工具${elind}`
|
|
|
+ topic: `工具${elind*1 + 1}`
|
|
|
}
|
|
|
]
|
|
|
});
|
|
@@ -1445,7 +1456,7 @@ export default {
|
|
|
if (lc.topic == st.detail) {
|
|
|
lc.children.push({
|
|
|
id: kind + "+" + elind + "+" + stind + "b",
|
|
|
- topic: `工具${elind}`
|
|
|
+ topic: `工具${elind*1 + 1}`
|
|
|
});
|
|
|
}
|
|
|
});
|
|
@@ -1590,7 +1601,6 @@ export default {
|
|
|
// console.log('tar',JSON.parse(JSON.stringify(tar)));
|
|
|
// console.log('data4Copy',JSON.parse(JSON.stringify(data4Copy)));
|
|
|
|
|
|
-
|
|
|
tar.forEach((k, ki) => {
|
|
|
data4Copy.forEach((e, ei) => {
|
|
|
if (ki == e.task) {
|
|
@@ -1771,8 +1781,6 @@ export default {
|
|
|
children: tarListCopy
|
|
|
};
|
|
|
|
|
|
-
|
|
|
-
|
|
|
setTimeout(() => {
|
|
|
this.moreRenderChart();
|
|
|
}, 500);
|
|
@@ -1812,7 +1820,7 @@ export default {
|
|
|
this.AiAnalysisCon2 = JSON.parse(Asd);
|
|
|
}
|
|
|
this.loading = false;
|
|
|
-
|
|
|
+ this.isDown = false;
|
|
|
setTimeout(() => {
|
|
|
this.getPdf();
|
|
|
}, 500);
|
|
@@ -1820,39 +1828,52 @@ export default {
|
|
|
this.circulatePdf();
|
|
|
}
|
|
|
},
|
|
|
+ isGetPdf(){
|
|
|
+ this.$confirm("确定导出本次学生报告吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.isDown = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getPdf()
|
|
|
+ }, 500);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
// 下载pdf文件
|
|
|
async getPdf() {
|
|
|
- this.isDown = false;
|
|
|
-
|
|
|
- let domHeight = this.$refs.reportPdf.offsetHeight;
|
|
|
+ const content = this.$refs.reportPdf;
|
|
|
+ console.log('content',content.offsetHeight);
|
|
|
+
|
|
|
|
|
|
- let maxHeight = 64257;
|
|
|
- html2canvas(this.$refs.reportPdf, {
|
|
|
- useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
|
|
|
- scale: maxHeight / domHeight > 1 ? 1 : maxHeight / domHeight
|
|
|
- })
|
|
|
+ html2canvas(content)
|
|
|
.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);
|
|
|
-
|
|
|
+ const imgData = canvas.toDataURL("image/png");
|
|
|
+ const pdf = new jspdf("p", "pt", [
|
|
|
+ content.offsetWidth,
|
|
|
+ content.offsetHeight
|
|
|
+ ]);
|
|
|
+
|
|
|
+ pdf.addImage(
|
|
|
+ imgData,
|
|
|
+ "PNG",
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ content.offsetWidth,
|
|
|
+ content.offsetHeight
|
|
|
+ );
|
|
|
pdf.save(
|
|
|
this.worksDialogCon2.course +
|
|
|
"-学生成长报告-" +
|
|
|
this.worksDialogCon2.sName +
|
|
|
".pdf"
|
|
|
);
|
|
|
- // setTimeout(() => {
|
|
|
+
|
|
|
this.isDown = true;
|
|
|
- // }, 500);
|
|
|
})
|
|
|
.catch(err => {
|
|
|
console.log(err);
|
|
@@ -2144,11 +2165,6 @@ export default {
|
|
|
},
|
|
|
// 处理学习分析报告
|
|
|
async updateFx() {
|
|
|
- console.log("this.suImg", this.suImg);
|
|
|
-
|
|
|
- // _fileid = await this.createFileid(this.suImg);
|
|
|
- // if (_fileid == 1) _fileid = "";
|
|
|
-
|
|
|
// 素养发展数据
|
|
|
let poy = "";
|
|
|
this.polygonData.forEach(e => {
|
|
@@ -2311,8 +2327,7 @@ export default {
|
|
|
},
|
|
|
// 处理学习行为记录ai分析数据
|
|
|
async getAiAnalysisCon2() {
|
|
|
- // if (!this.suImg.length) return
|
|
|
- this.$message.info("开始分析中...")
|
|
|
+ this.$message.info("开始分析中...");
|
|
|
let realData = [
|
|
|
{ per: "", cla: "", nam: "zy" },
|
|
|
{ per: "", cla: "", nam: "zb" },
|
|
@@ -2658,7 +2673,7 @@ export default {
|
|
|
},
|
|
|
// 重新生成
|
|
|
async agAnl(val, mc) {
|
|
|
- this.$message.info("重新生成中...")
|
|
|
+ this.$message.info("重新生成中...");
|
|
|
|
|
|
this.canvasLing.splice(val, 1, true);
|
|
|
let realData = [
|
|
@@ -3208,7 +3223,7 @@ export default {
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
- value: this.polygonData.map(category => category.sco),
|
|
|
+ value: this.polygonData.map(category => category.sco),
|
|
|
name: "素养平均分"
|
|
|
}
|
|
|
]
|
|
@@ -3256,7 +3271,7 @@ export default {
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
},
|
|
|
- center: ["35%", "50%"], // 控制饼图的位置
|
|
|
+ center: ["50%", "50%"], // 控制饼图的位置
|
|
|
|
|
|
data: this.toolRatio
|
|
|
}
|
|
@@ -3332,6 +3347,10 @@ export default {
|
|
|
};
|
|
|
|
|
|
chart.setOption(option);
|
|
|
+
|
|
|
+ window.onresize = () => {
|
|
|
+ jm.resize();
|
|
|
+ };
|
|
|
},
|
|
|
// 分组工具占比
|
|
|
initChart3() {
|
|
@@ -4322,11 +4341,18 @@ export default {
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
margin: auto;
|
|
|
+ background-color: #F3F7FD;
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
/* padding: 20px; */
|
|
|
/* padding-top: 10px; */
|
|
|
overflow: auto;
|
|
|
border-radius: 10px;
|
|
|
+ position: relative
|
|
|
+}
|
|
|
+.pdfCon {
|
|
|
+ width: 810pt;
|
|
|
+ margin: auto;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.pageTit {
|
|
|
width: 100%;
|
|
@@ -4361,7 +4387,7 @@ export default {
|
|
|
}
|
|
|
.coverPage {
|
|
|
/* height: 840pt; */
|
|
|
- padding: 185px 15% 0;
|
|
|
+ padding: 185px 8% 0;
|
|
|
background-color: #ccc;
|
|
|
position: relative;
|
|
|
background-image: url("../../../assets/icon/exportPdfworks/bcg1.svg"),
|
|
@@ -4410,9 +4436,9 @@ export default {
|
|
|
border-radius: 16px;
|
|
|
background-color: #fff;
|
|
|
padding: 40px 32px;
|
|
|
- width: 75%;
|
|
|
+ width: 77%;
|
|
|
font-family: PingFang SC;
|
|
|
- margin: 40px 0 8px;
|
|
|
+ margin: 8px 0;
|
|
|
color: rgba(35, 99, 205, 1);
|
|
|
}
|
|
|
.fromCss > div {
|
|
@@ -4566,7 +4592,7 @@ export default {
|
|
|
line-height: 25px;
|
|
|
}
|
|
|
.termC {
|
|
|
- margin: 40px auto 10px;
|
|
|
+ margin: 30px auto 45px;
|
|
|
font-size: 18px;
|
|
|
color: rgba(92, 80, 70, 1);
|
|
|
display: flex;
|
|
@@ -4597,7 +4623,7 @@ export default {
|
|
|
|
|
|
.stageCon {
|
|
|
background-color: #fff;
|
|
|
- padding: 30px 110px;
|
|
|
+ padding: 30px 110px 100px;
|
|
|
box-sizing: border-box;
|
|
|
margin-bottom: 10px;
|
|
|
border-radius: 8px;
|
|
@@ -4837,6 +4863,8 @@ export default {
|
|
|
color: rgba(0, 0, 0, 0.6);
|
|
|
font-weight: 400;
|
|
|
line-height: 30px;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
}
|
|
|
.taskSco {
|
|
|
background-color: rgba(253, 247, 243, 1);
|
|
@@ -4913,8 +4941,8 @@ export default {
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
.termC {
|
|
|
- margin: 15px auto 10px;
|
|
|
- font-size: 18px;
|
|
|
+ margin: 30px auto;
|
|
|
+ font-size: 22px;
|
|
|
color: rgba(92, 80, 70, 1);
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
@@ -4926,4 +4954,11 @@ export default {
|
|
|
padding: 3px 10px;
|
|
|
margin: 0 8px;
|
|
|
}
|
|
|
+.taskCon{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 15px;
|
|
|
+}
|
|
|
</style>
|