901 lines
34 KiB
Vue
901 lines
34 KiB
Vue
<template>
|
||
<div id="siteMain">
|
||
<div id="maxSite">
|
||
<a-layout>
|
||
<!-- 页头 -->
|
||
<headerPage/>
|
||
<!-- 主体部分 -->
|
||
<a-layout-content>
|
||
<div style="width:100%;height: 100%;margin-top: 1rem;" v-if="!isError">
|
||
<a-row :gutter="[16,16]">
|
||
<a-col span="24">
|
||
<div>
|
||
<a-card class="videoCardMain" style="width:100%">
|
||
<template #title>
|
||
<span class="" style="border-radius: 5px;">
|
||
{{ ktangInfo.kcmc || ' ' }}
|
||
</span>
|
||
<span style="float: right;margin-left: 10px;background: #1c84c6;color: #fff;padding: 9px;border-radius: 5px;font-size: 16px;" @click="funpingjia(ktangInfo)">填写评价表</span>
|
||
<div style="font-size: 12px;">
|
||
{{ ktangInfo.zc || ' ' }} {{ ktangInfo.skjs || ' ' }} 学分：{{ ktangInfo.xf || ' ' }}
|
||
课程性质：{{ ktangInfo.kcxz || ' ' }}
|
||
开课单位：{{ ktangInfo.kkdw || ' ' }}
|
||
节次：{{ ktangInfo.hh || ' ' }}
|
||
</div>
|
||
<div style="font-size: 12px;text-wrap: wrap;width: 100%;word-wrap: break-word;" hidden>
|
||
课程介绍：{{ ktangInfo?.zyJxdg?.kcjs }}
|
||
</div>
|
||
</template>
|
||
<div style="padding: 1rem;">
|
||
<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 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>
|
||
</a-col>
|
||
<!-- 双屏显示 -->
|
||
<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>
|
||
<div v-if="ktangInfo?.zyJxdg?.filePath">
|
||
教学大纲:
|
||
<a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.pdfPath)">预览</a-button>
|
||
<a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.filePath)">下载</a-button>
|
||
</div>
|
||
<div v-if="ktangInfo?.zyJxdg?.filePath">
|
||
教学日历:
|
||
<a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.jxrlPdfPath)">预览</a-button>
|
||
<a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.jxrlFilePath)">下载</a-button>
|
||
</div>
|
||
</a-space>
|
||
</div>
|
||
<div style="width: 100%;margin-top:10px;">
|
||
<a-textarea style="width: calc(100% - 7rem);height:120px;float: left;" v-model:value="model.notes" placeholder="您可以填写听课笔记"></a-textarea>
|
||
<div style="width: 7rem;height: 100%;float: right;">
|
||
<a-button type="primary" style="width: 7rem;height: 100%;" @click="openAllSuiBi">查看听课笔记</a-button>
|
||
<a-button type="primary" style="width: 7rem;height: 100%;margin-top: 10px;" @click="saveSuibi">保存听课笔记</a-button>
|
||
<a-button type="primary" style="width: 7rem;height: 100%;margin-top: 10px;" @click="handleBaocuo(ktangInfo)">报错</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</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>
|
||
<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" 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="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>
|
||
</a-col>
|
||
</a-row>
|
||
</a-col> -->
|
||
</a-row>
|
||
</div>
|
||
<div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;">
|
||
<a-empty>
|
||
<template #description>
|
||
<span v-if="!playStatus">
|
||
没有找到直播间
|
||
</span>
|
||
<span v-if="playStatus">
|
||
{{ getSysConfig()?.videoPlayErrTitle || '直播间暂无内容' }}
|
||
</span>
|
||
</template>
|
||
<!-- <a-button type="primary" @="">关闭</a-button> -->
|
||
</a-empty>
|
||
</div>
|
||
</a-layout-content>
|
||
</a-layout>
|
||
</div>
|
||
</div>
|
||
<KcErrorreportIndexModal ref="kcErrorreportIndexModal"></KcErrorreportIndexModal>
|
||
<addModalPage ref="tingKeZuJiAddModal"/>
|
||
<a-modal title="查看听课笔记" width="800px" :visible="tkbjVisible" :okButtonProps="{ class: { 'jee-hidden': true } }" @cancel="() => tkbjVisible = false" cancelText="关闭">
|
||
<div style="white-space:normal; word-break:break-all;overflow:hidden;">
|
||
<a-table tableLayout="fixed" :dataSource="suibiList" :scroll="{ x: true }" :pagination="false">
|
||
<a-table-column width="160px" title="填写时间" key="createTime" data-index="createTime" />
|
||
<a-table-column title="内容" key="notes" data-index="notes" />
|
||
</a-table>
|
||
</div>
|
||
</a-modal>
|
||
|
||
<KcDetectionMainModal @register="registerModal" ></KcDetectionMainModal>
|
||
</template>
|
||
<script lang="ts" setup name="zhihuijiaoshiIndexPage">
|
||
|
||
import { defHttp } from '/@/utils/http/axios';
|
||
import { ref, reactive, onMounted, createVNode, h } from 'vue';
|
||
import headerPage from '/@/views/site/common/header.vue';
|
||
import bVideo from '/@/views/site/common/video/videojs/video.vue';
|
||
import addModalPage from '/@/views/site/tingKeZuJi/components/addModal.vue';
|
||
import { nextTick } from 'vue';
|
||
import { useRoute } from 'vue-router'
|
||
import { getUserId } from '/@/views/site/utils/index';
|
||
import KcErrorreportIndexModal from '/@/views/kc/kcErrorreport/components/KcErrorreportIndexZbModal.vue'
|
||
import videojs from "video.js";
|
||
import { getSysConfig } from '/@/views/site/utils/index';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import { baseApiUrl, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||
import KcDetectionMainModal from '/@/views/kc/detection/components/KcDetectionMainModal.vue'
|
||
import { useModal } from '/@/components/Modal';
|
||
import { Modal } from 'ant-design-vue';
|
||
import { CloseOutlined } from '@ant-design/icons-vue';
|
||
|
||
const { createMessage, createInfoModal, createErrorModal } = useMessage();
|
||
|
||
const mainVideo = ref<any>();
|
||
const bVideoRefs = ref<any>([]);
|
||
const kcErrorreportIndexModal = ref();
|
||
|
||
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>('');
|
||
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 videoFpName = ref<any>('');
|
||
|
||
const model = reactive<Record<string, any>>({ notes:'' });
|
||
|
||
//注册model
|
||
const [registerModal, { openModal }] = useModal();
|
||
|
||
const route = useRoute();
|
||
|
||
enum Api {
|
||
list = '/jiaoshi/kcZhihuijiaoshi/list',
|
||
querySuibi = '/kc/kcKetangSuibi/list',
|
||
addSuibi = '/kc/kcKetangSuibi/add',
|
||
// editSuibi = '/kc/kcKetangSuibi/edit'
|
||
getKtangInfo = '/ktgl/kcKetangbiao/queryAllDataById',
|
||
savePlayLog = '/jiaoshi/kcZhihuijiaoshiAccessLog/savePlayLog',
|
||
changeAvyLiveByJsbhsApi = '/httpinterface/runAvyApiByJsbhs',
|
||
}
|
||
|
||
/**
|
||
* 列表接口
|
||
* @param params
|
||
*/
|
||
const list = (params) => defHttp.get({ url: Api.list, params });
|
||
const querySuibi = (params) => defHttp.get({ url: Api.querySuibi, params });
|
||
const addSuibi = (params) => defHttp.post({ url: Api.addSuibi, params });
|
||
const getKtangInfo = (params) => defHttp.get({ url: Api.getKtangInfo, params });
|
||
const savePlayLog = (params) => defHttp.post({ url: Api.savePlayLog, params, }, { isTransformResponse: false });
|
||
const changeAvyLiveByJsbhsApi = (params) => defHttp.get({ url: Api.changeAvyLiveByJsbhsApi, params,timeout: 9000000 });
|
||
// const editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params });
|
||
|
||
function handleSpy(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[j]){
|
||
fpData.value[i].sfxs = "1";
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
var ttb = spyCheck.value.join(",").replaceAll(checkTitle.value,"");
|
||
var ttc = ttb.split(",").filter(item => item.trim() !== '');
|
||
if(ttc.length == 2){
|
||
videoFpName.value = "className3"
|
||
}else if(ttc.length == 1){
|
||
videoFpName.value = "className2"
|
||
}else{
|
||
videoFpName.value = ""
|
||
}
|
||
|
||
}
|
||
|
||
/**
|
||
*
|
||
* @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 = '';
|
||
//按教师编号加载数据,屏蔽掉无效的，不分页
|
||
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(() => {
|
||
if(zjData){
|
||
changeLive(zjData);
|
||
}
|
||
savePlayLogFn(zjData);
|
||
calcPlayStatus(zjData);
|
||
tableData.value.forEach(x => x.isShow = false);//关闭
|
||
})
|
||
});
|
||
getSuibi();
|
||
getKcxx();
|
||
//记录播放日志
|
||
isError.value = false;
|
||
|
||
|
||
|
||
}else{
|
||
isError.value = true;
|
||
}
|
||
});
|
||
|
||
function handleBaocuo(item) {
|
||
kcErrorreportIndexModal.value.disableSubmit = false;
|
||
kcErrorreportIndexModal.value.add(item);
|
||
}
|
||
|
||
|
||
const listTkjlApi = (params) => defHttp.get({ url: '/kcTingke/kcTingke/findTingKeZuJiBytingketimeAndUserId', params });
|
||
function funpingjia(record) {
|
||
console.log('11111--------->',record)
|
||
console.log('222--------->',record.szkc)
|
||
var item = { ketangbiaoid: record.id };
|
||
let userid = getUserId();
|
||
listTkjlApi({ userid: userid, ketangbiaoid: item.ketangbiaoid }).then((res) => {
|
||
var list = res;
|
||
console.log(`🚀 ~ file: list.vue:106 ~ listTkjlApi ~ list:`, list);
|
||
if (list.length > 0) {
|
||
var score = list[0].score;
|
||
if (score) {
|
||
Modal.error({
|
||
icon: createVNode({}),
|
||
content: h('div', { style: 'height:200px;text-align:center;' }, [
|
||
h('icon', { style: 'font-size:80px;font-weight:600;color:red;' }, createVNode(CloseOutlined)),
|
||
h('p', { style: 'font-size:22px;font-weight:600;color:black;' }, '已经对此课程进行评价，不可重复评价！'),
|
||
]),
|
||
okText: 'OK',
|
||
width: '500px',
|
||
});
|
||
} else {
|
||
// tingKeZuJiAddModal.value.view(item);
|
||
tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
|
||
}
|
||
} else {
|
||
// tingKeZuJiAddModal.value.view(item);
|
||
tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* 子页加载完成后回调
|
||
* @param player
|
||
*/
|
||
function loadEnd(player){
|
||
nextTick(() => {
|
||
// player.on('play',() => {
|
||
// setTimeout(() => {
|
||
// player.pause();
|
||
// },2000);
|
||
// })
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 子页加载完成后回调
|
||
* @param player
|
||
*/
|
||
function loadEnd2(player){
|
||
nextTick(() => {
|
||
player.on('play',() => {
|
||
setTimeout(() => {
|
||
player.pause();
|
||
},2000);
|
||
})
|
||
})
|
||
}
|
||
|
||
function initVideo(key){
|
||
nextTick(() => {
|
||
let ref = bVideoRefs.value[key];
|
||
ref.init();
|
||
})
|
||
}
|
||
|
||
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: url }])
|
||
mainVideoCardBoxTitle.value = item.jsmc+" "+item.xm;
|
||
curentPlayerVideo.value = item;
|
||
}
|
||
//选择左屏
|
||
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 }])
|
||
}
|
||
|
||
|
||
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(() => {
|
||
player.muted(false);
|
||
//player.play();
|
||
},50);
|
||
},50);
|
||
|
||
}
|
||
|
||
function openLive(item: any){
|
||
changeAvyLiveByJsbhsApi({ jsbhs:item.jsbh, type: 1 }).then(res => {
|
||
let content = '';
|
||
res.forEach(x => {
|
||
// content += x.jsmc + "-" + x.xm
|
||
content += x.jsmc
|
||
let text = '';
|
||
if(x.resText){
|
||
if(x.resText.includes('ok')){
|
||
text = '播放失败，开启直播间成功，请稍后再试'
|
||
}else{
|
||
text = '播放失败，开启直播间失败，请联系管理员。'
|
||
}
|
||
}
|
||
content += " " + text + "<br/>"
|
||
});
|
||
// if(content.includes('开启直播间成功')){
|
||
// //延迟12秒
|
||
// setTimeout(() => {
|
||
// createInfoModal({ width:'50%', title: '结果',content })
|
||
// }, 12*1000);
|
||
// }else{
|
||
createInfoModal({ width:'50%', title: '结果',content })
|
||
// }
|
||
|
||
}).catch(e => {
|
||
console.error(e);
|
||
//loading.value = false;
|
||
//createInfoModal({title: '错误结果',content:e})
|
||
})
|
||
}
|
||
|
||
|
||
function getSuibi(){
|
||
//查询随笔
|
||
let param = {
|
||
userId: getUserId(),
|
||
ketangbiaoId: route.query.ktId,
|
||
column: 'createTime',
|
||
order: 'desc',
|
||
};
|
||
querySuibi(param).then(res => {
|
||
Object.assign(model, (res.records??[{}])[0]);
|
||
// model = (res.records??[{}])[0];
|
||
});
|
||
}
|
||
|
||
function getKcxx(){
|
||
//查询课程信息
|
||
//route.query.ktId
|
||
let param = {
|
||
id: route.query.ktId
|
||
}
|
||
getKtangInfo(param).then(res => {
|
||
console.log(res);
|
||
ktangInfo.value = res;
|
||
kcCardBoxTitle.value = res.kcmc;
|
||
|
||
// defHttp.get({ url: '/zyJxdg/zyJxdg/getKcjsJxdg', params: { rwbh: res.rwbh,xqxn: res.xnxq } }).then((res) => {
|
||
// if(res){
|
||
// jxdgInfo.value = res;
|
||
// }
|
||
// });
|
||
|
||
});
|
||
}
|
||
function savePlayLogFn(item){
|
||
savePlayLog({ playUrl: item.pullUrl, jxlId: item.jxlId, jxlName: item.jxlName, jsbh: route.query.id, jsmc: item.jsmc, ketangbiaoId: route.query.ktId,ketangbiaoName: ktangInfo.value.kcmc })
|
||
}
|
||
|
||
//计算播放状态
|
||
function calcPlayStatus(item){
|
||
if(item.pullUrl){
|
||
videojs.xhr.get(item.pullUrl,(err, resp, body) => {
|
||
if(err){
|
||
playStatus.value = false;
|
||
isError.value = true;
|
||
// openLive(item);
|
||
}else{
|
||
playStatus.value = true;
|
||
isError.value = false;
|
||
}
|
||
})
|
||
}else {
|
||
console.log(1111111);
|
||
|
||
playStatus.value = true;
|
||
isError.value = true;
|
||
}
|
||
}
|
||
|
||
function saveSuibi(){
|
||
//addSuibi editSuibi
|
||
// if(model.value.id){
|
||
// editSuibi({...model.value, })
|
||
// }else{
|
||
addSuibi({ notes: model.notes, userId: getUserId(), ketangbiaoId: route.query.ktId })
|
||
// }
|
||
}
|
||
|
||
function openAllSuiBi(){
|
||
//打开弹窗
|
||
tkbjVisible.value = true;
|
||
//查询随笔
|
||
let param = {
|
||
userId: getUserId(),
|
||
ketangbiaoId: route.query.ktId,
|
||
column: 'createTime',
|
||
order: 'desc',
|
||
pageSize: '-1',
|
||
};
|
||
querySuibi(param).then(res => {
|
||
// model = (res.records??[{}])[0];
|
||
suibiList.value = res.records??[]
|
||
}).finally(() => {
|
||
//关闭等待
|
||
});
|
||
}
|
||
|
||
function calcPercentage(averageNum, zrs) {
|
||
if(averageNum === 0 || zrs === 0){
|
||
return '0%';
|
||
}else{
|
||
return (averageNum / zrs * 100).toFixed(2) + '%';
|
||
}
|
||
}
|
||
|
||
function openPdf(miniUrl) {
|
||
let url2 = getFileAccessHttpUrl(miniUrl)
|
||
let url = baseApiUrl+"/generic/web/viewer.html?file="+encodeURIComponent(url2);
|
||
window.open(url,"_blank");
|
||
}
|
||
|
||
function downloadFile(miniUrl) {
|
||
let url = getFileAccessHttpUrl(miniUrl);
|
||
window.open(url,"_blank");
|
||
}
|
||
|
||
function handleZqrs(record){
|
||
console.log(`🚀 ~ handleZqrs ~ record:`, record)
|
||
console.log(`🚀 ~ handleZqrs ~ zqrsList:`, record.zqrsList)
|
||
var a = record.detectionMain;
|
||
if(record.zqrsList){
|
||
a.detectionDetailedList = record.zqrsList
|
||
handleZqrsDetail(a);
|
||
}else{
|
||
createMessage.warning("暂无数据！")
|
||
}
|
||
}
|
||
|
||
function handleZqrsDetail(record: Recordable) {
|
||
openModal(true, {
|
||
record,
|
||
isUpdate: true,
|
||
showFooter: false,
|
||
});
|
||
}
|
||
|
||
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.jxDiv {
|
||
padding-top: .5rem;
|
||
}
|
||
#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{
|
||
width: 25%;
|
||
}
|
||
.videoCardMain {
|
||
:deep(.ant-card-body) {
|
||
padding: 0;
|
||
}
|
||
}
|
||
/* 隐藏video 进度条 */
|
||
video::-webkit-media-controls-timeline {
|
||
display: none;
|
||
}
|
||
.smallTxt {
|
||
font-size: .8rem;
|
||
}
|
||
.activte {
|
||
background: #1ab394;
|
||
color: #FFF;
|
||
}
|
||
.miniButton {
|
||
float: left;
|
||
padding: 0.3rem;
|
||
border-radius: 5px;
|
||
}
|
||
.miniButtonRight {
|
||
float: right
|
||
}
|
||
|
||
.helpClass{
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
/* background: #1c84c6; */
|
||
color: #1c84c6;
|
||
border-radius: 5px;
|
||
padding: 1px 8px;
|
||
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;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
|
||
.className3 {
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.className2 {
|
||
margin-top: 100px;
|
||
}
|
||
</style> |