src/views/basic/ask/components/answerQustion.vue

<template>
  <div>
    <el-table :data="resultData" border style="width: 100%">
      <el-table-column
        prop="studentCode"
        label="学号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="studentName"
        label="姓名"
        align="center"
      ></el-table-column>
      <template v-if="types == 1">
        <el-table-column
          prop="answerTimes"
          label="答题次数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="consumingDuration"
          label="答题耗时"
          align="center"
          ><template slot-scope="scoped">{{
            setDuration(scoped.row.consumingDuration)
          }}</template></el-table-column
        >
        <el-table-column
          prop="correctAnswerTimes"
          label="答对次数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="participationRate"
          label="参与度"
          sortable
          align="center"
          ><template slot-scope="scoped">{{
            `${scoped.row.participationRate}${
              scoped.row.participationRate ? "%" : ""
            }`
          }}</template></el-table-column
        >
        <el-table-column
          prop="correctRate"
          label="正确率"
          sortable
          align="center"
          ><template slot-scope="scoped">{{
            `${scoped.row.correctRate}${scoped.row.correctRate ? "%" : ""}`
          }}</template></el-table-column
        >
        <el-table-column
          prop="answerCorrectRate"
          label="已答正确率"
          sortable
          align="center"
          ><template slot-scope="scoped">{{
            `${scoped.row.answerCorrectRate}${
              scoped.row.answerCorrectRate ? "%" : ""
            }`
          }}</template></el-table-column
        >
        <el-table-column
          v-for="(item, index) in optionsList"
          :key="index"
          :label="'Q' + (index + 1)"
          align="center"
          ><template slot-scope="scoped">
            <span :class="scoped.row['isRight' + index] ? '' : 'red'">{{
              scoped.row["answer" + index]
            }}</span>
          </template>
        </el-table-column>
      </template>
      <template v-if="types == 2">
        <el-table-column
          prop="answerTimes"
          label="累计答题次数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="correctAnswerTimes"
          label="累计答对次数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="participationRate"
          label="总参与度"
          align="center"
          ><template slot-scope="scoped">{{
            `${scoped.row.participationRate}${
              scoped.row.participationRate ? "%" : ""
            }`
          }}</template></el-table-column
        >
        <el-table-column
          prop="participationRateRank"
          label="总参与度班名"
          align="center"
        ></el-table-column>
        <el-table-column prop="correctRate" label="总正确率" align="center"
          ><template slot-scope="scoped">{{
            `${scoped.row.correctRate}${scoped.row.correctRate ? "%" : ""}`
          }}</template></el-table-column
        >
        <el-table-column
          prop="correctRateRank"
          label="总正确率班名"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="answerCorrectRate"
          label="已答正确率"
          align="center"
          ><template slot-scope="scoped">{{
            `${scoped.row.answerCorrectRate}${
              scoped.row.answerCorrectRate ? "%" : ""
            }`
          }}</template></el-table-column
        >
        <el-table-column label="查看折线图" align="center">
          <template slot-scope="scoped">
            <el-button
              @click="openLineChart(scoped.row)"
              type="primary"
              size="mini"
              circle
              icon="el-icon-arrow-right"
            ></el-button
          ></template>
        </el-table-column>
      </template>
      <template v-if="types == 3">
        <el-table-column
          v-for="(item, index) in phaseOption"
          :key="index"
          :label="item"
          align="center"
        >
          <el-table-column
            align="center"
            :label="index == 0 ? '总课时数' : '课时数'"
            :prop="'periodCount' + item"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :label="index == 0 ? '总出题数' : '出题数'"
            :prop="'questionNum' + item"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :label="index == 0 ? '总参与度' : '参与度'"
            :prop="'participationRate' + item"
            ><template slot-scope="scoped"
              >{{
                `${
                  scoped.row["participationRate" + item]
                    ? scoped.row["participationRate" + item] + "%"
                    : ""
                }
              `
              }}{{
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="index == 0 ? '总正确率' : '正确率'"
            :prop="'correctRate' + item"
            ><template slot-scope="scoped">{{
              `${
                scoped.row["correctRate" + item]
                  ? scoped.row["correctRate" + item] + "%"
                  : ""
              }`
            }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="查看雷达图" align="center">
          <template slot-scope="scoped">
            <el-button
              @click="openRandarChart(scoped.row)"
              type="primary"
              size="mini"
              circle
              icon="el-icon-arrow-right"
            ></el-button
          ></template>
        </el-table-column>
      </template>
    </el-table>
    <el-dialog
      class="chart-dia"
      :visible.sync="chartDia"
      :title="chartTitle"
      width="800"
    >
      <div class="chart-box">
        <LineChart
          v-if="types == 2"
          id="askLineChart"
          :params="chartData"
          :xAxis="xAxis"
          :tooltipFormatter="true"
        />
        <RadarChart
          v-if="types == 3"
          id="askRadarChart"
          :params="chartData"
          :tooltipFormatter="true"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import LineChart from "@/components/charts/lineChart";
import RadarChart from "@/components/charts/radarChart";
export default {
  components: {
    LineChart,
    RadarChart,
  },
  props: {
    tableData: Array,
    types: Number,
    subjectNames: Array,
  },
  data() {
    return {
      optionsList: [],
      phaseOption: [], //问答补充数据
      //折线图
      chartDia: false,
      chartTitle: "",
      xAxis: [],
      chartData: [],
    };
  },
  computed: {
    resultData: function () {
      let resultData = [];
      if (this.tableData.length) {
        let optionsList = [];
        let subjectName = [];
        let rank = {};
        resultData = this.tableData.map((item) => {
          let params = {};
          if (this.types == 1) {
            const detail = item.detail ? JSON.parse(item.detail) : [];
            if (detail.length > optionsList.length) {
              optionsList = [...detail];
            }
            detail.map((items, index) => {
              params["isRight" + index] = items.isRight;
              params["answer" + index] =
                items.answer == 1
                  ? "✓"
                  : items.answer == 2
                  ? "✗"
                  : items.answer;
            });
          } else if (this.types == 3) {
            item.dataList.map((items, index) => {
              if (!subjectName.includes(items.subjectName)) {
                subjectName.push(items.subjectName);
              }
              params["answerCorrectRate" + items.subjectName] =
                items.answerCorrectRate;
              params["correctRate" + items.subjectName] = items.correctRate;
              params["participationRate" + items.subjectName] =
                items.participationRate;
              params["periodCount" + items.subjectName] = items.periodCount;
              params["questionNum" + items.subjectName] = items.questionNum;
            });
          }
          if (this.types != 3) {
            let participationRateArr = [];
            let correctRateArr = [];
            this.tableData.map((item) => {
              participationRateArr.push(item.participationRate);
              correctRateArr.push(item.correctRate);
            });
            participationRateArr = [...new Set(participationRateArr)];
            participationRateArr = participationRateArr.sort((a, b) => {
              return b - a;
            });
            correctRateArr = [...new Set(correctRateArr)];
            correctRateArr = correctRateArr.sort((a, b) => {
              return b - a;
            });
            let participationRateRank = participationRateArr.findIndex(
              (value) => {
                return item.participationRate == value;
              }
            );
            let correctRateRank = correctRateArr.findIndex((value) => {
              return item.correctRate == value;
            });
            rank = {
              participationRateRank: participationRateRank + 1,
              correctRateRank: correctRateRank + 1,
            };
          }
          return {
            ...item,
            ...params,
            ...rank,
          };
        });
        this.phaseOption = [...subjectName];
        this.optionsList = [...optionsList];
      } else {
        resultData = [];
        this.optionsList = [];
      }
      return resultData;
    },
  },
  created() {},
  methods: {
    setDuration(times) {
      if (times) {
        let m = parseInt(times / 1000 / 60);
        let s = parseInt((times / 1000) % 60);
        let ms = times;
        let aTime;
        if (times == 0) {
          aTime = `0`;
        } else {
          if (m == 0 && s == 0) {
            aTime = `${ms}毫秒`;
          } else if (m == 0 && s != 0) {
            aTime = `${s}秒`;
          } else if (m != 0 && s != 0) {
            aTime = `${m}分${s}秒`;
          }
        }
        return aTime;
      }
    },
    //查看折线图
    openLineChart(obj) {
      this.chartTitle = `${obj.studentName}-${this.subjectNames[0]}-多课时作答表现图`;
      this.chartDia = true;
      let participationRate = [];
      let correctRate = [];
      let answerCorrectRate = [];
      let dataList = obj.dataList;
      this.xAxis = dataList.map((item) => {
        participationRate.push(item.participationRate);
        correctRate.push(item.correctRate);
        answerCorrectRate.push(item.answerCorrectRate);
        return item.name;
      });
      this.chartData = [
        {
          name: "参与度",
          value: participationRate,
        },
        {
          name: "正确率",
          value: correctRate,
        },
        {
          name: "已答正确率",
          value: answerCorrectRate,
        },
      ];
    },
    openRandarChart(obj) {
      this.chartData = {
        indicator: [
          {
            name: "",
            max: 100,
            axisLabel: {
              show: true,
              showMaxLabel: true,
              formatter: "{value}%",
            },
          },
        ],
        seriesData: [],
      };
      this.chartTitle = obj.studentName + "-多科-多课时作答表现图";
      let dataList = obj.dataList.slice(1, obj.dataList.length);
      let subjectList = dataList.map((item) => item.subjectName);
      subjectList.map((item, index) => {
        if (index < 1) {
          this.chartData.indicator[index].name = item;
        } else {
          this.chartData.indicator.push({ name: item, max: 100 });
        }
      });
      // 为了美观
      if (this.chartData.indicator.length < 3) {
        let num = this.chartData.indicator.length;
        for (let i = 0; i < 6; i++) {
          if (i >= num) {
            this.chartData.indicator.push({ name: "", max: 100 });
          }
        }
      }
      let participationRate = dataList.map((item) => item.participationRate);
      let correctRate = dataList.map((item) => item.correctRate);
      this.chartData.seriesData = [
        {
          value: participationRate,
          name: "参与度",
        },
        {
          value: correctRate,
          name: "正确率",
        },
      ];
      this.chartDia = true;
    },
  },
};
</script>
<style lang="scss">
.red {
  color: #f30;
}
.chart-dia {
  .chart-box {
    width: 100%;
    height: 300px;
  }
  :deep(.el-dialog__body) {
    padding: 0 0 20px 0;
  }
}
</style>