EEP_BookPreview/src/views/book/courseware/preview/components/video_interaction/VideoInteractionPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="imageText-preview" :style="[getAreaStyle(), getComponentStyle()]">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
    <div v-if="data.video_list.length > 0" class="interaction-box">
      <video
        id="interaction-preview-video"
        :src="data.video_list[0].file_url"
        width="100%"
        height="400"
        controls
        controlsList="nodownload"
        @timeupdate="handleTimeUpdate"
      ></video>
    </div>
    <!-- v-if="Object.keys(this.userAnswer).length === data.file_info_list.length" -->
    <el-button
      type="primary"
      :style="{
        background:
          data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
        borderColor:
          data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
      }"
      @click="lookReport"
      >{{ convertText('查看答题报告') }}</el-button
    >
    <el-dialog
      v-if="visible"
      :visible.sync="visible"
      :show-close="false"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      width="80%"
    >
      <ExercisePreview :exercise_id="exercise_id" @handleCancle="handleClose" @submitAdd="submitAdd" />
      <!-- <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe> -->
    </el-dialog>
    <el-dialog
      v-if="reportFlag"
      :visible.sync="reportFlag"
      :show-close="true"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      :width="isMobile ? '100%' : '80%'"
      @close="handleClose"
    >
      <Report
        :report-result="reportResult"
        :exercise-list="exerciseList"
        :user-answer="userAnswer"
        :file-list="data.file_info_list"
        @handleCancle="handleClose"
      />
    </el-dialog>
  </div>
</template>

<script>
import ExercisePreview from './ExercisePreview.vue';
import Report from './Report.vue';
import PreviewMixin from '../common/PreviewMixin';
import { getVideoInteractionData } from '@/views/book/courseware/data/videoInteraction';
import { getConfig } from '@/utils/auth';
export default {
  name: 'VideoInteractionPreview',

  components: { ExercisePreview, Report },
  mixins: [PreviewMixin],
  props: {
    isMobile: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      data: getVideoInteractionData(),
      video_info: null,
      file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
      visible: false,
      newpath: '',
      iframeHeight: `${window.innerHeight - 100}px`,
      first: '',
      exercise_id: '',
      userAnswer: {}, // 用户答题答案
      exerciseList: {}, // 题目列表
      reportFlag: false,
      reportResult: {
        total: 0,
        right: 0,
        error: 0,
        rightRate: 0,
      },
    };
  },
  watch: {
    isJudgingRightWrong(val) {
      if (!val) return;
      this.userAnswer = this.answer.answer_list[0];
    },
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.data.file_info_list = this.data.file_info_list.sort((a, b) => Number(a.currentTime) - Number(b.currentTime));
      if (!this.isJudgingRightWrong) {
        this.answer.answer_list[0] = this.userAnswer;
      }
    },
    handleTimeUpdate(event) {
      let currentTime = event.target.currentTime;

      this.data.file_info_list.forEach((item) => {
        if (
          Number(item.currentTime) > Math.floor(currentTime) &&
          Number(item.currentTime) < Math.floor(currentTime) + 1 &&
          item.id !== this.first
        ) {
          this.first = item.id;
          document.getElementById('interaction-preview-video').pause();
          this.exercise_id = item.id;
          this.visible = true;
          // GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
          //   this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(url_map[item.file_id])}`;
          //   this.visible = true;
          // });
        }
      });
    },
    handleClose() {
      this.reportFlag = false;
      document.getElementById('interaction-preview-video').play();
      // setTimeout(() => {
      //   this.first = '';
      // }, 1000);
    },
    submitAdd(id, answer, content) {
      this.visible = false;
      document.getElementById('interaction-preview-video').play();
      setTimeout(() => {
        this.first = '';
      }, 1000);
      this.$set(this.userAnswer, id, answer);
      this.$set(this.exerciseList, id, content);
    },
    lookReport() {
      document.getElementById('interaction-preview-video').pause();
      let num = 0;
      let total = this.data.file_info_list.length;
      Object.keys(this.userAnswer).forEach((key) => {
        if (this.userAnswer[key].is_right) {
          num++;
        }
      });
      this.reportResult = {
        total,
        right: num,
        error: total - num,
        rightRate: `${((num / total) * 100).toFixed(0)}%`,
      };
      this.reportFlag = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

video:full-screen {
  :fullscreen::-webkit-media-controls-fullscreen-button {
    display: none;
  }
}

video::-webkit-media-controls-fullscreen-button {
  display: none;
}
</style>