wanzai_lingdaojiashi/src/components/student/studentCenter.vue

<template>
  <div class="container">
    <!-- 雷达图区域 -->
    <div class="top">
      <div class="top_chart" ref="radarChart"></div>

      <div class="top_select">
        <el-select
          v-model="examName"
          placeholder="请选择学期"
          @change="handleChange"
        >
          <el-option
            v-for="(item, index) in optionsExam"
            :key="index"
            :label="(item as any).name"
            :value="(item as any).id"
          />
        </el-select>
      </div>

      <!-- 教师寄语区域 -->
      <div class="top_msg">
        <div class="msg_title">教师寄语</div>
        <div class="msg_detail" :title="teacherMsg">
          {{ teacherMsg }}
        </div>
      </div>
    </div>

    <!-- 日常轨迹区域 -->
    <div class="bottom">
      <div class="bottom_title">
        <img src="@/assets/images/box-icon.png" />
        日常轨迹
      </div>

      <!-- 轨迹线展示区域 -->
      <div class="bottom_box">
        <!-- 每一个轨迹区域 -->
        <div
          v-for="(item, index) in trackList"
          :key="index"
          :class="index % 2 === 0 ? 'bottom_line' : 'bottom_line2'"
        >
          <div class="circle">
            <!-- 详细信息区域 -->
            <div class="detail">
              <div class="detail_img">
                <img
                  v-if="
                    item.type === '准时打卡' ||
                    item.type === '迟到打卡' ||
                    item.type === '超时打卡' ||
                    item.type === '请假'
                  "
                  src="@/assets/images/1.png"
                />
                <el-image
                  v-else
                  style="width: 38px; height: 45px"
                  :src="item.image"
                  :preview-src-list="[item.image]"
                  fit="cover"
                />
              </div>
              <div>
                <div>地址：</div>
                <div class="detail_address" :title="item.location">
                  {{ item.location }}
                </div>
              </div>
            </div>

            <!-- 时间区域 -->
            <div class="img">
              <span class="span">
                <el-icon size="12"><Clock /></el-icon>
              </span>
              <span class="text">{{ item.dateTime.slice(-14) }}</span>
            </div>
          </div>
          <span>—</span>
          <div class="small"></div>
          <span>—</span>
          <div class="small"></div>
          <span>—</span>
          <div class="small"></div>
          <span>—</span>
        </div>

        <!-- 没有数据时展示 -->
        <div class="bottom_nodata" v-if="!trackList.length">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import * as Echarts from "echarts";
// 引入用户肖像相关的接口
import {
  reqGetScoreInfo,
  reqGetTeacherMsg,
  reqGetTrackData,
  reqGetSemesterInfo,
} from "@/api/user/index";
// 引入解密函数
import { decryptDes } from "@/utils/des";

const $props = defineProps(["userId"]);

watch($props, () => {
  // console.log($props.userId);
});

const $route = useRoute();

// 雷达图实例
let myRaChart: any;
// 雷达图DOM
const radarChart = ref(null);

// 用户id
const userId = ref();
// 用户信息
const userInfo = ref();

// 雷达图数据数组
const valueList = ref<any>([]);
// 雷达图学科数据数组
const typeList = ref<any>([]);

// 教师寄语信息
const teacherMsg = ref("");

// 轨迹数组数据
const trackList = ref<any>([]);

// 当前选择的学期
const examName = ref("");

// 成绩统计学期筛选框数组
const optionsExam = ref<any>([]);

onMounted(() => {
  const obj = JSON.parse(decodeURIComponent($route.query.obj as string));
  userInfo.value = obj;

  // 获取用户id
  userId.value = obj.id;

  // 获取雷达图学期数组
  getSemesterInfo();

  // 获取教师寄语信息
  getTeacherMsg();
  // 获取日常轨迹
  getTrackData();
});

// 获取雷达图学期数组
const getSemesterInfo = async () => {
  const res = await reqGetSemesterInfo();
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    optionsExam.value = result;
    examName.value = optionsExam.value[0].id;

    // 获取学生各科成绩的平均分
    getScoreInfo();
  }
};

// 获取学生各科成绩的平均分
const getScoreInfo = async () => {
  const res = await reqGetScoreInfo({
    userId: userId.value,
    semesterId: examName.value,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);

    result.forEach((ele: any) => {
      valueList.value.push(ele.score);
      typeList.value.push({
        name: ele.subjectName,
        max: 150,
      });
    });

    // 初始化雷达图
    initRaChart();
  }
};

// 获取教师寄语信息
const getTeacherMsg = async () => {
  const res = await reqGetTeacherMsg({
    cardNo: userInfo.value.cardNo,
    termId: examName.value,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    teacherMsg.value = result.teacherMessage;
  }
};

// 获取日常轨迹
const getTrackData = async () => {
  const res = await reqGetTrackData({
    userId: userId.value,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);

    trackList.value = result;
  }
};

// 初始化雷达图
const initRaChart = () => {
  myRaChart = Echarts.init(radarChart.value);

  const options = {
    tooltip: {
      trigger: "item",
    },
    radar: {
      indicator: typeList.value,
      axisName: {
        color: "#fff",
        fontSize: 19.5,
      },
      splitArea: {
        areaStyle: {
          color: "none",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 1)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 1)",
        },
      },
    },
    series: [
      {
        type: "radar",
        name: "学习成绩",
        data: [
          {
            value: valueList.value,
            areaStyle: {
              color: "rgba(0, 209, 200, 0.5)",
            },
            symbol: "none",
          },
        ],
      },
    ],
    color: "rgba(0, 209, 200, 1)",
  };

  myRaChart.setOption(options);
};

