From d8550d2564264e591586f6fbc246b1283dfcd1da Mon Sep 17 00:00:00 2001
From: JayChou <2064936853@qq.com>
Date: Tue, 20 Aug 2024 09:29:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20banner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Layout/main/index.vue                  |   6 +-
 src/permissions.ts                         |  39 ++-
 src/store/module/user.ts                   |  19 ++
 src/views/course/components/courseTree.vue |   2 +-
 src/views/course/index.vue                 | 359 ++++++++++++---------
 src/views/home/index.vue                   |   5 -
 src/views/knowledge/index.vue              |   5 +-
 src/views/pedagogicalReform/index.vue      |  20 +-
 src/views/professionalProfile/index.vue    |   1 -
 src/views/scientificResearch/index.vue     |  13 +-
 10 files changed, 265 insertions(+), 204 deletions(-)
 create mode 100644 src/store/module/user.ts

diff --git a/src/Layout/main/index.vue b/src/Layout/main/index.vue
index d2eaa92..5c79980 100644
--- a/src/Layout/main/index.vue
+++ b/src/Layout/main/index.vue
@@ -4,7 +4,11 @@
         <router-view :key="$route.path" />
     </transition>
   </section> -->
-  <router-view></router-view>
+  <div class="view-container">
+    <div class="banner"></div>
+    <div class="container"> <router-view></router-view></div>
+  </div>
+ 
 </template>
 
 <script lang="ts" setup>
diff --git a/src/permissions.ts b/src/permissions.ts
index 6d6d78a..8e7bdac 100644
--- a/src/permissions.ts
+++ b/src/permissions.ts
@@ -1,19 +1,34 @@
 // 引入路由
 import router from '@/router/index'
-import pinia  from './store'
+import pinia from './store'
 import { constRouter } from '@/router/module/constRouter'
+import userStore from '@/store/module/user'
+
 import useSettingStore from '@/store/module/setting'
 const settingStore = useSettingStore(pinia) //重新指向pinia仓储
+const useUserStore = userStore(pinia)
 router.beforeEach((to, _from, 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()
+  console.log(to.query)
+  // 判断是否登录
+  if (!useUserStore.token) {
+    // http://10.121.2.26:8866/portal#/home?code=abcdef
+    if (Object.keys(to.query).length) {
+      console.log('有参数')
+    //   传入token
+      useUserStore.verifyToken('1111111')
+    } else {
+      // window.location.replace('http://39.106.16.162/')
+    }
+  }
+
+  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()
 })
diff --git a/src/store/module/user.ts b/src/store/module/user.ts
new file mode 100644
index 0000000..90052aa
--- /dev/null
+++ b/src/store/module/user.ts
@@ -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
diff --git a/src/views/course/components/courseTree.vue b/src/views/course/components/courseTree.vue
index 99230cc..f8548b1 100644
--- a/src/views/course/components/courseTree.vue
+++ b/src/views/course/components/courseTree.vue
@@ -2,7 +2,7 @@
   <div class="tree-box">
     <el-tree
       default-expand-all
-      style="max-width: 600px"
+      style="max-width: 400px"
       :data="chapterList"
       @node-click="handleNodeClick"
       :props="defaultProps"
diff --git a/src/views/course/index.vue b/src/views/course/index.vue
index 9f1a42f..aa0da8d 100644
--- a/src/views/course/index.vue
+++ b/src/views/course/index.vue
@@ -1,128 +1,136 @@
 <template>
