parent
e33012cb37
commit
d13383b4d8
1 changed files with 484 additions and 5 deletions
@ -1,9 +1,488 @@ |
|||||||
|
<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' |
||||||
|
// 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: '思政目标' }, |
||||||
|
{ id: 2, specific: '知识目标' }, |
||||||
|
{ id: 3, specific: '能力目标' }, |
||||||
|
{ id: 4, specific: '素质目标' }, |
||||||
|
]) |
||||||
|
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 addBook = () => { |
||||||
|
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 { |
||||||
|
booksList.value.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 = (item) => { |
||||||
|
updateDisabledStatus() |
||||||
|
flog.value = true |
||||||
|
console.log(item) |
||||||
|
formData.value.id = item.id |
||||||
|
formData.value.target = item.targetId |
||||||
|
formData.value.description = item.introduce |
||||||
|
dialogVisible.value = true |
||||||
|
} |
||||||
|
const del = (id) => { |
||||||
|
// console.log(id); |
||||||
|
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 |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
onMounted(() => { |
||||||
|
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> |
<template> |
||||||
<div>课程目标</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="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">新增</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="smallContent"> |
||||||
|
<el-scrollbar height="250px"> |
||||||
|
<ul class="small"> |
||||||
|
<li v-for="(item, index) in booksList" :key="item.id"> |
||||||
|
<div class="partObject"> |
||||||
|
<div class="partObject1"> |
||||||
|
{{ filterTarger(item.targetId) }} |
||||||
|
</div> |
||||||
|
<div class="partObject2"> |
||||||
|
<el-button |
||||||
|
class="edit" |
||||||
|
type="text" |
||||||
|
@click="editBook(item)" |
||||||
|
> |
||||||
|
编辑 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
class="destroy" |
||||||
|
type="text" |
||||||
|
@click="del(item.id)" |
||||||
|
> |
||||||
|
删除 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="partObjectIntroduce"> |
||||||
|
{{ item.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> |
</template> |
||||||
|
<!-- <script setup> |
||||||
|
import {ref} 'vue' |
||||||
|
const li |
||||||
|
</script> --> |
||||||
|
|
||||||
<script lang="ts" setup> |
<style lang="scss" scoped> |
||||||
import {} from 'vue' |
#main { |
||||||
</script> |
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: 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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
<style lang="scss" scoped></style> |
.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