查看作业

src/components/pages/liveRoom.vue

@@ -23,17 +23,27 @@
         <div class="logoLive">
           <img src="../../assets/icon/logo.png" alt />
         </div>
-        <div style="color: #fff; line-height: 45px; padding-left: 15px">introduce a festival (Final)</div>
+        <div style="color: #fff; line-height: 45px; padding-left: 15px">
+          introduce a festival (Final)
+        </div>
       </div>
     </div>
     <div class="isNoOther">
-      <div class="imgMiddle" :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'" v-show="!full">
+      <div
+        class="imgMiddle"
+        :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'"
+        v-show="!full"
+      >
         <!-- <img src="../../assets/icon/kc1.png" alt /> -->
         <!-- <iframe
           style="width: 100%; height: 100%; border: none"
           src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0701%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656644341323.pptx"
         ></iframe>-->
-        <pdf :pdfUrl="pdfUrl" style="width: 100%; height: 100%" :getPage="getPage"></pdf>
+        <pdf
+          :pdfUrl="pdfUrl"
+          style="width: 100%; height: 100%"
+          :getPage="getPage"
+        ></pdf>
       </div>
       <div
         style="
@@ -46,15 +56,23 @@
         "
         v-if="isBlock == 1 || isBlock == 6"
       >
-        <div style="background: #fff; height: 92%; width: 96%; margin: 10px auto">
-          <div style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px">答题查看</div>
+        <div
+          style="background: #fff; height: 92%; width: 96%; margin: 10px auto"
+        >
+          <div
+            style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px"
+          >
+            答题查看
+          </div>
           <div class="answerBox" v-if="isBlock == 1 || isBlock == 6">
             <div class="memberBox" v-if="isBlock == 1">
               <div
                 :class="{ pAnswer: item.is == 2 }"
                 v-for="(item, index) in studentArray"
                 :key="index"
-              >{{ item.name }}</div>
+              >
+                {{ item.name }}
+              </div>
             </div>
             <div class="memberBox" v-if="isBlock == 6">
               <div
@@ -63,12 +81,22 @@
                 v-for="(item, index) in studentArray2"
                 :key="index"
                 @click="whoAnswer(item, index)"
-              >{{ item.name }}</div>
+              >
+                {{ item.name }}
+              </div>
               <div v-if="studentArray2.length == 0">暂无学生</div>
             </div>
-            <div style="color: #948bdc; padding-top: 15px" v-if="isBlock == 1">共有四个选项，正在答题......</div>
-            <div class="viewSta" @click="isBlock = 3" v-if="isBlock == 1">查看数据统计</div>
-            <span slot="footer" class="dialog-footer sztFooter" v-if="isBlock == 6">
+            <div style="color: #948bdc; padding-top: 15px" v-if="isBlock == 1">
+              共有四个选项，正在答题......
+            </div>
+            <div class="viewSta" @click="isBlock = 3" v-if="isBlock == 1">
+              查看数据统计
+            </div>
+            <span
+              slot="footer"
+              class="dialog-footer sztFooter"
+              v-if="isBlock == 6"
+            >
               <el-button type="primary" @click="isBlock = 0">结束</el-button>
               <!-- <el-button type="primary" @click="isBlock = 2">返回</el-button> -->
             </span>
@@ -114,7 +142,11 @@
           </span>
         </div>
       </div>
-      <div class="answerBox tools_box" v-if="isBlock == 2" style="padding: 10px 0 0 25px">
+      <div
+        class="answerBox tools_box"
+        v-if="isBlock == 2"
+        style="padding: 10px 0 0 25px"
+      >
         <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
         <div
           style="
@@ -124,7 +156,9 @@
             text-align: center;
             padding-bottom: 3px;
           "
-        >选择工具</div>
+        >
+          选择工具
+        </div>
         <div
           style="
             display: flex;
@@ -185,7 +219,10 @@
               <div>思维网格</div>
             </div>
           </div>
-          <div v-if="tools[steps].tools && tools[steps].tools.indexOf(10) != -1" class="toolCss">
+          <div
+            v-if="tools[steps].tools && tools[steps].tools.indexOf(10) != -1"
+            class="toolCss"
+          >
             <div class="toolImg" @click="timeDialogVisible = true">
               <img src="../../assets/icon/thirdToolList/time.png" alt />
               <div>倒计时</div>
