Merge branch 'player-20251117-v1' into master-20251210

# Conflicts:
#	src/api/modules/course.js
#	src/components/Course/courseForm.vue
#	src/security.js
#	src/views/portal/course/Index.vue
#	src/views/study/coursenew.vue
This commit is contained in:
joshen
2025-12-10 11:00:15 +08:00
21 changed files with 2701 additions and 599 deletions

View File

@@ -1,494 +1,500 @@
/**
* 课程的操作,课程的添加,修改,列表查询,课程的审核发布等操作。
* 针对于管理员,教师的功能
*
**/
import ajax from '@/utils/xajax.js'
/**
* 保存课程基本信息,新增和更新都是此方式
* @param {Object} data
*{
course:{
课程的基本信息,具体字段内容另外提供
name课程名称
type课程类型10微课21在线课(直播)20:在线课( 录播)30:面授课40:混合式,
summary摘人
overview 课程简介
coverImg封面图
sysType系统分类只存储最后一级,
resOwner1:资源归属一级的id
resOwner2:资源归属二级的id
resOwner3:资源归属三级的id
forUsers: 目标人群
forScene应用场景
openObject 开放权限
value:课程价值
tags标签多个使用-分隔
keywords:关键字
device: 1PC端可见2移动端可见3多端可见
status: 1:未提交(草稿);2:已提交;
publishedtrue/false 是否发布
enabledtrue/false 启用、停用
isTop: true/false 是否置顶
source整数课程来源1:内部2;外部
},
teachers:[
{
teacherId:教师的id,
teacherName:教师的名称
}
]
}
*/
const saveBase = function(data) {
return ajax.postJson('/xboe/m/course/manage/save', data);
}
/**
* 仅仅是保存课程信息,不包括教师信息
* @param {Object} data
*/
const saveOnlyCourse = function(data) {
return ajax.postJson('/xboe/m/course/manage/save-only-course', data);
}
/**提交课程*/
const submitCourse = function(data) {
return ajax.postJson('/xboe/m/course/manage/submit', data);
}
/**撤销已提交审核的课程*/
const revokeSubmit = function(id) {
return ajax.post('/xboe/m/course/manage/revoke', {id});
}
/**
* 复制课程
* @param {Object}
*/
const copyCourse = function(data) {
return ajax.post('/xboe/m/course/manage/copy',data);
}
/*
查询课程是否有重复名称
*/
const isRedoName=function(){
return ajax.get('/xboe/m/course/manage/isRedoName');
}
/*
查询当前添加课程是否已有
courseName 要添加的课程姓名
*/
const isCourseName=function(courseName,courseId){
return ajax.get(`/xboe/m/course/manage/isCourseName?courseName=${courseName}&courseId=${courseId}`);
}
/**
* 查询修改日志,列表,不分页
* @param {Object} params
* {
num:数量可以不传默认是10条最新的10条
courseId:课程的id
name: 修改人
}
*/
const findUpdateLogs = function(params) {
return ajax.post('/xboe/m/course/manage/upldate-logs',params);
}
/**
* 根据id获取修改的详细信息
* @param {Object} id
*/
const getUpdateLog = function(id) {
return ajax.get('/xboe/m/course/manage/upldate-log-detail?id='+id);
}
/**
* 保存课程的一条学习内容信息,新增和更新都是此方式
* @param {Object} data
* {
content内容 {
courseId,csectionId章节id(微课为空),sortIndex排序顺序微课为空,contentType 内容类型图文41连接52作业60考试61评估62
contentName,contentRefId无关联内容时为空此字段内容后台会控制,content具体的内容
}
homework作业信息 单个对象{
courseIdcontentId上面对象的id后台会控制,name,content,file,deadTime,
submitMode:1表提交附件2直接填写3表两者都可以
}
exam考试信息 单个对象
{
courseIdcontentId上面对象的id后台会控制,testName,testDuration考试时长,
paperType试卷类型 1自定义2使用已有试卷
paperId试题的id,使用已有试卷时保存选择试卷的id
showAnalysis是否显示解析showAnswer否显示答案times尝试次数
arrange试题排序 0表不乱序,1试题乱序2选项乱序3全部乱序
scoringType评分方式 1最高一次2最后一次
passLine及格线整数
randomMode是否随机模式true/false
paperContent试卷的内容json存储的对象{items:[]}
}
assess评估信息,list 多条记录.
[
{ courseIdcontentId,assessId评估id一期为空,question问题qType问题类型}
]
}
*/
const saveContent = function(data) {
return ajax.postJson('/xboe/m/course/content/save', data);
}
/**
* 更新课程内容的顺序
* @param {String} cid //课程的id
* @param {Array} items
* [
* {
* id:章的id
* index:整数,顺序值
* items:[
* {id:内容的id,index:顺序值}
* ]
* }
* ]
* @returns
*/
const updateContentOrders = function(cid,items) {
return ajax.postJson('/xboe/m/course/content/update-orders/'+cid, items);
}
/**
* 课程的详细信息
* @param {String} id
*/
const detail = function(id) {
return ajax.get('/xboe/m/course/manage/detail?id=' + id);
}
const getDictIds = function(pid,type) {
return ajax.get(`/xboe/m/course/manage/getDictIds?pid=${pid}&type=${type}`);
}
/**
* 更新内容的名称
* @param {Object} data
* {
id:'',
name:''
}
*/
const updateContentName = function(data) {
return ajax.post('/xboe/m/course/content/update-name', data);
}
/**
* 删除一条学习内容
* @param {Object} data
* {
id: 内容的id,
ctype:对应内容的类型contentType
erasable:是否物理删除,此值是课程信息中系统带过来的字段,直接使用它就可以了
}
*/
const delContent = function(data) {
return ajax.post('/xboe/m/course/content/delete', data);
}
/**
* 保存课程的章信息,新增和修改保存都是一个
* @param {Object} data
* courseId课程的id
* name章节名称
description章节说明
parentId 上级id。如果没有可以填“-1”字符串
orderIndex显示顺序顺序索引整数
*/
const saveSection = function(data) {
return ajax.post('/xboe/m/course/content/save-section', data);
}
/**
* 删除章节目录,注意只有目录下没有学习内容时才允许删除
* @param {Object} data
*/
const delSection = function(id) {
return ajax.post('/xboe/m/course/content/delete-section?id=' + id);
}
/**
* 根据课程学习内容的id。获取作业信息只有学习内容是作业时才会有信息
* @param {Object} ccid
*/
const getHomework = function(ccid) {
return ajax.post('/xboe/m/course/content/homework?ccid=' + ccid);
}
/**
* 根据课程学习内容的id。获取考试信息只有学习内容是考试时才会有信息
* @param {Object} ccid
*/
const getExam = function(ccid) {
return ajax.post('/xboe/m/course/content/exam?ccid=' + ccid);
}
/**
* 根据课程学习内容的id。获取评估信息评估内容可以获取
* @param {Object} ccid
*/
const getAssess = function(ccid) {
return ajax.post('/xboe/m/course/content/assess?ccid=' + ccid);
}
/**
* 管理列表查询
* @param {Object} query
* pageIndex:第几页
* pageSize:每页多少条
* resOwner1:资源归属一级的id
resOwner2:资源归属二级的id
resOwner3:资源归属三级的id
types授课方式多个使用 - 分隔
scenes应用场景多个使用 - 分隔
publishtrue/false 是否发布,空值或不传就是全部
aid创建人 aid
sysCreateUser: 创建人姓名
keyword查询关键词
sysTypes系统的分类多级使用 - 分隔,注一期功能是分类的最后一级值,不支持多个的查询
orderField排序字段 id s
orderAsctrue/false 是否是正序,从小到大
status状态,多个使用 - 分隔 1代表待审核 5代表已审核 1 未提交 2 已提交 5 审核完成
type课程类型10微课21在线课(直播)20:在线课( 录播)30:面授课40:混合式,
name 课程名称
*/
const pageList = function(query) {
return ajax.post('/xboe/m/course/manage/pagelist', query);
}
/**计算待审核课程*/
const countWaitAudit = function() {
return ajax.get('/xboe/m/course/manage/wait-audit-num');
}
/**
* [已用courseAudit中的hrbpAuditList替换]
* 当前用户需要审核的课程列表
* @param {Object} query 同pageList
*/
const auditList = function(query) {
return ajax.post('/xboe/m/course/manage/audit-pagelist', query);
}
/**
* 【已移到courseAudit中】
* 教师需要审核的课程列表
*/
const teacherAuditList = function(query) {
return ajax.post('/xboe/m/course/audit/teacher-course', query);
}
/**
* 指定审核人,转审核人
* 点击“转审” 弹出教师查询窗口,查询教师,填写备注,提交,调用此接口
* @param {Object} data
* {courseId:课程id,teacherId:指定的审核人教师的id,teacherName:教师名称,remark:备注}
*/
const auditAppoint = function(data) {
return ajax.post('/xboe/m/course/audit/appoint', data);
}
/**
* 获取审核信息,上面教师点击审核课程时,用于查询,上面“转审”时,用户填写的备注信息
* @param {courseId:'课程id',teacherId:'可以不填写,系统会查询当前人'} data
*/
const getAuditInfo = function(data) {
return ajax.post('/xboe/m/course/audit/infos', data);
}
/**
* 管理员的课程审核处理
* @param {Object} query {id:课程id,title:课程的名称, Boolean pass 是否通过,remark 备注}
*/
const audit = function(data) {
return ajax.post('/xboe/m/course/manage/audit', data);
}
/**
* 审核记录列表,分页查询
*/
const auditPageRecords = function(data) {
return ajax.post('/xboe/m/course/audit/page-records', data);
}
/**
* 审核记录列表要卖课程id查询出审核列记录信息
* { courseId:必须}
*/
const auditCourseRecords = function(data) {
return ajax.post('/xboe/m/course/audit/course-records',data);
}
/**
* 管理员的课程发布,当前已经不再使用了
* @param {Object} query {ids:课程id,多个使用逗号分隔,title:课程的名称, Boolean pass 是否发布}
*/
const publish = function(data) {
return ajax.post('/xboe/m/course/manage/publish', data);
}
const auditAndPublish=function(data) {
return ajax.post('/xboe/m/course/manage/audit-publish', data);
}
/**
* 设置top
* @param {Object} query {ids:课程id,多个使用逗号分隔,title:课程的名称,Boolean top 是否置顶}
*/
const setTop = function(data) {
return ajax.post('/xboe/m/course/manage/top', data);
}
/**
* 管理员的设置启用停用
* @param {Object} query {ids:课程id,多个使用逗号分隔,title:课程的名称, Boolean enabled 是否启用}
*/
const setEnabled = function(data) {
return ajax.post('/xboe/m/course/manage/enabled', data);
}
/**
* 管理员的删除课程
* erasable 此值是课程信息带过来的,直接传就可以
* @param {Object} query {id:课程id,多个使用逗号分隔,Boolean erasable 是否物理删除,title:课程的名称, remark 备注}
*/
const del = function(data) {
return ajax.post('/xboe/m/course/manage/delete', data);
}
/*
详情
*/
const detailFew=function(id){
return ajax.get('/xboe/m/course/portal/detail-few?id=' + id);
}
/*
直接审核,教师提交审核
*/
const sumbits=function(data){
return ajax.post('/xboe/m/course/manage/sumbits',data);
}
/*
教师授课记录
*/
const teacherCourse=function(teacherId){
return ajax.get('/xboe/m/course/manage/teacher-course?teacherId='+teacherId);
}
/*
教师授课记录导出
@param teacherId 教师id
*/
const exportTeacherCourse=function(teacherId){
return ajax.post('/xboe/m/course/manage/export-teacher-course?teacherId='+teacherId)
}
/*
*待审核课程记录导出
* resOwner1:资源归属一级的id
resOwner2:资源归属二级的id
resOwner3:资源归属三级的id
types授课方式多个使用 - 分隔
scenes应用场景多个使用 - 分隔
publishtrue/false 是否发布,空值或不传就是全部
aid创建人 aid
sysCreateUser: 创建人姓名
keyword查询关键词
sysTypes系统的分类多级使用 - 分隔,注一期功能是分类的最后一级值,不支持多个的查询
orderField排序字段 id s
orderAsctrue/false 是否是正序,从小到大
status状态,多个使用 - 分隔 1代表待审核 5代表已审核 1 未提交 2 已提交 5 审核完成
type课程类型10微课21在线课(直播)20:在线课( 录播)30:面授课40:混合式,
name 课程名称
*/
const exportCourseAudit=function(query){
return ajax.post('/xboe/m/course/manage/exportCourseAudit',query);
}
/*
参数同上待审核课程记录导出
课程的导出和已审核的课程导出
*/
const exportCourse=function(query){
return ajax.post('/xboe/m/course/manage/exportCourse',query);
}
//判断受众id是否有关联
const queryCrowd=function(query){
return ajax.postJson('/xboe/m/course/manage/queryCrowd',query);
}
/**
* 二次查询
* @param{
* ids
* }
* */
const ids=function (data){
return ajax.postJson('/xboe/m/course/manage/ids',data);
}
const saveTip = function() {
return ajax.postJson('/xboe/m/course/manage/saveTip');
}
export default {
saveBase,
submitCourse,
revokeSubmit,
copyCourse,
findUpdateLogs,
getUpdateLog,
detail,
getDictIds,
saveContent,
pageList,
setEnabled,
del,
publish,
saveSection,
getHomework,
countWaitAudit,
auditList,
teacherAuditList,
auditAppoint,
getAuditInfo,
audit,
auditPageRecords,
auditCourseRecords,
auditAndPublish,
getAssess,
setTop,
delSection,
getExam,
delContent,
updateContentName,
updateContentOrders,
saveOnlyCourse,
isRedoName,
isCourseName,
detailFew,
sumbits,
teacherCourse,
exportTeacherCourse,
exportCourseAudit,
exportCourse,
queryCrowd,
ids,
saveTip
}
/**
* 课程的操作,课程的添加,修改,列表查询,课程的审核发布等操作。
* 针对于管理员,教师的功能
*
**/
import ajax from '@/utils/xajax.js'
/**
* 保存课程基本信息,新增和更新都是此方式
* @param {Object} data
*{
course:{
课程的基本信息,具体字段内容另外提供
name课程名称
type课程类型10微课21在线课(直播)20:在线课( 录播)30:面授课40:混合式,
summary摘人
overview 课程简介
coverImg封面图
sysType系统分类只存储最后一级,
resOwner1:资源归属一级的id
resOwner2:资源归属二级的id
resOwner3:资源归属三级的id
forUsers: 目标人群
forScene应用场景
openObject 开放权限
value:课程价值
tags标签多个使用-分隔
keywords:关键字
device: 1PC端可见2移动端可见3多端可见
status: 1:未提交(草稿);2:已提交;
publishedtrue/false 是否发布
enabledtrue/false 启用、停用
isTop: true/false 是否置顶
source整数课程来源1:内部2;外部
},
teachers:[
{
teacherId:教师的id,
teacherName:教师的名称
}
]
}
*/
const saveBase = function(data) {
return ajax.postJson('/xboe/m/course/manage/save', data);
}
/**
* 仅仅是保存课程信息,不包括教师信息
* @param {Object} data
*/
const saveOnlyCourse = function(data) {
return ajax.postJson('/xboe/m/course/manage/save-only-course', data);
}
/**提交课程*/
const submitCourse = function(data) {
return ajax.postJson('/xboe/m/course/manage/submit', data);
}
/**撤销已提交审核的课程*/
const revokeSubmit = function(id) {
return ajax.post('/xboe/m/course/manage/revoke', {id});
}
/**
* 复制课程
* @param {Object}
*/
const copyCourse = function(data) {
return ajax.post('/xboe/m/course/manage/copy',data);
}
/*
查询课程是否有重复名称
*/
const isRedoName=function(){
return ajax.get('/xboe/m/course/manage/isRedoName');
}
/*
查询当前添加课程是否已有
courseName 要添加的课程姓名
*/
const isCourseName=function(courseName,courseId){
return ajax.get(`/xboe/m/course/manage/isCourseName?courseName=${courseName}&courseId=${courseId}`);
}
/**
* 查询修改日志,列表,不分页
* @param {Object} params
* {
num:数量可以不传默认是10条最新的10条
courseId:课程的id
name: 修改人
}
*/
const findUpdateLogs = function(params) {
return ajax.post('/xboe/m/course/manage/upldate-logs',params);
}
/**
* 根据id获取修改的详细信息
* @param {Object} id
*/
const getUpdateLog = function(id) {
return ajax.get('/xboe/m/course/manage/upldate-log-detail?id='+id);
}
/**
* 保存课程的一条学习内容信息,新增和更新都是此方式
* @param {Object} data
* {
content内容 {
courseId,csectionId章节id(微课为空),sortIndex排序顺序微课为空,contentType 内容类型图文41连接52作业60考试61评估62
contentName,contentRefId无关联内容时为空此字段内容后台会控制,content具体的内容
}
homework作业信息 单个对象{
courseIdcontentId上面对象的id后台会控制,name,content,file,deadTime,
submitMode:1表提交附件2直接填写3表两者都可以
}
exam考试信息 单个对象
{
courseIdcontentId上面对象的id后台会控制,testName,testDuration考试时长,
paperType试卷类型 1自定义2使用已有试卷
paperId试题的id,使用已有试卷时保存选择试卷的id
showAnalysis是否显示解析showAnswer否显示答案times尝试次数
arrange试题排序 0表不乱序,1试题乱序2选项乱序3全部乱序
scoringType评分方式 1最高一次2最后一次
passLine及格线整数
randomMode是否随机模式true/false
paperContent试卷的内容json存储的对象{items:[]}
}
assess评估信息,list 多条记录.
[
{ courseIdcontentId,assessId评估id一期为空,question问题qType问题类型}
]
}
*/
const saveContent = function(data) {
return ajax.postJson('/xboe/m/course/content/save', data);
}
/**
* 更新课程内容的顺序
* @param {String} cid //课程的id
* @param {Array} items
* [
* {
* id:章的id
* index:整数,顺序值
* items:[
* {id:内容的id,index:顺序值}
* ]
* }
* ]
* @returns
*/
const updateContentOrders = function(cid,items) {
return ajax.postJson('/xboe/m/course/content/update-orders/'+cid, items);
}
/**
* 课程的详细信息
* @param {String} id
*/
const detail = function(id) {
return ajax.get('/xboe/m/course/manage/detail?id=' + id);
}
const getDictIds = function(pid,type) {
return ajax.get(`/xboe/m/course/manage/getDictIds?pid=${pid}&type=${type}`);
}
/**
* 更新内容的名称
* @param {Object} data
* {
id:'',
name:''
}
*/
const updateContentName = function(data) {
return ajax.post('/xboe/m/course/content/update-name', data);
}
/**
* 删除一条学习内容
* @param {Object} data
* {
id: 内容的id,
ctype:对应内容的类型contentType
erasable:是否物理删除,此值是课程信息中系统带过来的字段,直接使用它就可以了
}
*/
const delContent = function(data) {
return ajax.post('/xboe/m/course/content/delete', data);
}
/**
* 保存课程的章信息,新增和修改保存都是一个
* @param {Object} data
* courseId课程的id
* name章节名称
description章节说明
parentId 上级id。如果没有可以填“-1”字符串
orderIndex显示顺序顺序索引整数
*/
const saveSection = function(data) {
return ajax.post('/xboe/m/course/content/save-section', data);
}
/**
* 删除章节目录,注意只有目录下没有学习内容时才允许删除
* @param {Object} data
*/
const delSection = function(id) {
return ajax.post('/xboe/m/course/content/delete-section?id=' + id);
}
/**
* 根据课程学习内容的id。获取作业信息只有学习内容是作业时才会有信息
* @param {Object} ccid
*/
const getHomework = function(ccid) {
return ajax.post('/xboe/m/course/content/homework?ccid=' + ccid);
}
/**
* 根据课程学习内容的id。获取考试信息只有学习内容是考试时才会有信息
* @param {Object} ccid
*/
const getExam = function(ccid) {
return ajax.post('/xboe/m/course/content/exam?ccid=' + ccid);
}
/**
* 根据课程学习内容的id。获取评估信息评估内容可以获取
* @param {Object} ccid
*/
const getAssess = function(ccid) {
return ajax.post('/xboe/m/course/content/assess?ccid=' + ccid);
}
/**
* 管理列表查询
* @param {Object} query
* pageIndex:第几页
* pageSize:每页多少条
* resOwner1:资源归属一级的id
resOwner2:资源归属二级的id
resOwner3:资源归属三级的id
types授课方式多个使用 - 分隔
scenes应用场景多个使用 - 分隔
publishtrue/false 是否发布,空值或不传就是全部
aid创建人 aid
sysCreateUser: 创建人姓名
keyword查询关键词
sysTypes系统的分类多级使用 - 分隔,注一期功能是分类的最后一级值,不支持多个的查询
orderField排序字段 id s
orderAsctrue/false 是否是正序,从小到大
status状态,多个使用 - 分隔 1代表待审核 5代表已审核 1 未提交 2 已提交 5 审核完成
type课程类型10微课21在线课(直播)20:在线课( 录播)30:面授课40:混合式,
name 课程名称
*/
const pageList = function(query) {
return ajax.post('/xboe/m/course/manage/pagelist', query);
}
/**计算待审核课程*/
const countWaitAudit = function() {
return ajax.get('/xboe/m/course/manage/wait-audit-num');
}
/**
* [已用courseAudit中的hrbpAuditList替换]
* 当前用户需要审核的课程列表
* @param {Object} query 同pageList
*/
const auditList = function(query) {
return ajax.post('/xboe/m/course/manage/audit-pagelist', query);
}
/**
* 【已移到courseAudit中】
* 教师需要审核的课程列表
*/
const teacherAuditList = function(query) {
return ajax.post('/xboe/m/course/audit/teacher-course', query);
}
/**
* 指定审核人,转审核人
* 点击“转审” 弹出教师查询窗口,查询教师,填写备注,提交,调用此接口
* @param {Object} data
* {courseId:课程id,teacherId:指定的审核人教师的id,teacherName:教师名称,remark:备注}
*/
const auditAppoint = function(data) {
return ajax.post('/xboe/m/course/audit/appoint', data);
}
/**
* 获取审核信息,上面教师点击审核课程时,用于查询,上面“转审”时,用户填写的备注信息
* @param {courseId:'课程id',teacherId:'可以不填写,系统会查询当前人'} data
*/
const getAuditInfo = function(data) {
return ajax.post('/xboe/m/course/audit/infos', data);
}
/**
* 管理员的课程审核处理
* @param {Object} query {id:课程id,title:课程的名称, Boolean pass 是否通过,remark 备注}
*/
const audit = function(data) {
return ajax.post('/xboe/m/course/manage/audit', data);
}
/**
* 审核记录列表,分页查询
*/
const auditPageRecords = function(data) {
return ajax.post('/xboe/m/course/audit/page-records', data);
}
/**
* 审核记录列表要卖课程id查询出审核列记录信息
* { courseId:必须}
*/
const auditCourseRecords = function(data) {
return ajax.post('/xboe/m/course/audit/course-records',data);
}
/**
* 管理员的课程发布,当前已经不再使用了
* @param {Object} query {ids:课程id,多个使用逗号分隔,title:课程的名称, Boolean pass 是否发布}
*/
const publish = function(data) {
return ajax.post('/xboe/m/course/manage/publish', data);
}
const auditAndPublish=function(data) {
return ajax.post('/xboe/m/course/manage/audit-publish', data);
}
/**
* 设置top
* @param {Object} query {ids:课程id,多个使用逗号分隔,title:课程的名称,Boolean top 是否置顶}
*/
const setTop = function(data) {
return ajax.post('/xboe/m/course/manage/top', data);
}
/**
* 管理员的设置启用停用
* @param {Object} query {ids:课程id,多个使用逗号分隔,title:课程的名称, Boolean enabled 是否启用}
*/
const setEnabled = function(data) {
return ajax.post('/xboe/m/course/manage/enabled', data);
}
/**
* 管理员的删除课程
* erasable 此值是课程信息带过来的,直接传就可以
* @param {Object} query {id:课程id,多个使用逗号分隔,Boolean erasable 是否物理删除,title:课程的名称, remark 备注}
*/
const del = function(data) {
return ajax.post('/xboe/m/course/manage/delete', data);
}
/*
详情
*/
const detailFew=function(id){
return ajax.get('/xboe/m/course/portal/detail-few?id=' + id);
}
/*
直接审核,教师提交审核
*/
const sumbits=function(data){
return ajax.post('/xboe/m/course/manage/sumbits',data);
}
/*
教师授课记录
*/
const teacherCourse=function(teacherId){
return ajax.get('/xboe/m/course/manage/teacher-course?teacherId='+teacherId);
}
/*
教师授课记录导出
@param teacherId 教师id
*/
const exportTeacherCourse=function(teacherId){
return ajax.post('/xboe/m/course/manage/export-teacher-course?teacherId='+teacherId)
}
/*
*待审核课程记录导出
* resOwner1:资源归属一级的id
resOwner2:资源归属二级的id
resOwner3:资源归属三级的id
types授课方式多个使用 - 分隔
scenes应用场景多个使用 - 分隔
publishtrue/false 是否发布,空值或不传就是全部
aid创建人 aid
sysCreateUser: 创建人姓名
keyword查询关键词
sysTypes系统的分类多级使用 - 分隔,注一期功能是分类的最后一级值,不支持多个的查询
orderField排序字段 id s
orderAsctrue/false 是否是正序,从小到大
status状态,多个使用 - 分隔 1代表待审核 5代表已审核 1 未提交 2 已提交 5 审核完成
type课程类型10微课21在线课(直播)20:在线课( 录播)30:面授课40:混合式,
name 课程名称
*/
const exportCourseAudit=function(query){
return ajax.post('/xboe/m/course/manage/exportCourseAudit',query);
}
/*
参数同上待审核课程记录导出
课程的导出和已审核的课程导出
*/
const exportCourse=function(query){
return ajax.post('/xboe/m/course/manage/exportCourse',query);
}
//判断受众id是否有关联
const queryCrowd=function(query){
return ajax.postJson('/xboe/m/course/manage/queryCrowd',query);
}
/**
* 二次查询
* @param{
* ids
* }
* */
const ids=function (data){
return ajax.postJson('/xboe/m/course/manage/ids',data);
}
const saveTip = function() {
return ajax.postJson('/xboe/m/course/manage/saveTip');
}
// ai播放器相关 - 批量AI设置
const benchAiSet=function(data){
return ajax.postJson('/xboe/m/course/manage/benchAiSet',data);
}
export default {
saveBase,
submitCourse,
revokeSubmit,
copyCourse,
findUpdateLogs,
getUpdateLog,
detail,
getDictIds,
saveContent,
pageList,
setEnabled,
del,
publish,
saveSection,
getHomework,
countWaitAudit,
auditList,
teacherAuditList,
auditAppoint,
getAuditInfo,
audit,
auditPageRecords,
auditCourseRecords,
auditAndPublish,
getAssess,
setTop,
delSection,
getExam,
delContent,
updateContentName,
updateContentOrders,
saveOnlyCourse,
isRedoName,
isCourseName,
detailFew,
sumbits,
teacherCourse,
exportTeacherCourse,
exportCourseAudit,
exportCourse,
queryCrowd,
ids,
saveTip,
benchAiSet,
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 504 B

View File

@@ -97,3 +97,29 @@
font-size: 14px;
border-radius: 4px;
}
// 已下架
.custom-takeout{
display: inline-block;
padding: 3px 13px;
border-radius: 20px;
font-size: 12px;
background: rgba(254, 249, 195, 1);
color: rgba(133, 77, 14, 1);
font-size: 12px;
font-weight: 500;
line-height: 17px;
letter-spacing: 0px;
}
// 已上架
.custom-putaway{
display: inline-block;
padding: 3px 13px;
border-radius: 20px;
font-size: 12px;
background: rgba(220, 252, 231, 1);
color: rgba(22, 101, 52, 1);
font-size: 12px;
font-weight: 500;
line-height: 17px;
letter-spacing: 0px;
}

