src/views/ask/analysis.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>单课分析</span>
      </template>
    </back-box>
    <div class="page-content">
      <div class="tab-box">
        <span
          class="tab-item"
          :class="type == 1 ? 'active' : ''"
          @click="setType(1)"
          >答题表现</span
        >
        <span
          class="tab-item"
          :class="type == 2 ? 'active' : ''"
          @click="setType(2)"
          >学生问答表现</span
        >
        <span
          class="tab-item"
          :class="type == 3 ? 'active' : ''"
          @click="setType(3)"
          >学生互动表现</span
        >
        <span
          class="tab-item"
          :class="type == 4 ? 'active' : ''"
          @click="setType(4)"
          >签到明细</span
        >
      </div>
      <div v-loading="loading">
        <ul class="info" v-if="type == 1">
          <li class="info-item">科目：{{ detail.subjectName }}</li>
          <li class="info-item">课时：{{ detail.title }}</li>
          <li class="info-item">上课时间：{{ detail.startTime }}</li>
          <li class="info-item">下课时间：{{ detail.endTime }}</li>
          <li class="info-item">签到人数：{{ detail.answeredNum }}</li>
          <li class="info-item">题目总数：{{ detail.questionNum }}</li>
          <li class="info-item">答题总数：{{ detail.totalAnswersNum }}</li>
          <li class="info-item">课时时长：{{ detail.duration }}分钟</li>
          <li class="info-item">总参与度：：{{ detail.participationRate }}%</li>
          <li class="info-item">
            班级总正确率：{{ detail.classCorrectRate }}%
          </li>
          <li class="info-item">
            已答总正确率：{{ detail.answerCorrectRate }}%
          </li>
          <li class="info-item">
            反馈时长：{{ setDuration(detail.consumingDuration) }}
          </li>
        </ul>
        <el-table v-if="type == 1" :data="tableData" border style="width: 100%">
          <el-table-column prop="questionIndex" label="题号" align="center"
            ><template slot-scope="scoped"
              >Q{{ scoped.row.questionIndex }}</template
            ></el-table-column
          >
          <el-table-column prop="questionType" label="题型" align="center">
            <template slot-scope="scoped">{{
              setSubPro(scoped.row.questionType)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="answeredNum"
            label="答题人数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="correctAnswerNum"
            label="答对人数"
            sortable
            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="classCorrectRate"
            label="班级正确率"
            sortable
            align="center"
            ><template slot-scope="scoped"
              >{{ scoped.row.classCorrectRate }}%</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 prop="correctAnswer" label="正确答案" align="center">
            <template slot-scope="scoped">{{
              scoped.row.correctAnswer == 1
                ? "✓"
                : scoped.row.correctAnswer == 2
                ? "✗"
                : scoped.row.correctAnswer
            }}</template></el-table-column
          >
          <el-table-column prop="fallible" label="干扰答案" align="center"
            ><template slot-scope="scoped">{{
              scoped.row.fallible == 1
                ? "✓"
                : scoped.row.fallible == 2
                ? "✗"
                : scoped.row.fallible
            }}</template></el-table-column
          >
          <!-- <el-table-column prop="screenshot" label="题干" align="center">
            <template slot-scope="scoped">
              <el-image
                v-if="scoped.row.screenshot"
                style="width: 60px; height: 40px"
                :src="scoped.row.screenshot"
                :preview-src-list="[scoped.row.screenshot]"
              >
              </el-image><span v-else>暂无</span></template
          ></el-table-column> -->
        </el-table>
        <el-table v-if="type == 2" :data="tableData" 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>
          <el-table-column
            prop="answerTimes"
            label="答题次数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="duration"
            label="答题耗时"
            align="center"
          ><template slot-scope="scoped">{{setDuration(scoped.row.duration)}}</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>
        </el-table>
        <el-table v-if="type == 3" :data="tableData" 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>
          <el-table-column
            prop="rushAnswerTimes"
            label="抢答成功次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="rushAnswerCorrectTimes"
            label="答对次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="checkAnswerTimes"
            label="抽答次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="checkAnswerCorrectTimes"
            label="抽答答对次数"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="interactionsNum"
            label="参与得分"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="interactionsCorrectNum"
            label="对错得分"
            sortable
            align="center"
          ></el-table-column>
        </el-table>
        <el-table v-if="type == 4" :data="tableData" border style="width: 100%">
          <el-table-column
            prop="studentName"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="checkInTime"
            label="签到时间"
            sortable
            align="center"
          ></el-table-column>
          <el-table-column
            prop="makeUpTime"
            label="补签时间"
            sortable
            align="center"
          ></el-table-column>
        </el-table>
        <div class="pagination-box" v-show="type == 1">
          <el-pagination
            small=""
            layout="total,prev, pager, next"
            :hide-on-single-page="true"
            :total="total"
            @current-change="changePage"
            :current-page="page"
            :page-size="size"
          >
          </el-pagination>
        </div>
        <p class="down">
          <el-button
            @click="exportData"
            type="primary"
            plain
            round
            icon="fa fa-cloud-download"
            >导出报表</el-button
          >
          <!-- <el-button @click="edit" type="primary" round>修改答案</el-button> -->
        </p>
      </div>
    </div>
    <set-answer
      :diaVisible="dialogVisible"
      :questionList="form.questionList"
      :paperId="form.id"
      @saveSuccess="handleSuccess"
      @cancel="cancel"
    />
  </div>
</template>
<script>
import { downloadFile } from "@/utils";
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      id: "",
      type: 1,
      form: {
        id: "",
        questionList: [],
      },
      detail: {},
      tableData: [],
      optionsList: [],
      page: 1,
      size: 20,
      total: 0,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this._QueryData();
    this.periodDetail();
  },
  methods: {
    setType(type) {
      this.type = type;
      this.page = 1;
      this._QueryData();
    },
    setDuration(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
    },
    setSubPro(type) {
      let tit;
      switch (type) {
        case 2:
          tit = "单选题";
          break;
        case 3:
          tit = "多选题";
          break;
        case 4:
          tit = "判断题";
          break;
        case 5:
          tit = "主观题";
          break;
        default:
          tit = "其他";
      }
      return tit;
    },
    cancel() {
      this.dialogVisible = false;
    },
    handleSuccess() {
      this.dialogVisible = false;
      this._QueryData();
    },
    async edit() {
      if (this.editLoading) return;
      this.editLoading = true;
      const { data, status, info } = await this.$request.periodQuestionList({
        periodId: this.id,
      });
      this.editLoading = false;
      if (status === 0) {
        this.form.id = this.id;
        this.form.questionList = (data.list && [...data.list]) || [];
        this.dialogVisible = true;
      } else {
        this.$message.error(info);
      }
    },
    changePage(page) {
      this.page = page;
      this._QueryData();
    },
    async periodDetail() {
      let { data, info, status } = await this.$request.periodDetail({
        periodId: this.id,
      });
      if (status == 0) {
        this.detail = { ...data };
        this.detail.duration = this.detail.duration
          ? (this.detail.duration / 60).toFixed(2)
          : 0;
        this.detail.consumingDuration = this.detail.consumingDuration
          ? (this.detail.consumingDuration / 60).toFixed(2)
          : 0;
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      const queryData =
        this.type == 1
          ? this.$request.periodQuestionReport
          : this.$request.periodStudentReport;
      let query = {};
      if (this.type == 2) {
        query.type = 1;
      } else if (this.type == 3) {
        query.type = 2;
      } else if (this.type == 4) {
        query.type = 3;
      }
      this.loading = true;
      let { data, info, status } = await queryData({
        periodId: this.id,
        page: this.page,
        size: this.size,
        ...query,
      });
      this.loading = false;
      if (status === 0) {
        if (this.type == 2) {
          let optionsList = [];
          this.tableData = data?.list.map((item) => {
            let params = {};
            const 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;
            });
            return {
              ...item,
              ...params,
            };
          });
          this.optionsList = [...optionsList];
        } else {
          this.tableData = data?.list.sort((a,b)=>{
            return a.questionIndex-b.questionIndex
          });
        }
        this.total = data.count;
      } else {
        this.$message.error(info);
      }
    },
    //导出
    async exportData() {
      if (this.exportLoading == true) return;
      this.exportLoading = true;
      const data = await this.$request.exportPeriodReport({
        periodId: this.id,
      });
      this.exportLoading = false;
      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        downloadFile("随堂问-单课时报表.xlsx", blob);
      } else {
        this.$message.error("下载失败");
      }
    },
  },
};
</script>
<style>
div::-webkit-scrollbar {
  width: 3px;
  height: 10px;
}
div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}
</style>
<style lang="scss" scoped>
.down {
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.red{color:#f30}
.page-content {
  padding: 20px 20px 0;
}
.tab-box {
  width: 800px;
  margin: 0 auto 12px;
  background: #f8f8f8;
  border-radius: 20px;
  display: flex;
  .tab-item {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #666;
    font-weight: 500;
    background: transparent;
    border-radius: 20px;
    cursor: pointer;
    &.active {
      background: #667ffd;
      color: #fff;
    }
  }
}
.info {
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid #e2e2e2;
  border-top: 1px solid #e2e2e2;
  margin-bottom: 12px;
  .info-item {
    width: 25%;
    height: 50px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: #f8f8f8;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    line-height: 50px;
    text-align: center;
  }
}
</style>