修改四分屏功能，带视频源切换的
This commit is contained in:
parent
91aa3ac614
commit
f9b6f3b514
|
|
@ -27,28 +27,60 @@
|
|||
</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))}}
|
||||
<template v-if="ktangInfo?.jiaoshirongliang?.jsrl">本教室容量：{{ktangInfo?.jiaoshirongliang?.jsrl}}座位</template>
|
||||
</div> -->
|
||||
<div style="float: right;">
|
||||
<span>本教室容量：{{ktangInfo?.jiaoshirongliang?.jsrl || ' '}}座位</span>
|
||||
<span style="margin-left:15px;">选课人数：{{ 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>
|
||||
</template>
|
||||
<!-- <Icon icon="ant-design:question-circle-outlined" /> -->
|
||||
<span class="helpClass">?</span>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<div style="font-size: 16px;float: left;font-weight: 600;">{{ mainVideoCardBoxTitle || '' }}</div>
|
||||
<div style="float: right;">
|
||||
<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人流量识别，当前显示的人数为最近一个时间的人数识别</span>
|
||||
</template>
|
||||
<!-- <Icon icon="ant-design:question-circle-outlined" /> -->
|
||||
<span class="helpClass">?</span>
|
||||
</a-tooltip>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
</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;"> </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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -127,14 +121,15 @@
|
|||
</a-menu-item>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Reference in New Issue