update

src/components/student/studyStudent.vue

@@ -196,7 +196,7 @@
                   </div>
                 </div>
               </div>
-              <div class="vedioTaskBox">
+              <div class="vedioTaskBox" v-if="false">
                 <div class="box_course" v-if="
                   chapterlist.length > 0
                 ">
@@ -264,7 +264,7 @@
                   </div>
                 </div>
               </div>
-              <div style="padding: 10px 30px 0"
+              <!-- <div style="padding: 10px 30px 0"
                 v-if="chapterlist[chapterIndex] && (chapterlist[chapterIndex].type == 3 || chapterlist[chapterIndex].type == 9)">
                 <el-button type="primary"
                   @click="checkFileFull(chapterlist[chapterIndex].type, chapterlist[chapterIndex].src)">全屏查看</el-button>
@@ -277,7 +277,7 @@
               <div style="padding: 10px 30px 0" v-if="chapterlist[chapterIndex] && chapterlist[chapterIndex].type == 6">
                 <el-button type="primary"
                   @click="checkFileFull(chapterlist[chapterIndex].type, chapterlist[chapterIndex])">全屏查看</el-button>
-              </div>
+              </div> -->
             </div>
           </div>
 
@@ -470,7 +470,7 @@
                       </div>
                     </div>
                   </div>
-                  <div class="homeWorkBox" v-if="tool.toolPhoto.length">
+                  <div class="homeWorkBox" v-if="tool.toolPhoto.length && tool.tool != 51">
                     <!-- <div class="htitle">作业预览</div> -->
                     <div class="toolPhoto_box">
                       <div class="photo_box" v-for="(photo, pIndex) in tool.toolPhoto" :key="pIndex">
@@ -482,9 +482,93 @@
                       </div>
                     </div>
                   </div>
-                  <div class="homeWorkBox" v-else>
+                  <div class="homeWorkBox" v-else-if="tool.tool != 51">
                     <div class="htitle">暂无作业</div>
                   </div>
+
+                  <div v-if="tool.tool == 51" style="margin-top:30px">
+                    <div class="vedioTaskBox">
+                      <div class="box_course" :class="'box_course' + toolIndex" v-if="
+                        tool.toolData.length > 0
+                      ">
+                        <div class="wheel" v-if="
+                          tool.toolData[tool.sourceIndex].type == 2
+                        ">
+                          <div class="workd_media" style="height: 100%">
+                            <video-player class="video-player vjs-custom-skin" :playsinline="true"
+                              :options="tool.toolData[tool.sourceIndex].src" @play="onPlayerPlay($event)"
+                              style="width: 98%; height: 100%; "></video-player>
+                          </div>
+                        </div>
+                        <div class="wheel" v-if="tool.toolData[tool.sourceIndex].type == 6" style="
+                      box-shadow: 0 0 6px 1px #f2f2f2;
+                      width: 98%;
+                      background: #f1f1f1;
+                      height: 650px;
+                    ">
+                          <div class="title">查看文档</div>
+                          <el-form class="textBox">
+                            <el-form-item class="textTitle">
+                              <div style="
+                            font-size: 22px;
+                            max-height: 100px;
+                            overflow: auto;
+                          ">
+                                {{ tool.toolData[tool.sourceIndex].name }}
+                              </div>
+                            </el-form-item>
+                            <div v-html="tool.toolData[tool.sourceIndex].url" class="textContent"></div>
+                          </el-form>
+                        </div>
+                        <div class="wheel" v-if="tool.toolData[tool.sourceIndex].type == 3"
+                          style="height: 650px; width: 98%;">
+                          <iframe style="width: 100%; height: 100%; border: none"
+                            :src="tool.toolData[tool.sourceIndex].src"></iframe>
+                        </div>
+                        <div class="wheel" v-if="tool.toolData[tool.sourceIndex].type == 8"
+                          style="height: 650px; width: 98%;">
+                          <iframe style="width: 100%; height: 100%; border: none"
+                            :src="tool.toolData[tool.sourceIndex].src"></iframe>
+                        </div>
+                        <div class="wheel" v-if="tool.toolData[tool.sourceIndex].type == 9"
+                          style="height: 650px; width: 98%;">
+                          <pdf :pdfUrl="tool.toolData[tool.sourceIndex].url"
+                            style="width: 100%; height: 100%; overflow: auto">
+                          </pdf>
+                        </div>
+                      </div>
+                      <div class="vedioList" :class="'vedioList' + toolIndex" v-if="
+                        tool.toolData.length > 0
+                      ">
+                        <div class="navTitile">内容列表：</div>
+                        <div class="navBox">
+                          <div>
+                            <div class="vedioTimeBox" v-for="(chapter, cIndex) in tool.toolData" :key="cIndex + '1'"
+                              @click="setChapterIndex2(tool, cIndex, toolIndex)">
+                              <div class="vedioName" :class="{ isClickNav: tool.sourceIndex == cIndex }">
+                                {{ chapter.type == 8 ? chapter.title : chapter.name }}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div style="padding: 10px 0 0" v-if="tool.toolData[tool.sourceIndex]">
+                      <el-button
+                        v-if="(tool.toolData[tool.sourceIndex].type == 3 || tool.toolData[tool.sourceIndex].type == 9)"
+                        type="primary"
+                        @click="checkFileFull(tool.toolData[tool.sourceIndex].type, tool.toolData[tool.sourceIndex].src)">全屏查看</el-button>
+                      <el-button
+                        v-if="(tool.toolData[tool.sourceIndex].type == 3 || tool.toolData[tool.sourceIndex].type == 9)"
+                        type="primary" @click="downloadFile(tool.toolData[tool.sourceIndex].src)">文件下载</el-button>
+                      <el-button v-if="tool.toolData[tool.sourceIndex].type == 8" type="primary"
+                        @click="openLineS(tool.toolData[tool.sourceIndex].src)">打开链接
+                      </el-button>
+                      <el-button v-if="tool.toolData[tool.sourceIndex].type == 6" type="primary"
+                        @click="checkFileFull(tool.toolData[tool.sourceIndex].type, tool.toolData[tool.sourceIndex])">全屏查看</el-button>
+                      <!-- <el-button type="primary" @click="editSourceUpadte(itemTaskIndex, toolIndex)">资源编辑</el-button> -->
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -492,7 +576,7 @@
         </div>
       </div>
     </div>
