build: 训练记录接口调试

src/api/training/index.ts

@@ -1,6 +1,6 @@
 import request from "@/utils/request";
 import {AxiosPromise} from "axios";
-import {TrainingManage, TrainingParams} from "@/api/training/types";
+import {TrainingManage, TrainingParams, TrainingResult} from "@/api/training/types";
 
 /**
  * 训练记录
@@ -14,3 +14,15 @@ export function getTrainingLists(params: TrainingParams): AxiosPromise<TrainingM
 	});
 }
 
+/**
+ * 训练报告
+ * /board/v1/detail?game_record_id=82967
+ */
+export function getTrainingResult(id: number): AxiosPromise<TrainingResult[]> {
+	return request({
+		url: "/board/v1/detail",
+		method: "get",
+		params: {game_record_id: id},
+	});
+}
+

src/api/training/types.ts

@@ -21,6 +21,7 @@ export interface TrainingParams {
 export interface TrainingItem {
 	name: string;
 	phone: string;
+	// 0：放松，其他：专注
 	device_id: number;
 	device_name: string;
 	create_time: string;
@@ -33,4 +34,77 @@ export interface TrainingManage {
 	lists: TrainingItem[];
 	// 数量
 	count: number;
+}
+
+export interface TrainingResult{
+	name: string;
+	phone: string;
+	minute: number; //分
+	second: number; //秒
+	device_name: string;//训练场景
+	create_time: string; //训练时间
+	height_value: number;//高专注力占比
+	att_average: number;//平均专注力
+	scope_diff: number;//专注力维持区间
+	interfere: number;//受干扰次数
+	radar: number[][];//雷达图
+	line: number[]; //脑电曲线图1
+	line_med: number[];//脑电曲线图2
+	amp: number[];//脑电曲线图3
+	percentage: number[];//专注力分布饼图
+	mean_content: {//专注力平均值描述和星星数
+		star: number;
+		content: string;
+	};
+	height_content: {//高专注占比描述
+		star: number;
+		content: string;
+	};
+	stable_content: {//稳定度描述
+		star: number;
+		content: string;
+	};
+	awaken_content: {//唤醒效率描述
+		star: number;
+		content: string;
+	};
+	linemed_content: {//整体和谐度
+		star: number;
+		content: string;
+	};
+	minDescription: string[]//大脑小贴士
+	height_med: string;//深度放松占比
+	average_med: string;//平均放松度
+	high_linemed: string;//最高放松度
+	scope_med: string;//放松度维持区间
+	stable_med: string;//放松度稳定度
+	average_content:{//放松度平均值描述和星星
+		star: number;
+		content: string;
+	}
+	height_med_content:{//深度放松占比描述
+		star: number;
+		content: string;
+	}
+	stable_med_content:{//放松度稳定度描述
+		star: number;
+		content: string;
+	}
+
+
+
+	"awaken": 40.82,
+	"stable": 56.17,
+	"linemed_value": 64.36,
+	"muse_advise ": "教养模式的稳定：教养模式的稳定同样也是建立孩子有足够安全感和稳定情绪的重要保证，在家庭成员比较多的情况下，切切不要当面一套、背面一套；一套统一的教养理念，一位教育决策人，其他家庭成员功能就是配合和不打扰。这需要整个家庭的共同磨合。",
+	"medPercentage": [
+	4.9,
+	36.27,
+	50,
+	8.82,
+	0
+],
+
+
+
 }

src/views/charts-components/FocusCircleChart.vue

@@ -32,6 +32,10 @@ const props = defineProps({
 		type: String,
 		default: "#e6e8f9",
 	},
+	title: {
+		type: String,
+		default: "高专注占比",
+	},
 	data: {
 		type: Number,
 		default: 0,
@@ -45,7 +49,7 @@ const options = {
 		show: true,
 		//text: props.data + "%",
 		text: [`{t1|${props.data}}`,"{t2|%}"].join(''),
-		subtext: "高专注占比",
+		subtext: props.title,
 		x: "center",
 		y: "35%",
 		textStyle: {

src/views/training/index.vue

@@ -121,7 +121,7 @@ watch(
         <el-table-column />
 				<el-table-column label="操作" align="center" >
 					<template #default="scope">
-						<router-link :to="'/training/result?id='+scope.row.game_record_id" class="table-btn">报告详情</router-link>
+						<router-link :to="'/training/result?id='+scope.row.game_record_id+'&type='+scope.row.device_id" class="table-btn">报告详情</router-link>
 					</template>
 				</el-table-column>
       </el-table>

src/views/training/result.vue

@@ -1,109 +1,159 @@
 <script setup lang="ts">
 import RadarChart from "@/views/charts-components/RadarChart.vue";
-import {watch} from "vue";
-import {useUserStore} from "@/store/modules/user";
 import FocusCircleChart from "@/views/charts-components/FocusCircleChart.vue";
 import CurveLineChart from "@/views/charts-components/CurveLineChart.vue";
 import SimplePieChart from "@/views/charts-components/SimplePieChart.vue";
-
+import {getUrlParam} from "@/utils";
+import {getTrainingResult} from "@/api/training";
+import {TrainingResult} from "@/api/training/types";
 defineOptions({
   name: "TrainingResult",
   inheritAttrs: false,
 });
-const userStore = useUserStore();
-watch(
-  () => userStore.schoolId,
-  (newValue, oldValue) => {
-    console.log(newValue, oldValue);
-  }
-);
+//占比
+const focusData = ref(0);
+const focusTitle = ref("");
 // 五维雷达图
-const radarData = ref([
-	[78, 88, 65, 82, 65],
-	[28, 38, 45, 32, 25],
-]);
-const radarStar = ref([1, 2, 3, 4, 5]);
+const radarData = ref<number[][]>();
+const radarStar = ref<number[]>();
 const radarTag = true;
+// 脑电曲线图
+const curveData = ref<number[][]>();
 // 专注力分布饼图
-const curveData = ref([
-	[78, 88, 65, 82, 65],
-	[28, 38, 45, 32, 25],
-	[12, 18, 20, 28, 22]
-]);
-// 专注力分布饼图
-const pieData = ref([12, 18, 20, 28, 22]);
+const pieData = ref<number[]>();
+
+
+const gameType = ref(getUrlParam("type"));
+let games = ref<TrainingResult>();
+const chartStatus = ref(false);
+async function getTrainingData() {
+	const gameId = <number>getUrlParam("id")||0;
+	getTrainingResult(gameId)
+		.then(({ data }) => {
+			games.value = <TrainingResult>{...data};
+			if(gameType.value == 0){
+				focusData.value = games.value.height_med;
+				focusTitle.value = "深度放松占比";
+			} else {
+				focusData.value = games.value.height_value;
+				focusTitle.value = "高专注占比";
+			}
+			// 五维雷达图
+			radarData.value = [];
+			radarData.value.push(games.value.radar[0]);
+			radarStar.value = games.value.radar[1];
+			// 专注力分布饼图
+			curveData.value = [];
+			curveData.value.push(games.value.line);
+			curveData.value.push(games.value.line_med);
+			curveData.value.push(games.value.amp);
+			// 专注力分布饼图
+			pieData.value = games.value.percentage;
+			chartStatus.value = true;
+		})
+		.catch((error) => {
+			console.log(error);
+		});
+}
+onMounted(() => {
+	//gameType.value = getUrlParam("type")
+	getTrainingData()
+});
 </script>
 
 <template>
-  <div class="result-container">
-    <div class="result-title">
+  <div v-if="games" class="result-container">
+    <div class="result-title" >
       <el-row class="box-card">
 				<el-col :sm="12" :md="6" class="head">
-					<div class="l1"><span>风间彻</span></div>
-					<div class="l2">13726628766</div>
+					<div class="l1"><span>{{ games.name }}</span></div>
+					<div class="l2">{{ games.phone }}</div>
 				</el-col>
         <el-col :sm="12" :md="4">
-          <div class="l1">30秒</div>
+          <div class="l1">{{ games.minute||0 }}分{{ games.second }}秒</div>
           <div class="l2">训练总时长</div>
         </el-col>
         <el-col :sm="6" :md="4">
-          <div class="l1">智脑水舞</div>
+          <div class="l1">{{ games.device_name }}</div>
           <div class="l2">训练场景</div>
         </el-col>
         <el-col :sm="6" :md="4">
-          <div class="l1">专注力</div>
+          <div class="l1">{{ gameType==0?"放松":"专注力" }}</div>
           <div class="l2">训练模式</div>
         </el-col>
         <el-col :sm="12" :md="6">
-          <div class="l1">2023-12-52 12:11:11</div>
+          <div class="l1">{{ games.create_time }}</div>
           <div class="l2">训练时间</div>
         </el-col>
       </el-row>
     </div>
 
     <el-row class="result-chart" :gutter="15">
-			<el-col :xs="24" :sm="12" :md="8">
+			<el-col v-if="games" :xs="24" :sm="12" :md="8">
 				<div class="box-card">
 					<div class="charts p-5">
-						<FocusCircleChart
-								id="focusCircleChart"
-								key="38.0"
-								data="38.0"
-								height="200px"
-								width="200px"
-								color="#4284f2"
-								bg-color="#e4e7f4"
-						/>
+						<template v-if="chartStatus">
+							<FocusCircleChart
+									id="focusCircleChart"
+									:key="focusData"
+									:data="focusData"
+									:title="focusTitle"
+									height="200px"
+									width="200px"
+									color="#4284f2"
+									bg-color="#e4e7f4"
+							/>
+						</template>
 					</div>
-					<el-row class="infos">
+					<el-row v-if="gameType==0" class="infos">
+						<el-col :span="5">
+							<div class="l1">{{ games.average_med }}</div>
+							<div class="l2">平均放松度</div>
+						</el-col>
+						<el-col :span="5">
+							<div class="l1">{{ games.high_linemed }}</div>
+							<div class="l2">最高放松度</div>
+						</el-col>
+						<el-col :span="7">
+							<div class="l1">{{ games.scope_med }}</div>
+							<div class="l2">放松度维持区间</div>
+						</el-col>
+						<el-col :span="7">
+							<div class="l1">{{ games.stable_med }}<i>次</i></div>
+							<div class="l2">放松度稳定指数</div>
+						</el-col>
+					</el-row>
+					<el-row v-else class="infos">
 						<el-col :span="8">
-							<div class="l1">96.12</div>
+							<div class="l1">{{ games.att_average }}</div>
 							<div class="l2">平均专注力</div>
 						</el-col>
 						<el-col :span="8">
-							<div class="l1">35</div>
+							<div class="l1">{{ games.scope_diff }}</div>
 							<div class="l2">专注力维持区间</div>
 						</el-col>
 						<el-col :span="8">
-							<div class="l1">30<i>次</i></div>
+							<div class="l1">{{ games.interfere }}<i>次</i></div>
 							<div class="l2">受干扰次数</div>
 						</el-col>
 					</el-row>
 				</div>
 			</el-col>
-			<el-col :xs="24" :sm="12" :md="8">
+			<el-col v-if="gameType!=0" :xs="24" :sm="12" :md="8">
         <div class="box-card">
           <div class="chart-title">5D脑电数据模型</div>
 					<div class="charts">
+						<template v-if="chartStatus">
 						<RadarChart
 								id="radarChart1"
+								:key="radarData.toString()"
 								:data-sets="radarData"
 								:star="radarStar"
 								:tag="radarTag"
 								width="450px"
 								height="350px"
 								class="chart"
-						/>
+						/></template>
 					</div>
         </div>
       </el-col>
@@ -111,104 +161,136 @@ const pieData = ref([12, 18, 20, 28, 22]);
 				<div class="box-card">
 					<div class="chart-title">脑电数值曲线</div>
 					<div class="charts">
+						<template v-if="chartStatus">
 						<CurveLineChart
 								id="curveLineChart"
+								:key="curveData.toString()"
 								:data-sets="curveData"
 								width="450px"
 								height="350px"
 								class="chart"
-						/>
+						/></template>
 					</div>
 				</div>
 			</el-col>
     </el-row>
-
-    <div class="note-box">
-      <el-row :gutter="15">
-        <el-col :xs="24" :sm="12" :md="8">
-          <div class="box-card">
-            <div class="tit">专注力平均值</div>
-						<div class="content">
-							<div class="star s1"></div>
-							<p>
-								这个阶段XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。
-							</p>
-							<p class="note">
-								通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
-							</p>
+		<template v-if="gameType==0">
+			<div  class="note-box">
+				<el-row :gutter="15">
+					<el-col :xs="24" :sm="12" :md="8">
+						<div class="box-card">
+							<div class="tit">深度平均放松度</div>
+							<div class="content">
+								<div :class="'star s'+games.average_content?.star"></div>
+								<p> {{ games.average_content?.content}}</p>
+								<p class="note">
+									这个阶段显示受测者处于一个相对正常的状态，并没有完全的放松下来，也没有完全的紧绷，处理学习或者工作事务是可以的，但如果你此时处于放松（正念）训练当中，那就远远不够了，继续加油哦！
+								</p>
+							</div>
 						</div>
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="12" :md="8">
-          <div class="box-card">
-            <div class="tit">高专注力占比</div>
-						<div class="content">
-							<div class="star s2"></div>
-							<p>
-								这个阶段XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。
-							</p>
-							<p class="note">
-								在进行学习和生活任务时，需要主观意志的努力，此时脑电静息电位会提高，专注度也会显示为60分以上，因此，将专注力60分以上定义为高专注区间，这代表高专注区间在整次训练中的占比。
-							</p>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8">
+						<div class="box-card">
+							<div class="tit">深度放松占比</div>
+							<div class="content">
+								<div :class="'star s'+games.height_med_content?.star"></div>
+								<p> {{ games.height_med_content?.content}}</p>
+								<p class="note">
+									这表明你在调配放松状态的能力弱，比较难进入深度放松状态，杂念太多，情绪不够稳定。必要时，请咨询服务老师哦。
+								</p>
+							</div>
 						</div>
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="12" :md="8">
-          <div class="box-card">
-            <div class="tit">专注力稳定度</div>
-						<div class="content">
-							<div class="star s3"></div>
-							<p>
-								这个阶段XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。
-							</p>
-							<p class="note">
-								在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
-							</p>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8">
+						<div class="box-card">
+							<div class="tit">放松度稳定度</div>
+							<div class="content">
+								<div :class="'star s'+games.stable_med_content?.star"></div>
+								<p> {{ games.stable_med_content?.content}}</p>
+								<p class="note">
+									这表明你的放松状态稳定状况不错，已经可以有意识的让自己的脑力得到一个简短的休整了，仍需进一步训练。
+								</p>
+							</div>
 						</div>
-          </div>
-        </el-col>
-
-        <el-col :xs="24" :sm="12" :md="8">
-          <div class="box-card">
-            <div class="tit">专注唤醒效率</div>
-						<div class="content">
-							<div class="star s4"></div>
-							<p>
-								这个阶段XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。
-							</p>
-							<p class="note">
-								通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
-							</p>
+					</el-col>
+				</el-row>
+			</div>
+		</template>
+		<template v-else>
+			<div  class="note-box">
+				<el-row :gutter="15">
+					<el-col :xs="24" :sm="12" :md="8">
+						<div class="box-card">
+							<div class="tit">专注力平均值</div>
+							<div class="content">
+								<div :class="'star s'+games.mean_content?.star"></div>
+								<p> {{ games.mean_content?.content}}</p>
+								<p class="note">
+									通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+								</p>
+							</div>
 						</div>
-          </div>
-        </el-col>
-        <el-col :xs="24" :sm="12" :md="8">
-          <div class="box-card">
-            <div class="tit">整体和谐度</div>
-						<div class="content">
-							<div class="star s5"></div>
-							<p>
-								这个阶段XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。
-							</p>
-							<p class="note">
-								既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
-							</p>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8">
+						<div class="box-card">
+							<div class="tit">高专注力占比</div>
+							<div class="content">
+								<div :class="'star s'+games.height_content?.star"></div>
+								<p> {{ games.height_content?.content}}</p>
+								<p class="note">
+									在进行学习和生活任务时，需要主观意志的努力，此时脑电静息电位会提高，专注度也会显示为60分以上，因此，将专注力60分以上定义为高专注区间，这代表高专注区间在整次训练中的占比。
+								</p>
+							</div>
 						</div>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8">
+						<div class="box-card">
+							<div class="tit">专注力稳定度</div>
+							<div class="content">
+								<div :class="'star s'+games.stable_content?.star"></div>
+								<p> {{ games.stable_content?.content}}</p>
+								<p class="note">
+									在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
+								</p>
+							</div>
+						</div>
+					</el-col>
 
+					<el-col :xs="24" :sm="12" :md="8">
+						<div class="box-card">
+							<div class="tit">专注唤醒效率</div>
+							<div class="content">
+								<div :class="'star s'+games.awaken_content?.star"></div>
+								<p> {{ games.awaken_content?.content}}</p>
+								<p class="note">
+									通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+								</p>
+							</div>
+						</div>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8">
+						<div class="box-card">
+							<div class="tit">整体和谐度</div>
+							<div class="content">
+								<div :class="'star s'+games.linemed_content?.star"></div>
+								<p>{{ games.linemed_content?.content}}</p>
+								<p class="note">
+									既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
+								</p>
+							</div>
+						</div>
+					</el-col>
+				</el-row>
+			</div>
+		</template>
 		<div class="note-box">
 			<el-row :gutter="15">
-				<el-col :xs="24" :sm="12" :md="8">
+				<el-col v-if="gameType!=0" :xs="24" :sm="12" :md="8">
 					<div class="box-card">
 						<div class="tit btm">大脑发展小贴士</div>
 						<div class="content">
-							<p>
-								这个阶段XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。
-								通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
-							</p>
+							<p v-if="games.minDescription?.length>0">{{ games.minDescription[0]}}</p>
+							<p v-if="games.minDescription?.length>1">{{ games.minDescription[1]}}</p>
 						</div>
 					</div>
 				</el-col>
@@ -216,20 +298,21 @@ const pieData = ref([12, 18, 20, 28, 22]);
 					<div class="box-card">
 						<div class="tit btm">专注力数值累计比例</div>
 						<div class="content flex">
-							<SimplePieChart
-									id="pieChart"
-									:data="pieData"
-									width="200px"
-									height="200px"
-									class="chart"
-									title="专注力数值比例"
-							/>
+							<template v-if="chartStatus">
+								<SimplePieChart
+										id="pieChart"
+										:data="pieData"
+										width="200px"
+										height="200px"
+										class="chart"
+										title="专注力数值比例"
+								/></template>
 							<div class="data">
-								<p><span class="tag">81-100</span>12分50秒 （8%）</p>
-								<p><span class="tag">61-80</span>12分50秒 （8%）</p>
-								<p><span class="tag">41-60</span>12分50秒 （8%）</p>
-								<p><span class="tag">21-40</span>12分50秒 （8%）</p>
-								<p><span class="tag">0-20</span>12分50秒 （8%）</p>
+								<p><span class="tag">81-100</span>（{{ pieData[4] }}）</p>
+								<p><span class="tag">61-80</span>（{{ pieData[3] }}）</p>
+								<p><span class="tag">41-60</span>（{{ pieData[2] }}）</p>
+								<p><span class="tag">21-40</span>（{{ pieData[1] }}）</p>
+								<p><span class="tag">0-20</span>（{{ pieData[0] }}）</p>
 							</div>
 						</div>
 					</div>