Compare commits
4 Commits
c410b660ea
...
b315a93138
| Author | SHA1 | Date |
|---|---|---|
ww
|
b315a93138 | 5 months ago |
|
ww
|
a74923f1e9 | 5 months ago |
|
ww
|
f88b793800 | 5 months ago |
|
ww
|
1f7a44466c | 6 months ago |
33 changed files with 3617 additions and 217 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,48 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
//账号登录接口
|
||||||
|
export const userLoginService = (loginData) => { |
||||||
|
return request.post('/user/login', loginData, { |
||||||
|
headers: { 'Content-Type': 'application/json;charset=UTF-8' }, |
||||||
|
}) |
||||||
|
} |
||||||
|
//手机号登录接口
|
||||||
|
export const userPhoneLoginService = (phones) => { |
||||||
|
return request.post('/user/phone/login?phone=' + phones) |
||||||
|
} |
||||||
|
//账号注册接口
|
||||||
|
export const userRegisterService = (jsonData) => { |
||||||
|
return request.post('/user/register', jsonData, { |
||||||
|
headers: { 'Content-Type': 'application/json;charset=UTF-8' }, |
||||||
|
}) |
||||||
|
} |
||||||
|
//手机号注册接口
|
||||||
|
export const userPhoneRegisterService = (jsonData) => { |
||||||
|
return request.post('/user/phone/register', jsonData, { |
||||||
|
headers: { 'Content-Type': 'application/json;charset=UTF-8' }, |
||||||
|
}) |
||||||
|
} |
||||||
|
//手机号验证码请求
|
||||||
|
export const userCodeRegisterService = (phoness) => { |
||||||
|
return request.post('/user/code?phone=' + phoness) |
||||||
|
} |
||||||
|
//用户信息接口
|
||||||
|
export const userGetInfoService = (token) => |
||||||
|
request.get('/user/info', { |
||||||
|
headers: { Authorization: `Bearer ${token}` }, |
||||||
|
}) |
||||||
|
//修改用户信息
|
||||||
|
export const userChangeService = (jsonData) => { |
||||||
|
return request.post('/user/update', jsonData, { |
||||||
|
headers: { 'Content-Type': 'application/json;charset=UTF-8' }, |
||||||
|
}) |
||||||
|
} |
||||||
|
//获取身份信息
|
||||||
|
export const userIdenService = (id) => { |
||||||
|
return request.post('/user/personal/info?id=' + id) |
||||||
|
} |
||||||
|
//修改身份信息
|
||||||
|
export const userIdenChangeService = (dataToSend) => { |
||||||
|
return request.post('/user/update/PersonalInfo', dataToSend, { |
||||||
|
headers: { 'Content-Type': 'application/json;charset=UTF-8' }, |
||||||
|
}) |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 154 B |
|
After Width: | Height: | Size: 121 B |
@ -1,6 +1,9 @@ |
|||||||
// 引入仓库
|
// 引入仓库
|
||||||
import { createPinia } from 'pinia' |
import { createPinia } from 'pinia' |
||||||
|
import persist from 'pinia-plugin-persistedstate' |
||||||
// 创建仓库
|
// 创建仓库
|
||||||
const pinia = createPinia() |
const pinia = createPinia() |
||||||
// 暴露仓库
|
// 暴露仓库
|
||||||
|
pinia.use(persist) |
||||||
export default pinia |
export default pinia |
||||||
|
export * from './modules/user' |
||||||
|
|||||||
@ -0,0 +1,25 @@ |
|||||||
|
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, {
|
||||||
|
|
||||||
|
return await client.put(fileName, file) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
@ -1,9 +1,121 @@ |
|||||||
<template> |
|
||||||
<div>课程目标</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
import {} from 'vue' |
import {} from 'vue' |
||||||
|
// import allclass from '@/assets/images/allclass.png' |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss" scoped></style> |
<template> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="8"> |
||||||
|
<div class="grid-content main"> |
||||||
|
<div class="title"><p>| 课程总目标</p></div> |
||||||
|
<div class="ac_content"> |
||||||
|
<div class="ma_content"> |
||||||
|
通过本课程的学习，使学生进一步了解计算机的工作原理，更好地理解和应用计算机，掌 |
||||||
|
握用计算机处理问题的方法和技能:培养学生分析问题、解决问题的能力以及编制程序实现算 |
||||||
|
法的能力。 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="grid-content picture"> |
||||||
|
<div class="title"><p>| 课程总目标</p></div> |
||||||
|
<div class="ac_pic"></div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="16"> |
||||||
|
<div class="grid-content object"> |
||||||
|
<div class="title"><p>| 课程分目标</p></div> |
||||||
|
<div class="slice"></div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style> |
||||||
|
.el-row { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.el-col { |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
.bg-purple { |
||||||
|
background: #d3dce6; |
||||||
|
} |
||||||
|
.bg-purple-light { |
||||||
|
background: #e5e9f2; |
||||||
|
} |
||||||
|
.grid-content { |
||||||
|
border-radius: 4px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.ac_content { |
||||||
|
background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%); |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
height: 206px; |
||||||
|
} |
||||||
|
.ma_content { |
||||||
|
height: 160px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 16px; |
||||||
|
color: #333333; |
||||||
|
line-height: 20px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
margin-left: 33px; |
||||||
|
margin-right: 33px; |
||||||
|
} |
||||||
|
.ac_pic { |
||||||
|
height: 488px; |
||||||
|
background: linear-gradient(180deg, #ffe9c7 0%, #ffffff 100%); |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
} |
||||||
|
img { |
||||||
|
order: -1; |
||||||
|
} |
||||||
|
.object { |
||||||
|
height: 857px; |
||||||
|
background: linear-gradient(180deg, #4984ff 0%, #74deff 100%); |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
} |
||||||
|
.slice { |
||||||
|
height: 791px; |
||||||
|
background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%); |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
} |
||||||
|
.picture { |
||||||
|
height: 553px; |
||||||
|
margin-top: 28px; |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
background-image: linear-gradient(to right, #f9e397, #ffa674); |
||||||
|
} |
||||||
|
.main { |
||||||
|
height: 272px; |
||||||
|
border-radius: 29px 29px 29px 29px; |
||||||
|
background-image: linear-gradient(to right, #4984ff, #74deff); |
||||||
|
display: flex; |
||||||
|
justify-content: end; |
||||||
|
} |
||||||
|
.title { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
p { |
||||||
|
height: 29px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: bold; |
||||||
|
margin-left: 34px; |
||||||
|
font-size: 24px; |
||||||
|
color: #ffffff; |
||||||
|
line-height: 28px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
@ -1,9 +1,6 @@ |
|||||||
|
<script setup></script> |
||||||
<template> |
<template> |
||||||
<div>分组</div> |
<div></div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang="ts" setup> |
<style></style> |
||||||
import {} from 'vue' |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped></style> |
|
||||||
|
|||||||
@ -0,0 +1,108 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
const courses = [ |
||||||
|
{ |
||||||
|
name: 'Vue.js Basics', |
||||||
|
image: 'vuejs-basics.jpg', |
||||||
|
hours: 20, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Reac', |
||||||
|
image: 'react-fundamentals.jpg', |
||||||
|
hours: 25, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Reacts', |
||||||
|
image: 'react-fundamentals.jpg', |
||||||
|
hours: 25, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'React Fund', |
||||||
|
image: 'react-fundamentals.jpg', |
||||||
|
hours: 25, |
||||||
|
}, |
||||||
|
] |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 214px; height: 326px"> |
||||||
|
<conheader title="已开科目"></conheader> |
||||||
|
<div class="info_content" style="width: 214px; height: 264px"> |
||||||
|
<div class="course-list"> |
||||||
|
<div |
||||||
|
v-for="(course, index) in courses" |
||||||
|
:key="index" |
||||||
|
class="course-item" |
||||||
|
> |
||||||
|
<img :src="course.image" alt="course image" class="course-image" /> |
||||||
|
<div class="course-info"> |
||||||
|
<p class="course-name">{{ course.name }}</p> |
||||||
|
<p class="course-hours">{{ course.hours }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.class { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.course-list { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 132px; |
||||||
|
height: 48px; |
||||||
|
} |
||||||
|
.course-item { |
||||||
|
display: flex; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.course-image { |
||||||
|
width: 48px; |
||||||
|
height: 48px; |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.course-info { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 75px; |
||||||
|
height: 46px; |
||||||
|
} |
||||||
|
|
||||||
|
.course-name { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
|
||||||
|
.course-hours { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 12px; |
||||||
|
color: rgba(0, 0, 0, 0.4); |
||||||
|
line-height: 20px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
const courses = [ |
||||||
|
{ |
||||||
|
name: 'Vue.js Basics', |
||||||
|
image: 'vuejs-basics.jpg', |
||||||
|
hours: 20, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Reac', |
||||||
|
image: 'react-fundamentals.jpg', |
||||||
|
hours: 25, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Reacts', |
||||||
|
image: 'react-fundamentals.jpg', |
||||||
|
hours: 25, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'React Fund', |
||||||
|
image: 'react-fundamentals.jpg', |
||||||
|
hours: 25, |
||||||
|
}, |
||||||
|
] |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 214px; height: 326px"> |
||||||
|
<conheader title="我的科目"></conheader> |
||||||
|
<div class="info_content" style="width: 214px; height: 264px"> |
||||||
|
<div class="course-list"> |
||||||
|
<div |
||||||
|
v-for="(course, index) in courses" |
||||||
|
:key="index" |
||||||
|
class="course-item" |
||||||
|
> |
||||||
|
<img :src="course.image" alt="course image" class="course-image" /> |
||||||
|
<div class="course-info"> |
||||||
|
<p class="course-name">{{ course.name }}</p> |
||||||
|
<p class="course-hours">{{ course.hours }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.class { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.course-list { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 132px; |
||||||
|
height: 48px; |
||||||
|
} |
||||||
|
.course-item { |
||||||
|
display: flex; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.course-image { |
||||||
|
width: 48px; |
||||||
|
height: 48px; |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.course-info { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 75px; |
||||||
|
height: 46px; |
||||||
|
} |
||||||
|
|
||||||
|
.course-name { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
|
||||||
|
.course-hours { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 12px; |
||||||
|
color: rgba(0, 0, 0, 0.4); |
||||||
|
line-height: 20px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
<template> |
||||||
|
<div class="info_title"> |
||||||
|
<div class="title_name">{{ props.title }}</div> |
||||||
|
<div class="icon"> |
||||||
|
<img :src="ellipsis" @click="handleClick" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<slot name="drawer"></slot> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { defineProps } from 'vue' |
||||||
|
import ellipsis from '@/assets/images/ellipsis.png' |
||||||
|
const props = defineProps({ |
||||||
|
title: String, |
||||||
|
modelValue: Boolean, |
||||||
|
}) |
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
function handleClick() { |
||||||
|
emit('update:modelValue', true) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.info_title { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
.title_name { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 20px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 30px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.icon { |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
border-radius: 3px 3px 3px 3px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.overlay { |
||||||
|
position: absolute; |
||||||
|
top: 181px; |
||||||
|
left: 1278px; |
||||||
|
width: 40px; |
||||||
|
height: 30px; |
||||||
|
// background-color: lightgray; |
||||||
|
border: 1px solid black; |
||||||
|
z-index: 1000; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import * as echarts from 'echarts' |
||||||
|
import { ref, onMounted, Ref } from 'vue' |
||||||
|
const echarsDom: Ref<HTMLElement | any> = ref(null) |
||||||
|
onMounted(() => { |
||||||
|
const myChart = echarts.init(echarsDom.value) |
||||||
|
// 绘制图表 |
||||||
|
myChart.setOption({ |
||||||
|
// 标题 |
||||||
|
grid: { |
||||||
|
left: '4%', // 左边距 |
||||||
|
right: '10%', // 右边距 |
||||||
|
bottom: '20%', // 底边距 |
||||||
|
top: '10%', // 顶部边距 |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
left: 'center', // 图例水平居中 |
||||||
|
bottom: 0, // 图例距离容器顶部的距离 |
||||||
|
orient: 'horizontal', // 水平布局 |
||||||
|
itemWidth: 16, // 设置图例标识的宽度为0，即不显示图标 |
||||||
|
itemHeight: 0, // 设置图例标识的高度为0，即不显示图标 |
||||||
|
data: ['本月', '上月'], |
||||||
|
}, |
||||||
|
// grid: { |
||||||
|
// left: '3%', |
||||||
|
// right: '4%', |
||||||
|
// bottom: '3%', |
||||||
|
// containLabel: true |
||||||
|
// }, |
||||||
|
toolbox: { |
||||||
|
feature: { |
||||||
|
saveAsImage: {}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
boundaryGap: true, |
||||||
|
data: [ |
||||||
|
'09-01', |
||||||
|
'09-03', |
||||||
|
'09-05', |
||||||
|
'09-07', |
||||||
|
'09-09', |
||||||
|
'09-11', |
||||||
|
'09-13', |
||||||
|
'09-15', |
||||||
|
], |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '本月', |
||||||
|
// itemStyle: { |
||||||
|
// color: '#0052D9' |
||||||
|
// }, |
||||||
|
symbol: 'circle', |
||||||
|
itemStyle: { |
||||||
|
color: '#0052D9', // 设置圆的颜色为白色 |
||||||
|
borderWidth: 1.5, // 设置圆边框的宽度 |
||||||
|
borderColor: 'white', // 设置圆边框的颜色 |
||||||
|
}, |
||||||
|
symbolSize: 8, // 设置图标大小 |
||||||
|
type: 'line', |
||||||
|
data: [20, 38, 60, 65, 90, 55, 36, 30], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '上月', |
||||||
|
symbol: 'circle', |
||||||
|
itemStyle: { |
||||||
|
color: '#B5C7FF', // 设置圆的颜色为白色 |
||||||
|
borderWidth: 1.5, // 设置圆边框的宽度 |
||||||
|
borderColor: 'white', // 设置圆边框的颜色 |
||||||
|
}, |
||||||
|
symbolSize: 8, // 设置图标大小 |
||||||
|
type: 'line', |
||||||
|
|
||||||
|
data: [22, 25, 48, 70, 80, 45, 24, 38], |
||||||
|
}, |
||||||
|
], |
||||||
|
}) |
||||||
|
/** |
||||||
|
* 自适应大小 |
||||||
|
*/ |
||||||
|
window.onresize = function () { |
||||||
|
myChart.resize() |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div ref="echarsDom" class="main"></div> |
||||||
|
</template> |
||||||
|
<style> |
||||||
|
.main { |
||||||
|
width: 766px; |
||||||
|
height: 352px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
<script setup> |
||||||
|
import echarts from '@/views/home/components/Echart/Echarts.vue' |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 1257px; height: 384px"> |
||||||
|
<conheader title="主页访问数据(次)"></conheader> |
||||||
|
<div class="info_content" style="width: 766px; height: 352px"> |
||||||
|
<echarts></echarts> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.echarts { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
margin-bottom: 16px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,267 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
import { onMounted, ref, computed } from 'vue' |
||||||
|
import { userIdenService, userIdenChangeService } from '@/api/user/user.js' |
||||||
|
import { Edit } from '@element-plus/icons-vue' |
||||||
|
import { ElMessage } from 'element-plus' |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Object, |
||||||
|
}, |
||||||
|
}) |
||||||
|
const id = props.data.id |
||||||
|
const formModel = ref() |
||||||
|
const loading = ref() |
||||||
|
//抽屉true |
||||||
|
const editDialogVisible = ref(false) |
||||||
|
const editForm = ref({ |
||||||
|
name: '', |
||||||
|
content: '', |
||||||
|
}) |
||||||
|
const readonlyField = computed(() => editForm.value.name) |
||||||
|
const editRowIndex = ref() |
||||||
|
const openEditDialog = (row) => { |
||||||
|
editForm.value = { ...row } |
||||||
|
editRowIndex.value = formModel.value.indexOf(row) |
||||||
|
editDialogVisible.value = true |
||||||
|
} |
||||||
|
//确认时将表单数据回显 |
||||||
|
const saveEdit = () => { |
||||||
|
console.log(editRowIndex.value, 'rowww') |
||||||
|
const index = editRowIndex.value |
||||||
|
if (index !== -1) { |
||||||
|
formModel.value[index] = { ...editForm.value } |
||||||
|
} |
||||||
|
console.log(editRowIndex.value, 'edit') |
||||||
|
editDialogVisible.value = false |
||||||
|
} |
||||||
|
//取消 |
||||||
|
const cancelEdit = () => { |
||||||
|
editDialogVisible.value = false |
||||||
|
//重置表单 |
||||||
|
editForm.value = { |
||||||
|
name: '', |
||||||
|
content: '', |
||||||
|
} |
||||||
|
} |
||||||
|
const identInfo = ref() |
||||||
|
//获取身份信息 |
||||||
|
const getInfo = async (id) => { |
||||||
|
const res = await userIdenService(id) |
||||||
|
identInfo.value = res |
||||||
|
return res |
||||||
|
} |
||||||
|
console.log() |
||||||
|
onMounted(() => { |
||||||
|
// getInfo(id) |
||||||
|
getInfo(id) |
||||||
|
.then((res) => { |
||||||
|
// 在这里可以访问在 getData 函数中返回的结果 |
||||||
|
console.log(res.data, '000000') |
||||||
|
identInfo.value = res.data |
||||||
|
// 假数据 |
||||||
|
if (res.data.roleId === 1) { |
||||||
|
formModel.value = [ |
||||||
|
{ par: 'name', name: '姓名', content: res.data.name }, |
||||||
|
{ par: 'sex', name: '性别', content: res.data.sex }, |
||||||
|
{ par: 'nationality', name: '民族', content: res.data.nationality }, |
||||||
|
{ par: 'profession', name: '专业', content: res.data.profession }, |
||||||
|
{ par: 'education', name: '学历', content: res.data.education }, |
||||||
|
{ par: 'degree', name: '学位', content: res.data.degree }, |
||||||
|
{ |
||||||
|
par: 'professionalTitle', |
||||||
|
name: '职称', |
||||||
|
content: res.data.professionalTitle, |
||||||
|
}, |
||||||
|
{ |
||||||
|
par: 'emergencyContact', |
||||||
|
name: '手机号', |
||||||
|
content: res.data.emergencyContact, |
||||||
|
}, |
||||||
|
{ |
||||||
|
par: 'joinWorkTime', |
||||||
|
name: '参加工作时间', |
||||||
|
content: res.data.joinWorkTime, |
||||||
|
}, |
||||||
|
{ |
||||||
|
par: 'politicalStatus', |
||||||
|
name: '政治面貌', |
||||||
|
content: res.data.politicalStatus, |
||||||
|
}, |
||||||
|
] |
||||||
|
} else if (res.data.roleId === 2) { |
||||||
|
formModel.value = [ |
||||||
|
{ par: 'name', name: '姓名', content: res.data.name }, |
||||||
|
{ par: 'sex', name: '性别', content: res.data.sex }, |
||||||
|
{ par: 'nationality', name: '民族', content: res.data.nationality }, |
||||||
|
{ par: 'number', name: '学号', content: res.data.number }, |
||||||
|
{ par: 'birthday', name: '生日', content: res.data.birthday }, |
||||||
|
{ par: 'phone', name: '手机号', content: res.data.phone }, |
||||||
|
{ par: 'faculty', name: '院系', content: res.data.faculty }, |
||||||
|
{ par: 'major', name: '专业', content: res.data.major }, |
||||||
|
{ par: 'year_age', name: '入学年份', content: res.data.year_age }, |
||||||
|
{ par: 'class_name', name: '班级', content: res.data.class_name }, |
||||||
|
] |
||||||
|
} |
||||||
|
// else { |
||||||
|
// formModel.value = [ |
||||||
|
// { name: '姓名', content: res.data.name }, |
||||||
|
// { name: '性别', content: res.data.id }, |
||||||
|
// { name: '学号', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// ] |
||||||
|
// } |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.error(error) |
||||||
|
}) |
||||||
|
}) |
||||||
|
// 编辑1 |
||||||
|
const drawer2 = ref(false) |
||||||
|
const direction = ref('rtl') |
||||||
|
function cancelClick() { |
||||||
|
drawer2.value = false |
||||||
|
} |
||||||
|
const data1 = ref() |
||||||
|
const confirmClick = () => { |
||||||
|
drawer2.value = false |
||||||
|
data1.value = formModel.value |
||||||
|
const values = {} |
||||||
|
data1.value.map((item) => (values[item.par] = item.content)) |
||||||
|
const dataToSend = { |
||||||
|
...values, |
||||||
|
roleId: identInfo.value.roleId, |
||||||
|
id: identInfo.value.id, |
||||||
|
} |
||||||
|
userIdenChangeService(dataToSend).then(() => { |
||||||
|
ElMessage.success('修改成功') |
||||||
|
}) |
||||||
|
} |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 1265px; height: 306px"> |
||||||
|
<conheader title="个人信息" v-model="drawer2"> |
||||||
|
<template #drawer> |
||||||
|
<el-drawer v-model="drawer2" :direction="direction" class="table"> |
||||||
|
<template #header> |
||||||
|
<h4>个人信息</h4> |
||||||
|
</template> |
||||||
|
<template #default> |
||||||
|
<div> |
||||||
|
<el-table :data="formModel" style="width: 100%"> |
||||||
|
<el-table-column prop="name" label="标题"></el-table-column> |
||||||
|
<el-table-column prop="content" label="内容"></el-table-column> |
||||||
|
<el-table-column label="操作"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
class="el-icon-edit" |
||||||
|
:icon="Edit" |
||||||
|
plain |
||||||
|
circle |
||||||
|
@click="openEditDialog(row)" |
||||||
|
></el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template #footer> |
||||||
|
<div style="flex: auto"> |
||||||
|
<el-button @click="cancelClick" size="medium">取消</el-button> |
||||||
|
<el-button type="primary" @click="confirmClick">确认</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-drawer> |
||||||
|
<el-dialog |
||||||
|
v-model="editDialogVisible" |
||||||
|
title="详细信息" |
||||||
|
style="width: 800px; text-align: center" |
||||||
|
:readonly-field="readonlyField" |
||||||
|
> |
||||||
|
<el-form :model="editForm" label-width="80px"> |
||||||
|
<el-form-item label="名称" prop="name"> |
||||||
|
<el-input v-model="editForm.name"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="内容" prop="content"> |
||||||
|
<el-input v-model="editForm.content"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<div> |
||||||
|
<el-button @click="cancelEdit">取消</el-button> |
||||||
|
<el-button type="primary" @click="saveEdit">保存</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
</conheader> |
||||||
|
<div |
||||||
|
class="info_content" |
||||||
|
style="width: 776px; height: 244px" |
||||||
|
v-loading="loading" |
||||||
|
> |
||||||
|
<div class="item" :key="item.name" v-for="item in formModel"> |
||||||
|
<div class="name">{{ item.name }}</div> |
||||||
|
<div class="content">{{ item.content }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: grid; |
||||||
|
display: wrap; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
gap: 10px; /* 设置元素之间的间隔 */ |
||||||
|
} |
||||||
|
.item { |
||||||
|
width: 176px; |
||||||
|
height: 60px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.name { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.4); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.content { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.table { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.custom-input { |
||||||
|
margin-bottom: 20px; |
||||||
|
height: 40px; /* 自定义输入框高度 */ |
||||||
|
padding: 0 10px; /* 自定义输入框内边距 */ |
||||||
|
font-size: 16px; /* 自定义输入框字体大小 */ |
||||||
|
/* 其他样式自定义 */ |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,211 @@ |
|||||||
|
<script setup> |
||||||
|
import add from '@/assets/images/add.png' |
||||||
|
// import { Plus } from '@element-plus/icons-vue' |
||||||
|
import { userChangeService } from '@/api/user/user.js' |
||||||
|
import { tool } from '@/utils/img' |
||||||
|
const dialogFormVisible = ref(false) |
||||||
|
import { ref } from 'vue' |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Object, |
||||||
|
}, |
||||||
|
}) |
||||||
|
// console.log(props.data.icon, 44444) |
||||||
|
const imageUrl = ref('') |
||||||
|
//盒子隐藏 |
||||||
|
const form = ref() |
||||||
|
//表单校验 |
||||||
|
// const rules = { |
||||||
|
// username: [ |
||||||
|
// { required: true, message: '用户名不能为空', trigger: 'blur' }, |
||||||
|
// { |
||||||
|
// max: 10, |
||||||
|
// min: 5, |
||||||
|
// message: '用户名长度最小五位最大十位', |
||||||
|
// trigger: ['change', 'blur'], |
||||||
|
// }, |
||||||
|
// ], |
||||||
|
// nickName: [{ trigger: 'blur' }], |
||||||
|
// phone: [ |
||||||
|
// { trigger: 'blur' }, |
||||||
|
// { |
||||||
|
// pattern: /^1[3456789]\d{9}$/, |
||||||
|
// message: '手机号格式不正确', |
||||||
|
// trigger: 'blur', |
||||||
|
// // pattern用于配置正则校验 |
||||||
|
// }, |
||||||
|
// ], |
||||||
|
// code: [{ message: '验证码不能为空', trigger: 'blur' }], |
||||||
|
// } |
||||||
|
form.value = props.data |
||||||
|
const formLabelWidth = '140px' |
||||||
|
//设置头像显示 |
||||||
|
imageUrl.value = props.data.icon |
||||||
|
//设置头像更换 |
||||||
|
const openFileInput = () => { |
||||||
|
const input = document.createElement('input') |
||||||
|
input.type = 'file' |
||||||
|
input.accept = 'image/*' |
||||||
|
input.style.display = 'none' |
||||||
|
input.onchange = (event) => { |
||||||
|
const file = event.target.files[0] |
||||||
|
if (file) { |
||||||
|
const reader = new FileReader() |
||||||
|
reader.onload = () => { |
||||||
|
imageUrl.value = reader.result |
||||||
|
} |
||||||
|
reader.readAsDataURL(file) |
||||||
|
changeInfo() |
||||||
|
} |
||||||
|
} |
||||||
|
document.body.appendChild(input) |
||||||
|
input.click() |
||||||
|
document.body.removeChild(input) |
||||||
|
} |
||||||
|
const upload = async (option) => { |
||||||
|
const res = await tool.oss.upload(option.file) |
||||||
|
imageUrl.value = res.url |
||||||
|
console.log(imageUrl.value) |
||||||
|
} |
||||||
|
//修改用户信息 |
||||||
|
const changeInfo = async () => { |
||||||
|
const userInfo = { |
||||||
|
username: form.value.username, |
||||||
|
phone: form.value.phone, |
||||||
|
id: form.value.id, |
||||||
|
nickName: form.value.nickName, |
||||||
|
icon: imageUrl.value, |
||||||
|
} |
||||||
|
const jsonData = JSON.stringify(userInfo) |
||||||
|
console.log(jsonData) |
||||||
|
await userChangeService(jsonData) |
||||||
|
dialogFormVisible.value = false |
||||||
|
} |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="ident" style="width: 278px; height: 274px; background: #375fff"> |
||||||
|
<div class="info_container" style="width: 201px; height: 178px"> |
||||||
|
<div class="avater"> |
||||||
|
<img :src="imageUrl" alt="Uploaded" v-if="imageUrl" class="avater" /> |
||||||
|
</div> |
||||||
|
<div class="click" @click="openFileInput" :http-request="upload"> |
||||||
|
<img :src="add" /> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
class="info_content" |
||||||
|
style="height: 58px" |
||||||
|
@click="dialogFormVisible = true" |
||||||
|
> |
||||||
|
<div class="name">{{ props.data.username }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-dialog |
||||||
|
v-model="dialogFormVisible" |
||||||
|
title="登录信息" |
||||||
|
style="width: 800px; text-align: center" |
||||||
|
> |
||||||
|
<el-form :model="form" style="" :data="form" :rules="rules"> |
||||||
|
<el-form-item label="用户名" :label-width="formLabelWidth"> |
||||||
|
<el-input v-model="form.username" autocomplete="off" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="昵称" :label-width="formLabelWidth"> |
||||||
|
<el-input v-model="form.nickName" autocomplete="off" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="手机" :label-width="formLabelWidth"> |
||||||
|
<el-input v-model="form.phone" autocomplete="off" /> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<div class="dialog-footer"> |
||||||
|
<el-button @click="dialogFormVisible = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="changeInfo">确认</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.el-form-item { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.ident { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.name { |
||||||
|
height: 28px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 20px; |
||||||
|
color: rgba(255, 255, 255, 0.9); |
||||||
|
line-height: 28px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.iden { |
||||||
|
width: 126px; |
||||||
|
height: 22px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(255, 255, 255, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.avater { |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
background: #b5c7ff; |
||||||
|
border-radius: 40px 40px 40px 40px; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
span { |
||||||
|
width: 24px; |
||||||
|
height: 44px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 36px; |
||||||
|
color: #0052d9; |
||||||
|
line-height: 44px; |
||||||
|
text-align: center; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
|
||||||
|
grid-area: element1; |
||||||
|
position: relative; |
||||||
|
margin-left: 27px; |
||||||
|
top: 18px; |
||||||
|
} |
||||||
|
.click { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
border-radius: 100px 100px 100px 100px; |
||||||
|
border: 2px solid #ffffff; |
||||||
|
grid-area: element2; |
||||||
|
background: #0052d9; |
||||||
|
border-radius: 32px 32px 32px 32px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
margin-left: 60px; |
||||||
|
margin-top: -60px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
import { ref } from 'vue' |
||||||
|
const name = ['Aa', 'Bb', 'Cc', 'Dd'] |
||||||
|
const getRandomColor = () => { |
||||||
|
// 生成随机的颜色值 |
||||||
|
return '#' + Math.floor(Math.random() * 16777215).toString(16) |
||||||
|
} |
||||||
|
const drawer2 = ref(false) |
||||||
|
const direction = ref('rtl') |
||||||
|
function cancelClick() { |
||||||
|
drawer2.value = false |
||||||
|
} |
||||||
|
function confirmClick() { |
||||||
|
drawer2.value = false |
||||||
|
} |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 222px; height: 174px"> |
||||||
|
<conheader title="学生分组" v-model="drawer2"> |
||||||
|
<div>编辑</div> |
||||||
|
<template #drawer> |
||||||
|
<el-drawer v-model="drawer2" :direction="direction"> |
||||||
|
<template #header> |
||||||
|
<h4>78</h4> |
||||||
|
</template> |
||||||
|
<template #default> |
||||||
|
<div></div> |
||||||
|
</template> |
||||||
|
<template #footer> |
||||||
|
<div style="flex: auto"> |
||||||
|
<el-button @click="cancelClick">cancel</el-button> |
||||||
|
<el-button type="primary" @click="confirmClick"> |
||||||
|
confirm |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-drawer> |
||||||
|
</template> |
||||||
|
</conheader> |
||||||
|
<div class="info_content" style="width: 194px; height: 112px"> |
||||||
|
<div |
||||||
|
v-for="(item, index) in name" |
||||||
|
:key="index" |
||||||
|
class="stu_color" |
||||||
|
:style="{ backgroundColor: getRandomColor() }" |
||||||
|
> |
||||||
|
{{ item }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.stu { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
width: 194px; |
||||||
|
height: 112px; |
||||||
|
flex-wrap: wrap; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(3, 1fr); |
||||||
|
gap: 24px; /* 设置元素之间的间隔 */ |
||||||
|
grid-row-gap: 16px; |
||||||
|
} |
||||||
|
.stu_color { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 49px; |
||||||
|
height: 48px; |
||||||
|
border-radius: 40px 40px 40px 40px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(255, 255, 255, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
transition: background-color 0.3s; |
||||||
|
} |
||||||
|
.stu_color:hover { |
||||||
|
background-color: #f2f2f2; /* 鼠标移入时的背景色变化 */ |
||||||
|
filter: brightness(1.1); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
import { ref } from 'vue' |
||||||
|
const name = ['Aa', 'Bb', 'Cc', 'Dd'] |
||||||
|
const getRandomColor = () => { |
||||||
|
// 生成随机的颜色值 |
||||||
|
return '#' + Math.floor(Math.random() * 16777215).toString(16) |
||||||
|
} |
||||||
|
const drawer2 = ref(false) |
||||||
|
const direction = ref('rtl') |
||||||
|
function cancelClick() { |
||||||
|
drawer2.value = false |
||||||
|
} |
||||||
|
function confirmClick() { |
||||||
|
drawer2.value = false |
||||||
|
} |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 222px; height: 174px"> |
||||||
|
<conheader title="已分组别" v-model="drawer2"> |
||||||
|
<div>编辑</div> |
||||||
|
<template #drawer> |
||||||
|
<el-drawer v-model="drawer2" :direction="direction"> |
||||||
|
<template #header> |
||||||
|
<h4>78</h4> |
||||||
|
</template> |
||||||
|
<template #default> |
||||||
|
<div></div> |
||||||
|
</template> |
||||||
|
<template #footer> |
||||||
|
<div style="flex: auto"> |
||||||
|
<el-button @click="cancelClick">cancel</el-button> |
||||||
|
<el-button type="primary" @click="confirmClick"> |
||||||
|
confirm |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-drawer> |
||||||
|
</template> |
||||||
|
</conheader> |
||||||
|
<div class="info_content" style="width: 194px; height: 112px"> |
||||||
|
<div |
||||||
|
v-for="(item, index) in name" |
||||||
|
:key="index" |
||||||
|
class="stu_color" |
||||||
|
:style="{ backgroundColor: getRandomColor() }" |
||||||
|
> |
||||||
|
{{ item }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.stu { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
width: 194px; |
||||||
|
height: 112px; |
||||||
|
flex-wrap: wrap; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(3, 1fr); |
||||||
|
gap: 24px; /* 设置元素之间的间隔 */ |
||||||
|
grid-row-gap: 16px; |
||||||
|
} |
||||||
|
.stu_color { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 49px; |
||||||
|
height: 48px; |
||||||
|
border-radius: 40px 40px 40px 40px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(255, 255, 255, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
transition: background-color 0.3s; |
||||||
|
} |
||||||
|
.stu_color:hover { |
||||||
|
background-color: #f2f2f2; /* 鼠标移入时的背景色变化 */ |
||||||
|
filter: brightness(1.1); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
<script setup> |
||||||
|
const props = defineProps({ |
||||||
|
username: String, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="nav_info"> |
||||||
|
<div class="name"> |
||||||
|
{{ props.username }} |
||||||
|
</div> |
||||||
|
<div class="intro">今天是你的第一天~~</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.nav_info { |
||||||
|
width: 1265px; |
||||||
|
height: 32px; |
||||||
|
display: flex; |
||||||
|
justify-content: start; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.name { |
||||||
|
height: 28px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 20px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 28px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
margin-right: 68px; |
||||||
|
} |
||||||
|
.intro { |
||||||
|
width: 257px; |
||||||
|
height: 22px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 26px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,41 +1,158 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import status from '@/views/home/components/Status.vue' |
||||||
|
import welcome from './components/Welcome.vue' |
||||||
|
import Info from './components/Info.vue' |
||||||
|
import echarts from './components/Echarts.vue' |
||||||
|
import Class1 from './components/Class1.vue' |
||||||
|
import Student1 from './components/Student1.vue' |
||||||
|
import Class2 from './components/Class2.vue' |
||||||
|
import Student2 from './components/Student2.vue' |
||||||
|
import useUserStore from '@/store/modules/user' |
||||||
|
import { ref, onMounted } from 'vue' |
||||||
|
import { toRaw } from 'vue' |
||||||
|
const userStore = useUserStore() |
||||||
|
// const info = userStore.getUserInfo() |
||||||
|
// console.log(info) |
||||||
|
const username = ref() |
||||||
|
const data = ref(null) |
||||||
|
const flag = ref(false) |
||||||
|
const role = ref(null) |
||||||
|
const rightVisible = ref(false) |
||||||
|
const getData = async () => { |
||||||
|
await userStore |
||||||
|
.getUserInfo() |
||||||
|
.then((response) => { |
||||||
|
const res = toRaw(response.result.data) |
||||||
|
username.value = res.username |
||||||
|
data.value = res |
||||||
|
flag.value = true |
||||||
|
role.value = data.value.roles[0] |
||||||
|
if (role.value === '老师') { |
||||||
|
rightVisible.value = true |
||||||
|
} else { |
||||||
|
rightVisible.value = false |
||||||
|
} |
||||||
|
// console.log(data.value.roles[0], 333333) |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.log(error) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getData() |
||||||
|
}) |
||||||
|
</script> |
||||||
<template> |
<template> |
||||||
<div>home</div> |
<div class="container"> |
||||||
<svg-icon name="count" width="300px" height="300px" color="#000"></svg-icon> |
<div class="left"> |
||||||
<div class="box"> |
<div class="nav"> |
||||||
<div class="box1"></div> |
<welcome :username="username"></welcome> |
||||||
<div class="box2"></div> |
</div> |
||||||
|
<div class="info" style="width: 1321px; height: 368px"> |
||||||
|
<Info :data="data" v-if="flag"></Info> |
||||||
|
</div> |
||||||
|
<div class="echarts" style="width: 1321px; height: 444px"> |
||||||
|
<echarts></echarts> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-if="rightVisible" class="right"> |
||||||
|
<status :data="data" v-if="flag"></status> |
||||||
|
<div class="class" style="width: 278px; height: 388px"> |
||||||
|
<Class1></Class1> |
||||||
|
</div> |
||||||
|
<div class="stu" style="width: 278px; height: 236px"> |
||||||
|
<Student1></Student1> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-else class="right"> |
||||||
|
<status :data="data" v-if="flag"></status> |
||||||
|
<div class="class" style="width: 278px; height: 388px"> |
||||||
|
<Class2></Class2> |
||||||
|
</div> |
||||||
|
<div class="stu" style="width: 278px; height: 236px"> |
||||||
|
<Student2></Student2> |
||||||
|
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
// import { onMounted } from 'vue' |
|
||||||
// import useUserStore from '@/store/modules/user' |
|
||||||
// // const userStore = useUserStore() |
|
||||||
// onMounted(() => { |
|
||||||
// // 进入首页获取用户信息 |
|
||||||
// // userStore.getUserInfo() |
|
||||||
// }) |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
.box { |
.container { |
||||||
width: 500px; |
|
||||||
height: 400px; |
|
||||||
background-color: skyblue; |
|
||||||
display: flex; |
display: flex; |
||||||
// flex-direction: column; |
.left { |
||||||
justify-content: space-evenly; |
width: 1321px; |
||||||
align-items: center; |
height: 936px; |
||||||
|
margin-right: 16px; |
||||||
div { |
display: grid; |
||||||
width: 100px; |
grid-template-rows: 1fr 1fr 1fr; /* 使用fr单位来平均分布 */ |
||||||
height: 100px; |
height: 300px; /* 设置容器高度 */ |
||||||
} |
.nav { |
||||||
.box1 { |
width: 1321px; |
||||||
background-color: pink; |
height: 92px; |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
margin-bottom: 16px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info, |
||||||
|
.echarts { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
margin-bottom: 16px; |
||||||
|
display: flex; |
||||||
|
// flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
.class { |
||||||
|
width: 1321px; |
||||||
|
height: 444px; |
||||||
|
background: #c57676; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
// flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
} |
} |
||||||
.box2 { |
.right { |
||||||
background-color: greenyellow; |
width: 278px; |
||||||
|
height: 930px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: space-between; |
||||||
|
.ident, |
||||||
|
.class, |
||||||
|
.stu { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
// flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: space-between; |
||||||
|
.info_content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,9 +1,30 @@ |
|||||||
<template> |
<template> |
||||||
<div>学生</div> |
<div> |
||||||
|
<!-- Dialog组件 --> |
||||||
|
<Dialog |
||||||
|
v-model="dialogVisible" |
||||||
|
@confirm="collectData" |
||||||
|
:name="readonlyName" |
||||||
|
:age="readonlyAge" |
||||||
|
/> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang="ts" setup> |
<script setup> |
||||||
import {} from 'vue' |
import { ref, readonly } from 'vue' |
||||||
</script> |
|
||||||
|
const dialogVisible = ref(false) // 控制Dialog的显示与隐藏 |
||||||
|
const name = ref('John') // 可修改字段 |
||||||
|
const age = ref(25) // 可修改字段 |
||||||
|
|
||||||
|
const readonlyName = readonly(name) // 将name字段设置为只读 |
||||||
|
const readonlyAge = readonly(age) // 将age字段设置为只读 |
||||||
|
|
||||||
<style lang="scss" scoped></style> |
const collectData = () => { |
||||||
|
// 在这里可以收集Dialog中的其他可修改字段的数据 |
||||||
|
// ... |
||||||
|
|
||||||
|
console.log(readonlyName.value) // 可以访问只读字段的值 |
||||||
|
console.log(readonlyAge.value) // 可以访问只读字段的值 |
||||||
|
} |
||||||
|
</script> |
||||||
|
|||||||
@ -0,0 +1,68 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-button type="primary" @click="openDrawer">Open Drawer</el-button> |
||||||
|
<el-drawer |
||||||
|
title="Drawer Title" |
||||||
|
v-model:visible="drawerVisible" |
||||||
|
:direction="drawerDirection" |
||||||
|
> |
||||||
|
<el-table :data="formModel" style="width: 100%"> |
||||||
|
<el-table-column prop="name" label="Name"></el-table-column> |
||||||
|
<el-table-column prop="content" label="Content"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<el-input |
||||||
|
v-model="scope.row.content" |
||||||
|
@input="handleInput(scope.row)" |
||||||
|
></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<template v-slot:footer> |
||||||
|
<div> |
||||||
|
<el-button @click="cancelEdit">Cancel</el-button> |
||||||
|
<el-button type="primary" @click="saveEdit">Save</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-drawer> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
formModel: [ |
||||||
|
{ name: 'Macbook', content: 9.9 }, |
||||||
|
{ name: 'iPhone', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
], |
||||||
|
drawerVisible: false, |
||||||
|
drawerDirection: 'ltr', |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
openDrawer() { |
||||||
|
this.drawerVisible = true |
||||||
|
}, |
||||||
|
cancelEdit() { |
||||||
|
this.drawerVisible = false |
||||||
|
}, |
||||||
|
saveEdit() { |
||||||
|
// 执行保存修改的逻辑，可以将数据发送给后端进行保存 |
||||||
|
console.log('Save Edit:', this.formModel) |
||||||
|
this.drawerVisible = false |
||||||
|
}, |
||||||
|
handleInput(row) { |
||||||
|
// 处理输入框的输入事件，可以在此处更新数据 |
||||||
|
console.log('Handle Input:', row) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
Loading…
Reference in new issue