GCLS_Page_Learn/src/views/live/teacher/CompleteList.vue

<template>
  <el-dialog
    class="complete-list"
    :visible="dialogVisibleComplete"
    width="900px"
    title="答题统计"
    :close-on-click-modal="false"
    @close="dialogCompleteClose"
  >
    <div class="complete-list-top">
      <div class="material-name">{{ material_name }}</div>
      <div class="student-list">
        <i class="el-icon-arrow-left" @click="listMove('left')" />
        <div ref="avatar" class="avatar-list">
          <div ref="list" class="avatar-list-wrapper" :style="{ 'margin-left': marginLeft + 'px' }">
            <el-avatar
              v-for="item in student_list"
              :key="item.student_id"
              :class="{ active: curStudent === item.student_id }"
              icon="el-icon-user"
              :src="item.student_image_url"
            />
          </div>
        </div>
        <i class="el-icon-arrow-right" @click="listMove('right')" />
      </div>
    </div>

    <div class="complete-list-container">
      <template v-if="material_type === 'COURSEWARE'">
        <Bookquestion :context="context" />
      </template>
      <template v-else>
        <!-- pdf -->
        <template v-if="fileType === 'pdf'">
          <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf>
        </template>

        <template v-else-if="isImage(fileType)">
          <el-image fit="contain" :src="file_url_https" />
        </template>

        <template v-else-if="fileType !== 'pdf'">
          <iframe
            :src="'https://view.officeapps.live.com/op/view.aspx?src=' + `${file_url_https}`"
            width="100%"
            height="490px"
            scrolling="no"
          >
          </iframe>
        </template>
      </template>
    </div>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import pdf from 'vue-pdf';
import { GetCurMaterialSent, GetStudentList_FinishMaterial } from '@/api/live';
import { GetCoursewareContent_View } from '@/api/course';
import { GetFileStoreInfo } from '@/api/app';

export default {
  components: {
    pdf
  },
  props: {
    dialogVisibleComplete: {
      default: false,
      type: Boolean
    },
    taskId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      material_id: '',
      material_name: '',
      material_type: '',
      material_picture_url: '',
      context: null,
      file_relative_path: '',
      file_url_https: '',
      pdfSrc: '',
      numPages: 1,
      student_list: [],
      curStudent: '',
      listTimer: null,
      marginLeft: 0
    };
  },
  computed: {
    fileType() {
      return this.file_url_https.slice(
        this.file_url_https.lastIndexOf('.') + 1,
        this.file_url_https.length
      );
    }
  },
  watch: {
    dialogVisibleComplete(newVal) {
      if (newVal) {
        this.getCurMaterialSent();
      } else {
        // 对话框，关闭时清理
        clearInterval(this.listTimer);
        this.material_id = '';
        this.material_name = '';
        this.student_list = [];
        this.marginLeft = 0;
      }
    },
    material_id(newVal) {
      if (newVal) {
        this.listTimer = setInterval(() => {
          this.getStudentList_FinishMaterial();
        }, 3000);

        if (this.material_type === 'COURSEWARE') {
          this.getCoursewareContent_View();
        } else {
          this.getFileStoreInfo();
        }
      }
    }
  },
  methods: {
    getCurMaterialSent() {
      GetCurMaterialSent({ task_id: this.taskId }).then(
        ({ material_id, material_name, material_type, material_picture_url }) => {
          if (material_id !== undefined && material_id.length > 0) {
            this.material_id = material_id;
            this.material_name = material_name;
            this.material_type = material_type;
            this.material_picture_url = material_picture_url;
          }
        }
      );
    },

    getStudentList_FinishMaterial() {
      GetStudentList_FinishMaterial({
        task_id: this.taskId,
        material_id: this.material_id,
        material_type: this.material_type
      })
        .then(({ student_list }) => {
          this.student_list = student_list;
        })
        .catch(() => {
          clearInterval(this.listTimer);
        });
    },

    getCoursewareContent_View() {
      GetCoursewareContent_View({ id: this.material_id }).then(res => {
        if (res.content) {
          this.context = {
            id: this.currentCourse,
            ui_type: JSON.parse(res.content).question.ui_type,
            content: JSON.parse(res.content)
          };
        } else {
          this.context = null;
        }
      });
    },

    getFileStoreInfo() {
      GetFileStoreInfo({ file_id: this.material_id }).then(
        ({ file_relative_path, file_url_https }) => {
          this.file_relative_path = file_relative_path;
          this.file_url_https = file_url_https;
          let fileType = file_url_https.slice(
            file_url_https.lastIndexOf('.') + 1,
            file_url_https.length
          );
          if (fileType === 'pdf') {
            this.getNumPages(file_url_https);
          }
        }
      );
    },

    getNumPages(url) {
      let loadingTask = pdf.createLoadingTask(url);
      loadingTask.promise
        .then(pdf => {
          this.pdfSrc = loadingTask;
          this.numPages = pdf.numPages;
        })
        .catch(err => {
          console.error('pdf加载失败', err);
        });
    },

    dialogCompleteClose() {
      this.$emit('dialogCompleteClose');
    },

    isImage(type) {
      return ['jpeg', 'gif', 'jpg', 'png', 'bmp', 'pic', 'svg'].includes(type);
    },

    listMove(direction) {
      let w = this.$refs.list.clientWidth - this.$refs.avatar.clientWidth;
      if (w > 60) {
        let left = Number(this.$refs.list.style['margin-left'].slice(0, -2));
        let width = direction === 'right' ? left - 60 : left + 60;
        if (Math.abs(width) > w) width = -w;
        this.marginLeft = width > 0 ? 0 : width;
      }
    }
  }
};
</script>

<style lang="scss">
@import '~@/styles/mixin.scss';

.complete-list {
  @include dialog;

  &-top {
    .material-name {
      font-size: 16px;
      font-weight: 700;
      color: #000;
      margin-bottom: 16px;
    }

    .student-list {
      display: flex;
      justify-content: space-between;
      height: 44px;
      align-items: center;
      margin-bottom: 24px;
      overflow: hidden;

      .avatar-list {
        width: calc(100% - 48px);
        overflow: hidden;

        &-wrapper {
          display: inline-block;
          white-space: nowrap;

          .el-avatar {
            cursor: pointer;
            margin: 0 9px;
          }
        }
      }

      > i {
        font-size: 18px;
        cursor: pointer;
      }
    }
  }

  &-container {
    overflow: auto;
    height: calc(55vh - 117px);

    .el-image {
      width: 100%;
      height: calc(100% - 4px);
    }
  }
}
</style>