|
|
|
@ -3,7 +3,7 @@ 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 { useRoute } from 'vue-router' |
|
|
|
|
import { |
|
|
|
|
getCourseList, |
|
|
|
|
addCourse, |
|
|
|
@ -11,7 +11,9 @@ import { |
|
|
|
|
deleteCourse, |
|
|
|
|
getCourseInfo, |
|
|
|
|
} from '@/api/courseChaptersApi' |
|
|
|
|
import { useRoute, useRouter } from 'vue-router' |
|
|
|
|
const route = useRoute() |
|
|
|
|
const router = useRouter() |
|
|
|
|
// id : 分目标id |
|
|
|
|
// targetId : 选中的分类 |
|
|
|
|
|
|
|
|
@ -154,6 +156,9 @@ const getList = async () => { |
|
|
|
|
const data = ref({}) |
|
|
|
|
const courseId = ref(0) |
|
|
|
|
onMounted(async () => { |
|
|
|
|
if (!Object.keys(route.query).length) { |
|
|
|
|
return router.push('/curriculumCenter/basicCourseInformation') |
|
|
|
|
} |
|
|
|
|
courseId.value = route.query.id |
|
|
|
|
console.log(courseId.value) |
|
|
|
|
getList() |
|
|
|
@ -162,35 +167,155 @@ onMounted(async () => { |
|
|
|
|
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 }, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
radar: [ |
|
|
|
|
{ |
|
|
|
|
nameGap: 20, |
|
|
|
|
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%', '50%'], |
|
|
|
|
radius: 100, |
|
|
|
|
startAngle: 90, |
|
|
|
|
splitNumber: 6, |
|
|
|
|
shape: 'circle', |
|
|
|
|
name: { |
|
|
|
|
formatter: '{value}', |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#333333', |
|
|
|
|
fontSize: 20, |
|
|
|
|
}, |
|
|
|
|
gap: 60, |
|
|
|
|
}, |
|
|
|
|
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: 3, |
|
|
|
|
type: 'dashed', //dashed solid dotted 射线类型【实线 虚线】 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
nameGap: 20, |
|
|
|
|
indicator: [ |
|
|
|
|
{ |
|
|
|
|
text: '达成度', |
|
|
|
|
max: 100, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
text: '达成度', |
|
|
|
|
max: 100, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
text: '达成度', |
|
|
|
|
max: 100, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
text: '达成度', |
|
|
|
|
max: 100, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
text: '达成度', |
|
|
|
|
max: 100, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
|
|
|
|
|
center: ['50%', '50%'], |
|
|
|
|
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: 18, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#6093FF', |
|
|
|
|
type: 'solid', |
|
|
|
|
width: 8, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: 'Budget vs spending', |
|
|
|
|
type: 'radar', |
|
|
|
|
emphasis: { |
|
|
|
|
lineStyle: { |
|
|
|
|
width: 50, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
symbol: 'none', |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: [4200, 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: 50, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
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', |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
@ -332,7 +457,7 @@ const li |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
#main { |
|
|
|
|
padding: 15px; |
|
|
|
|
padding: 10px; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|