build: :white_check_mark: 体验用户训练报告

src/views/training/index.vue

@@ -5,7 +5,7 @@ import {GradeList} from "@/api/grade/types";
 import {TrainingItem, TrainingParams} from "@/api/training/types";
 import {getGradeSelect} from "@/api/grade";
 import {getTrainingLists} from "@/api/training";
-import {trimInput} from "@/utils";
+import {getUrlParam, trimInput} from "@/utils";
 
 const userStore = useUserStore();
 defineOptions({
@@ -22,6 +22,7 @@ const pageParams: TrainingParams = reactive({
   // 学生名称/手机号
   search: "",
 });
+const isFormal = ref(1);
 /**
  * 班级数据
  */
@@ -43,6 +44,7 @@ const trainingData = ref<TrainingItem[]>();
 const trainingCount = ref(0);
 async function getTrainingData(schoolId: number) {
   pageParams.school_id = schoolId;
+  isFormal.value = pageParams.is_formal;
   getTrainingLists(pageParams)
     .then(({data}) => {
       const {count, lists} = data;
@@ -118,7 +120,7 @@ watch(
                   '&type=' +
                   scope.row.device_id +
                   '&formal=' +
-                  pageParams.is_formal
+                  isFormal
                 "
                 class="table-btn"
                 >报告详情</router-link

src/views/training/result.vue

@@ -25,6 +25,7 @@ const pieData = ref<number[]>();
 const gameType = ref(Number(getUrlParam("type")));
 const games = ref<TrainingResult>();
 const chartStatus = ref(false);
+const dataMessage = ref("加载中...");
 async function getTrainingData() {
   const gameId = getUrlParam("id") || "0";
   const isFormal = getUrlParam("formal");
@@ -50,8 +51,12 @@ async function getTrainingData() {
       // 专注力分布饼图
       pieData.value = games.value?.percentage || [];
       chartStatus.value = true;
+      if (!games) {
+        dataMessage.value = "数据为空！";
+      }
     })
     .catch((error) => {
+      dataMessage.value = error.message;
       console.log(error);
     });
 }
@@ -62,7 +67,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="games" class="result-container">
+  <div v-if="chartStatus && games" class="result-container">
     <div class="result-title">
       <el-row class="box-card">
         <el-col :xs="12" :span="6" class="head">
@@ -325,6 +330,12 @@ onMounted(() => {
       </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>