|
|
@@ -0,0 +1,404 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import PieChart from "@/views/charts-components/PieChart.vue";
|
|
|
+import RadarChart from "@/views/charts-components/RadarChart.vue";
|
|
|
+import CircleChart from "@/views/charts-components/CircleChart.vue";
|
|
|
+import DoubleChart from "@/views/charts-components/DoubleChart.vue";
|
|
|
+import SvgIcon from "@/components/SvgIcon/index.vue";
|
|
|
+defineOptions({
|
|
|
+ name: "StudentDownload",
|
|
|
+ inheritAttrs: false,
|
|
|
+});
|
|
|
+import { watch } from "vue";
|
|
|
+import { useUserStore } from "@/store/modules/user";
|
|
|
+const userStore = useUserStore();
|
|
|
+watch(
|
|
|
+ () => userStore.schoolId,
|
|
|
+ (newValue, oldValue) => {
|
|
|
+ console.log(newValue, oldValue);
|
|
|
+ }
|
|
|
+);
|
|
|
+// 五维雷达图
|
|
|
+const radarData = ref([
|
|
|
+ [78, 88, 65, 82, 65],
|
|
|
+ [28, 38, 45, 32, 25],
|
|
|
+]);
|
|
|
+// 专注力分布饼图
|
|
|
+const pieData = ref([12, 18, 20, 28, 22]);
|
|
|
+
|
|
|
+/**
|
|
|
+ * pnpm install html2canvas --save
|
|
|
+ * 导出页面内容为图片
|
|
|
+ */
|
|
|
+import { ref} from "vue";
|
|
|
+import html2canvas from "html2canvas";
|
|
|
+// 绑定需要生成图片的页面内容
|
|
|
+const exportPage = ref();
|
|
|
+// 下载页面内容为图片
|
|
|
+const downloadHandle = ()=>{
|
|
|
+ // html2canvas(绑定的元素,{})
|
|
|
+ html2canvas(exportPage.value,{
|
|
|
+ backgroundColor:"#f5f5f5",//海报的背景颜色
|
|
|
+ useCORS:true, //允许跨域
|
|
|
+ width: document.querySelector(".result-container").offsetWidth , //生成海报的width,默认px
|
|
|
+ height: document.querySelector(".result-container").offsetHeight , //生成海报的height
|
|
|
+ }).then(canvas=>{
|
|
|
+ // canvas 其实就是返回报文，我们所讲的response的意思
|
|
|
+ let imgSrc = canvas.toDataURL("image/png");
|
|
|
+ // 创建一个临时a标签
|
|
|
+ let saveElement = document.createElement("a");
|
|
|
+ saveElement.href = imgSrc;
|
|
|
+ // 下载的名字
|
|
|
+ saveElement.download = "训练效果分析.png";
|
|
|
+ // 直接回调a的点击事件
|
|
|
+ saveElement.click();
|
|
|
+ // 下载之后删除临时a标签
|
|
|
+ saveElement.remove();
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <button @click="downloadHandle()">测试下载</button>
|
|
|
+ <div class="result-container exportPageImg" ref="exportPage">
|
|
|
+ <div class="result-title">
|
|
|
+ <el-row class="box-card">
|
|
|
+ <el-col :xs="10" :sm="5" :md="5">
|
|
|
+ <div class="l1"><span>下载</span></div>
|
|
|
+ <div class="l2">13726628766</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="14" :sm="5" :md="5">
|
|
|
+ <div class="l1"><span>25</span></div>
|
|
|
+ <div class="l2">训练次数累计</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="10" :sm="6" :md="6">
|
|
|
+ <div class="l1"><span>142</span>分<span>50</span>秒</div>
|
|
|
+ <div class="l2">训练时长累计</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="14" :sm="8" :md="8">
|
|
|
+ <div class="l1">前<span>76%</span></div>
|
|
|
+ <div class="l2">在所有通过训练的学员中你的位置是</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-row class="result-chart" :gutter="15">
|
|
|
+ <el-col :xs="24" :sm="7" :md="7">
|
|
|
+ <div class="box-card">
|
|
|
+ <div class="chart-title">5D脑电数据模型</div>
|
|
|
+ <RadarChart
|
|
|
+ id="radarChart"
|
|
|
+ :data-sets="radarData"
|
|
|
+ width="450px"
|
|
|
+ height="350px"
|
|
|
+ class="chart"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="17" :md="17">
|
|
|
+ <div class="box-card">
|
|
|
+ <div class="chart-title">专注力区间分布统计</div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :xs="24" :sm="7" :md="7">
|
|
|
+ <div class="charts">
|
|
|
+ <CircleChart
|
|
|
+ id="resultChart1"
|
|
|
+ data="75"
|
|
|
+ height="220px"
|
|
|
+ width="220px"
|
|
|
+ color="#4284f2"
|
|
|
+ bg-color="#dadff0"
|
|
|
+ font-color="#09132e"
|
|
|
+ font-weight="normal"
|
|
|
+ font-size="18px"
|
|
|
+ :line-width="Number(30)"
|
|
|
+ />
|
|
|
+ <p>高专注力状态数据占比</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="7" :md="7">
|
|
|
+ <div class="charts">
|
|
|
+ <DoubleChart
|
|
|
+ id="doubleChart1"
|
|
|
+ data="258"
|
|
|
+ height="220px"
|
|
|
+ width="220px"
|
|
|
+ color="#4e68b0"
|
|
|
+ bg-color="#d6daed"
|
|
|
+ />
|
|
|
+ <p>整体高专注力状态数据累计条数</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="10" :md="10">
|
|
|
+ <div class="charts last">
|
|
|
+ <PieChart
|
|
|
+ id="pieChart"
|
|
|
+ :data="pieData"
|
|
|
+ width="400px"
|
|
|
+ height="350px"
|
|
|
+ class="chart"
|
|
|
+ title="专注力分布"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div class="note-box">
|
|
|
+ <div class="note-title">专注力脑电维度数据分析</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8">
|
|
|
+ <div class="box-card">
|
|
|
+ <div class="tit">专注力平均值</div>
|
|
|
+ <el-row class="compare">
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练前</p>
|
|
|
+ <div class="star s1"></div>
|
|
|
+ <div class="status">重度不足</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <svg-icon icon-class="compare" color="#ec482d" size="26px" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练后</p>
|
|
|
+ <div class="star s2"></div>
|
|
|
+ <div class="status">中等不足</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <p class="content">
|
|
|
+ 通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
|
|
|
+ </p>
|
|
|
+ <p class="note">专注力平均值指16次课程训练的专注力平均水平</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8">
|
|
|
+ <div class="box-card">
|
|
|
+ <div class="tit">高专注力占比</div>
|
|
|
+ <el-row class="compare">
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练前</p>
|
|
|
+ <div class="star s2"></div>
|
|
|
+ <div class="status">中等不足</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <svg-icon icon-class="compare" color="#ec482d" size="26px" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练后</p>
|
|
|
+ <div class="star s3"></div>
|
|
|
+ <div class="status">轻度不足</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <p class="content">
|
|
|
+ 在进行学习和生活任务时，需要主观意志的努力，此时脑电静息电位会提高，专注度也会显示为60分以上，因此，将专注力60分以上定义为高专注区间，这代表高专注区间在整次训练中的占比。
|
|
|
+ </p>
|
|
|
+ <p class="note">
|
|
|
+ 高专注力占比指大于60分的高专注值在16次课程训练中的占比均值
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8">
|
|
|
+ <div class="box-card">
|
|
|
+ <div class="tit">专注力稳定度</div>
|
|
|
+ <el-row class="compare">
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练前</p>
|
|
|
+ <div class="star s3"></div>
|
|
|
+ <div class="status">轻度不足</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <svg-icon icon-class="compare" color="#ec482d" size="26px" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练后</p>
|
|
|
+ <div class="star s4"></div>
|
|
|
+ <div class="status">良好</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <p class="content">
|
|
|
+ 在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
|
|
|
+ </p>
|
|
|
+ <p class="note">专注力稳定度指在训练过程中，专注值的离散程度。</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="12" :md="8">
|
|
|
+ <div class="box-card">
|
|
|
+ <div class="tit">专注唤醒效率</div>
|
|
|
+ <el-row class="compare">
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练前</p>
|
|
|
+ <div class="star s4"></div>
|
|
|
+ <div class="status">良好</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <svg-icon icon-class="compare" color="#ec482d" size="26px" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练后</p>
|
|
|
+ <div class="star s5"></div>
|
|
|
+ <div class="status">优秀</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <p class="content">
|
|
|
+ 通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
|
|
|
+ </p>
|
|
|
+ <p class="note">
|
|
|
+ 专注唤醒效率指从训练开始时专注值达到60所需时间效率。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8">
|
|
|
+ <div class="box-card">
|
|
|
+ <div class="tit">整体和谐度</div>
|
|
|
+ <el-row class="compare">
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练前</p>
|
|
|
+ <div class="star s1"></div>
|
|
|
+ <div class="status">重度不足</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <svg-icon icon-class="compare" color="#ec482d" size="26px" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <p>训练后</p>
|
|
|
+ <div class="star s5"></div>
|
|
|
+ <div class="status">优秀</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <p class="content">
|
|
|
+ 既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
|
|
|
+ </p>
|
|
|
+ <p class="note">
|
|
|
+ 整体和谐度指在专注训练过程中对于目标压力的管理水平和情绪稳定水平。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.result-container {
|
|
|
+ position: relative;
|
|
|
+ padding: 30px;
|
|
|
+ .box-card {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 30px;
|
|
|
+ border: 1px solid #e6e8eb;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .result-title {
|
|
|
+ width: 950px;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 16px;
|
|
|
+ .box-card {
|
|
|
+ padding: 24px 0 30px 42px;
|
|
|
+ }
|
|
|
+ .l1 {
|
|
|
+ line-height: 52px;
|
|
|
+ color: #4284f2;
|
|
|
+ span {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .l2 {
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.result-chart {
|
|
|
+ margin-top: 12px;
|
|
|
+ .chart-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #09132e;
|
|
|
+ }
|
|
|
+ .charts {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 74px;
|
|
|
+ text-align: center;
|
|
|
+ &.last {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .chart {
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 5px 0 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.note-box {
|
|
|
+ .note-title {
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #09132e;
|
|
|
+ }
|
|
|
+ .box-card {
|
|
|
+ padding: 15px 34px;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ .tit {
|
|
|
+ color: #4284f2;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ line-height: 28px;
|
|
|
+ color: #686d6d;
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .compare {
|
|
|
+ text-align: center;
|
|
|
+ .svg-icon {
|
|
|
+ margin-top: 38px;
|
|
|
+ }
|
|
|
+ .star {
|
|
|
+ width: 162px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 10px auto;
|
|
|
+ background: url("../../assets/student/stars.png") no-repeat;
|
|
|
+ background-position-x: 0;
|
|
|
+ &.s1 {
|
|
|
+ background-position-y: 0;
|
|
|
+ }
|
|
|
+ &.s2 {
|
|
|
+ background-position-y: -40px;
|
|
|
+ }
|
|
|
+ &.s3 {
|
|
|
+ background-position-y: -80px;
|
|
|
+ }
|
|
|
+ &.s4 {
|
|
|
+ background-position-y: -120px;
|
|
|
+ }
|
|
|
+ &.s5 {
|
|
|
+ background-position-y: -160px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00449b;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+ .note {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
