|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="class-record-container">
|
|
|
<vuescroll ref="pagewrap">
|
|
|
- <div style="padding: 10px 10px 0px 10px">
|
|
|
+ <div>
|
|
|
<!--头部信息-->
|
|
|
<div class="class-record-header">
|
|
|
<span class="course-name">
|
|
@@ -48,136 +48,51 @@
|
|
|
<video-player2 class="video-player-box" :markers="markers" ref="videoPlayer" :options="playerOptions" :playsinline="true" @getCurPage="getCurPage">
|
|
|
</video-player2>
|
|
|
</div>
|
|
|
-
|
|
|
- <!--课堂互动记录-->
|
|
|
- <h2 class="content-title">
|
|
|
- 互动记录
|
|
|
- <span class="e-note-tag" @click="viewENote">电子笔记</span>
|
|
|
- <span class="e-note-tag" @click="viewReport">苏格拉底报告</span>
|
|
|
- </h2>
|
|
|
- <div class="interaction-record-wrap">
|
|
|
- <div class="interaction-type-wrap">
|
|
|
- <span style="border-bottom:5px solid #efefef;display:block; margin-bottom:10px;padding-top:5px;">
|
|
|
- <Icon size="22" :class="typeIndex == 'all' ? 'type-icon-active type-icon':'type-icon'" custom="iconfont icon-basic-setting" @click="filterType('all')" title="所有记录" />
|
|
|
- </span>
|
|
|
- <span :class="typeIndex == 'irs' ? 'type-icon-active type-icon':'type-icon'" style="font-size:32px;line-height:30px;" @click="filterType('irs')" title="即问即答">Q</span>
|
|
|
- <Icon :class="typeIndex == 'msg' ? 'type-icon-active type-icon':'type-icon'" custom="iconfont icon-message" style="font-size:24px;" @click="filterType('msg')" title="飞讯" />
|
|
|
- <Icon :class="typeIndex == 'img' ? 'type-icon-active type-icon':'type-icon'" type="ios-image" @click="filterType('img')" title="图片" />
|
|
|
- <Icon :class="typeIndex == 'file' ? 'type-icon-active type-icon':'type-icon'" type="md-document" @click="filterType('file')" title="附件" />
|
|
|
- <Icon :class="typeIndex == 'link' ? 'type-icon-active type-icon':'type-icon'" type="ios-link" @click="filterType('link')" title="超链接" />
|
|
|
- </div>
|
|
|
- <vuescroll ref="datawrap">
|
|
|
- <div class="page-item" :key="index" v-for="(item,index) in pageList" :id="'page'+(item.page)">
|
|
|
- <div class="page-info-wrap">
|
|
|
- <span class="page-tag" @click="toVideo(index+1,$event)" :ref="'page'+(index+1)">课件第{{item.page}}页</span>
|
|
|
- <img class="page-mini-img" @click="openViewer(item.img)" :src="item.img" />
|
|
|
- </div>
|
|
|
- <div class="record-data-wrap">
|
|
|
- <div v-for="(rtItem, rtIndex) in item.pageData" :key="rtIndex +''+index" class="record-data-item">
|
|
|
- <span class="event-tag">{{rtItem.Event}}</span>
|
|
|
+ <div class="cus-data-wrap">
|
|
|
+ <!--课堂互动记录-->
|
|
|
+ <h2 class="content-title">
|
|
|
+ 互动记录
|
|
|
+ <span class="e-note-tag" @click="viewENote">电子笔记</span>
|
|
|
+ <span class="e-note-tag" @click="viewReport">苏格拉底报告</span>
|
|
|
+ </h2>
|
|
|
+ <div class="interaction-record-wrap">
|
|
|
+ <div class="interaction-type-wrap">
|
|
|
+ <span style="border-bottom:5px solid #efefef;display:block; margin-bottom:10px;padding-top:5px;">
|
|
|
+ <Icon size="22" :class="typeIndex == 'all' ? 'type-icon-active type-icon':'type-icon'" custom="iconfont icon-basic-setting" @click="filterType('all')" title="所有记录" />
|
|
|
+ </span>
|
|
|
+ <span :class="typeIndex == 'irs' ? 'type-icon-active type-icon':'type-icon'" style="font-size:32px;line-height:30px;" @click="filterType('irs')" title="即问即答">Q</span>
|
|
|
+ <Icon :class="typeIndex == 'msg' ? 'type-icon-active type-icon':'type-icon'" custom="iconfont icon-message" style="font-size:24px;" @click="filterType('msg')" title="飞讯" />
|
|
|
+ <Icon :class="typeIndex == 'img' ? 'type-icon-active type-icon':'type-icon'" type="ios-image" @click="filterType('img')" title="图片" />
|
|
|
+ <Icon :class="typeIndex == 'file' ? 'type-icon-active type-icon':'type-icon'" type="md-document" @click="filterType('file')" title="附件" />
|
|
|
+ <Icon :class="typeIndex == 'link' ? 'type-icon-active type-icon':'type-icon'" type="ios-link" @click="filterType('link')" title="超链接" />
|
|
|
+ </div>
|
|
|
+ <vuescroll ref="datawrap">
|
|
|
+ <div class="page-item" :key="index" v-for="(item,index) in pageList" :id="'page'+(item.page)">
|
|
|
+ <div class="page-info-wrap">
|
|
|
+ <span class="page-tag" @click="toVideo(index+1,$event)" :ref="'page'+(index+1)">课件第{{item.page}}页</span>
|
|
|
+ <img class="page-mini-img" @click="openViewer(item.img)" :src="item.img" />
|
|
|
</div>
|
|
|
- <EmptyData v-if="!item.pageData.length" textContent="此页没有互动数据"></EmptyData>
|
|
|
- <div v-for="(rtItem, rtIndex) in item.pageRecorde" :key="rtIndex +''+index" class="record-data-item">
|
|
|
- <!--即问即答-->
|
|
|
- <div v-if="rtItem.type == 'irs' && (typeIndex == 'all' || typeIndex == 'irs')" class="record-split">
|
|
|
- <div class="answer-record-item">
|
|
|
- <div class="answer-data-wrap irs-data-wrap">
|
|
|
- <div class="tools-wrap animated fadeIn">
|
|
|
- <Icon class="tools-icon" custom="iconfont icon-pie" title="数据统计" @click="toggleIrsView(index,rtIndex,0)" :style="{color: (recordData[index].pageRecorde[rtIndex].irsView == 0 || !recordData[index].pageRecorde[rtIndex].irsView)? '#1cc0f3':'white'}" />
|
|
|
- <Icon class="tools-icon" custom="iconfont icon-flop" title="作答详情" @click="toggleIrsView(index,rtIndex,1)" :style="{color: recordData[index].pageRecorde[rtIndex].irsView == 1 ? '#1cc0f3':'white'}" />
|
|
|
- <Icon class="tools-icon" custom="iconfont icon-mini-note" title="Mini-Note" @click="toggleIrsView(index,rtIndex,2)" :style="{color: recordData[index].pageRecorde[rtIndex].irsView == 2 ? '#1cc0f3':'white'}" />
|
|
|
- </div>
|
|
|
- <!--数据统计-->
|
|
|
- <div v-show="recordData[index].pageRecorde[rtIndex].irsView == 0 || !recordData[index].pageRecorde[rtIndex].irsView" class="animated fadeIn">
|
|
|
- <OptionBar></OptionBar>
|
|
|
- <CorrectRate></CorrectRate>
|
|
|
- </div>
|
|
|
- <!--作答详情-->
|
|
|
- <div v-show="recordData[index].pageRecorde[rtIndex].irsView == 1" class="animated fadeIn">
|
|
|
- <div class="flop-student-item">
|
|
|
- <span class="option-tag">A:</span>
|
|
|
- <span class="student-tag" v-for="(item,index) in (pageNum + 22)" :key="index" title="李月林">{{index}}</span>
|
|
|
- </div>
|
|
|
- <div class="flop-student-item">
|
|
|
- <span class="option-tag">B:</span>
|
|
|
- <span class="student-tag" style="background:#1cc0f3;" :key="index" v-for="(item,index) in (pageNum + 22)" title="李月林">{{index}}</span>
|
|
|
- </div>
|
|
|
- <div class="flop-student-item">
|
|
|
- <span class="option-tag">C:</span>
|
|
|
- <span class="student-tag" v-for="(item,index) in (pageNum + 22)" :key="index" title="李月林">{{index}}</span>
|
|
|
- </div>
|
|
|
- <div class="flop-student-item">
|
|
|
- <span class="option-tag">D:</span>
|
|
|
- <span class="student-tag" :key="index" v-for="(item,index) in (pageNum + 22)" title="李月林">{{index}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--Mini-Note-->
|
|
|
- <div v-show="recordData[index].pageRecorde[rtIndex].irsView == 2" class="animated fadeIn">
|
|
|
- <EmptyData textContent="没有学生提交Mini-Note"></EmptyData>
|
|
|
- </div>
|
|
|
- <span class="answer-time">00:03:58</span>
|
|
|
-
|
|
|
- </div>
|
|
|
- <Icon type="ios-people" class="question-icon" />
|
|
|
- </div>
|
|
|
+ <div class="record-data-wrap">
|
|
|
+ <div class="record-data-item">
|
|
|
+ <span v-for="(rtItem, rtIndex) in item.pageData" :key="rtIndex +''+index" class="event-tag">{{rtItem.Event}}</span>
|
|
|
</div>
|
|
|
- <!--飞讯-->
|
|
|
- <div v-else-if="rtItem.type == 'msg' && (typeIndex == 'all' || typeIndex == 'msg')" class="record-split">
|
|
|
- <div class="question-record-item" style="display:none;">
|
|
|
- <span class="question-icon">Q</span>
|
|
|
- <div class="question-data-wrap">
|
|
|
- <span class="question-time">00:03:58</span>
|
|
|
- </div>
|
|
|
+ <EmptyData v-if="!item.pageData.length" textContent="此页没有互动数据"></EmptyData>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 互动数据 -->
|
|
|
+ <Divider dashed style="margin:12px 0px" />
|
|
|
+ <div>
|
|
|
+ <!-- 随机挑人 -->
|
|
|
+ <Pick></Pick>
|
|
|
+ <!-- 即问即答 -->
|
|
|
+ <PopQues></PopQues>
|
|
|
+ <!-- 推送 -->
|
|
|
+ <Push></Push>
|
|
|
</div>
|
|
|
- <div class="answer-record-item">
|
|
|
- <div class="answer-data-wrap msg-data-wrap">
|
|
|
- <vuescroll>
|
|
|
- <p class="message-info" :key="index" v-for="(item,index) in (pageNum + 22)">
|
|
|
- <span class="student-name">李月林:</span>
|
|
|
- <span>犯得上广泛事故发生的广东省感到十分广东佛山古典风格的四个</span>
|
|
|
- </p>
|
|
|
- </vuescroll>
|
|
|
- </div>
|
|
|
- <span class="question-icon">A</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--图片-->
|
|
|
- <div v-else-if="rtItem.type == 'img' && (typeIndex == 'all' || typeIndex == 'img')" class="record-split">
|
|
|
- <div class="question-record-item">
|
|
|
- <span class="question-icon">Q</span>
|
|
|
- <div class="question-data-wrap">
|
|
|
- <p class="text-label">教師推送了一張圖: </p>
|
|
|
- <img height="200" 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" @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')" />
|
|
|
- <span class="question-time">00:03:58</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="answer-record-item">
|
|
|
- <div class="answer-data-wrap">
|
|
|
- <span class="answer-time">00:03:58</span>
|
|
|
- <p class="text-label">学生上传图片: </p>
|
|
|
- <div class="student-img-box">
|
|
|
- <img @click="openViewer('https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas)" width="120" :src="'https://teammodelstorage.blob.core.chinacloudapi.cn/hbcn/hbcn/res/鬼滅之刃.jpg'+schoolSas" />
|
|
|
- <p class="img-info">第一组</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span class="question-icon">A</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--链接-->
|
|
|
- <div v-else-if="rtItem.type == 'link' && (typeIndex == 'all' || typeIndex == 'link')" class="record-split">
|
|
|
- <div class="question-record-item">
|
|
|
- <span class="question-icon">Q</span>
|
|
|
- <div class="question-data-wrap">
|
|
|
- <span class="question-time">00:03:58</span>
|
|
|
- <p class="text-label">教師推送了一个链接: </p>
|
|
|
- <a target="_blank" href="https://www.habook.com.cn/">https://www.habook.com.cn/</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </vuescroll>
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
@@ -194,11 +109,12 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import BlobTool from '@/utils/blobTool.js'
|
|
|
-import OptionBar from './OptionCount.vue'
|
|
|
-import CorrectRate from './CorrectRate.vue'
|
|
|
+import PopQues from './eventchart/PopQues.vue'
|
|
|
+import Pick from './eventchart/Pick.vue'
|
|
|
+import Push from './eventchart/Push.vue'
|
|
|
export default {
|
|
|
components: {
|
|
|
- OptionBar, CorrectRate
|
|
|
+ PopQues, Pick, Push
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -747,22 +663,6 @@ export default {
|
|
|
height: 450px;
|
|
|
}
|
|
|
|
|
|
-.upload-area .ivu-upload-drag {
|
|
|
- background: none;
|
|
|
- box-shadow: 5px 5px 500px #606060 inset;
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.upload-area .upload-text {
|
|
|
- margin-bottom: 30px;
|
|
|
- font-size: 25px;
|
|
|
-}
|
|
|
-
|
|
|
-.upload-area .upload-icon {
|
|
|
- margin-top: 30px;
|
|
|
- font-size: 50px;
|
|
|
-}
|
|
|
-
|
|
|
.video-player-box .vjs-volume-panel {
|
|
|
display: none;
|
|
|
}
|