144 lines
3.8 KiB
Vue
144 lines
3.8 KiB
Vue
<template>
|
|
<div style="width:100%;height: 100%;" v-if="!isError">
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<div>
|
|
<a-card :title="mainVideoCardBoxTitle" class="videoCardMain" style="width:100%">
|
|
<bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }"/>
|
|
</a-card>
|
|
</div>
|
|
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: scroll;">
|
|
<div v-for="(item,index) of tableData" class="videoMax">
|
|
<a-card :title="item?.xm" class="videoCardMain">
|
|
<bVideo :ref="el=> bVideoRefs[index]=el" :videoId="'other-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" @load-end="loadEnd"/>
|
|
<!-- <bVideo :ref="el=> bVideoRefs[index]=el" :videoId="'other-'+index" :src="'http://127.0.0.1/live_hls/soures.m3u8'" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" @load-end="loadEnd"/> -->
|
|
</a-card>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;">
|
|
<a-empty>
|
|
<template #description>
|
|
<span>
|
|
没有找到直播间
|
|
</span>
|
|
</template>
|
|
<!-- <a-button type="primary" @="">关闭</a-button> -->
|
|
</a-empty>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup name="zhihuijiaoshiIndexPage">
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import { ref, onMounted } from 'vue';
|
|
import bVideo from '/@/views/site/common/video/videojs/video.vue';
|
|
import { nextTick } from 'vue';
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const bVideoRefs = <any>ref([]);
|
|
const mainVideo = <any>ref();
|
|
|
|
const currentItem = <any>ref({});
|
|
const isfirst = <any>ref(false);
|
|
const mainVideoCardBoxTitle = <any>ref('');
|
|
const tableData = ref<Recordable>([])
|
|
const isError = ref(false);
|
|
|
|
const route = useRoute();
|
|
|
|
onMounted(() => {
|
|
if(route.query.id){
|
|
//按ID加载数据
|
|
list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => {
|
|
let list = (res?.records) ?? [];
|
|
tableData.value = list;
|
|
nextTick(() => {
|
|
|
|
})
|
|
});
|
|
}else{
|
|
isError.value = true;
|
|
}
|
|
|
|
// list({ pageSize: -1, sfyx: '0' }).then(res => {
|
|
// let list = (res?.records) ?? [];
|
|
// //聚合
|
|
// let map = {};
|
|
// list.forEach(x => {
|
|
// let item = map[x.jsmc];
|
|
// if(item){
|
|
// item.child[x.xm] = x;
|
|
// }else{
|
|
// let child = {};
|
|
// child[x.xm] = x;
|
|
// map[x.jsmc] = {
|
|
// ...x,
|
|
// child
|
|
// };
|
|
// }
|
|
// });
|
|
|
|
// leftList.value = Object.values(map);
|
|
// //计算左侧菜单高度
|
|
// let mainDiv = <any>_document?.querySelector('.ant-layout .jeecg-default-layout-main > div');
|
|
// topWidth.value =mainDiv?.style?.height?? '0';
|
|
// });
|
|
});
|
|
|
|
|
|
|
|
enum Api {
|
|
list = '/jiaoshi/kcZhihuijiaoshi/list',
|
|
}
|
|
/**
|
|
* 列表接口
|
|
* @param params
|
|
*/
|
|
const list = (params) => defHttp.get({ url: Api.list, params });
|
|
|
|
/**
|
|
* 子页加载完成后回调
|
|
* @param player
|
|
*/
|
|
function loadEnd(player){
|
|
nextTick(() => {
|
|
if(!isfirst.value){
|
|
isfirst.value = true;
|
|
//播放第一个
|
|
bVideoClick({ target: { playerId: player.id() } })
|
|
}
|
|
|
|
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 点击时切换至大屏
|
|
* @param e
|
|
*/
|
|
function bVideoClick(e){
|
|
console.log(`bVideoClick: 点击切换至主界面`);
|
|
|
|
let mainVideo = <any> document.querySelector('#mainVideo');
|
|
let currentVideo = <any> document.querySelector('#'+e.target.playerId);
|
|
let src = currentVideo.player?.src();
|
|
|
|
mainVideo?.player?.src([{type:'application/x-mpegURL',src }])
|
|
}
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.videoMax{
|
|
width: 25%;
|
|
}
|
|
.videoCardMain {
|
|
:deep(.ant-card-body) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
/* 隐藏video 进度条 */
|
|
video::-webkit-media-controls-timeline {
|
|
display: none;
|
|
}
|
|
</style> |