From 5d95dd2ebb68b7713d1417e7d2f4d7c7c5b7a0e7 Mon Sep 17 00:00:00 2001
From: yangjun <1173114630@qq.com>
Date: Thu, 26 Dec 2024 13:25:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=9B=E5=88=86=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/WjxWjxxTmlbAllDjjgsList.vue    |   5 +-
 .../site/common/video/videojs/viewPage.vue    | 244 +++++++++++++++---
 src/views/zy/sysZy/kczygl/ZyKctjList.vue      |   2 +-
 3 files changed, 209 insertions(+), 42 deletions(-)

diff --git a/src/views/kc/wjxWjxx/components/WjxWjxxTmlbAllDjjgsList.vue b/src/views/kc/wjxWjxx/components/WjxWjxxTmlbAllDjjgsList.vue
index af0b28d..00eec3f 100644
--- a/src/views/kc/wjxWjxx/components/WjxWjxxTmlbAllDjjgsList.vue
+++ b/src/views/kc/wjxWjxx/components/WjxWjxxTmlbAllDjjgsList.vue
@@ -149,13 +149,14 @@ function handleZgtpf() {
 }
 
 function handleHqjg(record){
-  console.log(record);
+  // console.log(record);
   // defHttp.post({url:'/wjxDjxx/updateDjjg',params:record}).then(res=>{
   //   console.log('-->',res)
+  //   reload();
   // })
   loadingCeshi.value = true;
   defHttp.post({url:'/wjxDjxx/getDjjg',params:record}).then(res=>{
-    console.log('-->',res)
+    // console.log('-->',res)
     loadingCeshi.value = false;
     reload();
   })
diff --git a/src/views/site/common/video/videojs/viewPage.vue b/src/views/site/common/video/videojs/viewPage.vue
index 06c287d..7c4db2e 100644
--- a/src/views/site/common/video/videojs/viewPage.vue
+++ b/src/views/site/common/video/videojs/viewPage.vue
@@ -8,7 +8,7 @@
         <a-layout-content>
           <div style="width:100%;height: 100%;margin-top: 1rem;" v-if="!isError">
             <a-row :gutter="[16,16]">
-              <a-col :xs="{ span: 24 }" :sm="{ span: 19 }" :lg="{ span: 19 }">
+              <a-col span="24">
                 <div>
                   <a-card class="videoCardMain" style="width:100%">
                     <template #title>
@@ -53,33 +53,134 @@
                         </a-col>
                       </a-row>
 
-                      <a-row>
-                        <a-col :span="fpxsShow=='1'?24:18" style="padding: 4px;">
+                      <a-row  style="background: black;line-height: 70px;">
+                        <!-- 单屏及双屏显示 -->
+                        <a-col :span="fpxsShow=='1'?24:12" v-show="fpxsShow==1 || fpxsShow==2" style="padding: 4px;">
                           <div class="s-video-all"  >
-                                  <div class="s-video" >
-                                    <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true}" @load-end="mainVideoLoadEnd"/>
-                                  </div>
-                                  <div class="s-full" v-if="fpxsShow != '1'">
-                                    {{checkTitle}}
-                                  </div>
-                              </div>
+                            <div class="s-video" >
+                              <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true}" @load-end="mainVideoLoadEnd"/>
+                            </div>
+                          </div>
                         </a-col>
-                        <a-col :span="6" v-show="fpxsShow=='2'">
-                          <a-row :class="videoFpName">
-                            <a-col :span="24" style="padding: 3px;" v-for="(item,index) in fpData" @click="changeLive2(item)" v-show="item.sfxs=='1' && checkTitle != item.xm">
-                              <div class="s-video-all"  >
-                                  <div class="s-video" >
-                                    <bVideo :key="'other2-'+index" :ref="el=> bVideoRefs['other2-'+item.id] = el" :videoId="'other2-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/>
-                                  </div>
-                                  <div class="s-full">
-                                    {{item.xm}}
-                                  </div>
+                        <!-- 双屏显示 -->
+                        <a-col :span="12" v-show="fpxsShow==2">
+                          <div class="s-video-all"  >
+                            <div class="s-video" >
+                              <bVideo ref="mainVideo2" videoId="mainVideo2" :videoOption="{ autoplay: true}" @load-end="loadEnd"/>
+                            </div>
+                          </div>
+                        </a-col>
+                        <!-- 四屏显示 -->
+                        <a-col :span="12" style="padding: 5px;" v-show="fpxsShow=='3' && item.sfxs=='1' && checkTitle != item.xm"  v-for="(item,index) in fpData">
+                          <div class="s-video-all"  >
+                              <div class="s-video" >
+                                <bVideo :key="'other2-'+index" :ref="el=> bVideoRefs['other2-'+item.id] = el" :videoId="'other2-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/>
                               </div>