-  <div class="view-container">
-    <div class="banner"></div>
-    <div class="container" v-if="loading">
-      <div class="left" v-loading="tabLoading">
-        <div class="gruop">
-          <Graph
-            :width="1195"
-            :height="800"
-            :index="courseId"
-            :id="courseId"
-            v-show="flag === 1"
-            @clickGraph="clickGraphChange"
+  <div class="container" v-if="loading">
+    <div class="left" v-loading="tabLoading">
+      <div class="gruop">
+        <Graph
+          :width="1195"
+          :height="800"
+          :index="courseId"
+          :id="courseId"
+          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 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">
-          <el-tabs
-            v-model="activeName"
-            class="demo-tabs"
-            @tab-click="handleClick"
-            v-loading="isTabsLoading"
-          >
-            <el-tab-pane label="视频" name="1">
-              <div class="files-box">
-                <div
-                  class="item"
-                  v-for="item in courseFilesList.video"
-                  :key="item.id"
-                  @click="clickFile(item, 2)"
-                >
-                  {{ item.name }}
-                </div>
+      <div class="cours-target">
+        <div class="title">课程目标</div>
+        <el-table :data="tableData" border style="width: 100%">
+          <el-table-column prop="date" label="课程分项目标"/>
+          <el-table-column prop="name" label="支撑知识点"/>
+          <el-table-column prop="address" width="180" label="占比" />
+        </el-table>
+      </div>
+      <div class="resource">
+        <el-tabs
+          v-model="activeName"
+          class="demo-tabs"
+          @tab-click="handleClick"
+          v-loading="isTabsLoading"
+        >
+          <el-tab-pane label="视频" name="1">
+            <div class="files-box">
+              <div
+                class="item"
+                v-for="item in courseFilesList.video"
+                :key="item.id"
+                @click="clickFile(item, 2)"
+              >
+                {{ item.name }}
               </div>
-            </el-tab-pane>
-            <el-tab-pane label="PPT" name="2">
-              <div class="files-box">
-                <div
-                  class="item"
-                  v-for="item in courseFilesList.PPT"
-                  :key="item.id"
-                  @click="clickFile(item, 3)"
-                >
-                  {{ item.name }}
-                </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="PPT" name="2">
+            <div class="files-box">
+              <div
+                class="item"
+                v-for="item in courseFilesList.PPT"
+                :key="item.id"
+                @click="clickFile(item, 3)"
+              >
+                {{ item.name }}
               </div>
-            </el-tab-pane>
-            <el-tab-pane label="试题" name="3">Role</el-tab-pane>
-            <el-tab-pane label="文档" name="4">
-              <div class="files-box">
-                <div
-                  class="item"
-                  v-for="item in courseFilesList.word"
-                  :key="item.id"
-                  @click="clickFile(item, 4)"
-                >
-                  {{ item.name }}
-                </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="试题" name="3">Role</el-tab-pane>
+          <el-tab-pane label="文档" name="4">
+            <div class="files-box">
+              <div
+                class="item"
+                v-for="item in courseFilesList.word"
+                :key="item.id"
+                @click="clickFile(item, 4)"
+              >
+                {{ item.name }}
               </div>
-            </el-tab-pane>
-            <el-tab-pane label="其他" name="5">
-              <div class="files-box">
-                <div
-                  class="item"
-                  v-for="item in courseFilesList.other"
-                  :key="item.id"
-                  @click="download(item)"
-                >
-                  {{ item.name }}
-                </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="其他" name="5">
+            <div class="files-box">
+              <div
+                class="item"
+                v-for="item in courseFilesList.other"
+                :key="item.id"
+                @click="download(item)"
+              >
+                {{ item.name }}
               </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>
+          </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="chapter">
-          <courseTree :chapterList="chapterList" />
+        <div class="description">
+          <div class="description-box">
+            《Vues 设计与实现》这本书的简介： 《Vues 设计与实现》是一本深入剖析
+            Vues 框架核心原理的权威著作。
+            本书首先会为读者搭建起一个坚实的知识基础，详细介绍 Vues
+            的发展历程和其在前端开发领域的重要地位。接着，深入探讨 Vues
+            的设计理念，让读者理解其背后的创新思维和解决问题的独特视角。
+            在实现方面，书中通过大量的代码示例和详细的解释，逐步拆解 Vues
+            的内部机制，包括数据响应式系统、虚拟 DOM
+            算法、组件化架构等核心模块。读者能够清晰地了解到 Vues
+            是如何高效地处理数据更新、渲染页面以及优化性能的。
+            不仅如此，本书还会探讨 Vues
+            与其他前端技术的集成和协作，帮助读者在实际项目中更好地运用 Vues
+            来构建复杂而强大的应用程序。同时，书中也提供了丰富的实战案例和最佳实践，让读者能够将所学知识迅速应用到实际开发中。
+            无论是前端开发的新手，还是经验丰富的开发者，都能从《Vues
+            设计与实现》中获得宝贵的知识和技能，从而提升自己的开发水平，打造出更加出色的前端应用。它不仅是一本技术指南，更是一本启发思考、引领创新的宝典，为读者打开了深入理解和掌握
+            Vues 框架的大门。
+          </div>
         </div>
       </div>
