src/views/portrait/detail.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>学生测练表现</span>
      </template>
    </back-box>
    <div class="answer-header">
      <div class="sel-box">
        <el-select
          v-if="role == 'ROLE_JIAOSHI'"
          class="sel"
          v-model="query.subjectNames"
          placeholder="选择科目"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          class="sel"
          multiple
          v-model="query.subjectNames"
          placeholder="选择科目"
          collapse-tags
          @change="changeSub"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="d1">
          <el-date-picker
            v-model="query.startDay"
            type="date"
            @change="handleChangeTimeStart"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          ~
          <el-date-picker
            v-model="query.endDay"
            type="date"
            placeholder="选择日期时间"
            @change="handleChangeTimeEnd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <p class="p1">
          <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']"
            >今天</span
          >
          <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']"
            >本周</span
          >
          <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']"
            >本月</span
          >
          <span @click="setDate(4)" :class="[date == 4 ? 'active' : '', 's1']"
            >本季度</span
          >
        </p>
        <el-button type="primary" round @click="_QueryData()">筛选</el-button>
      </div>
    </div>
    <div class="page-content">
      <p class="tips">
        {{ studentName }}（学号：{{ studentCode }}） 测练总次数：{{ count }}
      </p>
      <div class="chart" v-if="tableData.length">
        <template v-if="type == 1">
          <radarChart id="radarChart" :params="radarChartData" />
        </template>
        <template v-else>
          <lineChart id="lineChart" :params="lineChartData" :xAxis="xAxis" />
        </template>
      </div>
      <div class="tab-box">
        <el-table
          v-show="type == 1"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="subjectName"
            label="科目"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="examCount"
            label="参与测练数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="highestScore"
            label="班最高分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="avgScore"
            label="班平均分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="examScore"
            label="个人得分"
            align="center"
          ></el-table-column>
        </el-table>
        <el-table
          v-show="type == 2"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="课堂测练"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="examScore"
            label="个人成绩"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="avgScore"
            label="平均成绩"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="classRank"
            label="班级排名"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate } from "utils";
