wanzai_lingdaojiashi/src/components/student/studentRight.vue

<template>
  <div class="container">
    <!-- 成绩统计区域 -->
    <div class="container_box">
      <div class="box_title">
        <img src="@/assets/images/box-icon.png" />
        成绩统计
      </div>

      <!-- 筛选框区域 -->
      <div class="box_select">
        <span>考试名称</span>
        <el-select
          v-model="examName"
          placeholder="请选择学期"
          style="width: 206px"
          @change="handleChange"
        >
          <el-option
            v-for="(item, index) in optionsTime"
            :key="index"
            :label="(item as any).totalName"
            :value="(item as any).totalName"
          />
        </el-select>
      </div>

      <!-- 图表展示区域 -->
      <div v-if="examName" class="box_chart" ref="barChart"></div>

      <!-- 没有数据时展示 -->
      <div v-if="!examName" class="box_nodata">暂无数据</div>
    </div>

    <!-- 考评记录区域 -->
    <div class="container_box">
      <div class="box_title">
        <img src="@/assets/images/box-icon.png" />
        考评记录
      </div>

      <div class="box_form form">
        <el-table :data="tableData">
          <el-table-column
            prop="time"
            label="考评时间"
            align="center"
            width="150"
          />
          <el-table-column prop="leave" label="考评等级" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

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

const $route = useRoute();

// 用户id
const userId = ref();
// 用户信息
const userInfo = ref();
// 柱状图实例
let myBarChart: any;
// 柱状图DOM
const barChart = ref();

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

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

// 图表X轴学科数组数据
const subjectList = ref<any>([]);

// 图表Y轴成绩数组数据
const valueList = ref<any>([]);

// 考评记录数组
const tableData = [
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
  {
    time: "2020-2021秋季",
    leave: "A",
  },
];

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

  // 获取考试名称数组
  getExamName();

  // 获取考评记录数据
  getEvaluateData();
});

// 获取考试名称数组
const getExamName = async () => {
  const res = await reqGetExamName({
    userId: userId.value,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    optionsTime.value = result;

    if (result.length) {
      examName.value = result[0].totalName;
      // 获取学生各科成绩
      getScoreInfo();
    }
  }
};

// 获取考评记录数据
const getEvaluateData = async () => {
  const res = await reqGetEvaluateData({
    cardNo: userInfo.value.cardNo,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
  }
};

// 获取学生各科成绩
const getScoreInfo = async () => {
  const temObj: any = optionsTime.value.find(
    (ele: any) => ele.totalName === examName.value
  );
  // console.log(temObj);

  const res = await reqGetHisExamData({
    userId: userId.value,
    semesterId: temObj.semesterId,
    examTypeId: temObj.examTypeId,
  });
  // console.log(res);

  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);

    if (result.length) {
      result.forEach((ele: any) => {
        subjectList.value.push(ele.subjectName);
        valueList.value.push(ele.score);
      });
    }

    // 初始化柱状图
    initBarChart();
  }
};

// 初始化柱状图
const initBarChart = () => {
  myBarChart = Echarts.init(barChart.value);

  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "13%",
      left: "8%",
      right: "4%",
      bottom: "18%",
    },
    xAxis: {
      type: "category",
      data: subjectList.value,
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 12,
        interval: 0,
        fontSize: 14,
        color: "#fff",
      },
    },
    yAxis: {
      name: "分数",
      nameTextStyle: {
        fontSize: 14,
        color: "#fff",
      },
      type: "value",
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(108, 128, 151, 0.5)",
        },
      },
    },
    series: [
      {
        data: valueList.value,
        type: "bar",
        barWidth: "60%",
        label: {
          show: true,
          position: "top",
          distance: 5,
          color: "#14B6F3",
          fontSize: 14,
        },
        itemStyle: {
          color: new Echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: "#0336FF" },
            { offset: 1, color: "#01B4FF" },
          ]),
        },
      },
    ],
  };

  myBarChart.setOption(options);
};

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

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

  .container_box {
    padding: 17px 0 0 22px;
    width: 500px;
    height: 412px;
    background-image: url(@/assets/images/box-bg5.png);
    background-size: 100% 100%;

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

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

    .box_select {
      display: flex;
      align-items: center;
      margin: 31px 0 31px 170px;
      font-size: 14px;

      span {
        margin-right: 13px;
      }
    }

    .box_chart {
      height: 270px;
    }

    .box_nodata {
      margin-top: 150px;
      text-align: center;
    }

    .box_form {
      padding-right: 44px;
      margin-top: 48px;
      height: 287px;
      overflow: hidden;
    }
  }
}

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

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

/*最外层透明*/
.form ::v-deep(.el-table),
.form ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.form ::v-deep(.el-table th),
.form ::v-deep(.el-table tr),
.form ::v-deep(.el-table td),
::v-deep(.el-table th.el-table__cell.is-leaf) {
  background-color: transparent !important;
  color: white;
  font-size: 12px;
  border-color: rgba(255, 255, 255, 0.1);
  height: 40px;
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(58, 126, 199, 0.5);
}
// 清除表格默认padding
::v-deep(.el-table .cell) {
  padding: 0;
}

// 动画滚动
// ::v-deep(.el-scrollbar__view) {
//   animation: run 12s linear infinite;
// }
</style>