shuimu-dashboard-h5/src/views/evaluation/index.vue

<script setup lang="ts">
import EvaluateCard from "@/views/evaluation/components/EvaluateCard.vue";
import RadarChart from "@/components/Charts/RadarChart.vue";
import FocusBarChart from "@/components/Charts/FocusBarChart.vue";
import RelaxBarChart from "@/components/Charts/RelaxBarChart.vue";
import IndicatorsBarChart from "@/components/Charts/IndicatorsBarChart.vue";
import {trimInput} from "@/utils";
import {ChartBtmData, ChartMidData, TopCard} from "@/api/evaluation/types";
import {getEvaluationBtm, getEvaluationMid, getEvaluationStudents, getEvaluationTop} from "@/api/evaluation";
import {useUserStore} from "@/store/modules/user";
import {StudentList} from "@/api/student/types";

defineOptions({
  name: "EvaluateIndex",
  inheritAttrs: false,
});
const userStore = useUserStore();
/**
 * 数据卡片
 */
const cardStatus = ref(false);
const cards = ref<TopCard>();
async function getDataCard(schoolId: number) {
  getEvaluationTop(schoolId)
    .then(({data}) => {
      cards.value = data;
      cardStatus.value = true;
    })
    .catch((error) => {
      cardStatus.value = true;
      console.log(error.message);
    });
}
/**
 * 学生数据
 */
const studentSearch = ref("");
const studentStatus = ref(false);
const studentMessage = ref("加载中...");
const studentActive = ref(0);
const studentData = ref<StudentList[]>();
async function getStudentData(schoolId: number) {
  getEvaluationStudents(schoolId, studentSearch.value)
    .then(({data}) => {
      studentData.value = <StudentList[]>data;
      if (data && studentData.value?.length > 0) {
        studentActive.value = studentData.value?.[0].id || 0;
        studentStatus.value = true;
        // 获取第一个学生图表
        changeStudent(studentActive.value);
      } else {
        changeStudent(0);
        studentStatus.value = studentSearch.value != "";
        studentMessage.value = "学校学生还未进行过测评，暂无测评数据！";
      }
    })
    .catch((error) => {
      changeStudent(0);
      studentMessage.value = error.message;
      studentStatus.value = studentSearch.value != "";
      console.log(error.message);
    });
}
function getStudentSearch() {
  getStudentData(userStore.schoolId);
}
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;
  }
}
/**
 * 图表数据
 */
const chartStatus = ref(false);
//中间部分图表
const midStatus = ref(false);
const midData = ref<ChartMidData>();
// 五维雷达图1
const radarMidData = ref<number[][]>();
const radarMidStar = ref<number[]>();
// 专注力四维柱状图
const focusData = ref<number[][]>();
const focusStar = ref([1, 2, 3, 4]);
async function getMidChartData(schoolId: number, babyId: number) {
  midStatus.value = false;
  getEvaluationMid(schoolId, babyId)
    .then(({data}) => {
      midData.value = data;
      // 五维雷达图
      radarMidData.value = [];
      if (midData.value?.lastRadar[0] && midData.value?.lastRadar[0].length > 0) {
        radarMidData.value?.push(midData.value?.lastRadar[0] || []);
        radarMidStar.value = midData.value?.lastRadar[1] || [];
      } else {
        radarMidStar.value = midData.value?.firstRadar[1] || [];
      }
      radarMidData.value?.push(midData.value?.firstRadar[0] || []);
      // 专注力四维柱状图
      focusData.value = [];
      focusData.value?.push(midData.value?.firstColumnar || []);
      focusData.value?.push(midData.value?.lastColumnar || []);

      midStatus.value = true;
      chartStatus.value = true;
    })
    .catch((error) => {
      midStatus.value = false;
      console.log(error.message);
    });
}
//底部图表、
const btmStatus = ref(false);
const btmData = ref<ChartBtmData>();
// 五维雷达图2
const radarBtmData = ref<number[][]>();
const radarBtmStar = ref<number[]>();
// 3维放松度分析柱状图
const relaxData = ref<number[][]>();
// 脑电评估检测指数分析看板
const indicatorsData = ref<number[][]>();
async function getBtmChartData(schoolId: number, babyId: number) {
  btmStatus.value = false;
  getEvaluationBtm(schoolId, babyId)
    .then(({data}) => {
      btmData.value = data;
      // 五维雷达图2
      radarBtmData.value = [];
      if (btmData.value?.lastRadar[0] && btmData.value?.lastRadar[0].length > 0) {
        radarBtmData.value?.push(btmData.value?.lastRadar[0] || []);
        radarBtmStar.value = btmData.value?.lastRadar[1] || [];
      } else {
        radarBtmStar.value = btmData.value?.firstRadar[1] || [];
      }
      radarBtmData.value?.push(btmData.value?.firstRadar[0] || []);
      // 3维放松度分析柱状图
      relaxData.value = [];
      relaxData.value?.push(btmData.value?.firstColumn || []);
      relaxData.value?.push(btmData.value?.lastColumn || []);
      // 脑电评估检测指数分析看板
      indicatorsData.value = [];
      indicatorsData.value?.push(btmData.value?.secondColumn || []);
      indicatorsData.value?.push(btmData.value?.lastSecondColumn || []);
      btmStatus.value = true;
      chartStatus.value = true;
    })
    .catch((error) => {
      btmStatus.value = false;
      console.log(error.message);
    });
}

