From c3c6e5e3de3c6f39c448fca3e144af328ff2bef8 Mon Sep 17 00:00:00 2001
From: lijiaqi <1205620597@qq.com>
Date: Wed, 7 Aug 2024 14:16:28 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/chapter.js                       |   7 +
 .../course/components/chapters-details.vue    |  35 ++
 src/views/course/components/course-brief.vue  | 191 ++++++++
 .../course/components/course-chapters.vue     | 159 +++++++
 src/views/course/components/course-object.vue | 433 ++++++++++++++++++
 .../course/components/knowledge-graph.vue     | 172 +++++++
 .../course/components/knowledge-statistic.vue | 142 ++++++
 .../course/components/resource-management.vue |  89 ++++
 src/views/course/ss.vue                       |  23 +
 9 files changed, 1251 insertions(+)
 create mode 100644 src/api/user/chapter.js
 create mode 100644 src/views/course/components/chapters-details.vue
 create mode 100644 src/views/course/components/course-brief.vue
 create mode 100644 src/views/course/components/course-chapters.vue
 create mode 100644 src/views/course/components/course-object.vue
 create mode 100644 src/views/course/components/knowledge-graph.vue
 create mode 100644 src/views/course/components/knowledge-statistic.vue
 create mode 100644 src/views/course/components/resource-management.vue
 create mode 100644 src/views/course/ss.vue

