193 lines
5.9 KiB
JavaScript
193 lines
5.9 KiB
JavaScript
|
|
let form, layer;
|
|||
|
|
let user = getUser();
|
|||
|
|
let dataObj = {};
|
|||
|
|
let seconds = 0;
|
|||
|
|
let studyTime = 10;
|
|||
|
|
let isPaused = false;
|
|||
|
|
let timer;
|
|||
|
|
let fileSuffix = 'pdf';
|
|||
|
|
function setParams(params) {
|
|||
|
|
dataObj = JSON.parse(params);
|
|||
|
|
if(dataObj.studyStatus === '0'){
|
|||
|
|
$('#finishStatus').html('未完成');
|
|||
|
|
}else{
|
|||
|
|
$('#finishStatus').html('已完成').css({ 'color': 'green' });
|
|||
|
|
}
|
|||
|
|
getFileParameter();
|
|||
|
|
layui.use(['form', 'layer'], function () {
|
|||
|
|
form = layui.form;
|
|||
|
|
layer = layui.layer;
|
|||
|
|
})
|
|||
|
|
$('#foucs-btn').focus();;
|
|||
|
|
var fileExt = (dataObj.fileUrlNew || dataObj.fileUrl).split('.').pop().toLowerCase();
|
|||
|
|
if (fileExt === 'pdf') { // pdf 预览
|
|||
|
|
sessionStorage.setItem("fileUrlNew", dataObj.fileUrlNew || dataObj.fileUrl);
|
|||
|
|
$('#indexIframe').css({ 'display': 'block' });
|
|||
|
|
let href = '../../pdfjs/web/viewer2.html'
|
|||
|
|
$('#indexIframe').attr('src', href)
|
|||
|
|
} else if (fileExt === 'mp4') {
|
|||
|
|
let videoUrl = photoUrl + dataObj.fileUrl + '?token=' + token;
|
|||
|
|
$('#video').css({ 'display': 'block' }).append('<source src="' + videoUrl + '" type="video/mp4">');
|
|||
|
|
fileSuffix = 'mp4';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const $timeElement = $("#time");
|
|||
|
|
const $statusElement = $("#finishStatus");
|
|||
|
|
function updateTimer() {
|
|||
|
|
if (isPaused) return;
|
|||
|
|
seconds++;
|
|||
|
|
// 格式化时间 HH:MM:SS
|
|||
|
|
const hours = Math.floor(seconds / 3600);
|
|||
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|||
|
|
const secs = seconds % 60;
|
|||
|
|
|
|||
|
|
$timeElement.text(
|
|||
|
|
`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
|||
|
|
);
|
|||
|
|
// 超过10秒时更新状态
|
|||
|
|
if (seconds >= studyTime && dataObj.studyStatus === '0') {
|
|||
|
|
$statusElement.css({ 'color': 'green' }).text("已完成");
|
|||
|
|
}
|
|||
|
|
// 每秒更新一次
|
|||
|
|
timer = setTimeout(updateTimer, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 启动计时器
|
|||
|
|
updateTimer();
|
|||
|
|
|
|||
|
|
// 暂停计时器的方法
|
|||
|
|
function pauseTimer() {
|
|||
|
|
isPaused = true;
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 继续计时器的方法
|
|||
|
|
function resumeTimer() {
|
|||
|
|
if (isPaused) {
|
|||
|
|
isPaused = false;
|
|||
|
|
updateTimer();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function finshStudy() {
|
|||
|
|
pauseTimer();
|
|||
|
|
if(fileSuffix === 'mp4'){
|
|||
|
|
togglePlayPause();
|
|||
|
|
}
|
|||
|
|
let title = '',flag = false;
|
|||
|
|
if(dataObj.studyStatus === '0'){
|
|||
|
|
title = (seconds >= studyTime) ? '确定要结束学习吗?':'您未完成学习,学习时长不会被记录,确定要结束学习吗?'
|
|||
|
|
flag = (seconds >= studyTime) ? true:false;
|
|||
|
|
}else{
|
|||
|
|
title = '确定要结束学习吗?';
|
|||
|
|
flag = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
layer.confirm(title, {
|
|||
|
|
btn: ['确定', '取消'],
|
|||
|
|
cancel: function (index) { // 点击右上角 × 关闭按钮的回调
|
|||
|
|
layer.close(index); // 关闭弹窗
|
|||
|
|
if (isPaused) { // 如果计时器是暂停状态,恢复计时
|
|||
|
|
resumeTimer();
|
|||
|
|
}
|
|||
|
|
togglePlayPause();
|
|||
|
|
}
|
|||
|
|
}, function (index) {
|
|||
|
|
layer.close(index); // 关闭弹窗
|
|||
|
|
if(flag){
|
|||
|
|
updateStudyDetails();
|
|||
|
|
}else{
|
|||
|
|
closePage();
|
|||
|
|
}
|
|||
|
|
}, function (index) {
|
|||
|
|
// 点击取消按钮的回调
|
|||
|
|
layer.close(index);
|
|||
|
|
if (isPaused) {
|
|||
|
|
resumeTimer();
|
|||
|
|
}
|
|||
|
|
togglePlayPause();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function updateStudyDetails(){
|
|||
|
|
let loadingMsg = layer.msg('正在保存学习记录,请稍等...', { icon: 16, shade: 0.01, time: '0' });
|
|||
|
|
let url = dataUrl + "proteam/pot/studyTask/updateStudyDetails";
|
|||
|
|
let params = { studyId: dataObj.studyId ,studyPeopleId:dataObj.studyPeopleId,id:dataObj.id};
|
|||
|
|
ajaxRequest2(url, "POST", params, true, function (result) {
|
|||
|
|
layer.close(loadingMsg); // 关闭提示层
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
parent.layer.msg(result.msg, { icon: 1 })
|
|||
|
|
closePage(1);
|
|||
|
|
} else {
|
|||
|
|
layer.msg(result.msg, { icon: 2 })
|
|||
|
|
}
|
|||
|
|
}, function (xhr) {
|
|||
|
|
layer.close(loadingMsg); // 关闭提示层
|
|||
|
|
error(xhr)
|
|||
|
|
}, null, token);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function togglePlayPause() {
|
|||
|
|
const video = document.getElementById("video");
|
|||
|
|
if (video.paused) {
|
|||
|
|
video.play(); // 如果暂停,就播放
|
|||
|
|
} else {
|
|||
|
|
video.pause(); // 如果正在播放,就暂停
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(document).on("keydown", function (e) {
|
|||
|
|
// 禁用 F5 刷新
|
|||
|
|
if (e.key === "F5" || e.keyCode === 116) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
layer.msg("禁止刷新页面", { icon: 5 });
|
|||
|
|
}
|
|||
|
|
// 禁用 Ctrl + R 刷新(Windows/Linux)
|
|||
|
|
if ((e.ctrlKey || e.metaKey) && e.key === "r") {
|
|||
|
|
e.preventDefault();
|
|||
|
|
layer.msg("禁止刷新页面", { icon: 5 });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).on("contextmenu", function (e) {
|
|||
|
|
e.preventDefault(); // 禁用右键菜单
|
|||
|
|
layer.msg("禁止右键操作", { icon: 5 });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 检测用户是否切换标签页或最小化窗口
|
|||
|
|
document.addEventListener("visibilitychange", function () {
|
|||
|
|
if (document.hidden) {
|
|||
|
|
e.preventDefault(); // 禁用右键菜单
|
|||
|
|
layer.msg("请勿切换窗口!", { icon: 5 });
|
|||
|
|
// 可以强制跳回页面(可选)
|
|||
|
|
window.focus();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 获取学习任务相关配置参数
|
|||
|
|
function getFileParameter() {
|
|||
|
|
let url = dataUrl + "proteam/pot/studyTask/getFileParameter";
|
|||
|
|
let params = {};
|
|||
|
|
ajaxRequest2(url, "POST", params, false, function (result) {
|
|||
|
|
console.log(result);
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
if (result.data.studyTime) {
|
|||
|
|
studyTime = parseInt(result.data.studyTime);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, function (xhr) {
|
|||
|
|
layer.close(loadingMsg); // 关闭提示层
|
|||
|
|
error(xhr)
|
|||
|
|
}, null, token);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭页面
|
|||
|
|
function closePage(type) {
|
|||
|
|
let index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引
|
|||
|
|
parent.layer.close(index); //再执行关闭
|
|||
|
|
if (type === 1) {
|
|||
|
|
parent.query();
|
|||
|
|
}
|
|||
|
|
}
|