修改四分屏功能，带视频源切换的

2024-12-20 14:05:35 +08:00 · 2024-12-20 14:05:35 +08:00 · f9b6f3b514
parent 91aa3ac614
commit f9b6f3b514
3 changed files with 199 additions and 34 deletions
--- a/src/views/site/common/video/videojs/viewPage.vue
+++ b/src/views/site/common/video/videojs/viewPage.vue
@ -27,19 +27,17 @@
                      </div>
                    </template>
                    <div style="padding: 1rem;">
-                      <div style="font-size: 16px;float: left;">{{ mainVideoCardBoxTitle || '' }}</div>
-                      <!-- <div style="float: right;">
-                        AI识别出勤率：{{ calcPercentage((ktangInfo?.detectionMain?.averageNum || 0),(ktangInfo?.jiaoshirongliang?.jsrl || 0))}}&nbsp;&nbsp;
-                        <template v-if="ktangInfo?.jiaoshirongliang?.jsrl">本教室容量：{{ktangInfo?.jiaoshirongliang?.jsrl}}座位</template>
-                      </div> -->
+                      <a-row>
+                        <a-col :span="24">
+                          <div style="font-size: 16px;float: left;font-weight: 600;">{{ mainVideoCardBoxTitle || '' }}</div>
                          <div style="float: right;">
-                        <span>本教室容量：{{ktangInfo?.jiaoshirongliang?.jsrl || ' '}}座位</span>
-                        <span style="margin-left:15px;">选课人数：{{ ktangInfo.xkrs || ' ' }}</span> 
+                            <span>本教室容量：</span><span style="font-size: 14px; color:#1c84c6 ;">{{ktangInfo?.jiaoshirongliang?.jsrl || ' '}}座位</span>
+                            <span style="margin-left:15px;">选课人数：</span><span style="font-size: 14px; color:#1c84c6 ;">{{ ktangInfo.xkrs || ' ' }}</span> 
                            <span style="margin-left:15px;">AI识别出勤人数: <a @click="handleZqrs(ktangInfo)">{{ ktangInfo?.kcDetectionDetailed?.num||'-' }}</a></span>
                            <span style="margin-left:15px;">
                              <a-tooltip placement="topRight">
                                <template #title>
-                              <span>平台分别在三个时间节点（上课后10分钟，课中50分钟，下课前10分钟）抓取学生全景图片进行AI人流量识别，当前显示的人数为最近一个时间的人数识别，目前部分教室摄像头拍摄画面广角待更新，AI识别出勤人数仅供参考</span>
+                                  <span>平台分别在三个时间节点（上课后10分钟，课中50分钟，下课前10分钟）抓取学生全景图片进行AI人流量识别，当前显示的人数为最近一个时间的人数识别</span>
                                </template>
                                <!-- <Icon icon="ant-design:question-circle-outlined" /> -->
                                <span class="helpClass">?</span>
@ -47,8 +45,42 @@
                            </span> 
                            
                          </div>
+                        </a-col>
+                        <a-col :span="24">
+                          <div style="width:100%;display: block;text-align: right;font-size:12px; color: #ccc;">
+                            说明：目前部分教室摄像头拍摄画面无法覆盖到全体学生，AI识别出勤人数仅供参考
+                          </div>
+                        </a-col>
+                      </a-row>
+
+                      <a-row>
+                        <a-col :span="fpxsShow=='1'?24:18" 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>
+                        </a-col>
+                        <a-col :span="6" v-show="fpxsShow=='2'">
+                          <a-row :class="spyCheck.length==4?'':spyCheck.length==3?'className3':spyCheck.length==2?'className2':''">
+                            <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>
+                              </div>
+                            </a-col>
+                          </a-row>
+                        </a-col>
+                        
+                      </a-row>
                      
-                      <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }" @load-end="mainVideoLoadEnd"/>
                      <div class="jxDiv">
                        <a-space>
                          <div v-if="ktangInfo?.zyJxdg?.filePath">
@ -77,6 +109,7 @@
              </a-col>
              <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">
                    <a-card>
                      <div>
@ -89,8 +122,28 @@
                        </div>
                        <div style="height: 2rem;">&nbsp;</div>
                        <div v-show="item.isShow" :key="'other-div-'+index">
