baoman / Ezquiz_Platform

  <template>
    <div>
      <back-box>
        <template slot="title">
          <span>学生测练表现</span>
        </template>
      </back-box>
      <div class="answer-header">
        <div class="sel-box">
          <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 {
        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.id = this.$route.query.id;
      this.classId = this.$route.query.classId;

      this.studentCode = this.$route.query.studentCode;
      this.studentName = this.$route.query.studentName;

      this.subjectNames = this.$route.query.subjectNames?.split(",") || [];

      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() {

        const { data, status, info } = await this.$request.pSubjectList({

          classId: this.classId,
        });
        if (status === 0) {
          this.subjectList =
            data.subjectNames?.map((item) => {
              return {
                value: item,
                label: item,
              };
            }) || [];
          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 {
          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.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];
        }
        const { data, status, info } = await this.$request.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>