View File

@@ -0,0 +1,423 @@
<template>
<div class="ai-script">
<!-- 搜索和语言选择区域 -->
<div class="search-container">
<el-input
v-model="searchKeyword"
placeholder="请输入关键词查找文稿内容"
class="search-input"
prefix-icon="el-icon-search"
@keyup.enter.native="searchContent"
@input="handleInputChange"
clearable
native-type="text"
/>
<div class="language-selector">
<span class="language-label">语言</span>
<el-select v-model="selectedLanguage" class="language-select" @change="changeLanguage" placeholder="请选择语言">
<el-option v-for="lang in selectableLang" :key="lang.srclang" :label="getSelectLabel(lang)" :value="lang.srclang"></el-option>
</el-select>
</div>
</div>
<!-- 内容展示区域 -->
<div class="content-container">
<!-- 动态渲染内容块 -->
<div v-for="(item, index) in contentList" :key="index" class="content-item" :class="{'active': currentTime >= item.start && currentTime <= item.end}">
<div class="timestamp">
<div class="timestamp-text">
<i class="el-icon-time"></i>
{{ formatTime(item.start) }}
</div>
</div>
<el-card class="content-text" @click.native="scrollToTime(item.start)">
<div v-html="item.highlightedContent || item.text"></div>
</el-card>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
props: {
// 视频链接对应的content Id
blobId: {
type: String,
default: ''
},
isDrag:{
type: Boolean,
default: true,
},
},
name: 'ai-script',
data() {
return {
searchKeyword: '',
selectedLanguage: 'zh-CN',
originalContentList: [],
contentList: [], // 用于显示的内容列表
isUserScrolling: false, // 用户是否正在滚动
userScrollTimeout: null // 滚动超时计时器
}
},
computed: {
...mapGetters([
'currentTime',
'selectableLang',
'duration'
]),
},
mounted: function() {
// 添加滚动事件监听,检测用户手动滚动
const container = document.querySelector('.content-container');
if (container) {
container.addEventListener('scroll', this.handleUserScroll);
}
},
beforeDestroy: function() {
// 清理事件监听和计时器
const container = document.querySelector('.content-container');
if (container) {
container.removeEventListener('scroll', this.handleUserScroll);
}
if (this.userScrollTimeout) {
clearTimeout(this.userScrollTimeout);
}
},
watch: {
// 监听currentTime变化自动滚动到当前激活项
currentTime: function(newTime) {
// 只有当用户没有手动滚动时才执行自动滚动
if (!this.isUserScrolling) {
this.$nextTick(function() {
const activeElement = document.querySelector('.content-item.active');
if (activeElement) {
// 获取内容容器
const container = document.querySelector('.content-container');
// 计算元素是否在可视区域内
const containerRect = container.getBoundingClientRect();
const elementRect = activeElement.getBoundingClientRect();
// 如果元素不在可视区域内,则滚动到可视区域
if (elementRect.top < containerRect.top || elementRect.bottom > containerRect.bottom) {
// 计算元素相对于容器的偏移量而不是使用scrollIntoView
// 这样只会滚动content-container内部不会影响页面滚动
// 计算元素相对于容器的位置
const elementOffsetTop = activeElement.offsetTop;
const containerScrollTop = container.scrollTop;
const containerHeight = container.clientHeight;
const elementHeight = activeElement.clientHeight;
// 计算目标滚动位置,使元素居中显示
// 考虑容器的内边距和元素本身的高度
let targetScrollTop = elementOffsetTop - (containerHeight / 2) + (elementHeight / 2);
// 确保目标滚动位置不会小于0
targetScrollTop = Math.max(0, targetScrollTop);
// 确保目标滚动位置不会导致元素超出容器底部
const maxScrollTop = container.scrollHeight - containerHeight;
targetScrollTop = Math.min(targetScrollTop, maxScrollTop);
// 使用requestAnimationFrame实现平滑滚动
const startScrollTop = containerScrollTop;
const distance = targetScrollTop - startScrollTop;
const duration = 300; // 滚动持续时间,毫秒
let startTime = null;
function animateScroll(currentTime) {
if (!startTime) startTime = currentTime;
const timeElapsed = currentTime - startTime;
container.scrollTo({
top: startScrollTop + distance - elementHeight - 120,
behavior: 'smooth'
});
if (timeElapsed < duration) {
requestAnimationFrame(animateScroll);
}
}
requestAnimationFrame(animateScroll);
}
}
});
}
}
},
created() {
// 初始化时根据语言选择显示内容
this.changeLanguage(this.selectedLanguage)
},
methods: {
// 动态获取选择框的标签
getSelectLabel(lang) {
if (lang.srclang == 'zh-CN') {
return lang.label;
}
return `${lang.name} (${lang.label})`;
},
formatTime (time) {
// 格式化时间为HH:MM:SS如01:00:00
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = Math.floor(time % 60);
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
},
// 跳转到指定时间点
scrollToTime(time) {
// console.log('scrollToTime', time , this.blobId, localStorage.getItem('videoProgressData'), this.duration)
if(!this.isDrag && this.duration){
var t = localStorage.getItem('videoProgressData')
var arr = t&&JSON.parse(t) || {}
if(arr[this.blobId] < time/this.duration || !arr[this.blobId]){
return
}
}
console.log('跳转到时间点:', time);
this.$emit('changeCurrentTime', time);
// 设置用户滚动状态,避免自动滚动干扰
this.isUserScrolling = true;
if (this.userScrollTimeout) {
clearTimeout(this.userScrollTimeout);
}
this.userScrollTimeout = setTimeout(() => {
this.isUserScrolling = false;
}, 3000);
},
// 处理用户滚动事件
handleUserScroll: function() {
this.isUserScrolling = true;
// 清除之前的计时器
if (this.userScrollTimeout) {
clearTimeout(this.userScrollTimeout);
}
// 设置新的计时器3秒后恢复自动滚动
this.userScrollTimeout = setTimeout(() => {
this.isUserScrolling = false;
}, 3000);
},
searchContent () {
// 搜索功能实现
if (!this.searchKeyword.trim()) {
// 如果搜索关键词为空,显示所有内容
this.contentList = this.originalContentList.map(item => ({ ...item }));
return;
}
const keyword = this.searchKeyword.trim();
// 过滤包含关键词的内容
const filteredList = this.originalContentList.filter(item =>
item.text.includes(keyword)
);
if (filteredList.length === 0) {
// 如果没有搜索到内容,显示提示
this.$message({
message: '未找到相关内容',
type: 'info'
});
this.contentList = this.originalContentList.map(item => ({ ...item }));
} else {
// 对搜索到的内容进行关键词高亮处理
this.contentList = filteredList.map(item => ({
...item,
highlightedContent: this.highlightKeyword(item.text, keyword)
}));
console.log(this.contentList)
}
},
highlightKeyword(content, keyword) {
// 对关键词进行转义,防止正则表达式特殊字符的影响
const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// 使用正则表达式全局匹配关键词并添加高亮标记
const regex = new RegExp(`(${escapedKeyword})`, 'gi');
return content.replace(regex, '<span style="color: rgba(6, 125, 255, 1); background: rgba(6, 125, 255, 0.1);">$1</span>');
},
changeLanguage (event) {
// this.selectedLanguage = event
this.selectableLang.forEach(item => {
if (item.srclang === event) {
console.log('当前语言:', item)
if (!item.originalContentList) {
try {
item.originalContentList = JSON.parse(item.subtitleData)
} catch (error) {
console.error('ai文稿格式有问题')
}
}
this.originalContentList = item.originalContentList || []
// 初始化时显示所有内容
this.contentList = this.originalContentList.map(item => ({ ...item }));
console.log('ai文稿数据', this.originalContentList)
}
})
console.log('切换语言:', event)
},
handleInputChange() {
// 当输入框内容变化时,如果为空则重置显示所有内容
if (!this.searchKeyword.trim()) {
this.contentList = this.originalContentList.map(item => ({ ...item }));
}
}
}
}
</script>
<style lang="scss" scoped>
.ai-script {
padding: 15px 0;
background-color: #fff;
border-radius: 8px;
}
.search-container {
display: flex;
align-items: center;
gap: 20px;
margin: 0 20px 15px 20px;
}
.search-box {
position: relative;
flex: 1;
max-width: 400px;
}
.search-input {
flex: 1;
}
:deep(.el-input__inner) {
border-radius: 20px;
border-color: #2688FF;
}
:deep(.el-input__inner:focus) {
border-color: #1a6fe0;
box-shadow: 0 0 0 2px rgba(38, 136, 255, 0.2);
}
:deep(.el-input__prefix) {
left: 15px;
}
:deep(.el-input__icon) {
color: #2688FF;
}
.language-selector {
display: flex;
align-items: center;
gap: 10px;
}
.language-label {
font-size: 14px;
color: #333;
}
.language-select {
width: 90px;
}
:deep(.el-select__inner) {
border-radius: 4px;
}
.content-container {
display: flex;
flex-direction: column;
gap: 20px;
max-height: 410px;
overflow-y: auto;
padding: 0 20px;
}
.content-item {
display: flex;
flex-direction: column;
gap: 7px;
}
.timestamp {
display: flex;
align-items: center;
font-size: 14px;
color: #666;
padding: 5px 0;
.timestamp-text{
display: flex;
align-items: center;
gap: 5px;
border-radius: 12px;
padding: 2px 12px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.3px;
}
}
:deep(.el-icon-time) {
color: #2688FF;
}
.content-text {
cursor: pointer;
line-height: 1.6;
font-size: 14px;
color: rgba(102, 102, 102, 1);
border-radius: 6px;
overflow: hidden;
background: rgba(250, 250, 250, 1);
line-height: 22px;
letter-spacing: 0.28px;
}
.active {
.timestamp-text{
color: rgba(6, 125, 255, 1);
background: rgba(6, 125, 255, 0.1);
}
.content-text{
border: 1px solid rgba(116, 182, 255, 1);
box-shadow: 0px 0px 7px 0px rgba(6, 125, 255, 0.24);
background: rgba(250, 250, 250, 1);
}
}
:deep(.el-card__body) {
padding: 15px;
}
:deep(.el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover) {
box-shadow: 0 2px 12px 0 rgba(38, 136, 255, 0.2);
}
/* 响应式设计 */
@media (max-width: 768px) {
.search-container {
flex-direction: column;
align-items: stretch;
}
.search-box {
max-width: none;
}
.language-selector {
justify-content: flex-end;
}
}
</style>

