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

<script setup lang="ts">
import { watch } from "vue";
import { useUserStore } from "@/store/modules/user";
import EvaluateCard from "@/views/evaluation/components/EvaluateCard.vue";
import RadarChart from "@/views/charts-components/RadarChart.vue";
import FocusBarChart from "@/views/charts-components/FocusBarChart.vue";
import RelaxBarChart from "@/views/charts-components/RelaxBarChart.vue";
import IndicatorsBarChart from "@/views/charts-components/IndicatorsBarChart.vue";

defineOptions({
  name: "EvaluateIndex",
  inheritAttrs: false,
});
const userStore = useUserStore();
watch(
  () => userStore.schoolId,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  }
);
/**
 * 数据卡片
 */
// 全部学生
const studentCount = 600;
// 设备套数
const focusCount = 50;
// 累计训练次数
const trainingCount = 200;

let studentInfo = ref("");

//
const data = ref([78, 88, 65, 82, 65]);
// 五维雷达图
const radarData = ref([
  [78, 88, 65, 82, 65],
  [28, 38, 45, 32, 25],
]);
const radarStar = ref([1, 2, 3, 4, 5]);
const radarTag = true;
// 专注力四维柱状图
const focusData = ref([
  [3.8, 4.7, 2.5, 5.0],
  [7.4, 8.3, 6.5, 9.0],
]);
const focusStar = ref([1, 2, 3, 4]);
// 3维放松度分析柱状图
const relaxData = ref([
  [50, 60, 55],
  [55, 90, 70],
]);
// 脑电评估检测指数分析看板
const indicatorsData = ref([
  [50, 60, 55, 64.5],
  [55, 90, 70, 82.5],
]);
</script>

<template>
  <div class="evaluate-container">
    <!-- 数据卡片 -->
    <EvaluateCard
      :students="studentCount"
      :focuses="focusCount"
      :trainings="trainingCount"
    />
    <div class="evaluate-chart">
      <!-- 学生查找 -->
      <div class="student-search">
        <div class="search">
          <el-input
            v-model="studentInfo"
            size="large"
            placeholder="请输入学生名称或手机号码"
          />
          <el-button size="large" type="primary">查找</el-button>
        </div>
        <div class="result">
          <ul>
            <li>
              <img src="" alt="" />
              <p>风间彻</p>
              <p>13726267788</p>
            </li>
            <li></li>
          </ul>
        </div>
      </div>
      <!-- 图表展示-->
      <div class="student-chart">
        <div class="title">儿童脑电专注力测评数据分析</div>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <div class="box-card">
              <RadarChart
                id="radarChart1"
                :data-sets="radarData"
                :star="radarStar"
                :tag="radarTag"
                width="400px"
                height="300px"
                class="chart"
              />
              <div class="info center">5D脑电数据模型</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <div class="box-card">
              <FocusBarChart
                id="focusBarChart1"
                :data-sets="focusData"
                :star="focusStar"
                width="400px"
                height="300px"
                class="chart"
              />
              <div class="info">专注力四维分析</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8"></el-col>
        </el-row>
        <div class="title">脑电检测分析</div>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <div class="box-card">
              <RadarChart
                id="radarChart2"
                :data-sets="radarData"
                :star="radarStar"
                :tag="radarTag"
                width="400px"
                height="300px"
                class="chart"
              />
              <div class="info center">5D脑电数据模型</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <div class="box-card">
              <RelaxBarChart
                id="relaxBarChart1"
                :data-sets="relaxData"
                width="400px"
                height="300px"
                class="chart"
              />
              <div class="info">3维放松度分析</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <div class="box-card">
              <IndicatorsBarChart
                id="indicatorsBarChart1"
                :data-sets="indicatorsData"
                width="400px"
                height="300px"
                class="chart"
              />
              <div class="info">脑电评估检测指数分析看板</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.evaluate-container {
  position: relative;
  padding: 30px;
}
.evaluate-chart {
  box-sizing: border-box;
  width: 100%;
  border-radius: 30px;
  background: #fff;
  position: relative;
  padding: 0 10px 20px 386px;
}
:deep(.el-input__wrapper) {
  background: #ffffff;
  border-radius: 12px;
}
:deep(.el-input__wrapper) {
  box-shadow: none !important;
}
.student-search {
  box-sizing: border-box;
  width: 342px;
  min-height: 100%;
  border: 1px solid #e6e8eb;
  border-radius: 30px;
  padding-top: 34px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  .el-input {
    width: 220px;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    margin: 0 10px 0 15px;
  }
  :deep(.el-input__inner) {
    font-size: 14px;
  }
  .el-button {
    font-size: 14px;
    padding: 0 24px;
    border-radius: 12px;
  }
  .result {
    margin-top: 15px;
    li {
      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 {
        line-height: 27px;
        margin: 0;
      }
      img {
        position: absolute;
        left: 22px;
        top: 8px;
        width: 54px;
        height: 54px;
        background: #999999;
        border-radius: 5px;
        border: none;
      }
    }
  }
}
.student-chart {
  .title {
    height: 54px;
    line-height: 54px;
    font-size: 18px;
    color: #23283c;
  }
  .box-card {
    height: 338px;
    box-sizing: border-box;
    background: #f3f6fd;
    border-radius: 20px;
    overflow: hidden;
    .info {
      height: 38px;
      line-height: 38px;
      font-size: 14px;
      background: #4284f2;
      color: #ffffff;
      &.center {
        text-align: center;
      }
    }
  }
}
</style>