+                              <div class="s-full">
+                                {{item.xm}}
+                              </div>
+                          </div>
+                        </a-col>
+                        <!-- 讲座模式 -->
+                        <!-- 1单屏  2双屏  3四屏  4讲座模式1  5讲座模式2  6讲座模式3 -->
+                        <a-col :span="24" style="padding: 5px;" v-show="fpxsShow=='4'|| fpxsShow=='5' || fpxsShow=='6'" >
+                          <a-row>
+                            <a-col :span="18" style="padding: 4px;">
+                              <div class="s-video-all"  >
+                                      <div class="s-video" >
+                                        <bVideo ref="mainJzmsPPTVideo" videoId="mainJzmsPPTVideo" :videoOption="{ autoplay: true, controls: false}" @load-end="loadEnd"/>
+                                      </div>
+                                      <div class="s-full" v-if="fpxsShow != '1'">
+                                        PPT
+                                      </div>
+                                  </div>
+                            </a-col>
+                            <a-col :span="6" :style="`margin-top:${fpxsShow=='4'?'130px':fpxsShow=='5'?'80px':''}`">
+                              <a-row :class="videoFpName">
+                                <a-col :span="24" style="padding: 3px;"  v-show="fpxsShow=='4' || fpxsShow=='5' || fpxsShow=='6'">
+                                  <div class="s-video-all"  >
+                                      <div class="s-video" >
+                                        <bVideo ref="mainJzms1Video" videoId="mainJzms1Video" :videoOption="{ autoplay: true, controls: false}" @load-end="loadEnd"/>
+                                      </div>
+                                      <div class="s-full">
+                                        教师近景
+                                      </div>
+                                  </div>
+                                </a-col>
+                                <a-col :span="24" style="padding: 3px;" v-show="fpxsShow=='5' || fpxsShow=='6'" >
+                                  <div class="s-video-all"  >
+                                      <div class="s-video" >
+                                        <bVideo ref="mainJzms2Video" videoId="mainJzms2Video" :videoOption="{ autoplay: true, controls: false}" @load-end="loadEnd"/>
+                                      </div>
+                                      <div class="s-full">
+                                        学生全景
+                                      </div>
+                                  </div>
+                                </a-col>
+                                <a-col :span="24" style="padding: 3px;" v-show="fpxsShow=='6'"  >
+                                  <div class="s-video-all"  >
+                                      <div class="s-video" >
+                                        <bVideo ref="mainJzms3Video" videoId="mainJzms3Video" :videoOption="{ autoplay: true, controls: false}" @load-end="loadEnd"/>
+                                      </div>
+                                      <div class="s-full">
+                                        教师全景
+                                      </div>
+                                  </div>
+                                </a-col>
+                              </a-row>
                             </a-col>
                           </a-row>
                         </a-col>
                         
                       </a-row>
