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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="imageText-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
    <div class="interaction-box" v-if="data.video_list.length > 0">
      <video
        id="interaction-preview-video"
        :src="data.video_list[0].file_url"
        width="100%"
        height="400"
        controls
        @timeupdate="handleTimeUpdate"
        controlsList="nodownload"
      ></video>
    </div>
    <!-- v-if="Object.keys(this.userAnswer).length === data.file_info_list.length" -->
    <el-button
      type="primary"
      @click="lookReport"
      :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',
      }"
      >查看答题报告</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"></ExercisePreview>
      <!-- <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
        :reportResult="reportResult"
        :exerciseList="exerciseList"
        :userAnswer="userAnswer"
        :fileList="data.file_info_list"
        @handleCancle="handleClose"
      ></Report>
    </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',
  props: {
    isMobile: {
      type: Boolean,
      default: false,
    },
  },
  components: { ExercisePreview, Report },
  mixins: [PreviewMixin],
  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: {},
  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));
    },
    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: 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>