-                          <!-- <bVideo :key="'other-'+index" :ref="el=> bVideoRefs['other-'+item.id] = el" :videoId="'other-'+item.id" :src="'http://127.0.0.1/hls/a.m3u8'" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/> -->
-                          <bVideo :key="'other-'+index" :ref="el=> bVideoRefs['other-'+item.id] = el" :videoId="'other-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/>
+                          <bVideo :key="'other-'+index" :ref="el=> bVideoRefs['other-'+item.id] = el" :videoId="'other-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd2"/>
+                        </div>
+                      </div>
+                    </a-card>
+                  </a-col> 
+                  <a-col :span="24">
+                    <a-card  :class="`handClass`">
+                      <div>
+                        <div style="margin-bottom: .5rem;">
+                          <span :class="`smallTxt miniButton ${fpxsShow=='2'?'activte':''}`"  @click="changeJfpLive('2')"><i class="fa-solid fa-right-left"></i>分屏模式</span>
+                          <span class="smallTxt miniButton miniButtonRight">
+                            <a-popover>
+                              <template #content>
+                                  <a-checkbox-group v-model:value="spyCheck" @change="handleSpy">
+                                    <template v-for="(item,i) in fpData" :key="i">
+                                      <a-checkbox :value="item.xm">{{ item.xm }}</a-checkbox><br/>
+                                    </template>
+                                  </a-checkbox-group>
+                              </template>
+                              <i class="fa-solid fa-film"></i>视频源
+                            </a-popover>
+                          </span>
                        </div>
                      </div>
                    </a-card>
@ -158,14 +211,18 @@ const kcErrorreportIndexModal = ref();
 const tingKeZuJiAddModal = ref<any>({});
 const curentPlayerVideo = ref<any>({});
 const kcCardBoxTitle = ref<any>('');
+const spyCheck = ref<any>([]);
 const ktangInfo = ref<any>({});
 // const jxdgInfo = ref<any>({});
 const mainVideoCardBoxTitle = ref<any>('');
+const checkTitle = ref<any>('');
 const tableData = ref<Recordable>([])
+const fpData = ref<Recordable>([])
 const suibiList = ref<Recordable>([])
 const isError = ref(false);
 const tkbjVisible = ref(false);
 const playStatus = ref(false);
+const fpxsShow = ref<any>('1');

 const model = reactive<Record<string, any>>({ notes:'' });

