|
|
@@ -34,6 +34,9 @@ async function getChartData(schoolId:number) {
|
|
|
chartData = <StudentBoard>{ ...data };
|
|
|
dataStatus.value = true;
|
|
|
radarData = [chartData.after, chartData.front];
|
|
|
+ setTimeout(()=>{
|
|
|
+ dialogVisible.value = true;
|
|
|
+ }, 500);
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
dataStatus.value = false;
|
|
|
@@ -63,18 +66,19 @@ function starElement(index:number, compare:number){
|
|
|
} else if (star == 5) {
|
|
|
tag = "优秀水平";
|
|
|
}
|
|
|
- //return `<div class="star s${star}"></div><div class="status">${tag}</div>`;
|
|
|
return ["star s" + star, tag, value];
|
|
|
}
|
|
|
|
|
|
+const dialogVisible = ref(false);
|
|
|
onMounted(() => {
|
|
|
// 图表数据
|
|
|
getChartData(userStore.schoolId);
|
|
|
});
|
|
|
+
|
|
|
// 绑定需要生成图片的页面内容
|
|
|
const exportPage = ref();
|
|
|
// 下载页面内容为图片
|
|
|
-const downloadHandle = ()=>{
|
|
|
+const downloadHandle = (name:string)=>{
|
|
|
// html2canvas(绑定的元素,{})
|
|
|
html2canvas(exportPage.value,{
|
|
|
backgroundColor:"#f3f6fd",//海报的背景颜色
|
|
|
@@ -88,7 +92,7 @@ const downloadHandle = ()=>{
|
|
|
let saveElement = document.createElement("a");
|
|
|
saveElement.href = imgSrc;
|
|
|
// 下载的名字
|
|
|
- saveElement.download = "训练效果分析.png";
|
|
|
+ saveElement.download = "训练效果分析报告-"+name+".png";
|
|
|
// 直接回调a的点击事件
|
|
|
saveElement.click();
|
|
|
// 下载之后删除临时a标签
|
|
|
@@ -97,21 +101,20 @@ const downloadHandle = ()=>{
|
|
|
console.log(e)
|
|
|
})
|
|
|
}
|
|
|
-const dialogTableVisible = ref(true);
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <el-dialog v-model="dialogTableVisible" title="已生成下载预览">
|
|
|
- <button @click="downloadHandle()">下载报告</button>
|
|
|
- <router-link :to="'/student/result?id='+getUrlParam('id')" class="table-btn">返回训练效果分析</router-link>
|
|
|
+ <el-dialog v-model="dialogVisible" title="已生成【训练效果分析报告】下载预览，您可以：">
|
|
|
+ <el-button @click="dialogVisible=false">预览</el-button>
|
|
|
+ <el-button @click="downloadHandle(chartData.name)" color="#626aef" class="mr-3">下载报告</el-button>
|
|
|
+ <router-link :to="'/student/result?id='+getUrlParam('id')"><el-button color="#626aef" plain>返回上一页</el-button></router-link>
|
|
|
</el-dialog>
|
|
|
<div class="download-btn">
|
|
|
- <button @click="downloadHandle()">下载报告</button>
|
|
|
- <router-link :to="'/student/result?id='+getUrlParam('id')" class="table-btn">返回训练效果分析</router-link>
|
|
|
+ <el-button @click="downloadHandle(chartData.name)" color="#626aef" class="mr-5">下载报告</el-button>
|
|
|
+ <router-link :to="'/student/result?id='+getUrlParam('id')"><el-button color="#626aef" plain>返回上一页</el-button></router-link>
|
|
|
</div>
|
|
|
-
|
|
|
- <div v-if="dataStatus" class="result-container">
|
|
|
+ <div v-if="dataStatus" class="result-container" ref="exportPage">
|
|
|
<div class="result-title">
|
|
|
<el-row class="box-card">
|
|
|
<el-col :span="24">
|
|
|
@@ -329,32 +332,24 @@ const dialogTableVisible = ref(true);
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-else class="result-container">
|
|
|
- <div class="empty">
|
|
|
- <img src="../../assets/empty.png" alt="数据为空">
|
|
|
- <p>{{ dataMessage }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.container{
|
|
|
+ min-width: 100%;
|
|
|
+ min-height:100%;
|
|
|
+ background: #1e2e64 url("../../assets/404/404.png") no-repeat;
|
|
|
+ :deep(.el-dialog__body){text-align:center;}
|
|
|
+}
|
|
|
.download-btn{
|
|
|
- position: absolute;
|
|
|
+ position: fixed;
|
|
|
z-index: 99;
|
|
|
- right: 4rem;
|
|
|
- top: 4rem;
|
|
|
- width:100px;
|
|
|
- height:70px;
|
|
|
- line-height: 16px;
|
|
|
- text-align: center;
|
|
|
- span{display: inline-block;width: 100%;white-space: nowrap;}
|
|
|
-}
|
|
|
-.container{
|
|
|
- min-width: 100%;
|
|
|
- min-height:100%;
|
|
|
- background: #1f2d3d;
|
|
|
+ top: 20px;
|
|
|
+ left:50%;
|
|
|
+ margin-left: -105px;
|
|
|
}
|
|
|
+
|
|
|
.result-container {
|
|
|
background: #f3f6fd;
|
|
|
box-sizing: border-box;
|
