Compare commits
5 Commits
0da2b2cc06
...
fd1011f3ca
| Author | SHA1 | Date |
|---|---|---|
 xy
|
fd1011f3ca | 5 months ago |
|
xy
|
2fe4c667fd | 5 months ago |
|
xy
|
d13383b4d8 | 5 months ago |
|
xy
|
e33012cb37 | 5 months ago |
|
xy
|
84c8f6f805 | 5 months ago |
7 changed files with 4968 additions and 4599 deletions
File diff suppressed because it is too large
Load Diff
@ -1,121 +1,475 @@ |
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
// import allclass from '@/assets/images/allclass.png' |
||||
<script setup> |
||||
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' |
||||
import { getCourseList, addCourse, editCourse, deleteCourse, getCourseInfo } from '@/api/courseChaptersApi' |
||||
const route = useRoute() |
||||
// id ： 分目标id |
||||
// targetId ： 选中的分类 |
||||
|
||||
const targetList = ref([ |
||||
{ |
||||
label: '课程目标一', |
||||
id: 1, |
||||
disabled: false, |
||||
}, |
||||
{ |
||||
label: '课程目标二', |
||||
disabled: false, |
||||
id: 2, |
||||
}, |
||||
{ |
||||
label: '课程目标三', |
||||
id: 3, |
||||
disabled: false, |
||||
}, |
||||
]) |
||||
const formData = ref({ |
||||
description: '', |
||||
}) |
||||
const activeIndex = ref(0) |
||||
const addBook = (id) => { |
||||
activeIndex.value = id |
||||
dialogVisible.value = true |
||||
flog.value = false |
||||
// updateDisabledStatus() |
||||
} |
||||
const text = ref('我是后台获取的值') |
||||
const textChange = (val) => { |
||||
console.log(text.value) |
||||
} |
||||
// 弹窗 |
||||
const dialogVisible = ref(false) |
||||
// 关闭弹窗 |
||||
const handleClose = () => { |
||||
dialogVisible.value = false |
||||
} |
||||
// 弹窗提交事件 |
||||
const submit = async () => { |
||||
if (flog.value) { |
||||
await editCourse({ id: activeIndex.value, content: formData.value.description }) |
||||
} else { |
||||
await addCourse({ objectiveId: activeIndex.value, content: formData.value.description }) |
||||
} |
||||
|
||||
getList() |
||||
dialogVisible.value = false |
||||
formData.value.description = '' |
||||
activeIndex.value = '' |
||||
// // 判断当前点击的是新增还是修改 |
||||
// if (flog.value) { |
||||
// console.log('编辑', formData.value.target) |
||||
// // 找到新增的一项 |
||||
// const index = booksList.value.findIndex( |
||||
// (item) => formData.value.id == item.id, |
||||
// ) |
||||
// console.log(index, 'index') |
||||
// console.log(booksList.value[index]) |
||||
// booksList.value[index].id = formData.value.id |
||||
// booksList.value[index].targetId = formData.value.target |
||||
// booksList.value[index].introduce = formData.value.description |
||||
// close() |
||||
// } else { |
||||
// courseList.value[activeIndex.value].booklist.push({ |
||||
// id: booksList.value.length + 1, |
||||
// targetId: formData.value.target, |
||||
// introduce: formData.value.description, |
||||
// }) |
||||
// close() |
||||
// flog.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) |
||||
return item |
||||
} |
||||
}) |
||||
return res.label |
||||
} |
||||
|
||||
// 编辑事件 |
||||
const flog = ref(false) |
||||
const editBook = async (obj) => { |
||||
const res = await getCourseInfo({ id: obj.id }) |
||||
|
||||
flog.value = true |
||||
console.log(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 del = async (obj) => { |
||||
await ElMessageBox.confirm('你确认要删除该课程目标吗', '温馨提示', { |
||||
type: 'warning', |
||||
confirmButtonText: '确认', |
||||
cancelButtonText: '取消' |
||||
}) |
||||
await deleteCourse({ id: obj.id }) |
||||
ElMessage.success('删除成功') |
||||
getList() |
||||
// console.log(id); |
||||
// activeIndex.value = id |
||||
// courseList.booksList.value = booksList.value.filter((item) => item.id !== id) |
||||
} |
||||
|
||||
// const disableChange = (id) => { |
||||
// const index = booksList.value.findIndex((item,index) => item.id === id) |
||||
// console.log(index); |
||||
// if(index){ |
||||
// targetList.value[index].disabled = false |
||||
// } |
||||
// } |
||||
// 定义一个方法来更新 targetList 中的 disabled 属性 |
||||
|
||||
const getList = async () => { |
||||
const res = await getCourseList({ id: courseId.value }) |
||||
data.value = res.data[0] |
||||
text.value = res.data[0].name |
||||
} |
||||
const data = ref({}) |
||||
const courseId = ref(0) |
||||
onMounted(async () => { |
||||
courseId.value = route.query.id |
||||
console.log(courseId.value); |
||||
getList() |
||||
console.log(data.value); |
||||
let chartDom = document.getElementById('main') |
||||
let myChart = echarts.init(chartDom) |
||||
let option |
||||
option = { |
||||
title: { |
||||
text: '分目标', |
||||
}, |
||||
legend: { |
||||
data: ['Allocated Budget', 'Actual Spending'], |
||||
}, |
||||
radar: { |
||||
// shape: 'circle', |
||||
indicator: [ |
||||
{ name: 'Sales', max: 6500 }, |
||||
{ name: 'Administration', max: 16000 }, |
||||
{ name: 'Information Technology', max: 30000 }, |
||||
{ name: 'Customer Support', max: 38000 }, |
||||
{ name: 'Development', max: 52000 }, |
||||
{ name: 'Marketing', max: 25000 }, |
||||
], |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: 'Budget vs spending', |
||||
type: 'radar', |
||||
data: [ |
||||
{ |
||||
value: [4200, 3000, 20000, 35000, 50000, 18000], |
||||
name: 'Allocated Budget', |
||||
}, |
||||
{ |
||||
value: [5000, 14000, 28000, 26000, 42000, 21000], |
||||
name: 'Actual Spending', |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
} |
||||
|
||||
option && myChart.setOption(option) |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="8"> |
||||
<div class="grid-content main"> |
||||
<div class="title"><p>| 课程总目标</p></div> |
||||
<div class="ac_content"> |
||||
<div class="ma_content"> |
||||
通过本课程的学习，使学生进一步了解计算机的工作原理，更好地理解和应用计算机，掌 |
||||
握用计算机处理问题的方法和技能:培养学生分析问题、解决问题的能力以及编制程序实现算 |
||||
法的能力。 |
||||
</div> |
||||
<div class="container"> |
||||
<div class="leftContent"> |
||||
<div class="topContent"> |
||||
<div class="title">| 课程总目标</div> |
||||
<div class="content1"> |
||||
<textarea class="textarea" @change="textChange" v-model="text">文本内容</textarea> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="grid-content picture"> |
||||
<div class="title"><p>| 课程总目标</p></div> |
||||
<div class="ac_pic"></div> |
||||
<div class="footContent"> |
||||
<div class="title">| 分目标雷达图</div> |
||||
<div class="content3"> |
||||
<div id="main"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="rightContent"> |
||||
<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> --> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="16"> |
||||
<div class="grid-content object"> |
||||
<div class="title"><p>| 课程分目标</p></div> |
||||
<div class="slice"></div> |
||||
<div class="content2"> |
||||
<el-scrollbar height="600px"> |
||||
<ul class="objectLi"> |
||||
<li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id"> |
||||
<div class="courseObject"> |
||||
<!-- {{ filterTarger(item.targetId) }} --> |
||||
<div class="courseObject1">{{ item.name }}</div> |
||||
<div class="courseObject2"> |
||||
<!-- <el-button class="edit" type="text" @click="editBook(item)"> |
||||
编辑 |
||||
</el-button> --> |
||||
<el-button type="primary" @click="addBook(item.id)">新增</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="smallContent"> |
||||
<el-scrollbar height="250px"> |
||||
<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="partObjectIntroduce"> |
||||
{{ obj.content }} |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</el-scrollbar> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</el-scrollbar> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</div> |
||||
<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> |
||||
</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> |
||||
<!-- <script setup> |
||||
import {ref} 'vue' |
||||
const li |
||||
</script> --> |
||||
|
||||
<style scoped> |
||||
.el-row { |
||||
margin-bottom: 20px; |
||||
} |
||||
.el-col { |
||||
border-radius: 4px; |
||||
} |
||||
.bg-purple { |
||||
background: #d3dce6; |
||||
} |
||||
.bg-purple-light { |
||||
background: #e5e9f2; |
||||
<style lang="scss" scoped> |
||||
#main { |
||||
padding: 15px; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.grid-content { |
||||
border-radius: 4px; |
||||
|
||||
.container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex-direction: row; |
||||
flex-wrap: nowrap; |
||||
width: 100%; |
||||
|
||||
padding: 0 10px 0 10px; |
||||
justify-content: space-around; |
||||
} |
||||
.ac_content { |
||||
background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%); |
||||
border-radius: 29px 29px 29px 29px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 206px; |
||||
} |
||||
.ma_content { |
||||
height: 160px; |
||||
font-family: Inter, Inter; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
line-height: 20px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
margin-left: 33px; |
||||
margin-right: 33px; |
||||
} |
||||
.ac_pic { |
||||
height: 488px; |
||||
background: linear-gradient(180deg, #ffe9c7 0%, #ffffff 100%); |
||||
border-radius: 29px 29px 29px 29px; |
||||
} |
||||
img { |
||||
order: -1; |
||||
} |
||||
.object { |
||||
height: 857px; |
||||
background: linear-gradient(180deg, #4984ff 0%, #74deff 100%); |
||||
border-radius: 29px 29px 29px 29px; |
||||
} |
||||
.slice { |
||||
height: 791px; |
||||
background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%); |
||||
border-radius: 29px 29px 29px 29px; |
||||
} |
||||
.picture { |
||||
height: 553px; |
||||
margin-top: 28px; |
||||
border-radius: 29px 29px 29px 29px; |
||||
background-image: linear-gradient(to right, #f9e397, #ffa674); |
||||
} |
||||
.main { |
||||
height: 272px; |
||||
border-radius: 29px 29px 29px 29px; |
||||
|
||||
.leftContent { |
||||
width: 450px; |
||||
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: 430px; |
||||
background-color: #ffa674; |
||||
background-image: linear-gradient(to right, #f9e397, #ffa674); |
||||
} |
||||
} |
||||
|
||||
.rightContent { |
||||
margin: 10px; |
||||
width: 950px; |
||||
height: 730px; |
||||
background-image: linear-gradient(to right, #4984ff, #74deff); |
||||
display: flex; |
||||
justify-content: end; |
||||
border-radius: 20px; |
||||
} |
||||
|
||||
.title { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
p { |
||||
height: 29px; |
||||
font-family: Inter, Inter; |
||||
font-weight: bold; |
||||
margin-left: 34px; |
||||
padding-left: 30px; |
||||
font-size: 24px; |
||||
color: #ffffff; |
||||
line-height: 28px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
font-weight: 600; |
||||
color: #fff; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
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: 670px; |
||||
background-color: #fff; |
||||
background-image: linear-gradient(#c7e3ff, #ffffff); |
||||
|
||||
.objectLi>li { |
||||
width: 845px; |
||||
height: 250px; |
||||
// margin: 40px; |
||||
// background-color: #ffffff; |
||||
border-radius: 5px; |
||||
margin: 20px; |
||||
|
||||
.courseObject { |
||||
height: 45px; |
||||
line-height: 40px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 20px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
|
||||
.courseObject1 { |
||||
height: 30px; |
||||
line-height: 30px; |
||||
font-size: 14px; |
||||
background-color: #6093ff; |
||||
padding: 0px 16px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.courseObject2 { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// overflow-y: auto |
||||
.smallContent { |
||||
// border-radius: 20px; |
||||
padding: 10px; |
||||
width: 100%; |
||||
height: 200px; |
||||
background-color: #fff; |
||||
background-image: linear-gradient(#c7e3ff, #ffffff); |
||||
} |
||||
|
||||
.small>li { |
||||
// display: inline-flex; |
||||
width: 650px; |
||||
height: 150px; |
||||
// margin: 40px; |
||||
background-color: #ffffff; |
||||
border-radius: 5px; |
||||
margin: 20px; |
||||
|
||||
.partObject { |
||||
height: 45px; |
||||
line-height: 40px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 20px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
|
||||
.partObject1 { |
||||
height: 30px; |
||||
line-height: 30px; |
||||
font-size: 14px; |
||||
background-color: #6093ff; |
||||
padding: 0px 16px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.partObject2 { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
} |
||||
} |
||||
|
||||
.partObjectIntroduce { |
||||
height: 149px; |
||||
font-size: 16px; |
||||
padding: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.content3 { |
||||
border-radius: 20px; |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
height: 370px; |
||||
background-color: #fff; |
||||
background-image: linear-gradient(#ffe9c7, #ffffff); |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,476 @@ |
||||
<script setup> |
||||
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' |
||||
import { getCourseList } from '@/api/courseChaptersApi' |
||||
const route = useRoute() |
||||
// id ： 分目标id |
||||
// targetId ： 选中的分类 |
||||
const booksList = ref([ |
||||
{ id: 1, targetId: 1, introduce: '内容111111' }, |
||||
// { id: 3, introduce: '内容333333' }, |
||||
// { id: 4, introduce: '内容333333' }, |
||||
]) |
||||
|
||||
const courseList = ref([ |
||||
{ id: 1, specific: '思政目标', booklist: [{ id: 1, targetId: 1, introduce: '内容111111' }] }, |
||||
{ id: 2, specific: '知识目标', booklist: [{ id: 1, targetId: 1, introduce: '内容222222' }] }, |
||||
{ id: 3, specific: '能力目标', booklist: [{ id: 1, targetId: 1, introduce: '内容333333' }] }, |
||||
{ id: 4, specific: '素质目标', booklist: [{ id: 1, targetId: 1, introduce: '内容444444' }] }, |
||||
]) |
||||
const targetList = ref([ |
||||
{ |
||||
label: '课程目标一', |
||||
id: 1, |
||||
disabled: false, |
||||
}, |
||||
{ |
||||
label: '课程目标二', |
||||
disabled: false, |
||||
id: 2, |
||||
}, |
||||
{ |
||||
label: '课程目标三', |
||||
id: 3, |
||||
disabled: false, |
||||
}, |
||||
]) |
||||
const formData = ref({ |
||||
id: null, |
||||
target: '', |
||||
description: '', |
||||
}) |
||||
const activeIndex = ref(0) |
||||
const addBook = (index) => { |
||||
activeIndex.value = index |
||||
dialogVisible.value = true |
||||
updateDisabledStatus() |
||||
} |
||||
const text = ref('我是后台获取的值') |
||||
const textChange = (val) => { |
||||
console.log(text.value) |
||||
} |
||||
// 弹窗 |
||||
const dialogVisible = ref(false) |
||||
// 关闭弹窗 |
||||
const handleClose = () => { |
||||
dialogVisible.value = false |
||||
} |
||||
// 弹窗提交事件 |
||||
const submit = () => { |
||||
// 判断当前点击的是新增还是修改 |
||||
if (flog.value) { |
||||
console.log('编辑', formData.value.target) |
||||
// 找到新增的一项 |
||||
const index = booksList.value.findIndex( |
||||
(item) => formData.value.id == item.id, |
||||
) |
||||
console.log(index, 'index') |
||||
console.log(booksList.value[index]) |
||||
booksList.value[index].id = formData.value.id |
||||
booksList.value[index].targetId = formData.value.target |
||||
booksList.value[index].introduce = formData.value.description |
||||
close() |
||||
} else { |
||||
courseList.value[activeIndex.value].booklist.push({ |
||||
id: booksList.value.length + 1, |
||||
targetId: formData.value.target, |
||||
introduce: formData.value.description, |
||||
}) |
||||
close() |
||||
flog.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) |
||||
return item |
||||
} |
||||
}) |
||||
return res.label |
||||
} |
||||
|
||||
// 编辑事件 |
||||
const flog = ref(false) |
||||
const editBook = (obj) => { |
||||
updateDisabledStatus() |
||||
flog.value = true |
||||
console.log(obj) |
||||
formData.value.id = obj.id |
||||
formData.value.target = obj.targetId |
||||
formData.value.description = obj.introduce |
||||
dialogVisible.value = true |
||||
} |
||||
const del = (id) => { |
||||
// console.log(id); |
||||
courseList.booksList.value = booksList.value.filter((item) => item.id !== id) |
||||
} |
||||
|
||||
// const disableChange = (id) => { |
||||
// const index = booksList.value.findIndex((item,index) => item.id === id) |
||||
// console.log(index); |
||||
// if(index){ |
||||
// targetList.value[index].disabled = false |
||||
// } |
||||
// } |
||||
// 定义一个方法来更新 targetList 中的 disabled 属性 |
||||
const updateDisabledStatus = () => { |
||||
// 遍历 targetList |
||||
targetList.value.forEach((targetItem) => { |
||||
// 检查 booksList 中是否有相同的 id |
||||
const hasIdInBooks = booksList.value.some( |
||||
(bookItem) => bookItem.id === targetItem.id, |
||||
) |
||||
// 如果存在，则设置 disabled 为 true |
||||
if (hasIdInBooks) { |
||||
targetItem.disabled = true |
||||
} |
||||
}) |
||||
} |
||||
const list=ref([]) |
||||
const content88=ref() |
||||
const courseId = ref(0) |
||||
onMounted(async() => { |
||||
courseId.value = route.query.id |
||||
console.log(courseId.value); |
||||
const res = await getCourseList({ id: courseId.value }) |
||||
console.log(res); |
||||
list.value=res.data |
||||
console.log(list.value); |
||||
content88.value = list.value[0].contents[0].content |
||||
console.log(list.value[0].contents[0].content); |
||||
console.log(content88.value); |
||||
|
||||
|
||||
let chartDom = document.getElementById('main') |
||||
let myChart = echarts.init(chartDom) |
||||
let option |
||||
option = { |
||||
title: { |
||||
text: '分目标', |
||||
}, |
||||
legend: { |
||||
data: ['Allocated Budget', 'Actual Spending'], |
||||
}, |
||||
radar: { |
||||
// shape: 'circle', |
||||
indicator: [ |
||||
{ name: 'Sales', max: 6500 }, |
||||
{ name: 'Administration', max: 16000 }, |
||||
{ name: 'Information Technology', max: 30000 }, |
||||
{ name: 'Customer Support', max: 38000 }, |
||||
{ name: 'Development', max: 52000 }, |
||||
{ name: 'Marketing', max: 25000 }, |
||||
], |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: 'Budget vs spending', |
||||
type: 'radar', |
||||
data: [ |
||||
{ |
||||
value: [4200, 3000, 20000, 35000, 50000, 18000], |
||||
name: 'Allocated Budget', |
||||
}, |
||||
{ |
||||
value: [5000, 14000, 28000, 26000, 42000, 21000], |
||||
name: 'Actual Spending', |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
} |
||||
|
||||
option && myChart.setOption(option) |
||||
}) |
||||
</script> |
||||
<!-- v-model="text" --> |
||||
<template> |
||||
<div class="container"> |
||||
<div class="leftContent"> |
||||
<div class="topContent"> |
||||
<div class="title">| 课程总目标</div> |
||||
<div class="content1"> |
||||
<textarea class="textarea" @change="textChange">{{ content88 }}</textarea> |
||||
</div> |
||||
</div> |
||||
<div class="footContent"> |
||||
<div class="title">| 分目标雷达图</div> |
||||
<div class="content3"> |
||||
<div id="main"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="rightContent"> |
||||
<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> --> |
||||
</div> |
||||
</div> |
||||
<div class="content2"> |
||||
<el-scrollbar height="600px"> |
||||
<ul class="objectLi"> |
||||
<li v-for="(item, index) in courseList" :key="item.id"> |
||||
<div class="courseObject"> |
||||
<!-- {{ filterTarger(item.targetId) }} --> |
||||
<div class="courseObject1">{{ item.specific }}</div> |
||||
<div class="courseObject2"> |
||||
<!-- <el-button class="edit" type="text" @click="editBook(item)"> |
||||
编辑 |
||||
</el-button> --> |
||||
<el-button type="primary" @click="addBook(index)">新增</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="smallContent"> |
||||
<el-scrollbar height="250px"> |
||||
<ul class="small"> |
||||
<li v-for="(obj, i) in item.booklist" :key="obj.id"> |
||||
<div class="partObject"> |
||||
<div class="partObject1"> |
||||
<!-- {{ 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.id)"> |
||||
删除 |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="partObjectIntroduce"> |
||||
{{ obj.introduce }} |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</el-scrollbar> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</el-scrollbar> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<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"> |
||||
<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> |
||||
</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> |
||||
<!-- <script setup> |
||||
import {ref} 'vue' |
||||
const li |
||||
</script> --> |
||||
|
||||
<style lang="scss" scoped> |
||||
#main { |
||||
padding: 15px; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.container { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: nowrap; |
||||
width: 100%; |
||||
|
||||
padding: 0 10px 0 10px; |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.leftContent { |
||||
width: 450px; |
||||
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: 430px; |
||||
background-color: #ffa674; |
||||
background-image: linear-gradient(to right, #f9e397, #ffa674); |
||||
} |
||||
} |
||||
|
||||
.rightContent { |
||||
margin: 10px; |
||||
width: 950px; |
||||
height: 730px; |
||||
background-image: linear-gradient(to right, #4984ff, #74deff); |
||||
border-radius: 20px; |
||||
} |
||||
|
||||
.title { |
||||
padding-left: 30px; |
||||
font-size: 24px; |
||||
font-weight: 600; |
||||
color: #fff; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
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: 670px; |
||||
background-color: #fff; |
||||
background-image: linear-gradient(#c7e3ff, #ffffff); |
||||
|
||||
.objectLi > li { |
||||
width: 845px; |
||||
height: 250px; |
||||
// margin: 40px; |
||||
// background-color: #ffffff; |
||||
border-radius: 5px; |
||||
margin: 20px; |
||||
.courseObject { |
||||
height: 45px; |
||||
line-height: 40px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 20px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
|
||||
.courseObject1 { |
||||
height: 30px; |
||||
line-height: 30px; |
||||
font-size: 14px; |
||||
background-color: #6093ff; |
||||
padding: 0px 16px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.courseObject2 { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
} |
||||
} |
||||
} |
||||
// overflow-y: auto |
||||
.smallContent { |
||||
// border-radius: 20px; |
||||
padding: 10px; |
||||
width: 100%; |
||||
height: 200px; |
||||
background-color: #fff; |
||||
background-image: linear-gradient(#c7e3ff, #ffffff); |
||||
} |
||||
.small > li { |
||||
// display: inline-flex; |
||||
width: 750px; |
||||
height: 150px; |
||||
// margin: 40px; |
||||
background-color: #ffffff; |
||||
border-radius: 5px; |
||||
margin: 20px; |
||||
|
||||
.partObject { |
||||
height: 45px; |
||||
line-height: 40px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 20px; |
||||
border-bottom: 1px solid #e7e7e7; |
||||
|
||||
.partObject1 { |
||||
height: 30px; |
||||
line-height: 30px; |
||||
font-size: 14px; |
||||
background-color: #6093ff; |
||||
padding: 0px 16px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.partObject2 { |
||||
font-size: 14px; |
||||
color: #0052d9; |
||||
} |
||||
} |
||||
|
||||
.partObjectIntroduce { |
||||
height: 149px; |
||||
font-size: 16px; |
||||
padding: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.content3 { |
||||
border-radius: 20px; |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
height: 370px; |
||||
background-color: #fff; |
||||
background-image: linear-gradient(#ffe9c7, #ffffff); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,40 @@ |
||||
// vite.config.ts
|
||||
import vue from "file:///D:/aaa/teaching/Teaching_integration_platform_admin_template/node_modules/.pnpm/@vitejs+plugin-vue@5.0.4_vite@5.1.4_vue@3.4.19/node_modules/@vitejs/plugin-vue/dist/index.mjs"; |
||||
import path from "path"; |
||||
import { viteMockServe } from "file:///D:/aaa/teaching/Teaching_integration_platform_admin_template/node_modules/.pnpm/vite-plugin-mock@3.0.1_esbuild@0.19.12_mockjs@1.1.0_vite@5.1.4/node_modules/vite-plugin-mock/dist/index.mjs"; |
||||
import { createSvgIconsPlugin } from "file:///D:/aaa/teaching/Teaching_integration_platform_admin_template/node_modules/.pnpm/vite-plugin-svg-icons@2.0.1_vite@5.1.4/node_modules/vite-plugin-svg-icons/dist/index.mjs"; |
||||
var vite_config_default = ({ command }) => { |
||||
return { |
||||
plugins: [ |
||||
vue(), |
||||
viteMockServe({ |
||||
enable: command === "serve" |
||||
}), |
||||
createSvgIconsPlugin({ |
||||
// Specify the icon folder to be cached
|
||||
iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], |
||||
// Specify symbolId format
|
||||
symbolId: "icon-[dir]-[name]" |
||||
}) |
||||
], |
||||
resolve: { |
||||
alias: { |
||||
"@": path.resolve("./src") |
||||
// 相对路径别名配置，使用 @ 代替 src
|
||||
} |
||||
}, |
||||
// 配置scss
|
||||
css: { |
||||
preprocessorOptions: { |
||||
scss: { |
||||
javascriptEnabled: true, |
||||
additionalData: '@import "./src/styles/variable.scss";' |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
}; |
||||
export { |
||||
vite_config_default as default |
||||
}; |
||||
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxhYWFcXFxcdGVhY2hpbmdcXFxcVGVhY2hpbmdfaW50ZWdyYXRpb25fcGxhdGZvcm1fYWRtaW5fdGVtcGxhdGVcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkQ6XFxcXGFhYVxcXFx0ZWFjaGluZ1xcXFxUZWFjaGluZ19pbnRlZ3JhdGlvbl9wbGF0Zm9ybV9hZG1pbl90ZW1wbGF0ZVxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRDovYWFhL3RlYWNoaW5nL1RlYWNoaW5nX2ludGVncmF0aW9uX3BsYXRmb3JtX2FkbWluX3RlbXBsYXRlL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXHJcbmltcG9ydCBwYXRoIGZyb20gJ3BhdGgnXHJcbi8vIFx1NUJGQ1x1NTE2NW1vY2tcdTYzRDJcdTRFRjZcclxuaW1wb3J0IHsgdml0ZU1vY2tTZXJ2ZSB9IGZyb20gJ3ZpdGUtcGx1Z2luLW1vY2snXHJcbi8vIFx1NUJGQ1x1NTE2NXN2Z1x1OTE0RFx1N0Y2RVx1NjNEMlx1NEVGNlxyXG5pbXBvcnQgeyBjcmVhdGVTdmdJY29uc1BsdWdpbiB9IGZyb20gJ3ZpdGUtcGx1Z2luLXN2Zy1pY29ucydcclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgKHsgY29tbWFuZCB9OiBhbnkpID0+IHtcclxuICByZXR1cm4ge1xyXG4gICAgcGx1Z2luczogW1xyXG4gICAgICB2dWUoKSxcclxuICAgICAgdml0ZU1vY2tTZXJ2ZSh7XHJcbiAgICAgICAgZW5hYmxlOiBjb21tYW5kID09PSAnc2VydmUnLFxyXG4gICAgICB9KSxcclxuICAgICAgY3JlYXRlU3ZnSWNvbnNQbHVnaW4oe1xyXG4gICAgICAgIC8vIFNwZWNpZnkgdGhlIGljb24gZm9sZGVyIHRvIGJlIGNhY2hlZFxyXG4gICAgICAgIGljb25EaXJzOiBbcGF0aC5yZXNvbHZlKHByb2Nlc3MuY3dkKCksICdzcmMvYXNzZXRzL2ljb25zJyldLFxyXG4gICAgICAgIC8vIFNwZWNpZnkgc3ltYm9sSWQgZm9ybWF0XHJcbiAgICAgICAgc3ltYm9sSWQ6ICdpY29uLVtkaXJdLVtuYW1lXScsXHJcbiAgICAgIH0pLFxyXG4gICAgXSxcclxuICAgIHJlc29sdmU6IHtcclxuICAgICAgYWxpYXM6IHtcclxuICAgICAgICAnQCc6IHBhdGgucmVzb2x2ZSgnLi9zcmMnKSwgLy8gXHU3NkY4XHU1QkY5XHU4REVGXHU1Rjg0XHU1MjJCXHU1NDBEXHU5MTREXHU3RjZFXHVGRjBDXHU0RjdGXHU3NTI4IEAgXHU0RUUzXHU2NkZGIHNyY1xyXG4gICAgICB9LFxyXG4gICAgfSxcclxuICAgIC8vIFx1OTE0RFx1N0Y2RXNjc3NcclxuICAgIGNzczoge1xyXG4gICAgICBwcmVwcm9jZXNzb3JPcHRpb25zOiB7XHJcbiAgICAgICAgc2Nzczoge1xyXG4gICAgICAgICAgamF2YXNjcmlwdEVuYWJsZWQ6IHRydWUsXHJcbiAgICAgICAgICBhZGRpdGlvbmFsRGF0YTogJ0BpbXBvcnQgXCIuL3NyYy9zdHlsZXMvdmFyaWFibGUuc2Nzc1wiOycsXHJcbiAgICAgICAgfSxcclxuICAgICAgfSxcclxuICAgIH0sXHJcbiAgfVxyXG59XHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFDQSxPQUFPLFNBQVM7QUFDaEIsT0FBTyxVQUFVO0FBRWpCLFNBQVMscUJBQXFCO0FBRTlCLFNBQVMsNEJBQTRCO0FBRXJDLElBQU8sc0JBQVEsQ0FBQyxFQUFFLFFBQVEsTUFBVztBQUNuQyxTQUFPO0FBQUEsSUFDTCxTQUFTO0FBQUEsTUFDUCxJQUFJO0FBQUEsTUFDSixjQUFjO0FBQUEsUUFDWixRQUFRLFlBQVk7QUFBQSxNQUN0QixDQUFDO0FBQUEsTUFDRCxxQkFBcUI7QUFBQTtBQUFBLFFBRW5CLFVBQVUsQ0FBQyxLQUFLLFFBQVEsUUFBUSxJQUFJLEdBQUcsa0JBQWtCLENBQUM7QUFBQTtBQUFBLFFBRTFELFVBQVU7QUFBQSxNQUNaLENBQUM7QUFBQSxJQUNIO0FBQUEsSUFDQSxTQUFTO0FBQUEsTUFDUCxPQUFPO0FBQUEsUUFDTCxLQUFLLEtBQUssUUFBUSxPQUFPO0FBQUE7QUFBQSxNQUMzQjtBQUFBLElBQ0Y7QUFBQTtBQUFBLElBRUEsS0FBSztBQUFBLE1BQ0gscUJBQXFCO0FBQUEsUUFDbkIsTUFBTTtBQUFBLFVBQ0osbUJBQW1CO0FBQUEsVUFDbkIsZ0JBQWdCO0FBQUEsUUFDbEI7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLEVBQ0Y7QUFDRjsiLAogICJuYW1lcyI6IFtdCn0K
|
||||
Loading…
Reference in new issue