@@ -196,34 +233,68 @@
           <div class="nextStepOne" @click="isBlock = 0">关闭</div>
         </div>
       </div>
-      <div class="answerBox tools_box" :class="{ fullStyle: full }" v-if="isBlock == 5">
+      <div
+        class="answerBox tools_box"
+        :class="{ fullStyle: full }"
+        v-if="isBlock == 5"
+      >
         <div style="height: 100%; width: 100%">
           <div v-if="toolCount == 1" class="tools_child_box">
             <div class="tools_title">
               <span>电子白板</span>
               <div>
-                <img src="../../assets/full.png" class="full" @click="fullTools" />
-                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+                <img
+                  src="../../assets/full.png"
+                  class="full"
+                  @click="fullTools"
+                />
+                <img
+                  src="../../assets/close1.png"
+                  class="closeImg"
+                  @click="closeTools"
+                />
               </div>
             </div>
-            <iframe style="width: 100%; height: 100%; border: none" src="https://iwb.cocorobo.cn/"></iframe>
+            <iframe
+              style="width: 100%; height: 100%; border: none"
+              src="https://iwb.cocorobo.cn/"
+            ></iframe>
           </div>
           <div v-if="toolCount == 3" class="tools_child_box">
             <div class="tools_title">
               <span>思维导图</span>
               <div>
-                <img src="../../assets/full.png" class="full" @click="fullTools" />
-                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+                <img
+                  src="../../assets/full.png"
+                  class="full"
+                  @click="fullTools"
+                />
+                <img
+                  src="../../assets/close1.png"
+                  class="closeImg"
+                  @click="closeTools"
+                />
               </div>
             </div>
-            <iframe style="width: 100%; height: 100%; border: none" src="//cloud.cocorobo.cn/mind/"></iframe>
+            <iframe
+              style="width: 100%; height: 100%; border: none"
+              src="//cloud.cocorobo.cn/mind/"
+            ></iframe>
           </div>
           <div v-if="toolCount == 6" class="tools_child_box">
             <div class="tools_title">
               <span>协同文档</span>
               <div>
-                <img src="../../assets/full.png" class="full" @click="fullTools" />
-                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+                <img
+                  src="../../assets/full.png"
+                  class="full"
+                  @click="fullTools"
+                />
+                <img
+                  src="../../assets/close1.png"
+                  class="closeImg"
+                  @click="closeTools"
+                />
               </div>
             </div>
             <iframe
@@ -235,8 +306,16 @@
             <div class="tools_title">
               <span>思维网格</span>
               <div>
-                <img src="../../assets/full.png" class="full" @click="fullTools" />
-                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+                <img
+                  src="../../assets/full.png"
+                  class="full"
+                  @click="fullTools"
+                />
+                <img
+                  src="../../assets/close1.png"
+                  class="closeImg"
+                  @click="closeTools"
+                />
               </div>
             </div>
             <iframe
@@ -245,7 +324,9 @@
             ></iframe>
           </div>
           <div class="nextStepBox">
-            <div class="nextStepOne" @click="isBlock = 2,full = false">返回</div>
+            <div class="nextStepOne" @click="(isBlock = 2), (full = false)">
+              返回
+            </div>
           </div>
         </div>
       </div>
@@ -270,13 +351,15 @@
             height: 25px;
             line-height: 25px;
           "
-        >查看作业</div>
+        >
+          查看作业
+        </div>
         <div class="workBox">
           <div class="works" v-for="(w, wIndex) in worksList" :key="wIndex">
             <div class="workImg">
               <img
-                :src="w.upload.upImg ? w.upload.upImg[0].url : mr"
-                @click="previewImg(w.upload.upImg ? w.upload.upImg[0].url : mr)"
+                :src="w.upload ? w.upload : mr"
+                @click="previewImg(w.upload ? w.upload : mr)"
                 alt
               />
             </div>
@@ -308,7 +391,9 @@
           margin: 10px 15px;
         "
       >
-        <div style="color: #bfbfbf; padding: 15px 0 15px 0; font-size: 20px">课堂评价</div>
+        <div style="color: #bfbfbf; padding: 15px 0 15px 0; font-size: 20px">
+          课堂评价
+        </div>
         <div>
           <div class="score_box">
             <span>自我评价</span>
@@ -345,7 +430,11 @@
         </span>
       </div>
 
