feat: :sparkles: 测评数据学生默认头像

src/components/Charts/FocusBarChart.vue

@@ -61,11 +61,12 @@ const labelFormatter1 = (params: any) => {
 };
 const labelFormatter2 = (params: any) => {
   const label = labelFormatter(params);
-  const before = props?.dataSets?.[0]?.[params.dataIndex];
+  const data = <number[][]>props.dataSets;
+  const before = data[0]?.[params.dataIndex] || 0;
   if (params.value >= before) {
-    return `{a|${label.join(" ")} }{b|}`;
+    return `{a|${label.join(" ")}}{n|}{b|}`;
   } else {
-    return `{a|${label.join(" ")} }{c|}`;
+    return `{a|${label.join(" ")}}{n|}{c|}`;
   }
 };
 /**
@@ -145,7 +146,7 @@ const options = {
         rich: {
           a: {
             align: "right",
-            width: 250,
+            width: 240,
           },
           b: {
             height: 11,
@@ -165,6 +166,10 @@ const options = {
                 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAWlBMVEUAAADlGhrmGRnnGBjmGRnmFxflGhrlGhrlGhrmGhrlGRnlGRnmGRnlGRnhGRniExPVAADlGRnlGRnlGhrlGhrkGhrmGRnmGhrkGRnnGBjiGRnmGhroFxflGhqoh8GtAAAAHXRSTlMA+ftIREH62tC4mHx4UhQNBvLp5MaqoYxxPz4oIdaT/FMAAABeSURBVAjXVcw3EsNADMVQUDlLzhH3v6Y9O1tIqMhXfKaZfQNTVLv/How2NbmtN3gXRpb1qi2Uf3kBLJ12C1CFUcK31X4FkhT156K3DUjSeDrrQC7t6AMOMnJofubjB6mhBJ/theqpAAAAAElFTkSuQmCC",
             },
           },
+          n: {
+            align: "right",
+            width: 20,
+          },
         },
       },
     },

src/views/evaluation/index.vue

@@ -49,25 +49,32 @@ async function getStudentData(schoolId: number) {
         // 获取第一个学生图表
         changeStudent(studentActive.value);
       } else {
-        studentStatus.value = studentSearch.value != "";
+        changeStudent(0);
+        studentStatus.value = (studentSearch.value != "");
         studentMessage.value = "学校学生还未进行过测评，暂无测评数据！";
       }
     })
     .catch((error) => {
-      console.log(error.message);
+      changeStudent(0);
+      studentMessage.value = error.message;
       studentStatus.value = studentSearch.value != "";
+      console.log(error.message);
     });
 }
 function getStudentSearch() {
   getStudentData(userStore.schoolId);
 }
-function changeStudent(studentId) {
+function changeStudent(studentId:number) {
   studentActive.value = studentId;
   // 切换学生图表
   if (studentId > 0) {
     // 图表数据
     getMidChartData(userStore.schoolId, studentId);
     getBtmChartData(userStore.schoolId, studentId);
+  } else {
+    midStatus.value = false;
+    btmStatus.value = false;
+    chartStatus.value = false;
   }
 }
 /**
@@ -137,10 +144,10 @@ async function getBtmChartData(schoolId: number, babyId: number) {
       // 3维放松度分析柱状图
       relaxData.value = [];
       relaxData.value?.push(btmData.value?.firstColumn || []);
-      relaxData.value?.push(btmData.value?.secondColumn || []);
+      relaxData.value?.push(btmData.value?.lastColumn || []);
       // 脑电评估检测指数分析看板
       indicatorsData.value = [];
-      indicatorsData.value?.push(btmData.value?.lastColumn || []);
+      indicatorsData.value?.push(btmData.value?.secondColumn || []);
       indicatorsData.value?.push(btmData.value?.lastSecondColumn || []);
       btmStatus.value = true;
       chartStatus.value = true;
@@ -167,7 +174,7 @@ onMounted(() => {
     <!-- 数据卡片 -->
     <template v-if="cardStatus">
       <EvaluateCard
-        :key="cards.toString()"
+        :key="cards?.toString()"
         :focuses="cards?.brainCount || 0"
         :students="cards?.studentCount || 0"
         :trainings="cards?.eegCount || 0" />
@@ -183,7 +190,7 @@ onMounted(() => {
             @input="(value:string) => (studentSearch = trimInput(value))" />
           <el-button size="large" type="primary" @click="getStudentSearch()">查找</el-button>
         </div>
-        <div v-if="studentData?.length > 0" class="result">
+        <div v-if="studentData && studentData?.length > 0" class="result">
           <el-scrollbar height="700px">
             <div
               v-for="item in studentData"
@@ -191,7 +198,7 @@ onMounted(() => {
               class="scroll-item"
               :class="{active: item.id === studentActive}"
               @click="changeStudent(item.id)">
-              <img src="" alt="" />
+              <img src="../../assets/evaluate/default.png" alt="头像" />
               <p>{{ item.name }}</p>
               <p>{{ item.phone }}</p>
             </div>
@@ -206,102 +213,100 @@ onMounted(() => {
       </div>
       <!-- 图表展示-->
       <div v-if="chartStatus" class="student-chart">
-        <div class="title">儿童脑电专注力测评数据分析</div>
-        <el-row v-if="midStatus" :gutter="10">
-          <el-col :xs="24" :span="8">
-            <div class="box-card">
-              <RadarChart
-                id="radarChart1"
-                :key="radarMidData?.toString()"
-                :data-sets="radarMidData"
-                :star="radarMidStar"
-                :tag="Boolean(true)"
-                width="400px"
-                height="300px"
-                class="chart" />
-              <div class="info">5D脑电数据模型</div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :span="8">
-            <div class="box-card">
-              <FocusBarChart
-                id="focusBarChart1"
-                :key="focusData.toString()"
-                :data-sets="focusData"
-                :star="focusStar"
-                width="400px"
-                height="300px"
-                class="chart" />
-              <div class="info legend">
-                专注力四维分析
-                <div class="tag">
-                  <span class="t1">首次检测</span>
-                  <span class="t2">最近检测</span>
+        <template v-if="midStatus">
+          <div class="title">儿童脑电专注力测评数据分析</div>
+          <el-row :gutter="10">
+            <el-col :xs="24" :span="8">
+              <div class="box-card">
+                <RadarChart
+                  id="radarChart1"
+                  :key="radarMidData?.toString()"
+                  :data-sets="radarMidData"
+                  :star="radarMidStar"
+                  :tag="Boolean(true)"
+                  width="400px"
+                  height="300px"
+                  class="chart" />
+                <div class="info">5D脑电数据模型</div>
+              </div>
+            </el-col>
+            <el-col :xs="24" :span="8">
+              <div class="box-card">
+                <FocusBarChart
+                  id="focusBarChart1"
+                  :key="focusData?.toString()"
+                  :data-sets="focusData"
+                  :star="focusStar"
+                  width="400px"
+                  height="300px"
+                  class="chart" />
+                <div class="info legend">
+                  专注力四维分析
+                  <div class="tag">
+                    <span class="t1">首次检测</span>
+                    <span class="t2">最近检测</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :span="8"></el-col>
-        </el-row>
-        <div class="title">脑电检测分析</div>
-        <el-row v-if="btmStatus" :gutter="10">
-          <el-col :xs="24" :span="8">
-            <div class="box-card">
-              <RadarChart
-                id="radarChart2"
-                :key="radarBtmData?.toString()"
-                :data-sets="radarBtmData"
-                :star="radarBtmStar"
-                :tag="Boolean(true)"
-                width="400px"
-                height="300px"
-                class="chart" />
-              <div class="info">5D脑电数据模型</div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :span="8">
-            <div class="box-card">
-              <RelaxBarChart
-                id="relaxBarChart1"
-                :key="relaxData.toString()"
-                :data-sets="relaxData"
-                class="chart"
-                height="300px"
-                width="400px" />
-              <div class="info legend">
-                3维放松度分析
-                <div class="tag">
-                  <span class="t1">首次检测</span>
-                  <span class="t2">最近检测</span>
+            </el-col>
+            <el-col :xs="24" :span="8"></el-col>
+          </el-row>
+        </template>
+        <template v-if="btmStatus">
+          <div class="title">脑电检测分析</div>
+          <el-row :gutter="10">
+            <el-col :xs="24" :span="8">
+              <div class="box-card">
+                <RadarChart
+                  id="radarChart2"
+                  :key="radarBtmData?.toString()"
+                  :data-sets="radarBtmData"
+                  :star="radarBtmStar"
+                  :tag="Boolean(true)"
+                  width="400px"
+                  height="300px"
+                  class="chart" />
+                <div class="info">5D脑电数据模型</div>
+              </div>
+            </el-col>
+            <el-col :xs="24" :span="8">
+              <div class="box-card">
+                <RelaxBarChart
+                  id="relaxBarChart1"
+                  :key="relaxData?.toString()"
+                  :data-sets="relaxData"
+                  class="chart"
+                  height="300px"
+                  width="400px" />
+                <div class="info legend">
+                  3维放松度分析
+                  <div class="tag">
+                    <span class="t1">首次检测</span>
+                    <span class="t2">最近检测</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          </el-col>
-          <el-col :xs="24" :span="8">
-            <div class="box-card">
-              <IndicatorsBarChart
-                id="indicatorsBarChart1"
-                :key="indicatorsData.toString()"
-                :data-sets="indicatorsData"
-                width="400px"
-                height="300px"
-                class="chart" />
-              <div class="info legend">
-                脑电评估检测指数分析看板
-                <div class="tag">
-                  <span class="t1">首次检测</span>
-                  <span class="t2">最近检测</span>
+            </el-col>
+            <el-col :xs="24" :span="8">
+              <div class="box-card">
+                <IndicatorsBarChart
+                  id="indicatorsBarChart1"
+                  :key="indicatorsData?.toString()"
+                  :data-sets="indicatorsData"
+                  width="400px"
+                  height="300px"
+                  class="chart" />
+                <div class="info legend">
+                  脑电评估检测指数分析看板
+                  <div class="tag">
+                    <span class="t1">首次检测</span>
+                    <span class="t2">最近检测</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-      <div v-else class="student-chart">
-        <div class="empty">
-          <img src="../../assets/empty.png" alt="数据为空" />
-          <p>暂无测评记录！</p>
-        </div>
+            </el-col>
+          </el-row>
+        </template>
       </div>
     </div>
     <div v-else class="evaluate-chart empty">