detail.vue 2.83 KB
<template>
  <ul class="info" v-if="types == 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>
  <ul class="info" v-else-if="types == 2">
    <li class="info-item">科目:{{ detail.subjectName }}</li>
    <li class="info-item" v-if="id.length == 1">课时名称:{{ detail.title }}</li>
    <li class="info-item" v-else>课时总数:{{ id.length }}</li>
    <li class="info-item">课时时长:{{ detail.duration }}分钟</li>
    <li class="info-item">
      反馈时长:{{ setDuration(detail.consumingDuration) }}
    </li>
    <li class="info-item">题目总数:{{ detail.questionNum }}</li>
    <li class="info-item">答题总数:{{ detail.totalAnswersNum }}</li>
    <li class="info-item">
      班级总正确率:{{ detail.classCorrectRate }}%
    </li>
    <li class="info-item">
      已答总正确率:{{ detail.answerCorrectRate }}%
    </li>
    <li class="info-item">
      总参与度:{{ detail.participationRate }}%
    </li>

  </ul>
</template>
<script>
export default {
  props: {
    id: Array,
    types: Number,
    detail: Object,
  },
  methods: {
    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;
    },
  }
}
</script>
<style lang="scss" scoped>
.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>