2023年5月5日 修改直播页样式
This commit is contained in:
parent
678e32dccf
commit
9ac777f949
|
@ -16,6 +16,7 @@ export function getDefOptions(object) {
|
||||||
fluid: true,
|
fluid: true,
|
||||||
liveui: true,
|
liveui: true,
|
||||||
hotkeys: false,
|
hotkeys: false,
|
||||||
|
caches: true,
|
||||||
// playbackRates: [1,2,3,4,5,8,10,20],
|
// playbackRates: [1,2,3,4,5,8,10,20],
|
||||||
trechIrder: ['flash'],
|
trechIrder: ['flash'],
|
||||||
// sources: [{
|
// sources: [{
|
||||||
|
|
|
@ -5,7 +5,6 @@
|
||||||
:id="props.videoId"
|
:id="props.videoId"
|
||||||
playsinline="true"
|
playsinline="true"
|
||||||
class="video-js"
|
class="video-js"
|
||||||
controls
|
|
||||||
preload="auto"
|
preload="auto"
|
||||||
poster="//vjs.zencdn.net/v/oceans.png"
|
poster="//vjs.zencdn.net/v/oceans.png"
|
||||||
>
|
>
|
||||||
|
@ -37,6 +36,10 @@ const player = ref();
|
||||||
const emit = defineEmits(['loadEnd']);
|
const emit = defineEmits(['loadEnd']);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
init();
|
||||||
|
});
|
||||||
|
|
||||||
|
function init(){
|
||||||
let option = {};
|
let option = {};
|
||||||
if(props.src){
|
if(props.src){
|
||||||
option = {
|
option = {
|
||||||
|
@ -55,10 +58,10 @@ onMounted(() => {
|
||||||
// });
|
// });
|
||||||
});
|
});
|
||||||
player.value = playerMain;
|
player.value = playerMain;
|
||||||
|
}
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
|
init,
|
||||||
player
|
player
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,50 +1,69 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="maxSite" style="width:100%;height: 100%;margin-top: 1rem;" v-if="!isError">
|
<div id="siteMain">
|
||||||
<a-row :gutter="[16,16]">
|
<div id="maxSite">
|
||||||
<a-col :span="22">
|
<a-layout>
|
||||||
<div>
|
<!-- 页头 -->
|
||||||
<a-card :title="mainVideoCardBoxTitle" class="videoCardMain" style="width:100%">
|
<headerPage/>
|
||||||
<bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }"/>
|
<!-- 主体部分 -->
|
||||||
</a-card>
|
<a-layout-content>
|
||||||
</div>
|
<div style="width:100%;height: 100%;margin-top: 1rem;" v-if="!isError">
|
||||||
<!-- <div style="display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: scroll;"> -->
|
<a-row :gutter="[16,16]">
|
||||||
<!-- <div v-for="(item,index) of tableData" class="videoMax"> -->
|
<a-col :span="19">
|
||||||
<!-- <a-card :title="item?.xm" class="videoCardMain"> -->
|
<div>
|
||||||
<!-- <bVideo :ref="el=> bVideoRefs[index]=el" :videoId="'other-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" @load-end="loadEnd"/> -->
|
<a-card class="videoCardMain" style="width:100%">
|
||||||
<!-- <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"/> -->
|
<template #title>
|
||||||
<!-- </a-card>
|
<span style="background: #23c6c8;">
|
||||||
|
{{ kcCardBoxTitle || ' ' }}
|
||||||
|
</span>
|
||||||
|
<span style="margin-left: 10px;background: #1c84c6;color: #fff;padding: 0.4rem;border-radius: 6px;" @click="() => tingKeZuJiAddModal.view({ ketangbiaoid: route.query.ktId })">填写评价表</span>
|
||||||
|
</template>
|
||||||
|
<div style="padding: 1rem;">
|
||||||
|
<div >{{ mainVideoCardBoxTitle || '' }}</div>
|
||||||
|
<bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }"/>
|
||||||
|
<div style="width: 100%;">
|
||||||
|
<a-textarea style="width: calc(100% - 7rem);" v-model:value="model.notes" placeholder="您可以填写听课笔记"></a-textarea>
|
||||||
|
<a-button type="primary" style="width: 7rem;height: 100%;" @click="saveSuibi">保存听课笔记</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="5">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24" v-for="(item,index) of tableData" style="text-align: center;">
|
||||||
|
<a-card>
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom: .5rem;">
|
||||||
|
<span class="smallTxt miniButton" :class="item.id == curentPlayerVideo.id?'activte':''" @click="changeLive(item)">
|
||||||
|
<i class="fa-solid fa-right-left"></i>{{ item?.xm }}
|
||||||
|
</span>
|
||||||
|
<span class="smallTxt miniButton miniButtonRight" v-show="!item.isShow" @click="(item.isShow = true,initVideo('other-'+item.id))"><i class="fa-solid fa-film"></i>显示缩略窗口</span>
|
||||||
|
<span class="smallTxt miniButton miniButtonRight activte" v-show="item.isShow" @click="item.isShow = false"><i class="fa-solid fa-film"></i>隐藏缩略窗口</span>
|
||||||
|
</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="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
<div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;">
|
||||||
</a-col>
|
<a-empty>
|
||||||
<a-col :span="2">
|
<template #description>
|
||||||
<a-row>
|
<span>
|
||||||
<a-col :span="24">
|
没有找到直播间
|
||||||
<a-button type="primary" style="width: 100%;margin-bottom: 0.5rem;" @click="() => tingKeZuJiAddModal.view({ ketangbiaoid: route.query.ktId })">评价</a-button>
|
</span>
|
||||||
</a-col>
|
</template>
|
||||||
<a-col :span="24" v-for="(item,index) of tableData" style="text-align: center;">
|
<!-- <a-button type="primary" @="">关闭</a-button> -->
|
||||||
<a-button type="primary" style="width: 100%;margin-bottom: 0.5rem;" @click="changeLive(item)">{{ item?.xm }}</a-button>
|
</a-empty>
|
||||||
</a-col>
|
</div>
|
||||||
</a-row>
|
</a-layout-content>
|
||||||
</a-col>
|
</a-layout>
|
||||||
</a-row>
|
</div>
|
||||||
<a-row :gutter="[16,16]">
|
|
||||||
<a-col :span="22">
|
|
||||||
<a-textarea v-model:value="model.notes"></a-textarea>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="2">
|
|
||||||
<a-button type="primary" @click="saveSuibi">保存</a-button>
|
|
||||||
</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>
|
</div>
|
||||||
<addModalPage ref="tingKeZuJiAddModal"/>
|
<addModalPage ref="tingKeZuJiAddModal"/>
|
||||||
</template>
|
</template>
|
||||||
|
@ -52,6 +71,7 @@
|
||||||
|
|
||||||
import { defHttp } from '/@/utils/http/axios';
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import headerPage from '/@/views/site/common/header.vue';
|
||||||
import bVideo from '/@/views/site/common/video/videojs/video.vue';
|
import bVideo from '/@/views/site/common/video/videojs/video.vue';
|
||||||
import addModalPage from '/@/views/site/tingKeZuJi/components/addModal.vue';
|
import addModalPage from '/@/views/site/tingKeZuJi/components/addModal.vue';
|
||||||
import { nextTick } from 'vue';
|
import { nextTick } from 'vue';
|
||||||
|
@ -59,8 +79,11 @@ import { useRoute } from 'vue-router'
|
||||||
import { getUserId } from '/@/views/site/utils/index';
|
import { getUserId } from '/@/views/site/utils/index';
|
||||||
|
|
||||||
const mainVideo = <any>ref();
|
const mainVideo = <any>ref();
|
||||||
|
const bVideoRefs = <any>ref([]);
|
||||||
|
|
||||||
const tingKeZuJiAddModal = <any>ref({});
|
const tingKeZuJiAddModal = <any>ref({});
|
||||||
|
const curentPlayerVideo = <any>ref({});
|
||||||
|
const kcCardBoxTitle = <any>ref('');
|
||||||
const mainVideoCardBoxTitle = <any>ref('');
|
const mainVideoCardBoxTitle = <any>ref('');
|
||||||
const tableData = ref<Recordable>([])
|
const tableData = ref<Recordable>([])
|
||||||
const isError = ref(false);
|
const isError = ref(false);
|
||||||
|
@ -74,8 +97,9 @@ const route = useRoute();
|
||||||
enum Api {
|
enum Api {
|
||||||
list = '/jiaoshi/kcZhihuijiaoshi/list',
|
list = '/jiaoshi/kcZhihuijiaoshi/list',
|
||||||
querySuibi = '/kc/kcKetangSuibi/list',
|
querySuibi = '/kc/kcKetangSuibi/list',
|
||||||
addSuibi = '/kc/kcKetangSuibi/add'
|
addSuibi = '/kc/kcKetangSuibi/add',
|
||||||
// editSuibi = '/kc/kcKetangSuibi/edit'
|
// editSuibi = '/kc/kcKetangSuibi/edit'
|
||||||
|
getKtangInfo = '/ktgl/kcKetangbiao/queryById'
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -85,6 +109,7 @@ enum Api {
|
||||||
const list = (params) => defHttp.get({ url: Api.list, params });
|
const list = (params) => defHttp.get({ url: Api.list, params });
|
||||||
const querySuibi = (params) => defHttp.get({ url: Api.querySuibi, params });
|
const querySuibi = (params) => defHttp.get({ url: Api.querySuibi, params });
|
||||||
const addSuibi = (params) => defHttp.post({ url: Api.addSuibi, params });
|
const addSuibi = (params) => defHttp.post({ url: Api.addSuibi, params });
|
||||||
|
const getKtangInfo = (params) => defHttp.get({ url: Api.getKtangInfo, params });
|
||||||
// const editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params });
|
// const editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params });
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
@ -94,22 +119,54 @@ onMounted(() => {
|
||||||
list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => {
|
list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => {
|
||||||
let list = (res?.records) ?? [];
|
let list = (res?.records) ?? [];
|
||||||
tableData.value = list;
|
tableData.value = list;
|
||||||
|
tableData.value.forEach(x => x.isShow = true);//默认展开
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
changeLive(tableData.value[0]);
|
changeLive(tableData.value[0]);
|
||||||
|
tableData.value.forEach(x => x.isShow = false);//关闭
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
getSuibi();
|
getSuibi();
|
||||||
|
getKcxx();
|
||||||
}else{
|
}else{
|
||||||
isError.value = true;
|
isError.value = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 子页加载完成后回调
|
||||||
|
* @param player
|
||||||
|
*/
|
||||||
|
function loadEnd(player){
|
||||||
|
nextTick(() => {
|
||||||
|
player.on('play',() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
player.pause();
|
||||||
|
},1000);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function initVideo(key){
|
||||||
|
nextTick(() => {
|
||||||
|
let ref = bVideoRefs.value[key];
|
||||||
|
console.log(`🚀 --------------------------------------------------🚀`);
|
||||||
|
console.log(`🚀 ~ file: viewPage.vue:158 ~ nextTick ~ ref:`, key,bVideoRefs,ref);
|
||||||
|
console.log(`🚀 --------------------------------------------------🚀`);
|
||||||
|
ref.init();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
function changeLive(item:any){
|
function changeLive(item:any){
|
||||||
let mainVideo = <any> document.querySelector('#mainVideo');
|
let mainVideo = <any> document.querySelector('#mainVideo');
|
||||||
mainVideo?.player?.src([{ type:'application/x-mpegURL',src: item.pullUrl }])
|
mainVideo?.player?.src([{ type:'application/x-mpegURL',src: item.pullUrl }])
|
||||||
|
mainVideoCardBoxTitle.value = item.jsmc+item.xm;
|
||||||
|
|
||||||
|
curentPlayerVideo.value = item;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSuibi(){
|
function getSuibi(){
|
||||||
|
//查询随笔
|
||||||
let param = {
|
let param = {
|
||||||
userId: getUserId(),
|
userId: getUserId(),
|
||||||
ketangbiaoId: route.query.ktId,
|
ketangbiaoId: route.query.ktId,
|
||||||
|
@ -122,6 +179,18 @@ function getSuibi(){
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getKcxx(){
|
||||||
|
//查询课程信息
|
||||||
|
//route.query.ktId
|
||||||
|
let param = {
|
||||||
|
id: route.query.ktId
|
||||||
|
}
|
||||||
|
getKtangInfo(param).then(res => {
|
||||||
|
// console.log(res);
|
||||||
|
kcCardBoxTitle.value = res.kcmc;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function saveSuibi(){
|
function saveSuibi(){
|
||||||
//addSuibi editSuibi
|
//addSuibi editSuibi
|
||||||
// if(model.value.id){
|
// if(model.value.id){
|
||||||
|
@ -133,6 +202,53 @@ function saveSuibi(){
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
#siteMain {
|
||||||
|
// font-size: ;
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f3f4;
|
||||||
|
#maxSite {
|
||||||
|
//最大宽度
|
||||||
|
max-width: 1170px;
|
||||||
|
//居中
|
||||||
|
margin: 0 auto;
|
||||||
|
.rowGutter{
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-layout-header {
|
||||||
|
color: #fff;
|
||||||
|
background: #1ab394;
|
||||||
|
}
|
||||||
|
.ant-layout-footer {
|
||||||
|
line-height: 1.5;
|
||||||
|
background: #FFF;
|
||||||
|
}
|
||||||
|
.ant-layout-sider {
|
||||||
|
color: #fff;
|
||||||
|
line-height: 120px;
|
||||||
|
background: #3ba0e9;
|
||||||
|
}
|
||||||
|
.ant-layout-content {
|
||||||
|
min-height: 120px;
|
||||||
|
color: #000;
|
||||||
|
/*line-height: 120px;*/
|
||||||
|
background: #f3f3f4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**暗黑模式特殊配色*/
|
||||||
|
[data-theme='dark'] #siteMain #maxSite {
|
||||||
|
.ant-layout-header, .ant-layout-footer {
|
||||||
|
background: #6aa0c7;
|
||||||
|
}
|
||||||
|
.ant-layout-content {
|
||||||
|
background: #107bcb;
|
||||||
|
}
|
||||||
|
.ant-layout-sider {
|
||||||
|
background: #3499ec;
|
||||||
|
}
|
||||||
|
}
|
||||||
.videoMax{
|
.videoMax{
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
@ -145,10 +261,19 @@ function saveSuibi(){
|
||||||
video::-webkit-media-controls-timeline {
|
video::-webkit-media-controls-timeline {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.maxSite {
|
.smallTxt {
|
||||||
//最大宽度
|
font-size: .8rem;
|
||||||
max-width: 1170px;
|
}
|
||||||
//居中
|
.activte {
|
||||||
margin: 0 auto;
|
background: #1ab394;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
.miniButton {
|
||||||
|
float: left;
|
||||||
|
padding: 0.3rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.miniButtonRight {
|
||||||
|
float: right
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -15,11 +15,11 @@
|
||||||
<span v-if="item.score" style="color: #337ab7;" @click="viewModal.view(item)">已评分:{{ item.score }}分</span>
|
<span v-if="item.score" style="color: #337ab7;" @click="viewModal.view(item)">已评分:{{ item.score }}分</span>
|
||||||
<span v-else style="color: #337ab7;" @click="tingKeZuJiAddModal.view(item)"><FormOutlined/>填写评价</span>
|
<span v-else style="color: #337ab7;" @click="tingKeZuJiAddModal.view(item)"><FormOutlined/>填写评价</span>
|
||||||
<span v-if="item.suibiNotes" style="padding-left: .5rem;color: #337ab7;">
|
<span v-if="item.suibiNotes" style="padding-left: .5rem;color: #337ab7;">
|
||||||
<a-popover title="随笔">
|
<a-popover title="听课笔记">
|
||||||
<template #content>
|
<template #content>
|
||||||
{{ item.suibiNotes }}
|
{{ item.suibiNotes }}
|
||||||
</template>
|
</template>
|
||||||
查看随笔
|
查看听课笔记
|
||||||
</a-popover>
|
</a-popover>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue