build: 下载报告

src/api/student/index.ts

@@ -1,6 +1,6 @@
 import request from "@/utils/request";
 import {AxiosPromise} from "axios";
-import {StudentList, StudentParams} from "@/api/student/types";
+import {StudentBoard, StudentList, StudentParams} from "@/api/student/types";
 
 /**
  * 学生管理
@@ -12,4 +12,14 @@ export function getStudentLists(params: StudentParams): AxiosPromise<StudentList
 		method: "get",
 		params: params,
 	});
-}
+}
+/**
+ * 获取学生报告图表数据
+ */
+export function getStudentBoard(id: number, school_id: number): AxiosPromise<StudentBoard> {
+	return request({
+		url: "/board/v1/student/"+id,
+		method: "get",
+		params: { school_id: school_id},
+	});
+}

src/api/student/types.ts

@@ -30,4 +30,38 @@ export interface StudentItem extends StudentList{
 	create_time: string;
 	// 班级名称
 	grade_name: string;
+}
+/**
+ * 学生效果分析看板
+ */
+export interface StudentBoard {
+	// 学生名称
+	name: string;
+	// 电话号码
+	phone: number;
+	// 训练次数
+	count: number;
+	// 时间累计(分+秒)
+	minute: number;
+	second: number;
+	// 排序
+	sort: number;
+	// 训练前雷达图
+	front: number[],
+	// 训练后雷达图
+	after: number[],
+	// 高专注力状态数据占比
+	height: number,
+	// 整体高专注力状态数据累计条数
+	height_num: number,
+	// 专注力区间分布统计
+	percentage: number[],
+	//专注力脑电维度数据分析第一个值为专注力均值顺序和雷达图一致
+	eeg: StudentEEG[],
+}
+export interface StudentEEG {
+	// 训练前
+	front: number[],
+	// 训练后
+	after: number[],
 }

src/store/modules/permission.ts

@@ -139,6 +139,11 @@ const schoolRoutes: RouteRecordRaw[] = JSON.parse(
 				},
       ],
     },
+		{
+			path: "/download/student/result",
+			component: "student/download",
+			meta: { title: "下载报告预览", name: "StudentDownload2" , hidden: true},
+		},
     {
       path: "/equipment",
       component: "SchoolIndex",

src/utils/index.ts

@@ -10,7 +10,7 @@ export function isExternal(path: string) {
  * 获取URL参数值
  * @param name URL参数名称
  */
-function getUrlParam(name:string) {
+export function getUrlParam(name:string) {
 	let value = "";
 	const paramsStr = window.location.href.split('?')[1];
 	const paramArr = paramsStr.split('&');

src/views/charts-components/RadarChart.vue

@@ -24,6 +24,10 @@ const props = defineProps({
     type: String,
     default: "300px",
   },
+	color: {
+		type: String,
+		default: "#063b79",
+	},
   // dataSets:[[训练后],[训练前]]
   // dataSets:[[78,88,65,82,65],[28,38,45,32,25]]
   dataSets: {
@@ -46,7 +50,7 @@ const isCompare = props.dataSets?.length > 1;
 const globalColor = {
   default: "#ffb72d",
   before: "#937dff",
-  font: "#063b79",
+  font: props.color,
   white: "#ffffff",
   red: "#F45028",
   orange: "#FF9F29",

src/views/student/download.vue

@@ -4,40 +4,80 @@ 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";
+import {getUrlParam} from "@/utils";
+/**
+ * pnpm install html2canvas --save
+ * 导出页面内容为图片
+ */
+import {ref} from "vue";
+import {useUserStore} from "@/store/modules/user";
+import {getStudentBoard} from "@/api/student";
+import {StudentBoard} from "@/api/student/types";
+import html2canvas from "html2canvas";
+
+const userStore = useUserStore();
 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 dataStatus = ref(false);
+const dataMessage = ref("加载中...");
+let chartData:StudentBoard = reactive({});
 // 五维雷达图
-const radarData = ref([
-	[78, 88, 65, 82, 65],
-	[28, 38, 45, 32, 25],
-]);
-// 专注力分布饼图
-const pieData = ref([12, 18, 20, 28, 22]);
+let radarData:number[][] = reactive([]);
+async function getChartData(schoolId:number) {
+	// 从url获取学生Id
+	const studentId = Number(getUrlParam("id"))||0;
+	getStudentBoard(studentId, schoolId)
+		.then(({ data }) => {
+			chartData = <StudentBoard>{ ...data };
+			dataStatus.value = true;
+			radarData = [chartData.after, chartData.front];
+		})
+		.catch((error) => {
+			dataStatus.value = false;
+			dataMessage.value = error.message;
+			console.log(error.message);
+		});
+}
+function starElement(index:number, compare:number){
+	let star = 0;
+	let value = 0;
+	let tag = "";
+	if (compare == 0) {
+		star = chartData.eeg[index].front[1];
+		value = chartData.eeg[index].front[0];
+	} else {
+		star = chartData.eeg[index].after[1];
+		value = chartData.eeg[index].after[0];
+	}
+	if (star == 1) {
+		tag = "重度不足";
+	} else if (star == 2) {
+		tag = "轻度不足";
+	} else if (star == 3) {
+		tag = "中等水平";
+	} else if (star == 4) {
+		tag = "良好水平";
+	} else if (star == 5) {
+		tag = "优秀水平";
+	}
+	//return `<div class="star s${star}"></div><div class="status">${tag}</div>`;
+	return ["star s" + star, tag, value];
+}
 
-/**
- * pnpm install html2canvas --save
- * 导出页面内容为图片
- */
-import {  ref} from "vue";
-import html2canvas from "html2canvas";
+onMounted(() => {
+	// 图表数据
+	getChartData(userStore.schoolId);
+});
 // 绑定需要生成图片的页面内容
 const exportPage = ref();
 // 下载页面内容为图片
 const downloadHandle = ()=>{
 	// html2canvas(绑定的元素,{})
 	html2canvas(exportPage.value,{
-		backgroundColor:"#f5f5f5",//海报的背景颜色
+		backgroundColor:"#f3f6fd",//海报的背景颜色
 		useCORS:true, //允许跨域
 		width: document.querySelector(".result-container").offsetWidth , //生成海报的width,默认px
 		height: document.querySelector(".result-container").offsetHeight , //生成海报的height
@@ -53,56 +93,88 @@ const downloadHandle = ()=>{
 		saveElement.click();
 		// 下载之后删除临时a标签
 		saveElement.remove();
+	}).catch(e =>{
+		console.log(e)
 	})
 }
+const dialogTableVisible = ref(true);
 </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 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>
+		<div  class="download-btn">
+			<button @click="downloadHandle()">下载报告</button>
+			<router-link :to="'/student/result?id='+getUrlParam('id')" class="table-btn">返回训练效果分析</router-link>
 		</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
+		<div v-if="dataStatus" class="result-container">
+			<div class="result-title">
+				<el-row class="box-card">
+					<el-col :span="24">
+						<div class="l1"><span>{{ chartData.name }}</span></div>
+						<div class="l2">{{ chartData.phone }}</div>
+					</el-col>
+					<el-col :span="6">
+						<div class="l1"><span>{{ chartData.count }}</span></div>
+						<div class="l2">训练次数累计</div>
+					</el-col>
+					<el-col :span="7">
+						<div class="l1"><span>{{ chartData.minute }}</span>分<span>{{ chartData.second }}</span>秒</div>
+						<div class="l2">训练时长累计</div>
+					</el-col>
+					<el-col :span="11">
+						<div class="l1">前<span>{{ chartData.sort }}%</span></div>
+						<div class="l2">在所有通过训练的学员中你的位置是</div>
+					</el-col>
+				</el-row>
+			</div>
+
+			<el-row class="result-chart" :gutter="15">
+				<el-col :span="24">
+					<div class="box-card">
+						<div class="chart-title">5D脑电数据模型</div>
+						<template v-if="radarData.length > 0">
+							<RadarChart
+									id="radarChart"
+									:key="radarData.toString()"
+									:data-sets="radarData"
+									color="#4284f2"
+									width="690px"
+									height="480px"
+									class="chart"
+							/>
+						</template>
+					</div>
+				</el-col>
+				<el-col :span="24">
+					<div class="box-card">
+						<div class="chart-title">专注力区间分布统计</div>
+						<el-row>
+							<el-col :span="24">
+								<div class="charts">
+									<template v-if="chartData.percentage?.length>0">
+										<PieChart
+												id="pieChart"
+												:key="chartData.percentage.toString()"
+												:data="chartData.percentage"
+												width="690px"
+												height="400px"
+												class="chart"
+												title="专注力分布"
+										/>
+									</template>
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div class="charts last">
+									<CircleChart
 											id="resultChart1"
-											data="75"
+											:key="chartData.height"
+											:data="chartData.height"
 											height="220px"
 											width="220px"
 											color="#4284f2"
@@ -111,179 +183,188 @@ const downloadHandle = ()=>{
 											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
+									/>
+									<p>高专注力状态数据占比</p>
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div class="charts last">
+									<DoubleChart
 											id="doubleChart1"
-											data="258"
+											:key="chartData.height_num"
+											:data="chartData.height_num"
 											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" />
+									/>
+									<p>整体高专注力状态数据累计条数</p>
+								</div>
 							</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 class="note-box">
+				<div class="note-title">专注力脑电维度数据分析</div>
+				<el-row :gutter="15">
+					<el-col :span="24">
+						<div class="box-card">
+							<div class="tit">专注力平均值</div>
+							<el-row class="compare">
+								<el-col :span="11">
+									<p>训练前</p>
+									<div :class="starElement(0, 0)[0]"></div>
+									<div class="status">{{ starElement(0, 0)[1] }} <b>{{ starElement(0, 0)[2] }}</b></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="starElement(0, 1)[0]"></div>
+									<div class="status">{{ starElement(0, 1)[1] }} <b>{{ starElement(0, 1)[2] }}</b></div>
+								</el-col>
+							</el-row>
+							<p class="content">
+								通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+							</p>
+						</div>
+					</el-col>
+					<el-col :span="24">
+						<div class="box-card">
+							<div class="tit">高专注力占比</div>
+							<el-row class="compare">
+								<el-col :span="11">
+									<p>训练前</p>
+									<div :class="starElement(1, 0)[0]"></div>
+									<div class="status">{{ starElement(1, 0)[1] }} <b>{{ starElement(1, 0)[2] }}</b></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="starElement(1, 1)[0]"></div>
+									<div class="status">{{ starElement(1, 1)[1] }} <b>{{ starElement(1, 1)[2] }}</b></div>
+								</el-col>
+							</el-row>
+							<p class="content">
+								在进行学习和生活任务时，需要主观意志的努力，此时脑电静息电位会提高，专注度也会显示为60分以上，因此，将专注力60分以上定义为高专注区间，这代表高专注区间在整次训练中的占比。
+							</p>
+						</div>
+					</el-col>
+					<el-col :span="24">
+						<div class="box-card">
+							<div class="tit">专注力稳定度</div>
+							<el-row class="compare">
+								<el-col :span="11">
+									<p>训练前</p>
+									<div :class="starElement(2, 0)[0]"></div>
+									<div class="status">{{ starElement(2, 0)[1] }} <b>{{ starElement(2, 0)[2] }}</b></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="starElement(2, 1)[0]"></div>
+									<div class="status">{{ starElement(2, 1)[1] }} <b>{{ starElement(2, 1)[2] }}</b></div>
+								</el-col>
+							</el-row>
+							<p class="content">
+								在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
+							</p>
+						</div>
+					</el-col>
+
+					<el-col :span="24">
+						<div class="box-card">
+							<div class="tit">专注唤醒效率</div>
+							<el-row class="compare">
+								<el-col :span="11">
+									<p>训练前</p>
+									<div :class="starElement(3, 0)[0]"></div>
+									<div class="status">{{ starElement(3, 0)[1] }} <b>{{ starElement(3, 0)[2] }}</b></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="starElement(3, 1)[0]"></div>
+									<div class="status">{{ starElement(3, 1)[1] }} <b>{{ starElement(3, 1)[2] }}</b></div>
+								</el-col>
+							</el-row>
+							<p class="content">
+								通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+							</p>
+						</div>
+					</el-col>
+					<el-col :span="24">
+						<div class="box-card">
+							<div class="tit">整体和谐度</div>
+							<el-row class="compare">
+								<el-col :span="11">
+									<p>训练前</p>
+									<div :class="starElement(4, 0)[0]"></div>
+									<div class="status">{{ starElement(4, 0)[1] }} <b>{{ starElement(4, 0)[2] }}</b></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="starElement(4, 1)[0]"></div>
+									<div class="status">{{ starElement(4, 1)[1] }} <b>{{ starElement(4, 1)[2] }}</b></div>
+								</el-col>
+							</el-row>
+							<p class="content">
+								既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
+							</p>
+						</div>
+					</el-col>
+				</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>
+.download-btn{
+  position: absolute;
+  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;
+}
 .result-container {
+	background: #f3f6fd;
+	box-sizing: border-box;
+	width:750px;
+	margin:0 auto;
   position: relative;
   padding: 30px;
+  .empty{
+	padding: 200px 0;
+  }
   .box-card {
 	background: #ffffff;
 	border-radius: 30px;
@@ -291,7 +372,6 @@ const downloadHandle = ()=>{
 	position: relative;
   }
   .result-title {
-	width: 950px;
 	white-space: nowrap;
 	font-size: 16px;
 	.box-card {
@@ -312,6 +392,9 @@ const downloadHandle = ()=>{
 }
 .result-chart {
   margin-top: 12px;
+	.el-col{
+		margin-bottom: 15px;
+	}
   .chart-title {
 	position: absolute;
 	top: 20px;
@@ -320,9 +403,10 @@ const downloadHandle = ()=>{
 	color: #09132e;
   }
   .charts {
-	position: relative;
-	padding-top: 74px;
-	text-align: center;
+		position: relative;
+		padding-top: 74px;
+		margin:0 auto;
+		text-align: center;
 	&.last {
 	  padding: 0;
 	}
@@ -387,13 +471,13 @@ const downloadHandle = ()=>{
 		line-height: 42px;
 		white-space: nowrap;
 		font-size: 18px;
-		font-weight: bold;
+		//font-weight: bold;
 		color: #00449b;
 		margin-bottom: 12px;
 	  }
 	}
 	.content {
-	  height: 150px;
+	  height: 140px;
 	}
 	.note {
 	  position: absolute;

src/views/student/result.vue

@@ -4,50 +4,99 @@ 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";
+import {getUrlParam} from "@/utils";
+import {watch} from "vue";
+import {useUserStore} from "@/store/modules/user";
+import {getStudentBoard} from "@/api/student";
+import {StudentBoard} from "@/api/student/types";
+
+const userStore = useUserStore();
 defineOptions({
-  name: "StudentResult",
-  inheritAttrs: false,
+	name: "StudentResult",
+	inheritAttrs: false,
+});
+// 数据状态
+const dataStatus = ref(false);
+const dataMessage = ref("加载中...");
+let chartData:StudentBoard = reactive({});
+// 五维雷达图
+let radarData:number[][] = reactive([]);
+async function getChartData(schoolId:number) {
+	// 从url获取学生Id
+	const studentId = Number(getUrlParam("id"))||0;
+	getStudentBoard(studentId, schoolId)
+		.then(({ data }) => {
+			chartData = <StudentBoard>{ ...data };
+			dataStatus.value = true;
+			radarData = [chartData.after, chartData.front];
+		})
+		.catch((error) => {
+			dataStatus.value = false;
+			dataMessage.value = error.message;
+			console.log(error.message);
+		});
+}
+function starElement(index:number, compare:number){
+	let star = 0;
+	let value = 0;
+	let tag = "";
+	if (compare == 0) {
+		star = chartData.eeg[index].front[1];
+		value = chartData.eeg[index].front[0];
+	} else {
+		star = chartData.eeg[index].after[1];
+		value = chartData.eeg[index].after[0];
+	}
+	if (star == 1) {
+		tag = "重度不足";
+	} else if (star == 2) {
+		tag = "轻度不足";
+	} else if (star == 3) {
+		tag = "中等水平";
+	} else if (star == 4) {
+		tag = "良好水平";
+	} else if (star == 5) {
+		tag = "优秀水平";
+	}
+	//return `<div class="star s${star}"></div><div class="status">${tag}</div>`;
+	return ["star s" + star, tag, value];
+}
+
+onMounted(() => {
+	// 图表数据
+	getChartData(userStore.schoolId);
 });
-import { watch } from "vue";
-import { useUserStore } from "@/store/modules/user";
-const userStore = useUserStore();
 watch(
-  () => userStore.schoolId,
-  (newValue, oldValue) => {
-    console.log(newValue, oldValue);
-  }
+	() => userStore.schoolId,
+	(newValue) => {
+		// 图表数据
+		getChartData(newValue);
+	}
 );
-// 五维雷达图
-const radarData = ref([
-  [78, 88, 65, 82, 65],
-  [28, 38, 45, 32, 25],
-]);
-// 专注力分布饼图
-const pieData = ref([12, 18, 20, 28, 22]);
 </script>
 
 <template>
-  <div class="result-container">
-		<router-link to="/student/download" class="download-btn">
+  <div v-if="dataStatus" class="result-container">
+		<router-link :to="'/download/student/result?id='+getUrlParam('id')" class="download-btn">
 			<svg-icon icon-class="download" size="3rem"/>
 			<span>下载报告</span>
 		</router-link>
     <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>
+          <div class="l1"><span>{{ chartData.name }}</span></div>
+          <div class="l2">{{ chartData.phone }}</div>
         </el-col>
         <el-col :xs="14" :sm="5" :md="5">
-          <div class="l1"><span>25</span></div>
+          <div class="l1"><span>{{ chartData.count }}</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="l1"><span>{{ chartData.minute }}</span>分<span>{{ chartData.second }}</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="l1">前<span>{{ chartData.sort }}%</span></div>
           <div class="l2">在所有通过训练的学员中你的位置是</div>
         </el-col>
       </el-row>
@@ -57,13 +106,17 @@ const pieData = ref([12, 18, 20, 28, 22]);
       <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"
-          />
+					<template v-if="radarData.length > 0">
+						<RadarChart
+								id="radarChart"
+								:key="radarData.toString()"
+								:data-sets="radarData"
+								color="#4284f2"
+								width="450px"
+								height="350px"
+								class="chart"
+						/>
+					</template>
         </div>
       </el-col>
       <el-col :xs="24" :sm="17" :md="17">
@@ -74,7 +127,8 @@ const pieData = ref([12, 18, 20, 28, 22]);
               <div class="charts">
                 <CircleChart
                   id="resultChart1"
-                  data="75"
+									:key="chartData.height"
+                  :data="chartData.height"
                   height="220px"
                   width="220px"
                   color="#4284f2"
@@ -91,7 +145,8 @@ const pieData = ref([12, 18, 20, 28, 22]);
               <div class="charts">
                 <DoubleChart
                   id="doubleChart1"
-                  data="258"
+									:key="chartData.height_num"
+									:data="chartData.height_num"
                   height="220px"
                   width="220px"
                   color="#4e68b0"
@@ -102,14 +157,17 @@ const pieData = ref([12, 18, 20, 28, 22]);
             </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="专注力分布"
-                />
+								<template v-if="chartData.percentage?.length>0">
+									<PieChart
+											id="pieChart"
+											:key="chartData.percentage.toString()"
+											:data="chartData.percentage"
+											width="400px"
+											height="350px"
+											class="chart"
+											title="专注力分布"
+									/>
+								</template>
               </div>
             </el-col>
           </el-row>
@@ -126,22 +184,21 @@ const pieData = ref([12, 18, 20, 28, 22]);
             <el-row class="compare">
               <el-col :span="11">
                 <p>训练前</p>
-                <div class="star s1"></div>
-                <div class="status">重度不足</div>
+                <div :class="starElement(0, 0)[0]"></div>
+                <div class="status">{{ starElement(0, 0)[1] }} <b>{{ starElement(0, 0)[2] }}</b></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>
+								<div :class="starElement(0, 1)[0]"></div>
+								<div class="status">{{ starElement(0, 1)[1] }} <b>{{ starElement(0, 1)[2] }}</b></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">
@@ -150,24 +207,21 @@ const pieData = ref([12, 18, 20, 28, 22]);
             <el-row class="compare">
               <el-col :span="11">
                 <p>训练前</p>
-                <div class="star s2"></div>
-                <div class="status">中等不足</div>
+								<div :class="starElement(1, 0)[0]"></div>
+								<div class="status">{{ starElement(1, 0)[1] }} <b>{{ starElement(1, 0)[2] }}</b></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>
+								<div :class="starElement(1, 1)[0]"></div>
+								<div class="status">{{ starElement(1, 1)[1] }} <b>{{ starElement(1, 1)[2] }}</b></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">
@@ -176,22 +230,21 @@ const pieData = ref([12, 18, 20, 28, 22]);
             <el-row class="compare">
               <el-col :span="11">
                 <p>训练前</p>
-                <div class="star s3"></div>
-                <div class="status">轻度不足</div>
+								<div :class="starElement(2, 0)[0]"></div>
+								<div class="status">{{ starElement(2, 0)[1] }} <b>{{ starElement(2, 0)[2] }}</b></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>
+								<div :class="starElement(2, 1)[0]"></div>
+								<div class="status">{{ starElement(2, 1)[1] }} <b>{{ starElement(2, 1)[2] }}</b></div>
               </el-col>
             </el-row>
             <p class="content">
               在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
             </p>
-            <p class="note">专注力稳定度指在训练过程中，专注值的离散程度。</p>
           </div>
         </el-col>
 
@@ -201,24 +254,21 @@ const pieData = ref([12, 18, 20, 28, 22]);
             <el-row class="compare">
               <el-col :span="11">
                 <p>训练前</p>
-                <div class="star s4"></div>
-                <div class="status">良好</div>
+								<div :class="starElement(3, 0)[0]"></div>
+								<div class="status">{{ starElement(3, 0)[1] }} <b>{{ starElement(3, 0)[2] }}</b></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>
+								<div :class="starElement(3, 1)[0]"></div>
+								<div class="status">{{ starElement(3, 1)[1] }} <b>{{ starElement(3, 1)[2] }}</b></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">
@@ -227,29 +277,32 @@ const pieData = ref([12, 18, 20, 28, 22]);
             <el-row class="compare">
               <el-col :span="11">
                 <p>训练前</p>
-                <div class="star s1"></div>
-                <div class="status">重度不足</div>
+								<div :class="starElement(4, 0)[0]"></div>
+								<div class="status">{{ starElement(4, 0)[1] }} <b>{{ starElement(4, 0)[2] }}</b></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>
+								<div :class="starElement(4, 1)[0]"></div>
+								<div class="status">{{ starElement(4, 1)[1] }} <b>{{ starElement(4, 1)[2] }}</b></div>
               </el-col>
             </el-row>
             <p class="content">
               既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
             </p>
-            <p class="note">
-              整体和谐度指在专注训练过程中对于目标压力的管理水平和情绪稳定水平。
-            </p>
           </div>
         </el-col>
       </el-row>
     </div>
   </div>
+	<div v-else class="result-container">
+		<div class="empty">
+			<img src="../../assets/empty.png" alt="数据为空">
+			<p>{{ dataMessage }}</p>
+		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped>
@@ -267,6 +320,9 @@ const pieData = ref([12, 18, 20, 28, 22]);
 .result-container {
   position: relative;
   padding: 30px;
+	.empty{
+		padding: 200px 0;
+	}
   .box-card {
     background: #ffffff;
     border-radius: 30px;
@@ -370,13 +426,13 @@ const pieData = ref([12, 18, 20, 28, 22]);
         line-height: 42px;
         white-space: nowrap;
         font-size: 18px;
-        font-weight: bold;
+        //font-weight: bold;
         color: #00449b;
         margin-bottom: 12px;
       }
     }
     .content {
-      height: 150px;
+      height: 140px;
     }
     .note {
       position: absolute;