onMounted(() => {
  if (userStore.schoolId > 0) {
    // 数据卡片
    getDataCard(userStore.schoolId);
    // 获取学生
    getStudentData(userStore.schoolId);
  }
});
</script>

<template>
  <div class="evaluate-container">
    <!-- 数据卡片 -->
    <!-- 数据卡片 -->
    <template v-if="cardStatus">
      <EvaluateCard
        :key="cards?.toString()"
        :focuses="cards?.brainCount || 0"
        :students="cards?.studentCount || 0"
        :trainings="cards?.eegCount || 0" />
    </template>
    <div v-if="studentStatus" class="evaluate-chart">
      <!-- 学生查找 -->
      <div class="student-search">
        <div class="search">
          <el-input
            v-model="studentSearch"
            placeholder="请输入学生名称或手机号码"
            size="large"
            @input="(value:string) => (studentSearch = trimInput(value))" />
          <el-button size="large" type="primary" @click="getStudentSearch()">查找</el-button>
        </div>
        <div v-if="studentData && studentData?.length > 0" class="result">
          <el-scrollbar height="700px">
            <div
              v-for="item in studentData"
              :key="item.id"
              class="scroll-item"
              :class="{active: item.id === studentActive}"
              @click="changeStudent(item.id)">
              <img src="../../assets/evaluate/default.png" alt="头像" />
              <p>{{ item.name }}</p>
              <p>{{ item.phone }}</p>
            </div>
          </el-scrollbar>
        </div>
        <div v-else class="result">
          <div class="empty">
            <img src="../../assets/empty.png" alt="数据为空" />
            <p>没有符合搜索条件的记录！</p>
          </div>
        </div>
      </div>
      <!-- 图表展示-->
      <div v-if="chartStatus" class="student-chart">
        <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>
            </el-col>
            <el-col :xs="24" :span="8" />
          </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>
            </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>
            </el-col>
          </el-row>
        </template>
      </div>
    </div>
    <div v-else class="evaluate-chart empty">
      <img src="../../assets/empty.png" alt="数据为空" />
      <p>{{ studentMessage }}</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.evaluate-container {
  position: relative;
  padding: 30px;
}

.empty {
  padding: 135px 0;
}

.evaluate-chart {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 800px;
  padding: 0 10px 20px 386px;
  background: #fff;
  border-radius: 30px;

  &.empty {
    padding: 200px 0;
  }
}

:deep(.el-input__wrapper) {
  background: #fff;
  border-radius: 12px;
  box-shadow: none !important;
}

.student-search {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 342px;
  height: 100%;
  padding-top: 34px;
  overflow: hidden;
  border: 1px solid #e6e8eb;
  border-radius: 30px;

  .el-input {
    width: 220px;
    margin: 0 10px 0 15px;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
  }

  :deep(.el-input__inner) {
    font-size: 14px;
  }

  .el-button {
    padding: 0 24px;
    font-size: 14px;
    border-radius: 12px;
  }

  .result {
    height: 700px;
    margin-top: 15px;

    .scroll-item {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: 70px;
      padding: 8px 0 0 90px;
      color: #23283c;
      cursor: pointer;

      &:hover {
        background: #e5eefe;
      }

      &.active {
        color: #4284f2;
        background: #e5eefe;
      }

      p {
        margin: 0;
        line-height: 27px;
      }

      img {
        position: absolute;
        top: 8px;
        left: 22px;
        width: 54px;
        height: 54px;
        background: #999;
        border: none;
        border-radius: 5px;
      }
    }
  }
}

.student-chart {
  .title {
    height: 54px;
    font-size: 18px;
    line-height: 54px;
    color: #23283c;
  }

  .box-card {
    box-sizing: border-box;
    height: 338px;
    overflow: hidden;
    background: #f3f6fd;
    border-radius: 20px;

    .info {
      height: 38px;
      font-size: 14px;
      line-height: 38px;
      color: #fff;
      text-align: center;
      background: #4284f2;

      &.legend {
        position: relative;
        box-sizing: border-box;
        padding-right: 180px;

        .tag {
          position: absolute;
          top: 0;
          right: 20px;
          white-space: nowrap;

          .t1::before,
          .t2::before {
            display: inline-block;
            width: 20px;
            height: 10px;
            margin: 0 4px 0 10px;
            content: "";
          }

          .t1::before {
            background: #f8b865;
          }

          .t2::before {
            background: #91cc75;
          }
        }
      }
    }
  }
}

.mobile {
  .student-search {
    width: 260px;

    .el-input {
      width: 140px;
    }
  }

  .evaluate-chart {
    padding-left: 270px;

    .el-col {
      margin-bottom: 10px;
    }
  }
}
</style>