Compare commits
No commits in common. "4ad59a8b4ed13fdebe054e2f9c28254cc2fdca3e" and "3de2ddb094b2f0e71a520e817a5d49b0e7cd8d69" have entirely different histories.
4ad59a8b4e
...
3de2ddb094
|
@ -92,8 +92,6 @@
|
||||||
"tinycolor2": "^1.6.0",
|
"tinycolor2": "^1.6.0",
|
||||||
"tinymce": "6.8.3",
|
"tinymce": "6.8.3",
|
||||||
"tippy.js": "^6.3.7",
|
"tippy.js": "^6.3.7",
|
||||||
"v-viewer": "^3.0.11",
|
|
||||||
"viewerjs": "^1.11.7",
|
|
||||||
"vite-plugin-electron": "^0.28.8",
|
"vite-plugin-electron": "^0.28.8",
|
||||||
"vue": "^3.4.34",
|
"vue": "^3.4.34",
|
||||||
"vue-cropper": "1.0.3",
|
"vue-cropper": "1.0.3",
|
||||||
|
|
|
@ -4,51 +4,21 @@
|
||||||
|
|
||||||
import ChatWs from '@/plugins/socket' // 聊天socket
|
import ChatWs from '@/plugins/socket' // 聊天socket
|
||||||
import { sessionStore } from '@/utils/store' // electron-store 状态管理
|
import { sessionStore } from '@/utils/store' // electron-store 状态管理
|
||||||
import { useClasscourseStore } from '../store'
|
|
||||||
import * as API_classcourse from '@/api/teaching/classcourse' // 后端api
|
import * as API_classcourse from '@/api/teaching/classcourse' // 后端api
|
||||||
import { MsgEnum } from './types'
|
|
||||||
// import msgUtils from '@/plugins/modal' // 消息工具
|
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const classcourse = sessionStore.get('curr.classcourse') // 课堂信息
|
const classcourse = sessionStore.get('curr.classcourse') // 课堂信息
|
||||||
const courseId = classcourse?.id // 课堂id
|
|
||||||
const timgroupid = classcourse?.timgroupid // 群组id
|
const timgroupid = classcourse?.timgroupid // 群组id
|
||||||
const classcourseStore = useClasscourseStore() // 课堂信息-状态管理
|
|
||||||
if (!ChatWs.ws) ChatWs.init()
|
if (!ChatWs.ws) ChatWs.init()
|
||||||
// 开课消息
|
|
||||||
const startCourse = async() => {
|
|
||||||
// await API_classcourse.updateClasscourse({ id: classcourse.id, status: 'open' })
|
|
||||||
ChatWs.sendMsg('open', {id: courseId})
|
|
||||||
return Promise.resolve()
|
|
||||||
}
|
|
||||||
// 下课消息
|
// 下课消息
|
||||||
const exitCourse = async() => {
|
const exitCourse = async() => {
|
||||||
if(!timgroupid) throw new Error('未获取到群组ID')
|
if(!timgroupid) throw new Error('未获取到群组ID')
|
||||||
await API_classcourse.updateClasscourse({ id: courseId, status: 'closed' })
|
await API_classcourse.updateClasscourse({ id: classcourse.id, status: 'closed' })
|
||||||
return ChatWs.closedCourse(timgroupid)
|
return ChatWs.closedCourse(timgroupid)
|
||||||
}
|
}
|
||||||
// 翻页消息
|
|
||||||
const slideFlapping = (msg:object) => {
|
|
||||||
return new Promise(async (resolve, reject) => {
|
|
||||||
const isWs = !!ChatWs.ws && ChatWs.ws.readyState === 1 // 是否有socket连接
|
|
||||||
if(!timgroupid) return reject('未获取到群组ID')
|
|
||||||
else if(!isWs) return reject('信异常,请重试!')
|
|
||||||
const {current: paging, animationSteps: cartoonTimes} = msg || {}
|
|
||||||
const head = MsgEnum.HEADS.MSG_slideFlapping
|
|
||||||
ChatWs.sendMsg(head, msg) // 发送消息
|
|
||||||
API_classcourse.setPaging({ id: courseId, paging, cartoonTimes})
|
|
||||||
// 更新本地缓存
|
|
||||||
sessionStore.set('curr.classcourse.paging', paging)
|
|
||||||
sessionStore.set('curr.classcourse.cartoonTimes', cartoonTimes)
|
|
||||||
classcourseStore.classcourse.paging = paging
|
|
||||||
classcourseStore.classcourse.cartoonTimes = cartoonTimes
|
|
||||||
return resolve(true)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return {
|
return {
|
||||||
groupid: timgroupid,
|
|
||||||
classcourse,
|
|
||||||
exitCourse,
|
exitCourse,
|
||||||
slideFlapping,
|
classcourse,
|
||||||
|
groupid: timgroupid,
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -14,7 +14,6 @@ const slidesStore = useStore.useSlidesStore() // 幻灯片-状态管理
|
||||||
const screenStore = useStore.useScreenStore() // 全屏-状态管理
|
const screenStore = useStore.useScreenStore() // 全屏-状态管理
|
||||||
const classcourseStore = useStore.useClasscourseStore() // 课堂信息-状态管理
|
const classcourseStore = useStore.useClasscourseStore() // 课堂信息-状态管理
|
||||||
const classcourse = sessionStore.get('curr.classcourse') // 课堂信息
|
const classcourse = sessionStore.get('curr.classcourse') // 课堂信息
|
||||||
const isPublic = sessionStore.get('curr.isPublic') // 是否公屏开课
|
|
||||||
|
|
||||||
export class Classcourse {
|
export class Classcourse {
|
||||||
msgObj:ElMessageBox = null // 提示消息对象
|
msgObj:ElMessageBox = null // 提示消息对象
|
||||||
|
@ -37,13 +36,8 @@ export class Classcourse {
|
||||||
// 如果课堂信息有值,则连接socket
|
// 如果课堂信息有值,则连接socket
|
||||||
if (isCourse) {
|
if (isCourse) {
|
||||||
// 连接socket
|
// 连接socket
|
||||||
|
if (!ChatWs.ws) ChatWs.init()
|
||||||
ChatWs.id = classcourse.timgroupid // 群组id
|
ChatWs.id = classcourse.timgroupid // 群组id
|
||||||
if (!ChatWs.ws) {
|
|
||||||
ChatWs.init().then(_ => {
|
|
||||||
isPublic && ChatWs.sendMsg('open', {id: classcourse.id})
|
|
||||||
// isPublic && console.log('socket-开课消息-已发送')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.classcourse = classcourse // 课堂信息
|
this.classcourse = classcourse // 课堂信息
|
||||||
this.id = classcourse.id // 课堂id
|
this.id = classcourse.id // 课堂id
|
||||||
// 如果课堂信息有paging,则更新当前页码
|
// 如果课堂信息有paging,则更新当前页码
|
||||||
|
@ -52,7 +46,7 @@ export class Classcourse {
|
||||||
// 如果课堂信息有paging,则更新动画播放状态
|
// 如果课堂信息有paging,则更新动画播放状态
|
||||||
const isAnim = !!cartoonTimes || cartoonTimes === 0
|
const isAnim = !!cartoonTimes || cartoonTimes === 0
|
||||||
if (isPaging) slidesStore.updateSlideIndex(paging)
|
if (isPaging) slidesStore.updateSlideIndex(paging)
|
||||||
if (isAnim) slidesStore.updateAnimationIndex(cartoonTimes)
|
if (isAnim) slidesStore.updateAnimationIndex(cartoonTimes+1)
|
||||||
// 课堂信息-状态管理
|
// 课堂信息-状态管理
|
||||||
classcourseStore.setClasscourse(classcourse)
|
classcourseStore.setClasscourse(classcourse)
|
||||||
// 待上课提示
|
// 待上课提示
|
||||||
|
|
|
@ -124,8 +124,6 @@ export class MsgEnum {
|
||||||
MSG_classlecturePagesrc : 'classlecturePagesrc',
|
MSG_classlecturePagesrc : 'classlecturePagesrc',
|
||||||
/** @desc: 课堂作业|活动 */
|
/** @desc: 课堂作业|活动 */
|
||||||
MSG_homework : 'HOMEWORK',
|
MSG_homework : 'HOMEWORK',
|
||||||
/** @desc: 公屏 - 课堂作业|活动 */
|
|
||||||
MSG_pushSreen_work : 'pushSreen_work',
|
|
||||||
/** @desc: 点赞 */
|
/** @desc: 点赞 */
|
||||||
MSG_dz : 'dz',
|
MSG_dz : 'dz',
|
||||||
/** @desc: 疑惑 */
|
/** @desc: 疑惑 */
|
||||||
|
|
|
@ -23,7 +23,7 @@ export default () => {
|
||||||
const classcourseStore = store.useClasscourseStore() // 课堂信息-状态管理
|
const classcourseStore = store.useClasscourseStore() // 课堂信息-状态管理
|
||||||
const resource = sessionStore.get('curr.resource') // apt 资源
|
const resource = sessionStore.get('curr.resource') // apt 资源
|
||||||
const smarttalk = sessionStore.get('curr.smarttalk') // 备课资源
|
const smarttalk = sessionStore.get('curr.smarttalk') // 备课资源
|
||||||
const { execNext, turnPrevSlide } = useExecPlay(false) // 不加载钩子
|
const { execNext, turnPrevSlide } = useExecPlay()
|
||||||
// 监听幻灯片内容变化
|
// 监听幻灯片内容变化
|
||||||
watch(() => slidesStore.slides, (newVal, oldVal) => {
|
watch(() => slidesStore.slides, (newVal, oldVal) => {
|
||||||
PPTApi.updateSlides(newVal, oldVal) // 更新幻灯片内容
|
PPTApi.updateSlides(newVal, oldVal) // 更新幻灯片内容
|
||||||
|
@ -98,21 +98,14 @@ export default () => {
|
||||||
break
|
break
|
||||||
case MsgEnum.HEADS.MSG_slideFlapping: // 幻灯片翻页
|
case MsgEnum.HEADS.MSG_slideFlapping: // 幻灯片翻页
|
||||||
const slideIndex = content?.current || 0
|
const slideIndex = content?.current || 0
|
||||||
const type = content?.animation // 上下动作
|
const type = content?.animation
|
||||||
const steps = content?.animationSteps // 动画步骤
|
|
||||||
if (type === 'Nextsteps') execNext(true) // 下一步-异步动画
|
if (type === 'Nextsteps') execNext(true) // 下一步-异步动画
|
||||||
else if (type === 'Previoustep') turnPrevSlide() // 上一步清空-动画
|
else if (type === 'Previoustep') turnPrevSlide() // 上一步清空-动画
|
||||||
else slidesStore.updateSlideIndex(slideIndex) // 更新幻灯片下标
|
else slidesStore.updateSlideIndex(slideIndex) // 更新幻灯片下标
|
||||||
// 更新本地缓存
|
|
||||||
sessionStore.set('curr.classcourse.paging', slideIndex)
|
|
||||||
sessionStore.set('curr.classcourse.cartoonTimes', steps)
|
|
||||||
classcourseStore.classcourse.paging = slideIndex
|
|
||||||
classcourseStore.classcourse.cartoonTimes = steps
|
|
||||||
break
|
break
|
||||||
// case MsgEnum.HEADS.MSG_homework: // 作业|活动-布置 不处理
|
case MsgEnum.HEADS.MSG_homework: // 作业|活动-布置
|
||||||
case MsgEnum.HEADS.MSG_pushSreen_work: // 打开-作业|活动
|
if (!content.classWorkId) return
|
||||||
if (!content.id) return
|
Homework.showHomework(content.classWorkId)
|
||||||
Homework.showHomework(content.id)
|
|
||||||
break
|
break
|
||||||
case MsgEnum.HEADS.MSG_closed: // 下课:
|
case MsgEnum.HEADS.MSG_closed: // 下课:
|
||||||
close()
|
close()
|
||||||
|
|
|
@ -6,13 +6,8 @@ import { KEYS } from '../../../configs/hotkey'
|
||||||
import { ANIMATION_CLASS_PREFIX } from '../../../configs/animation'
|
import { ANIMATION_CLASS_PREFIX } from '../../../configs/animation'
|
||||||
import message from '../../../utils/message'
|
import message from '../../../utils/message'
|
||||||
import emitter from '@/utils/mitt';
|
import emitter from '@/utils/mitt';
|
||||||
import Chat from '../../../api/chat' // 聊天封装
|
|
||||||
// import ChatWs from '@/plugins/socket' // 聊天socket
|
|
||||||
// import { MsgEnum } from '../../../api/types' // 消息枚举
|
|
||||||
|
|
||||||
export default (isLoader?: boolean = true) => {
|
export default () => {
|
||||||
// isLoader 是否执行 onMounted, onUnmounted
|
|
||||||
const chatApi = Chat()
|
|
||||||
const slidesStore = useSlidesStore()
|
const slidesStore = useSlidesStore()
|
||||||
const classcourseStore = useClasscourseStore() // 课堂信息-状态管理
|
const classcourseStore = useClasscourseStore() // 课堂信息-状态管理
|
||||||
const { slides, slideIndex, formatedAnimations, animationIndex } = storeToRefs(slidesStore)
|
const { slides, slideIndex, formatedAnimations, animationIndex } = storeToRefs(slidesStore)
|
||||||
|
@ -76,15 +71,14 @@ export default (isLoader?: boolean = true) => {
|
||||||
elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
|
elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (isLoader) { // 加载相关钩子
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const firstAnimations = formatedAnimations.value[0]
|
const firstAnimations = formatedAnimations.value[0]
|
||||||
if (firstAnimations && firstAnimations.animations.length) {
|
if (firstAnimations && firstAnimations.animations.length) {
|
||||||
const autoExecFirstAnimations = firstAnimations.animations.every(item => item.trigger === 'auto' || item.trigger === 'meantime')
|
const autoExecFirstAnimations = firstAnimations.animations.every(item => item.trigger === 'auto' || item.trigger === 'meantime')
|
||||||
if (autoExecFirstAnimations) runAnimation()
|
if (autoExecFirstAnimations) runAnimation()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
|
||||||
|
|
||||||
// 撤销元素动画,除了将索引前移外,还需要清除动画状态
|
// 撤销元素动画,除了将索引前移外,还需要清除动画状态
|
||||||
const revokeAnimation = () => {
|
const revokeAnimation = () => {
|
||||||
|
@ -148,6 +142,7 @@ export default (isLoader?: boolean = true) => {
|
||||||
inAnimation.value = false
|
inAnimation.value = false
|
||||||
}
|
}
|
||||||
const execNext = (isAsync: boolean) => {
|
const execNext = (isAsync: boolean) => {
|
||||||
|
console.log('execNext', isAsync)
|
||||||
if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) {
|
if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) {
|
||||||
runAnimation(isAsync)
|
runAnimation(isAsync)
|
||||||
}
|
}
|
||||||
|
@ -183,7 +178,8 @@ export default (isLoader?: boolean = true) => {
|
||||||
// 鼠标滚动翻页
|
// 鼠标滚动翻页
|
||||||
const mousewheelListener = (e: WheelEvent) => {
|
const mousewheelListener = (e: WheelEvent) => {
|
||||||
// console.log('mousewheel', e)
|
// console.log('mousewheel', e)
|
||||||
e.preventDefault() // 阻止默认事件
|
// 课堂信息存在时,不允许翻页
|
||||||
|
if (!!classcourseStore.classcourse) e.preventDefault()
|
||||||
mousewheelListenerThrottle(e)
|
mousewheelListenerThrottle(e)
|
||||||
}
|
}
|
||||||
const mousewheelListenerThrottle = throttle(function(e: WheelEvent) {
|
const mousewheelListenerThrottle = throttle(function(e: WheelEvent) {
|
||||||
|
@ -214,17 +210,12 @@ export default (isLoader?: boolean = true) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 向上翻页/向下翻页
|
// 向上翻页/向下翻页
|
||||||
const turning = async (e, type) => {
|
const turning = (e, type) => {
|
||||||
e.preventDefault() // 阻止默认事件
|
e.preventDefault() // 阻止默认事件
|
||||||
|
// 课堂信息存在时,不允许翻页
|
||||||
|
if (!!classcourseStore.classcourse) return
|
||||||
if (type === 'prev') execPrev()
|
if (type === 'prev') execPrev()
|
||||||
else if (type === 'next') execNext()
|
else if (type === 'next') execNext()
|
||||||
if (classcourseStore.classcourse) { // 上课中
|
|
||||||
const current = slideIndex.value
|
|
||||||
const animationSteps = animationIndex.value
|
|
||||||
const animation = type == 'next'?'Nextsteps':'Previoustep'
|
|
||||||
const msg = { current, animation, animationSteps}
|
|
||||||
chatApi.slideFlapping(msg)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// 快捷键翻页
|
// 快捷键翻页
|
||||||
const keydownListener = (e: KeyboardEvent) => {
|
const keydownListener = (e: KeyboardEvent) => {
|
||||||
|
@ -239,11 +230,10 @@ export default (isLoader?: boolean = true) => {
|
||||||
key === KEYS.PAGEDOWN
|
key === KEYS.PAGEDOWN
|
||||||
) turning(e, 'next')
|
) turning(e, 'next')
|
||||||
}
|
}
|
||||||
if (isLoader) { // 加载相关钩子
|
|
||||||
onMounted(() => {document.addEventListener('keydown', keydownListener)})
|
onMounted(() => {document.addEventListener('keydown', keydownListener)})
|
||||||
onUnmounted(() => {document.removeEventListener('keydown', keydownListener)})
|
onUnmounted(() => {document.removeEventListener('keydown', keydownListener)})
|
||||||
}
|
|
||||||
|
|
||||||
// 切换到上一张/上一张幻灯片(无视元素的入场动画)
|
// 切换到上一张/上一张幻灯片(无视元素的入场动画)
|
||||||
const turnPrevSlide = () => {
|
const turnPrevSlide = () => {
|
||||||
slidesStore.updateSlideIndex(slideIndex.value - 1)
|
slidesStore.updateSlideIndex(slideIndex.value - 1)
|
||||||
|
|
|
@ -95,11 +95,3 @@ export function getCourseTeachingMsg(id) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function setPaging(data) {
|
|
||||||
return request({
|
|
||||||
url: '/education/classcourse/record/paging',
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
@ -1,333 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="book-wrap">
|
|
||||||
<el-scrollbar height="100%">
|
|
||||||
<div class="book-name flex" @click="dialogVisible = true">
|
|
||||||
<span>{{ curBook.data.itemtitle }}</span>
|
|
||||||
<i class="iconfont icon-xiangyou"></i>
|
|
||||||
</div>
|
|
||||||
<div class="book-list" v-loading="treeLoading">
|
|
||||||
<el-tree :data="treeData" accordion :props="defaultProps" node-key="id"
|
|
||||||
:default-expanded-keys="defaultExpandedKeys" :current-node-key="curNode.data.id" highlight-current
|
|
||||||
@node-click="handleNodeClick">
|
|
||||||
<template #default="{ node }">
|
|
||||||
<span :title="node.label" class="tree-label">{{ node.label }}</span>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
<!--弹窗 选择教材-->
|
|
||||||
<el-dialog v-model="dialogVisible" append-to-body :show-close="false" width="550"
|
|
||||||
style="border-radius: 10px; padding: 10px 15px;">
|
|
||||||
<template #header>
|
|
||||||
<div class="choose-book-header flex">
|
|
||||||
<span>切换教材</span>
|
|
||||||
<i class="iconfont icon-guanbi" @click="dialogVisible = false"></i>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="textbook-container">
|
|
||||||
<el-scrollbar height="450px">
|
|
||||||
<div class="textbook-item flex" v-for="item in subjectList" :class="curBook.data.id == item.id ? 'active-item' : ''"
|
|
||||||
:key="item.id" @click="changeBook(item)">
|
|
||||||
<img v-if="item.avartar" :src="item.avartar.indexOf('http') === 0 ? item.avartar : BaseUrl + item.avartar" class="textbook-img" alt="">
|
|
||||||
<div v-else class="textbook-img">
|
|
||||||
<i class="iconfont icon-jiaocaixuanze" style="font-size: 40px;"></i>
|
|
||||||
</div>
|
|
||||||
<span class="book-name">{{ item.itemtitle }}</span>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { onMounted, ref, nextTick, toRaw, reactive } from 'vue';
|
|
||||||
import { cloneDeep } from 'lodash'
|
|
||||||
import { listEvaluation } from '@/api/subject'
|
|
||||||
import { sessionStore } from '@/utils/store'
|
|
||||||
|
|
||||||
const BaseUrl = import.meta.env.VITE_APP_BUILD_BASE_PATH
|
|
||||||
// 定义要发送的emit事件
|
|
||||||
const emit = defineEmits(['nodeClick', 'changeBook'])
|
|
||||||
// 章节List
|
|
||||||
const unitList = ref([])
|
|
||||||
const subjectList = ref([])
|
|
||||||
const dialogVisible = ref(false)
|
|
||||||
// 当前教材下面单元内容数据
|
|
||||||
const treeData = ref([])
|
|
||||||
const defaultProps = {
|
|
||||||
children: 'children',
|
|
||||||
label: 'itemtitle',
|
|
||||||
class: 'textbook-tree'
|
|
||||||
}
|
|
||||||
//查当前学科
|
|
||||||
const subjectParams = reactive(
|
|
||||||
{
|
|
||||||
edusubject: '科学',
|
|
||||||
edustage:'小学',
|
|
||||||
itemkey: 'version',
|
|
||||||
orderby: 'orderidx asc',
|
|
||||||
pageSize: 10000
|
|
||||||
}
|
|
||||||
)
|
|
||||||
// 查所有的学科
|
|
||||||
const unitParams = reactive({
|
|
||||||
edusubject:'科学',
|
|
||||||
edustage:'小学',
|
|
||||||
itemgroup: 'textbook',
|
|
||||||
orderby: 'orderidx asc',
|
|
||||||
pageSize: 10000
|
|
||||||
})
|
|
||||||
// 当前选中的教材
|
|
||||||
const curBook = reactive({
|
|
||||||
data: {}
|
|
||||||
})
|
|
||||||
// 当前节点
|
|
||||||
const curNode = reactive({
|
|
||||||
data:{}
|
|
||||||
})
|
|
||||||
const treeLoading = ref(false)
|
|
||||||
// 默认展开的节点
|
|
||||||
const defaultExpandedKeys = ref([])
|
|
||||||
|
|
||||||
//选择教材
|
|
||||||
const changeBook = (data) => {
|
|
||||||
curBook.data = data
|
|
||||||
treeData.value = getTreeData(data.id)
|
|
||||||
//切换教材后默认展开第一个并选中
|
|
||||||
nextTick(() =>{
|
|
||||||
defaultExpandedKeys.value = [treeData.value[0].id]
|
|
||||||
curNode.data = getLastLevelData(treeData.value)[0]
|
|
||||||
handleNodeClick(curNode.data)
|
|
||||||
})
|
|
||||||
// 延迟关闭 视觉上选中
|
|
||||||
setTimeout(() => {
|
|
||||||
dialogVisible.value = false
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLastLevelData = (tree) => {
|
|
||||||
let lastLevelData = [];
|
|
||||||
// 递归函数遍历树形结构
|
|
||||||
function traverseTree(nodes) {
|
|
||||||
nodes.forEach((node) => {
|
|
||||||
// 如果当前节点有子节点,继续遍历
|
|
||||||
if (node.children && node.children.length > 0) {
|
|
||||||
traverseTree(node.children);
|
|
||||||
} else {
|
|
||||||
// 如果没有子节点,说明是最后一层的节点
|
|
||||||
lastLevelData.push(node);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 调用递归函数开始遍历
|
|
||||||
traverseTree(tree);
|
|
||||||
|
|
||||||
// 返回最后一层的数据
|
|
||||||
return lastLevelData;
|
|
||||||
}
|
|
||||||
// 根据id 拿到父节点数据
|
|
||||||
const findParentByChildId = (treeData, targetNodeId) => {
|
|
||||||
// 递归查找函数
|
|
||||||
// 遍历树中的每个节点
|
|
||||||
for (let node of treeData) {
|
|
||||||
// 检查当前节点的子节点是否包含目标子节点 ID
|
|
||||||
if (node.children && node.children.some(child => child.id === targetNodeId)) {
|
|
||||||
// 如果当前节点的某个子节点的 ID 匹配目标子节点 ID,则当前节点即为父节点
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
// 如果当前节点没有匹配的子节点,则递归检查当前节点的子节点
|
|
||||||
if (node.children) {
|
|
||||||
let parentNode = findParentByChildId(node.children, targetNodeId);
|
|
||||||
if (parentNode) {
|
|
||||||
return parentNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 如果未找到匹配的父节点,则返回 null 或者适当的默认值
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const handleNodeClick = (data) => {
|
|
||||||
/**
|
|
||||||
* data : 当前节点数据
|
|
||||||
*/
|
|
||||||
let nodeData = cloneDeep(toRaw(data));
|
|
||||||
|
|
||||||
//增加一个label 之前取的label
|
|
||||||
nodeData.label = nodeData.itemtitle
|
|
||||||
// 父级节点 如果当前是一级节点 父级则为null
|
|
||||||
let parent = {
|
|
||||||
id: nodeData.parentid,
|
|
||||||
label: nodeData.parenttitle,
|
|
||||||
itemtitle: nodeData.parenttitle
|
|
||||||
}
|
|
||||||
const parentNode = nodeData.parentid ? parent : null
|
|
||||||
nodeData.parentNode = parentNode
|
|
||||||
let curData = {
|
|
||||||
textBook: {
|
|
||||||
curBookId: curBook.data.id,
|
|
||||||
curBookName: curBook.data.itemtitle,
|
|
||||||
curBookImg: BaseUrl + curBook.data.avartar,
|
|
||||||
curBookPath: curBook.data.fileurl
|
|
||||||
},
|
|
||||||
node: nodeData
|
|
||||||
}
|
|
||||||
// 本地存储:electron-store
|
|
||||||
emit('nodeClick', curData)
|
|
||||||
}
|
|
||||||
// 单元章节数据转为“树”结构
|
|
||||||
const getTreeData = (bookId) =>{
|
|
||||||
// 根据当前教材的id 查找出对应的章节
|
|
||||||
let data = unitList.value.filter(item => item.rootid == bookId && item.level == 1)
|
|
||||||
data.forEach( item => {
|
|
||||||
item.children = unitList.value.filter( item2 => item2.parentid == item.id && item2.level == 2)
|
|
||||||
})
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
onMounted( async () => {
|
|
||||||
treeLoading.value = true
|
|
||||||
try{
|
|
||||||
//获取学科列表
|
|
||||||
const { rows } = await listEvaluation(subjectParams)
|
|
||||||
// 获取所有的教材
|
|
||||||
subjectList.value = rows
|
|
||||||
|
|
||||||
const res = await listEvaluation(unitParams)
|
|
||||||
unitList.value = [...res.rows]
|
|
||||||
// 当前教材
|
|
||||||
curBook.data = rows[0]
|
|
||||||
|
|
||||||
// 章节"树"rows
|
|
||||||
treeData.value = getTreeData(rows[0].id)
|
|
||||||
|
|
||||||
nextTick(() =>{
|
|
||||||
// 默认展开 选中
|
|
||||||
defaultExpandedKeys.value = [treeData.value[0].id]
|
|
||||||
curNode.data = getLastLevelData(treeData.value)[0]
|
|
||||||
handleNodeClick(curNode.data)
|
|
||||||
})
|
|
||||||
|
|
||||||
} finally{
|
|
||||||
treeLoading.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.book-wrap {
|
|
||||||
width: 300px;
|
|
||||||
height: 100%;
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.book-name {
|
|
||||||
background-color: #ffffff;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 45px;
|
|
||||||
padding: 0 15px;
|
|
||||||
z-index: 1;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
color: #3b3b3b;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: solid #f4f5f7 1px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 10px 10px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-list {
|
|
||||||
padding: 45px 10px 0 10px;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.choose-dialog) {
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choose-book-header {
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
.icon-guanbi {
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.textbook-container {
|
|
||||||
.textbook-item {
|
|
||||||
padding: 10px 20px;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.book-name {
|
|
||||||
margin-left: 20px;
|
|
||||||
color: #3b3b3b;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f4f7f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-item {
|
|
||||||
background-color: #f4f7f9;
|
|
||||||
|
|
||||||
.book-name {
|
|
||||||
color: #368fff;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.textbook-img {
|
|
||||||
width: 55px;
|
|
||||||
height: 70px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tree-node) {
|
|
||||||
.el-tree-node__content {
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #eaf3ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-label {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
|
|
||||||
background-color: #eaf3ff !important;
|
|
||||||
color: #409EFF
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -1,222 +0,0 @@
|
||||||
<template>
|
|
||||||
<div style="position: relative;height: 100%;width: 100%;">
|
|
||||||
<draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid">
|
|
||||||
<template #item="{ element, index }">
|
|
||||||
<div class="grid-pic-item" :key="element.backgroundColor" :style="getWH(element,index)">
|
|
||||||
<div class="delete-btn" @click="gridPicList.splice(index,1)">X</div>
|
|
||||||
<div class="header-btn"></div>
|
|
||||||
<ViewerItem :gridPicList="gridPicList" :index="index" :images="element"></ViewerItem>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</draggable>
|
|
||||||
<el-input style="position:fixed;bottom: 20px;right: 180px;width: 1000px" v-model="inputValue" type="text" />
|
|
||||||
<el-button class="add-btn" @click="addPic">
|
|
||||||
添加
|
|
||||||
</el-button>
|
|
||||||
<el-button style="position:fixed;bottom: 20px;right: 80px;" @click="startPencil">
|
|
||||||
画笔
|
|
||||||
</el-button>
|
|
||||||
<div class="modal-mode">
|
|
||||||
<canvas id="canvas_pic_001" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {ref, computed, onMounted} from 'vue'
|
|
||||||
import Draggable from 'vuedraggable'
|
|
||||||
import ViewerItem from "./viewer-item.vue";
|
|
||||||
import Fabric from 'fabric';
|
|
||||||
const gridPicList = ref([])
|
|
||||||
const inputValue = ref('')
|
|
||||||
const isShow = ref(false)
|
|
||||||
// 获取图片样式
|
|
||||||
const getWH = (item,index)=>{
|
|
||||||
return {
|
|
||||||
backgroundColor: item.backgroundColor,
|
|
||||||
'grid-area': 'a' + index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const picList = [
|
|
||||||
'https://prev.ysaix.com:7868/src/assets/images/homecard4.jpg',
|
|
||||||
'https://prev.ysaix.com:7868/src/assets/images/homecard3.jpg',
|
|
||||||
'https://prev.ysaix.com:7868/src/assets/images/homecard2.jpg',
|
|
||||||
'https://prev.ysaix.com:7868/src/assets/images/homecard1.jpg',
|
|
||||||
'https://prev.ysaix.com:7868/profile/avatar/2024/06/26/blob_20240626135106A001.png',
|
|
||||||
'https://prev.ysaix.com:7868/assets/app_download.b3fb227b.png'
|
|
||||||
]
|
|
||||||
// 获取grid样式
|
|
||||||
const getGrid = computed(() => {
|
|
||||||
switch (gridPicList.value.length) {
|
|
||||||
case 1:
|
|
||||||
return {
|
|
||||||
'grid-template-areas':
|
|
||||||
`"a0"`
|
|
||||||
}
|
|
||||||
case 2:
|
|
||||||
return {
|
|
||||||
'grid-template-areas':
|
|
||||||
`"a0 a1"`
|
|
||||||
}
|
|
||||||
case 3:
|
|
||||||
return {
|
|
||||||
'grid-template-areas':
|
|
||||||
`"a0 a1"
|
|
||||||
"a0 a2"`
|
|
||||||
}
|
|
||||||
case 4:
|
|
||||||
return {
|
|
||||||
'grid-template-areas':
|
|
||||||
`"a0 a2"
|
|
||||||
"a1 a3"`
|
|
||||||
}
|
|
||||||
case 5:
|
|
||||||
return {
|
|
||||||
'grid-template-areas':
|
|
||||||
`"a0 a2 a4"
|
|
||||||
"a1 a3 a4"`
|
|
||||||
}
|
|
||||||
case 6:
|
|
||||||
return {
|
|
||||||
'grid-template-areas':
|
|
||||||
`"a0 a2 a4"
|
|
||||||
"a1 a3 a5"`
|
|
||||||
}
|
|
||||||
case 7:
|
|
||||||
return {
|
|
||||||
'grid-template-areas':
|
|
||||||
`"a0 a2 a4"
|
|
||||||
"a0 a2 a4"
|
|
||||||
"a0 a2 a5"
|
|
||||||
"a1 a3 a5"
|
|
||||||
"a1 a3 a6"
|
|
||||||
"a1 a3 a6"`
|
|
||||||
}
|
|
||||||
case 8:
|
|
||||||
return {
|
|
||||||
'grid-template-areas':
|
|
||||||
`"a0 a3 a6"
|
|
||||||
"a0 a3 a6"
|
|
||||||
"a1 a4 a6"
|
|
||||||
"a1 a4 a7"
|
|
||||||
"a2 a5 a7"
|
|
||||||
"a2 a5 a7"`
|
|
||||||
}
|
|
||||||
case 9:
|
|
||||||
return {
|
|
||||||
'grid-template-areas':
|
|
||||||
`"a0 a3 a6"
|
|
||||||
"a1 a4 a7"
|
|
||||||
"a2 a5 a8"`
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
return {
|
|
||||||
width: '100%',
|
|
||||||
height: '100%'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 添加图片
|
|
||||||
const addPic = () => {
|
|
||||||
if (gridPicList.value.length >= 9) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let src = inputValue.value||picList[gridPicList.value.length]
|
|
||||||
if (!src) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
gridPicList.value.push({
|
|
||||||
src: src,
|
|
||||||
backgroundColor: getRandomColor()
|
|
||||||
})
|
|
||||||
inputValue.value = ''
|
|
||||||
}
|
|
||||||
//开始画笔
|
|
||||||
const startPencil = () => {
|
|
||||||
isShow.value = !isShow.value
|
|
||||||
}
|
|
||||||
// 生成随机颜色
|
|
||||||
function getRandomColor() {
|
|
||||||
let r = Math.floor(Math.random() * 256).toString(16);
|
|
||||||
let g = Math.floor(Math.random() * 256).toString(16);
|
|
||||||
let b = Math.floor(Math.random() * 256).toString(16);
|
|
||||||
// 如果生成的十六进制数字只有一位,前面补0
|
|
||||||
r = r.length === 1? '0' + r : r;
|
|
||||||
g = g.length === 1? '0' + g : g;
|
|
||||||
b = b.length === 1? '0' + b : b;
|
|
||||||
return `#${r}${g}${b}`;
|
|
||||||
}
|
|
||||||
//初始化画笔
|
|
||||||
const initPend = () => {
|
|
||||||
let canvas = new Fabric.fabric.Canvas('canvas_pic_001',{
|
|
||||||
interactive: false,
|
|
||||||
selection: true,
|
|
||||||
backgroundColor: "rgba(15,15,15,0)"
|
|
||||||
})
|
|
||||||
canvas.defaultCursor = 'default'
|
|
||||||
canvas.setHeight(300)
|
|
||||||
canvas.setWidth(400)
|
|
||||||
canvas.isDrawingMode = true;
|
|
||||||
canvas.freeDrawingBrush = new Fabric.fabric.PencilBrush(canvas)
|
|
||||||
canvas.freeDrawingBrush.width = 1//设置画笔粗细
|
|
||||||
canvas.freeDrawingBrush.color = "red"//设置画笔颜色
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
initPend()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.modal-mode{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1001;
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.grid-pic-wrap{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: grid;
|
|
||||||
position: absolute;
|
|
||||||
overflow: hidden;
|
|
||||||
.grid-pic-item{
|
|
||||||
//animation: fadeIn 0.5s ease-in-out forwards;
|
|
||||||
background-color: #0a84ff;
|
|
||||||
position: relative;
|
|
||||||
.delete-btn{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 999;
|
|
||||||
&:hover{
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header-btn{
|
|
||||||
position: absolute;
|
|
||||||
z-index: 998;
|
|
||||||
height: 30px;
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: 1px dotted #ccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.add-btn{
|
|
||||||
position: fixed;
|
|
||||||
right: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
}
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,147 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="viewer-item-wrap" :id="'viewer_id'+index">
|
|
||||||
<Viewer @move="move" @moved="moved" @inited="inited" @zoomed="zoomed" :ref="collectRef('viewerRef'+index)" :options="optins" :images="[images.src]" class="images clearfix">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="viewer-img-box">
|
|
||||||
<img v-for="src in scope.images" :key="index" :src="src" style="display: none">
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Viewer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import {ref, watch, nextTick, onMounted} from "vue";
|
|
||||||
import { component as Viewer } from 'v-viewer'
|
|
||||||
import Fabric from 'fabric';
|
|
||||||
import 'viewerjs/dist/viewer.css'
|
|
||||||
const props = defineProps({
|
|
||||||
images: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {}
|
|
||||||
},
|
|
||||||
index: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
gridPicList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
let $viewer = null;
|
|
||||||
const refs = ref([]);
|
|
||||||
//初始化时
|
|
||||||
const inited = (viewer) => {
|
|
||||||
$viewer = viewer
|
|
||||||
}
|
|
||||||
//缩放时
|
|
||||||
const zoomed = (e) => {
|
|
||||||
setImgStyle()
|
|
||||||
// console.log('zoomed', e)
|
|
||||||
}
|
|
||||||
//移动时
|
|
||||||
const moved = (e) => {
|
|
||||||
setImgStyle()
|
|
||||||
// console.log('moved',e)
|
|
||||||
}
|
|
||||||
const move = (e) => {
|
|
||||||
// console.log('move', e)
|
|
||||||
}
|
|
||||||
const appendCanvasToShow = () => {
|
|
||||||
initImgStyle()
|
|
||||||
}
|
|
||||||
|
|
||||||
const setImgStyle = () => {
|
|
||||||
let item = window.document.getElementById('viewer_id'+props.index)
|
|
||||||
let canvas = item.querySelectorAll('.viewer-canvas')[0]
|
|
||||||
let img = canvas.querySelectorAll('img')[0]
|
|
||||||
let imgStyle = img.getAttribute('style')
|
|
||||||
imgStyle = imgStyle.replace('relative', 'absolute') + 'z-index: 1002';
|
|
||||||
img.style = imgStyle;
|
|
||||||
let canvasNew = canvas.querySelectorAll('canvas')[0]
|
|
||||||
canvasNew.style = imgStyle;
|
|
||||||
}
|
|
||||||
|
|
||||||
const initImgStyle = () => {
|
|
||||||
let item = window.document.getElementById('viewer_id'+props.index)
|
|
||||||
let canvas = item.querySelectorAll('.viewer-canvas')[0]
|
|
||||||
let img = canvas.querySelectorAll('img')[0];
|
|
||||||
let imgStyle = img.getAttribute('style')
|
|
||||||
imgStyle = imgStyle.replace('relative', 'absolute') + 'z-index: 1002';
|
|
||||||
img.style = imgStyle;
|
|
||||||
const canvasNew = document.createElement('canvas');
|
|
||||||
canvasNew.style = imgStyle;
|
|
||||||
canvasNew.id = 'canvas_pic_'+props.index
|
|
||||||
canvas.appendChild(canvasNew);
|
|
||||||
|
|
||||||
initPend()
|
|
||||||
}
|
|
||||||
|
|
||||||
const collectRef = (key) => {
|
|
||||||
return (el) => {
|
|
||||||
refs.value[key] = el;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
//viewer配置
|
|
||||||
const optins = ref({
|
|
||||||
"inline": true,
|
|
||||||
"button": false,
|
|
||||||
"navbar": false,
|
|
||||||
"title": false,
|
|
||||||
"toolbar": false,
|
|
||||||
"tooltip": true,
|
|
||||||
"zoomable": true,
|
|
||||||
"rotatable": true,
|
|
||||||
"movable": false,
|
|
||||||
"scalable": true,
|
|
||||||
"transition": true,
|
|
||||||
"fullscreen": true,
|
|
||||||
"keyboard": true
|
|
||||||
})
|
|
||||||
const initViewers = () => {
|
|
||||||
refs.value['viewerRef'+props.index]?.rebuildViewer()
|
|
||||||
setTimeout(()=>{
|
|
||||||
initImgStyle()
|
|
||||||
},300)
|
|
||||||
}
|
|
||||||
//初始化画笔
|
|
||||||
const initPend = () => {
|
|
||||||
let canvas = new Fabric.fabric.Canvas('canvas_pic_'+props.index,{
|
|
||||||
interactive: false,
|
|
||||||
selection: true,
|
|
||||||
backgroundColor: "rgba(15,15,15,0)"
|
|
||||||
})
|
|
||||||
canvas.defaultCursor = 'default'
|
|
||||||
canvas.setHeight(300)
|
|
||||||
canvas.setWidth(400)
|
|
||||||
canvas.isDrawingMode = true;
|
|
||||||
canvas.freeDrawingBrush = new Fabric.fabric.PencilBrush(canvas)
|
|
||||||
canvas.freeDrawingBrush.width = 1//设置画笔粗细
|
|
||||||
canvas.freeDrawingBrush.color = "red"//设置画笔颜色
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(props.gridPicList, (newValue, oldValue) => {
|
|
||||||
nextTick(()=>{
|
|
||||||
initViewers()
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
watch(props.images, (newValue, oldValue) => {
|
|
||||||
// optins.value.movable = newValue.dragable
|
|
||||||
initPend()
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
|
|
||||||
onMounted(()=>{
|
|
||||||
setTimeout(()=>{
|
|
||||||
appendCanvasToShow()
|
|
||||||
}, 300)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.viewer-item-wrap{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,26 +0,0 @@
|
||||||
/**
|
|
||||||
* 无限滚动
|
|
||||||
*/
|
|
||||||
import { nextTick } from 'vue'
|
|
||||||
const mountedHook = async (el, binding) => {
|
|
||||||
console.log(el, binding)
|
|
||||||
const value = binding.value
|
|
||||||
if (typeof value !== 'function') return console.error('v-scroll must be a function')
|
|
||||||
await nextTick()
|
|
||||||
}
|
|
||||||
export default {
|
|
||||||
// Hooks for Vue3
|
|
||||||
mounted(el, binding) {
|
|
||||||
mountedHook(el, binding)
|
|
||||||
},
|
|
||||||
// Hooks for Vue2
|
|
||||||
inserted(el, binding) {
|
|
||||||
mountedHook(el, binding)
|
|
||||||
},
|
|
||||||
|
|
||||||
update(el, binding){
|
|
||||||
},
|
|
||||||
updated(el, binding){
|
|
||||||
|
|
||||||
},
|
|
||||||
}
|
|
|
@ -57,9 +57,9 @@ import { ref, watch , reactive, onMounted, onBeforeMount, computed} from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
|
import { sessionStore } from '@/utils/store'
|
||||||
import pkc from "../../../../../package.json"
|
import pkc from "../../../../../package.json"
|
||||||
import defaultUserImg from '@/assets/images/img-avatar.png'
|
import defaultUserImg from '@/assets/images/img-avatar.png'
|
||||||
import { sessionStore } from '@/utils/store'
|
|
||||||
|
|
||||||
|
|
||||||
const { ipcRenderer } = window.electron || {}
|
const { ipcRenderer } = window.electron || {}
|
||||||
|
@ -84,7 +84,7 @@ const isStadium = () => {
|
||||||
|
|
||||||
const headerMenus = isStadium() ?[{
|
const headerMenus = isStadium() ?[{
|
||||||
name: '教学实践',
|
name: '教学实践',
|
||||||
id: 6,
|
id: 4,
|
||||||
icon: 'icon-jiaoxueshijian',
|
icon: 'icon-jiaoxueshijian',
|
||||||
path: '/prepare'
|
path: '/prepare'
|
||||||
},]:[
|
},]:[
|
||||||
|
@ -94,12 +94,12 @@ const headerMenus = isStadium() ?[{
|
||||||
icon: 'icon-shouye',
|
icon: 'icon-shouye',
|
||||||
path: '/model/index'
|
path: '/model/index'
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// name: '教学工作台',
|
name: '教学工作台',
|
||||||
// id: 2,
|
id: 2,
|
||||||
// icon: 'icon-gongzuotai',
|
icon: 'icon-gongzuotai',
|
||||||
// path: '/desktop'
|
path: '/desktop'
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
name: '教学实践',
|
name: '教学实践',
|
||||||
id: 4,
|
id: 4,
|
||||||
|
@ -182,9 +182,9 @@ watch(
|
||||||
|
|
||||||
|
|
||||||
const logout = () => {
|
const logout = () => {
|
||||||
|
const hasClass = sessionStore.has('activeClass.id')
|
||||||
if(!!sessionStore.get('curr.classcourse'))return ElMessage.warning('当前正在上课,请先结束上课')
|
const hasTool = sessionStore.get('isToolWin')
|
||||||
|
if (hasClass || hasTool) return ElMessage.warning('当前正在上课,请先结束上课')
|
||||||
ElMessageBox.confirm('确认退出系统吗?', '提示', {
|
ElMessageBox.confirm('确认退出系统吗?', '提示', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
|
|
|
@ -24,6 +24,7 @@ if(process.env.NODE_ENV != 'development') { // 非开发环境,将日志打印
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
|
|
||||||
//专为菁优网配置的请求转发
|
//专为菁优网配置的请求转发
|
||||||
app.config.globalProperties.$requestGetJYW = (url,config)=>{
|
app.config.globalProperties.$requestGetJYW = (url,config)=>{
|
||||||
config.params = config.params?config.params:{}
|
config.params = config.params?config.params:{}
|
||||||
|
|
|
@ -98,8 +98,6 @@ export class MsgEnum {
|
||||||
MSG_classlecturePagesrc : 'classlecturePagesrc',
|
MSG_classlecturePagesrc : 'classlecturePagesrc',
|
||||||
/** @desc: 课堂作业|活动 */
|
/** @desc: 课堂作业|活动 */
|
||||||
MSG_homework : 'HOMEWORK',
|
MSG_homework : 'HOMEWORK',
|
||||||
/** @desc: 公屏 - 课堂作业|活动 */
|
|
||||||
MSG_pushSreen_work : 'pushSreen_work',
|
|
||||||
/** @desc: 点赞 */
|
/** @desc: 点赞 */
|
||||||
MSG_dz : 'dz',
|
MSG_dz : 'dz',
|
||||||
/** @desc: 疑惑 */
|
/** @desc: 疑惑 */
|
||||||
|
|
|
@ -31,11 +31,6 @@ export const constantRoutes = [
|
||||||
component: () => import('@/AixPPTist/src/App.vue'),
|
component: () => import('@/AixPPTist/src/App.vue'),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/gridPic',
|
|
||||||
component: () => import('@/components/grid-pic/index.vue'),
|
|
||||||
hidden: true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/model',
|
path: '/model',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
|
@ -57,31 +57,24 @@ export const resourceFormat = [
|
||||||
// 资源类型
|
// 资源类型
|
||||||
export const resourceType = [
|
export const resourceType = [
|
||||||
{
|
{
|
||||||
id:1,
|
|
||||||
label: '课例库',
|
label: '课例库',
|
||||||
value: "'apt','课件','教案'"
|
value: "'apt','课件','教案'"
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// label: '作业库',
|
label: '作业库',
|
||||||
// value: '作业',
|
value: '作业',
|
||||||
// disabled: true
|
disabled: true
|
||||||
// },
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
id:2,
|
|
||||||
label: '素材库',
|
label: '素材库',
|
||||||
value: "'素材'"
|
value: "'素材'"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id:3,
|
label: '习题库',
|
||||||
label: '实验室',
|
value: '习题',
|
||||||
value: "'素材'"
|
disabled: true
|
||||||
},
|
}
|
||||||
// {
|
|
||||||
// label: '习题库',
|
|
||||||
// value: '习题',
|
|
||||||
// disabled: true
|
|
||||||
// }
|
|
||||||
]
|
]
|
||||||
// 年级划分
|
// 年级划分
|
||||||
export const gradeList = [
|
export const gradeList = [
|
||||||
|
|
|
@ -3,16 +3,16 @@
|
||||||
<!-- <div class="class-reserv-tabs">
|
<!-- <div class="class-reserv-tabs">
|
||||||
<el-segmented v-model="tabActive" block :options="tabOptions" size="large" />
|
<el-segmented v-model="tabActive" block :options="tabOptions" size="large" />
|
||||||
</div>-->
|
</div>-->
|
||||||
<div class="class-reserv-body" v-infinite-scroll="load">
|
<div class="class-reserv-body">
|
||||||
<template v-for="(item, index) in dataList" :key="index">
|
<template v-for="(item, index) in dataList" :key="index">
|
||||||
<!-- <reserv-item
|
<reserv-item
|
||||||
:style="{'background-color': index%2==0?'#f5f5f5':''}"
|
:style="{'background-color': index%2==0?'#f5f5f5':''}"
|
||||||
:item="item"
|
:item="item"
|
||||||
v-if="item.bookImg"
|
v-if="item.bookImg"
|
||||||
@open-edit="reservDialog.openDialog(item)"
|
@open-edit="reservDialog.openDialog(item)"
|
||||||
@delete-reserv="deleteReserv(item)"
|
@delete-reserv="deleteReserv(item)"
|
||||||
@change="(...o) => emit('change', ...o)"
|
@change="(...o) => emit('change', ...o)"
|
||||||
></reserv-item> -->
|
></reserv-item>
|
||||||
<reserv-item-apt
|
<reserv-item-apt
|
||||||
v-if="!item.bookImg"
|
v-if="!item.bookImg"
|
||||||
:style="{'background-color': index%2==0?'#f5f5f5':''}"
|
:style="{'background-color': index%2==0?'#f5f5f5':''}"
|
||||||
|
@ -22,14 +22,13 @@
|
||||||
@change="(...o) => emit('change', ...o)"
|
@change="(...o) => emit('change', ...o)"
|
||||||
></reserv-item-apt>
|
></reserv-item-apt>
|
||||||
</template>
|
</template>
|
||||||
<el-divider v-if="page.isEnd">到底了,没了</el-divider>
|
|
||||||
</div>
|
</div>
|
||||||
<reserv ref="reservDialog"></reserv>
|
<reserv ref="reservDialog"></reserv>
|
||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, computed, watch, reactive } from 'vue'
|
import { ref, onMounted, computed, watch } from 'vue'
|
||||||
import { getSelfReserv } from '@/api/classManage'
|
import { getSelfReserv } from '@/api/classManage'
|
||||||
import { listClasscourseNew } from '@/api/teaching/classcourse' // api接口
|
import { listClasscourseNew } from '@/api/teaching/classcourse' // api接口
|
||||||
import ReservItem from '@/views/classManage/reserv-item.vue'
|
import ReservItem from '@/views/classManage/reserv-item.vue'
|
||||||
|
@ -37,7 +36,6 @@ import Reserv from '@/views/prepare/container/reserv.vue'
|
||||||
import { useToolState } from '@/store/modules/tool'
|
import { useToolState } from '@/store/modules/tool'
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
import ReservItemApt from '@/views/classManage/reserv-item-apt.vue'
|
import ReservItemApt from '@/views/classManage/reserv-item-apt.vue'
|
||||||
import vScroll from '@/directive/scroll' // 指令--滚动
|
|
||||||
// import Chat from '@/utils/chat' // im 登录初始化
|
// import Chat from '@/utils/chat' // im 登录初始化
|
||||||
// if (!Chat.imChat) Chat.init()
|
// if (!Chat.imChat) Chat.init()
|
||||||
|
|
||||||
|
@ -46,12 +44,6 @@ const reservDialog = ref(null)
|
||||||
const tabOptions = ref(['进行中', '已结束'])
|
const tabOptions = ref(['进行中', '已结束'])
|
||||||
const tabActive = ref('进行中')
|
const tabActive = ref('进行中')
|
||||||
const dataList = ref([])
|
const dataList = ref([])
|
||||||
const page = reactive({
|
|
||||||
pageNum: 0, // 页码
|
|
||||||
pageSize: 10, // 每页条数
|
|
||||||
total: 0, // 总条数
|
|
||||||
isEnd: false // 是否加载完
|
|
||||||
})
|
|
||||||
|
|
||||||
const toolStore = useToolState()
|
const toolStore = useToolState()
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
@ -80,42 +72,21 @@ const deleteReserv = (item) => {
|
||||||
})*/
|
})*/
|
||||||
// 获取数据
|
// 获取数据
|
||||||
const getData = () => {
|
const getData = () => {
|
||||||
const { pageNum, pageSize } = page
|
Promise.all([listClasscourseNew({teacherid: userStore.id,evalid: props.curNode.id,pageSize:1000}), getSelfReserv({ex2:props.curNode.id})]).then(([res1,res2])=>{
|
||||||
const params = {
|
let list = res2.data || []
|
||||||
evalid: props.curNode.id,
|
let list2 = res1.rows || []
|
||||||
teacherid: userStore.id,
|
// list.sort((a,b) => { if(a.status=='上课中') return -1; else return 0 })
|
||||||
pageNum, pageSize
|
list = list.concat(list2)
|
||||||
}
|
|
||||||
listClasscourseNew(params)
|
|
||||||
.then((res) => {
|
|
||||||
const list = res.rows || []
|
|
||||||
const total = res.total || 0
|
|
||||||
list.sort((a,b) => { return new Date(b.createTime) - new Date(a.createTime) })
|
list.sort((a,b) => { return new Date(b.createTime) - new Date(a.createTime) })
|
||||||
dataList.value.push(...list)
|
dataList.value = list
|
||||||
page.total = total // 总条数
|
|
||||||
page.isEnd = dataList.value.length == total // 是否结束
|
|
||||||
})
|
})
|
||||||
// aippt+ppt 获取数据
|
|
||||||
// Promise.all([listClasscourseNew({teacherid: userStore.id,evalid: props.curNode.id,pageSize:1000}), getSelfReserv({ex2:props.curNode.id})]).then(([res1,res2])=>{
|
|
||||||
// let list = res2.data || []
|
|
||||||
// let list2 = res1.rows || []
|
|
||||||
// // list.sort((a,b) => { if(a.status=='上课中') return -1; else return 0 })
|
|
||||||
// list = list.concat(list2)
|
|
||||||
// list.sort((a,b) => { return new Date(b.createTime) - new Date(a.createTime) })
|
|
||||||
// dataList.value = list
|
|
||||||
// })
|
|
||||||
/*getSelfReserv().then((res) => {
|
/*getSelfReserv().then((res) => {
|
||||||
const list = res.data || []
|
const list = res.data || []
|
||||||
list.sort((a,b) => { if(a.status=='上课中') return -1; else return 0 })
|
list.sort((a,b) => { if(a.status=='上课中') return -1; else return 0 })
|
||||||
dataList.value = list
|
dataList.value = list
|
||||||
})*/
|
})*/
|
||||||
}
|
}
|
||||||
// 列表加载更多
|
|
||||||
const load = () => {
|
|
||||||
if(page.isEnd) return console.log('已加载完-所有') // 结束
|
|
||||||
page.pageNum++
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
watch(
|
watch(
|
||||||
() => [dataList,toolStore.isToolWin,props.curNode],
|
() => [dataList,toolStore.isToolWin,props.curNode],
|
||||||
() => {
|
() => {
|
||||||
|
@ -125,14 +96,13 @@ watch(
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// getData() // 加载数据
|
getData() // 加载数据
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.class-reserv-wrap {
|
.class-reserv-wrap {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// height: 300px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
//padding: 15px 10px;
|
//padding: 15px 10px;
|
||||||
|
|
|
@ -141,8 +141,7 @@
|
||||||
v-if="
|
v-if="
|
||||||
dialogProps.studentObj.worktype == '常规作业' ||
|
dialogProps.studentObj.worktype == '常规作业' ||
|
||||||
dialogProps.studentObj.worktype == '课堂展示' ||
|
dialogProps.studentObj.worktype == '课堂展示' ||
|
||||||
dialogProps.studentObj.worktype == '框架梳理' ||
|
dialogProps.studentObj.worktype == '框架梳理'
|
||||||
dialogProps.studentObj.worktype == '科学实验'
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div v-for="(stuItem, sIndex) in dialogProps.studentQuizAllList" :key="stuItem.id">
|
<div v-for="(stuItem, sIndex) in dialogProps.studentQuizAllList" :key="stuItem.id">
|
||||||
|
@ -158,8 +157,7 @@
|
||||||
v-if="
|
v-if="
|
||||||
dialogProps.studentObj.worktype == '常规作业' ||
|
dialogProps.studentObj.worktype == '常规作业' ||
|
||||||
dialogProps.studentObj.worktype == '课堂展示' ||
|
dialogProps.studentObj.worktype == '课堂展示' ||
|
||||||
dialogProps.studentObj.worktype == '框架梳理' ||
|
dialogProps.studentObj.worktype == '框架梳理'
|
||||||
dialogProps.studentObj.worktype == '科学实验'
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<!-- 文件内容格式:mp3/mp4/doc/docx/excel/pdf/ppt/pptx/jpg/jpeg/gif/png/txt ->
|
<!-- 文件内容格式:mp3/mp4/doc/docx/excel/pdf/ppt/pptx/jpg/jpeg/gif/png/txt ->
|
||||||
|
@ -212,13 +210,7 @@
|
||||||
|
|
||||||
<!-- 学生答题展示 -->
|
<!-- 学生答题展示 -->
|
||||||
<div v-if="feedContentList.length > 0">
|
<div v-if="feedContentList.length > 0">
|
||||||
<div
|
<div v-if="dialogProps.studentObj.worktype == '常规作业' && stuItem.rightanswer != ''&& stuItem.rightanswer != null">
|
||||||
v-if="
|
|
||||||
(dialogProps.studentObj.worktype == '常规作业' || dialogProps.studentObj.worktype == '科学实验') &&
|
|
||||||
stuItem.rightanswer != '' &&
|
|
||||||
stuItem.rightanswer != null
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- 常规作业:学生有的会答复 -->
|
<!-- 常规作业:学生有的会答复 -->
|
||||||
<p style="padding: 10px 0;text-align: left;">学生答复内容</p>
|
<p style="padding: 10px 0;text-align: left;">学生答复内容</p>
|
||||||
<div style="padding: 0 20px;text-align: left;">{{stuItem.rightanswer}}</div>
|
<div style="padding: 0 20px;text-align: left;">{{stuItem.rightanswer}}</div>
|
||||||
|
@ -708,7 +700,7 @@ const acceptParams = async (params) => {
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
// 学生回答
|
// 学生回答
|
||||||
if (params.studentObj.worktype == '常规作业' || params.studentObj.worktype == '科学实验') {
|
if (params.studentObj.worktype == '常规作业') {
|
||||||
try {
|
try {
|
||||||
// 老师布置的附件 datacontent TODO:常规作业、其他类型还未接入
|
// 老师布置的附件 datacontent TODO:常规作业、其他类型还未接入
|
||||||
const res = await getClassworkdata(params.studentObj.id);
|
const res = await getClassworkdata(params.studentObj.id);
|
||||||
|
|
|
@ -30,12 +30,12 @@ import { ElMessage } from 'element-plus'
|
||||||
const emit = defineEmits(['itemClick'])
|
const emit = defineEmits(['itemClick'])
|
||||||
const items = shallowRef([
|
const items = shallowRef([
|
||||||
{ title: '自主搜题', description: '上千万高质量习题资源,历届考试真题,每道题均有习题解析', icon: '#icon-soutibao-',type:'primary' },
|
{ title: '自主搜题', description: '上千万高质量习题资源,历届考试真题,每道题均有习题解析', icon: '#icon-soutibao-',type:'primary' },
|
||||||
// { title: '校本题库', description: '本校公共题库资源。', icon: '#icon-soutibao-',type:'primary' },
|
{ title: '校本题库', description: '本校公共题库资源。', icon: '#icon-soutibao-',type:'primary' },
|
||||||
{ title: '个人题库', description: '老师上传维护自己的个人题库。', icon: '#icon-soutibao-',type:'primary' },
|
{ title: '个人题库', description: '老师上传维护自己的个人题库。', icon: '#icon-soutibao-',type:'primary' },
|
||||||
// { title: '智能推荐', description: '通过对学生的薄弱知识点分析,推送不同难度的习题进行强化训练。', icon: '#icon-tubiao_wuxing-',type:'primary' },
|
{ title: '智能推荐', description: '通过对学生的薄弱知识点分析,推送不同难度的习题进行强化训练。', icon: '#icon-tubiao_wuxing-',type:'primary' },
|
||||||
{ title: '课堂展示', description: '通过课堂白板绘制作业,提升学生的创作思维能力。', icon: '#icon-huaban',type:'danger' },
|
{ title: '课堂展示', description: '通过课堂白板绘制作业,提升学生的创作思维能力。', icon: '#icon-huaban',type:'danger' },
|
||||||
{ title: '常规作业', description: '推送pdf、视频、音频、图片,学生可以拍照上传。', icon: '#icon-zhaoxiangji',type:'danger' },
|
{ title: '常规作业', description: '推送pdf、视频、音频、图片,学生可以拍照上传。', icon: '#icon-zhaoxiangji',type:'danger' },
|
||||||
// { title: 'AI设计作业', description: '通过AI助手,根据课标、教材、考试等分析结果,智能创建作业。', icon: '#icon-jiqiren_o',type:'danger' },
|
{ title: 'AI设计作业', description: '通过AI助手,根据课标、教材、考试等分析结果,智能创建作业。', icon: '#icon-jiqiren_o',type:'danger' },
|
||||||
{ title: '习题上传', description: '自己上传个人题库。', icon: '#icon-shangchuan',type:'danger' },
|
{ title: '习题上传', description: '自己上传个人题库。', icon: '#icon-shangchuan',type:'danger' },
|
||||||
{ title: '科学实验', description: '学生完成虚拟仿真实验,并提交实验结果。', icon: '#icon-shangchuan',type:'danger' },
|
{ title: '科学实验', description: '学生完成虚拟仿真实验,并提交实验结果。', icon: '#icon-shangchuan',type:'danger' },
|
||||||
]);
|
]);
|
||||||
|
|
|
@ -58,9 +58,9 @@
|
||||||
<el-tab-pane label="自主搜题" name="自主搜题" class="prepare-center-zzst">
|
<el-tab-pane label="自主搜题" name="自主搜题" class="prepare-center-zzst">
|
||||||
<SearchQuestion :bookobj="courseObj" @addQuiz="handleClassWorkQuizAdd" />
|
<SearchQuestion :bookobj="courseObj" @addQuiz="handleClassWorkQuizAdd" />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<!-- <el-tab-pane label="校本题库" name="校本题库" class="prepare-center-xbtk">
|
<el-tab-pane label="校本题库" name="校本题库" class="prepare-center-xbtk">
|
||||||
<SchoolQuestion />
|
<SchoolQuestion />
|
||||||
</el-tab-pane> -->
|
</el-tab-pane>
|
||||||
<el-tab-pane label="个人题库" name="个人题库" class="prepare-center-grst">
|
<el-tab-pane label="个人题库" name="个人题库" class="prepare-center-grst">
|
||||||
<MyQuestion :bookobj="courseObj" @addQuiz="handleClassWorkQuizAdd"/>
|
<MyQuestion :bookobj="courseObj" @addQuiz="handleClassWorkQuizAdd"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
|
@ -6,9 +6,9 @@
|
||||||
<el-tab-pane label="自主搜题" name="自主搜题" class="prepare-center-zzst">
|
<el-tab-pane label="自主搜题" name="自主搜题" class="prepare-center-zzst">
|
||||||
<SearchQuestion :bookobj="courseObj" :isHtml2canvas="true" @addQuizImgBs64="handleaddQuizImgBs64" />
|
<SearchQuestion :bookobj="courseObj" :isHtml2canvas="true" @addQuizImgBs64="handleaddQuizImgBs64" />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<!-- <el-tab-pane label="校本题库" name="校本题库" class="prepare-center-xbtk">
|
<el-tab-pane label="校本题库" name="校本题库" class="prepare-center-xbtk">
|
||||||
<SchoolQuestion />
|
<SchoolQuestion />
|
||||||
</el-tab-pane> -->
|
</el-tab-pane>
|
||||||
<el-tab-pane label="个人题库" name="个人题库" class="prepare-center-grst">
|
<el-tab-pane label="个人题库" name="个人题库" class="prepare-center-grst">
|
||||||
<MyQuestion :bookobj="courseObj" :isHtml2canvas="true" @addQuizImgBs64="handleaddQuizImgBs64"/>
|
<MyQuestion :bookobj="courseObj" :isHtml2canvas="true" @addQuizImgBs64="handleaddQuizImgBs64"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
|
@ -61,8 +61,7 @@
|
||||||
<div>
|
<div>
|
||||||
<div v-if="myClassActive.filetype=='apt'">开始新的课堂,需要点击先创建课堂,才能显示手机二维码</div>
|
<div v-if="myClassActive.filetype=='apt'">开始新的课堂,需要点击先创建课堂,才能显示手机二维码</div>
|
||||||
<div v-else>开始新的课堂,需要点击先创建课堂</div>
|
<div v-else>开始新的课堂,需要点击先创建课堂</div>
|
||||||
<el-button type="warning" :loading="dt.loading" @click="createClasscourse()">创建课堂</el-button>
|
<el-button type="warning" :loading="dt.loading" @click="createClasscourse">创建课堂</el-button>
|
||||||
<el-button type="success" @click="createClasscourse(true)">公屏上课</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 故障备用 -->
|
<!-- 故障备用 -->
|
||||||
|
@ -147,7 +146,7 @@ const open = async (id, classObj) => {
|
||||||
await getAptInfo(id)
|
await getAptInfo(id)
|
||||||
// 获取班级列表
|
// 获取班级列表
|
||||||
getClassList()
|
getClassList()
|
||||||
// console.log('classObj', classObj)
|
console.log('classObj', classObj)
|
||||||
// 继续上课
|
// 继续上课
|
||||||
if (!!classObj) {
|
if (!!classObj) {
|
||||||
dt.ctCourse = classObj
|
dt.ctCourse = classObj
|
||||||
|
@ -246,8 +245,8 @@ const getClasscourseList = async type => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 创建课程 isPublic 公屏上课
|
// 创建课程
|
||||||
const createClasscourse = async (isPublic = false) => {
|
const createClasscourse = async () => {
|
||||||
const { classid } = classForm.form
|
const { classid } = classForm.form
|
||||||
if (!classid) {
|
if (!classid) {
|
||||||
ElMessage.warning('请选择班级')
|
ElMessage.warning('请选择班级')
|
||||||
|
@ -256,8 +255,8 @@ const createClasscourse = async (isPublic = false) => {
|
||||||
dt.loading = true
|
dt.loading = true
|
||||||
const { entpcourseid, evalid, id, coursetitle } = myClassActive.value // 课件对象
|
const { entpcourseid, evalid, id, coursetitle } = myClassActive.value // 课件对象
|
||||||
const curDate = commUtil.getDateNow('yyyy-MM-dd')
|
const curDate = commUtil.getDateNow('yyyy-MM-dd')
|
||||||
const params = { // 公屏上课直接 status = open
|
const params = {
|
||||||
id: 0, coursetype: '', courseverid: 0, coursedesc: '', status: isPublic?'open':'',
|
id: 0, coursetype: '', courseverid: 0, coursedesc: '', status: '',
|
||||||
teacherid: userStore.id, entpcoursefileid: id, classid,
|
teacherid: userStore.id, entpcoursefileid: id, classid,
|
||||||
entpcourseid, evalid, coursetitle,
|
entpcourseid, evalid, coursetitle,
|
||||||
plandate: curDate, opendate: curDate
|
plandate: curDate, opendate: curDate
|
||||||
|
@ -275,7 +274,7 @@ const createClasscourse = async (isPublic = false) => {
|
||||||
setTimeout(async() => {
|
setTimeout(async() => {
|
||||||
msgEl.close()
|
msgEl.close()
|
||||||
const res = await Http_Classcourse.getClasscourse(teacherForm.form.classcourseid)
|
const res = await Http_Classcourse.getClasscourse(teacherForm.form.classcourseid)
|
||||||
openPublicScreen(res.data, isPublic)
|
openPublicScreen(res.data)
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
|
@ -356,7 +355,7 @@ const getQrUrl = async() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 打开公屏
|
// 打开公屏
|
||||||
const openPublicScreen = (classcourse, isPublic) => {
|
const openPublicScreen = (classcourse) => {
|
||||||
console.log('打开公屏', classcourse)
|
console.log('打开公屏', classcourse)
|
||||||
if (!dt.ctCourse) { // 新开课需要发送消息-继续上课不需要直接打开
|
if (!dt.ctCourse) { // 新开课需要发送消息-继续上课不需要直接打开
|
||||||
// 发送app端待开课消息
|
// 发送app端待开课消息
|
||||||
|
@ -367,14 +366,11 @@ const openPublicScreen = (classcourse, isPublic) => {
|
||||||
const resource = toRaw(myClassActive.value)
|
const resource = toRaw(myClassActive.value)
|
||||||
sessionStore.set('curr.resource', resource) // 缓存当前资源信息
|
sessionStore.set('curr.resource', resource) // 缓存当前资源信息
|
||||||
sessionStore.set('curr.classcourse', classcourse) // 缓存当前当前上课
|
sessionStore.set('curr.classcourse', classcourse) // 缓存当前当前上课
|
||||||
// 公屏开课
|
|
||||||
sessionStore.set('curr.isPublic', isPublic) // 缓存是否公屏开课
|
|
||||||
createWindow('open-win', {
|
createWindow('open-win', {
|
||||||
url: '/pptist', // 窗口关闭时,清除缓存
|
url: '/pptist', // 窗口关闭时,清除缓存
|
||||||
close: () => {
|
close: () => {
|
||||||
sessionStore.set('curr.resource', null) // 清除缓存
|
sessionStore.set('curr.resource', null) // 清除缓存
|
||||||
sessionStore.set('curr.classcourse', null) // 清除缓存
|
sessionStore.set('curr.classcourse', null) // 清除缓存
|
||||||
sessionStore.set('curr.isPublic', null) // 清除缓存
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
visible.value = false // 关闭弹窗
|
visible.value = false // 关闭弹窗
|
||||||
|
|
|
@ -10,7 +10,6 @@
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item @click="createAIPPT">新建文枢课件</el-dropdown-item>
|
<el-dropdown-item @click="createAIPPT">新建文枢课件</el-dropdown-item>
|
||||||
<el-dropdown-item @click="aiTOPPT">AI一键生成</el-dropdown-item>
|
<el-dropdown-item @click="aiTOPPT">AI一键生成</el-dropdown-item>
|
||||||
<!-- <el-dropdown-item @click="openGridPic">打开宫格</el-dropdown-item>-->
|
|
||||||
<el-dropdown-item @click="openFilePicker">导入PPT</el-dropdown-item>
|
<el-dropdown-item @click="openFilePicker">导入PPT</el-dropdown-item>
|
||||||
<input type="file" ref="fileInput" style="display: none;" @change="handleFileChange" accept="application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation">
|
<input type="file" ref="fileInput" style="display: none;" @change="handleFileChange" accept="application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation">
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
|
@ -297,7 +296,7 @@ export default {
|
||||||
},
|
},
|
||||||
currentKJFileList() {
|
currentKJFileList() {
|
||||||
// return this.currentFileList.filter((item) => item.fileFlag === 'apt' || item.fileFlag === '课件')
|
// return this.currentFileList.filter((item) => item.fileFlag === 'apt' || item.fileFlag === '课件')
|
||||||
return this.currentFileList.filter((item) => ['aippt'].includes(item.fileFlag))
|
return this.currentFileList.filter((item) => ['apt','aippt','课件'].includes(item.fileFlag))
|
||||||
},
|
},
|
||||||
currentSCFileList() {
|
currentSCFileList() {
|
||||||
// return this.currentFileList.filter((item) => item.fileFlag !== 'apt' && item.fileFlag !== '课件')
|
// return this.currentFileList.filter((item) => item.fileFlag !== 'apt' && item.fileFlag !== '课件')
|
||||||
|
@ -342,14 +341,6 @@ export default {
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
methods: {
|
methods: {
|
||||||
openGridPic() {
|
|
||||||
createWindow('open-win', {
|
|
||||||
url: '/gridPic', // 窗口关闭时,清除缓存
|
|
||||||
option: {
|
|
||||||
maximizable: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 延时
|
// 延时
|
||||||
sleep(ms){return new Promise(resolve => setTimeout(resolve, ms))},
|
sleep(ms){return new Promise(resolve => setTimeout(resolve, ms))},
|
||||||
addAiPPT(item) {
|
addAiPPT(item) {
|
||||||
|
@ -364,8 +355,8 @@ export default {
|
||||||
// 开始上课
|
// 开始上课
|
||||||
startClass(item, classObj) {
|
startClass(item, classObj) {
|
||||||
// 关闭状态,打开上课相关功能(已打开,忽略)
|
// 关闭状态,打开上课相关功能(已打开,忽略)
|
||||||
const iscourse = !!sessionStore.get('curr.classcourse')
|
// const id = sessionStore.has('activeClass.id') ? sessionStore.get('activeClass.id') : null
|
||||||
if (iscourse) return ElMessage.warning('公屏已打开,请勿重复操作')
|
// if (id && id == item.id) return ElMessage.warning('当前正在上课,请勿重复操作')
|
||||||
// 当前上课-store
|
// 当前上课-store
|
||||||
sessionStore.set('activeClass', item)
|
sessionStore.set('activeClass', item)
|
||||||
this.activeClass = item
|
this.activeClass = item
|
||||||
|
@ -376,8 +367,7 @@ export default {
|
||||||
this.$refs.calssRef.open(item.fileId, classObj)
|
this.$refs.calssRef.open(item.fileId, classObj)
|
||||||
}
|
}
|
||||||
if(item.fileFlag === 'aippt') {
|
if(item.fileFlag === 'aippt') {
|
||||||
if (!!classObj) this.changeClass('continue', classObj) // 继续上课
|
this.$refs.calssRef.open(item.fileId, classObj)
|
||||||
else this.$refs.calssRef.open(item.fileId, classObj) // 新开课
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 继续上课-apt
|
// 继续上课-apt
|
||||||
|
@ -385,19 +375,7 @@ export default {
|
||||||
switch(type) {
|
switch(type) {
|
||||||
case 'continue': { // 继续上课
|
case 'continue': { // 继续上课
|
||||||
const aptFileId = row.entpcoursefileid
|
const aptFileId = row.entpcoursefileid
|
||||||
const res = await getEntpcoursefile(aptFileId)
|
this.$refs.calssRef.open(aptFileId, row)
|
||||||
if (res.code == 200) {
|
|
||||||
const resource = res.data
|
|
||||||
if (resource.filetype != 'aippt') this.$refs.calssRef.open(aptFileId, row)
|
|
||||||
else {
|
|
||||||
if (!!sessionStore.get('curr.classcourse')) return ElMessage.warning('公屏已打开,请勿重复操作')
|
|
||||||
const msgEl = ElMessage.warning({message:'正在打开公屏,请稍后...',duration: 0})
|
|
||||||
setTimeout(()=>{
|
|
||||||
msgEl.close()
|
|
||||||
this.openPublicScreen('class', resource, row) // 打开公屏-窗口
|
|
||||||
}, 2000)
|
|
||||||
}
|
|
||||||
} else ElMessage.error(res.msg||'获取课件信息失败')
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 'close': { // 关闭上课
|
case 'close': { // 关闭上课
|
||||||
|
@ -450,7 +428,16 @@ export default {
|
||||||
if (row.fileFlag === 'aippt' && !!row.fileId) {
|
if (row.fileFlag === 'aippt' && !!row.fileId) {
|
||||||
const res = await getEntpcoursefile(row.fileId)
|
const res = await getEntpcoursefile(row.fileId)
|
||||||
if (res && res.code === 200) {
|
if (res && res.code === 200) {
|
||||||
this.openPublicScreen('edit', res.data, row) // 打开公屏-窗口
|
sessionStore.set('curr.resource', res.data) // 缓存当前资源信息
|
||||||
|
sessionStore.set('curr.smarttalk', row) // 缓存当前文件smarttalk
|
||||||
|
createWindow('open-win', {
|
||||||
|
url: '/pptist', // 窗口关闭时,清除缓存
|
||||||
|
close: () => {
|
||||||
|
sessionStore.set('curr.resource', null) // 清除缓存
|
||||||
|
sessionStore.set('curr.smarttalk', null) // 清除缓存
|
||||||
|
this.asyncAllFile() // 刷新资源列表
|
||||||
|
}
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
ElMessage.warning(res.msg||'文件获取异常!')
|
ElMessage.warning(res.msg||'文件获取异常!')
|
||||||
}
|
}
|
||||||
|
@ -461,7 +448,6 @@ export default {
|
||||||
}
|
}
|
||||||
case 'wsApp': { // 发送app端待开课消息
|
case 'wsApp': { // 发送app端待开课消息
|
||||||
// console.log('wsApp', row)
|
// console.log('wsApp', row)
|
||||||
if (!!sessionStore.get('curr.classcourse')) return ElMessage.warning('公屏已打开,请勿重复操作')
|
|
||||||
const head = MsgEnum.HEADS.MSG_0000
|
const head = MsgEnum.HEADS.MSG_0000
|
||||||
const data = { id: row.id }
|
const data = { id: row.id }
|
||||||
const type = ChatWs.TYPES.single
|
const type = ChatWs.TYPES.single
|
||||||
|
@ -476,38 +462,24 @@ export default {
|
||||||
msgEl.close() // 关闭提示
|
msgEl.close() // 关闭提示
|
||||||
const resource = res?.data||{}
|
const resource = res?.data||{}
|
||||||
const classcourse = row
|
const classcourse = row
|
||||||
this.openPublicScreen('class',resource, classcourse) // 打开公屏-窗口
|
sessionStore.set('curr.resource', resource) // 缓存当前资源信息
|
||||||
|
sessionStore.set('curr.classcourse', classcourse) // 缓存当前当前上课
|
||||||
|
createWindow('open-win', {
|
||||||
|
url: '/pptist', // 窗口关闭时,清除缓存
|
||||||
|
close: () => {
|
||||||
|
sessionStore.set('curr.resource', null) // 清除缓存
|
||||||
|
sessionStore.set('curr.classcourse', null) // 清除缓存
|
||||||
|
}
|
||||||
|
})
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
default:
|
default:
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
|
||||||
* description 打开公屏
|
|
||||||
* @param {string} type 类型 edit 打开 class 上课
|
|
||||||
* @param {object} resource 资源信息
|
|
||||||
* @param {object} currData 当前数据 type: edit/class 备课信息 | 课堂信息
|
|
||||||
*/
|
|
||||||
openPublicScreen(type, resource, currData) {
|
|
||||||
sessionStore.set('curr.resource', resource) // 缓存当前资源信息
|
|
||||||
if (type=='edit') sessionStore.set('curr.smarttalk', currData) // 缓存当前文件smarttalk
|
|
||||||
else sessionStore.set('curr.classcourse', currData) // 缓存当前当前上课
|
|
||||||
createWindow('open-win', {
|
|
||||||
url: '/pptist', // 窗口关闭时,清除缓存
|
|
||||||
close: () => {
|
|
||||||
sessionStore.set('curr.resource', null) // 清除缓存
|
|
||||||
if (type=='edit') {
|
|
||||||
sessionStore.set('curr.smarttalk', null) // 清除缓存
|
|
||||||
this.asyncAllFile() // 刷新资源列表
|
|
||||||
} else sessionStore.set('curr.classcourse', null) // 清除缓存
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
closeChange() { // 上课弹窗被关闭-触发
|
closeChange() { // 上课弹窗被关闭-触发
|
||||||
// console.log('关闭上课弹窗')
|
// console.log('关闭上课弹窗')
|
||||||
this.activeClass = null
|
// this.activeClass = null
|
||||||
sessionStore.delete('activeClass')
|
sessionStore.delete('activeClass')
|
||||||
},
|
},
|
||||||
initReserv(id) {
|
initReserv(id) {
|
||||||
|
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-dialog v-model="model" class="preview-drawer" :title="row.fileShowName" :modal="true" :destroy-on-close="true" :with-header="false" :append-to-body="true"
|
|
||||||
width="60%">
|
|
||||||
<video style="margin: 0 auto;" :src="row.fileFullPath" controls autoplay></video>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
const model = defineModel()
|
|
||||||
const props = defineProps({
|
|
||||||
row: {
|
|
||||||
type: Object,
|
|
||||||
default(){
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.header-close {
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,214 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="page-resource flex">
|
|
||||||
<!-- 左侧 教材 目录 -->
|
|
||||||
<div class="page-right">
|
|
||||||
<!-- 排序 -->
|
|
||||||
<div style="margin-left: 5px;margin-top: 10px;height: 45px;">
|
|
||||||
<el-form size="large">
|
|
||||||
<el-form-item label="排序:">
|
|
||||||
<div
|
|
||||||
:class="['score-circle', { 'active': active == item.active }]"
|
|
||||||
v-for="(item,index) in screenList" :key="index" @click="chooseItem(item)">
|
|
||||||
<el-text
|
|
||||||
:style="{fontWeight:'bold', color: active == item.active ? 'rgb(57, 184, 244)':'rgb(131,131,131)' }"
|
|
||||||
size="large">{{ item.title }}</el-text>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<el-scrollbar>
|
|
||||||
<el-empty v-if="!sourceStore.result.list.length" description="暂无数据" />
|
|
||||||
<div class="list-content">
|
|
||||||
<div class="list-container" v-loading="loading">
|
|
||||||
<div v-for="(item, index) in sourceStore.result.list" :key="index" class="content">
|
|
||||||
<div class="content-list">
|
|
||||||
<!-- 封面 -->
|
|
||||||
<el-image style="width: 100%;border-radius: 8px;" :src="item.coverPic" fit="contain" @click="chooseVedio(item)"/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- 标题 -->
|
|
||||||
<div style="text-align: left;">
|
|
||||||
<el-text>{{ item.fileShowName }}</el-text>
|
|
||||||
</div>
|
|
||||||
<!-- 观看人数 -->
|
|
||||||
<!-- <div style="text-align: left;display: flex;align-items: center;">
|
|
||||||
<el-icon type="info"><View /></el-icon><el-text size="small" type="info">{{ item.nums }}</el-text>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
<div class="pagination-box">
|
|
||||||
<el-pagination
|
|
||||||
v-model:current-page="sourceStore.query.pageNum"
|
|
||||||
v-model:page-size="sourceStore.query.pageSize"
|
|
||||||
:page-sizes="[10, 20, 30, 50]"
|
|
||||||
background
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="sourceStore.result.total"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 播放视频 -->
|
|
||||||
<VideoLog v-model="isShow" :row="curRow"></VideoLog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import VideoLog from './components/VideoLog.vue'
|
|
||||||
import useResoureStore from '../store'
|
|
||||||
const sourceStore = useResoureStore()
|
|
||||||
// 排序列表
|
|
||||||
const screenList = ref([
|
|
||||||
{
|
|
||||||
title: '最新发布',
|
|
||||||
active: 1,
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const active = ref(1)
|
|
||||||
// 弹出视频
|
|
||||||
const isShow = ref(false)
|
|
||||||
const curRow = ref({})
|
|
||||||
// loading框
|
|
||||||
const loading = computed(() => sourceStore.loading)
|
|
||||||
const chooseItem = (item) => {
|
|
||||||
active.value = item.active
|
|
||||||
}
|
|
||||||
// 分页change
|
|
||||||
const handleSizeChange = (limit) => {
|
|
||||||
sourceStore.query.pageSize = limit
|
|
||||||
sourceStore.handleQuery()
|
|
||||||
}
|
|
||||||
const handleCurrentChange = (page) => {
|
|
||||||
sourceStore.query.pageNum = page
|
|
||||||
sourceStore.handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const chooseVedio = (item) => {
|
|
||||||
isShow.value = true
|
|
||||||
curRow.value = item
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page-resource {
|
|
||||||
height: 100%;
|
|
||||||
padding: 10px 15px 0;
|
|
||||||
|
|
||||||
.page-right {
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.icon-jiahao {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 3px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.create-btn {
|
|
||||||
font-size: 13px;
|
|
||||||
padding: 5px 13px;
|
|
||||||
}
|
|
||||||
.list-content {
|
|
||||||
border-radius: 8px;
|
|
||||||
height: 90%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.list-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
border-radius: 8px;
|
|
||||||
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
width: calc(20%);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
padding: 5px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
// justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
// box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
.content-list{
|
|
||||||
height: 150px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-icon {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #409eff;
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-text {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #303133;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-bottom {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 过渡动画 */
|
|
||||||
.fade-enter-active, .fade-leave-active {
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-enter, .fade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.score-circle {
|
|
||||||
background-color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 5px;
|
|
||||||
width: auto;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-circle.active {
|
|
||||||
background-color: rgb(218, 236, 255);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.pagination-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
height: 65px;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -3,21 +3,19 @@
|
||||||
<el-row justify="space-between">
|
<el-row justify="space-between">
|
||||||
<el-col :span="12" class="tab-btns flex">
|
<el-col :span="12" class="tab-btns flex">
|
||||||
<el-button text v-for="item in sourceStore.resourceTypeList" :key="item.id"
|
<el-button text v-for="item in sourceStore.resourceTypeList" :key="item.id"
|
||||||
:type="sourceStore.activeIndex == item.id ? 'primary' : ''"
|
:type="sourceStore.query.fileFlags == item.value ? 'primary' : ''"
|
||||||
@click="sourceStore.changeType(item)" :disabled="item.disabled">{{ item.label
|
@click="sourceStore.changeType(item.value)" :disabled="item.disabled">{{ item.label
|
||||||
}}</el-button>
|
}}</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<template v-if="!isExper">
|
<el-col :span="12" class="search-box flex" v-if="isThird">
|
||||||
<el-col :span="12" class="search-box flex" v-if="isThird">
|
<el-input v-model="sourceStore.thirdQuery.title" @input="onchangeInput()" style="width: 240px"
|
||||||
<el-input v-model="sourceStore.thirdQuery.title" @input="onchangeInput()" style="width: 240px"
|
placeholder="请输入关键词" />
|
||||||
placeholder="请输入关键词" />
|
</el-col>
|
||||||
</el-col>
|
<el-col :span="12" class="search-box flex" v-else>
|
||||||
<el-col :span="12" class="search-box flex" v-else>
|
<el-input v-model="sourceStore.query.fileName" @input="onchangeInput()" style="width: 240px"
|
||||||
<el-input v-model="sourceStore.query.fileName" @input="onchangeInput()" style="width: 240px"
|
placeholder="请输入关键词" />
|
||||||
placeholder="请输入关键词" />
|
</el-col>
|
||||||
</el-col>
|
|
||||||
</template>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<!-- 第三方资源筛选-->
|
<!-- 第三方资源筛选-->
|
||||||
|
@ -36,24 +34,22 @@
|
||||||
<el-col :span="24" class="query-row flex">
|
<el-col :span="24" class="query-row flex">
|
||||||
<div class="flex row-left">
|
<div class="flex row-left">
|
||||||
<!-- 第三方资源筛选-->
|
<!-- 第三方资源筛选-->
|
||||||
<template v-if="!isExper">
|
<el-select v-if="isThird" v-model="sourceStore.thirdQuery.type" @change="sourceStore.thirdChangeType"
|
||||||
<el-select v-if="isThird" v-model="sourceStore.thirdQuery.type" @change="sourceStore.thirdChangeType"
|
style="width: 110px">
|
||||||
style="width: 110px">
|
<el-option v-for="item in coursewareTypeList" :key="item.value" :label="item.label"
|
||||||
<el-option v-for="item in coursewareTypeList" :key="item.value" :label="item.label"
|
:value="item.value" />
|
||||||
:value="item.value" />
|
</el-select>
|
||||||
</el-select>
|
|
||||||
|
|
||||||
<el-select v-else v-model="sourceStore.query.fileSuffix" @change="sourceStore.changeSuffix"
|
<el-select v-else v-model="sourceStore.query.fileSuffix" @change="sourceStore.changeSuffix"
|
||||||
style="width: 110px">
|
style="width: 110px">
|
||||||
<el-option v-for="item in sourceStore.resourceFormatList" :key="item.value" :label="item.label"
|
<el-option v-for="item in sourceStore.resourceFormatList" :key="item.value" :label="item.label"
|
||||||
:value="item.value" />
|
:value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<el-button v-for="item in sourceStore.tabs" :key="item.id"
|
<el-button v-for="item in sourceStore.tabs" :key="item.id"
|
||||||
:type="sourceStore.query.fileSource == item.value ? 'primary' : ''"
|
:type="sourceStore.query.fileSource == item.value ? 'primary' : ''"
|
||||||
@click="sourceStore.changeTab(item.value)">{{
|
@click="sourceStore.changeTab(item.value)">{{
|
||||||
item.label }}</el-button>
|
item.label }}</el-button>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<slot name="add" />
|
<slot name="add" />
|
||||||
|
@ -67,10 +63,7 @@
|
||||||
import {watch,ref,onMounted} from 'vue'
|
import {watch,ref,onMounted} from 'vue'
|
||||||
import useResoureStore from '../store'
|
import useResoureStore from '../store'
|
||||||
import {coursewareTypeList} from '@/utils/resourceDict'
|
import {coursewareTypeList} from '@/utils/resourceDict'
|
||||||
// 是否是第三方资源
|
|
||||||
const isThird = ref(false)
|
const isThird = ref(false)
|
||||||
//判断是不是进入实验室
|
|
||||||
const isExper = ref(false)
|
|
||||||
const sourceStore = useResoureStore()
|
const sourceStore = useResoureStore()
|
||||||
// 防抖函数
|
// 防抖函数
|
||||||
const debounce = (fn, t) => {
|
const debounce = (fn, t) => {
|
||||||
|
@ -92,9 +85,6 @@ onMounted(() => {
|
||||||
watch(() => sourceStore.query.fileSource,() => {
|
watch(() => sourceStore.query.fileSource,() => {
|
||||||
sourceStore.query.fileSource === '第三方'?isThird.value = true:isThird.value = false
|
sourceStore.query.fileSource === '第三方'?isThird.value = true:isThird.value = false
|
||||||
})
|
})
|
||||||
watch(() => sourceStore.query.orderByColumn,() => {
|
|
||||||
sourceStore.query.orderByColumn === 'uploadTime'?isExper.value = true:isExper.value = false
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.resoure-search {
|
.resoure-search {
|
||||||
|
|
|
@ -1,14 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-resource flex">
|
<div class="page-resource flex">
|
||||||
<!--左侧 教材 目录-->
|
<!--左侧 教材 目录-->
|
||||||
<template v-if="!isExper">
|
<Third v-if="isThird" @node-click="getDataOther"></Third>
|
||||||
<Third v-if="isThird" @node-click="getDataOther"/>
|
<ChooseTextbook v-else @node-click="getData" />
|
||||||
<ChooseTextbook v-else @node-click="getData" />
|
|
||||||
</template>
|
|
||||||
<!-- 实验室的左侧树结构列表 -->
|
|
||||||
<template v-else>
|
|
||||||
<ExperimentBook @node-click="getExperData"/>
|
|
||||||
</template>
|
|
||||||
<div class="page-right">
|
<div class="page-right">
|
||||||
<!-- 搜索 -->
|
<!-- 搜索 -->
|
||||||
<ResoureSearch #add>
|
<ResoureSearch #add>
|
||||||
|
@ -24,14 +19,9 @@
|
||||||
>
|
>
|
||||||
</ResoureSearch>
|
</ResoureSearch>
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
<template v-if="!isExper">
|
<!-- 第三方列表-->
|
||||||
<!-- 第三方列表-->
|
<ThirdList v-if="isThird" />
|
||||||
<ThirdList v-if="isThird" />
|
<ResoureList v-else />
|
||||||
<ResoureList v-else />
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<ExperList/>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 上传弹窗 -->
|
<!-- 上传弹窗 -->
|
||||||
|
@ -43,12 +33,8 @@ import { onMounted, ref, toRaw,watch } from 'vue'
|
||||||
import useResoureStore from './store'
|
import useResoureStore from './store'
|
||||||
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
||||||
import Third from '@/components/choose-textbook/third.vue'
|
import Third from '@/components/choose-textbook/third.vue'
|
||||||
// 科学学科对应实验室
|
|
||||||
import ExperimentBook from '@/components/choose-textbook/experimentBook.vue'
|
|
||||||
import ResoureSearch from './container/resoure-search.vue'
|
import ResoureSearch from './container/resoure-search.vue'
|
||||||
import ResoureList from './container/resoure-list.vue'
|
import ResoureList from './container/resoure-list.vue'
|
||||||
// 实验列表
|
|
||||||
import ExperList from './container/exper-list.vue'
|
|
||||||
import ThirdList from './container/third-list.vue'
|
import ThirdList from './container/third-list.vue'
|
||||||
import uploadDialog from '@/components/upload-dialog/index.vue'
|
import uploadDialog from '@/components/upload-dialog/index.vue'
|
||||||
import uploaderState from '@/store/modules/uploader'
|
import uploaderState from '@/store/modules/uploader'
|
||||||
|
@ -62,8 +48,6 @@ const openDialog = () => {
|
||||||
}
|
}
|
||||||
//判断是否去查看第三方资源
|
//判断是否去查看第三方资源
|
||||||
const isThird = ref(false)
|
const isThird = ref(false)
|
||||||
//判断是不是进入实验室
|
|
||||||
const isExper = ref(false)
|
|
||||||
|
|
||||||
// 查询
|
// 查询
|
||||||
const getData = (data) => {
|
const getData = (data) => {
|
||||||
|
@ -89,7 +73,6 @@ const getData = (data) => {
|
||||||
// 头部 教材分析打开外部链接需要当前章节ID
|
// 头部 教材分析打开外部链接需要当前章节ID
|
||||||
localStorage.setItem('unitId', JSON.stringify({ levelFirstId, levelSecondId}))
|
localStorage.setItem('unitId', JSON.stringify({ levelFirstId, levelSecondId}))
|
||||||
}
|
}
|
||||||
// 查询第三方资源
|
|
||||||
const getDataOther = (data) => {
|
const getDataOther = (data) => {
|
||||||
sourceStore.thirdQuery.chapterId = data.chapterId
|
sourceStore.thirdQuery.chapterId = data.chapterId
|
||||||
sourceStore.thirdQuery.bookId = data.bookId
|
sourceStore.thirdQuery.bookId = data.bookId
|
||||||
|
@ -97,19 +80,6 @@ const getDataOther = (data) => {
|
||||||
sourceStore.thirdQuery.subjectId = data.subjectId
|
sourceStore.thirdQuery.subjectId = data.subjectId
|
||||||
sourceStore.handleQuery()
|
sourceStore.handleQuery()
|
||||||
}
|
}
|
||||||
// 查询科学实验室的资源
|
|
||||||
const getExperData = (data) => {
|
|
||||||
const { textBook, node } = data
|
|
||||||
if (node.parentNode) {
|
|
||||||
sourceStore.query.levelFirstId = node.parentNode.id
|
|
||||||
sourceStore.query.levelSecondId = node.id
|
|
||||||
} else {
|
|
||||||
sourceStore.query.levelFirstId = node.id
|
|
||||||
sourceStore.query.levelSecondId = ''
|
|
||||||
}
|
|
||||||
sourceStore.query.textbookId = node.rootid
|
|
||||||
sourceStore.handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提交文件
|
// 提交文件
|
||||||
const submitFile = (data) => {
|
const submitFile = (data) => {
|
||||||
|
@ -138,15 +108,6 @@ onMounted(() => {
|
||||||
watch(() => sourceStore.query.fileSource,() => {
|
watch(() => sourceStore.query.fileSource,() => {
|
||||||
sourceStore.query.fileSource === '第三方'?isThird.value = true:isThird.value = false
|
sourceStore.query.fileSource === '第三方'?isThird.value = true:isThird.value = false
|
||||||
})
|
})
|
||||||
watch(() => sourceStore.query.orderByColumn,() => {
|
|
||||||
if(sourceStore.query.orderByColumn === 'uploadTime'){
|
|
||||||
isExper.value = true
|
|
||||||
sourceStore.getCreate()
|
|
||||||
}else{
|
|
||||||
isExper.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -77,7 +77,6 @@ export default defineStore('resource', {
|
||||||
list: [],
|
list: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
},
|
},
|
||||||
activeIndex:1
|
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
handleQuery() {
|
handleQuery() {
|
||||||
|
@ -120,16 +119,7 @@ export default defineStore('resource', {
|
||||||
this.handleQuery()
|
this.handleQuery()
|
||||||
},
|
},
|
||||||
changeType(val) {
|
changeType(val) {
|
||||||
// 实验列表
|
this.query.fileFlags = val
|
||||||
if(val.label === '实验室'){
|
|
||||||
this.query.orderByColumn = 'uploadTime'
|
|
||||||
this.query.fileSuffix = 'mp4'
|
|
||||||
}else{
|
|
||||||
this.query.orderByColumn = 'createTime'
|
|
||||||
this.query.fileSuffix = ''
|
|
||||||
}
|
|
||||||
this.query.fileFlags = val.value
|
|
||||||
this.activeIndex = val.id
|
|
||||||
this.handleQuery()
|
this.handleQuery()
|
||||||
},
|
},
|
||||||
thirdChangeType(val) {
|
thirdChangeType(val) {
|
||||||
|
@ -146,11 +136,7 @@ export default defineStore('resource', {
|
||||||
this.handleQuery()
|
this.handleQuery()
|
||||||
},
|
},
|
||||||
getCreate(){
|
getCreate(){
|
||||||
// 实验的时候也需要进入
|
if(this.query.fileSource == '平台' || this.query.fileSource == '第三方' ){
|
||||||
if((this.query.fileSource == '平台' || this.query.fileSource == '第三方') || this.query.orderByColumn == 'uploadTime' ){
|
|
||||||
if(this.query.orderByColumn == 'uploadTime'){
|
|
||||||
this.query.fileSource = '平台'
|
|
||||||
}
|
|
||||||
this.isCreate = hasPermission(['platformmanager'])
|
this.isCreate = hasPermission(['platformmanager'])
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
|
|
Loading…
Reference in New Issue