From 3b2fe69a6f11e5fc7799979f539ed72a37a4402b Mon Sep 17 00:00:00 2001
From: lijiaqi <1205620597@qq.com>
Date: Thu, 25 Jul 2024 10:00:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BA=BF=E4=B8=8A=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=99=A8=E4=B8=BA=E6=9C=AC=E5=9C=B0=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                            |   4 +-
 src/api/courseChaptersApi.ts                |  17 +-
 src/utils/request.ts                        |  44 +-
 src/views/course/CourseObjectives.vue       |  66 ++-
 src/views/course/CourseObjectives111.vue    |  59 +--
 src/views/course/basicCourseInformation.vue |   5 +-
 src/views/course/components/courseEdit.vue  |  12 +-
 src/views/course/courseDetails.vue          | 443 ++++++++++++++------
 8 files changed, 427 insertions(+), 223 deletions(-)

diff --git a/.env.development b/.env.development
index 269e196..600aee7 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'development'
 VITE_APP_TITLE = '无糖运营平台'
-# VITE_APP_BASE_API = 'http://127.0.0.1:8008'
-VITE_APP_BASE_API = 'http://39.106.16.162:8080'
+VITE_APP_BASE_API = 'http://127.0.0.1:8080'
+# VITE_APP_BASE_API = 'http://39.106.16.162:8080'
diff --git a/src/api/courseChaptersApi.ts b/src/api/courseChaptersApi.ts
index 8f4f708..666b7ca 100644
--- a/src/api/courseChaptersApi.ts
+++ b/src/api/courseChaptersApi.ts
@@ -96,20 +96,7 @@ export const deleteCourse = (params: any) => {
 // 获取详情
 export const getCourseInfo = (params: any) => {
   return request({
-    // <<<<<<< HEAD
-    url: '/objective_contents/' + params.id,
-    method: 'get',
-    //     // params
-    // =======
-    // <<<<<<< HEAD
-    //     url: '/api/objective_contents/' + params.id,
-    //     method: 'get',
-    //     params,
-    // =======
-    //     url: '/objective_contents/' + params.id,
-    //     method: "get",
-    //     // params
-    // >>>>>>> 1a620e19de970965f426e07348b1dbc4be900eaf
-    // >>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
+    url: '/api/objective_contents/' + params.id,
+    // method: 'get',
   })
 }
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 33c5882..214b86b 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -21,28 +21,28 @@ request.interceptors.response.use(
   },
   (error) => {
     //处理网络错误
-    let msg = ''
-    const status = error.response.status
-    switch (status) {
-      case 401:
-        msg = 'token过期'
-        break
-      case 403:
-        msg = '无权访问'
-        break
-      case 404:
-        msg = '请求地址错误'
-        break
-      case 500:
-        msg = '服务器出现问题'
-        break
-      default:
-        msg = '无网络'
-    }
-    ElMessage({
-      type: 'error',
-      message: msg,
-    })
+    // let msg = ''
+    // const status = error.response.status
+    // switch (status) {
+    //   case 401:
+    //     msg = 'token过期'
+    //     break
+    //   case 403:
+    //     msg = '无权访问'
+    //     break
+    //   case 404:
+    //     msg = '请求地址错误'
+    //     break
+    //   case 500:
+    //     msg = '服务器出现问题'
+    //     break
+    //   default:
+    //     msg = '出错了'
+    // }
+    // ElMessage({
+    //   type: 'error',
+    //   message: msg,
+    // })
     return Promise.reject(error)
   },
 )
diff --git a/src/views/course/CourseObjectives.vue b/src/views/course/CourseObjectives.vue
index 7d831a3..b463672 100644
--- a/src/views/course/CourseObjectives.vue
+++ b/src/views/course/CourseObjectives.vue
@@ -46,8 +46,9 @@ const addBook = (id) => {
   flog.value = false
   // updateDisabledStatus()
 }
-const text = ref('我是后台获取的值')
+const text = ref('')
 const textChange = (val) => {
+  text.value = val
   console.log(text.value)
 }
 // 弹窗
