添加即问即答和推送数据UI

TEAMModelOS/ClientApp/src/common/VideoPlayer2.vue

@@ -125,10 +125,12 @@ export default {
     },
 };
 </script>
-
+<style lang="less" scoped>
+</style>
 <style lang="less">
-/*@import "~@/assets/student-web/default_styles/video-js.css";*/
-
+.video-wrap .video-js{
+    border: 1px solid #c0c0c0;
+}
 .video-wrap .video-js .vjs-progress-control {
     pointer-events: none;
 }
@@ -141,7 +143,6 @@ export default {
 
 .video-wrap .video-js .vjs-tech {
     outline: none;
-    padding: 1px;
 }
 
 .video-wrap .video-js button {

TEAMModelOS/ClientApp/src/view/classrecord/ClassRecord.less

@@ -9,18 +9,18 @@
 
 .class-record-container {
     width: 100%;
+    background: #f0f0f0;
     height: 100%;
 }
 
 .class-record-header {
     width: 100%;
     box-shadow: 0px 2px 5px #e9e9e9;
-    padding: 10px 5px;
+    padding: 15px 15px;
+    background: white;
     .course-name {
-        // background: #1CC0F3;
         padding: 4px 10px;
         margin-right: 10px;
-        // color: white;
         border-radius: 4px;
         font-size: 15px;
         font-weight: bold;
@@ -33,10 +33,6 @@
         vertical-align: top;
     }
 
-    // .label-text {
-    //     color: white;
-    // }
-
     .label-value {
         color: #1CC0F3;
         font-weight: bold;
@@ -45,11 +41,11 @@
 }
 
 .class-content {
-    width: 100%;
+    width: ~"calc(100% - 20px)";
     display: flex;
     flex-direction: row;
     height: 450px;
-    background: #fff;
+    margin-left: 10px;
     margin-top: 15px;
 
     &:hover .cus-page-wrap {
@@ -60,17 +56,26 @@
         opacity: 0;
     }
 }
+.cus-data-wrap{
+    width: ~"calc(100% - 20px)";
+    margin-left: 10px;
+    margin-top: 5px;
+}
 
 .video-player-box {
     width: 50%;
-    justify-content: center;
+    box-shadow: 0px 0px 10px 2px #d8d8d8;
     height: 450px;
     display: flex;
+    background: #fff;
 }
 .courseware-wrap {
-    width: 50%;
+    width: ~"calc(50% - 15px)";
+    margin-right: 15px;
     position: relative;
     height: 450px;
+    background: #fff;
+    box-shadow: 0px 0px 10px 2px #d8d8d8;
 
     .full-screen-icon {
         float: right;
@@ -249,6 +254,7 @@
     border-bottom: 15px solid #f0f0f0;
     background: white;
     padding: 10px 20px 10px 20px;
+    box-shadow: 0px 0px 10px 2px #d8d8d8;
 
     .record-data-wrap {
         width: 100%;
@@ -283,113 +289,7 @@
     margin-top:10px;
     cursor:pointer;
     border: 1px solid transparent;
-    &:hover{
-        border-color:#cccccc;
-    }
-}
-
-.question-record-item {
-    display: flex;
-
-    .question-icon {
-        font-size: 24px;
-        border-radius: 50%;
-        width: 35px;
-        background: #1cc0f3;
-        height: 35px;
-        line-height: 35px;
-        display: inline-block;
-        color: white;
-        text-align: center;
-    }
-
-    .question-data-wrap {
-        margin-left: 15px;
-        background: rgba(255, 255, 255, 0.1);
-        position: relative;
-        border-radius: 4px;
-        padding: 10px 15px;
-        margin-top: 5px;
-        &::before {
-            position: absolute;
-            content: '';
-            left: -9px;
-            top: 10px;
-            border-right: 6px solid transparent;
-            border-left: 6px solid transparent;
-            border-bottom: 6px solid rgba(255, 255, 255, 0.1);
-            transform: rotate(270deg);
-        }
-    }
-}
-
-.answer-data-wrap:hover .tools-wrap{
-    display:block;
-}
-.irs-data-wrap:hover {
-    border-radius: 0px 4px 4px 4px !important;
-}
-.tools-wrap {
-    background: #6b6b6d;
-    position: absolute;
-    left: 0px;
-    height: 30px;
-    top: -30px;
-    padding-left: 15px;
-    line-height: 30px;
-    border-radius: 4px 4px 0px 0px;
-    display: none;
-
-    .tools-icon {
-        // color: white;
-        font-size: 16px;
-        cursor: pointer;
-        margin-right: 15px;
-    }
-}
-.answer-record-item {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom:18px;
-    .question-icon {
-        font-size: 24px;
-        border-radius: 50%;
-        width: 35px;
-        background: #1cc0f3;
-        height: 35px;
-        line-height: 35px;
-        display: inline-block;
-        color: white;
-        text-align: center;
-    }
-
-    .answer-data-wrap {
-        margin-right: 15px;
-        max-width: 80%;
-        min-width: 400px;
-        background: rgba(255, 255, 255, 0.1);
-        position: relative;
-        border-radius: 4px;
-        margin-top: 5px;
-        padding: 10px;
-        transition: width 0.5s linear;
-        transition: height 0.5s linear;
-
-        &::before {
-            position: absolute;
-            content: '';
-            right: -9px;
-            top: 10px;
-            border-right: 6px solid transparent;
-            border-left: 6px solid transparent;
-            border-bottom: 6px solid rgba(255, 255, 255, 0.1);
-            transform: rotate(90deg);
-        }
-    }
-
-    .msg-data-wrap{
-        max-height:300px;
-    }
+    border-color:#cccccc;
 }
 
 
@@ -398,65 +298,7 @@
     left: 0px;
     bottom: -24px;
 }
-.answer-time {
-    position: absolute;
-    right: 0px;
-    bottom: -24px;
-}
-
-.message-info {
-    color: @second-textColor;
-}
-
-.student-name {
-    color: #1cc0f3;
-}
 
-.text-label {
-    margin-bottom: 10px;
-}
-
-.student-img-box {
-    display: inline-block;
-    position: relative;
-    width: 120px;
-    margin-right: 10px;
-
-    .img-info {
-        color: white;
-        position: absolute;
-        background: rgba(0, 0, 0, 0.5);
-        width: 100%;
-        left: 0px;
-        bottom: 6px;
-        text-align: center;
-    }
-}
-
-.upload-area {
-    margin-top: 15px;
-}
-
-.flop-student-item {
-    color: white;
-    margin-bottom: 8px;
-    padding-bottom: 8px;
-    border-bottom: 1px dashed #606060;
-
-    .option-tag {
-        margin-right: 5px;
-        font-size: 16px;
-    }
-
-    .student-tag {
-        background: #ed4014;
-        border-radius: 4px;
-        padding: 2px 5px;
-        margin-right: 5px;
-        font-size: 12px;
-        cursor:pointer;
-    }
-}
 .image-viewer {
     background-color: rgba(0, 0, 0, 0.8);
     z-index: 9999;
@@ -517,4 +359,6 @@
     padding: 2px 8px;
     margin-bottom: 5px;
     border: 1px solid #aaaaaa;
+    margin-right: 5px;
+    cursor: pointer;
 }

TEAMModelOS/ClientApp/src/view/classrecord/ClassRecord.vue

@@ -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;
 }

TEAMModelOS/ClientApp/src/view/classrecord/eventchart/Pick.vue

@@ -10,7 +10,7 @@ export default {
     props: {
         no: {
             type: String,
-            default: 1
+            default: '1'
         },
         name: {
             type: String,

TEAMModelOS/ClientApp/src/view/classrecord/eventchart/PopQues.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <OptionCount></OptionCount>
+        <CorrectRate></CorrectRate>
+    </div>
+</template>
+<script>
+import CorrectRate from './CorrectRate.vue'
+import OptionCount from './OptionCount.vue'
+export default {
+    data() {
+        return {
+
+        }
+    },
+    components: {
+        OptionCount, CorrectRate
+    }
+}
+</script>

TEAMModelOS/ClientApp/src/view/classrecord/eventchart/Push.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <template v-if="pushType == 'img'">
+            <div class="question-data-wrap">
+                <p class="text-label">教師推送了一張圖: </p>
+                <img  class="tea-push-img" 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')" />
+            </div>
+        </template>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            pushType: 'img'
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.tea-push-img{
+    max-width: 100px;
+    max-height: 100px;
+}
+</style>