diff --git a/src/api/user/chapter.js b/src/api/user/chapter.js
new file mode 100644
index 0000000..76b9ef7
--- /dev/null
+++ b/src/api/user/chapter.js
@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+// 获取课程章节列表
+export const getChaptersListApi = (params) => {
+  return request.get(`/chapter2/chapter?courseId=${params.id}`)
+}
+// 添加课程章节
+export const addChaptersApi = (params) => request.post('/chapter2/add', params)
diff --git a/src/views/course/components/chapters-details.vue b/src/views/course/components/chapters-details.vue
new file mode 100644
index 0000000..4642407
--- /dev/null
+++ b/src/views/course/components/chapters-details.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup></script>
+<template>
+  <div class="grid-content chapters-details" style="height: 300px">
+    <h1>章节详情</h1>
+    <div class="info">
+      <p>本章名称：认识计算机导论</p>
+      <p>
+        简介：
+        适用专业：软件工程专业本章目标：本课程对每个专题的讲座内容进行系统整理，形成了由讲座概要、专题内容、拓展阅读文献、教学课件和教学视频等组成的教学内容体系。学生可以根据自己的学习兴趣，由浅入深地进行拓展学习。通过学术讲座、学术沙龙、学术讨论等形式，使学生掌握较扎实的课程与教学的基础理论知识和其他相关知识，树立先进的教育观念；了解国内外教育改革实践；了解国内外课程与教学研究的历史、现状和动向，形成较强的独立从事课程与教学研究能力；对现实的课程与教学问题具有清晰的认识，能在现代教育观念指导下投入我国基础教育课程改革的实践。
+        主
+      </p>
+      <p>章节编号：1110</p>
+      <p>章节总学时：26h</p>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.chapters-details {
+  h1 {
+    padding-top: 20px;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+    color: #333333ff;
+  }
+
+  .info {
+    padding: 20px;
+
+    p {
+      margin: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/course/components/course-brief.vue b/src/views/course/components/course-brief.vue
new file mode 100644
index 0000000..2e6e069
--- /dev/null
+++ b/src/views/course/components/course-brief.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { getCourseDetailApi } from '@/api/user/crouse'
+import { onMounted } from 'vue'
+const route = useRoute()
+const courseId = ref()
+const courseDetails = ref({
+  img: '',
+  name: '',
+  teacher: '',
+  description: '',
+  code: '',
+})
+courseId.value = route.query.id
+console.log(courseId.value, 'id')
+const getCourseDetails = async () => {
+  const res = await getCourseDetailApi(courseId.value)
+  courseDetails.value = res.data
+  // console.log(res)
+  console.log(courseDetails.value, 'courseDetails.value')
+}
+onMounted(() => {
+  getCourseDetails()
+})
+</script>
+<template>
+  <div class="grid-content course-brief" style="height: 350px">
+    <h1 style="text-align:">课程基本信息</h1>
+    <div class="box">
+      <div class="image">
+        <img :src="courseDetails.img" alt="" />
+      </div>
+      <div class="text">
+        <h2 class="title">
+          {{ courseDetails.name }}
+          <span>主讲教师：{{ courseDetails.teacher }}</span>
+        </h2>
+        <div>
+          <h3>
+            课程简介:
+            <el-scrollbar height="70px">
+              <p class="pp">{{ courseDetails.description }}</p>
+            </el-scrollbar>
+            <!-- <textarea name="" id=""></textarea> -->
+          </h3>
+          <div class="brief">
+            <ul class="ull">
+              <li>
+                <p>课程编码</p>
+                <p>{{ courseDetails.code }}</p>
+              </li>
+              <li>
+                <p>课程学分</p>
+                <p>{{ courseDetails.category }}</p>
+              </li>
+              <li>
+                <p>课程学时</p>
+                <p>{{ courseDetails.classhours }}</p>
+              </li>
+              <li>
+                <p>课程性质</p>
+                <p>{{ courseDetails.nature }}</p>
+              </li>
+              <li>
+                <p>考核方式</p>
+                <p>{{ courseDetails.assessmentway }}</p>
+              </li>
+              <li>
+                <p>考核类型</p>
+                <p>{{ courseDetails.assessmenttype }}</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.course-brief {
+  // display: flex;
+
+  // justify-content: space-between;
+
+  h1 {
+    // display: block;
+    padding-top: 20px;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+    color: #333333ff;
+  }
+
+  .box {
+    width: 100%;
+    height: 80%;
+    display: flex;
+    justify-content: space-between;
+
+    .image {
+      // position: relative;
+      margin-top: 20px;
+      margin-left: 20px;
+      margin-right: 20px;
+      width: 40%;
+      height: 90%;
+      border-radius: 6px;
+      background-color: rgb(211, 196, 199);
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 6px;
+        // margin: 25px;
+        // margin: 10px;
+        // width: 100%;
+        // height: 100%;
+        // background-color: rgb(211, 196, 199);
+      }
+    }
+
+    .text {
+      width: 60%;
+      height: 100%;
+      // margin: 50px;
+      margin: 20px 60px 60px 0px;
+      // background-color: #74deff;
+      // background-image: linear-gradient(to right, #4984ff, #74deff);
+      border-radius: 20px;
+
+      h2 {
+        font-weight: 600;
+        font-size: 26px;
+        margin-bottom: 20px;
+        font-family: Inter, Inter;
+        color: #333333ff;
+
+        span {
+          margin-left: 40px;
+          font-size: 18px;
+          line-height: 30px;
+          color: #8a8b99;
+        }
+      }
+
+      h3 {
+        color: #8a8b99;
+        font-size: 14px;
+
+        .pp {
+          margin-top: 10px;
+          display: inline;
+          padding-left: 35px;
+          color: #2e2e2e;
+        }
+      }
+
+      .brief {
+        border-radius: 4px;
+        width: 100%;
+        height: 50%;
+
+        .ull {
+          display: flex;
+          flex-wrap: wrap;
+          margin-top: 10px;
+        }
+
+        li {
+          // margin-top: 10px;
+          margin-right: 80px;
+          font-size: 14px;
+          text-align: center;
+          margin-bottom: 15px;
+
+          p {
+            margin-top: 10px;
+            font-size: 16px;
+          }
+
+          p:nth-child(1) {
+            color: #8a8b99;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/course/components/course-chapters.vue b/src/views/course/components/course-chapters.vue
new file mode 100644
index 0000000..3b656de
--- /dev/null
+++ b/src/views/course/components/course-chapters.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type Node from 'element-plus/es/components/tree/src/model/node'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRoute } from 'vue-router'
+import { getChaptersListApi, addChaptersApi } from '@/api/user/chapter'
+import { onMounted } from 'vue'
+const route = useRoute()
+// const router = useRouter()
+const courseId = ref()
+onMounted(() => {
+  courseId.value = route.query.id
+  getChaptersList()
+})
+
+// console.log(courseId.value, 'courseId.value')
+const getChaptersList = async () => {
+  console.log(courseId.value, 'courseId.value')
+  const res = await getChaptersListApi({ id: courseId.value })
+  const transformedData: Tree[] = res.data.map((item: any) => ({
+    id: item.id,
+    name: item.name,
+    pid: item.pid,
+    children: item.children.map((children: any) => ({
+      id: children.id,
+      name: children.name,
+      pid: children.pid,
+
+      children: children.children.map((children: any) => ({
+        id: children.id,
+        name: children.name,
+        pid: children.pid,
+      })),
+    })),
+  }))
+  dataSource.value = transformedData
+  console.log(res)
+}
+interface Tree {
+  id: number
+  name: string
+  pid: any
+  children?: Tree[]
+}
+let id = 1000
+// 添加
+const append = async (data: Tree) => {
+  ElMessageBox.prompt('请输入章节名称', '添加', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  }).then(async ({ value }) => {
+    const newChild = { id: id++, name: `${value}`, pid: data.id, children: [] }
+    // const res = await addChaptersApi({ name: value, pid:  })
+    const res = await addChaptersApi(newChild)
+    // getChaptersList()
+
+    console.log(res)
+    if (!data.children) {
+      data.children = []
+    }
+    data.children.push(newChild)
+    dataSource.value = [...dataSource.value]
+    // getChaptersList()
+    // if (res.code === 200) {
+    //   // 成功添加后更新本地数据源
+    //   // dataSource.value = [...dataSource.value]
+    // } else {
+    //   ElMessage({
+    //     type: 'error',
+    //     message: '添加失败，请稍后再试',
+    //   })
+    // }
+  })
+}
+// 删除
+const remove = async (node: Node, data: Tree) => {
+  await ElMessageBox.confirm('确定删除本章节吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    center: true,
+  })
+  const parent = node.parent
+  const children: Tree[] = parent.data.children || parent.data
+  const index = children.findIndex((d) => d.id === data.id)
+  children.splice(index, 1)
+  dataSource.value = [...dataSource.value]
+}
+
+const dataSource = ref<Tree[]>([
+  {
+    id,
+    name: '',
+    pid: '',
+    children: [
+      {
+        id,
+        name: '',
+        pid: '',
+        children: [
+          {
+            id,
+            name: '',
+            pid: '',
+          },
+        ],
+      },
+    ],
+  },
+])
+</script>
+<template>
+  <div class="grid-content course-chapters" style="height: 820px">
+    <h1>课程章节</h1>
+    <!-- <button @click="getChaptersList">获取</button> -->
+    <div class="custom-tree-container">
+      <el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all
+        :expand-on-click-node="false" empty-text="暂无章节">
+        <template #default="{ node, data }">
+          <span class="custom-tree-node">
+            <span>{{ data.name }}</span>
+            <span>
+              <el-button @click="append(data)">添加</el-button>
+              <el-button @click="remove(node, data)">删除</el-button>
+              <!-- <a @click="append(data)"></a> -->
+              <!-- <a style="margin-left: 8px" @click="remove(node, data)">删除</a> -->
+            </span>
+          </span>
+        </template>
+      </el-tree>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.course-chapters {
+  .show-checkbox {
+    display: false;
+  }
+
+  h1 {
+    padding: 20px;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+    color: #333333ff;
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 18px;
+    padding-right: 8px;
+    // width: 20%
+    // width: 200px;
+  }
+}
+</style>
diff --git a/src/views/course/components/course-object.vue b/src/views/course/components/course-object.vue
new file mode 100644
index 0000000..e8f22b9
--- /dev/null
+++ b/src/views/course/components/course-object.vue
@@ -0,0 +1,433 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// import { id } from 'element-plus/es/locales.mjs'
+
+import * as echarts from 'echarts'
+
+// import { useRoute } from 'vue-router'
+const emit = defineEmits(['updateObject'])
+import {
+  getCourseList,
+  addCourse,
+  editCourse,
+  deleteCourse,
+  getCourseInfo,
+} from '@/api/courseChaptersApi'
+import { useRoute, useRouter } from 'vue-router'
+const route = useRoute()
+const router = useRouter()
+const formData = ref({
+  description: '',
+})
+const activeIndex = ref(0)
+// 新增
+const addPoint = (id: any) => {
+  console.log(id, 'id')
+  activeIndex.value = id
+  dialogVisible.value = true
+  flog.value = false
+  // updateDisabledStatus()
+}
+const params = ref({
+  content: '',
+  id: '',
+  objectiveId: '',
+})
+const content = ref('')
+const textChange = async (val: any) => {
+  params.value.content = content.value
+  console.log(params.value.content, ' params.value.content')
+  console.log(params.value, 'params.value')
+  console.log(params.value.id, 'params.id')
+
+  // const jsonstr = JSON.stringify(params)
+  // const res = await editCourse(jsonstr)
+  const res = await editCourse({
+    id: params.value.id,
+    objectiveId: params.value.objectiveId,
+    content: params.value.content,
+  })
+
+  console.log(res, 'res')
+
+  console.log(content.value, 'text.value')
+}
+// 弹窗
+const dialogVisible = ref(false)
+// 关闭弹窗
+const handleClose = () => {
+  dialogVisible.value = false
+}
+const close = () => {
+  formData.value = {
+    id: null,
+    target: '',
+    description: '',
+  }
+  dialogVisible.value = false
+}
+// 筛选目标
+// const filterTarger = (target) => {
+//   const res = targetList.value.find((item) => {
+//     if (item.id === target) {
+//       console.log(item, 'item')
+//       return item
+//     }
+//   })
+//   return res.label
+// }
+const editdata = ref({ id: '', objectiveId: '' })
+// 编辑事件
+const flog = ref(false)
+const editBook = async (obj) => {
+  // 回显目标详情
+  const res = await getCourseInfo({ id: obj.id })
+  console.log(res, '回显res')
+  editdata.value.id = res.data.id
+  editdata.value.objectiveId = res.data.objectiveId
+  flog.value = true
+  // console.log(obj, '回显后obj')
+  activeIndex.value = res.data.id
+  formData.value.description = res.data.content
+  dialogVisible.value = true
+}
+// 弹窗提交事件
+const submit = async () => {
+  if (flog.value) {
+    await editCourse({
+      ...editdata.value,
+      content: formData.value.description,
+    })
+  } else {
+    await addCourse({
+      objectiveId: activeIndex.value,
+      content: formData.value.description,
+    })
+  }
+  getList()
+  dialogVisible.value = false
+  formData.value.description = ''
+  activeIndex.value = ''
+}
+// 删除课程目标
+const del = async (obj) => {
+  await ElMessageBox.confirm('你确认要删除该课程目标吗', '温馨提示', {
+    type: 'warning',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+  })
+  await deleteCourse({ id: obj.id })
+  ElMessage.success('删除成功')
+  getList()
+}
+const data = ref({})
+const courseId = ref(0)
+// 获取课程知识点列表
+const getList = async () => {
+  const res = await getCourseList({ id: courseId.value })
+  console.log(res, 'res')
+  data.value = res.data[0]
+  params.value = res.data[0].contents[0]
+  console.log(params.value, 'params.value')
+
+  console.log(data.value, 'data.value')
+  content.value = res.data[0].contents[0].content
+}
+
+onMounted(async () => {
+  if (!Object.keys(route.query).length) {
+    return router.push('/curriculumCenter/courseDetails')
+
+    // return router.push('/curriculumCenter/basicCourseInformation')
+  }
+  courseId.value = route.query.id
+  console.log(courseId.value, 'courseid.vlue')
+  getList()
+  let chartDom = document.getElementById('main')
+  let myChart = echarts.init(chartDom)
+  let option
+  option = {
+    radar: [
+      {
+        nameGap: 10,
+        indicator: [
+          {
+            text: '目标一\n',
+            max: 100,
+          },
+          {
+            text: '目标五\n\n',
+            max: 100,
+          },
+          {
+            text: '目标四\n\n',
+            max: 100,
+          },
+          {
+            text: '目标三\n\n',
+            max: 100,
+          },
+          {
+            text: '目标二\n\n',
+            max: 100,
+          },
+        ],
+        // 中心位置
+        center: ['50%', '60%'],
+        // 半径
+        radius: 100,
+        // 圆角起始角度
+        startAngle: 90,
+        // 分割数
+        splitNumber: 5,
+        shape: 'circle',
+        name: {
+          formatter: '{value}',
+          textStyle: {
+            color: '#333333',
+            fontSize: 16,
+          },
+          gap: 10,
+        },
+        splitArea: {
+          areaStyle: {
+            color: [
+              'transparent',
+              'transparent',
+              'rgba(114, 172, 209, 0)',
+              'transparent',
+              'rgba(114, 172, 209, 0)',
+            ],
+          },
+        },
+        // 设置雷达图中间射线的颜色
+        axisLine: {
+          lineStyle: {
+            color: '#C8D9FF',
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#DADADA',
+            width: 2,
+            type: 'dashed', //dashed  solid dotted 射线类型【实线 虚线】
+          },
+        },
+      },
+      {
+        nameGap: 10,
+        indicator: [
+          {
+            text: '达成度',
+            max: 100,
+          },
+          {
+            text: '达成度',
+            max: 100,
+          },
+          {
+            text: '达成度',
+            max: 100,
+          },
+          {
+            text: '达成度',
+            max: 100,
+          },
+          {
+            text: '达成度',
+            max: 100,
+          },
+        ],
+
+        center: ['50%', '60%'],
+        radius: 100,
+        startAngle: 90,
+        splitNumber: 1,
+        shape: 'circle',
+        splitArea: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        name: {
+          formatter: '{value}',
+          textStyle: {
+            color: 'rgba(0,0,0,0.4)',
+            fontSize: 16,
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#6093FF',
+            type: 'solid',
+            width: 8,
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        type: 'radar',
+        emphasis: {
+          lineStyle: {
+            width: 20,
+          },
+        },
+        symbol: 'none',
+        data: [
+          {
+            value: [74, 60, 80, 60, 74],
+            name: 'Data C',
+            areaStyle: {
+              color: '#DBE4F9',
+            },
+          },
+        ],
+      },
+      {
+        type: 'radar',
+        emphasis: {
+          lineStyle: {
+            width: 20,
+          },
+        },
+        symbol: 'none',
+        data: [
+          {
+            value: [74, 60, 80, 40, 74],
+            name: 'Data B',
+            areaStyle: {
+              color: '#0052FF',
+            },
+          },
+        ],
+      },
+    ],
+  }
+
+  option && myChart.setOption(option)
+})
+</script>
+<template>
+  <div class="grid-content course-object" style="height: 450px">
+    <h1>课程目标</h1>
+    <div class="all_content">
+      <div class="graph">
+        <div class="title">课程目标雷达图</div>
+        <div id="main" class="radarmap"></div>
+      </div>
+      <div class="object">
+        <span>课程总目标:</span>
+        <!-- <el-scrollbar height="90px"> -->
+        <textarea class="textarea" @change="textChange" v-model="content"></textarea>
+        <!-- </el-scrollbar> -->
+        <div class="demo-collapse">
+          <el-collapse v-model="activeName" accordion>
+            <el-collapse-item title="知识目标" name="1">
+              <ul>
+                <li>目标一</li>
+                <li>目标二</li>
+              </ul>
+            </el-collapse-item>
+            <el-collapse-item title="素质目标" name="2">
+              <ul>
+                <li>目标一</li>
+                <li>目标二</li>
+              </ul>
+            </el-collapse-item>
+            <el-collapse-item title="价值目标" name="3">
+              <ul>
+                <li>目标一</li>
+                <li>目标二</li>
+              </ul>
+            </el-collapse-item>
+            <el-collapse-item title="思政目标" name="4">
+              <ul>
+                <li>目标一</li>
+                <li>目标二</li>
+              </ul>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.course-object {
+  h1 {
+    padding: 20px;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+    color: #333333ff;
+  }
+
+  .all_content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .graph {
+      width: 40%;
+      height: 100%;
+
+      .title {
+        text-align: center;
+        font-size: 24px;
+        font-weight: 400;
+        color: #333333ff;
+      }
+
+      .radarmap {
+        width: 100%;
+        height: 90%;
+        margin-top: -60px;
+      }
+    }
+
+    .object {
+      width: 60%;
+
+      span {
+        // text-align: center;
+        font-size: 20px;
+        font-weight: 400;
+        // color: #4984ffff;
+      }
+
+      // span:hover {
+      //   color: red;
+      // }
+
+      .el-scrollbar {
+        height: 30%;
+        width: 100%;
+      }
+
+      .textarea {
+        width: 90%;
+        height: 20%;
+        border: none;
+        resize: none;
+      }
+
+      .demo-collapse {
+        padding-top: 20px;
+
+        .el-collapse {
+          --el-collapse-header-font-size: 16px;
+        }
+      }
+    }
+  }
+}
+
+.el-collapse-item__header:hover {
+  color: #385ea9 !important;
+  /* 强制应用样式 */
+}
+</style>
diff --git a/src/views/course/components/knowledge-graph.vue b/src/views/course/components/knowledge-graph.vue
new file mode 100644
index 0000000..9d8d07e
--- /dev/null
+++ b/src/views/course/components/knowledge-graph.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+// // import { useRouter } from 'vue-router'
+// import { onMounted, ref, reactive, watch } from 'vue'
+// import ForceGraph3D from '3d-force-graph'
+// //@ts-ignore
+// import {
+//   CSS2DRenderer,
+//   CSS2DObject,
+// } from 'three/examples/jsm/renderers/CSS2DRenderer.js'
+// //@ts-ignore
+// import SpriteText from '../spritetext.js'
+// // const $router = useRouter()
+// // const jsonData = ref(null)
+// let Graph: any = reactive({})
+// const props = defineProps({
+//   width: {
+//     // type: Number,
+//     // default:
+//     // window.innerWidth ||
+//     // document.documentElement.clientWidth ||
+//     // document.body.clientWidth,
+//   },
+//   height: {
+//     type: Number,
+//     // default:
+//     //   window.innerHeight ||
+//     //   document.documentElement.clientHeight ||
+//     //   document.body.clientHeight,
+//   },
+// })
+// watch(
+//   () => props.width,
+//   (ne) => Graph.width(ne),
+// )
+// watch(
+//   () => props.height,
+//   (ne) => Graph.height(ne),
+// )
+// const dom = ref(null)
+// onMounted(() => {
+//   Graph = ForceGraph3D({
+//     extraRenderers: [new CSS2DRenderer()],
+//   })(document.getElementById('3d-graph') as HTMLElement)
+//     .jsonUrl('../../../public/data.json')
+//     // .nodeAutoColorBy('group')
+//     .nodeThreeObject((node: any) => {
+//       const nodeEl = document.createElement('div')
+//       nodeEl.textContent = node.label
+//       nodeEl.style.color = '#333333'
+//       nodeEl.style.borderRadius = '50%'
+//       // console.log(node, 111, Graph.graphData().nodes)
+//       return new CSS2DObject(nodeEl)
+//     })
+//     .linkLabel((link: any) => link.label) // 指定链接上显示的文字属性
+//     .linkWidth(0.8)
+//     .linkHoverPrecision(0.5) // 设置链接文字的显示精度，这里设置为一个足够小的值
+//     .linkColor(() => '#dd92fd') // 设置连接线颜色为红色
+//     .backgroundColor('#f5f6fd')
+//     .width(props.width)
+//     .height(props.height)
+//     .linkThreeObjectExtend(true)
+//     .nodeColor((node: any) => {
+//       return node.color
+//     })
+//     .nodeRelSize(7) // 设置节点的相对大小为4
+//     .nodeResolution(20)
+//     .linkDirectionalArrowLength(3) // 设置连接线箭头长度为3
+//     .linkDirectionalArrowRelPos(1) // 设置连接线箭头位置为连接线末端
+//     .nodeThreeObjectExtend(true)
+//     .onNodeClick((node: any) => {
+//       // Aim at node from outside it
+//       // 目标距离
+//       const targetDistance = 200 // 设定一个一般的距离
+
+//       // 计算相机新位置
+//       const distRatio = 1 + targetDistance / Math.hypot(node.x, node.y, node.z)
+//       const newPos = {
+//         x: node.x * distRatio,
+//         y: node.y * distRatio,
+//         z: node.z * distRatio,
+//       }
+
+//       // 如果节点位于原点，则特殊处理
+//       if (node.x === 0 && node.y === 0 && node.z === 0) {
+//         newPos.z = targetDistance // 将 z 轴设定为目标距离
+//       }
+
+//       // 移动相机至新位置
+//       //@ts-ignore
+//       Graph.cameraPosition(
+//         newPos, // 新位置
+//         node, // 视角焦点
+//         3000, // 过渡时长
+//       )
+
+//       // 获取图表数据
+//       //@ts-ignore
+//       const graphData = Graph.graphData()
+
+//       // 遍历连接线，检查每条连接线的起点和终点是否与当前点击的节点相关联
+//       graphData.links.forEach((link: any) => {
+//         // console.log(link);
+
+//         if (link.source.id === node.id || link.target.id === node.id) {
+//           setLabel()
+//           // 将与当前点击节点相关联的连接线颜色设置为红色
+//           // link.color = '#FF0000' // 设置连接线颜色为红色
+//           //@ts-ignore
+//           Graph.linkColor((item: any): any => {
+//             if (item.source.id === node.id || item.target.id === node.id) {
+//               return 'red'
+//             } else {
+//               return '#dd92fd'
+//             }
+//           })
+//         } else {
+//           // Graph.linkColor(() => '#a4c7fe') // 设置连接线颜色为红色
+//         }
+//       })
+
+//       // 更新图形数据，以应用颜色变化
+//       //@ts-ignore
+//       Graph.graphData(graphData)
+//     })
+//   dom.value = document.querySelector('canvas') as any
+// })
+
+// const setLabel = () => {
+//   //@ts-ignore
+//   Graph.linkThreeObject((link: any) => {
+//     // extend link with text sprite
+//     const sprite = new SpriteText(`${link.label}`)
+//     sprite.color = '#ccc'
+//     sprite.textHeight = 1.5
+//     return sprite
+//   })
+//   //@ts-ignore
+//   Graph.linkPositionUpdate((sprite, { start, end }) => {
+//     //@ts-ignore
+//     const middlePos = Object.assign(
+//       ...['x', 'y', 'z'].map((c) => ({
+//         //@ts-ignore
+//         [c]: start[c] + (end[c] - start[c]) / 2, // calc middle point
+//       })),
+//     )
+
+//     // Position sprite
+//     Object.assign(sprite.position, middlePos)
+//   })
+//   //@ts-ignore
+//   Graph.d3Force('charge').strength(-120)
+// }
+// // const goToEditAtlas = () => {
+// //   console.log(jsonData.value)
+
+// //   $router.push({ name: 'EditAtlas', params: { id: 123 } })
+// // }
+</script>
+
+<template>
+  <div class="grid-content knowledge-graph" style="height: 500px">
+    <!-- <div class="graph">
+     <div id="3d-graph"></div> 
+    </div> -->
+  </div>
+</template>
+<style lang="scss" scoped>
+.graph {
+  width: 200px;
+  height: 400px;
+}
+</style>
diff --git a/src/views/course/components/knowledge-statistic.vue b/src/views/course/components/knowledge-statistic.vue
new file mode 100644
index 0000000..0565a20
--- /dev/null
+++ b/src/views/course/components/knowledge-statistic.vue
@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+import 'echarts-liquidfill'
+
+const liquidechart1 = ref(null) // 第一个波浪水球图的引用
+const liquidechart2 = ref(null) // 第二个波浪水球图的引用
+
+onMounted(() => {
+  const myChart1 = echarts.init(liquidechart1.value) // 使用 ref
+  myChart1.setOption({
+    title: {
+      text: '知识点达成度',
+      textStyle: {
+        color: '#888',
+        fontFamily: 'microsoft yahei',
+        fontSize: 24,
+        fontWeight: '400',
+        align: 'center',
+        verticalAlign: 'middle',
+      },
+      left: 'center',
+      top: '20%',
+    },
+    series: [
+      {
+        type: 'liquidFill',
+        radius: '95%',
+        waveAnimation: true,
+        data: [0.5], // 数据值需用数组
+        direction: 'left',
+        itemStyle: {
+          normal: {
+            color: '#1890ff',
+          },
+        },
+        outline: {
+          borderDistance: 3,
+          itemStyle: {
+            borderColor: '#4984ff',
+            borderWidth: 10,
+          },
+        },
+        itemStyle: {
+          opacity: 0.9,
+        },
+        backgroundStyle: {
+          color: '#fff',
+        },
+        label: {
+          show: true,
+          color: '#000',
+          insideColor: '#fff',
+          fontSize: 24,
+          fontWeight: 400,
+          align: 'center',
+          verticalAlign: 'middle',
+        },
+      },
+    ],
+  })
+  const myChart2 = echarts.init(liquidechart2.value) // 使用 ref
+  myChart2.setOption({
+    title: {
+      text: '知识点完成度',
+      textStyle: {
+        color: '#888',
+        fontFamily: 'microsoft yahei',
+        fontSize: 24,
+        fontWeight: '400',
+        align: 'center',
+        verticalAlign: 'middle',
+      },
+      left: 'center',
+      top: '20%',
+    },
+    series: [
+      {
+        type: 'liquidFill',
+        radius: '95%',
+        waveAnimation: true,
+        data: [0.8], // 数据值需用数组
+        direction: 'left',
+        itemStyle: {
+          normal: {
+            color: '#1890ff',
+          },
+        },
+        outline: {
+          borderDistance: 1,
+          itemStyle: {
+            borderColor: '#1890ff',
+            borderWidth: 10,
+          },
+        },
+        itemStyle: {
+          opacity: 0.9,
+        },
+        backgroundStyle: {
+          color: '#fff',
+        },
+        label: {
+          show: true,
+          color: '#000',
+          insideColor: '#fff',
+          fontSize: 24,
+          fontWeight: 400,
+          align: 'center',
+          verticalAlign: 'middle',
+        },
+      },
+    ],
+  })
+})
+</script>
+
+<template>
+  <div class="grid-content knowledge-statistic" style="height: 300px">
+    <h1>知识点统计</h1>
+    <div class="box">
+      <div style="width: 300px; height: 250px" ref="liquidechart1"></div>
+      <div style="width: 300px; height: 250px" ref="liquidechart2"></div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.knowledge-statistic {
+  h1 {
+    padding-top: 20px;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+    color: #333333ff;
+  }
+
+  .box {
+    display: flex;
+    justify-content: space-around;
+  }
+}
+</style>
diff --git a/src/views/course/components/resource-management.vue b/src/views/course/components/resource-management.vue
new file mode 100644
index 0000000..39fdeaf
--- /dev/null
+++ b/src/views/course/components/resource-management.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+interface User {
+  chapter: string
+  name: string
+  type: string
+}
+
+const search = ref('')
+const filterTableData = computed(() =>
+  tableData.filter(
+    (data) =>
+      !search.value ||
+      data.type.toLowerCase().includes(search.value.toLowerCase()),
+  ),
+)
+const handleEdit = (index: number, row: User) => {
+  console.log(index, row)
+}
+const handleDelete = (index: number, row: User) => {
+  console.log(index, row)
+}
+
+const tableData: User[] = [
+  {
+    chapter: '1.1课程标准',
+    type: 'PDF',
+    name: '好好学习',
+  },
+  {
+    chapter: '离散数学',
+    type: 'PPT',
+    name: '好好学习',
+  },
+  {
+    chapter: '1.1课程标准',
+    type: '视频',
+    name: '好好学习',
+  },
+  {
+    chapter: '1.1课程标准',
+    type: 'word',
+    name: '好好学习',
+  },
+]
+</script>
+<template>
+  <div class="grid-content resource-management" style="height: 500px">
+    <h1>资源管理</h1>
+    <el-table :data="filterTableData" style="width: 90%; margin-left: 30px; font-size: 16px">
+      <el-table-column label="相关内容" prop="chapter" />
+      <el-table-column label="文件名称" prop="name" />
+      <el-table-column label="文件类型" prop="type" />
+
+      <!-- <el-table-column label="修改" prop="name" />
+      <el-table-column label="文件类型" prop="name" /> -->
+      <el-table-column align="right">
+        <template #header>
+          <el-input v-model="search" size="small" placeholder="输入内容进行搜索" />
+        </template>
+        <template #default="scope">
+          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+            编辑
+          </el-button>
+          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<style lang="scss" scoped>
+.resource-management {
+  h1 {
+    // display: block;
+    padding: 20px;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+    color: #333333ff;
+  }
+
+  // el-table {
+  //   font-size: 20px;
+  // }
+}
+</style>
diff --git a/src/views/course/ss.vue b/src/views/course/ss.vue
new file mode 100644
index 0000000..9a7c1f7
--- /dev/null
+++ b/src/views/course/ss.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <button @click="toggle">点击折叠/展开</button>
+    <div v-if="isExpanded">
+      <!-- 折叠内容 -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+export default {
+  data() {
+    return {
+      isExpanded: false,
+    }
+  },
+  methods: {
+    toggle() {
+      this.isExpanded = !this.isExpanded
+    },
+  },
+}
+</script>