baoman / Ezquiz_Platform

  <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"
            :tooltipFormatter="true"
          />

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

    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>