parent
d13383b4d8
commit
2fe4c667fd
9 changed files with 1641 additions and 385 deletions
@ -1,28 +1,33 @@ |
||||
import request from '@/utils/request' |
||||
export const getCourseListApi = () => { |
||||
return request.get('/coursesteacher/page?teacherId=2140110334') |
||||
// 获取课程列表
|
||||
export const getCourseListApi = (params) => { |
||||
return request.get('/coursesteacher/page', { |
||||
params, |
||||
}) |
||||
} |
||||
export const editCourseApi = () => { |
||||
return request.put('/coursesTeacher') |
||||
// 编辑课程
|
||||
export const editCourseApi = (params) => { |
||||
return request.put('/coursesteacher', params) |
||||
} |
||||
// 添加课程
|
||||
export const addCourseApi = (data) => { |
||||
return request.post('/courseTeacher/addCourse', data) |
||||
return request.post(`/coursesteacher/addcourse`, data) |
||||
} |
||||
|
||||
export const fnName = (data) => { |
||||
return request({ |
||||
url: 'xxxxx', |
||||
method: 'POST', |
||||
data |
||||
}) |
||||
// 获取课程详情
|
||||
export const getCourseDetailApi = (id) => { |
||||
return request.get(`/coursesteacher/${id}`) |
||||
} |
||||
export const fnNameGet = (params) => { |
||||
return request({ |
||||
url: 'xxxxx', |
||||
method: 'get', |
||||
params |
||||
}) |
||||
|
||||
// 删除课程
|
||||
export const deleteCourseApi = (id) => { |
||||
return request.delete(`/coursesteacher/${id}`) |
||||
} |
||||
// 获取课程id
|
||||
export const getCourseObjectApi = (id) => { |
||||
return request.get(`/course_objectives/list/${id}`) |
||||
} |
||||
// 获取教师列表
|
||||
export const getTeacherListApi = () => { |
||||
return request.get('/user/get_teacherinf_list') |
||||
} |
||||
// {id:1}
|
||||
// http://127.0.0.1/getlist?id=1
|
||||
// http://127.0.0.1/setuser 载荷 body
|
||||
@ -0,0 +1,31 @@ |
||||
import OSS from 'ali-oss' |
||||
import { nanoid } from 'nanoid' |
||||
export const client = new OSS({ |
||||
region: 'oss-cn-beijing', //创建的时候，bucket所在的区域，华北2->oss-cn-beijing ；其他的可以去百度
|
||||
accessKeyId: 'LTAI5tPutTqQcDZjPXTVmuLy', // 阿里云控制台创建的AccessKey
|
||||
accessKeySecret: '3PmB75969OJt6uOMkRJTZjpSbVI4iL', //阿里云控制台创建的AccessSecret
|
||||
bucket: 'teaching-edu123', //创建的bucket的名称
|
||||
endpoint: 'oss-cn-beijing.aliyuncs.com', //地域节点
|
||||
secure: false, //http:false,https:ture
|
||||
}) |
||||
export const tool = { |
||||
oss: { |
||||
async upload(file) { |
||||
// // console.log(11, file, client)
|
||||
|
||||
// 文件名
|
||||
const uuid = nanoid() |
||||
// 文件后缀名
|
||||
const index = file.name.lastIndexOf('.') |
||||
const suffix = file.name.substring(index + 1) |
||||
let fileName = uuid + '.' + suffix |
||||
console.log(uuid, file, suffix) |
||||
// return await client.multipartUpload(fileName, file, {
|
||||
// progress: function (p) {
|
||||
// console.log('进度', p)
|
||||
// },
|
||||
// })
|
||||
return await client.put(fileName, file) |
||||
}, |
||||
}, |
||||
} |
||||
@ -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> |
||||
Loading…
Reference in new issue