299 lines
8.7 KiB
JavaScript
299 lines
8.7 KiB
JavaScript
/**
|
||
* 学习监控工具类
|
||
* 实现屏幕截图和上传功能
|
||
*/
|
||
import request from './request.js'
|
||
|
||
class Monitor {
|
||
constructor() {
|
||
this.screenshotTimer = null
|
||
this.uploadQueue = [] // 上传队列
|
||
this.isUploading = false
|
||
this.interval = 30000 // 默认30秒
|
||
this.currentCourseId = null
|
||
this.isEnabled = false
|
||
}
|
||
|
||
/**
|
||
* 启动监控
|
||
* @param {Number} courseId 课程ID（可选）
|
||
* @param {Number} interval 截图间隔（毫秒，默认30秒）
|
||
*/
|
||
start(courseId = null, interval = 30000) {
|
||
if (this.isEnabled) {
|
||
console.log('监控已启动')
|
||
return
|
||
}
|
||
|
||
this.currentCourseId = courseId
|
||
this.interval = interval
|
||
this.isEnabled = true
|
||
|
||
console.log('启动学习监控，间隔：', interval / 1000, '秒')
|
||
|
||
// 立即执行一次
|
||
this.captureAndUpload()
|
||
|
||
// 定时执行
|
||
this.screenshotTimer = setInterval(() => {
|
||
if (this.isEnabled) {
|
||
this.captureAndUpload()
|
||
}
|
||
}, this.interval)
|
||
}
|
||
|
||
/**
|
||
* 停止监控
|
||
*/
|
||
stop() {
|
||
this.isEnabled = false
|
||
if (this.screenshotTimer) {
|
||
clearInterval(this.screenshotTimer)
|
||
this.screenshotTimer = null
|
||
}
|
||
console.log('学习监控已停止')
|
||
}
|
||
|
||
/**
|
||
* 设置当前课程ID
|
||
*/
|
||
setCourseId(courseId) {
|
||
this.currentCourseId = courseId
|
||
}
|
||
|
||
/**
|
||
* 截图并上传
|
||
*/
|
||
async captureAndUpload() {
|
||
try {
|
||
// 检查网络状态
|
||
const networkType = await this.getNetworkType()
|
||
if (networkType === 'none') {
|
||
console.log('网络未连接，跳过截图上传')
|
||
return
|
||
}
|
||
|
||
// 截图
|
||
const screenshotPath = await this.captureScreenshot()
|
||
if (!screenshotPath) {
|
||
console.log('截图失败')
|
||
return
|
||
}
|
||
|
||
// 添加到上传队列
|
||
this.uploadQueue.push({
|
||
filePath: screenshotPath,
|
||
courseId: this.currentCourseId,
|
||
timestamp: Date.now()
|
||
})
|
||
|
||
// 处理上传队列
|
||
this.processUploadQueue()
|
||
} catch (error) {
|
||
console.error('截图上传失败:', error)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 截图
|
||
*/
|
||
captureScreenshot() {
|
||
return new Promise((resolve, reject) => {
|
||
// #ifdef APP-PLUS
|
||
// App环境：使用plus API
|
||
this.captureScreenshotApp(resolve, reject)
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
// H5环境：使用html2canvas或简化方案
|
||
this.captureScreenshotH5(resolve, reject)
|
||
// #endif
|
||
|
||
// #ifndef H5 || APP-PLUS
|
||
// 其他平台：暂不支持或使用降级方案
|
||
console.warn('当前平台不支持截图功能，跳过截图')
|
||
reject(new Error('当前平台不支持截图功能'))
|
||
// #endif
|
||
})
|
||
}
|
||
|
||
/**
|
||
* App环境截图（推荐）
|
||
*/
|
||
captureScreenshotApp(resolve, reject) {
|
||
// #ifdef APP-PLUS
|
||
try {
|
||
// 使用plus.screen.capture截图
|
||
if (typeof plus !== 'undefined' && plus.screen) {
|
||
plus.screen.capture((bitmap) => {
|
||
// 保存为临时文件
|
||
const timestamp = Date.now()
|
||
const filePath = `_doc/screenshot_${timestamp}.png`
|
||
|
||
bitmap.save(filePath, (success) => {
|
||
resolve(filePath)
|
||
}, (error) => {
|
||
console.error('保存截图失败:', error)
|
||
reject(error)
|
||
})
|
||
}, (error) => {
|
||
console.error('截图失败:', error)
|
||
reject(error)
|
||
})
|
||
} else {
|
||
// 降级方案：提示用户
|
||
console.warn('plus.screen不可用，跳过截图')
|
||
reject(new Error('截图功能不可用'))
|
||
}
|
||
} catch (error) {
|
||
console.error('截图异常:', error)
|
||
reject(error)
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef APP-PLUS
|
||
reject(new Error('App环境不可用'))
|
||
// #endif
|
||
}
|
||
|
||
/**
|
||
* H5环境截图（简化方案）
|
||
* 注意：H5环境截图功能有限，主要用于开发测试
|
||
*/
|
||
captureScreenshotH5(resolve, reject) {
|
||
// #ifdef H5
|
||
try {
|
||
// H5环境可以使用html2canvas库，但这里使用简单的canvas方式
|
||
// 注意：H5环境截图功能有限，建议在App环境中使用
|
||
const canvas = document.createElement('canvas')
|
||
const ctx = canvas.getContext('2d')
|
||
canvas.width = window.innerWidth
|
||
canvas.height = window.innerHeight
|
||
|
||
// 绘制当前页面内容（简化版，实际需要更复杂的实现）
|
||
ctx.fillStyle = '#fff'
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||
ctx.fillStyle = '#000'
|
||
ctx.font = '16px Arial'
|
||
ctx.fillText('学习监控截图', 20, 40)
|
||
ctx.fillText(new Date().toLocaleString(), 20, 60)
|
||
ctx.fillText('H5环境截图功能有限', 20, 80)
|
||
|
||
// 转换为图片
|
||
canvas.toBlob((blob) => {
|
||
if (typeof URL !== 'undefined' && URL.createObjectURL) {
|
||
const filePath = URL.createObjectURL(blob)
|
||
resolve(filePath)
|
||
} else {
|
||
// Fallback: convert blob to data URL
|
||
const reader = new FileReader()
|
||
reader.onloadend = () => {
|
||
resolve(reader.result)
|
||
}
|
||
reader.onerror = (error) => {
|
||
reject(error)
|
||
}
|
||
reader.readAsDataURL(blob)
|
||
}
|
||
}, 'image/png', 0.8)
|
||
} catch (error) {
|
||
console.error('H5截图失败:', error)
|
||
reject(error)
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
reject(new Error('H5环境不可用'))
|
||
// #endif
|
||
}
|
||
|
||
/**
|
||
* 获取网络状态
|
||
*/
|
||
getNetworkType() {
|
||
return new Promise((resolve) => {
|
||
uni.getNetworkType({
|
||
success: (res) => {
|
||
resolve(res.networkType)
|
||
},
|
||
fail: () => {
|
||
resolve('unknown')
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 处理上传队列
|
||
*/
|
||
async processUploadQueue() {
|
||
if (this.isUploading || this.uploadQueue.length === 0) {
|
||
return
|
||
}
|
||
|
||
this.isUploading = true
|
||
|
||
while (this.uploadQueue.length > 0) {
|
||
const item = this.uploadQueue.shift()
|
||
try {
|
||
await this.uploadScreenshot(item.filePath, item.courseId)
|
||
console.log('截图上传成功')
|
||
} catch (error) {
|
||
console.error('截图上传失败:', error)
|
||
// 上传失败，重新加入队列（最多重试3次）
|
||
if (item.retryCount === undefined) {
|
||
item.retryCount = 0
|
||
}
|
||
if (item.retryCount < 3) {
|
||
item.retryCount++
|
||
this.uploadQueue.push(item)
|
||
}
|
||
}
|
||
}
|
||
|
||
this.isUploading = false
|
||
}
|
||
|
||
/**
|
||
* 上传截图
|
||
*/
|
||
async uploadScreenshot(filePath, courseId = null) {
|
||
const formData = {}
|
||
if (courseId) {
|
||
formData.courseId = courseId
|
||
}
|
||
|
||
return await request.upload('/study/monitor/screenshot', filePath, formData, {
|
||
name: 'file'
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 手动截图上传（用于测试）
|
||
*/
|
||
async manualCapture() {
|
||
try {
|
||
const screenshotPath = await this.captureScreenshot()
|
||
if (screenshotPath) {
|
||
await this.uploadScreenshot(screenshotPath, this.currentCourseId)
|
||
uni.showToast({
|
||
title: '截图上传成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: '截图失败',
|
||
icon: 'none'
|
||
})
|
||
console.error('手动截图失败:', error)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 创建单例
|
||
const monitor = new Monitor()
|
||
|
||
export default monitor
|
||
|