View File

@@ -208,6 +208,43 @@
placeholder="请尽量填写课程简介,用于列表中显示,可以让用户更容易了解课程信息">
</el-input>
</el-form-item>
<el-form-item label="AI设置">
<div style="margin-top: 7px;">
<div style="display: flex; align-items: center;gap: 5px;">
<el-switch v-model="courseInfo.aiSet" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiSetTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
<div v-show="courseInfo.aiSet==1" style="margin-left: -20px;">
<div style="display: flex; justify-content: space-between;;align-items: center;gap: 5px;margin: 10px 0;">
<div style="display: flex; align-items: center;gap: 5px;">
<span>AI摘要</span>
<el-switch v-model="courseInfo.aiAbstract" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiAbstractTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
<div style="display: flex; align-items: center;gap: 5px;">
<span>AI文稿</span>
<el-switch v-model="courseInfo.aiDraft" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiDraftTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
</div>
<div style="display: flex; align-items: center;gap: 5px;margin: 10px 0;margin-left: -30px;">
<span>AI翻译语种</span>
<el-select v-model="courseInfo.languageCode" placeholder="请选择" multiple filterable style="width: 240px;">
<el-option v-for="item in selectAllLang" :key="item.key" :label="item.label" :value="item.srclang"> </el-option>
</el-select>
<el-tooltip class="item" effect="dark" :content="aiTranslateTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="14">
<div @click="checkCourse"><weikeContent ref="weikeContent" :reset="weikeReset" :contents="contentInfo.list" :course="courseInfo" min-height="644px"></weikeContent></div>
@@ -390,6 +427,44 @@
placeholder="请尽量填写课程简介,用于列表中显示,可以让用户更容易了解课程信息">
</el-input>
</el-form-item>
<!-- ai播放器相关 -->
<el-form-item label="AI设置">
<div style="margin-top: 7px;">
<div style="display: flex; align-items: center;gap: 5px;">
<el-switch v-model="courseInfo.aiSet" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiSetTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
<div v-show="courseInfo.aiSet==1" style="margin-left: -20px;">
<div style="display: flex;align-items: center;gap: 80px;margin: 20px 0;">
<div style="display: flex; align-items: center;gap: 5px;">
<span>AI摘要</span>
<el-switch v-model="courseInfo.aiAbstract" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiAbstractTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
<div style="display: flex; align-items: center;gap: 5px;">
<span>AI文稿</span>
<el-switch v-model="courseInfo.aiDraft" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiDraftTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
</div>
<div style="display: flex; align-items: center;gap: 5px;margin: 20px 0;margin-left: -30px;">
<span>AI翻译语种</span>
<el-select v-model="courseInfo.languageCode" placeholder="请选择" multiple filterable style="flex:1">
<el-option v-for="item in selectAllLang" :key="item.key" :label="item.label" :value="item.srclang"> </el-option>
</el-select>
<el-tooltip class="item" effect="dark" :content="aiTranslateTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
</div>
</div>
</el-form-item>
<!-- v-if="!weike.onlyRequired" -->
<!-- <el-form-item label="课程描述">
<WxEditor v-model="courseInfo.overview" :minHeight="50"></WxEditor>
@@ -600,13 +675,22 @@ export default {
highlightStyle: {},
guidanceElements: [],
isFirstCreate: false, // 标记是否为首次创建
selectedOrg: {
orgId: null,
name: ''
},
aiSetTip: '是否将课程进行AI处理', //提示信息
aiAbstractTip: '一键提炼课程视频核心要点,助力学员课前高效掌握重点,快速筛选学习资源', // 提示信息
aiDraftTip: '分段展示视频内容并精准同步时间轴,实现视频进度与文稿双向定位,学习内容触手可及', //提示信息
aiTranslateTip: '智能转换视频字幕与语音为多语种,支持全球学员按需切换语言,打破学习边界', // 提示信息
};
},
created() {
this.getSceneData();
},
computed: {
...mapGetters(['resOwnerMap', 'sysTypeMap','userInfo','identity']),
// ai播放器相关
...mapGetters(['resOwnerMap', 'sysTypeMap','userInfo','identity', 'selectAllLang']),
catalogTree() {
let treeList = [];
let $this = this;
@@ -895,7 +979,7 @@ export default {
}
});
}
this.initAiData();
} else {
//console.log(editData,'editData');
this.weikeReset = editData.id;
@@ -1082,6 +1166,38 @@ export default {
this.courseCoverurl = '';
this.courseInfo.coverImg = '';
},
//获取字典信息
async getDictIds() {
console.log("--- 获取字典信息 1 = ", this.dicts);
try {
const response = await apiCourse.getDictIds(637, 1); // 确保返回 Promise
console.log("--- 获取字典信息 2 result= ", response);
if (response.status === 200) {
this.dicts = response.result.dicts; // 正确提取 dicts
console.log("--- 获取字典信息 3 = ", this.dicts);
}
} catch (error) {
console.error("获取字典信息失败:", error);
}
},
// ai播放器相关
// 初始化ai数据
initAiData() {
// 如果ai设置为空则给默认值 - 会看成新增状态
if(this.courseInfo.aiSet === null || this.courseInfo.aiSet === '' || this.courseInfo.aiSet === undefined){
this.courseInfo.isAddAI = 1; //暂时是否是新增
this.courseInfo.aiSet = 1;
this.courseInfo.aiAbstract = 1;
this.courseInfo.aiDraft = 1;
this.courseInfo.aiTranslate = 1;
this.courseInfo.languageStatus = 1;
this.courseInfo.languageCode = ['zh-CN', 'en-US'];
} else {
// 获取ai设置信息
this.courseInfo.isAddAI = 0;
}
},
//获取课程信息
async getDetail(id) {
this.curCourseId = id;
@@ -1106,6 +1222,12 @@ export default {
this.sectionInfo.list = result.sections;
this.courseTeachers = result.teachers; //课程的老师信息
this.isPermission = result.isPermission; //课程的老师信息
this.dicts = result.dicts; //课程的老师信息
console.log("--- 编辑查看 this.isPermission = ",this.isPermission)
console.log("--- 编辑查看 this.dicts = ",this.dicts)
// ai播放器相关
this.initAiData()
if(!this.courseInfo.orgId){
//根据课程创建者获取机构id
apiUser.getOrgSimpleByUserId(result.course.sysCreateAid).then(ors=>{

View File

@@ -119,7 +119,35 @@
</div>
<div class="player-time">{{ currentTimeFormat }} / {{ fullTimeFormat }}</div>
</div>
<!-- ai播放器相关 -->
<div class="player-controls-bottom-right">
<div v-if="isAiTranslate" class="player-controls-btn box-aiTranslate">
<div v-show="isSubtitle" class="player-controls-btn cursor-pointer btn-speed">
<span>{{!currentLang ? 'AI翻译' : currentLangLabel}}</span>
<div class="speed-control">
<ul class="speed-control-list">
<li
v-for="item in selectableLang"
:key="item.srclang"
@click="changeLang(item)"
:data-value="item.srclang"
class="one-line-ellipsis"
:title="item.label"
:class="{'current': currentLang === item.srclang}"
>{{ item.label }}</li>
</ul>
</div>
</div>
<div v-show="isSubtitle" style="margin-top: -3px;">|</div>
<div class="player-controls-btn" style="display: flex;gap: 0.3rem;align-items: center;">
<span>字幕</span>
<el-switch
@change="toggleSubtitle"
v-model="isSubtitle">
</el-switch>
</div>
<div style="margin-top: -3px;">|</div>
</div>
<div class="player-controls-btn cursor-pointer btn-speed">
<span>{{currentSpeed === 1 ? '倍速' : `${currentSpeed}x`}}</span>
<div class="speed-control">
@@ -224,6 +252,7 @@
import volumeBar from "@/components/VideoPlayer/volume-bar.vue";
import progressBar from "@/components/VideoPlayer/progress-bar.vue";
import playerBarrageScreen from "@/components/VideoPlayer/player-barrage-screen.vue";
import { mapGetters, mapMutations } from 'vuex';
export default {
name: "barrage-videoplayer",
@@ -301,12 +330,24 @@ export default {
fullTimeFormat: "00:00:00", // 视频总长度的文字
barrageTimelineStart: 0, // 弹幕时间轴的起始时间点(手动调整进度条触发更新)
isInit:false, // 是否初始化过
// ai播放器相关
isSubtitle: true, // 是否开启字幕
currentLangLabel:'', // 当前字幕语言
};
},
// ai播放器相关
computed: {
...mapGetters(['selectableLang','currentLang','courseInfo']),
isAiTranslate () {
return this.courseInfo?.aiSet == 1 && this.courseInfo?.aiTranslate == 1;
}
},
created() {
// ai播放器相关
this.SET_currentLang('');
},
mounted() {
console.log('---',this.isAiTranslate,this.courseInfo,'courseInfo');
this.videoDom = this.$refs.video;
this.videoDom.focus({preventScroll: true});
let speedValue=localStorage.getItem('boe_video_speed');
@@ -317,7 +358,8 @@ export default {
}
setInterval(() => {
console.log('当前状态:',this.currentProgress,this.isDrag,this.videoDom.currentTime , this.videoDom.duration)
this.SET_duration(this.videoDom.duration);
console.log('当前状态:',localStorage.getItem('videoProgressData'),this.currentProgress,this.isDrag,this.videoDom.currentTime , this.videoDom.duration)
// 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行
if(!this.isDrag){
var time = localStorage.getItem('videoProgressData')
@@ -372,6 +414,7 @@ export default {
//if()
//console.log(this.videoDom.readyState,'this.videoDom.readyState');
}, 1000);
// 视频dom监听器用于控制鼠标的显示
this.videoDom.addEventListener("mousemove", () => {
this.isCursorStatic = false;
@@ -411,6 +454,13 @@ export default {
// });
},
methods: {
// ai播放器相关
...mapMutations({
SET_currentLang: 'video/SET_currentLang',
SET_currentTime: 'video/SET_currentTime',
SET_selectableLang: 'video/SET_selectableLang',
SET_duration: 'video/SET_duration',
}),
//当视频由于需要缓冲下一帧而停止,解决一直计时的问题
onWaiting(){
console.log('触发了onWairing');
@@ -624,6 +674,8 @@ export default {
},
onAudioTimeUpdate() {
const currentTime = this.$refs.video.currentTime;
// ai播放器相关
this.SET_currentTime(currentTime)
this.$emit('onTimeUpdate', currentTime);
},
/**
@@ -641,9 +693,77 @@ export default {
this.$emit('onFullscreen',false);//全屏
}
}
},
/** ai播放器相关
* 切换字幕
*/
toggleSubtitle(value) {
if (this.videoDom && this.videoDom.textTracks && this.videoDom.textTracks.length >0) {
if (!value) {
// 关闭字幕
this.videoDom.textTracks[this.videoDom.textTracks.length - 1].mode = 'hidden';
} else {
// 打开字幕
this.videoDom.textTracks[this.videoDom.textTracks.length - 1].mode = 'showing';
}
}
},
/** ai播放器相关
* 切换字幕语言
*/
changeLang(item) {
this.SET_currentLang(item.srclang);
this.currentLangLabel = item.label;
console.log("changeLang",item);
// 先移除所有字幕轨道
Array.from(this.videoDom.querySelectorAll('track')).forEach(t => t.remove());
if(!item.vttContent){
console.log("字幕内容为空!")
return;
}
if(!item.srcUrl){
try{
const blob = new Blob([item.vttContent], { type: 'text/vtt' });
item.srcUrl = URL.createObjectURL(blob);
}catch(e){
console.log("字幕格式错误",e)
}
}
const trackEl = document.createElement('track');
trackEl.kind = 'subtitles';
trackEl.srclang = item.srclang;
trackEl.label = item.label;
trackEl.src = item.srcUrl;
trackEl.default = true; // 确保字幕默认启用
// 使用箭头函数保持this上下文
trackEl.addEventListener('load', () => {
console.log('字幕加载成功!');
// console.log('#########Track cues:', trackEl.track.cues);
});
trackEl.addEventListener('error', () => {
console.error('字幕加载失败!');
});
// 确保视频已加载到可添加轨道的状态
if (this.videoDom.readyState >= 1) {
this.videoDom.appendChild(trackEl);
this.videoDom.textTracks[this.videoDom.textTracks.length - 1].mode = 'showing';
} else {
this.videoDom.addEventListener('loadedmetadata', () => {
this.videoDom.appendChild(trackEl);
this.videoDom.textTracks[this.videoDom.textTracks.length - 1].mode = 'showing';
}, { once: true });
}
},
seekToTime(time) {
if (!this.videoDom) return;
this.videoDom.currentTime = time + 0.01;
this.isPlaying = true;
this.videoDom.play();
},
}
},
watch: {
currentVolume: function () {
@@ -668,9 +788,37 @@ export default {
// }
// },
src: function () {
// 当视频地址变更时,重载视频
// 当视频地址变更时,先重置字幕再重载视频
this.isPlaying = false;
// 重置字幕相关状态
this.SET_currentLang('');
this.currentLangLabel = '';
// 移除所有现有字幕轨道元素
Array.from(this.videoDom.querySelectorAll('track')).forEach(t => t.remove());
// 更彻底地清除字幕重置所有textTracks
Array.from(this.videoDom.textTracks).forEach(track => {
track.mode = 'hidden';
// 尝试移除所有cues浏览器支持的话
if (track.cues) {
while (track.cues.length > 0) {
track.cues.remove(0);
}
}
});
// 重载视频
this.videoDom.load();
this.isPlaying = false
// 如果有默认语言且支持AI翻译重新设置字幕
if (this.isAiTranslate && this.selectableLang && this.selectableLang.length > 0) {
// 找到默认语言或第一个可用语言
const defaultLang = this.selectableLang.find(lang => lang.srclang === 'zh-CN') || this.selectableLang[0];
if (defaultLang) {
this.changeLang(defaultLang);
}
}
},
},
};
@@ -907,6 +1055,12 @@ export default {
color: #fff;
margin-bottom: 0.5rem;
}
.box-aiTranslate{
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
@media (device-width: 100vw) {
.player-controls-btn .player-controls-icon {
/* height: 26px; */

View File

@@ -117,6 +117,8 @@ export const iframes=[
{title:'嵌入测试', path:'/iframe/index',hidden:false,component:'portal/iframe'},
{title:'课件管理', path:'/iframe/course/coursewares',hidden:false,component:'course/Courseware'},
{title:'课程管理', path:'/iframe/course/manages',hidden:false,component:'course/ManageList'},
{title:'ai摘要', path:'/iframe/course/aiAbstract',hidden:false,component:'course/aiSet/aiAbstract'},
{title:'ai翻译', path:'/iframe/course/aiTranslate',hidden:false,component:'course/aiSet/aiTranslate'},
{title:'考试试题管理', path:'/iframe/exam/questions',hidden:false,component:'exam/Question'},
{title:'查看答卷', path:'/iframe/exam/viewanswer',hidden:false,component:'exam/viewAnswer'},
{title:'考试试卷管理', path:'/iframe/exam/papers',hidden:false,component:'exam/TestPaper'},

View File

@@ -28,5 +28,12 @@ const getters = {
studyTaskCount:state => state.user.studyTaskCount,
praisesUnicom:state =>state.pdf.praisesUnicom,
favoritesUnicom:state =>state.pdf.favoritesUnicom,
// ai播放器相关
selectAllLang:state => state.video.selectAllLang,
selectableLang:state => state.video.selectableLang,
currentLang:state => state.video.currentLang,
currentTime:state => state.video.currentTime,
courseInfo:state => state.video.courseInfo,
duration:state => state.video.duration,
}
export default getters

View File

@@ -12,6 +12,7 @@ import resOwner from './modules/resOwner'
import majorType from './modules/majorType'
import orgDomain from './modules/orgDomain'
import pdf from './modules/pdf'
import video from './modules/video' // ai播放器相关
Vue.use(Vuex)
@@ -27,7 +28,8 @@ const store = new Vuex.Store({
resOwner,
majorType,
orgDomain,
pdf
pdf,
video
},
getters
})

171
src/store/modules/video.js Normal file
View File

@@ -0,0 +1,171 @@
// ai播放器相关
/**
*
selectAllLang: [
{
key: 'ZH_CN',
srclang: 'zh-CN',
label: '中文',
name: '中文',
},
{
key: 'EN_US',
srclang: 'en-US',
label: '英语',
name: 'English',
},
{
key: 'JA_JP',
srclang: 'ja-JP',
label: '日语',
name: '日本語',
},
{
key: 'KO_KR',
srclang: 'ko-KR',
label: '韩语',
name: '한국어',
},
{
key: 'FR_FR',
srclang: 'fr-FR',
label: '法语',
name: 'français',
},
{
key: 'DE_DE',
srclang: 'de-DE',
label: '德语',
name: 'Deutsch',
},
{
key: 'ES_ES',
srclang: 'es-ES',
label: '西班牙语',
name: 'español',
},
{
key: 'RU_RU',
srclang: 'ru-RU',
label: '俄语',
name: 'русский',
},
{
key: 'PT_BR',
srclang: 'pt-BR',
label: '葡萄牙语',
name: 'português',
},
{
key: 'IT_IT',
srclang: 'it-IT',
label: '意大利语',
name: 'italiano',
},
{
key: 'AR_SA',
srclang: 'ar-SA',
label: '阿拉伯语',
name: 'العربية',
},
{
key: 'TH_TH',
srclang: 'th-TH',
label: '泰语',
name: 'ไทย',
},
{
key: 'VI_VN',
srclang: 'vi-VN',
label: '越南语',
name: 'tiếng Việt',
},
{
key: 'ID_ID',
srclang: 'id-ID',
label: '印度尼西亚语',
name: 'Bahasa Indonesia',
},
{
key: 'HI_IN',
srclang: 'hi-IN',
label: '印地语',
name: 'हिन्दी',
}
], // 全部语言列表
*/
const state = {
selectAllLang: [
{
key: 'ZH_CN',
srclang: 'zh-CN',
label: '中文',
name: '中文',
},
{
key: 'EN_US',
srclang: 'en-US',
label: '英语',
name: 'English',
},
{
key: 'VI_VN',
srclang: 'vi-VN',
label: '越南语',
name: 'tiếng Việt',
},
{
key: 'ES_ES',
srclang: 'es-ES',
label: '西班牙语',
name: 'español',
},
], // 一期语言列表
selectableLang: [], // 可选语言列表+字幕信息
currentLang: '', // 当前选中语言
currentTime: -1, // 当前视频时间
courseInfo: {},
duration: 0, // 视频时长
}
const mutations = {
SET_currentLang: (state, lang) => {
state.currentLang = lang
},
SET_selectableLang: (state, list = []) => {
let selectableLang = []
list.forEach(item => {
let selectItem = state.selectAllLang.find(selectItem => selectItem.srclang === item.language)
if (selectItem) {
selectableLang.push({
...item,
...selectItem,
})
}
})
state.selectableLang = selectableLang
},
SET_currentTime: (state, time) => {
state.currentTime = time
},
SET_courseInfo: (state, info) => {
state.courseInfo = info
},
SET_duration: (state, duration) => {
state.duration = duration
},
}
const actions = {
}
export default {
namespaced: true,
state,
mutations,
actions
}

View File

@@ -60,101 +60,108 @@
</div>
<div style="width:390px">
<el-button type="primary" @click="searchData(true)" icon="el-icon-search" >搜索</el-button>
<el-button icon="el-icon-refresh-right" type="primary" style="margin-left:5px" @click="reset">重置</el-button>
<el-button icon="el-icon-refresh-right" type="primary" style="margin-left:5px" @click="reset">重置</el-button>
</div>
</div>
<el-row :gutter="20" style="margin-top:10px">
<el-col :span="4">
<!-- <el-button icon="el-icon-folder" type="primary" size="small">导出</el-button> -->
<el-button class="Create-coures" type="primary" @click="addNewCourse()" icon="el-icon-plus">新建课程</el-button>
</el-col >
<!-- ai播放器相关 -->
<el-col :span="24">
<!-- <el-button icon="el-icon-folder" type="primary" size="small">导出</el-button> -->
<el-button class="Create-coures" type="primary" @click="addNewCourse()" icon="el-icon-plus">新建课程</el-button>
<el-button type="primary" @click="setLanguage()" icon="el-icon-connection" :disabled="selectedCourses.length === 0">设置语种</el-button>
<el-button type="primary" @click="enableAI()" icon="el-icon-switch-button" :disabled="selectedCourses.length === 0">开启AI处理</el-button>
</el-col >
</el-row>
</div>
<div style="margin-right:30px;">
<el-table style="margin:10px 32px 10px 22px;" :data="pageData" border stripe>
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column v-if="forChoose" label="选择" width="80">
<template slot-scope="scope" v-if="scope.row.published">
<el-button type="default" size="mini" @click="handleChoose(scope.row)">选择</el-button>
</template>
</el-table-column>
<el-table-column label="名称" prop="name" width="200" show-overflow-tooltip>
<template slot-scope="scope">
<span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="内容分类" prop="sysType" sortable width="240px">
<template slot-scope="scope">
<span>{{sysTypeName(scope.row.sysType1)}}</span>
<span v-if="scope.row.sysType2 !=''">/{{sysTypeName(scope.row.sysType2)}}</span>
<span v-if="scope.row.sysType3 !=''">/{{sysTypeName(scope.row.sysType3)}}</span>
</template>
</el-table-column>
<el-table-column label="关键字" :show-overflow-tooltip="true" prop="name" width="200px">
<template slot-scope="scope">
{{ scope.row.keywords }}
</template>
</el-table-column>
<!-- <el-table-column label="资源归属" sortable prop="author" width="240px">
<template slot-scope="scope">
<span>{{resOwnerName(scope.row.resOwner1)}}</span>
<span v-if="scope.row.resOwner2 != ''">/{{resOwnerName(scope.row.resOwner2)}}</span>
<span v-if="scope.row.resOwner3 != ''">/{{resOwnerName(scope.row.resOwner3)}}</span>
</template>
</el-table-column> -->
<!-- <el-table-column label="授课方式" prop="type" width="120px">
<template slot-scope="scope">
{{ courseType(scope.row.type)}}
</template>
</el-table-column> -->
<el-table-column label="状态" prop="status" width="120px">
<template slot-scope="scope">
<!-- 1未提交 2.已提交 = 未审核 5 已审核 -->
<span v-if="scope.row.status == 1">未提交</span>
<span v-if="scope.row.status == 2">待审核</span>
<span v-if="scope.row.status == 5">已审核</span>
<span v-if="scope.row.status == 3">审核未通过</span>
</template>
</el-table-column>
<el-table-column label="是否发布" width="130px">
<template slot-scope="scope">
{{ scope.row.published == true ? '已发布' : '未发布' }}
</template>
</el-table-column>
<el-table-column label="创建人" prop="sysCreateBy"></el-table-column>
<el-table-column label="创建时间" prop="sysCreateTime" width="230px" show-overflow-tooltip></el-table-column>
<el-table-column label="是否停用" width="130px">
<template slot-scope="scope">
{{ scope.row.enabled == true ? '启用' : '停用' }}
</template>
</el-table-column>
<el-table-column label="是否置顶" width="130px">
<template slot-scope="scope">
{{ scope.row.isTop == true ? '置顶' : '未置顶' }}
</template>
</el-table-column>
<el-table-column label="操作" width="180px" fixed="right">
<template slot-scope="scope" class="btn-gl">
<!-- 20240621 修改scope.row.isPermission = fasle 时不展示操作按钮-->
<el-button type="text" size="mini" v-if="scope.row.isPermission && scope.row.status == 5 && !scope.row.published" @click="releaseData(scope.row)">发布</el-button>
<el-button v-if="scope.row.isPermission && pageManage && scope.row.published" @click="showStudent(scope.row)" type="text" size="mini">学员</el-button>
<el-button v-if="scope.row.isPermission && !forChoose && scope.row.published" @click="showManageStudy(scope.row)" type="text" size="mini">管理</el-button>
<el-button v-if="scope.row.isPermission && !forChoose && scope.row.status == 2" @click="withdraw(scope.row)" type="text" size="mini">撤回</el-button>
<el-button v-if="scope.row.isPermission && scope.row.status != 2" type="text" size="mini" @click="editCurriculum(scope.row)">编辑</el-button>
<el-button v-if="scope.row.isPermission && (scope.row.status != 2 && !scope.row.published) || scope.row.isPermission &&!scope.row.enabled" type="text" size="mini" @click="delItem(scope.row)">删除</el-button>
<el-dropdown v-if="scope.row.isPermission && scope.row.published" type="text" size="mini" style="margin-left:10px">
<el-button type="text" size="mini">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="copyCourse(scope.row)">复制</el-dropdown-item>
<el-dropdown-item v-if="scope.row.published" @click.native="isDisable(scope.row)">{{scope.row.enabled? '停用':'启用'}}</el-dropdown-item>
<el-dropdown-item v-if="scope.row.published" @click.native="showQrimage(scope.row)">二维码</el-dropdown-item><!--发布之后才可以查看二维码-->
<el-dropdown-item v-if="scope.row.published" @click.native="setTop(scope.row)">{{scope.row.isTop? '取消置顶':'置顶'}}</el-dropdown-item>
<!-- ai播放器相关 -->
<el-table style="margin:10px 32px 10px 22px;" :data="pageData" border stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column v-if="forChoose" label="选择" width="80">
<template slot-scope="scope" v-if="scope.row.published">
<el-button type="default" size="mini" @click="handleChoose(scope.row)">选择</el-button>
</template>
</el-table-column>
<el-table-column label="名称" prop="name" width="200" show-overflow-tooltip>
<template slot-scope="scope">
<span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="内容分类" prop="sysType" sortable width="240px">
<template slot-scope="scope">
<span>{{sysTypeName(scope.row.sysType1)}}</span>
<span v-if="scope.row.sysType2 !=''">/{{sysTypeName(scope.row.sysType2)}}</span>
<span v-if="scope.row.sysType3 !=''">/{{sysTypeName(scope.row.sysType3)}}</span>
</template>
</el-table-column>
<el-table-column label="关键字" :show-overflow-tooltip="true" prop="name" width="200px">
<template slot-scope="scope">
{{ scope.row.keywords }}
</template>
</el-table-column>
<!-- <el-table-column label="资源归属" sortable prop="author" width="240px">
<template slot-scope="scope">
<span>{{resOwnerName(scope.row.resOwner1)}}</span>
<span v-if="scope.row.resOwner2 != ''">/{{resOwnerName(scope.row.resOwner2)}}</span>
<span v-if="scope.row.resOwner3 != ''">/{{resOwnerName(scope.row.resOwner3)}}</span>
</template>
</el-table-column> -->
<!-- <el-table-column label="授课方式" prop="type" width="120px">
<template slot-scope="scope">
{{ courseType(scope.row.type)}}
</template>
</el-table-column> -->
<el-table-column label="状态" prop="status" width="120px">
<template slot-scope="scope">
<!-- 1未提交 2.已提交 = 未审核 5 已审核 -->
<span v-if="scope.row.status == 1">未提交</span>
<span v-if="scope.row.status == 2">审核</span>
<span v-if="scope.row.status == 5">已审核</span>
<span v-if="scope.row.status == 3">审核未通过</span>
</template>
</el-table-column>
<el-table-column label="是否发布" width="130px">
<template slot-scope="scope">
{{ scope.row.published == true ? '已发布' : '未发布' }}
</template>
</el-table-column>
<el-table-column label="创建人" prop="sysCreateBy"></el-table-column>
<el-table-column label="创建时间" prop="sysCreateTime" width="230px" show-overflow-tooltip></el-table-column>
<el-table-column label="是否停用" width="130px">
<template slot-scope="scope">
{{ scope.row.enabled == true ? '启用' : '停用' }}
</template>
</el-table-column>
<el-table-column label="是否置顶" width="130px">
<template slot-scope="scope">
{{ scope.row.isTop == true ? '置顶' : '未置顶' }}
</template>
</el-table-column>
<el-table-column label="操作" width="180px" fixed="right">
<template slot-scope="scope" class="btn-gl">
<!-- 20240621 修改scope.row.isPermission = fasle 时不展示操作按钮-->
<!-- ai播放器相关 -->
<el-button v-if="scope.row.isPermission && scope.row.status != 2" type="text" size="mini" @click="setAI(scope.row)">AI设置</el-button>
<el-button type="text" size="mini" v-if="scope.row.isPermission && scope.row.status == 5 && !scope.row.published" @click="releaseData(scope.row)">发布</el-button>
<el-button v-if="scope.row.isPermission && pageManage && scope.row.published" @click="showStudent(scope.row)" type="text" size="mini">学员</el-button>
<el-button v-if="scope.row.isPermission && !forChoose && scope.row.published" @click="showManageStudy(scope.row)" type="text" size="mini">管理</el-button>
<el-button v-if="scope.row.isPermission && !forChoose && scope.row.status == 2" @click="withdraw(scope.row)" type="text" size="mini">撤回</el-button>
<el-button v-if="scope.row.isPermission && scope.row.status != 2" type="text" size="mini" @click="editCurriculum(scope.row)">编辑</el-button>
<el-button v-if="scope.row.isPermission && (scope.row.status != 2 && !scope.row.published) || scope.row.isPermission &&!scope.row.enabled" type="text" size="mini" @click="delItem(scope.row)">删除</el-button>
<el-dropdown v-if="scope.row.isPermission && scope.row.published" type="text" size="mini" style="margin-left:10px">
<el-button type="text" size="mini">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="copyCourse(scope.row)">复制</el-dropdown-item>
<el-dropdown-item v-if="scope.row.published" @click.native="isDisable(scope.row)">{{scope.row.enabled? '停用':'启用'}}</el-dropdown-item>
<el-dropdown-item v-if="scope.row.published" @click.native="showQrimage(scope.row)">二维码</el-dropdown-item><!--发布之后才可以查看二维码-->
<el-dropdown-item v-if="scope.row.published" @click.native="setTop(scope.row)">{{scope.row.isTop? '取消置顶':'置顶'}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</div>
@@ -287,6 +294,236 @@
<div>
<course-form ref="courseForm" @submitSuccess="searchData" @close="searchData"></course-form>
</div>
<!-- ai播放器相关 -->
<!-- 设置语种弹框 -->
<el-dialog
title="AI翻译"
:visible.sync="languageSetting.dlgShow"
width="500px"
:close-on-click-modal="false"
>
<div style="margin-bottom: 20px;">
<div style="margin-bottom: 15px;">请选择课程所支持语种</div>
<el-select
v-model="languageSetting.selectedLanguages"
multiple
placeholder="请选择语种"
style="width: 100%;"
>
<el-option
v-for="lang in selectAllLang"
:key="lang.srclang"
:label="lang.label"
:value="lang.srclang"
></el-option>
</el-select>
</div>
<div style="color: #ff4d4f; font-size: 12px;">
仅支持对已开启AI处理的课程进行批量语种设置所选的课程中有{{languageSetting.aiSetNoNum}}个未开启AI处理的课程以上配置仅对{{languageSetting.aiSetNum}}个已开启AI处理的课程生效
</div>
<template #footer>
<el-button @click="languageSetting.dlgShow = false">取消</el-button>
<el-button type="primary" @click="confirmLanguageSetting">确认</el-button>
</template>
</el-dialog>
<!-- 开启AI处理弹框 -->
<el-dialog
title="开启AI处理"
:visible.sync="aiProcessSetting.dlgShow"
width="400px"
>
<div class="ai-process-dialog">
<!-- AI处理状态 -->
<div class="form-item">
<span class="form-label">
<el-tooltip class="item" effect="dark" :content="aiSetTip" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI处理
</span>
<span class="status-text">
{{ aiProcessSetting.aiSet === 1 ? '开启' : '关闭' }}
</span>
<el-switch
v-model="aiProcessSetting.aiSet"
:active-value="1"
:inactive-value="0"
></el-switch>
</div>
<div v-show="aiProcessSetting.aiSet === 1">
<!-- 是否生成AI摘要 -->
<div class="form-item">
<span class="form-label">
<el-tooltip class="item" effect="dark" :content="aiAbstractTip" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI摘要
</span>
<span class="status-text">
{{ aiProcessSetting.aiAbstract === 1 ? '开启' : '关闭' }}
</span>
<el-switch
v-model="aiProcessSetting.aiAbstract"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</div>
<!-- 是否生成AI文稿 -->
<div class="form-item">
<span class="form-label">
<el-tooltip class="item" effect="dark" :content="aiDraftTip" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI文稿
</span>
<span class="status-text">
{{ aiProcessSetting.aiDraft === 1 ? '开启' : '关闭' }}
</span>
<el-switch
v-model="aiProcessSetting.aiDraft"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</div>
<!-- 课程支持语种选择 -->
<div class="form-item" style="flex-flow: column;align-items: baseline;">
<span class="form-label">
<el-tooltip class="item" effect="dark" :content="aiTranslateTip" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI翻译语种
</span>
<el-select
v-model="aiProcessSetting.languageCode"
multiple
style="width: 100%;"
placeholder="请选择语种"
>
<el-option
v-for="lang in selectAllLang"
:key="lang.srclang"
:label="lang.label"
:value="lang.srclang"
></el-option>
</el-select>
</div>
</div>
<!-- 提示信息 -->
<div class="tips">
<span>已跳过{{aiProcessSetting.aiSetNum}}个已开启AI处理的课程仅更新剩余{{aiProcessSetting.aiSetNoNum}}</span>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="aiProcessSetting.dlgShow = false">取消</el-button>
<el-button type="primary" @click="confirmAiProcess">确认</el-button>
</span>
</el-dialog>
<!-- AI设置弹框 -->
<el-dialog
title="AI设置"
:visible.sync="aiSetting.dlgShow"
width="500px"
>
<div class="ai-setting-dialog">
<!-- AI功能状态 -->
<div class="form-item">
<span class="form-label">
<el-tooltip class="item" effect="dark" content="是否将课程进行AI处理" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI功能状态
</span>
<span class="status-text">
{{ aiSetting.aiSet === 1 ? '已开放' : '未开放' }}
</span>
<el-switch
v-model="aiSetting.aiSet"
:active-value="1"
:inactive-value="0"
></el-switch>
</div>
<div v-show="aiSetting.aiSet === 1">
<!-- AI摘要状态 -->
<div class="form-item">
<span class="form-label">AI摘要状态</span>
<span :class="aiSetting.aiAbstract === 1 ? 'custom-putaway' : 'custom-takeout'">
{{ aiSetting.aiAbstract === 1 ? '已上架' : '已下架' }}
</span>
<div class="action-buttons">
<el-button type="text" @click="changeAIKey('aiAbstract')">
{{ aiSetting.aiAbstract === 0 ? '上架' : '下架' }}
</el-button>
<el-button v-show="false" type="text" >编辑</el-button>
</div>
</div>
<!-- AI文稿状态 -->
<div class="form-item">
<span class="form-label">AI文稿状态</span>
<span :class="aiSetting.aiDraft === 1 ? 'custom-putaway' : 'custom-takeout'">
{{ aiSetting.aiDraft === 1 ? '已上架' : '已下架' }}
</span>
<div class="action-buttons">
<el-button type="text" @click="changeAIKey('aiDraft')">
{{ aiSetting.aiDraft === 0 ? '上架' : '下架' }}
</el-button>
</div>
</div>
<!-- AI翻译状态 -->
<div class="form-item">
<span class="form-label">AI翻译状态</span>
<span :class="aiSetting.aiTranslate === 1 ? 'custom-putaway' : 'custom-takeout'">
{{ aiSetting.aiTranslate === 1 ? '已上架' : '已下架' }}
</span>
<div class="action-buttons">
<el-button type="text" @click="changeAIKey('aiTranslate')">
{{ aiSetting.aiTranslate === 0 ? '上架' : '下架' }}
</el-button>
<el-button v-show="false" type="text" >编辑</el-button>
</div>
</div>
<!-- 支持语种 -->
<div class="form-item" style="align-items: flex-start;">
<span class="form-label" style="white-space: nowrap;">支持语种</span>
<div class="languages-list" v-show="false">
<div v-for="lang in aiSetting.languageCode" :key="lang" class="language-tag">
{{ getLanguageName(lang) }}
<span class="custom-takeout">已下架</span>
</div>
</div>
<el-select
v-model="aiSetting.languageCode"
multiple
style="width: 100%;"
placeholder="请选择语种"
>
<el-option
v-for="lang in selectAllLang"
:key="lang.srclang"
:label="lang.label"
:value="lang.srclang"
></el-option>
</el-select>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="aiSetting.dlgShow = false">取消</el-button>
<el-button type="primary" @click="confirmAISetting">确认</el-button>
</span>
</el-dialog>
</div>
</template>
@@ -299,7 +536,7 @@ import auditCourse2 from '@/components/Course/auditCourse2.vue';
import adminPage from '@/components/Administration/adminPage.vue';
import apiResowner from '../../api/modules/resowner.js';
import apiType from '../../api/modules/type.js'
import {courseType} from '../../utils/tools.js';
import {courseType, deepCopy} from '../../utils/tools.js';
import apiCourse from '../../api/modules/course.js';
// import {resOwnerIndexName,sysTypeIndexName} from '@/utils/type.js';
import { mapGetters,mapActions } from 'vuex';
@@ -307,8 +544,9 @@ import apiUserbasic from "@/api/boe/userbasic.js"
export default {
name: 'manageCourse',
components: {courseForm, manager, auditCourse1, auditCourse2,adminPage},
// ai播放器相关
computed: {
...mapGetters(['resOwnerMap','sysTypeMap','userInfo']),
...mapGetters(['resOwnerMap','sysTypeMap','userInfo', 'selectAllLang']),
},
data() {
return {
@@ -392,6 +630,32 @@ export default {
},
extendRefId:'',
extendRefType:'',
// ai播放器相关
selectedCourses: [], //已选课程
languageSetting: { // 设置语种弹框
dlgShow: false,
languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
},
aiProcessSetting: { // 开启AI处理弹框
dlgShow: false,
aiSet: 1,
aiAbstract: 1,
aiDraft: 1,
languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
},
aiSetting: { // AI设置弹框
dlgShow: false,
courseId: '',
aiSet: 1,
aiAbstract: 1, // 1:上架 0:下架
aiDraft: 1, // 1:上架 0:下架
aiTranslate: 1, // 1:上架 0:下架
languageCode: ['zh-CN', 'en-US', 'vi-VN'] // 支持的语种
},
aiSetTip: '是否将课程进行AI处理', //提示信息
aiAbstractTip: '一键提炼课程视频核心要点,助力学员课前高效掌握重点,快速筛选学习资源', // 提示信息
aiDraftTip: '分段展示视频内容并精准同步时间轴,实现视频进度与文稿双向定位,学习内容触手可及', //提示信息
aiTranslateTip: '智能转换视频字幕与语音为多语种,支持全球学员按需切换语言,打破学习边界', // 提示信息
};
},
mounted() {
@@ -426,6 +690,7 @@ export default {
},
methods: {
getAudiences(){
apiUserbasic.getInAudienceIds().then(res=>{
if (res.status == 200) {
@@ -449,6 +714,7 @@ export default {
inputOn() {
this.$forceUpdate();
},
// 置顶
setTop(row) {
let params = {
@@ -885,6 +1151,140 @@ export default {
saveNewCatalogZhang() {
this.catalogs.addNewZhang = false;
},
// ai播放器相关
getLanguageName(lang){
return this.selectAllLang.find(item => item.srclang === lang)?.label || '';
},
handleSelectionChange(val){
this.selectedCourses = val;
console.log(val);
},
// 获取选中课程的AI信息
getAIInfoByList(list = []) {
let selectNum = 0; // 选中的课程数量
let aiSetNum = 0; // 已设置AI的课程数量
let aiSetNoNum = 0; // 未设置AI的课程数量
list.forEach(item => {
if(item.aiSet === 1){
aiSetNum++;
}else{
aiSetNoNum++;
}
});
return {
selectNum,
aiSetNum,
aiSetNoNum
}
},
// AI设置
setAI(row) {
console.log('row', row);
this.aiSetting = {
dlgShow: true,
...row
};
},
changeAIKey(key) {
this.aiSetting[key] = this.aiSetting[key] === 1 ? 0 : 1;
},
// 确认AI设置
confirmAISetting() {
const item = deepCopy(this.aiSetting);
item.languageStatus = item.aiSet;
item.languageCode = item.languageCode || [];
if (!item.languageCode.includes('zh-CN')) {
item.languageCode.unshift('zh-CN'); // 默认添加中文 去重
}
this._benchAiSet([item], (res) => {
this.$message.success('AI设置保存成功');
this.aiSetting.dlgShow = false;
// 可以选择是否刷新列表数据
this.searchData();
}, (res) => {
this.$message.error('AI设置保存失败');
})
},
setLanguage() {
if (this.selectedCourses.length > 0) {
this.languageSetting = {...{
dlgShow: true,
languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
}, ...this.getAIInfoByList(this.selectedCourses)}
}
},
enableAI() {
// 开启AI处理按钮点击事件
if (this.selectedCourses.length > 0) {
this.aiProcessSetting = {...{
dlgShow: true,
aiSet: 1,
aiAbstract: 1,
aiDraft: 1,
languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
}, ...this.getAIInfoByList(this.selectedCourses)}
}
},
// 批量设置语种 - 确认
confirmLanguageSetting() {
const courseList = deepCopy(this.selectedCourses);
let languageCode = deepCopy(this.languageSetting.languageCode || []);
if (!languageCode.includes('zh-CN')) {
languageCode.unshift('zh-CN'); // 默认添加中文 去重
}
courseList.forEach(item => {
item.languageCode = languageCode;
item.aiTranslate = item.aiSet;
item.languageStatus = item.aiSet;
})
this._benchAiSet(courseList, (res) => {
this.$message.success('设置语种成功!');
this.languageSetting.dlgShow = false;
// 可以选择是否刷新列表数据
this.searchData();
}, (res) => {
this.$message.error('设置语种失败!');
})
},
// 批量开启AI处理 - 确认
confirmAiProcess() {
// 获取AI处理配置
let { aiSet, aiAbstract, aiDraft, languageCode } = this.aiProcessSetting;
const courseList = deepCopy(this.selectedCourses);
languageCode = languageCode || [];
if (!languageCode.includes('zh-CN')) {
languageCode.unshift('zh-CN'); // 默认添加中文 去重
}
courseList.forEach(item => {
item.aiSet = aiSet;
item.aiAbstract = aiAbstract;
item.aiDraft = aiDraft;
item.aiTranslate = aiSet;
item.languageStatus = aiSet;
item.languageCode = languageCode;
})
this._benchAiSet(courseList, (res) => {
this.$message.success('开启AI处理成功');
this.aiProcessSetting.dlgShow = false;
// 可以选择是否刷新列表数据
this.searchData();
}, (res) => {
this.$message.error('开启AI处理失败');
})
},
_benchAiSet(courseList, successCB, failCB) {
apiCourse.benchAiSet({courseList}).then(res => {
if(res.status === 200){
successCB && successCB(res);
}else{
failCB && failCB(res);
}
})
},
}
};
</script>
@@ -953,4 +1353,22 @@ export default {
.el-dialog__body {
overflow: hidden;
}
.form-item{
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.tips {
color: #f56c6c;
font-size: 12px;
margin: 10px 0;
line-height: 1.5;
}
.languages-list{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
</style>

View File

@@ -0,0 +1,245 @@
<template>
<div class="aiAbstract">
<div class="ai-left">
<div class="left-title">{{courseName}}</div>
<ul class="ai-list">
<li class="ai-item" v-for="(item, index) in videoList" @click="currentVideo = item" :class="{'active': currentVideo.id === item.id}" :key="index">
<div class="ai-item-title">{{item.name}}</div>
</li>
</ul>
</div>
<div class="ai-right">
<div class="right-title">
<h3>{{currentVideo.name}}</h3>
<div>
<el-button type="primary" @click="status = 1">下架本课程AI摘要</el-button>
</div>
</div>
<div class="ai-content">
<div class="videoBox">
<videoPlayer :src="testUrl" style="height: auto;"> </videoPlayer>
<div class="video-content">
<h4>视频摘要</h4>
<p>
{{currentVideo.aiAbstract}}
</p>
</div>
</div>
<div class="videoOperation">
<div class="opera-title">
<h4>课程摘要</h4>
<div class="opera-btn">
<el-button type="primary" plain round size="mini" @click="status = 2">重新生成</el-button>
<el-button type="primary" plain round size="mini" @click="status = 4">编辑</el-button>
<el-button plain round size="mini" @click="status = 3">取消</el-button>
</div>
</div>
<div class="opera-content" v-show="status != 4">
<span v-show="status == 1">{{ aiAbstract }}</span>
<p v-show="status == 2" style="color: rgba(207, 207, 207, 1);text-align: center;margin-top: 48%;">AI 摘要重新生成中过程可能耗时较长<br>无需在此等待哦</p>
<img v-show="status == 3" src="@/assets/images/course/generationFailed.png" alt="" width="150" height="159" style="display: flex;margin: 35% auto 0 auto;">
</div>
<el-input v-show="status == 4"
type="textarea"
placeholder="请输入内容"
autosize
v-model="aiAbstract">
</el-input>
</div>
</div>
</div>
</div>
</template>
<script>
import videoPlayer from "@/components/VideoPlayer/index.vue";
export default {
name: 'aiAbstract',
// ai播放器相关
components: {
videoPlayer
},
data() {
return {
courseName: '企业经营法则--课程单元',
videoList: [
{
id: 1,
name: '1. 开源节流1',
aiAbstract: '人工智能AI是让计算机模拟人类智能的技术核心包括机器学习、深度学习等。主要分为弱 AI专注特定任务和强 AI通用智能两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式实现预测和适应能力正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量确保对人类社会有益。'
},
{
id: 2,
name: '2. 企业经营法则总述',
aiAbstract: '本课程将介绍企业经营法则的总述,包括企业经营的基本原理、经营策略、经营模式等。'
},
{
id: 3,
name: '3. 企业经营法则总述',
aiAbstract: '本课程将介绍企业经营法则的总述,包括企业经营的基本原理、经营策略、经营模式等。'
},
{
id: 4,
name: '4. 企业经营法则总述',
aiAbstract: '本课程将介绍企业经营法则的总述,包括企业经营的基本原理、经营策略、经营模式等。'
},
],
testUrl: 'https://vjs.zencdn.net/v/oceans.mp4',
currentVideo: {},
aiAbstract: '人工智能AI是让计算机模拟人类智能的技术核心包括机器学习、深度学习等。主要分为弱 AI专注特定任务和强 AI通用智能两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式实现预测和适应能力正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量确保对人类社会有益。',
status: '1', // 1: 正常 2: 生成中 3: 错误 4: 编辑中
}
},
mounted() {
this.currentVideo = this.videoList[0];
},
methods: {}
};
</script>
<style lang="scss" scoped>
.aiAbstract{
height: 100%;
display: flex;
padding: 10px;
justify-content: space-between;
gap: 15px;
background: #f4f7fa;
.ai-left{
padding: 9px 10px;
width: 24%;
border-radius: 10px;
background: rgba(255, 255, 255, 1);
.left-title{
background: rgba(239, 244, 252, 1);
padding: 15px;
text-align: center;
color: rgba(75, 92, 118, 1);
font-family: Noto Sans SC;
font-size: 16px;
font-weight: 400;
line-height: 23px;
letter-spacing: 0px;
}
.ai-list{
margin: 0;
.ai-item{
cursor: pointer;
padding: 15px;
text-align: center;
color: rgba(75, 92, 118, 1);
font-family: Noto Sans SC;
font-size: 16px;
font-weight: 400;
line-height: 23px;
letter-spacing: 0px;
padding: 17px 31px;
border-bottom: 1px solid rgba(240, 240, 240, 1);
text-align: left;
&:hover{
background: rgba(240, 240, 240, 1);
}
&.active{
color: rgba(64, 158, 255, 1);
font-weight: 500;
}
}
}
}
.ai-right{
flex: 1;
display: flex;
flex-direction: column;
border-radius: 10px;
background: rgba(255, 255, 255, 1);
.right-title{
display: flex;
padding: 0 28px;
height: 76px;
border-bottom: 1px solid rgba(229, 231, 235, 1);
display: flex;
justify-content: space-between;
align-items: center;
h3{
color: rgba(17, 24, 39, 1);
font-family: Noto Sans SC;
font-size: 18px;
font-weight: 600;
line-height: 26px;
margin: 0;
}
}
.ai-content{
flex: 1;
padding: 24px 30px;
display: flex;
gap: 30px;
.videoBox{
width: 55%;
display: flex;
flex-direction: column;
gap: 24px;
.video-content{
flex: 1;
h4{
margin: 0 0 10px 0;
color: rgba(17, 24, 39, 1);
font-family: Noto Sans SC;
font-size: 16px;
font-weight: 500;
line-height: 23px;
}
p{
color: rgba(17, 24, 39, 1);
font-family: Noto Sans SC;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
.videoOperation{
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
.opera-title{
display: flex;
justify-content: space-between;
align-items: center;
h4{
margin: 0;
color: rgba(17, 24, 39, 1);
font-family: Noto Sans SC;
font-size: 16px;
font-weight: 500;
line-height: 23px;
}
.opera-btn{
display: flex;
}
}
.opera-content{
flex: 1;
border-radius: 7px;
background: rgba(249, 250, 251, 1);
padding: 15px;
color: rgba(17, 24, 39, 1);
font-family: Noto Sans SC;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
}
}
}
}
}
::v-deep .el-textarea{
flex: 1;
}
::v-deep .el-textarea__inner{
height: 100%!important;
}
</style>

View File

@@ -0,0 +1,388 @@
<template>
<div class="aiTranslate">
<div class="ai-left">
<div class="left-title">{{courseName}}</div>
<ul class="ai-list">
<li class="ai-item" v-for="(item, index) in videoList" @click="currentVideo = item" :class="{'active': currentVideo.id === item.id}" :key="index">
<div class="ai-item-title">{{item.name}}</div>
</li>
</ul>
</div>
<div class="ai-right">
<div class="right-title">
<h3>{{currentVideo.name}}</h3>
<div>
<el-button type="primary" @click="status = 1">下架本课程AI翻译</el-button>
</div>
</div>
<div class="ai-content">
<div class="videoBox">
<videoPlayer :src="testUrl" style="height: auto;"> </videoPlayer>
<div class="video-content">
<div class="select-lang">
<img src="@/assets/images/course/languageIcon.png" alt="" width="10" height="10">
<span>本课程支持语种</span>
<el-button type="primary" @click="setLanguage()" icon="el-icon-connection">设置语种</el-button>
</div>
<div class="lang-content">
<div class="lang-item" v-for="(item, index) in selectedLang" :key="index">
<span>{{ item.label }}</span>
<span :class="item.aiTranslate == 1 ? 'custom-putaway' : 'custom-takeout'">{{ item.aiTranslate == 1 ? '已上架' : '已下架' }}</span>
<el-button type="text" @click="item.aiTranslate = item.aiTranslate == 1 ? 0 : 1">{{ item.aiTranslate == 1 ? '下架' : '上架' }}</el-button>
</div>
</div>
</div>
</div>
<div class="videoOperation">
<div class="opera-title">
<span>目标语种</span>
<el-select v-model="value" placeholder="请选择目标语种" style="flex: 1;">
<el-option
v-for="item in selectAllLang"
:key="item.srclang"
:label="item.label"
:value="item.srclang"
>
</el-option>
</el-select>
<el-button type="primary" @click="status = 2">加载字幕</el-button>
</div>
<div class="opera-content">
<div class="bg-gray" v-show="status != 4">
<p v-show="status == 1" v-html="aiTranslate"></p>
<p v-show="status == 2" style="color: rgba(207, 207, 207, 1);text-align: center;margin-top: 48%;">AI 翻译重新生成中过程可能耗时较长<br>无需在此等待哦</p>
<img v-show="status == 3" src="@/assets/images/course/generationFailed.png" alt="" width="150" height="159" style="display: flex;margin: 35% auto 0 auto;">
<img v-show="status == 5" src="@/assets/images/course/selectLanguage.png" alt="" width="112" height="130" style="display: flex;margin: 35% auto 0 auto;">
</div>
<el-input v-show="status == 4"
type="textarea"
placeholder="请输入内容"
autosize
v-model="aiTranslate">
</el-input>
<div class="opera-btn">
<el-button v-show="status == 1" type="primary" plain round size="mini" @click="updateDialogVisible = true">重新生成</el-button>
<el-button v-show="status == 1" type="primary" plain round size="mini" @click="status = 4">编辑</el-button>
<el-button v-show="status == 4" plain round size="mini" @click="status = 1">取消</el-button>
<el-button v-show="status == 4" type="primary" plain round size="mini" @click="status = 1">确认</el-button>
</div>
</div>
</div>
</div>
</div>
<el-dialog
title="确认同步更新吗"
:visible.sync="updateDialogVisible"
width="420px"
style="border-radius: 10px;"
center>
<p style="text-align: center;">系统将根据当前最新中文内容重新生成其他语种的翻译您此前对翻译的修改将会丢失</p>
<span slot="footer" class="dialog-footer">
<el-button @click="updateDialogVisible = false"> </el-button>
<el-button style="margin-left: 60px;" type="primary" @click="updateDialogVisible = false">确认同步更新</el-button>
</span>
</el-dialog>
<el-dialog
title="AIf翻译"
:visible.sync="selectDialogVisible"
width="500px"
class="select-dialog">
<div class="select-dialog-content">
<p>请选择该课程所支持语种</p>
<el-select v-model="selectLang" placeholder="请选择目标语种" style="width: 100%;" multiple>
<el-option
v-for="item in selectAllLang"
:key="item.srclang"
:label="item.label"
:value="item.srclang"
>
</el-option>
</el-select>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="selectDialogVisible = false"> </el-button>
<el-button style="" type="primary" @click="selectDialogVisible = false"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import videoPlayer from "@/components/VideoPlayer/index.vue";
import { mapGetters } from 'vuex';
export default {
name: 'aiTranslate',
// ai播放器相关
components: {
videoPlayer
},
data() {
return {
courseName: '企业经营法则--课程单元',
videoList: [
{
id: 1,
name: '1. 开源节流1',
aiTranslate: '人工智能AI是让计算机模拟人类智能的技术核心包括机器学习、深度学习等。主要分为弱 AI专注特定任务和强 AI通用智能两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式实现预测和适应能力正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量确保对人类社会有益。'
},
{
id: 2,
name: '2. 企业经营法则总述',
aiTranslate: '本课程将介绍企业经营法则的总述,包括企业经营的基本原理、经营策略、经营模式等。'
},
{
id: 3,
name: '3. 企业经营法则总述',
aiTranslate: '本课程将介绍企业经营法则的总述,包括企业经营的基本原理、经营策略、经营模式等。'
},
{
id: 4,
name: '4. 企业经营法则总述',
aiTranslate: '本课程将介绍企业经营法则的总述,包括企业经营的基本原理、经营策略、经营模式等。'
},
],
testUrl: 'https://vjs.zencdn.net/v/oceans.mp4',
currentVideo: {},
aiTranslate: `
00:00:01/00:00:03
Hello everyone in the audience
00:00:03/00:00:05
today I want to share with you the topic of
00:00:05/00:00:09
"The Development History and Future Prospects of Computer Technology -
`,
status: '1', // 1: 正常 2: 生成中 3: 错误 4: 编辑中 5: 未选择语种
selectedLang: [
{
label: '英文',
srclang: 'en',
aiTranslate: 1,
},
{
label: '中文',
srclang: 'zh',
aiTranslate: 1,
},
{
label: '日文',
srclang: 'ja',
aiTranslate: 1,
},
{
label: '韩文',
srclang: 'ko',
aiTranslate: 1,
},
{
label: '法文',
srclang: 'fr',
aiTranslate: 0,
},
],
updateDialogVisible: false,
selectDialogVisible: false,
selectLang: [],
}
},
computed: {
...mapGetters(['selectAllLang']),
},
mounted() {
this.currentVideo = this.videoList[0];
},
methods: {
setLanguage(){
this.selectDialogVisible = true;
}
}
};
</script>
<style lang="scss" scoped>
.aiTranslate{
height: 100%;
display: flex;
padding: 10px;
justify-content: space-between;
gap: 15px;
background: #f4f7fa;
.ai-left{
padding: 9px 10px;
width: 24%;
border-radius: 10px;
background: rgba(255, 255, 255, 1);
.left-title{
background: rgba(239, 244, 252, 1);
padding: 15px;
text-align: center;
color: rgba(75, 92, 118, 1);
font-family: Noto Sans SC;
font-size: 16px;
font-weight: 400;
line-height: 23px;
letter-spacing: 0px;
}
.ai-list{
margin: 0;
.ai-item{
cursor: pointer;
padding: 15px;
text-align: center;
color: rgba(75, 92, 118, 1);
font-family: Noto Sans SC;
font-size: 16px;
font-weight: 400;
line-height: 23px;
letter-spacing: 0px;
padding: 17px 31px;
border-bottom: 1px solid rgba(240, 240, 240, 1);
text-align: left;
&:hover{
background: rgba(240, 240, 240, 1);
}
&.active{
color: rgba(64, 158, 255, 1);
font-weight: 500;
}
}
}
}
.ai-right{
flex: 1;
display: flex;
flex-direction: column;
border-radius: 10px;
background: rgba(255, 255, 255, 1);
.right-title{
display: flex;
padding: 0 28px;
height: 76px;
border-bottom: 1px solid rgba(229, 231, 235, 1);
display: flex;
justify-content: space-between;
align-items: center;
h3{
color: rgba(17, 24, 39, 1);
font-family: Noto Sans SC;
font-size: 18px;
font-weight: 600;
line-height: 26px;
margin: 0;
}
}
.ai-content{
flex: 1;
padding: 24px 30px;
display: flex;
gap: 30px;
.videoBox{
width: 55%;
display: flex;
flex-direction: column;
gap: 24px;
.video-content{
flex: 1;
.select-lang{
display: flex;
align-items: center;
gap: 7px;
color: rgba(107, 114, 128, 1);
font-family: Noto Sans SC;
font-size: 12px;
font-weight: 400;
line-height: 17px;
}
.lang-content{
display: flex;
margin-top: 25px;
align-items: center;
gap: 25px 60px;
flex-wrap: wrap;
.lang-item{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
color: rgba(96, 98, 102, 1);
font-family: Noto Sans SC;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
}
.videoOperation{
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
.opera-title{
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
>span{
color: rgba(75, 92, 118, 1);
font-family: Noto Sans SC;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
.opera-content{
position: relative;
flex: 1;
color: rgba(17, 24, 39, 1);
font-family: Noto Sans SC;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
white-space: pre-wrap;
.bg-gray{
border-radius: 7px;
background: rgba(249, 250, 251, 1);
height: 100%;
padding: 15px;
}
.opera-btn{
position: absolute;
top: 16px;
right: 20px;
}
}
}
}
}
}
::v-deep .el-textarea{
height: 100%!important;
}
::v-deep .el-textarea__inner{
height: 100%!important;
}
::v-deep .el-dialog {
border-radius: 10px;
}
.select-dialog{
::v-deep .el-dialog__header{
border-bottom: 1px solid rgba(229, 231, 235, 1);
}
.select-dialog-content{
p{
color: rgba(17, 24, 39, 1);
font-family: Noto Sans SC;
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-bottom: 20px;
}
}
}
</style>

View File

@@ -203,8 +203,25 @@
<div class="couresstartTime">
<span v-if="cinfo.type == 30 && cinfo.startTime">开课时间{{ cinfo.startTime }}</span>
</div>
<div class="course-info">
<!-- ai播放器相关 -->
<div class="course-info" style="align-items: center;">
<el-popover
placement="top-start"
:width="cinfo.summaryContent && cinfo.summaryContent.length > 200 ? '402' : '253'"
trigger="hover"
popper-class="course-popover"
>
<div class="course-popover-content">
<h4>课程摘要</h4>
<div v-if="cinfo.summaryContent" class="course-popover-content-text" >{{ cinfo.summaryContent }}</div>
<div v-else class="course-popover-noContent" >
<img src="../../../assets/images/course/noData.png" alt="">
<span>暂无数据</span>
</div>
</div>
<!-- <img slot="reference" src="../../../assets/images/course/courseAbstract.png" alt="摘要" style="width: 94px;height: 44px;margin-left: -10px;"> -->
<img v-show="cinfo.aiAbstract == 1" slot="reference" src="../../../assets/images/course/courseAbstract.png" alt="摘要" style="width: 94px;height: 44px;margin-left: -10px;">
</el-popover>
<div class="course-info-user" style="max-width: 100px;" v-if="cinfo.teacher">
<el-tooltip :content="cinfo.teacher" placement="bottom" effect="light">
<span class="course-info-author">{{ cinfo.teacher }}</span>
@@ -214,13 +231,13 @@
<span class="course-info-studys">{{ formatNum(cinfo.studies) }}人学习</span>
</div>
<div class="course-info-score">
<div style="display: flex;">
<div style="display: flex; align-items: center;">
<interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false"
:praises="false" :shares="false" :views="false"></interactBar>
<div v-if="cinfo.score">
<span class="course-score-value">{{ toScore(cinfo.score) }}</span>
<span class="course-score-value" style="white-space: nowrap;">{{ toScore(cinfo.score) }}</span>
</div>
<div v-else class="course-score-no">未评分</div>
<div v-else class="course-score-no" style="white-space: nowrap;">未评分</div>
</div>
</div>
</div>
@@ -2655,3 +2672,43 @@ a.custom2 {
}
}
</style>
<!-- ai播放器相关 -->
<style lang="scss">
.course-popover{
border-radius: 12px;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12);
.course-popover-content{
h4{
margin: 0 0 7px 0;
font-size: 14px;
font-weight: 500;
line-height: 17px;
letter-spacing: 0.3px;
color: rgba(0, 0, 0, 1);
}
.course-popover-content-text{
font-size: 12px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.26px;
color: rgba(102, 102, 102, 1);
}
.course-popover-noContent{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: rgba(0, 0, 0, 0.34);
font-size: 12px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0.26px;
padding-bottom: 20px;
img{
width: 96px;
height: 50px;
}
}
}
}
</style>

View File

@@ -373,6 +373,30 @@
></i
>我的笔记
</div>
<!-- ai播放器相关 开发阶段先放开 v-if="courseInfo.aiDraft == 1" -->
<div
@click="heartabthree"
v-if="courseInfo.aiDraft == 1 && contentData.contentType == 10"
:class="tab == 3 ? 'control-tab-active' : ' '"
style="position: relative"
>
<i
class="el-icon-document"
style="margin-right: 9px; margin-left: 9px"
></i
>ai文稿
<img
src="@/assets/images/course/wengaoTip.png"
alt=""
style="
position: absolute;
top: -3px;
right: -14px;
width: 15px;
height: 14px;
"
/>
</div>
</div>
<!-- 课程单元 -->
<div class="course-units" v-if="tab == 1">
@@ -625,6 +649,11 @@
:score="courseInfo.score"
></my-note>
</div>
<!-- ai播放器相关 -->
<!-- ai文稿 -->
<div class="ai-script" v-if="contentData.contentType == 10 && tab == 3">
<ai-script ref="aiscript" :blobId="blobId" :isDrag="curriculumData.isDrag" @changeCurrentTime="changeCurrentTime"></ai-script>
</div>
</div>
</div>
<div class="course-infobox">
@@ -637,6 +666,16 @@
>
内容简介<span class=""></span>
</div>
<!-- ai播放器相关 -->
<div
@click="coutab(4)"
v-if="courseInfo.aiAbstract == 1"
style="position: relative;"
:class="courestab == 4 ? 'course-info-tab-active' : ''"
>
AI摘要<span class=""></span>
<img style="position: absolute;top: -18px;right: -23px;width: 36px;height: 24px;" src="@/assets/images/course/courseNew.png" alt="">
</div>
<div
@click="coutab(2)"
:class="courestab == 2 ? 'course-info-tab-active' : ''"
@@ -709,6 +748,15 @@
></note-comments>
</div>
</div>
<!-- ai播放器相关 -->
<div
v-show="courestab == 4"
style="padding-left: 17px; padding-top: 20px;background-color: #fff;"
>
<div style="padding: 30px;line-height: 24px;letter-spacing: 0.3px;color: rgba(102, 102, 102, 1);">
{{ courseInfo.summaryContent || '' }}
</div>
</div>
</div>
<div class="course-teacher">
<div class="cteacher-top">
@@ -799,7 +847,8 @@
</div>
</template>
<script>
import { mapGetters } from "vuex";
// ai播放器相关
import { mapGetters, mapMutations } from "vuex";
import followButton from "@/components/Follow/button.vue";
import portalHeader from "@/components/PortalHeader.vue";
import portalFooter from "@/components/PortalFooter.vue";
@@ -836,6 +885,8 @@ import exam from "@/components/Course/exam";
import homework from "@/components/Course/homework";
import assess from "@/components/Course/assess";
import myNote from "../../components/Course/myNote.vue";
// ai播放器相关
import aiScript from "../../components/Course/aiScript.vue";
import apiFollow from "@/api/phase2/userfollow.js";
import apiMessage from "@/api/system/message.js";
// import Vue from 'vue';
@@ -855,6 +906,7 @@ export default {
audioPlayer,
videoPlayer,
myNote,
aiScript,
noteComments,
portalFooter,
followButton,
@@ -968,7 +1020,8 @@ export default {
this.loadData();
},
computed: {
...mapGetters(["userInfo"]),
// ai播放器相关
...mapGetters(["userInfo", 'selectableLang']),
catalogTree() {
let treeList = [];
this.completed = [];
@@ -1004,6 +1057,16 @@ export default {
},
},
methods: {
// ai播放器相关
// 处理从AI文稿组件传递过来的时间跳转事件
changeCurrentTime(time) {
console.log(time,'time')
this.$refs.myVideoPlayer && this.$refs.myVideoPlayer.seekToTime(time);
},
...mapMutations({
SET_selectableLang: 'video/SET_selectableLang',
SET_courseInfo: 'video/SET_courseInfo',
}),
handleOpen(key, path) {
if (this.isFalse) {
this.defaultOpeneds = [key];
@@ -1165,6 +1228,10 @@ export default {
this.curriculumData.url = r.content;
}
this.$refs.mynote.showVideoTimeBtn(true);
// ai播放器相关 - 视频类型加载ai相关功能
if (r.contentType == 10) {
this.handleAIVideo(r.boeaiSubtitleRspList, r);
}
this.createPlayUrl(r.contentRefId, this.curriculumData.url);
} else if (r.contentType == 40) {
// if (r.content != '' && r.content.indexOf('.pdf') == -1) {
@@ -1327,6 +1394,16 @@ export default {
localStorage.setItem("videoProgressData", JSON.stringify(arr));
}
},
// ai播放器相关 - 视频处理
handleAIVideo(list = [], r) {
console.log('触发了-----------list', list);
this.SET_selectableLang(list);
this.SET_courseInfo(this.courseInfo);
if (this.courseInfo.aiSet && this.courseInfo.aiAbstract == 1 && this.courseInfo.summaryContent) {
this.coutab(4);
}
console.log("ai处理", this.selectableLang);
},
isShowTime() {
if (this.isContentTypeTwo != this.contentData.contentType) {
return;
@@ -2290,6 +2367,10 @@ export default {
heartabtwo() {
this.tab = 2;
},
// ai播放器相关
heartabthree() {
this.tab = 3;
},
handleAudioTimeUpdate(currentTime) {
// if(this.contentStudysLength.length == 0){
let params = {