baoman / Ezquiz_Platform

  <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 / 60 }}分钟</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">
              反馈时长：{{ detail.consumingDuration / 60 }}分钟
            </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="correctAnswerNum"
              label="答题耗时"
              align="center"
            ></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>
          <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="info"
              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: [],
        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();
      },
      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 };
        } 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) {
          this.tableData = [...data?.list];
          this.total = data.count;
        } else {
          this.$message.error(info);
        }
      },
      //导出
      async exportData() {
        // if (this.exportLoading = true) return;
        this.exportLoading = true;
        const { data, status, info } = await this.$request.exportData();
        this.exportLoading = false;
        if (data) {
          downloadFile(this.detail.title + "报表", data);
        } else {
          this.$message.error(info);
        }

      },
    },
  };

  </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;
  }

  .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>