|
@@ -1,635 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="class-record-container">
|
|
|
- <!--头部信息-->
|
|
|
- <div class="class-record-header">
|
|
|
- <span class="back-page" @click="goBack">
|
|
|
- <Icon type="md-arrow-round-back" />
|
|
|
- {{$t('cusMgt.rcd.rtn')}}
|
|
|
- </span>
|
|
|
- <span class="course-name">
|
|
|
- {{recordInfo.name}}
|
|
|
- </span>
|
|
|
- <div style="display:inline-block;margin-left:30px">
|
|
|
- <span class="label-text">
|
|
|
- {{$t('cusMgt.rcd.ctime')}}
|
|
|
- </span>
|
|
|
- <span class="label-value">
|
|
|
- {{$jsFn.timeFormat(recordInfo.startTime)}}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="action-wrap">
|
|
|
- <!-- 下载学生作品 -->
|
|
|
- <span class="e-note-tag" @click="downloadStuWork">
|
|
|
- <Icon type="md-download" />
|
|
|
- {{$t('cusMgt.rcd.dlStuWrk')}}
|
|
|
- </span>
|
|
|
- <!-- 电子笔记 -->
|
|
|
- <span class="e-note-tag" @click="viewENote">
|
|
|
- <Icon type="ios-paper" />
|
|
|
- {{$t('cusMgt.rcd.enote')}}
|
|
|
- </span>
|
|
|
- <!-- 表格下载 -->
|
|
|
- <span class="e-note-tag" @click="downloadData">
|
|
|
- <Icon type="md-download" />
|
|
|
- {{$t('cusMgt.rcd.exportData')}}
|
|
|
- </span>
|
|
|
- <!-- 数据统计 -->
|
|
|
- <span class="e-note-tag" v-show="hasVideo" @click="isShowVd = !isShowVd">
|
|
|
- <Icon :type="isShowVd ? 'md-podium' : 'logo-youtube'" />
|
|
|
- {{isShowVd ? $t('cusMgt.rcd.dataCount') : $t('cusMgt.rcd.videoData')}}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <Split v-model="split1">
|
|
|
- <div slot="left" class="rcd-split-pane">
|
|
|
- <!--上课内容-->
|
|
|
- <vuescroll>
|
|
|
- <!-- <div :class="isShowBar ? 'class-content mouse-over-status':'class-content mouse-over-status'" @mousemove="isShowBar = true" @mouseleave="isShowBar = false"> -->
|
|
|
- <div class="class-content mouse-over-status">
|
|
|
- <video-player2 v-if="hasVideo" v-show="isShowVd" @on-vd-error="videoError" class="video-player-box" :markers="markers" ref="videoPlayer" :options="playerOptions" :playsinline="true" @getCurPage="getCurPage">
|
|
|
- </video-player2>
|
|
|
- <div v-show="!isShowVd" class="video-player-box" style="padding:25px 0px">
|
|
|
- <Alert v-show="!hasVideo" class="no-video-tips" type="warning" show-icon>
|
|
|
- {{$t('cusMgt.rcd.noVideo')}}
|
|
|
- </Alert>
|
|
|
- <DataCount :rcdInfo="recordInfo"></DataCount>
|
|
|
- </div>
|
|
|
- <div class="courseware-wrap">
|
|
|
- <img :src="curImg" alt="" class="course-cur-img">
|
|
|
- <div class="cus-page-wrap">
|
|
|
- <Page :total="pageList.length" :current.sync="curPage" :page-size="1" size="small" @on-change="getCurHTEX" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </vuescroll>
|
|
|
- </div>
|
|
|
- <div slot="right" class="rcd-split-pane">
|
|
|
- <!--课堂互动记录-->
|
|
|
- <div class="top-wrap">
|
|
|
- <h2 class="content-title">
|
|
|
- {{$t('cusMgt.rcd.rcdLabel')}}
|
|
|
- </h2>
|
|
|
- <div style="margin-top:5px;margin-right:3px">
|
|
|
- <RadioGroup v-model="filterType" size="small" @on-change="handleFilter">
|
|
|
- <Radio v-for="item in filterInte" :key="item.value" :label="item.value" border>
|
|
|
- {{item.text}}
|
|
|
- {{item.value == 'all' ? '' : `(${item.count})`}}
|
|
|
- </Radio>
|
|
|
- </RadioGroup>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <vuescroll ref="pagewrap">
|
|
|
- <div class="cus-data-wrap">
|
|
|
- <div class="interaction-record-wrap">
|
|
|
- <template v-for="(item,index) in pageListShow">
|
|
|
- <div v-if="item.pageData && item.pageData.length" class="page-item" :key="index" :id="'page'+(item.page)">
|
|
|
- <div class="page-info-wrap">
|
|
|
- <span class="page-tag" @click="toVideo(index+1,$event)" :ref="'page'+(index+1)">
|
|
|
- {{`${$t('cusMgt.rcd.cw')}${item.page}${$t('cusMgt.rcd.page')}`}}
|
|
|
- </span>
|
|
|
- <!-- 课件缩略图 -->
|
|
|
- <img class="page-mini-img" @click="openViewer(item.img)" :src="item.img" />
|
|
|
- <!-- <Timeline style="margin-top:10px;margin-left:-5px">
|
|
|
- <TimelineItem v-for="(rtItem, rtIndex) in item.pageData" :key="rtIndex +''+index">
|
|
|
- <Icon type="md-arrow-dropright" slot="dot" />
|
|
|
- <p class="event-tag" @click="toEvent(rtItem)">{{rtItem.eventName}}</p>
|
|
|
- </TimelineItem>
|
|
|
- </Timeline> -->
|
|
|
- </div>
|
|
|
- <div class="record-data-wrap">
|
|
|
- <!-- 互动数据 -->
|
|
|
- <div v-for="event in item.pageData" :key="event.Time">
|
|
|
- <!-- 即问即答 -->
|
|
|
- <PopQues class="event-item" v-if="event.Event === 'PopQuesLoad' || event.Event === 'ReAtmpAnsStrt'" :evtType="event.Event" :irsData="event.data"></PopQues>
|
|
|
- <!-- 抢权 -->
|
|
|
- <Buzr class="event-item student-event" v-else-if="event.Event === 'BuzrAns'" :buzrData="event.data" :students="baseData.student"></Buzr>
|
|
|
- <!-- 推送 -->
|
|
|
- <Push class="event-item" v-else-if="event.Event === 'FastPgPush'" :pushData="event.data"></Push>
|
|
|
- <!-- 作品收集 -->
|
|
|
- <Receive :recordInfo="recordInfo" class="student-event event-item" v-else-if="event.Event === 'WrkSpaceLoad'" :rcvData="event.data" :students="baseData.student"></Receive>
|
|
|
- <!-- 作品回帖 -->
|
|
|
- <WrkCmp :recordInfo="recordInfo" class="student-event event-item" v-else-if="event.Event === 'WrkCmp'" :cmpData="event.data" :students="baseData.student"></WrkCmp>
|
|
|
- <!-- 随机挑人 -->
|
|
|
- <Pick class="event-item student-event" :pickData="event.data" v-else-if="event.Event === 'PickupResult'" :students="baseData.student"></Pick>
|
|
|
- <!-- 课中评测 -->
|
|
|
- <Exam class="event-item" :examInfo="event.data" :recordInfo="recordInfo" v-else-if="event.Event === 'SPQStrt'"></Exam>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </vuescroll>
|
|
|
- </div>
|
|
|
- </Split>
|
|
|
- <div v-if="openImageViewer" class="image-viewer" @click="closeViewer()">
|
|
|
- <Icon type="md-close" class="close-icon" @click="closeViewer()" />
|
|
|
- <img :src="viewUrl" class="animated fadeIn" @click.stop />
|
|
|
- </div>
|
|
|
- <!--返回顶部-->
|
|
|
- <BackToTop @on-to-top="handleToTop"></BackToTop>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import WrkCmp from './eventchart/WrkCmp.vue'
|
|
|
-import PopQues from './eventchart/PopQues.vue'
|
|
|
-import Buzr from './eventchart/Buzr.vue'
|
|
|
-import Pick from './eventchart/Pick.vue'
|
|
|
-import Push from './eventchart/Push.vue'
|
|
|
-import Exam from './eventchart/Exam.vue'
|
|
|
-import Receive from './eventchart/Receive.vue'
|
|
|
-import DataCount from './eventchart/DataCount.vue'
|
|
|
-import CountTo from 'vue-count-to'
|
|
|
-import BlobTool from '@/utils/blobTool.js'
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- PopQues, Pick, Push, Receive, DataCount, CountTo, Buzr, Exam, WrkCmp
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- filterType: 'all',
|
|
|
- filterInte: [
|
|
|
- {
|
|
|
- value: 'all',
|
|
|
- text: this.$t('cusMgt.rcd.filter1'),
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'FastPgPush',
|
|
|
- text: this.$t('cusMgt.rcd.filter2'),
|
|
|
- count: 0
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'WrkSpaceLoad',
|
|
|
- text: this.$t('cusMgt.rcd.filter3'),
|
|
|
- count: 0
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'Other',
|
|
|
- text: this.$t('cusMgt.rcd.filter4'),
|
|
|
- count: 0
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'SPQStrt',
|
|
|
- text: this.$t('cusMgt.rcd.filter5'),
|
|
|
- count: 0
|
|
|
- }
|
|
|
- ],
|
|
|
- split1: 0.4,
|
|
|
- backPage: undefined,
|
|
|
- baseData: {}, //base.json
|
|
|
- pushData: [],//push.json
|
|
|
- irsData: [],//irs.json
|
|
|
- taskData: [],//task.json
|
|
|
- fnEvents: [],//功能事件
|
|
|
- events: [],//事件ID
|
|
|
- hiTeachEvent: [],//需要解析的事件信息
|
|
|
- isShowVd: true,
|
|
|
- hasVideo: true,
|
|
|
- eventClick: false,
|
|
|
- sokratesRecords: [],
|
|
|
- pageIds: [],
|
|
|
- pageEvents: [],
|
|
|
- pageList: [],
|
|
|
- pageListShow: [],
|
|
|
- videoUrl: '',
|
|
|
- videoPoster: '',
|
|
|
- recordInfo: {},
|
|
|
- isShowBar: false,
|
|
|
- markers: [],
|
|
|
- curPage: 1,
|
|
|
- viewUrl: '',
|
|
|
- openImageViewer: false,
|
|
|
- typeIndex: 'all',
|
|
|
- playerOptions: {
|
|
|
- height: "450px",
|
|
|
- controlBar: {
|
|
|
- durationDisplay: true, // 总时间
|
|
|
- currentTimeDisplay: true,
|
|
|
-
|
|
|
- },
|
|
|
- html5: {
|
|
|
- nativeControlsForTouch: true,
|
|
|
- },
|
|
|
- inactivityTimeout: 1,
|
|
|
- nativeVideoTracks: false,
|
|
|
- playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
- autoplay: true, //如果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: [],
|
|
|
- poster: '',
|
|
|
- // notSupportedMessage: '此视频暂无法播放,请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 下载学生作品
|
|
|
- downloadStuWork() {
|
|
|
- const containerClient = BlobTool.CreateBlobTool(this.recordInfo.scope)
|
|
|
- containerClient.downloadFolder(`records/${this.recordInfo.id}/Clients`, this.$t('cusMgt.rcd.stuWrk'))
|
|
|
- },
|
|
|
- //下载统计表格
|
|
|
- downloadData() {
|
|
|
- let blobInfo = this.recordInfo.scope === 'school' ? this.$store.state.user.schoolProfile : this.$store.state.user.userProfile
|
|
|
- let url = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/IES/summary.xlsx?${blobInfo.blob_sas}`
|
|
|
- const downloadRes = async () => {
|
|
|
- let response = await fetch(url); // 内容转变成blob地址
|
|
|
- let blob = await response.blob(); // 创建隐藏的可下载链接
|
|
|
- let objectUrl = window.URL.createObjectURL(blob);
|
|
|
- let a = document.createElement('a');
|
|
|
- a.href = objectUrl;
|
|
|
- a.download = this.recordInfo.name + '.xlsx';
|
|
|
- a.click()
|
|
|
- a.remove();
|
|
|
- }
|
|
|
- downloadRes();
|
|
|
- },
|
|
|
- videoError() {
|
|
|
- this.hasVideo = false
|
|
|
- this.isShowVd = false
|
|
|
- },
|
|
|
- //返回顶部
|
|
|
- handleToTop() {
|
|
|
- this.$refs['pagewrap'].scrollTo(
|
|
|
- {
|
|
|
- y: '0'
|
|
|
- },
|
|
|
- 300
|
|
|
- )
|
|
|
- // this.$refs['datawrap'].scrollTo(
|
|
|
- // {
|
|
|
- // y: '0'
|
|
|
- // },
|
|
|
- // 300
|
|
|
- // )
|
|
|
- },
|
|
|
- //跳转到对应事件
|
|
|
- toEvent(event) {
|
|
|
- console.log(event)
|
|
|
- this.eventClick = true
|
|
|
- this.curPage = event.pageIndex + 1
|
|
|
- this.$refs.videoPlayer.player.currentTime(event.Time)
|
|
|
- },
|
|
|
- //根据SokratesRecords.json处理page数据
|
|
|
- async getPageList() {
|
|
|
- this.pageList = []
|
|
|
- this.markers = []
|
|
|
- let blobInfo = this.recordInfo.scope == 'school' ? this.$store.state.user.schoolProfile : this.$store.state.user.userProfile
|
|
|
- // 这里需要兼容原来没有TimeLine.json的课例(优先度读timeLine.json,没有则读SokratesRecords.json)
|
|
|
- let url = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/IES/TimeLine.json?${blobInfo.blob_sas}`
|
|
|
- let hasTimeLine = true
|
|
|
- let dataErr = false
|
|
|
- try {
|
|
|
- let res = await this.$tools.getFile(url)
|
|
|
- this.sokratesRecords = JSON.parse(res)
|
|
|
- this.pageIds = this.sokratesRecords.PgIdList || []
|
|
|
- this.pageEvents = this.sokratesRecords.events || []
|
|
|
- } catch (e) {
|
|
|
- hasTimeLine = false
|
|
|
- }
|
|
|
- //读取 timeLine.json 失败,则读取 SokratesRecords.json
|
|
|
- if (!hasTimeLine) {
|
|
|
- url = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/Sokrates/SokratesRecords.json?${blobInfo.blob_sas}`
|
|
|
- try {
|
|
|
- let res = await this.$tools.getFile(url)
|
|
|
- let resJson = JSON.parse(res)
|
|
|
- // 处理成timeLine数据格式
|
|
|
- let pageidEvent = resJson.find(item => item.Event == 'PgidList')
|
|
|
- this.pageIds = pageidEvent && pageidEvent.PgIdList ? pageidEvent.PgIdList : []
|
|
|
- this.pageEvents = resJson.filter(item => this.events.includes(item.Event))
|
|
|
- this.sokratesRecords = {
|
|
|
- events: this.pageEvents,
|
|
|
- PgIdList: this.pageIds
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- //timeLine 和 SokratesRecords都没有找到
|
|
|
- dataErr = true
|
|
|
- }
|
|
|
- }
|
|
|
- // 数据异常
|
|
|
- if (dataErr) {
|
|
|
- this.$Message.error(this.$t('cusMgt.rcd.dataErr'))
|
|
|
- return
|
|
|
- }
|
|
|
- // 时间轴数据正常
|
|
|
- //获取Push.json、IRS.json、Task.json、Base.json数据
|
|
|
- try {
|
|
|
- let pushUrl = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/IES/Push.json?${blobInfo.blob_sas}`
|
|
|
- this.pushData = JSON.parse(await this.$tools.getFile(pushUrl) || '[]')
|
|
|
- this.pushData.forEach(item => {
|
|
|
- item.pageUrl = `${blobInfo.blob_uri}/records/${this.recordInfo.id}${item.pageMeta}?${blobInfo.blob_sas}`
|
|
|
- })
|
|
|
- } catch (e) {
|
|
|
- this.pushData = []
|
|
|
- }
|
|
|
- try {
|
|
|
- let irsUrl = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/IES/IRS.json?${blobInfo.blob_sas}`
|
|
|
- this.irsData = JSON.parse(await this.$tools.getFile(irsUrl) || '[]')
|
|
|
- } catch (e) {
|
|
|
- this.irsData = []
|
|
|
- }
|
|
|
- try {
|
|
|
- let taskUrl = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/IES/Task.json?${blobInfo.blob_sas}`
|
|
|
- this.taskData = JSON.parse(await this.$tools.getFile(taskUrl) || '[]')
|
|
|
- } catch (e) {
|
|
|
- this.taskData = []
|
|
|
- }
|
|
|
- try {
|
|
|
- let baseUrl = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/IES/base.json?${blobInfo.blob_sas}`
|
|
|
- this.baseData = JSON.parse(await this.$tools.getFile(baseUrl) || '{}')
|
|
|
- } catch (e) {
|
|
|
- this.baseUrl = {}
|
|
|
- }
|
|
|
- let pgids = this.pageIds
|
|
|
- //这里需要判断录制开始的pageid
|
|
|
- // let startInfo = this.pageEvents?.findLast(item => item.Event === 'EzsStartRecord')
|
|
|
- let startInfo = this._.findLast(this.pageEvents, item => item.Event === 'EzsStartRecord') //排查兼容性问题
|
|
|
- let startId = startInfo ? startInfo.Pgid : ''
|
|
|
- let startIndex = 0
|
|
|
- if (startId) {
|
|
|
- startIndex = pgids.findIndex(item => item === startId)
|
|
|
- //第一页视频标记
|
|
|
- this.markers.push({
|
|
|
- time: startInfo.Time,
|
|
|
- text: `${this.$t('cusMgt.rcd.di')}${1}${this.$t('cusMgt.rcd.page')}`,
|
|
|
- page: 1
|
|
|
- })
|
|
|
- }
|
|
|
- if (startIndex > -1) {
|
|
|
- pgids = pgids.slice(startIndex)
|
|
|
- }
|
|
|
- pgids.forEach((item, index) => {
|
|
|
- let page = {}
|
|
|
- page.id = item
|
|
|
- page.img = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/Memo/${item}.jpg?${blobInfo.blob_sas}`
|
|
|
- page.page = index + 1
|
|
|
- //当前页面对应的功能事件
|
|
|
- page.pageData = this.pageEvents.filter(record => record.Pgid === item && this.fnEvents.includes(record.Event))
|
|
|
- page.pageData.forEach(e => {
|
|
|
- e.pageIndex = index
|
|
|
- e.eventName = this.hiTeachEvent[e.Event]?.text
|
|
|
- let rlt = this.hiTeachEvent[e.Event]?.relation
|
|
|
- e.relation = rlt
|
|
|
- switch (rlt) {
|
|
|
- case 'irs':
|
|
|
- e.data = this.irsData.find(i => i.pageID == e.Pgid)
|
|
|
- this.filterInte[3].count++
|
|
|
- break
|
|
|
- case 'push':
|
|
|
- e.data = this.pushData.find(p => p.pageId == e.Pgid || p.pageID == e.Pgid) //数据兼容 pageId 有些大写有些小写
|
|
|
- this.filterInte[1].count++
|
|
|
- break
|
|
|
- case 'task':
|
|
|
- e.data = this.taskData.find(t => t.pageID == e.Pgid)
|
|
|
- this.filterInte[2].count++
|
|
|
- break
|
|
|
- case 'timeline':
|
|
|
- e.data = this._.cloneDeep(e)
|
|
|
- this.filterInte[3].count++
|
|
|
- break
|
|
|
- case 'exam':
|
|
|
- e.data = this._.cloneDeep(e)
|
|
|
- this.filterInte[4].count++
|
|
|
- break
|
|
|
- default:
|
|
|
- break
|
|
|
- }
|
|
|
- })
|
|
|
- this.pageList.push(page)
|
|
|
- })
|
|
|
- console.log(this.pageList)
|
|
|
- this.pageListShow = this.pageList
|
|
|
- console.log('互动数据', this.pageList)
|
|
|
- this.pageList.forEach((pageInfo, pageIndex) => {
|
|
|
- pageInfo.pageData.forEach(e => {
|
|
|
- if (e.Event == 'WrkCmp') {
|
|
|
- console.log(pageIndex, e)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- let pageEvent = this.pageEvents.filter(item => item.Event === 'PgJump' || item.Event === 'PgAdd' || item.Event === 'DiscussStart')
|
|
|
- let page = this.markers.length
|
|
|
- pageEvent.forEach((item, index) => {
|
|
|
- if (item.JumpTo != item.JumpFrom) {
|
|
|
- this.markers.push({
|
|
|
- time: item.Time,
|
|
|
- text: `${this.$t('cusMgt.rcd.di')}${item.JumpTo}${this.$t('cusMgt.rcd.page')}`,
|
|
|
- page: item.JumpTo
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- console.log(this.markers)
|
|
|
- },
|
|
|
- //查看苏格拉底报告
|
|
|
- viewReport() {
|
|
|
- this.$router.push({
|
|
|
- name: 'teachCenter',
|
|
|
- query: { id: this.recordInfo.id, name: this.recordInfo.name }
|
|
|
- })
|
|
|
- },
|
|
|
- //查看电子笔记
|
|
|
- viewENote() {
|
|
|
- let eNote
|
|
|
- if (this.recordInfo.eNote) {
|
|
|
- eNote = this.recordInfo.eNote
|
|
|
- } else {
|
|
|
- let sasInfo = {}
|
|
|
- let blobInfo = this.recordInfo.scope === 'school' ? this.$store.state.user.schoolProfile : this.$store.state.user.userProfile
|
|
|
- sasInfo.sas = '?' + blobInfo.blob_sas
|
|
|
- sasInfo.name = this.recordInfo.scope ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId
|
|
|
- sasInfo.url = blobInfo.blob_uri.slice(0, blobInfo.blob_uri.lastIndexOf(sasInfo.name) - 1)
|
|
|
-
|
|
|
- eNote = `${sasInfo.url}/${sasInfo.name}/records/${this.recordInfo.id}/Note.pdf${sasInfo.sas}`
|
|
|
- }
|
|
|
- window.open('/web/viewer.html?file=' + encodeURIComponent(eNote))
|
|
|
- // if (this.recordInfo.eNote) {
|
|
|
- // } else {
|
|
|
- // this.$Message.warning(this.$t('cusMgt.rcd.noNote'))
|
|
|
- // }
|
|
|
- },
|
|
|
- //点击视频切片
|
|
|
- getCurPage(page) {
|
|
|
- // this.$refs["datawrap"].scrollIntoView('#page' + page, 500)
|
|
|
- this.$refs.videoPlayer.player.play()
|
|
|
- this.curPage = page
|
|
|
- },
|
|
|
- //点击课件page
|
|
|
- getCurHTEX(page) {
|
|
|
- if (this.eventClick) {
|
|
|
- this.eventClick = false
|
|
|
- return
|
|
|
- }
|
|
|
- //视频时间定位
|
|
|
- let pageInfo = this.markers.find(item => {
|
|
|
- return item.page == page
|
|
|
- })
|
|
|
- if (pageInfo) {
|
|
|
- this.$refs.videoPlayer.player.currentTime(pageInfo.time)
|
|
|
- this.$refs.videoPlayer.player.play()
|
|
|
- } else {
|
|
|
- // this.$refs["datawrap"].scrollIntoView('#page' + page, 500)
|
|
|
- }
|
|
|
- },
|
|
|
- //点击互动记录页面tag
|
|
|
- toVideo(page, e) {
|
|
|
- //页面滚动
|
|
|
- // let dataLoacation = this.$refs["datawrap"].getPosition()
|
|
|
- // let pageLocaltion = this.$refs["pagewrap"].getPosition()
|
|
|
- // let y = e.pageY - 665 + pageLocaltion.scrollTop + dataLoacation.scrollTop
|
|
|
- this.$nextTick(() => {
|
|
|
- // this.$refs["pagewrap"].scrollTo(
|
|
|
- // {
|
|
|
- // x: 0,
|
|
|
- // y: 0
|
|
|
- // }
|
|
|
- // )
|
|
|
- // this.$refs["datawrap"].scrollTo(
|
|
|
- // {
|
|
|
- // x: 0,
|
|
|
- // y: y
|
|
|
- // }
|
|
|
- // )
|
|
|
- })
|
|
|
- // 教材页面切换
|
|
|
- this.curPage = page
|
|
|
- //视频时间定位
|
|
|
- let pageInfo = this.markers.find(item => {
|
|
|
- return item.page == page
|
|
|
- })
|
|
|
- if (pageInfo) this.$refs.videoPlayer.player.currentTime(pageInfo.time)
|
|
|
- },
|
|
|
- //互动类型筛选
|
|
|
- handleFilter() {
|
|
|
- if (this.filterType == 'all') {
|
|
|
- this.pageListShow = this.pageList
|
|
|
- } else {
|
|
|
- let data = this._.cloneDeep(this.pageList)
|
|
|
- let events = ['FastPgPush', 'WrkSpaceLoad', 'SPQStrt',]
|
|
|
- this.pageListShow = data.map(item => {
|
|
|
- if (item.pageData.length) {
|
|
|
- item.pageData = item.pageData.filter(event => {
|
|
|
- if (this.filterType == 'Other') {
|
|
|
- return !events.includes(event.Event)
|
|
|
- } else {
|
|
|
- return event.Event == this.filterType
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- return item
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- //查看图片
|
|
|
- openViewer(url) {
|
|
|
- this.openImageViewer = true
|
|
|
- this.viewUrl = url
|
|
|
- },
|
|
|
- closeViewer() {
|
|
|
- this.openImageViewer = false
|
|
|
- },
|
|
|
- goBack() {
|
|
|
- if (this.backPage) {
|
|
|
- this.$router.push({
|
|
|
- name: this.backPage,
|
|
|
- record: this.recordInfo
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$router.go(-1)
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- curImg() {
|
|
|
- console.log(this.curPage)
|
|
|
- if (this.pageList[this.curPage - 1]) {
|
|
|
- return this.pageList[this.curPage - 1].img
|
|
|
- } else {
|
|
|
- return ""
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.hiTeachEvent = this.$GLOBAL.HI_TEACH_EVENT()
|
|
|
- //正式站先暂时不放出课中评测
|
|
|
- if (this.$store.state.config.srvAdrType == 'product') {
|
|
|
- this.$delete(this.hiTeachEvent, 'SPQStrt')
|
|
|
- }
|
|
|
- this.events = Object.keys(this.hiTeachEvent)
|
|
|
- this.fnEvents = this.events.filter(key => this.hiTeachEvent[key].type === 'fn')
|
|
|
- console.log(this.events, this.fnEvents)
|
|
|
- this.recordInfo = this.$route.params.record || (sessionStorage.getItem('record') ? JSON.parse(sessionStorage.getItem('record')) : undefined)
|
|
|
- console.log(this.recordInfo)
|
|
|
- if (!this.recordInfo) {
|
|
|
- this.$router.go(-1)
|
|
|
- } else {
|
|
|
- sessionStorage.setItem('record', JSON.stringify(this.recordInfo))
|
|
|
- //对接Blob数据
|
|
|
- let blobInfo = this.recordInfo.scope == 'school' ? this.$store.state.user.schoolProfile : this.$store.state.user.userProfile
|
|
|
- this.videoUrl = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/Record/CourseRecord.mp4?${blobInfo.blob_sas}`
|
|
|
- this.videoPoster = `${blobInfo.blob_uri}/records/${this.recordInfo.id}/Record/CoverImage.jpg?${blobInfo.blob_sas}`
|
|
|
- this.playerOptions.poster = this.videoPoster
|
|
|
- this.playerOptions.sources.push({
|
|
|
- src: this.videoUrl
|
|
|
- })
|
|
|
- this.getPageList()
|
|
|
- }
|
|
|
- },
|
|
|
- beforeRouteEnter(to, from, next) {
|
|
|
- next(vm => {
|
|
|
- if (from.name == 'homePage') {
|
|
|
- vm.backPage = 'course'
|
|
|
- }
|
|
|
- console.log(arguments)
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style lang="less" scoped>
|
|
|
-@import "./ClassRecordNew.less";
|
|
|
-</style>
|
|
|
-<style>
|
|
|
-.top-wrap .ivu-radio-wrapper-checked {
|
|
|
- color: white;
|
|
|
- background: #2d8cf0;
|
|
|
-}
|
|
|
-.top-wrap .ivu-radio {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.class-content .vjs-progress-holder {
|
|
|
- font-size: 10px !important;
|
|
|
-}
|
|
|
-.mouse-over-status .vjs-control-bar {
|
|
|
- opacity: 1 !important;
|
|
|
-}
|
|
|
-
|
|
|
-.class-content .video-js .vjs-big-play-button {
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin-left: -40px;
|
|
|
- margin-top: -20px;
|
|
|
-}
|
|
|
-
|
|
|
-.class-content .vjs_video_3-dimensions.vjs-fluid {
|
|
|
- padding-top: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.class-content .video-js.vjs-fluid,
|
|
|
-.class-content .video-js.vjs-16-9,
|
|
|
-.class-content .video-js.vjs-4-3 {
|
|
|
- height: 450px;
|
|
|
-}
|
|
|
-
|
|
|
-.video-player-box .vjs-volume-panel {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.video-player-box .ivu-alert {
|
|
|
- border-radius: 0px;
|
|
|
-}
|
|
|
-</style>
|