@ -196,6 +253,33 @@ const savePlayLog = (params) => defHttp.post({ url: Api.savePlayLog, params, },
 const changeAvyLiveByJsbhsApi = (params) => defHttp.get({ url: Api.changeAvyLiveByJsbhsApi, params,timeout: 9000000 });
 // const editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params });

+function getJvmClass(){
+  var className = "";
+  if(spyCheck.value.length == 4){
+
+  }else if(spyCheck.value.length == 3){
+    className = "className3";
+  }else if(spyCheck.value.length == 2){
+    className = "className2";
+  }
+  console.log("🚀 ~ getJvmClass ~ className:", className)
+  return className;
+}
+
+function handleSpy(record){
+  console.log("🚀 ~ handleSpy ~ record:", record)
+  for(var i=0;i<fpData.value.length;i++){
+    fpData.value[i].sfxs = "0";
+    for(var j=0;j<record.length;j++){
+      if(fpData.value[i].xm == record[i]){
+        fpData.value[i].sfxs = "1";
+        break;
+      }
+    }
+  }
+  getJvmClass()
+}
+
 onMounted(() => {
  if(route.query.id){
    model.notes = '';
@ -203,6 +287,15 @@ onMounted(() => {
    list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => {
      let list = (res?.records) ?? [];
      tableData.value = list;
+      fpData.value = list;
+      var tta = "";
+      for(var i=0;i<fpData.value.length;i++){
+        var infoa = fpData.value[i].xm;
+        fpData.value[i].sfxs = "1";
+        tta = tta + infoa+",";
+      }
+      spyCheck.value = tta.split(",");
+      console.log("---------------",spyCheck.value);
      tableData.value.forEach(x => x.isShow = true);//默认展开
      let zjData = tableData.value.find(x => x.xm == '教师近景') || {};
      nextTick(() => {
@ -218,6 +311,9 @@ onMounted(() => {
    getKcxx();
    //记录播放日志
    isError.value = false;
+
+
+
  }else{
    isError.value = true;
  }
@ -265,6 +361,20 @@ function funpingjia(record) {
 * @param player
 */
 function loadEnd(player){
+  nextTick(() => {
+    // player.on('play',() => {
+    //   setTimeout(() => {
+    //     player.pause();
+    //   },2000);
+    // })
+  })
+}
+
+/**
+ * 子页加载完成后回调
+ * @param player
+ */
+ function loadEnd2(player){
  nextTick(() => {
    player.on('play',() => {
      setTimeout(() => {
@ -282,6 +392,7 @@ function initVideo(key){
 }

 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' }])
@ -304,6 +415,29 @@ function changeLive(item:any){
  // })
 }

+
+function changeLive2(item:any){
+  fpxsShow.value = '2'
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+  mainVideoCardBoxTitle.value = item.jsmc+" "+item.xm;
+  curentPlayerVideo.value = item;
+  checkTitle.value = item.xm;
+}
+
+
+function changeJfpLive(type){
+  fpxsShow.value = type;
+  let item= tableData.value.find(x => x.xm == '教师近景') || {};
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+  checkTitle.value = "教师近景";
+  curentPlayerVideo.value = item;
+}
+
+
 function mainVideoLoadEnd(player){
  setTimeout(() => {
    setTimeout(() => {
@ -563,4 +697,40 @@ video::-webkit-media-controls-timeline {
    border: 1px #1c84c6 solid;
    cursor: pointer;
 }
+.handClass{
+  cursor: pointer;
+}
+.fptitle{
+  background: black;
+  color: white;
+  font-weight: 700;
+  text-align: center;
+}
+
+
+.s-video-all {
+  width: 100%;
+  position: relative;
+}
+
+.s-full {
+  text-align: center;
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 70px;
+  color: white;
+  cursor: pointer;
+  background: #c0c0c0;
+  border-radius: 5px;
+}
+
+
+.className3 {
+  margin-top: 50px;
+}
+
+.className2 {
+  margin-top: 100px;
+}
 </style>
--- a/src/views/site/renKeJiaoCheng/checkKecheng/dqxqkcMenu.vue
+++ b/src/views/site/renKeJiaoCheng/checkKecheng/dqxqkcMenu.vue
@ -49,11 +49,11 @@
            <BlockOutlined />
            <span>课程资源</span>
          </a-menu-item>
-          <!-- <a-menu-item key="sub7" @click="getGzt('khcl')">
+          <a-menu-item key="sub7" @click="getGzt('khcl')">
            <BlockOutlined />
            <span>上传考核材料</span>
          </a-menu-item>
-          <a-menu-item key="sub8">
+          <!-- <a-menu-item key="sub8">
            <BlockOutlined />
              <span @click="gotoPageByName('jiaoXueDanYuanNeiRong')">教学单元</span>
            </a-menu-item>
@ -93,12 +93,6 @@
              <PieChartOutlined />
            </template>
            <span @click="getGzt('yiykzyk')">教学资源库</span>
-          </a-menu-item>
-          <a-menu-item key="sub6">
-            <template #icon>
-              <PieChartOutlined />
-            </template>
-            <span @click="getGzt('tlq')">讨论区</span>
          </a-menu-item> -->
        </a-menu>
      </a-col>
@ -128,13 +122,14 @@
            <a-menu-item key="sub6" @click="getGzt('kczy')">
              <span>课程资源</span>
            </a-menu-item> 
+            <a-menu-item key="sub7" @click="getGzt('khcl')">
+              <span>上传考核材料</span>
+            </a-menu-item>
            <!-- <a-menu-item key="sub7">
              <span @click="getGzt('jxdg')">教学大纲</span>
            </a-menu-item> -->
            
-            <!-- <a-menu-item key="sub7" @click="getGzt('khcl')">
-              <span>上传考核材料</span>
-            </a-menu-item> -->
+           
            <!--  -->
            <!-- <a-menu-item key="sub6">
              <span @click="getGzt('gongju')">AI识别出勤率</span>
--- a/src/views/site/renKeJiaoCheng/checkKecheng/dqxqkcMenuHistory.vue
+++ b/src/views/site/renKeJiaoCheng/checkKecheng/dqxqkcMenuHistory.vue
@ -47,7 +47,7 @@
          </a-menu-item>
          <a-menu-item key="sub6" @click="getGzt('kczy')">
            <BlockOutlined />
-            <span>课程资源</span>
+            <span>课程资源2</span>
          </a-menu-item>
          <!-- <a-menu-item key="sub7" @click="getGzt('khcl')">
            <BlockOutlined />