src/views/standard/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">
        <div id="print-content">
          <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="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>
          </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>
        <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
            v-if="!this.$store.getters.code"
            @click="print"
            type="primary"
            plain
            round
            icon="el-icon-printer"
            >打印</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, tablePrint } 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: {
    print() {
      tablePrint("print-content");
    },
    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>