+
+                      
+                      <a-col span="24" style="background: black;line-height: 70px;">
+                        <a-row style="text-align: center;">
+                          <a-col span="4">
+                            <a-popover>
+                              <template #content>
+                                <a-radio-group v-model:value="spyCheck">
+                                  <template v-for="(item,i) in fpData" :key="i">
+                                    <a-radio :value="item.xm" @click="changeLive(item)">{{ item.xm }}</a-radio><br/>
+                                  </template>
+                                </a-radio-group>
+                              </template>
+                              <a-button type="primary" @click="handlePmms('1')">单屏模式</a-button>
+                            </a-popover>
+                          </a-col>
+                          <a-col span="4">
+                            <a-popover>
+                              <template #content>
+                                <a-row>
+                                  <a-col :span="12">
+                                    <div>左屏幕</div>
+                                    <a-radio-group v-model:value="spyCheck">
+                                      <template v-for="(item,i) in fpData" :key="i">
+                                        <a-radio :value="item.xm" @click="changeLeftLive(item)" >{{ item.xm }}</a-radio><br/>
+                                      </template>
+                                    </a-radio-group>
+                                  </a-col>
+                                  <a-col :span="12">
+                                    <div>右屏幕</div>
+                                    <a-radio-group v-model:value="spy2Check">
+                                      <template v-for="(item,i) in fpData" :key="i">
+                                        <a-radio :value="item.xm" @click="changeRightLive(item)">{{ item.xm }}</a-radio><br/>
+                                      </template>
+                                    </a-radio-group>
+                                  </a-col>
+                                </a-row>
+                              </template>
+                              <a-button type="primary" @click="handlePmms('2')">双屏模式</a-button>
+                            </a-popover>
+                          </a-col>
+                          <a-col span="4"><a-button type="primary" @click="handlePmms('3')">四屏模式</a-button></a-col>
+                          <a-col span="4"><a-button type="primary" @click="handlePmms('4')">讲座模式1</a-button></a-col>
+                          <a-col span="4"><a-button type="primary" @click="handlePmms('5')">讲座模式2</a-button></a-col>
+                          <a-col span="4"><a-button type="primary" @click="handlePmms('6')">讲座模式3</a-button></a-col>
+                        </a-row>
+                      </a-col>
+
                       
                       <div class="jxDiv">
                         <a-space>
@@ -107,7 +208,7 @@
                   </a-card>
                 </div>
               </a-col>
-              <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 5 }">
+              <!-- <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 5 }">
                 <a-row>
                   
                   <a-col :span="24" v-for="(item,index) of tableData" style="text-align: center;" :key="'col-'+index">
@@ -149,7 +250,7 @@
                     </a-card>
                   </a-col>
                 </a-row>
-              </a-col>
+              </a-col> -->
             </a-row>
           </div>
           <div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;">
@@ -212,6 +313,7 @@ const tingKeZuJiAddModal = ref<any>({});
 const curentPlayerVideo = ref<any>({});
 const kcCardBoxTitle = ref<any>('');
 const spyCheck = ref<any>([]);
+const spy2Check = ref<any>([]);
 const ktangInfo = ref<any>({});
 // const jxdgInfo = ref<any>({});
 const mainVideoCardBoxTitle = ref<any>('');
@@ -266,9 +368,7 @@ function handleSpy(record){
   }
 
   var ttb = spyCheck.value.join(",").replaceAll(checkTitle.value,"");
-  console.log("🚀 ~ handleSpy ~ ttb:", ttb)
   var ttc = ttb.split(",").filter(item => item.trim() !== '');