-      <div class="answerBox tools_box" v-if="isBlock == 8" style="padding: 10px 0 0 25px">
+      <div
+        class="answerBox tools_box"
+        v-if="isBlock == 8"
+        style="padding: 10px 0 0 25px"
+      >
         <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
         <div
           style="
@@ -355,7 +444,9 @@
             text-align: center;
             padding-bottom: 3px;
           "
-        >选择附件</div>
+        >
+          选择附件
+        </div>
         <div
           style="
             display: flex;
@@ -366,14 +457,25 @@
             align-items: center;
           "
         >
-          <div v-if="tools[steps].file && tools[steps].file.length" class="fileBox">
-            <div class="fileListCss" v-for="(v, vIndex) in videoList" :key="vIndex">
+          <div
+            v-if="tools[steps].file && tools[steps].file.length"
+            class="fileBox"
+          >
+            <div
+              class="fileListCss"
+              v-for="(v, vIndex) in videoList"
+              :key="vIndex"
+            >
               <div class="fileCss" @click="playVideo(v.src, vIndex)">
                 <img src="../../assets/uploadMp4.png" alt />
               </div>
               <div>{{ v.name }}</div>
             </div>
-            <div class="fileListCss" v-for="(f, fIndex) in fileList" :key="fIndex">
+            <div
+              class="fileListCss"
+              v-for="(f, fIndex) in fileList"
+              :key="fIndex"
+            >
               <div class="fileCss" @click="openFile(f.src)">
                 <img src="../../assets/file.png" alt />
               </div>
@@ -385,7 +487,11 @@
           <div class="nextStepOne" @click="isBlock = 0">关闭</div>
         </div>
       </div>
-      <div class="answerBox tools_box" :class="{ fullStyle: full }" v-if="isBlock == 9">
+      <div
+        class="answerBox tools_box"
+        :class="{ fullStyle: full }"
+        v-if="isBlock == 9"
+      >
         <div style="height: 70%; width: 100%">
           <div class="wheel">
             <div class="workd_media" style="height: 100%">
@@ -404,10 +510,20 @@
         </div>
       </div>
 
-      <div class="answerBox tools_box" :class="{ fullStyle: full }" v-if="isBlock == 10">
+      <div
+        class="answerBox tools_box"
+        :class="{ fullStyle: full }"
+        v-if="isBlock == 10"
+      >
         <div style="height: 70%; width: 100%">
-          <div class="wheel" style="height: 520px; width: 100%; margin: 0 0 20px 30px">
-            <iframe style="width: 100%; height: 100%; border: none" :src="pptImgUrl"></iframe>
+          <div
+            class="wheel"
+            style="height: 520px; width: 100%; margin: 0 0 20px 30px"
+          >
+            <iframe
+              style="width: 100%; height: 100%; border: none"
+              :src="pptImgUrl"
+            ></iframe>
           </div>
           <div class="nextStepBox" style="margin-top: 5%">
             <div class="nextStepOne" @click="isBlock = 8">返回</div>
@@ -422,7 +538,9 @@
           class="blackButton"
           @click="showMember(0)"
           v-if="tools[steps].tools && tools[steps].tools.indexOf(9) != -1"
-        >开始答题</div>
+        >
+          开始答题
+        </div>
         <div
           class="blackButton"
           @click="isBlock = 2"
@@ -434,33 +552,45 @@
             (tools[steps].tools && tools[steps].tools.indexOf(10) != -1) ||
             (tools[steps].tools && tools[steps].tools.indexOf(13) != -1)
           "
-        >查看工具</div>
+        >
+          查看工具
+        </div>
         <div
           class="blackButton"
           @click="checkStudentAnswer"
           v-if="tools[steps].tools && tools[steps].tools.indexOf(12) != -1"
-        >选择学生回答</div>
+        >
+          选择学生回答
+        </div>
         <div
           class="blackButton"
-          @click="selectSWork(4)"
-          v-if="  (tools[steps].tools && tools[steps].tools.indexOf(1) != -1) ||
+          @click="selectSWork()"
+          v-if="
+            (tools[steps].tools && tools[steps].tools.indexOf(1) != -1) ||
             (tools[steps].tools && tools[steps].tools.indexOf(3) != -1) ||
             (tools[steps].tools && tools[steps].tools.indexOf(6) != -1) ||
             (tools[steps].tools && tools[steps].tools.indexOf(7) != -1) ||
             (tools[steps].tools && tools[steps].tools.indexOf(10) != -1) ||
             (tools[steps].tools && tools[steps].tools.indexOf(16) != -1) ||
