dlsx
/
Teaching_integration_platform_template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新 banner

Browse Source
develoop
JayChou 3 months ago
parent 5a4398f8cb
commit d8550d2564
10 changed files with 265 additions and 204 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/Layout/main/index.vue
  2. 39
      src/permissions.ts
  3. 19
      src/store/module/user.ts
  4. 2
      src/views/course/components/courseTree.vue
  5. 359
      src/views/course/index.vue
  6. 5
      src/views/home/index.vue
  7. 5
      src/views/knowledge/index.vue
  8. 20
      src/views/pedagogicalReform/index.vue
  9. 1
      src/views/professionalProfile/index.vue
  10. 13
      src/views/scientificResearch/index.vue

6
src/Layout/main/index.vue
Unescape View File

@ -4,7 +4,11 @@
<router-view :key="$route.path" /> <router-view :key="$route.path" />
</transition> </transition>
</section> --> </section> -->
<router-view></router-view> <div class="view-container">
<div class="banner"></div>
<div class="container"> <router-view></router-view></div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

39
src/permissions.ts
Unescape View File

@ -1,19 +1,34 @@
// 引入路由 // 引入路由
import router from '@/router/index' import router from '@/router/index'
import pinia from './store' import pinia from './store'
import { constRouter } from '@/router/module/constRouter' import { constRouter } from '@/router/module/constRouter'
import userStore from '@/store/module/user'
import useSettingStore from '@/store/module/setting' import useSettingStore from '@/store/module/setting'
const settingStore = useSettingStore(pinia) //重新指向pinia仓储 const settingStore = useSettingStore(pinia) //重新指向pinia仓储
const useUserStore = userStore(pinia)
router.beforeEach((to, _from, next) => { router.beforeEach((to, _from, next) => {
let index = constRouter[0].children.findIndex((item:any) => { console.log(to.query)
console.log(to.path,item.path); // 判断是否登录
if (!useUserStore.token) {
return to.path.includes(item.path) // http://10.121.2.26:8866/portal#/home?code=abcdef
if (Object.keys(to.query).length) {
}); console.log('有参数')
console.log(index); // 传入token
useUserStore.verifyToken('1111111')
settingStore.setuseIndex(index) } else {
document.title = `教学一体化-${to.meta.title}` // window.location.replace('http://39.106.16.162/')
next() }
}
let index = constRouter[0].children.findIndex((item: any) => {
// console.log(to.path,item.path);
return to.path.includes(item.path)
})
// console.log(index);
settingStore.setuseIndex(index)
document.title = `教学一体化-${to.meta.title}`
next()
}) })

19
src/store/module/user.ts
Unescape View File

@ -0,0 +1,19 @@
import { defineStore } from 'pinia'
const userStore = defineStore('userStore', {
state() {
return {
token: '',
}
},
actions: {
async verifyToken(token:string){
const res = await verifyTokenApi({token})
if(res){
this.token = token
}else{
return false
}
}
},
})
export default userStore

2
src/views/course/components/courseTree.vue
Unescape View File

@ -2,7 +2,7 @@
<div class="tree-box"> <div class="tree-box">
<el-tree <el-tree
default-expand-all default-expand-all
style="max-width: 600px" style="max-width: 400px"
:data="chapterList" :data="chapterList"
@node-click="handleNodeClick" @node-click="handleNodeClick"
:props="defaultProps" :props="defaultProps"

359
src/views/course/index.vue
Unescape View File