-  console.log("🚀 ~ handleSpy ~ ttc:", ttc)
   if(ttc.length == 2){
     videoFpName.value = "className3"
   }else if(ttc.length == 1){
@@ -279,6 +379,70 @@ function handleSpy(record){
 
 }
 
+/**
+ * 
+ * @param pmtype 1单屏  2双屏  3四屏  4讲座模式1  5讲座模式2  6讲座模式3
+ */
+function handlePmms(pmtype){
+  fpxsShow.value = pmtype;
+
+  if(pmtype == '4'){
+
+    let item= tableData.value.find(x => x.xm == 'PPT') || {};
+    let url = item.pullUrl;
+    let mainJzmsPPTVideo = document.querySelector<any>('#mainJzmsPPTVideo');
+    mainJzmsPPTVideo?.player?.src([{ type:'application/x-mpegURL',src: url }]);
+
+    
+    let item2= tableData.value.find(x => x.xm == '教师近景') || {};
+    let url2 = item2.pullUrl;
+    let mainJzms1Video = document.querySelector<any>('#mainJzms1Video');
+    mainJzms1Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }]);
+  }else if(pmtype == '5'){
+    let item= tableData.value.find(x => x.xm == 'PPT') || {};
+    let url = item.pullUrl;
+    let mainJzmsPPTVideo = document.querySelector<any>('#mainJzmsPPTVideo');
+    mainJzmsPPTVideo?.player?.src([{ type:'application/x-mpegURL',src: url }]);
+
+    
+    let item2= tableData.value.find(x => x.xm == '教师近景') || {};
+    let url2 = item2.pullUrl;
+    let mainJzms1Video = document.querySelector<any>('#mainJzms1Video');
+    mainJzms1Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }]);
+    
+    let item3= tableData.value.find(x => x.xm == '学生全景') || {};
+    let url3 = item3.pullUrl;
+    let mainJzms2Video = document.querySelector<any>('#mainJzms2Video');
+      mainJzms2Video?.player?.src([{ type:'application/x-mpegURL',src: url3 }]);
+
+  }else if(pmtype == '6'){
+    let item= tableData.value.find(x => x.xm == 'PPT') || {};
+    let url = item.pullUrl;
+    let mainJzmsPPTVideo = document.querySelector<any>('#mainJzmsPPTVideo');
+    mainJzmsPPTVideo?.player?.src([{ type:'application/x-mpegURL',src: url }]);
+
+    
+    let item2= tableData.value.find(x => x.xm == '教师近景') || {};
+    let url2 = item2.pullUrl;
+    let mainJzms1Video = document.querySelector<any>('#mainJzms1Video');
+    mainJzms1Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }]);
+    
+    let item3= tableData.value.find(x => x.xm == '学生全景') || {};
+    let url3 = item3.pullUrl;
+    let mainJzms2Video = document.querySelector<any>('#mainJzms2Video');
+      mainJzms2Video?.player?.src([{ type:'application/x-mpegURL',src: url3 }]);
+    
+    let item4= tableData.value.find(x => x.xm == '教师全景') || {};
+    let url4 = item4.pullUrl;
+    let mainJzms3Video = document.querySelector<any>('#mainJzms3Video');
+      mainJzms3Video?.player?.src([{ type:'application/x-mpegURL',src: url4 }]);
+
+  }
+
+
+}
+
+
 onMounted(() => {
   if(route.query.id){
     model.notes = '';
@@ -394,24 +558,24 @@ function changeLive(item:any){
   fpxsShow.value = '1'
   let url = item.pullUrl
   let mainVideo = document.querySelector<any>('#mainVideo');
-  // mainVideo?.player?.src([{ type:'application/x-mpegURL',src: 'http://127.0.0.1/live_hls/a.m3u8' }])
   mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
-
   mainVideoCardBoxTitle.value = item.jsmc+" "+item.xm;
-  console.log(`🚀 --------------------------------------------------------------------------------🚀`);
-  console.log(`🚀 ~ file: viewPage.vue:164 ~ changeLive ~ mainVideo?.player:`, mainVideo?.player);
-  console.log(`🚀 --------------------------------------------------------------------------------🚀`);
-  // let buttonEl = mainVideo?.player.el().querySelector('.changeDefinitionBtn');
-  //赋值原URL
-  // if(buttonEl){
-  //   buttonEl.dataset.url = url;
-  // }
-
   curentPlayerVideo.value = item;
-  // nextTick(() => {
-    //增加自动播放功能
-    //mainVideo?.player?.play();
-  // })
+}
+//选择左屏
+function changeLeftLive(item:any){
+  fpxsShow.value = '2'
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+}
+
+//选择右屏
+function changeRightLive(item:any){
+  fpxsShow.value = '2'
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo2');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
 }
 
 
@@ -722,6 +886,8 @@ video::-webkit-media-controls-timeline {
   cursor: pointer;
   background: #c0c0c0;
   border-radius: 5px;
+  height: 30px;
+  line-height: 30px;
 }
 
 
diff --git a/src/views/zy/sysZy/kczygl/ZyKctjList.vue b/src/views/zy/sysZy/kczygl/ZyKctjList.vue
index 6e8175f..f89dcd3 100644
--- a/src/views/zy/sysZy/kczygl/ZyKctjList.vue
+++ b/src/views/zy/sysZy/kczygl/ZyKctjList.vue
@@ -38,7 +38,7 @@
             <a-col :lg="6">
               <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
               <a-button  type="primary" preIcon="ant-design:export-outlined" @click="onExportXls" style="margin-left: 8px"> 导出</a-button>
-              <a-button  type="primary" preIcon="ant-design:export-outlined" @click="handleCsbz" style="margin-left: 8px" hidden> 修复次数不足的问题</a-button>
+              <a-button  type="primary" preIcon="ant-design:export-outlined" @click="handleCsbz" style="margin-left: 8px" hidden > 修复次数不足的问题</a-button>
             </a-col>
           </span>
         </a-col>