shuimu-dashboard-h5/src/views/student/result.vue

<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";
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,
});
// 数据状态
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);
});
watch(
  () => userStore.schoolId,
  (newValue) => {
    // 图表数据
    getChartData(newValue);
  }
);
</script>

<template>
  <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" :span="5">
          <div class="l1">
            <span>{{ chartData.name }}</span>
          </div>
          <div class="l2">{{ chartData.phone }}</div>
        </el-col>
        <el-col :xs="14" :span="5">
          <div class="l1">
            <span>{{ chartData.count }}</span>
          </div>
          <div class="l2">训练次数累计</div>
        </el-col>
        <el-col :xs="10" :span="6">
          <div class="l1">
            <span>{{ chartData.minute }}</span
            >分<span>{{ chartData.second }}</span
            >秒
          </div>
          <div class="l2">训练时长累计</div>
        </el-col>
        <el-col :xs="14" :span="8">
          <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 :xs="24" :span="7">
        <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="450px"
              height="350px"
              class="chart"
            />
          </template>
        </div>
      </el-col>
      <el-col :xs="24" :span="17">
        <div class="box-card">
          <div class="chart-title">专注力区间分布统计</div>
          <el-row class="chart-content">
            <el-col :xs="24" :span="7">
              <div class="charts">
                <CircleChart
                  id="resultChart1"
                  :key="chartData.height"
                  :data="chartData.height"
                  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" :span="7">
              <div class="charts">
                <DoubleChart
                  id="doubleChart1"
                  :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" :span="10">
              <div class="charts last">
                <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>
        </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="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 :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="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 :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="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 :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="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 :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="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>
</template>

<style lang="scss" scoped>
.download-btn {
  position: absolute;
  top: 4rem;
  right: 4rem;
  z-index: 99;
  width: 100px;
  height: 70px;
  line-height: 16px;
  text-align: center;

  span {
    display: inline-block;
    width: 100%;
  }
}

.mobile .download-btn {
  top: -50px;
  right: 30px;
}

.result-container {
  position: relative;
  padding: 30px;

  .empty {
    padding: 200px 0;
  }

  .box-card {
    position: relative;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 30px;
  }

  .result-title {
    width: 950px;
    font-size: 16px;
    white-space: nowrap;

    .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;
  }

  .chart-content {
    :nth-child(1) {
      order: 1;
    }

    :nth-child(2) {
      order: 2;
    }

    :nth-child(3) {
      order: 3;
    }
  }

  .charts {
    position: relative;
    padding-top: 74px;
    text-align: center;

    &.last {
      padding: 0;
    }

    .chart {
      margin: 0 auto;
    }

    p {
      margin: 5px 0 0;
    }
  }
}

.mobile {
  .result-title {
    width: 100%;
  }

  .result-chart {
    .chart-title {
      position: relative;
    }

    .box-card {
      margin-bottom: 20px;
    }

    .chart-content {
      :nth-child(1) {
        order: 1;
      }

      :nth-child(2) {
        order: 2;
      }

      :nth-child(3) {
        order: 0;
      }

      padding-bottom: 50px;
    }
  }
}

.note-box {
  .note-title {
    height: 54px;
    font-size: 18px;
    line-height: 54px;
    color: #09132e;
  }

  .box-card {
    position: relative;
    padding: 15px 34px;
    margin-bottom: 15px;

    .tit {
      margin-bottom: 20px;
      color: #4284f2;
    }

    p {
      margin: 0;
      font-size: 14px;
      line-height: 28px;
      color: #686d6d;
    }

    .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;
        margin-bottom: 12px;
        font-size: 18px;
        line-height: 42px;
        //font-weight: bold;
        color: #00449b;
        white-space: nowrap;
      }
    }

    .content {
      height: 140px;
    }

    .note {
      position: absolute;
      bottom: 15px;
    }
  }
}
</style>