@ -1,128 +1,136 @@
<template> <template>
<div class="view-container"> <div class="container" v-if="loading">
<div class="banner"></div> <div class="left" v-loading="tabLoading">
<div class="container" v-if="loading"> <div class="gruop">
<div class="left" v-loading="tabLoading"> <Graph
<div class="gruop"> :width="1195"
<Graph :height="800"
:width="1195" :index="courseId"
:height="800" :id="courseId"
:index="courseId" v-show="flag === 1"
:id="courseId" @clickGraph="clickGraphChange"
v-show="flag === 1" />
@clickGraph="clickGraphChange" <div class="video" v-if="flag === 2">
<video id="video" width="100%" height="100%" controls>
<source :src="videoUrl" type="video/mp4" />
您的浏览器不支持视频播放
</video>
</div>
<div class="pdf" v-if="flag === 3">
<!-- <vuePdf /> -->
<VuePdf
v-for="page in numOfPages"
:key="page"
:src="pdfUrl"
:page="page"
/> />
<div class="video" v-if="flag === 2">
<video id="video" width="100%" height="100%" controls>
<source :src="videoUrl" type="video/mp4" />
您的浏览器不支持视频播放
</video>
</div>
<div class="pdf" v-if="flag === 3">
<!-- <vuePdf /> -->
<VuePdf
v-for="page in numOfPages"
:key="page"
:src="pdfUrl"
:page="page"
/>
</div>
<div class="docx" v-if="flag === 4">
<vue-office-docx :src="docx" style="width: 100%; height: 100%" />
</div>
<div v-show="flag != 1" class="back" @click="flag = 1">
<el-icon><Back /></el-icon>
</div>
</div> </div>
<div class="docx" v-if="flag === 4">
<vue-office-docx :src="docx" style="width: 100%; height: 100%" />
</div>
<div v-show="flag != 1" class="back" @click="flag = 1">
<el-icon><Back /></el-icon>
</div>
</div>
<div class="resource"> <div class="cours-target">
<el-tabs <div class="title">课程目标</div>
v-model="activeName" <el-table :data="tableData" border style="width: 100%">
class="demo-tabs" <el-table-column prop="date" label="课程分项目标"/>
@tab-click="handleClick" <el-table-column prop="name" label="支撑知识点"/>
v-loading="isTabsLoading" <el-table-column prop="address" width="180" label="占比" />
> </el-table>
<el-tab-pane label="视频" name="1"> </div>
<div class="files-box"> <div class="resource">
<div <el-tabs
class="item" v-model="activeName"
v-for="item in courseFilesList.video" class="demo-tabs"
:key="item.id" @tab-click="handleClick"
@click="clickFile(item, 2)" v-loading="isTabsLoading"
> >
{{ item.name }} <el-tab-pane label="视频" name="1">
</div> <div class="files-box">
<div
class="item"
v-for="item in courseFilesList.video"
:key="item.id"
@click="clickFile(item, 2)"
>
{{ item.name }}
</div> </div>
</el-tab-pane> </div>
<el-tab-pane label="PPT" name="2"> </el-tab-pane>
<div class="files-box"> <el-tab-pane label="PPT" name="2">
<div <div class="files-box">
class="item" <div
v-for="item in courseFilesList.PPT" class="item"
:key="item.id" v-for="item in courseFilesList.PPT"
@click="clickFile(item, 3)" :key="item.id"
> @click="clickFile(item, 3)"
{{ item.name }} >
</div> {{ item.name }}
</div> </div>
</el-tab-pane> </div>
<el-tab-pane label="试题" name="3">Role</el-tab-pane> </el-tab-pane>
<el-tab-pane label="文档" name="4"> <el-tab-pane label="试题" name="3">Role</el-tab-pane>
<div class="files-box"> <el-tab-pane label="文档" name="4">
<div <div class="files-box">
class="item" <div
v-for="item in courseFilesList.word" class="item"
:key="item.id" v-for="item in courseFilesList.word"
@click="clickFile(item, 4)" :key="item.id"
> @click="clickFile(item, 4)"
{{ item.name }} >
</div> {{ item.name }}
</div> </div>
</el-tab-pane> </div>
<el-tab-pane label="其他" name="5"> </el-tab-pane>
<div class="files-box"> <el-tab-pane label="其他" name="5">
<div <div class="files-box">
class="item" <div
v-for="item in courseFilesList.other" class="item"
:key="item.id" v-for="item in courseFilesList.other"
@click="download(item)" :key="item.id"
> @click="download(item)"
{{ item.name }} >
</div> {{ item.name }}
</div> </div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div class="right">
<div class="course-info">
<div class="image">
<img src="../../assets/images/kcfm.jpg" alt="" />
</div>
<div class="description">
<div class="description-box">
《Vues 设计与实现》这本书的简介： 《Vues
设计与实现》是一本深入剖析 Vues 框架核心原理的权威著作。
本书首先会为读者搭建起一个坚实的知识基础，详细介绍 Vues
的发展历程和其在前端开发领域的重要地位。接着，深入探讨 Vues
的设计理念，让读者理解其背后的创新思维和解决问题的独特视角。
在实现方面，书中通过大量的代码示例和详细的解释，逐步拆解 Vues
的内部机制，包括数据响应式系统、虚拟 DOM
算法、组件化架构等核心模块。读者能够清晰地了解到 Vues
是如何高效地处理数据更新、渲染页面以及优化性能的。
不仅如此，本书还会探讨 Vues
与其他前端技术的集成和协作，帮助读者在实际项目中更好地运用 Vues
来构建复杂而强大的应用程序。同时，书中也提供了丰富的实战案例和最佳实践，让读者能够将所学知识迅速应用到实际开发中。
无论是前端开发的新手，还是经验丰富的开发者，都能从《Vues
设计与实现》中获得宝贵的知识和技能，从而提升自己的开发水平，打造出更加出色的前端应用。它不仅是一本技术指南，更是一本启发思考、引领创新的宝典，为读者打开了深入理解和掌握
Vues 框架的大门。
</div> </div>
</div> </el-tab-pane>
</el-tabs>
</div>
</div>
<div class="right">
<div class="course-info">
<div class="image">
<img src="../../assets/images/kcfm.jpg" alt="" />
</div> </div>
<div class="chapter"> <div class="description">
<courseTree :chapterList="chapterList" /> <div class="description-box">
《Vues 设计与实现》这本书的简介： 《Vues 设计与实现》是一本深入剖析
Vues 框架核心原理的权威著作。
本书首先会为读者搭建起一个坚实的知识基础，详细介绍 Vues
的发展历程和其在前端开发领域的重要地位。接着，深入探讨 Vues
的设计理念，让读者理解其背后的创新思维和解决问题的独特视角。
在实现方面，书中通过大量的代码示例和详细的解释，逐步拆解 Vues
的内部机制，包括数据响应式系统、虚拟 DOM
算法、组件化架构等核心模块。读者能够清晰地了解到 Vues
是如何高效地处理数据更新、渲染页面以及优化性能的。
不仅如此，本书还会探讨 Vues
与其他前端技术的集成和协作，帮助读者在实际项目中更好地运用 Vues
来构建复杂而强大的应用程序。同时，书中也提供了丰富的实战案例和最佳实践，让读者能够将所学知识迅速应用到实际开发中。
无论是前端开发的新手，还是经验丰富的开发者，都能从《Vues
设计与实现》中获得宝贵的知识和技能，从而提升自己的开发水平，打造出更加出色的前端应用。它不仅是一本技术指南，更是一本启发思考、引领创新的宝典，为读者打开了深入理解和掌握
Vues 框架的大门。
</div>
</div> </div>
</div> </div>
<div class="chapter">
<courseTree :chapterList="chapterList" />
</div>
<div class="student-list">
</div>
</div> </div>
</div> </div>
</template> </template>
@ -131,7 +139,7 @@
import { ref } from 'vue' import { ref } from 'vue'
import Graph from '../home/components/Graph.vue' import Graph from '../home/components/Graph.vue'
import courseTree from './components/courseTree.vue' import courseTree from './components/courseTree.vue'
import { useRoute,useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { getCourseChapter, getCourseFiles } from '@/api/course' import { getCourseChapter, getCourseFiles } from '@/api/course'
import { ElLoading } from 'element-plus' import { ElLoading } from 'element-plus'
import { filterFilesType } from '@/utils/filters' import { filterFilesType } from '@/utils/filters'
@ -161,7 +169,28 @@ const getCourseChapterEvent = async () => {
} }
getCourseChapterEvent() getCourseChapterEvent()
const activeName = ref<string>('1') const activeName = ref<string>('1')
const tableData = [
{
date: 'Vue.js设计与实现',
name: 'HTML&CSS&JavaScript',
address: '10%',
},
{
date: 'Vue.js设计与实现',
name: 'HTML&CSS&JavaScript',
address: '20%',
},
{
date: 'Vue.js设计与实现',
name: 'HTML&CSS&JavaScript',
address: '20%',
},
{
date: 'Vue.js设计与实现',
name: 'HTML&CSS&JavaScript',
address: '20%',
},
]
const handleClick = (e: any) => { const handleClick = (e: any) => {
console.log(e) console.log(e)
} }
@ -172,7 +201,7 @@ const courseFilesList = ref<any>({})
const getCourseFilesEvent = async () => { const getCourseFilesEvent = async () => {
isTabsLoading.value = true isTabsLoading.value = true
const res: any = await getCourseFiles({ const res: any = await getCourseFiles({
courseId: '2cd6b5b62c344fd0becff6010cba566e', courseId: '2cd6b5b62c344fd0becff6010cba566e',
}) })
// console.log(filterFilesType(res)); // console.log(filterFilesType(res));
courseFilesList.value = filterFilesType(res.data) courseFilesList.value = filterFilesType(res.data)
@ -200,13 +229,12 @@ const clickFile = async (file: any, index: number) => {
videoUrl.value = file.url videoUrl.value = file.url
flag.value = index flag.value = index
tabLoading.value = false tabLoading.value = false
} else if (index === 3) { } else if (index === 3) {
pdfUrl.value = `http://39.106.16.162:8080/api/resource/read?filename=${file.name}` pdfUrl.value = `http://39.106.16.162:8080/api/resource/read?filename=${file.name}`
const loadingTask = createLoadingTask(pdfUrl.value) const loadingTask = createLoadingTask(pdfUrl.value)
loadingTask.promise.then((pdf:any) => { loadingTask.promise.then((pdf: any) => {
numOfPages.value = pdf.numPages numOfPages.value = pdf.numPages
}) })
flag.value = index flag.value = index
tabLoading.value = false tabLoading.value = false
// const res: any = await getFileStreams({ filename: file.name }) // const res: any = await getFileStreams({ filename: file.name })
@ -214,51 +242,50 @@ const clickFile = async (file: any, index: number) => {
// fetch(res.filePath).then((resoinse) => { // fetch(res.filePath).then((resoinse) => {
// console.log(resoinse.blob()) // console.log(resoinse.blob())
// }) // })
}else if(index ===4){ } else if (index === 4) {
docx.value = `http://39.106.16.162:8080/api/resource/read?filename=${file.name}` docx.value = `http://39.106.16.162:8080/api/resource/read?filename=${file.name}`
flag.value = index flag.value = index
tabLoading.value = false tabLoading.value = false
} }
} }
// 下载资源 // 下载资源
const download = (file:any) => { const download = (file: any) => {
console.log(file); console.log(file)
downloadImage(file.url,file.name) downloadImage(file.url, file.name)
} }
function downloadImage(imageUrl:any, filename:any) { function downloadImage(imageUrl: any, filename: any) {
fetch(imageUrl) fetch(imageUrl)
.then(response => response.blob()) .then((response) => response.blob())
.then(blob => { .then((blob) => {
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob)
const a = document.createElement('a'); const a = document.createElement('a')
a.style.display = 'none'; a.style.display = 'none'
a.href = url; a.href = url
a.download = filename; a.download = filename
document.body.appendChild(a); document.body.appendChild(a)
a.click(); a.click()
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url)
document.body.removeChild(a); document.body.removeChild(a)
}) })
.catch(error => console.error('Error downloading the image', error)); .catch((error) => console.error('Error downloading the image', error))
} }
let nodeID = 0
// 点击节点 // 点击节点
const clickGraphChange = async(id:number) => { const clickGraphChange = async (id: number) => {
console.log(id); if (nodeID === id) {
Router.push({ Router.push({
path:'/knowledge', path: '/knowledge',
query:{id} query: { id },
}) })
} else {
nodeID = id
}
// isTabsLoading.value = true // isTabsLoading.value = true
// const res = await getCourseOneFiles({KnowId:227}) // const res = await getCourseOneFiles({KnowId:227})
// console.log(res); // console.log(res);
// courseFilesList.value = filterFilesType(res.data) // courseFilesList.value = filterFilesType(res.data)
// isTabsLoading.value = false // isTabsLoading.value = false
} }
</script> </script>
@ -340,6 +367,20 @@ const clickGraphChange = async(id:number) => {
} }
} }
} }
.cours-target {
width: 100%;
height: 300px;
margin-top: 20px;
padding: 20px;
background-color: #fff;
.title{
font-size: 16px;
height: 40px;
line-height: 40px;
padding-left: 5px;
font-weight: 700;
}
}
} }
.right { .right {
width: 400px; width: 400px;
@ -372,7 +413,13 @@ const clickGraphChange = async(id:number) => {
} }
.chapter { .chapter {
overflow-y: auto; overflow-y: auto;
height: 700px; height: 500px;
width: 100%;
margin-top: 20px;
background-color: #fff;
}
.student-list{
height: 500px;
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: #fff;
@ -387,7 +434,7 @@ const clickGraphChange = async(id:number) => {
::-webkit-scrollbar-button { ::-webkit-scrollbar-button {
background-color: #fff; background-color: #fff;
} }
:deep(.docx-wrapper){ :deep(.docx-wrapper) {
background-color: #fff; background-color: #fff;
} }
</style> </style>

5
src/views/home/index.vue
Unescape View File

@ -1,8 +1,4 @@
<template> <template>
<div class="view-container">
<div class="banner">
<div class="title">课图——开源智慧课程管理系统，首次开源</div>
</div>
<div class="loop" v-for="(item,index) in couresData.content" :key="item.id"> <div class="loop" v-for="(item,index) in couresData.content" :key="item.id">
<div class="main" v-if="index % 2 === 0"> <div class="main" v-if="index % 2 === 0">
<!-- <div class="course-list">111</div> --> <!-- <div class="course-list">111</div> -->
@ -69,7 +65,6 @@
<div class="get-more"> <div class="get-more">
<div class="btn" @click="getMore">{{btnTexst}}</div> <div class="btn" @click="getMore">{{btnTexst}}</div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

5
src/views/knowledge/index.vue
Unescape View File

@ -1,7 +1,5 @@
<template> <template>
<div class="view-container"> <div class="container" v-if="loading">
<div class="banner"></div>
<div class="container" v-if="loading">
<div class="left" v-loading="tabLoading"> <div class="left" v-loading="tabLoading">
<div class="gruop"> <div class="gruop">
<div class="no" v-if="flag === 1">当前无播放资源</div> <div class="no" v-if="flag === 1">当前无播放资源</div>
@ -111,7 +109,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

20
src/views/pedagogicalReform/index.vue
Unescape View File

@ -1,20 +1,14 @@
<template> <template>
<div class="view-container"> <div>
<div class="banner"></div> 111
<div class="container">教学改革</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang='ts' setup>
import {} from 'vue' // import { onMounted, reactive, ref, toRefs, watch } from 'vue'
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.view-container {
height: 100vh;
.container {
width: $base-container-width;
margin: 0 auto;
}
}
</style> </style>

1
src/views/professionalProfile/index.vue
Unescape View File

@ -1,6 +1,5 @@
<template> <template>
<div class="view-container"> <div class="view-container">
<div class="banner"></div>
<div class="container"> <div class="container">
<div class="title">知识图谱</div> <div class="title">知识图谱</div>
<div class="graph-box"> <div class="graph-box">

13
src/views/scientificResearch/index.vue
Unescape View File

@ -1,8 +1,5 @@
<template> <template>
<div class="view-container"> <div>111</div>
<div class="banner"></div>
<div class="container">科学研究</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -10,11 +7,5 @@ import {} from 'vue'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.view-container {
height: 100vh;
.container {
width: $base-container-width;
margin: 0 auto;
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save