-            (tools[steps].tools && tools[steps].tools.indexOf(13) != -1)"
-        >查看作业</div>
+            (tools[steps].tools && tools[steps].tools.indexOf(13) != -1)
+          "
+        >
+          查看作业
+        </div>
         <div
           class="blackButton"
-          @click="selectSWork(6)"
-          v-if="(tools[steps].tools && tools[steps].tools.indexOf(14) != -1)"
-        >查看评价</div>
+          @click="selectSWork()"
+          v-if="tools[steps].tools && tools[steps].tools.indexOf(14) != -1"
+        >
+          查看评价
+        </div>
         <div
           class="blackButton"
           @click="selectFile"
           v-if="tools[steps].file && tools[steps].file.length"
-        >查看附件</div>
+        >
+          查看附件
+        </div>
       </div>
     </div>
     <el-dialog
@@ -471,9 +601,9 @@
       :before-close="handleClose"
       class="dialog_diy"
     >
-      <div
-        style="text-align: center; padding: 20px 0 50px 0; font-size: 18px"
-      >是否让“{{ answerStudent }}”同学进行单独答题？</div>
+      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
+        是否让“{{ answerStudent }}”同学进行单独答题？
+      </div>
       <div
         style="
           width: 200px;
@@ -487,7 +617,9 @@
           cursor: pointer;
         "
         @click="dialogVisible = false"
-      >确定</div>
+      >
+        确定
+      </div>
     </el-dialog>
     <el-dialog
       :visible.sync="dialogVisible1"
@@ -496,7 +628,9 @@
       :before-close="handleClose"
       class="dialog_diy"
     >
-      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">正在开发中！</div>
+      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
+        正在开发中！
+      </div>
       <div
         style="
           width: 200px;
@@ -510,7 +644,9 @@
           cursor: pointer;
         "
         @click="dialogVisible1 = false"
-      >确定</div>
+      >
+        确定
+      </div>
     </el-dialog>
     <el-dialog
       :visible.sync="dialogVisible2"
@@ -519,7 +655,9 @@
       :before-close="handleClose"
       class="dialog_diy"
     >
-      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">课程结束后才有报告！</div>
+      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
+        课程结束后才有报告！
+      </div>
       <div
         style="
           width: 200px;
@@ -533,7 +671,9 @@
           cursor: pointer;
         "
         @click="dialogVisible2 = false"
-      >确定</div>
+      >
+        确定
+      </div>
     </el-dialog>
     <el-dialog
       title="倒计时"
@@ -655,8 +795,7 @@ export default {
           file: [
             {
               name: "视频1.mp4",
-              src:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
+              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
             },
           ],
         },
@@ -672,8 +811,7 @@ export default {
           file: [
             {
               name: "视频2.mp4",
-              src:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
+              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
             },
           ],
         },
@@ -757,13 +895,14 @@ export default {
     },
     //uuid生成
     guid() {
-      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (
-        c
-      ) {
-        var r = (Math.random() * 16) | 0,
-          v = c == "x" ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-      });
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == "x" ? r : (r & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
     },
     time() {
       if (!this.now) {
@@ -888,13 +1027,12 @@ export default {
           console.error(err);
         });
     },
-    selectSWork(type) {
+    selectSWork() {
       this.worksList = [];
       let params = {
         uid: "",
         cid: this.cid,
-        p: this.steps - 1,
-        t: type,
+        p: this.steps,
       };
       this.ajax
         .get(this.$store.state.api + "selectSWork", params)
@@ -902,7 +1040,7 @@ export default {
           this.worksDetail = res.data[0];
           for (var i = 0; i < this.worksDetail.length; i++) {
             this.worksList.push({
-              upload: JSON.parse(this.worksDetail[i].upload)[0],
+              upload: this.worksDetail[i].upload,
               sName: this.worksDetail[i].username,
               time: this.worksDetail[i].time,
             });
@@ -1254,6 +1392,8 @@ export default {
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
+  height: 700px;
+  overflow: auto;
 }
 .works {
   width: 31%;
@@ -1264,6 +1404,7 @@ export default {
   min-width: 180px;
   border-radius: 3px;
   overflow: hidden;
+  height: 183px;
 }
 .workImg {
   /* width: 214px; */