|
@@ -0,0 +1,509 @@
|
|
|
+<template>
|
|
|
+ <div class="record-info">
|
|
|
+ <div class="testTitle">
|
|
|
+ <span class="logoutIcon" @click="quitRec">
|
|
|
+ <svg-icon icon-class="logout" />
|
|
|
+ </span>
|
|
|
+ <span class="testTitleText">{{$t("studentWeb.courseContent.classRecord")}}</span>
|
|
|
+ </div>
|
|
|
+ <vuescroll ref="pagewrap">
|
|
|
+ <div style="padding: 1% 3% 3%; margin-top: 44px;">
|
|
|
+ <h2 class="event-title">{{ recordInfo.name }}</h2>
|
|
|
+ <p style="text-align: right;">
|
|
|
+ <span>
|
|
|
+ <Icon type="md-timer" class="base-info-icon" />{{ $t('studentWeb.baseInfo.duration') }}:
|
|
|
+ <span class="base-info-text">{{ recordInfo.time }}</span>
|
|
|
+ </span>
|
|
|
+ <span style="margin-left: 20px;">
|
|
|
+ <svg-icon icon-class="time" class="base-info-icon" />{{$t('studentWeb.baseInfo.classTime')}}:
|
|
|
+ <span class="base-info-text">{{ recordInfo.startTime }}</span>
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <div class="title-rect-group">
|
|
|
+ <h2 class="title-rect-name">
|
|
|
+ {{ $t("studentWeb.hiteachNote.material") }}
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="class-content" id="videoNow">
|
|
|
+ <div class="courseware-wrap">
|
|
|
+ <!-- <DrawHTEX :mapJson="mapJson"></DrawHTEX> -->
|
|
|
+ <img :src="curImg" alt="" class="course-cur-img">
|
|
|
+ <div class="page-wrap">
|
|
|
+ <Page :total="pageList.length" :current="curPage" :page-size="1" size="small" @on-change="getCurHTEX" />
|
|
|
+ <!-- <Icon v-if="pageList.length" type="md-qr-scanner" class="full-screen-icon" @click="viewHtex" /> -->
|
|
|
+ </div>
|
|
|
+ <!-- <span class="cur-page-tag">{{ curPage }}</span> -->
|
|
|
+ </div>
|
|
|
+ <video id="recordVideo" class="video-player-box video-js vjs-default-skin"></video>
|
|
|
+ </div>
|
|
|
+ <!-- 课堂互动记录 -->
|
|
|
+ <div class="title-rect-group">
|
|
|
+ <h2 class="title-rect-name">
|
|
|
+ {{ $t("studentWeb.hiteachNote.classInteractionRecord") }}
|
|
|
+ <!-- <span class="feedbackNum">05</span> -->
|
|
|
+ <span @click="loadNote">
|
|
|
+ {{ $t('studentWeb.courseContent.notes') }}
|
|
|
+ <Icon type="md-download" />
|
|
|
+ </span>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="dec">
|
|
|
+ <div class="message-area">
|
|
|
+ <div class="filter-type">
|
|
|
+ <span @click="showFile('all')">
|
|
|
+ <Icon :class="{'select-filter': currentfilterType === '' }" custom="iconfont icon-all" :title="$t('studentWeb.courseContent.type.all')" size="30" />
|
|
|
+ </span>
|
|
|
+ <span @click="showFile('msg')">
|
|
|
+ <Icon :class="{'select-filter': currentfilterType === 'msg' }" custom="iconfont icon-megaphone" :title="$t('studentWeb.courseContent.type.msg')" size="30" />
|
|
|
+ </span>
|
|
|
+ <span @click="showFile('doc')">
|
|
|
+ <Icon :class="{'select-filter': currentfilterType === 'doc' }" custom="iconfont icon-file1" :title="$t('studentWeb.courseContent.type.file')" size="30" />
|
|
|
+ </span>
|
|
|
+ <span @click="showFile('FastPgPush')">
|
|
|
+ <Icon :class="{'select-filter': currentfilterType === 'FastPgPush' }" custom="iconfont icon-img" :title="$t('studentWeb.courseContent.type.img')" size="30" />
|
|
|
+ </span>
|
|
|
+ <span @click="showFile('link')">
|
|
|
+ <Icon :class="{'select-filter': currentfilterType === 'link' }" type="ios-link" :title="$t('studentWeb.courseContent.type.link')" />
|
|
|
+ </span>
|
|
|
+ <span @click="showFile('ShowAnsLoad')">
|
|
|
+ <Icon :class="{'select-filter': currentfilterType === 'ShowAnsLoad' || currentfilterType === 'QaRight' || currentfilterType === 'QaWrong'}" custom="iconfont icon-zimuQ" :title="$t('studentWeb.courseContent.type.answer')" size="30" />
|
|
|
+ <!-- <span :class="{'select-filter': currentfilterType === 'ShowAnsLoad' || currentfilterType === 'QaRight' || currentfilterType === 'QaWrong' }" style="font-size: 30px; line-height: 30px" title="即问即答">
|
|
|
+ Q
|
|
|
+ </span> -->
|
|
|
+ </span>
|
|
|
+ <span @click="showFile('QaRight')">
|
|
|
+ <Icon :class="{'select-filter': currentfilterType === 'ShowAnsLoad' || currentfilterType === 'QaRight' }" custom="iconfont icon-duihao" :title="$t('studentWeb.courseContent.type.right')" size="30" />
|
|
|
+ </span>
|
|
|
+ <span @click="showFile('QaWrong')">
|
|
|
+ <Icon :class="{'select-filter': currentfilterType === 'ShowAnsLoad' || currentfilterType === 'QaWrong' }" custom="iconfont icon-cuowu" :title="$t('studentWeb.courseContent.type.wrong')" size="30" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <vuescroll ref="datawrap">
|
|
|
+ <div style="margin-bottom: 50px;">
|
|
|
+ <div v-for="(items, index) in pageList" :key="index" class="message-box" :id="'page' + (items.page)">
|
|
|
+ <div class="message-page">
|
|
|
+ <!-- <div class="messagetoPPT-tag" @click="toVideo(index+1, $event)">
|
|
|
+ 课件第{{ items.page }}页
|
|
|
+ </div> -->
|
|
|
+ <div @click="toVideo(index + 1, $event)">
|
|
|
+ <img :src="items.img">
|
|
|
+ <p style="text-align: center;">
|
|
|
+ {{ items.page }}
|
|
|
+ <Icon type="ios-search" @click="openViewer(items.img)" />
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div v-for="(rtItem, rtIndex) in items.pageData" :key="rtIndex + '' + index" class="record-data-item">
|
|
|
+ <span class="event-tag">{{ rtItem.Event }}</span>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="message-record">
|
|
|
+ <template v-if="items.pageRecorde.length">
|
|
|
+ <div v-for="(recorde, rI) in items.pageRecorde" :key="rI">
|
|
|
+ <!-- 展示答案 -->
|
|
|
+ <div v-if="recorde.Event === 'ShowAnsLoad' && (currentfilterType === '' || currentfilterType === 'ShowAnsLoad' || currentfilterType === 'PopQuesLoad')" class="message-item">
|
|
|
+ <Icon type="ios-person" class="teacher-client-icon"/>
|
|
|
+ <!-- <p class="user-name">王大锤</p> -->
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="message-text">
|
|
|
+ 这里有一个答案要展示
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="message-time">{{ getTime(recorde.Time) }}</p>
|
|
|
+ </div>
|
|
|
+ <!-- 柱形图 -->
|
|
|
+ <div v-if="recorde.Event === 'TakePic' && (currentfilterType === '' || currentfilterType === 'irs')" class="message-item">
|
|
|
+ <Icon type="ios-person" class="teacher-client-icon"/>
|
|
|
+ <!-- <p class="user-name">王大锤</p> -->
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="message-text">
|
|
|
+ <OptionCount />
|
|
|
+ <CorrectRate />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="message-time">{{ getTime(recorde.Time) }}</p>
|
|
|
+ </div>
|
|
|
+ <!-- 推送 -->
|
|
|
+ <div v-if="recorde.Event === 'FastPgPush' && (currentfilterType === '' || currentfilterType === 'FastPgPush')" class="message-item">
|
|
|
+ <Icon type="ios-person" class="teacher-client-icon"/>
|
|
|
+ <!-- <p class="user-name">王大锤</p> -->
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="message-text">
|
|
|
+ <p>老师推送了一张图:{{ recorde.PushPgNo }}</p>
|
|
|
+ <img @click="openViewer('https://teammodelostest.blob.core.chinacloudapi.cn/teammodelcontest/common/20200213/%E9%86%8D%E6%91%A9%E8%B1%86_%E8%B1%86%E5%AD%90%E5%BE%BD%E7%AB%A0_20200213154333.png')" src="https://teammodelostest.blob.core.chinacloudapi.cn/teammodelcontest/common/20200213/%E9%86%8D%E6%91%A9%E8%B1%86_%E8%B1%86%E5%AD%90%E5%BE%BD%E7%AB%A0_20200213154333.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="message-time">{{ getTime(recorde.Time) }}</p>
|
|
|
+ </div>
|
|
|
+ <!-- 挑人 -->
|
|
|
+ <div v-if="recorde.Event === 'PickupResult' && (currentfilterType === '' || currentfilterType === 'PickupResult')" class="message-item">
|
|
|
+ <Icon type="ios-person" class="teacher-client-icon"/>
|
|
|
+ <!-- <p class="user-name">王大锤</p> -->
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="message-text">
|
|
|
+ <div class="pick-item">
|
|
|
+ <span class="student-no">{{ recorde.PickupMemberId }}</span>
|
|
|
+ <span class="student-name">秋香</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="message-time">{{ getTime(recorde.Time) }}</p>
|
|
|
+ </div>
|
|
|
+ <!-- 即问即答 -->
|
|
|
+ <div v-if="recorde.Event === 'PopQuesLoad' && (currentfilterType === '' || currentfilterType === 'PopQuesLoad' || currentfilterType === 'ShowAnsLoad')" class="teacher-item">
|
|
|
+ <Icon type="ios-people" class="student-client-icon" />
|
|
|
+ <!-- <p class="user-name">王大锤</p> -->
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="message-text">
|
|
|
+ 即问即答
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="message-time">{{ getTime(recorde.Time) }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vuescroll>
|
|
|
+ <div v-if="openImageViewer" class="image-viewer">
|
|
|
+ <Icon type="md-close" class="close-icon" @click="closeViewer()" />
|
|
|
+ <img :src="nowImgSrc" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import OptionCount from './OptionCount.vue';
|
|
|
+import CorrectRate from './CorrectRate.vue';
|
|
|
+
|
|
|
+import videojs from "video.js";
|
|
|
+import 'video.js/dist/video-js.css';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "ClassRecord",
|
|
|
+ components: {
|
|
|
+ OptionCount,
|
|
|
+ CorrectRate,
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ player: undefined,
|
|
|
+ pageList: [], //课件
|
|
|
+ markers: [], //打点
|
|
|
+ sokratesRecords: {}, //原始数据
|
|
|
+ curPage: 1, //当前课件页码
|
|
|
+ currentfilterType: "",
|
|
|
+ openImageViewer: false,
|
|
|
+ nowImgSrc: "",
|
|
|
+ openHtexViewer: false,
|
|
|
+ playerOptions: {
|
|
|
+ height: "450px",
|
|
|
+ controlBar: {
|
|
|
+ durationDisplay: true, // 总时间
|
|
|
+ currentTimeDisplay: true,
|
|
|
+ },
|
|
|
+ html5: {
|
|
|
+ nativeControlsForTouch: true,
|
|
|
+ },
|
|
|
+ inactivityTimeout: 1,
|
|
|
+ nativeVideoTracks: false,
|
|
|
+ playbackRates: [0.5, 1.0, 1.25, 2.0], //播放速度
|
|
|
+ autoplay: false, //如果true,浏览器准备好时开始回放。
|
|
|
+ controls: true, //控制条
|
|
|
+ preload: 'auto', //视频预加载
|
|
|
+ muted: false, //默认情况下将会消除任何音频。
|
|
|
+ loop: false, //导致视频一结束就重新开始。
|
|
|
+ language: 'zh-CN',
|
|
|
+ //aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
|
|
|
+ //fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
|
|
|
+ sources: [{
|
|
|
+ src: ""
|
|
|
+ }],
|
|
|
+ notSupportedMessage: '此视频暂无法播放,请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
+ },
|
|
|
+ recordInfo: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ console.log(this.$route.query.id);
|
|
|
+ this.recordInfo =
|
|
|
+ {
|
|
|
+ "id": "256246355239899136",
|
|
|
+ "tmdid": "教师醍摩豆id",
|
|
|
+ "scope": "private/school",
|
|
|
+ "school": "学校id",
|
|
|
+ "name": "语文第一节",
|
|
|
+ "poster": "视频封面地址",
|
|
|
+ "startTime": 1607435663434, //开始时间(时间戳),
|
|
|
+ "duration": 5612, //"上课时长",
|
|
|
+ "tScore": 95, //"t分,科技应用",
|
|
|
+ "pScore": 95, //"p分,教法应用",
|
|
|
+ "courseId": "关联的课程id,同时可以拿到,学段id,科目id",
|
|
|
+ "groupIds": ["选用了IES5固定名单的id,通过名单id也可以拿到学段,年级"],
|
|
|
+ "periodId": "学段id",
|
|
|
+ "subject": "科目id",
|
|
|
+ "grade": ["1,年级"],
|
|
|
+ "like": 10, //"点赞数",
|
|
|
+ "share": 10, //"分享转发数",
|
|
|
+ "mCount": 50, //"参加本次课堂学生人数"
|
|
|
+ "discuss": 100, //"议课次数,大于1则是优课",
|
|
|
+ }
|
|
|
+ this.recordInfo.startTime = this.dateFormat(this.recordInfo.startTime)
|
|
|
+ let sec = this.recordInfo.duration % 60
|
|
|
+ let min = parseInt(this.recordInfo.duration / 60)
|
|
|
+ let mins = min >= 60 ? min % 60 : min
|
|
|
+ let hour = parseInt(min / 60)
|
|
|
+ this.recordInfo.time = `${hour < 10 ? ('0' + hour) : hour}:${mins < 10 ? ('0' + mins) : mins}:${sec < 10 ? ('0' + sec) : sec}`
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ // this.getVideo()
|
|
|
+ this.getPageList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getVideo() {
|
|
|
+ this.player = videojs(document.getElementById("recordVideo"), this.playerOptions)
|
|
|
+ var that = this
|
|
|
+ //时间切片
|
|
|
+ this.player.markers({
|
|
|
+ markerStyle: {
|
|
|
+ width: "16px",
|
|
|
+ height: "16px",
|
|
|
+ top: "-22px",
|
|
|
+ "display": "inline-block",
|
|
|
+ "border-radius": "50%",
|
|
|
+ "font-size": "12px",
|
|
|
+ "line-height": "16px",
|
|
|
+ "background-color": "orange"
|
|
|
+ },
|
|
|
+ breakOverlay: {
|
|
|
+ display: true,
|
|
|
+ displayTime: 4,
|
|
|
+ style: {
|
|
|
+ "z-index": "6",
|
|
|
+ width: "100%",
|
|
|
+ height: "10%",
|
|
|
+ "background-color": "rgba(200,250,10,0.6)",
|
|
|
+ color: "white",
|
|
|
+ "font-size": "16px",
|
|
|
+ },
|
|
|
+ text: function (marker) {
|
|
|
+ return that.$t('system.compt.cusWare') + marker.text;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ markerTip: {
|
|
|
+ display: false,
|
|
|
+ text: function (marker) {
|
|
|
+ return marker.text;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ markers: that.markers,
|
|
|
+
|
|
|
+ //标记点击事件
|
|
|
+ onMarkerClick: function (marker) {
|
|
|
+
|
|
|
+ },
|
|
|
+ //视频播放到标记点触发的时间
|
|
|
+ onMarkerReached: function (marker) {
|
|
|
+ let mkDoms = document.getElementsByClassName('vjs-marker ')
|
|
|
+ for (let index in mkDoms) {
|
|
|
+ if (mkDoms[index].dataset) {
|
|
|
+ if (parseInt(mkDoms[index].dataset.markerTime) <= marker.time) {
|
|
|
+ mkDoms[index].style.backgroundColor = '#1CC0F3'
|
|
|
+ mkDoms[index].classList.add('vjs-marker-active')
|
|
|
+ } else {
|
|
|
+ mkDoms[index].style.backgroundColor = 'orange'
|
|
|
+ mkDoms[index].classList.remove('vjs-marker-active')
|
|
|
+
|
|
|
+ }
|
|
|
+ mkDoms[index].innerHTML = this.markers[index].page
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.getCurPage(marker.page)
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 根据SokratesRecords.json处理page数据
|
|
|
+ async getPageList() {
|
|
|
+ this.pageList = []
|
|
|
+ this.markers = []
|
|
|
+ let sas = await this.$tools.getBlobSas("1528783259")
|
|
|
+ this.recordInfo.sokrateImg = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Sokrates/SokratesResults/event.png?${sas.sas}`
|
|
|
+ this.recordInfo.eNote = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Note.pdf?${sas.sas}`
|
|
|
+ // 如果只会存在一个视频,文件名是否可以固定?
|
|
|
+ this.playerOptions.sources[0].src = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Record/Record_Core_2021-12-08_103133.mp4?${sas.sas}`
|
|
|
+ this.getVideo()
|
|
|
+ let url = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Sokrates/SokratesRecords.json?${sas.sas}`
|
|
|
+ this.$tools.getFile(url).then(
|
|
|
+ res => {
|
|
|
+ this.sokratesRecords = JSON.parse(res)
|
|
|
+ let r = this.sokratesRecords.find(item => item.Event === 'PgidList')
|
|
|
+ let pgids = r ? r.PgIdList : []
|
|
|
+ pgids.forEach((item, index) => {
|
|
|
+ let page = {}
|
|
|
+ page.id = item
|
|
|
+ page.img = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Memo/${item}.jpg?${sas.sas}`
|
|
|
+ page.page = index + 1
|
|
|
+ //当前页面对应的sokrates
|
|
|
+ page.pageData = this.sokratesRecords.filter(record => record.Pgid === item && record.Event != 'PgJump' && record.Event != 'PgAdd' && record.Event != 'DiscussStart')
|
|
|
+ // 先筛选部分以作展示
|
|
|
+ page.pageRecorde = this.sokratesRecords.filter(record => record.Pgid === item && (record.Event === 'PickupResult' || record.Event === 'TakePic' || record.Event === 'ShowAnsLoad' || record.Event === 'StatChartLoad' || record.Event === 'FastPgPush' || record.Event === 'PickupResult' || record.Event === 'PopQuesLoad'))
|
|
|
+ this.pageList.push(page)
|
|
|
+ })
|
|
|
+ let pageEvent = this.sokratesRecords.filter(item => item.Event === 'PgJump' || item.Event === 'PgAdd' || item.Event === 'DiscussStart')
|
|
|
+ this.markers = pageEvent.map((item, index) => {
|
|
|
+ return {
|
|
|
+ time: item.Time,
|
|
|
+ text: `第${index + 1}页`,
|
|
|
+ page: index + 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+ this.$Message.error('获取数据失败')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ // 点击互动记录页面tag
|
|
|
+ toVideo(page, e) {
|
|
|
+ this.curPage = page
|
|
|
+ //页面滚动
|
|
|
+ let dataLoacation = this.$refs["datawrap"].getPosition()
|
|
|
+ let pageLocaltion = this.$refs["pagewrap"].getPosition()
|
|
|
+ let y = e.pageY - 770 + pageLocaltion.scrollTop + dataLoacation.scrollTop
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs["pagewrap"].scrollTo(
|
|
|
+ {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ }
|
|
|
+ )
|
|
|
+ this.$refs["datawrap"].scrollTo(
|
|
|
+ {
|
|
|
+ x: 0,
|
|
|
+ y: y
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+ //视频时间定位
|
|
|
+ let pageInfo = this.markers.find(item => {
|
|
|
+ return item.page === page
|
|
|
+ })
|
|
|
+ if(pageInfo) {
|
|
|
+ this.player.currentTime(pageInfo.time)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击课件page
|
|
|
+ getCurHTEX(page) {
|
|
|
+ this.curPage = page
|
|
|
+ // this.mapJson = require('./data/' + page + '.json')
|
|
|
+ //视频时间定位
|
|
|
+ let pageInfo = this.markers.find(item => {
|
|
|
+ return item.page === page
|
|
|
+ })
|
|
|
+ if(pageInfo) {
|
|
|
+ this.player.currentTime(pageInfo.time)
|
|
|
+ if (!this.openHtexViewer) {
|
|
|
+ this.player.play()
|
|
|
+ } else {
|
|
|
+ this.player.pause()
|
|
|
+ }
|
|
|
+ //互动记录滚动
|
|
|
+ this.$refs["datawrap"].scrollIntoView('#page' + page, 500)
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击视频切片
|
|
|
+ getCurPage(page) {
|
|
|
+ this.curPage = page
|
|
|
+ // this.mapJson = require('./data/' + page + '.json')
|
|
|
+ this.$refs["datawrap"].scrollIntoView('#page' + page, 500)
|
|
|
+ this.player.play()
|
|
|
+ },
|
|
|
+ //下载电子笔记
|
|
|
+ async loadNote() {
|
|
|
+ if(this.recordInfo.eNote) {
|
|
|
+ // 已经有授权,在查看文件时不需要再次获取授权
|
|
|
+ let blobData = this.recordInfo.eNote
|
|
|
+ const downloadRes = async () => {
|
|
|
+ let response = await fetch(blobData); // 内容转变成blob地址
|
|
|
+ let blob = await response.blob(); // 创建隐藏的可下载链接
|
|
|
+ let objectUrl = window.URL.createObjectURL(blob);
|
|
|
+ let a = document.createElement('a');
|
|
|
+ a.href = objectUrl;
|
|
|
+ a.download = "电子笔记.pdf";
|
|
|
+ a.click()
|
|
|
+ a.remove();
|
|
|
+ }
|
|
|
+ downloadRes();
|
|
|
+ } else {
|
|
|
+ this.$Message.warning("暂无电子笔记")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 筛选
|
|
|
+ showFile(type) {
|
|
|
+ this.currentfilterType = (type === "all" ? "" : type)
|
|
|
+ },
|
|
|
+ // 打开图片
|
|
|
+ openViewer(item) {
|
|
|
+ this.openImageViewer = true;
|
|
|
+ this.nowImgSrc = item;
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ closeViewer() {
|
|
|
+ this.openImageViewer = false
|
|
|
+ },
|
|
|
+ getTime(time) {
|
|
|
+ let sec = parseInt(time % 60)
|
|
|
+ let min = parseInt(time / 60)
|
|
|
+ let mins = min >= 60 ? min % 60 : min
|
|
|
+ let hour = parseInt(min / 60)
|
|
|
+ return `${hour < 10 ? ('0' + hour) : hour}:${mins < 10 ? ('0' + mins) : mins}:${sec < 10 ? ('0' + sec) : sec}`
|
|
|
+ },
|
|
|
+ dateFormat(timestamp) {
|
|
|
+ var date = new Date(timestamp)
|
|
|
+ var Y = date.getFullYear() + '-'
|
|
|
+ var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
|
|
|
+ var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
|
|
|
+ var H = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":"
|
|
|
+ var Min = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
|
|
|
+ var S = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()) + " "
|
|
|
+ return Y + M + D + H + Min;
|
|
|
+ },
|
|
|
+ quitRec() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ curImg() {
|
|
|
+ if (this.pageList[this.curPage]) {
|
|
|
+ return this.pageList[this.curPage - 1].img
|
|
|
+ } else {
|
|
|
+ return ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@import "./ClassRecord.less";
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.class-content {
|
|
|
+
|
|
|
+ .video-js .vjs-big-play-button{
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -20px;
|
|
|
+ margin-top: -20px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|