备份页面
This commit is contained in:
parent
c16d102805
commit
0dbee9ae18
|
|
@ -0,0 +1,566 @@
|
|||
<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 :xs="{ span: 24 }" :sm="{ span: 19 }" :lg="{ span: 19 }">
|
||||
<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;">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
<bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }" @load-end="mainVideoLoadEnd"/>
|
||||
<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="'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"/>
|
||||
</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 ktangInfo = ref<any>({});
|
||||
// const jxdgInfo = ref<any>({});
|
||||
const mainVideoCardBoxTitle = ref<any>('');
|
||||
const tableData = ref<Recordable>([])
|
||||
const suibiList = ref<Recordable>([])
|
||||
const isError = ref(false);
|
||||
const tkbjVisible = ref(false);
|
||||
const playStatus = ref(false);
|
||||
|
||||
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 });
|
||||
|
||||
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;
|
||||
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);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function initVideo(key){
|
||||
nextTick(() => {
|
||||
let ref = bVideoRefs.value[key];
|
||||
ref.init();
|
||||
})
|
||||
}
|
||||
|
||||
function changeLive(item:any){
|
||||
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' }])
|
||||
mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
|
||||
|
||||
mainVideoCardBoxTitle.value = item.jsmc+" "+item.xm;
|
||||
console.log(`🚀 --------------------------------------------------------------------------------🚀`);
|
||||
console.log(`🚀 ~ file: viewPage.vue:164 ~ changeLive ~ mainVideo?.player:`, mainVideo?.player);
|
||||
console.log(`🚀 --------------------------------------------------------------------------------🚀`);
|
||||
// let buttonEl = mainVideo?.player.el().querySelector('.changeDefinitionBtn');
|
||||
//赋值原URL
|
||||
// if(buttonEl){
|
||||
// buttonEl.dataset.url = url;
|
||||
// }
|
||||
|
||||
curentPlayerVideo.value = item;
|
||||
// nextTick(() => {
|
||||
//增加自动播放功能
|
||||
//mainVideo?.player?.play();
|
||||
// })
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,735 @@
|
|||
<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 :xs="{ span: 24 }" :sm="{ span: 19 }" :lg="{ span: 19 }">
|
||||
<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>
|
||||
<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="videoFpName">
|
||||
<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>
|
||||
|
||||
<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 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,"");
|
||||
console.log("🚀 ~ handleSpy ~ ttb:", ttb)
|
||||
var ttc = ttb.split(",").filter(item => item.trim() !== '');
|
||||
console.log("🚀 ~ handleSpy ~ ttc:", ttc)
|
||||
if(ttc.length == 2){
|
||||
videoFpName.value = "className3"
|
||||
}else if(ttc.length == 1){
|
||||
videoFpName.value = "className2"
|
||||
}else{
|
||||
videoFpName.value = ""
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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: 'http://127.0.0.1/live_hls/a.m3u8' }])
|
||||
mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
|
||||
|
||||
mainVideoCardBoxTitle.value = item.jsmc+" "+item.xm;
|
||||
console.log(`🚀 --------------------------------------------------------------------------------🚀`);
|
||||
console.log(`🚀 ~ file: viewPage.vue:164 ~ changeLive ~ mainVideo?.player:`, mainVideo?.player);
|
||||
console.log(`🚀 --------------------------------------------------------------------------------🚀`);
|
||||
// let buttonEl = mainVideo?.player.el().querySelector('.changeDefinitionBtn');
|
||||
//赋值原URL
|
||||
// if(buttonEl){
|
||||
// buttonEl.dataset.url = url;
|
||||
// }
|
||||
|
||||
curentPlayerVideo.value = item;
|
||||
// nextTick(() => {
|
||||
//增加自动播放功能
|
||||
//mainVideo?.player?.play();
|
||||
// })
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.className3 {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.className2 {
|
||||
margin-top: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,901 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,680 @@
|
|||
<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 :xs="{ span: 24 }" :sm="{ span: 19 }" :lg="{ span: 19 }">
|
||||
<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>
|
||||
<a-col :span="fpxsShow=='1'?24:12">
|
||||
<div v-if="fpxsShow != '1'" class="fptitle">教师近景</div>
|
||||
<div style="height: 1px;background-color: black;width:100%;"> </div>
|
||||
<bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }" @load-end="mainVideoLoadEnd"/>
|
||||
</a-col>
|
||||
<a-col :span="12" v-show="fpxsShow=='2' || fpxsShow=='3' || fpxsShow=='4'">
|
||||
<div class="fptitle">学生全景</div>
|
||||
<div style="height: 1px;background-color: black;width:100%;"> </div>
|
||||
<bVideo ref="main2Video" videoId="main2Video" :videoOption="{ autoplay: true }" @load-end="loadEnd"/>
|
||||
</a-col>
|
||||
<a-col :span="12" v-show="fpxsShow=='3' || fpxsShow=='4'">
|
||||
<div class="fptitle">PPT</div>
|
||||
<div style="height: 1px;background-color: black;width:100%;"> </div>
|
||||
<bVideo ref="main3Video" videoId="main3Video" :videoOption="{ autoplay: true }" @load-end="loadEnd"/>
|
||||
</a-col>
|
||||
<a-col :span="12" v-show="fpxsShow=='4'">
|
||||
<div class="fptitle">教师全景</div>
|
||||
<div style="height: 1px;background-color: black;width:100%;"> </div>
|
||||
<bVideo ref="main4Video" videoId="main4Video" :videoOption="{ autoplay: true }" @load-end="loadEnd"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<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" @click="changeLive(item)">
|
||||
<a-card :class="`handClass`">
|
||||
<div>
|
||||
<div style="margin-bottom: .5rem;">
|
||||
<span class="smallTxt miniButton" :class="item.id == curentPlayerVideo.id && fpxsShow=='1'?'activte':''">
|
||||
<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="loadEnd"/>
|
||||
</div> -->
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-card @click="changeJfpLive('2')" :class="`handClass`">
|
||||
<div>
|
||||
<div style="margin-bottom: .5rem;">
|
||||
<span :class="`smallTxt miniButton ${fpxsShow=='2'?'activte':''}`" ><i class="fa-solid fa-film"></i>二分屏</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-card @click="changeJfpLive('3')" class="handClass">
|
||||
<div >
|
||||
<div style="margin-bottom: .5rem;">
|
||||
<span :class="`smallTxt miniButton ${fpxsShow=='3'?'activte':''}`" ><i class="fa-solid fa-film"></i>三分屏</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-card @click="changeJfpLive('4')" class="handClass">
|
||||
<div >
|
||||
<div style="margin-bottom: .5rem;">
|
||||
<span :class="`smallTxt miniButton ${fpxsShow=='4'?'activte':''}`" ><i class="fa-solid fa-film"></i>四分屏</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 ktangInfo = ref<any>({});
|
||||
// const jxdgInfo = ref<any>({});
|
||||
const mainVideoCardBoxTitle = ref<any>('');
|
||||
const tableData = 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:'' });
|
||||
|
||||
//注册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 });
|
||||
|
||||
onMounted(() => {
|
||||
if(route.query.id){
|
||||
model.notes = '';
|
||||
//按教师编号加载数据,屏蔽掉无效的，不分页
|
||||
list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => {
|
||||
let list = (res?.records) ?? [];
|
||||
console.log("🚀 ~ list ~ list:", list)
|
||||
tableData.value = list;
|
||||
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);
|
||||
// })
|
||||
})
|
||||
}
|
||||
|
||||
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: 'http://127.0.0.1/live_hls/a.m3u8' }])
|
||||
mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
|
||||
|
||||
mainVideoCardBoxTitle.value = item.jsmc+" "+item.xm;
|
||||
console.log(`🚀 --------------------------------------------------------------------------------🚀`);
|
||||
console.log(`🚀 ~ file: viewPage.vue:164 ~ changeLive ~ mainVideo?.player:`, mainVideo?.player);
|
||||
console.log(`🚀 --------------------------------------------------------------------------------🚀`);
|
||||
// let buttonEl = mainVideo?.player.el().querySelector('.changeDefinitionBtn');
|
||||
//赋值原URL
|
||||
// if(buttonEl){
|
||||
// buttonEl.dataset.url = url;
|
||||
// }
|
||||
|
||||
curentPlayerVideo.value = item;
|
||||
// nextTick(() => {
|
||||
//增加自动播放功能
|
||||
//mainVideo?.player?.play();
|
||||
// })
|
||||
}
|
||||
|
||||
|
||||
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 }])
|
||||
if(type==2){
|
||||
let item2= tableData.value.find(x => x.xm == '学生全景') || {};
|
||||
let url2 = item2.pullUrl
|
||||
let main2Video = document.querySelector<any>('#main2Video');
|
||||
main2Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }])
|
||||
mainVideoCardBoxTitle.value = "二分屏";
|
||||
}else if(type == 3){
|
||||
|
||||
let item2= tableData.value.find(x => x.xm == '学生全景') || {};
|
||||
let url2 = item2.pullUrl
|
||||
let main2Video = document.querySelector<any>('#main2Video');
|
||||
main2Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }])
|
||||
mainVideoCardBoxTitle.value = "二分屏";
|
||||
|
||||
let item3 = tableData.value.find(x => x.xm == 'PPT') || {};
|
||||
let url3 = item3.pullUrl
|
||||
let main3Video = document.querySelector<any>('#main3Video');
|
||||
main3Video?.player?.src([{ type:'application/x-mpegURL',src: url3 }])
|
||||
mainVideoCardBoxTitle.value = "三分屏";
|
||||
}else if(type == 4){
|
||||
|
||||
let item2= tableData.value.find(x => x.xm == '学生全景') || {};
|
||||
let url2 = item2.pullUrl
|
||||
let main2Video = document.querySelector<any>('#main2Video');
|
||||
main2Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }])
|
||||
mainVideoCardBoxTitle.value = "二分屏";
|
||||
|
||||
let item3 = tableData.value.find(x => x.xm == 'PPT') || {};
|
||||
let url3 = item3.pullUrl
|
||||
let main3Video = document.querySelector<any>('#main3Video');
|
||||
main3Video?.player?.src([{ type:'application/x-mpegURL',src: url3 }])
|
||||
mainVideoCardBoxTitle.value = "三分屏";
|
||||
|
||||
let item4 = tableData.value.find(x => x.xm == '教师全景') || {};
|
||||
let url4 = item4.pullUrl
|
||||
let main4Video = document.querySelector<any>('#main4Video');
|
||||
main4Video?.player?.src([{ type:'application/x-mpegURL',src: url4 }])
|
||||
mainVideoCardBoxTitle.value = "四分屏";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,489 @@
|
|||
<template>
|
||||
<a-spin :spinning="confirmLoading" >
|
||||
<a-form ref="formRef" style="background:#f9f9f9;" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-row>
|
||||
<div class="wrapper-back">
|
||||
<div class="wrapper-title">基本信息</div>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="作业题目">
|
||||
<span class="spanb-word">{{ formData.title }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" v-if="dataKhnr.length > 0">
|
||||
<a-form-item label="考察内容">
|
||||
<a-table :columns="columnsKhnr" class="spanb-word" rowKey="id" :data-source="dataKhnr" :pagination="false" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="作业截止时间" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
|
||||
<span class="spanb-word">{{ formData.endTime }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="作业发布时间" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
|
||||
<span class="spanb-word">{{ formData.startTime }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="作业要求">
|
||||
<div class="spanb-word" style="margin-top:5px" v-html="formData.content"></div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" v-if="formData.filePath">
|
||||
<a-form-item label="参考资料">
|
||||
<span>{{ lastString(formData.filePath) }}</span>
|
||||
<a-button type="primary" style="margin-left: 10px" @click="downLoad(formData.filePath)">下载</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24" v-show="formData.sturead == '1' && formData.pfbz">
|
||||
<a-form-item label="评分标准" layout="inline">
|
||||
<div class="spanb-word" style="margin-top:5px" v-html="formData.pfbz"></div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</div>
|
||||
<a-col :span="24" v-if="formData.wwtgl" class="wrapper-back">
|
||||
<div class="wrapper-title">查重设置</div>
|
||||
<a-form-item layout="inline" style="margin-left: 100px">
|
||||
<a-form-item label="检测通过率" :labelCol="labelCol3" :wrapperCol="wrapperCol3">
|
||||
<span style="padding: 7px 10px"></span>
|
||||
<a-input-number v-model:value="formData.wwtgl" placeholder="检测通过率" style="width: 60%" :max="100" :min="0" disabled>
|
||||
<template #addonAfter> % </template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="比对库设置" :labelCol="labelCol3" :wrapperCol="wrapperCol3">
|
||||
<div style="padding: 7px 20px">维普</div>
|
||||
<div style="padding: 0 10px">
|
||||
<a-checkbox v-model:checked="formData.wwcc" style="margin-left: 10px;" disabled>
|
||||
<span class="Check-title">维普资源库查重：</span><br>
|
||||
<span class="Check-concent">中文科技期刊数据库、硕博学位论文库、高校特色论文库、互联网数据资源/互联网文档资源</span>
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="formData.xncc" disabled>
|
||||
<span class="Check-title">学校作业库查重：</span><br>
|
||||
<span class="Check-concent">历届学生提供的作业库内查重</span>
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="formData.nwcc" disabled>
|
||||
<span class="Check-title">本次作业查重：</span><br>
|
||||
<span class="Check-concent">本次学生提交的作业间查重</span>
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<div style="padding: 7px 20px">AIGC</div>
|
||||
<div style="padding: 0 10px">
|
||||
<a-checkbox v-model:checked="formData.aigccc" style="margin-left: 10px" disabled>
|
||||
<span class="Check-title">AIGC查重：</span><br>
|
||||
<span class="Check-concent">检测作业是否部分或全部由AI模型生成</span>
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col v-show="formData.pyContent || formData.pyFilePath|| formData.score">
|
||||
<div class="wrapper-back">
|
||||
<div class="wrapper-title">批阅信息</div>
|
||||
<a-row>
|
||||
<a-col :span="24" v-if="formData.pyContent">
|
||||
<a-form-item label="批阅内容" layout="inline">
|
||||
<div class="spanb-word" style="margin-top:5px" v-html="formData.pyContent"></div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" v-if="formData.pyFilePath">
|
||||
<a-form-item label="批阅附件">
|
||||
<span>{{ lastString(formData.pyFilePath) }}</span>
|
||||
<a-button type="primary" style="margin-left: 10px" @click="downLoad(formData.pyFilePath)">下载</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" v-show="showType == '1'">
|
||||
<div class="wps-iframe" id="wpsiframeid" style="width:100%;height: 500px;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<!-- <a-col :span="24">
|
||||
<span class="spana">作业分值：{{formData.score?formData.score:'未填写'}}</span>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<span class="spana">描述：
|
||||
<span v-if="formData.content">
|
||||
{{formData.content}}
|
||||
</span>
|
||||
<span v-else>暂无内容</span>
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<span class="spana">附件：
|
||||
<span v-if="formData.filePath">
|
||||
<a-button :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadFile(formData.filePath)"> 下载 </a-button>
|
||||
</span>
|
||||
<span v-else>暂无内容</span>
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<span class="spana">上传时间：{{formData.startTime}} ~ {{formData.endTime}}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<span class="spana">是否网络查重：{{formData.wwcc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.wwtgl?formData.wwtgl+"%":'未配置'}}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<span class="spana">是否课程内查重：{{formData.nwcc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.nwtgl?formData.nwtgl+"%":'未配置'}}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<span class="spana">Aigc是否查重：{{formData.aigccc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.aigctgl?formData.aigctgl+"%":'未配置'}}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<span class="spana">是否校内查重：{{formData.xncc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.xntgl?formData.xntgl+"%":'未配置'}}</span>
|
||||
</a-col> -->
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, unref } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { saveOrUpdate } from '../ZyInfo.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
import WebOfficeSDK from '/@/views/zy/zyInfoStudent/components/wpsApi/web-office-sdk-solution-v2.0.7.es'
|
||||
|
||||
import { downloadFile } from '/@/utils/common/renderUtils';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
//当前路由信息
|
||||
const { currentRoute } = useRouter();
|
||||
const { query } = unref(currentRoute);
|
||||
const { rwbh } = query; //获取传递参数
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => {} },
|
||||
formBpm: { type: Boolean, default: true },
|
||||
});
|
||||
const showType = ref<string>('0');
|
||||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const dataKhnr = ref<any>([]);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
title: '',
|
||||
zyType: '0',
|
||||
content: '',
|
||||
filePath: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
wwcc: '0',
|
||||
wwtgl: undefined,
|
||||
nwcc: '0',
|
||||
nwtgl: undefined,
|
||||
aigccc: '0',
|
||||
aigctgl: undefined,
|
||||
rwbh: '',
|
||||
xncc: '0',
|
||||
xntgl: undefined,
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
// const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 3 } });
|
||||
// const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 20 } });
|
||||
|
||||
const labelCol2 = reactive({
|
||||
sm: { span: 10 },
|
||||
});
|
||||
const wrapperCol2 = reactive({
|
||||
sm: { span: 10 },
|
||||
});
|
||||
const labelCol3 = reactive({
|
||||
sm: { span: 4 },
|
||||
});
|
||||
const wrapperCol3 = reactive({
|
||||
sm: { span: 20 },
|
||||
});
|
||||
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
//表单验证
|
||||
const validatorRules = {
|
||||
title: [{ required: true, message: '请输入作业名称!' }],
|
||||
// zyType: [{ required: true, message: '请输入类型!'},],
|
||||
startTime: [{ required: true, message: '请输入开始时间!' }],
|
||||
endTime: [{ required: true, message: '请输入结束时间!' }],
|
||||
wwcc: [{ required: true, message: '请输入外网是否查重!' }],
|
||||
wwtgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
|
||||
nwcc: [{ required: true, message: '请输入内网查重!' }],
|
||||
nwtgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
|
||||
aigccc: [{ required: true, message: '请输入aigc查重!' }],
|
||||
aigctgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
|
||||
xncc: [{ required: true, message: '请输入aigc查重!' }],
|
||||
xntgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
|
||||
};
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
return current && current < dayjs().subtract(1, 'days').endOf('day');
|
||||
};
|
||||
// 表单禁用
|
||||
const disabled = computed(() => {
|
||||
if (props.formBpm === true) {
|
||||
if (props.formData.disabled === false) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return props.formDisabled;
|
||||
});
|
||||
|
||||
const columnsKhnr = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'no',
|
||||
key: 'no',
|
||||
customRender: (text) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '章次',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: '节次',
|
||||
dataIndex: 'twoTitle',
|
||||
key: 'twoTitle',
|
||||
},
|
||||
];
|
||||
|
||||
function downLoad(file) {
|
||||
if (file) {
|
||||
let url = getFileAccessHttpUrl(file);
|
||||
if (url) {
|
||||
window.open(url);
|
||||
}
|
||||
} else {
|
||||
createMessage.warning('暂无文件或文件上传中');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
edit({ rwbh });
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
console.log("🚀 ~ edit ~ record:", record)
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
//赋值
|
||||
Object.assign(formData, record);
|
||||
handleKcnr(formData.kcnr);
|
||||
|
||||
|
||||
const parts = record.stuFilePath.split('.');
|
||||
const filetype = parts[parts.length - 1];
|
||||
console.log(`🚀 ~ nextTick ~ filetype:`, filetype)
|
||||
let wpsType = "w";
|
||||
if(filetype=='doc' || filetype=='docx'){
|
||||
showType.value = '1';
|
||||
wpsType = "w";
|
||||
}else if(filetype=='pdf'){
|
||||
showType.value = '1';
|
||||
wpsType = "f";
|
||||
}else if(filetype=='ppt' || filetype=='pptx' ){
|
||||
showType.value = '1';
|
||||
wpsType = "p";
|
||||
}else if(filetype=='xls' || filetype=='xlsx' ){
|
||||
showType.value = '1';
|
||||
wpsType = "s";
|
||||
}
|
||||
|
||||
if(showType.value == '1'){
|
||||
const element = document.getElementById('wpsiframeid');
|
||||
console.log('userStore.getUserInfo',userStore.getUserInfo)
|
||||
formData.id = '1863389832580046849';
|
||||
// 清空内容
|
||||
element.innerHTML = '';
|
||||
const jssdk = WebOfficeSDK.init({
|
||||
officeType: wpsType,
|
||||
appId: 'SX20241118WSUGQN',
|
||||
// fileId: formData.stuId,
|
||||
fileId: formData.id,
|
||||
mount:document.querySelector('.wps-iframe'),
|
||||
commonOptions: {
|
||||
isShowDocMap: false, //是否开启目录功能，默认开启
|
||||
isShowTopArea: false, // 隐藏顶部区域（头部和工具栏）
|
||||
isShowHeader: false, // 隐藏头部区域
|
||||
isBrowserViewFullscreen: true, // 是否在浏览器区域全屏
|
||||
isIframeViewFullscreen: true, // 是否在 iframe 区域内全屏
|
||||
acceptVisualViewportResizeEvent: true // 控制 WebOffice 是否接受外部的 VisualViewport
|
||||
},
|
||||
wordOptions: {
|
||||
isShowDocMap: false, // 是否开启目录功能，默认开启
|
||||
isBestScale: true, // 打开文档时，默认以最佳比例显示
|
||||
isShowBottomStatusBar: false, // 是否展示底部状态栏
|
||||
},
|
||||
token: userStore.getUserInfo.username
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function lastString(record) {
|
||||
console.log('😓', record);
|
||||
const parts = record.split('/');
|
||||
console.log('🧔', parts);
|
||||
return parts[parts.length - 1];
|
||||
}
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
async function submitForm() {
|
||||
// 触发表单验证
|
||||
await validate();
|
||||
confirmLoading.value = true;
|
||||
const isUpdate = ref<boolean>(false);
|
||||
//时间格式化
|
||||
let model = formData;
|
||||
if (model.id) {
|
||||
isUpdate.value = true;
|
||||
}
|
||||
//循环数据
|
||||
for (let data in model) {
|
||||
//如果该数据是数组并且是字符串类型
|
||||
if (model[data] instanceof Array) {
|
||||
let valueType = getValueType(formRef.value.getProps, data);
|
||||
//如果是字符串类型的需要变成以逗号分割的字符串
|
||||
if (valueType === 'string') {
|
||||
model[data] = model[data].join(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (model.wwcc == '1') {
|
||||
if (!model.wwtgl) {
|
||||
createMessage.warning('网络通过率不能为空');
|
||||
confirmLoading.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (model.nwcc == '1') {
|
||||
if (!model.nwtgl) {
|
||||
createMessage.warning('内网通过率不能为空');
|
||||
confirmLoading.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (model.aigccc == '1') {
|
||||
if (!model.aigctgl) {
|
||||
createMessage.warning('AIGC通过率不能为空');
|
||||
confirmLoading.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (model.xncc == '1') {
|
||||
if (!model.xntgl) {
|
||||
createMessage.warning('校内通过率不能为空');
|
||||
confirmLoading.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await saveOrUpdate(model, isUpdate.value)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
createMessage.success(res.message);
|
||||
emit('ok');
|
||||
} else {
|
||||
createMessage.warning(res.message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
confirmLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
//选择考察内容
|
||||
function handleKcnr(kcnr) {
|
||||
if (kcnr) {
|
||||
defHttp.get({ url: '/teachingunitcontent/kcTeachingUnitContentOne/getAllList', params: { id: kcnr } }).then((res) => {
|
||||
console.log('🤦♀️', res);
|
||||
dataKhnr.value = res;
|
||||
});
|
||||
} else {
|
||||
dataKhnr.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
min-height: 300px !important;
|
||||
overflow-y: auto;
|
||||
padding: 24px 24px 24px 24px;
|
||||
}
|
||||
.spanSm {
|
||||
top: -22px;
|
||||
position: inherit;
|
||||
padding: 0 0 0 164px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
.spana {
|
||||
margin-left: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.spanb {
|
||||
margin-left: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.spanb-word {
|
||||
color: #999999;
|
||||
}
|
||||
.wrapper-back {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
padding-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.wrapper-title {
|
||||
font-size: 18px;
|
||||
border-left: 4px solid #1ab394;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.Check-title{
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.Check-concent{
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,484 @@
|
|||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-row>
|
||||
<a-col :push="leftSpan - 1" :span="0" :lg="{ span: 1 }">
|
||||
<!-- <a-button style="margin-left: 28px;" type="primary" @click="changeSpan" size="small">{{ leftSpan == 12? '放大' : '缩小' }}</a-button> -->
|
||||
<img v-show="leftSpan == 12" @click="changeSpan" style="width: 25px;margin-left: 50px;cursor: pointer;"
|
||||
src="/resource/img/toright.png" />
|
||||
<img v-show="leftSpan != 12" @click="changeSpan" style="width: 25px;margin-left: 50px;cursor: pointer;"
|
||||
src="/resource/img/toleft.png" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :xs="24" :lg="leftSpan">
|
||||
<div v-show="showType == '1'">
|
||||
<div class="wps-iframe" id="wpsiframeid" style="width:100%;height: 500px;"></div>
|
||||
</div>
|
||||
<div v-if="showType == '2'">
|
||||
<div style="padding: 10px 20px;">
|
||||
<a-button type="primary" @click="rotateImage">顺时针旋转</a-button>
|
||||
<a-button type="primary" @click="rotateImage2" style="margin-left: 20px;">逆时针旋转</a-button>
|
||||
</div>
|
||||
|
||||
<div class="image-container">
|
||||
<img :src="ylurl" :style="{ transform: 'rotate(' + rotationAngle + 'deg)' }" class="rotated-image" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showType == '3'">
|
||||
<div class="video-container">
|
||||
<video ref="videoPlayer" :controls="controls" :autoplay="autoplay" :loop="loop" :src="videoUrl"
|
||||
@loadedmetadata="playVideoInFullscreen">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-else>
|
||||
<a-button type="primary">下载文件</a-button>
|
||||
</div> -->
|
||||
</a-col>
|
||||
<a-col :xs="24" :lg="rightSpan">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="作业名称">
|
||||
{{ zyInfo.title }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="学生姓名">
|
||||
{{ formData.studentName }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="学生学号">
|
||||
{{ formData.createBy }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="评分" v-bind="validateInfos.score">
|
||||
<a-input-number v-model:value="formData.score" style="width: 100%" placeholder="请填写评分"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="批阅内容" v-bind="validateInfos.pyContent">
|
||||
<JEditor v-model:value="formData.pyContent" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="批阅附件" v-bind="validateInfos.pyFilePath">
|
||||
<j-upload v-model:value="formData.pyFilePath" maxCount="1" :text="`上传批阅附件`"
|
||||
style="background: #ededed; " :forceAcceptVerify="true"></j-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" style="text-align: center;" v-if="disabled">
|
||||
<div>
|
||||
<a-button type="primary" @click="submitForm">保存</a-button>
|
||||
<a-button type="primary" @click="submitNextForm" style="margin-left: 10px;">保存并下一个</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { saveOrUpdate } from '../ZyInfoStudent.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
import { getToken } from '/@/utils/auth';
|
||||
import WebOfficeSDK from './wpsApi/web-office-sdk-solution-v2.0.7.es'
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
|
||||
const leftSpan = ref(12)
|
||||
const rightSpan = ref(12)
|
||||
const userStore = useUserStore();
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => { } },
|
||||
formBpm: { type: Boolean, default: true }
|
||||
});
|
||||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok', 'ok2']);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
score: '',
|
||||
pyContent: '',
|
||||
pyFilePath: '',
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
const showType = ref<string>('1');
|
||||
const ylurl = ref<string>('');
|
||||
const rotationAngle = ref(0);
|
||||
const zyInfo = ref<any>({});
|
||||
const globSetting = useGlobSetting();
|
||||
const baseApiUrl = globSetting.domainUrl;
|
||||
|
||||
const videoPlayer = ref(null);
|
||||
const videoOpen = ref<boolean>(false);
|
||||
const controls = ref(true);
|
||||
const autoplay = ref(false)
|
||||
const loop = ref(false);
|
||||
const videoUrl = ref<String>('');
|
||||
const jssdkInfo = ref<any>({});
|
||||
const record_ = ref(null)
|
||||
|
||||
function changeSpan() {
|
||||
console.log('leftSpan', leftSpan.value)
|
||||
console.log('rightSpan', rightSpan.value)
|
||||
if (leftSpan.value == 12) {
|
||||
leftSpan.value = 18
|
||||
rightSpan.value = 6
|
||||
} else {
|
||||
leftSpan.value = 12
|
||||
rightSpan.value = 12
|
||||
}
|
||||
console.log('leftSpan--》', leftSpan.value)
|
||||
console.log('rightSpan--》', rightSpan.value)
|
||||
edit(record_.value)
|
||||
}
|
||||
|
||||
//表单验证
|
||||
const validatorRules = {
|
||||
score: [{ required: true, message: '请输入分数!' }],
|
||||
};
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
|
||||
|
||||
// 表单禁用
|
||||
const disabled = computed(() => {
|
||||
if (props.formBpm === true) {
|
||||
if (props.formData.disabled === false) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return props.formDisabled;
|
||||
});
|
||||
|
||||
function handleJyfz(record) {
|
||||
console.log(`🚀 ~ handleJyfz ~ record:`, record)
|
||||
// if(zyInfo.score){
|
||||
// if(parseInt(record) > parseInt(zyInfo.score)){
|
||||
// createMessage.warning('评分不能超过预设作业分值!');
|
||||
// formData.score = zyInfo.score;
|
||||
// }
|
||||
// }else{
|
||||
// if(parseInt(record) > 100){
|
||||
// createMessage.warning('评分不能超过100分!');
|
||||
// formData.score = zyInfo.score;
|
||||
// }
|
||||
// }
|
||||
|
||||
if (parseInt(record) > 100) {
|
||||
createMessage.warning('评分不能超过100分!');
|
||||
formData.score = '';
|
||||
}
|
||||
|
||||
if (parseInt(record) < 0) {
|
||||
createMessage.warning('评分不能低于0分!');
|
||||
formData.score = '';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function rotateImage() {
|
||||
rotationAngle.value += 90; // 每次点击旋转90度
|
||||
}
|
||||
|
||||
function rotateImage2() {
|
||||
rotationAngle.value -= 90; // 每次点击旋转90度
|
||||
}
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
edit({});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
record_.value = record
|
||||
showType.value = '1';
|
||||
formData.pyContent = ''
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
|
||||
defHttp.get({ url: '/zyInfo/zyInfo/queryById', params: { id: record.mainId } }).then(res => {
|
||||
console.log(`🚀 ~ defHttp.get ~ res:`, res)
|
||||
zyInfo.value = res;
|
||||
})
|
||||
const parts = record.filePath.split('.');
|
||||
const filetype = parts[parts.length - 1];
|
||||
console.log(`🚀 ~ nextTick ~ filetype:`, filetype)
|
||||
// var file = getFileAccessHttpUrl(record.filePath);
|
||||
// ylurl.value = file;
|
||||
let wpsType = "w";
|
||||
if (filetype == 'jpg' || filetype == 'png' || filetype == 'jpeg' || filetype == 'xls' || filetype == 'xlsx' || filetype == 'text') {
|
||||
showType.value = '2';
|
||||
var file = getFileAccessHttpUrl(record.filePath);
|
||||
ylurl.value = file;
|
||||
} else if (filetype == 'doc' || filetype == 'docx') {
|
||||
showType.value = '1';
|
||||
wpsType = "w";
|
||||
} else if (filetype == 'pdf') {
|
||||
showType.value = '1';
|
||||
wpsType = "f";
|
||||
} else if (filetype == 'ppt' || filetype == 'pptx') {
|
||||
showType.value = '1';
|
||||
wpsType = "p";
|
||||
} else if (filetype == 'xls' || filetype == 'xlsx') {
|
||||
showType.value = '1';
|
||||
wpsType = "s";
|
||||
} else if (filetype == 'mp4' || filetype == 'avi' || filetype == 'mp3' || filetype == 'wav') {
|
||||
showType.value = '3';
|
||||
let url = getFileAccessHttpUrl(record.filePath);
|
||||
console.log('视频预览-----》', url);
|
||||
// videoOpen.value = true;
|
||||
videoUrl.value = url;
|
||||
} else {
|
||||
showType.value = '0';
|
||||
}
|
||||
//赋值
|
||||
Object.assign(formData, record);
|
||||
|
||||
formData.id = '1863389832580046849';
|
||||
|
||||
console.log("🚀 ~ nextTick ~ formData.id:", formData.id)
|
||||
if (showType.value == '1') {// 获取元素
|
||||
const element = document.getElementById('wpsiframeid');
|
||||
// 清空内容
|
||||
element.innerHTML = '';
|
||||
const jssdk = WebOfficeSDK.init({
|
||||
officeType: wpsType,
|
||||
appId: 'SX20241118WSUGQN',
|
||||
fileId: formData.id,
|
||||
mount: document.querySelector('.wps-iframe'),
|
||||
commonOptions: {
|
||||
isShowDocMap: false, //是否开启目录功能，默认开启
|
||||
// isShowTopArea: false, // 隐藏顶部区域（头部和工具栏）
|
||||
// isShowHeader: false, // 隐藏头部区域
|
||||
isBrowserViewFullscreen: true, // 是否在浏览器区域全屏
|
||||
isIframeViewFullscreen: true, // 是否在 iframe 区域内全屏
|
||||
acceptVisualViewportResizeEvent: true // 控制 WebOffice 是否接受外部的 VisualViewport
|
||||
},
|
||||
wordOptions: {
|
||||
isShowDocMap: false, // 是否开启目录功能，默认开启
|
||||
isBestScale: true, // 打开文档时，默认以最佳比例显示
|
||||
isShowBottomStatusBar: false, // 是否展示底部状态栏
|
||||
},
|
||||
token: userStore.getUserInfo.username
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
|
||||
console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
|
||||
console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
|
||||
}
|
||||
|
||||
// --------------------------视频------------------------------
|
||||
const playVideo = () => {
|
||||
videoPlayer.value.play();
|
||||
};
|
||||
|
||||
const pauseVideo = () => {
|
||||
videoPlayer.value.pause();
|
||||
};
|
||||
const handleFullScreenChange = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
console.log('Video exited fullscreen');
|
||||
// 这里可以执行取消全屏后的逻辑
|
||||
videoOpen.value = false;
|
||||
videoPlayer.value.pause();
|
||||
}
|
||||
};
|
||||
|
||||
function videoHandleCancel() {
|
||||
pauseVideo();
|
||||
videoOpen.value = false;
|
||||
}
|
||||
onMounted(() => {
|
||||
document.addEventListener('fullscreenchange', handleFullScreenChange);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('fullscreenchange', handleFullScreenChange);
|
||||
});
|
||||
|
||||
//视频预览
|
||||
function handleVideo(three) {
|
||||
let url = getFileAccessHttpUrl(three.filePath);
|
||||
console.log('视频预览-----》', url);
|
||||
videoOpen.value = true;
|
||||
videoUrl.value = url;
|
||||
playVideoInFullscreen();
|
||||
// setTimeout(() => {
|
||||
// playVideo();
|
||||
// }, 1000);
|
||||
|
||||
}
|
||||
|
||||
// --------------------------视频------------------------------
|
||||
const playVideoInFullscreen = async () => {
|
||||
if (videoPlayer.value) {
|
||||
try {
|
||||
// 使用原生DOM方法请求全屏
|
||||
// await videoPlayer.value.requestFullscreen();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
async function submitForm() {
|
||||
// 触发表单验证
|
||||
await validate();
|
||||
confirmLoading.value = true;
|
||||
const isUpdate = ref<boolean>(false);
|
||||
//时间格式化
|
||||
let model = formData;
|
||||
if (model.id) {
|
||||
isUpdate.value = true;
|
||||
}
|
||||
//循环数据
|
||||
for (let data in model) {
|
||||
//如果该数据是数组并且是字符串类型
|
||||
if (model[data] instanceof Array) {
|
||||
let valueType = getValueType(formRef.value.getProps, data);
|
||||
//如果是字符串类型的需要变成以逗号分割的字符串
|
||||
if (valueType === 'string') {
|
||||
model[data] = model[data].join(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defHttp.post({ url: '/zyInfoStudent/zyInfoStudent/editPiyue', params: model }).then(res => {
|
||||
emit('ok');
|
||||
})
|
||||
.finally(() => {
|
||||
confirmLoading.value = false;
|
||||
});
|
||||
// await saveOrUpdate(model, isUpdate.value)
|
||||
// .then((res) => {
|
||||
// if (res.success) {
|
||||
// createMessage.success(res.message);
|
||||
// emit('ok');
|
||||
// } else {
|
||||
// createMessage.warning(res.message);
|
||||
// }
|
||||
// })
|
||||
// .finally(() => {
|
||||
// confirmLoading.value = false;
|
||||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交数据并下一个
|
||||
*/
|
||||
async function submitNextForm() {
|
||||
// 触发表单验证
|
||||
await validate();
|
||||
confirmLoading.value = true;
|
||||
const isUpdate = ref<boolean>(false);
|
||||
//时间格式化
|
||||
let model = formData;
|
||||
if (model.id) {
|
||||
isUpdate.value = true;
|
||||
}
|
||||
//循环数据
|
||||
for (let data in model) {
|
||||
//如果该数据是数组并且是字符串类型
|
||||
if (model[data] instanceof Array) {
|
||||
let valueType = getValueType(formRef.value.getProps, data);
|
||||
//如果是字符串类型的需要变成以逗号分割的字符串
|
||||
if (valueType === 'string') {
|
||||
model[data] = model[data].join(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
await defHttp.post({ url: '/zyInfoStudent/zyInfoStudent/editPiyue', params: model }).then(res => {
|
||||
emit('ok2');
|
||||
})
|
||||
|
||||
|
||||
await defHttp.get({ url: '/zyInfoStudent/zyInfoStudent/getList2', params: { column: 'createTime', order: 'asc', pageNo: 1, pageSize: 10, ywid: zyInfo.value.id, rwbh: zyInfo.value.rwbh, queryType: 5 } }).then(res => {
|
||||
console.log(`🚀 ~ awaitdefHttp.post ~ res:`, res)
|
||||
var list = res.records;
|
||||
if (list.length > 0) {
|
||||
edit(list[0])
|
||||
} else {
|
||||
createMessage.warning('已批阅完毕,暂无下一条批阅数据！');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
confirmLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
min-height: 150px !important;
|
||||
overflow-y: auto;
|
||||
padding: 24px 24px 24px 24px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
/* 确保视频宽度不超过其容器宽度 */
|
||||
}
|
||||
|
||||
.image-container {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
/* 设置容器宽度 */
|
||||
height: auto;
|
||||
/* 设置容器高度 */
|
||||
overflow: hidden;
|
||||
/* 隐藏溢出的部分 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rotated-image {
|
||||
max-width: 100%;
|
||||
/* 最大宽度为容器宽度 */
|
||||
max-height: 100%;
|
||||
/* 最大高度为容器高度 */
|
||||
object-fit: contain;
|
||||
/* 保持图片内容不失真 */
|
||||
transform: rotate(90deg);
|
||||
/* 假设图片已经旋转90度 */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue