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 }}%</template></el-table-column>
        <el-table-column prop="correctRate" label="正确率" sortable align="center"><template slot-scope="scoped">{{
          scoped.row.correctRate }}%</template></el-table-column>
        <el-table-column prop="answerCorrectRate" label="已答正确率" sortable align="center"><template slot-scope="scoped">{{
          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 }}%</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 }}%</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 }}%</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]
            }}%</template>
          </el-table-column>
          <el-table-column align="center" :label="index == 0 ? '总正确率' : '正确率'" :prop="'correctRate' + item"><template
              slot-scope="scoped">{{ 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" />
        <RadarChart v-if="types == 3" id="askRadarChart" :params="chartData" />
      </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() {RadarChart
    if (this.types == 3) {
      this.chartData = {
        indicator: [
          {
            name: '', max: 100,
            axisLabel: {
              show: true,
              showMaxLabel: true,
              formatter: '{value}%'
            },
          },
        ],
        seriesData: []
      }
    }
  },
  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 = []
      this.xAxis = obj.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.chartTitle = obj.studentName + '-多科-多课时作答表现图'
      let subjectList = obj.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 })
          }
        }
      }
      this.chartData.seriesData = [
        {
          value: obj.dataList.map(item => item.participationRate),
          name: '参与度'
        },
        {
          value: obj.dataList.map(item => item.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>