|
|
|
|
@ -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); |
|
|
|
|
} |
|
|
|
|
|
