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> |
||||
<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> |
||||
<!-- <script setup> |
||||
import {ref} 'vue' |
||||
const li |
||||
</script> --> |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
</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: 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