+      <div class="chapter">
+        <courseTree :chapterList="chapterList" />
+      </div>
+      <div class="student-list">
+        
+      </div>
     </div>
   </div>
 </template>
@@ -131,7 +139,7 @@
 import { ref } from 'vue'
 import Graph from '../home/components/Graph.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 { ElLoading } from 'element-plus'
 import { filterFilesType } from '@/utils/filters'
@@ -161,7 +169,28 @@ const getCourseChapterEvent = async () => {
 }
 getCourseChapterEvent()
 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) => {
   console.log(e)
 }
@@ -172,7 +201,7 @@ const courseFilesList = ref<any>({})
 const getCourseFilesEvent = async () => {
   isTabsLoading.value = true
   const res: any = await getCourseFiles({
-    courseId: '2cd6b5b62c344fd0becff6010cba566e', 
+    courseId: '2cd6b5b62c344fd0becff6010cba566e',
   })
   // console.log(filterFilesType(res));
   courseFilesList.value = filterFilesType(res.data)
@@ -200,13 +229,12 @@ const clickFile = async (file: any, index: number) => {
     videoUrl.value = file.url
     flag.value = index
     tabLoading.value = false
-
   } else if (index === 3) {
     pdfUrl.value = `http://39.106.16.162:8080/api/resource/read?filename=${file.name}`
-      const loadingTask = createLoadingTask(pdfUrl.value)
-  loadingTask.promise.then((pdf:any) => {
-    numOfPages.value = pdf.numPages
-  })
+    const loadingTask = createLoadingTask(pdfUrl.value)
+    loadingTask.promise.then((pdf: any) => {
+      numOfPages.value = pdf.numPages
+    })
     flag.value = index
     tabLoading.value = false
     // const res: any = await getFileStreams({ filename: file.name })
@@ -214,51 +242,50 @@ const clickFile = async (file: any, index: number) => {
     // fetch(res.filePath).then((resoinse) => {
     //   console.log(resoinse.blob())
     // })
-  }else if(index ===4){
-    docx.value =  `http://39.106.16.162:8080/api/resource/read?filename=${file.name}`
+  } else if (index === 4) {
+    docx.value = `http://39.106.16.162:8080/api/resource/read?filename=${file.name}`
     flag.value = index
-  tabLoading.value = false
-
-
+    tabLoading.value = false
   }
 }
 // 下载资源
-const download = (file:any) => {
-  console.log(file);
-  downloadImage(file.url,file.name)
-  
+const download = (file: any) => {
+  console.log(file)
+  downloadImage(file.url, file.name)
 }
-function downloadImage(imageUrl:any, filename:any) {  
-    fetch(imageUrl)  
-        .then(response => response.blob())  
-        .then(blob => {  
-            const url = URL.createObjectURL(blob);  
-            const a = document.createElement('a');  
-            a.style.display = 'none';  
-            a.href = url;  
-            a.download = filename;  
-            document.body.appendChild(a);  
-            a.click();  
-            window.URL.revokeObjectURL(url);  
-            document.body.removeChild(a);  
-        })  
-        .catch(error => console.error('Error downloading the image', error));  
+function downloadImage(imageUrl: any, filename: any) {
+  fetch(imageUrl)
+    .then((response) => response.blob())
+    .then((blob) => {
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.style.display = 'none'
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
+    })
+    .catch((error) => console.error('Error downloading the image', error))
 }
-
+let nodeID = 0
 // 点击节点
-const clickGraphChange = async(id:number) => {
-  console.log(id);
-  Router.push({
-    path:'/knowledge',
-    query:{id}
-  })
+const clickGraphChange = async (id: number) => {
+  if (nodeID === id) {
+    Router.push({
+      path: '/knowledge',
+      query: { id },
+    })
+  } else {
+    nodeID = id
+  }
+
   // isTabsLoading.value = true
   // const res = await getCourseOneFiles({KnowId:227})
   // console.log(res);
   // courseFilesList.value = filterFilesType(res.data)
   // isTabsLoading.value = false
-  
-  
 }
 </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 {
       width: 400px;
@@ -372,7 +413,13 @@ const clickGraphChange = async(id:number) => {
       }
       .chapter {
         overflow-y: auto;
-        height: 700px;
+        height: 500px;
+        width: 100%;
+        margin-top: 20px;
+        background-color: #fff;
+      }
+      .student-list{
+        height: 500px;
         width: 100%;
         margin-top: 20px;
         background-color: #fff;
@@ -387,7 +434,7 @@ const clickGraphChange = async(id:number) => {
 ::-webkit-scrollbar-button {
   background-color: #fff;
 }
-:deep(.docx-wrapper){
+:deep(.docx-wrapper) {
   background-color: #fff;
 }
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 1b37df9..003b154 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,8 +1,4 @@
 <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="main" v-if="index % 2 === 0">
         <!-- <div class="course-list">111</div> -->
@@ -69,7 +65,6 @@
     <div class="get-more">
       <div class="btn" @click="getMore">{{btnTexst}}</div>
     </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/knowledge/index.vue b/src/views/knowledge/index.vue
index 8c4e88f..f629cdd 100644
--- a/src/views/knowledge/index.vue
+++ b/src/views/knowledge/index.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="view-container">
-    <div class="banner"></div>
-    <div class="container" v-if="loading">
+  <div class="container" v-if="loading">
       <div class="left" v-loading="tabLoading">
         <div class="gruop">
           <div class="no" v-if="flag === 1">当前无播放资源</div>
@@ -111,7 +109,6 @@
         </div>
       </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/pedagogicalReform/index.vue b/src/views/pedagogicalReform/index.vue
index 71e2bfe..b34b897 100644
--- a/src/views/pedagogicalReform/index.vue
+++ b/src/views/pedagogicalReform/index.vue
@@ -1,20 +1,14 @@
 <template>
-  <div class="view-container">
-    <div class="banner"></div>
-    <div class="container">教学改革</div>
+  <div>
+    111
   </div>
 </template>
 
-<script lang="ts" setup>
-import {} from 'vue'
+<script lang='ts' setup>
+// import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
 </script>
 
-<style lang="scss" scoped>
-.view-container {
-  height: 100vh;
-  .container {
-    width: $base-container-width;
-    margin: 0 auto;
-  }
-}
+<style lang='scss' scoped>
+
 </style>
diff --git a/src/views/professionalProfile/index.vue b/src/views/professionalProfile/index.vue
index d0fbdbb..7bd5d6a 100644
--- a/src/views/professionalProfile/index.vue
+++ b/src/views/professionalProfile/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="view-container">
-    <div class="banner"></div>
     <div class="container">
       <div class="title">知识图谱</div>
       <div class="graph-box">
diff --git a/src/views/scientificResearch/index.vue b/src/views/scientificResearch/index.vue
index 92aa393..f97c616 100644
--- a/src/views/scientificResearch/index.vue
+++ b/src/views/scientificResearch/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <div class="view-container">
-    <div class="banner"></div>
-    <div class="container">科学研究</div>
-  </div>
+  <div>111</div>
 </template>
 
 <script lang="ts" setup>
@@ -10,11 +7,5 @@ import {} from 'vue'
 </script>
 
 <style lang="scss" scoped>
-.view-container {
-  height: 100vh;
-  .container {
-    width: $base-container-width;
-    margin: 0 auto;
-  }
-}
+
 </style>