-    <div class="pButton" @click="(pzDialog = true), selectPz()" v-if="tType == 4">
+    <div class="pButton" @click="(pzDialog = true), selectPz(), setVHeight()" v-if="tType == 4">
       <!-- 批 -->
       <img src="../../assets/pzBtn2.png" style="width: 25px" alt="" />
     </div>
@@ -504,7 +588,7 @@
         </div> -->
         <div class="checkbox">
           <div class="check" style="font-size: 25px">评论</div>
-          <img src="../../assets/pzBtn.png" @click="pzDialog = false" alt="" />
+          <img src="../../assets/pzBtn.png" @click="(pzDialog = false), setVHeight()" alt="" />
         </div>
       </div>
       <div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'">
@@ -624,14 +708,8 @@
         <el-button @click="fullDialogVisible = false">关 闭</el-button>
       </div> -->
     </el-dialog>
-    <el-dialog
-      title="表格"
-      :visible.sync="dialogVisibleTable2"
-      :append-to-body="true"
-      width="95%"
-      :before-close="handleClose"
-      class="dialog_diy"
-    >
+    <el-dialog title="表格" :visible.sync="dialogVisibleTable2" :append-to-body="true" width="95%"
+      :before-close="handleClose" class="dialog_diy">
       <el-form>
         <div class="cont" v-html="tableJson.text"></div>
       </el-form>
@@ -1312,7 +1390,7 @@ export default {
                 } else if (this.chapterlist[k].type == 8) {
                   if (this.chapterlist[k].url.indexOf("https://") == -1 && this.chapterlist[k].url.indexOf("http://") == -1) {
                     this.chapterlist[k].src = "https://" + this.chapterlist[k].url;
-                  }else{
+                  } else {
                     this.chapterlist[k].src = this.chapterlist[k].url;
                   }
                 } else if (this.chapterlist[k].type == 9) {
@@ -1321,12 +1399,12 @@ export default {
               }
 
               this.$nextTick(function () {
-                setTimeout(() => {
-                  var a =
-                    document.getElementsByClassName("box_course")[0].offsetHeight;
-                  document.getElementsByClassName("vedioList")[0].style.height =
-                    a + "px";
-                }, 500);
+                // setTimeout(() => {
+                //   var a =
+                //     document.getElementsByClassName("box_course")[0].offsetHeight;
+                //   document.getElementsByClassName("vedioList")[0].style.height =
+                //     a + "px";
+                // }, 500);
               });
             }
             for (var l = 0; l < this.chapInfoList.length; l++) {
@@ -1362,13 +1440,17 @@ export default {
                       _tool.toolPhoto.push(_work);
                     }
                   }
+                  if (_tool.tool == 51) {
+                    _tool.sourceIndex = 0
+                  }
                 }
               }
             }
+            this.setVHeight();
             this.getTeacher();
           } else {
             this.courseDetail = res.data[0][0];
-            this.chapInfoList = JSON.parse(this.courseDetail.chapters);
+            // this.chapInfoList = JSON.parse(this.courseDetail.chapters);
 
             let unitJson = this.chapInfoList
             let works = res.data[3]
@@ -2036,7 +2118,35 @@ export default {
       };
       x.send();
     },
+    setChapterIndex2(tool, index, toolIndex) {
+      tool.sourceIndex = index;
+      this.$nextTick(function () {
+        setTimeout(() => {
+          var a =
+            document.getElementsByClassName("box_course" + toolIndex)[0].offsetHeight;
+          document.getElementsByClassName("vedioList" + toolIndex)[0].style.height =
+            a + "px";
+        }, 0);
+      });
+      this.$forceUpdate();
+    },
+    setVHeight() {
+      this.$nextTick(function () {
+        setTimeout(() => {
+          let tool = this.chapInfoList[this.courseType].chapterInfo[0].taskJson[this.taskCount].toolArray
+          for (var z = 0; z < tool.length; z++) {
+            let _tool = tool[z]
+            if (_tool.tool == 51) {
+              var a =
+                document.getElementsByClassName("box_course" + z)[0].offsetHeight;
+              document.getElementsByClassName("vedioList" + z)[0].style.height =
+                a + "px";
+            }
+          }
 
+        }, 0);
+      })
+    }
   },
   directives: {
     // 使用局部注册指令的方式
@@ -2790,7 +2900,8 @@ export default {
   border: 1px solid #ececec;
   /* width: 38.8%; */
   width: calc(100% - 83%);
-  height: 445px;
+  /* height: 445px; */
+  height: 100%;
   border-radius: 10px;
   overflow: hidden;
 }
@@ -3332,6 +3443,7 @@ export default {
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
+  /* height: 650px; */
 }
 
 .toolBox {
@@ -3358,7 +3470,7 @@ export default {
 
 .navBox {
   background: rgb(255, 255, 255);
-  height: 400px;
+  height: calc(100% - 40px);
   padding: 5px 1px 0 1px;
   overflow: auto;
 }