import radarChart from "@/components/charts/radarChart";
import lineChart from "@/components/charts/lineChart";
export default {
  components: { radarChart, lineChart },
  data() {
    return {
      role: "",
      id: "",
      studentName: "",
      studentCode: "",
      classId: "",
      subjectNames: [],
      type: 1,
      query: {
        //搜索条件
        subjectNames: [],
        startDay: "",
        endDay: "",
        day: "",
      },
      date: "",
      subjectList: [], //科目
      radarChartData: {
        indicator: [],
        num: [],
      },
      lineChartData: [
        {
          name: "班平均分",
          value: [95, 85, 90, 86, 92],
        },
        {
          name: "个人成绩",
          value: [90, 80, 95, 82, 95],
        },
        {
          name: "班级排名",
          value: [2, 3, 1, 5, 6],
        },
      ],
      xAxis: ["卷1", "卷2", "卷3", "卷4", "卷5"],
      tableData: [],
      count: 0, //测练数
    };
  },
  async created() {
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    this.id = this.$route.query.id;
    this.classId = this.$route.query.classId;
    this.studentCode = this.$route.query.studentCode;
    this.studentName = this.$route.query.studentName;
    if (this.role != "ROLE_JIAOSHI") {
      this.subjectNames = this.$route.query.subjectNames?.split() || [];
    } else {
      this.subjectNames = this.$route.query.subjectNames;
    }
    await this._QuerySubjectList();
    await this.setDate(1);
    let startDay = this.query?.startDay;
    if (!startDay) {
      this.query.startDay = new Date();
      this.query.endDay = new Date();
    }
  },
  methods: {
    changeSub(val) {
      let sub;
      if (val && val.length) {
        let leng = val.length - 1;
        sub = val[leng];
      }
      this.query.subjectNames = val.filter((item) => {
        return sub != "全部" ? item != "全部" : item == "全部";
      });
      this.type =
        this.query.subjectNames.length > 1
          ? 1
          : this.query.subjectNames[0] == "全部" && this.subjectList.length != 2
          ? 1
          : 2;
    },
    setDate(index) {
      const that = this;
      this.date = index == this.date ? "" : index;
      let aYear = new Date().getFullYear();
      let aMonth = new Date().getMonth() + 1;
      that.query.day = "";
      that.query.startDay = "";
      that.query.endDay = "";
      switch (index) {
        case 1:
          that.query.day = formatDate(new Date(), "yyyy-MM-dd");
          that.query.startDay = that.query.day;
          that.query.endDay = that.query.day;
          that.tabIndex = 1;
          break;
        case 2:
          let day = new Date().getDay();
          if (day == 0) {
            //中国式星期天是一周的最后一天
            day = 7;
          }
          day--;
          let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
          that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 3:
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 4:
          if (aMonth > 0 && aMonth < 4) {
            aMonth = "1";
          } else if (aMonth > 3 && aMonth < 7) {
            aMonth = "4";
          } else if (aMonth > 6 && aMonth < 10) {
            aMonth = "7";
          } else {
            aMonth = "10";
          }
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
      }
      this.page = 1;
      this._QueryData();
    },
    handleChangeTimeStart(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.endDay) {
        if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.startDay = "";
        }
      }
    },
    handleChangeTimeEnd(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.startDay) {
        if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.endDay = "";
        }
      }
    },
    async _QuerySubjectList() {
      let subjectList =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pSubjectList
          : this.$request.tSubjectList;
      const { data, status, info } = await subjectList({
        classId: this.classId,
      });
      if (status === 0) {
        this.subjectList =
          data.subjectNames?.map((item) => {
            return {
              value: item,
              label: item,
            };
          }) || [];
        if (this.role != "ROLE_JIAOSHI") {
          this.subjectList.unshift({
            value: "全部",
            label: "全部",
          });
          if (this.subjectNames.length == 0) {
            this.query.subjectNames.push(this.subjectList[0]?.value);
          } else {
            this.query.subjectNames = [...this.subjectNames];
          }
          this.type =
            this.query.subjectNames.length > 1
              ? 1
              : this.query.subjectNames[0] == "全部" &&
                this.subjectList.length != 2
              ? 1
              : 2;
        } else {
          if (!this.subjectNames) {
            this.query.subjectNames = this.subjectList[0]?.value;
          } else {
            this.query.subjectNames = this.subjectNames;
          }
        }
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      this.loading = true;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          query[key] = this.query[key];
        }
      }
      delete query.subjectNames;
      let subjectNames;
      if (this.role != "ROLE_JIAOSHI") {
        if (
          this.query.subjectNames.length == 1 &&
          this.query.subjectNames[0] == "全部"
        ) {
          subjectNames = this.subjectList
            .filter((item) => {
              return item.value != "全部";
            })
            .map((item) => {
              return item.value;
            });
        } else {
          subjectNames = [...this.query.subjectNames];
        }
      } else {
        subjectNames = [this.query.subjectNames];
      }
      let studentExamReport =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pStudentExamReport
          : this.$request.tStudentExamReport;
      const { data, status, info } = await studentExamReport({
        studentId: this.id,
        subjectNames: subjectNames,
        ...query,
      });
      this.loading = false;
      if (status === 0) {
        this.count = 0;
        this.tableData = data.list || [];
        if (this.type == 1) {
          this.radarChartData.indicator = [];
          this.radarChartData.num = [
            { name: "班最高分", value: [] },
            { name: "班平均分", value: [] },
            { name: "本人得分", value: [] },
          ];
          this.tableData.map((item) => {
            this.count += item.examCount;
            this.radarChartData.indicator.push({
              name: item.subjectName,
            });
            this.radarChartData.num[0].value.push(item.highestScore);
            this.radarChartData.num[1].value.push(item.avgScore);
            this.radarChartData.num[2].value.push(item.examScore);
          });
        } else {
          this.count = data.count;
          this.xAxis = [];
          this.lineChartData = [
            { name: "班平均分", value: [] },
            { name: "个人成绩", value: [] },
            { name: "班级排名", value: [] },
          ];
          this.tableData.map((item) => {
            this.xAxis.push(item.title);
            this.lineChartData[0].value.push(item.avgScore);
            this.lineChartData[1].value.push(item.examScore);
            this.lineChartData[2].value.push(item.classRank);
          });
        }
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  padding: 0 20px;
}
.tips {
  padding-left: 20px;
  font-size: 16px;
  color: #a3a4a8;
  font-weight: 400;
  font-style: normal;
}
.chart {
  height: 300px;
}
.tab-box {
  padding: 20px;
}
</style>