// 筛选框切换回调
const handleChange = () => {
  myRaChart.dispose();
  typeList.value = [];
  valueList.value = [];
  getScoreInfo();
  getTeacherMsg();
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 800px;
  height: 834px;
  color: #fff;

  .top {
    position: relative;
    height: 530px;
    background-image: url(@/assets/images/box-bg6.png);
    background-size: 100% 100%;

    .top_chart {
      height: 407px;
    }

    .top_select {
      position: absolute;
      top: 0;
      left: 80px;
      width: 200px;
    }

    .top_msg {
      margin: auto;
      padding: 0 18px;
      width: 442px;
      height: 123px;
      background-color: rgba(212, 234, 250, 0.1);
      border: 1px solid rgba(212, 234, 250, 0.2);

      .msg_title {
        margin: 10px 0;
        font-size: 16px;
        font-weight: bold;
      }

      .msg_detail {
        font-size: 12px;
        line-height: 19px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
      }
    }
  }

  .bottom {
    padding: 17px 10px 0 22px;
    height: 272px;
    background-image: url(@/assets/images/box-bg4.png);
    background-size: 100% 100%;

    .bottom_title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      img {
        margin-right: 12px;
        width: 24px;
        height: 24px;
      }
    }

    .bottom_box {
      display: flex;
      height: 220px;
      overflow-x: auto;
      overflow-y: hidden;

      .bottom_line {
        display: inline-flex;
        align-items: center;
        height: 220px;

        .circle {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 2px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #70b7fa;
          background-color: #70b7fa;
          background-clip: content-box;

          .img {
            position: absolute;
            top: 82px;
            left: 0;
            display: flex;
            align-items: center;
            width: 121px;
            height: 18px;
            font-size: 10px;
            background-image: url(@/assets/images/line-bg.png);
            background-size: 100% 100%;

            .span {
              margin-top: 2px;
              margin-left: 20px;
              margin-right: 10px;
              color: #fff;
            }

            .text {
              color: #fff;
            }
          }

          .detail {
            position: absolute;
            top: 22px;
            left: 8px;
            display: flex;
            padding: 6px;
            width: 111px;
            height: 57px;
            color: #fff;
            font-size: 10px;
            background-color: rgba(112, 183, 250, 0.4);

            .detail_img {
              margin-right: 4px;
              width: 38px;
              height: 45px;

              img {
                width: 30px;
                height: 30px;
                object-fit: contain;
              }
            }

            .detail_address {
              margin-top: 4px;
              cursor: pointer;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
        }
        .circle::after {
          content: "";
          position: relative;
          top: 37px;
          left: 0;
          height: 74px;
          border-left: 1px solid #70b7fa;
        }

        span {
          color: #70b7fa;
        }

        .small {
          margin-top: 4px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #70b7fa;
        }
      }

      .bottom_line2 {
        display: inline-flex;
        align-items: center;
        height: 220px;

        .circle {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 2px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #70b7fa;
          background-color: #70b7fa;
          background-clip: content-box;

          .img {
            position: absolute;
            top: -82px;
            left: 0;
            display: flex;
            align-items: center;
            width: 121px;
            height: 18px;
            font-size: 10px;
            background-image: url(@/assets/images/line-bg.png);
            background-size: 100% 100%;

            .span {
              margin-top: 2px;
              margin-left: 20px;
              margin-right: 10px;
              color: #fff;
            }

            .text {
              color: #fff;
            }
          }

          .detail {
            position: absolute;
            top: -61px;
            left: 8px;
            display: flex;
            padding: 6px;
            width: 111px;
            height: 57px;
            color: #fff;
            font-size: 10px;
            background-color: rgba(112, 183, 250, 0.4);

            .detail_img {
              margin-right: 4px;
              width: 38px;
              height: 45px;

              img {
                width: 30px;
                height: 30px;
                object-fit: contain;
              }
            }

            .detail_address {
              margin-top: 4px;
              cursor: pointer;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
        }
        .circle::after {
          content: "";
          position: relative;
          top: -37px;
          left: 0;
          height: 74px;
          border-left: 1px solid #70b7fa;
        }

        span {
          color: #70b7fa;
        }

        .small {
          margin-top: 4px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #70b7fa;
        }
      }

      .bottom_nodata {
        margin: auto;
      }
    }
  }
}

/*定义滚动条样式（高宽及背景）*/
::-webkit-scrollbar {
  height: 10px;
}

/*定义滑块 样式*/
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(2, 27, 41, 0.8);
}

// 修改select背景颜色
::v-deep(.el-input__wrapper) {
  background: transparent;
  background-color: rgba(48, 75, 95, 0.5);
}

// 修改select筛选框文字颜色
::v-deep(.el-input__inner) {
  color: #fff;
}
</style>