@@ -161,7 +162,7 @@ const data = ref({})
 const courseId = ref(0)
 onMounted(async () => {
   if (!Object.keys(route.query).length) {
-    return router.push('/curriculumCenter/CourseObjectives')
+    return router.push('/curriculumCenter/basicCourseInformation')
   }
   courseId.value = route.query.id
   console.log(courseId.value)
@@ -333,13 +334,13 @@ onMounted(async () => {
 <template>
   <div class="container">
     <div class="leftContent">
-      <!-- <div class="topContent">
+      <div class="topContent">
         <div class="title">| 课程总目标</div>
         <div class="content1">
           <textarea class="textarea" @change="textChange" v-model="text">
 文本内容</textarea>
         </div>
-      </div> -->
+      </div>
       <div class="footContent">
         <div class="title">| 分目标雷达图</div>
         <div class="content3">
@@ -356,13 +357,13 @@ onMounted(async () => {
           padding: 0 20px;
           height: 60px;
         ">
-        <div class="left2">| 课程目标</div>
+        <div class="left2">| 课程分目标</div>
         <div class="right2">
           <!-- <el-button type="primary" @click="addBook">新增</el-button> -->
         </div>
       </div>
       <div class="content2">
-        <el-scrollbar height="370px">
+        <el-scrollbar height="600px">
           <ul class="objectLi">
             <li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id">
               <div class="courseObject">
@@ -413,6 +414,12 @@ onMounted(async () => {
   <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500"
     :before-close="handleClose">
     <el-form :model="formData" label-width="auto" style="max-width: 600px">
+      <!-- <el-form-item label="目标" prop="target">
+        <el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px">
+          <el-option v-for="item in targetList" :key="item.id" :label="item.label" :value="item.id"
+            :disabled="item.disabled" />
+        </el-select>
+      </el-form-item> -->
       <el-form-item label="内容" prop="description">
         <el-input v-model="formData.description" placeholder="请输入内容"></el-input>
       </el-form-item>
@@ -441,7 +448,8 @@ const li
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  width: 70%;
+  width: 100%;
+
   padding: 0 10px 0 10px;
   justify-content: space-around;
 }
@@ -451,10 +459,18 @@ const li
   height: 730px;
   margin: 10px;
 
+  .topContent {
+    border-radius: 20px 20px 0 0px;
+    height: 280px;
+    background-color: #74deff;
+    margin-button: 5px;
+    background-image: linear-gradient(to right, #4984ff, #74deff);
+  }
+
   .footContent {
     border-radius: 20px;
-    // margin-top: 20px;
-    height: 230px;
+    margin-top: 20px;
+    height: 430px;
     background-color: #ffa674;
     background-image: linear-gradient(to right, #f9e397, #ffa674);
   }
@@ -462,8 +478,8 @@ const li
 
 .rightContent {
   margin: 10px;
-  width: 550px;
-  height: 430px;
+  width: 950px;
+  height: 730px;
   background-image: linear-gradient(to right, #4984ff, #74deff);
   border-radius: 20px;
 }
@@ -478,16 +494,38 @@ const li
   padding-top: 10px;
 }
 
+.content1 {
+  border-radius: 20px 20px 0 0px;
+  margin-top: 20px;
+  width: 100%;
+  height: 220px;
+  background-color: #fff;
+  background-image: linear-gradient(#c7e3ff, #ffffff);
+
+  .textarea {
+    width: 100%;
+    border: none;
+    background: transparent;
+    padding: 20px;
+    height: 215px;
+  }
+
+  p {
+    padding: 30px;
+    font-size: 16px;
+  }
+}
+
 .content2 {
   border-radius: 20px;
   padding: 10px;
   width: 100%;
-  height: 370px;
+  height: 670px;
   background-color: #fff;
   background-image: linear-gradient(#c7e3ff, #ffffff);
 
   .objectLi>li {
-    // width: 545px;
+    width: 845px;
     height: 250px;
     // margin: 40px;
     // background-color: #ffffff;
@@ -531,7 +569,7 @@ const li
 
   .small>li {
     // display: inline-flex;
-    // width: 650px;
+    width: 650px;
     height: 150px;
     // margin: 40px;
     background-color: #ffffff;
diff --git a/src/views/course/CourseObjectives111.vue b/src/views/course/CourseObjectives111.vue
index 3edf3e6..6699da2 100644
--- a/src/views/course/CourseObjectives111.vue
+++ b/src/views/course/CourseObjectives111.vue
@@ -108,15 +108,15 @@ const close = () => {
   dialogVisible.value = false
 }
 // 筛选目标
-const filterTarger = (target) => {
-  const res = targetList.value.find((item) => {
-    if (item.id === target) {
-      console.log(item)
-      return item
-    }
-  })
-  return res.label
-}
+// const filterTarger = (target) => {
+//   const res = targetList.value.find((item) => {
+//     if (item.id === target) {
+//       console.log(item)
+//       return item
+//     }
+//   })
+//   return res.label
+// }
 
 // 编辑事件
 const flog = ref(false)
@@ -166,7 +166,7 @@ onMounted(async () => {
   const res = await getCourseList({ id: courseId.value })
   console.log(res)
   list.value = res.data
-  console.log(list.value)
+  console.log(list.value, 'list.value')
   content88.value = list.value[0].contents[0].content
   console.log(list.value[0].contents[0].content)
   console.log(content88.value)
@@ -233,17 +233,14 @@ onMounted(async () => {
       </div>
     </div>
     <div class="rightContent">
-      <div
-        class="title"
-        style="
+      <div class="title" style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0 20px;
           height: 60px;
-        "
-      >
+        ">
         <div class="left2">| 课程分目标</div>
         <div class="right2">
           <!-- <el-button type="primary" @click="addBook">新增</el-button> -->
@@ -276,18 +273,10 @@ onMounted(async () => {
                           <!-- {{ filterTarger(obj.targetId) }} -->
                         </div>
                         <div class="partObject2">
-                          <el-button
-                            class="edit"
-                            type="text"
-                            @click="editBook(obj)"
-                          >
+                          <el-button class="edit" type="text" @click="editBook(obj)">
                             编辑
                           </el-button>
-                          <el-button
-                            class="destroy"
-                            type="text"
-                            @click="del(obj.id)"
-                          >
+                          <el-button class="destroy" type="text" @click="del(obj.id)">
                             删除
                           </el-button>
                         </div>
@@ -305,13 +294,7 @@ onMounted(async () => {
       </div>
     </div>
   </div>
-  <el-dialog
-    v-if="dialogVisible"
-    v-model="dialogVisible"
-    title="新增目标"
-    width="500"
-    :before-close="handleClose"
-  >
+  <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="新增目标" width="500" :before-close="handleClose">
     <el-form :model="formData" label-width="auto" style="max-width: 600px">
       <!-- <el-form-item label="目标" prop="target">
         <el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px">
@@ -320,10 +303,7 @@ onMounted(async () => {
         </el-select>
       </el-form-item> -->
       <el-form-item label="内容" prop="description">
-        <el-input
-          v-model="formData.description"
-          placeholder="请输入内容"
-        ></el-input>
+        <el-input v-model="formData.description" placeholder="请输入内容"></el-input>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -426,13 +406,14 @@ const li
   background-color: #fff;
   background-image: linear-gradient(#c7e3ff, #ffffff);
 
-  .objectLi > li {
+  .objectLi>li {
     width: 845px;
     height: 250px;
     // margin: 40px;
     // background-color: #ffffff;
     border-radius: 5px;
     margin: 20px;
+
     .courseObject {
       height: 45px;
       line-height: 40px;
@@ -457,6 +438,7 @@ const li
       }
     }
   }
+
   // overflow-y: auto
   .smallContent {
     //  border-radius: 20px;
@@ -466,7 +448,8 @@ const li
     background-color: #fff;
     background-image: linear-gradient(#c7e3ff, #ffffff);
   }
-  .small > li {
+
+  .small>li {
     // display: inline-flex;
     width: 750px;
     height: 150px;
diff --git a/src/views/course/basicCourseInformation.vue b/src/views/course/basicCourseInformation.vue
index 3606b0a..5486314 100644
--- a/src/views/course/basicCourseInformation.vue
+++ b/src/views/course/basicCourseInformation.vue
@@ -119,17 +119,20 @@ const onDeleteCourse = async (id: any) => {
   })
   await deleteCourseApi(id)
     .then(() => {
+      console.log(id, '删除id')
       ElMessage.success('删除成功')
       // console.log(res)
     })
     .catch((err: any) => {
+      console.log(id, 'id')
       ElMessage.error(err.response.data.message)
     })
 
   getCourseList()
 }
-// 点击查看课程目标，把课程id传过去
+// 点击查看课程详情，把课程id传过去
 const onGetCourseObject = async (id: any) => {
+  console.log(id, 'id')
   // const res = await getCourseObjectApi(id)
   router.push({
     path: '/curriculumCenter/courseDetails',
diff --git a/src/views/course/components/courseEdit.vue b/src/views/course/components/courseEdit.vue
index 702e3eb..09426be 100644
--- a/src/views/course/components/courseEdit.vue
+++ b/src/views/course/components/courseEdit.vue
@@ -57,7 +57,7 @@ const rules = {
       trigger: 'blur',
     },
     {
-      pattern: /^[a-zA-Z\u4e00-\u9fa5A-Z0-9]*$/,
+      pattern: /^[a-zA-Z\u4e00-\u9fa5A-Z]*$/,
       message: '只能输入汉字或字母',
       trigger: 'blur',
     },
@@ -176,8 +176,14 @@ const onSubmit = async () => {
     console.log(formModel.value, 'formModel.value')
     // console.log(formModel.value)
     await addCourseApi(formModel.value)
-
-    ElMessage.success('添加成功')
+      .then(() => {
+        ElMessage.success('添加成功')
+        // console.log(res)
+      })
+      .catch((err: any) => {
+        // console.log(err)
+        ElMessage.error(err.response.data.message)
+      })
     // 传递关闭抽屉事件
 
     emit('CloseCouresNameChange')
diff --git a/src/views/course/courseDetails.vue b/src/views/course/courseDetails.vue
index 3ba35bf..e36d73d 100644
--- a/src/views/course/courseDetails.vue
+++ b/src/views/course/courseDetails.vue
@@ -40,15 +40,17 @@ const formData = ref({
   description: '',
 })
 const activeIndex = ref(0)
-const addBook = (id) => {
+// 新增
+const addPoint = (id) => {
+  console.log(id, 'id')
   activeIndex.value = id
   dialogVisible.value = true
   flog.value = false
   // updateDisabledStatus()
 }
-const text = ref('我是后台获取的值')
+const text = ref('')
 const textChange = (val) => {
-  console.log(text.value)
+  console.log(text.value, 'text.value')
 }
 // 弹窗
 const dialogVisible = ref(false)
@@ -57,23 +59,23 @@ const handleClose = () => {
   dialogVisible.value = false
 }
 // 弹窗提交事件
-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 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 close = () => {
   formData.value = {
     id: null,
@@ -83,31 +85,49 @@ const close = () => {
   dialogVisible.value = false
 }
 // 筛选目标
-const filterTarger = (target) => {
-  const res = targetList.value.find((item) => {
-    if (item.id === target) {
-      console.log(item)
-      return item
-    }
-  })
-  return res.label
-}
-
+// 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)
+  // console.log(obj, '回显后obj')
   activeIndex.value = res.data.id
-  // formData.value.id = obj.id
-  // formData.value.target = obj.targetId
   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',
@@ -118,61 +138,193 @@ const del = async (obj) => {
   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]
+  console.log(data.value, 'data.value')
   text.value = res.data[0].name
 }
-const data = ref({})
-const courseId = ref(0)
+
 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)
+  console.log(courseId.value, 'courseid.vlue')
   getList()
-  console.log(data.value)
-
-  const chartDom = document.getElementById('main')
-
-  const myChart = echarts.init(chartDom)
-  const option = {
-    title: {
-      // text: 'Basic Radar Chart',
-    },
-    legend: {
-      data: ['Allocated Budget', 'Actual Spending'],
-    },
-    radar: {
-      // shape: 'circle',
-      indicator: [
-        { name: '目标1', max: 6500 },
-        { name: '目标6', max: 16000 },
-        { name: 'Information Technology', max: 30000 },
-        { name: 'Customer Support', max: 38000 },
-        { name: 'Development', max: 52000 },
-        { name: 'Marketing', max: 25000 },
-      ],
-    },
+  let chartDom = document.getElementById('main')
+  // myChart.resize({
+  //   width: 200,
+  //   height: 100,
+  // })
+  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: 60,
+        // 圆角起始角度
+        startAngle: 90,
+        // 分割数
+        splitNumber: 5,
+        shape: 'circle',
+        name: {
+          formatter: '{value}',
+          textStyle: {
+            color: '#333333',
+            fontSize: 12,
+          },
+          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: 60,
+        startAngle: 90,
+        splitNumber: 1,
+        shape: 'circle',
+        splitArea: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        name: {
+          formatter: '{value}',
+          textStyle: {
+            color: 'rgba(0,0,0,0.4)',
+            fontSize: 12,
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#6093FF',
+            type: 'solid',
+            width: 8,
+          },
+        },
+      },
+    ],
     series: [
       {
-        name: 'Budget vs spending',
         type: 'radar',
+        emphasis: {
+          lineStyle: {
+            width: 20,
+          },
+        },
+        symbol: 'none',
         data: [
           {
-            value: [100, 3000, 20000, 35000, 50000, 18000],
-            name: 'Allocated Budget',
+            value: [74, 60, 80, 60, 74],
+            name: 'Data C',
+            areaStyle: {
+              color: '#DBE4F9',
+            },
           },
+        ],
+      },
+      {
+        type: 'radar',
+        emphasis: {
+          lineStyle: {
+            width: 20,
+          },
+        },
+        symbol: 'none',
+        data: [
           {
-            value: [5000, 14000, 28000, 26000, 42000, 21000],
-            name: 'Actual Spending',
+            value: [74, 60, 80, 40, 74],
+            name: 'Data B',
+            areaStyle: {
+              color: '#0052FF',
+            },
           },
         ],
       },
     ],
   }
+
   option && myChart.setOption(option)
 })
 </script>
@@ -180,70 +332,79 @@ onMounted(async () => {
   <div class="top">
     <div class="object">
       <!-- <h3>课程目标</h3> -->
-      <div class="radar">
-        <div class="title">| 课程目标雷达图</div>
-
-        <div id="main" class="radarmap"></div>
+      <div class="left">
+        <div class="total">
+          <div class="title">| 课程总目标</div>
+          <div class="content1">
+            <textarea class="textarea" @change="textChange" v-model="text">
+文本内容</textarea>
+          </div>
+        </div>
+        <div class="radar">
+          <div class="title">| 课程目标雷达图</div>
+          <div id="main" class="radarmap"></div>
+        </div>
       </div>
-
-      <div class="objectives">
-        <div class="title">| 课程目标</div>
-        <div class="objectivebottom">
-          <el-scrollbar height="270px">
-            <ul class="objectLi">
-              <li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id">
-                <div class="courseObject">
-                  <div class="courseObject1">{{ item.name }}</div>
-                  <div class="courseObject2">
-                    <el-button type="primary" @click="addBook(item.id)">
-                      新增
-                    </el-button>
+      <div class="right">
+        <div class="objectives">
+          <div class="title">| 课程目标</div>
+          <div class="objectivebottom">
+            <el-scrollbar height="270px">
+              <ul class="objectLi">
+                <li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id">
+                  <div class="courseObject">
+                    <div class="courseObject1">{{ item.name }}</div>
+                    <div class="courseObject2">
+                      <el-button type="primary" @click="addPoint(item.id)">
+                        新增
+                      </el-button>
+                    </div>
                   </div>
-                </div>
-                <div class="smallContent">
-                  <el-scrollbar height="200px">
-                    <ul class="small">
-                      <li v-for="(obj, i) in item.contents" :key="obj.id">
-                        <div class="partObject">
-                          <div class="partObject1">
-                            <!-- {{ item.content }} -->
-                            <!-- {{ item.introduce }} -->
-                            课程目标{{ i + 1 }}
-                            <!-- {{ filterTarger(obj.targetId) }} -->
+                  <div class="smallContent">
+                    <el-scrollbar height="200px">
+                      <ul class="small">
+                        <li v-for="(obj, i) in item.contents" :key="obj.id">
+                          <div class="partObject">
+                            <div class="partObject1">
+                              <!-- {{ item.content }} -->
+                              <!-- {{ item.introduce }} -->
+                              课程目标{{ i + 1 }}
+                              <!-- {{ filterTarger(obj.targetId) }} -->
+                            </div>
+                            <div class="partObject2">
+                              <el-button class="edit" type="text" @click="editBook(obj)">
+                                编辑
+                              </el-button>
+                              <el-button class="destroy" type="text" @click="del(obj)">
+                                删除
+                              </el-button>
+                            </div>
                           </div>
-                          <div class="partObject2">
-                            <el-button class="edit" type="text" @click="editBook(obj)">
-                              编辑
-                            </el-button>
-                            <el-button class="destroy" type="text" @click="del(obj)">
-                              删除
-                            </el-button>
+                          <div class="partObjectIntroduce">
+                            {{ obj.content }}
                           </div>
-                        </div>
-                        <div class="partObjectIntroduce">
-                          {{ obj.content }}
-                        </div>
-                      </li>
-                    </ul>
-                  </el-scrollbar>
+                        </li>
+                      </ul>
+                    </el-scrollbar>
+                  </div>
+                </li>
+              </ul>
+            </el-scrollbar>
+            <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500"
+              :before-close="handleClose">
+              <el-form :model="formData" label-width="auto" style="max-width: 600px">
+                <el-form-item label="内容" prop="description">
+                  <el-input v-model="formData.description" placeholder="请输入内容"></el-input>
+                </el-form-item>
+              </el-form>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="close">取消</el-button>
+                  <el-button type="primary" @click="submit">确定</el-button>
                 </div>
-              </li>
-            </ul>
-          </el-scrollbar>
-          <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500"
-            :before-close="handleClose">
-            <el-form :model="formData" label-width="auto" style="max-width: 600px">
-              <el-form-item label="内容" prop="description">
-                <el-input v-model="formData.description" placeholder="请输入内容"></el-input>
-              </el-form-item>
-            </el-form>
-            <template #footer>
-              <div class="dialog-footer">
-                <el-button @click="close">取消</el-button>
-                <el-button type="primary" @click="submit">确定</el-button>
-              </div>
-            </template>
-          </el-dialog>
+              </template>
+            </el-dialog>
+          </div>
         </div>
       </div>
     </div>
@@ -292,13 +453,39 @@ onMounted(async () => {
     // border: 1px solid black;
 
     // background-color: pink;
+    .total {
+      border-radius: 20px;
+      width: 360px;
+      height: 120px;
+      background-color: #74deff;
+      background-image: linear-gradient(to right, #4984ff, #74deff);
+
+      .content1 {
+        border-radius: 20px;
+        margin-top: 10px;
+        width: 100%;
+        height: 100px;
+        background-color: #fff;
+        background-image: linear-gradient(#c7e3ff, #ffffff);
+
+        .textarea {
+          width: 100%;
+          resize: none;
+          border: none;
+          background: transparent;
+          padding: 20px;
+          // height: 100px;
+        }
+      }
+    }
 
     .radar {
-      // float: left;
+      // float: left
       border-radius: 20px;
-      width: 390px;
+      width: 360px;
+      margin-top: 50px;
       margin-right: 20px;
-      height: 230px;
+      height: 130px;
       background-color: #ffa674;
       background-image: linear-gradient(to right, #f9e397, #ffa674);
     }
@@ -318,7 +505,7 @@ onMounted(async () => {
       margin-top: 10px;
       // margin-right: 20px;
       width: 100%;
-      height: 350px;
+      height: 180px;
       background-color: #fff;
       background-image: linear-gradient(#ffe9c7, #ffffff);
     }