封装课表组件
更新: 2025/3/21 20:30:41 字数: 0 字
需求分析
课表，是用来展示我们学校的上课的时间表。
我们的课表分两种，一种是展示整个学期的课表，一种是通过选择周次来展示某一周的课表。
后面还可以通过这个展示一个教师的课表情况。
课表效果展示
旧系统课表展示 
我自己开发的课表展示，一个是展示的全部学期的课程信息，一个是选择周次来展示某一周的课程信息。 
制作过程
分析数据
下面的是后端返回的数据结构：
点我查看后端返回的数据结构
json
{
"msg": "操作成功",
"firstCollum": {
"1": "上午1-2节",
"2": "上午3-4节",
"3": "下午5-6节",
"4": "下午7-8节",
"5": "晚上9-10节"
},
"code": 0,
"data": [
[
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": [
{
"id": 144936,
"tcId": 78432,
"roomId": 349,
"roomNumber": "5B414",
"coursrName": "操作系统原理",
"weekId": 0,
"weekName": "1-16周",
"period": 2,
"weekDay": 3,
"startSection": 1,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321413 "
}
]
},
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": [
{
"id": 144944,
"tcId": 78454,
"roomId": 527,
"roomNumber": "2101",
"coursrName": "计算机网络A",
"weekId": 0,
"weekName": "1-16周",
"period": 2,
"weekDay": 7,
"startSection": 1,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321413 "
}
]
}
],
[
{
"teacherArrange": [
{
"id": 144952,
"tcId": 78440,
"roomId": 353,
"roomNumber": "5B507",
"coursrName": "Java程序设计",
"weekId": 0,
"weekName": "1-10周",
"period": 2,
"weekDay": 1,
"startSection": 3,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321413 "
}
]
},
{
"teacherArrange": [
{
"id": 144923,
"tcId": 78428,
"roomId": 349,
"roomNumber": "5B414",
"coursrName": "计算机组成原理",
"weekId": 0,
"weekName": "1-16周",
"period": 2,
"weekDay": 2,
"startSection": 3,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321410 0321411 <br/>0321413 "
}
]
},
{
"teacherArrange": []
},
{
"teacherArrange": [
{
"id": 143388,
"tcId": 77187,
"roomId": 347,
"roomNumber": "5B412",
"coursrName": "习近平新时代中国特色社会主义思想概论",
"weekId": 0,
"weekName": "1-12周",
"period": 2,
"weekDay": 4,
"startSection": 3,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321412 0321413 "
}
]
},
{
"teacherArrange": [
{
"id": 144924,
"tcId": 78428,
"roomId": 349,
"roomNumber": "5B414",
"coursrName": "计算机组成原理",
"weekId": 0,
"weekName": "1-16周",
"period": 2,
"weekDay": 5,
"startSection": 3,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321410 0321411 <br/>0321413 "
}
]
},
{
"teacherArrange": []
},
{
"teacherArrange": [
{
"id": 144945,
"tcId": 78454,
"roomId": 357,
"roomNumber": "5B504",
"coursrName": "计算机网络A",
"weekId": 0,
"weekName": "1-16周",
"period": 2,
"weekDay": 7,
"startSection": 3,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321413 "
}
]
}
],
[
{
"teacherArrange": [
{
"id": 143387,
"tcId": 77187,
"roomId": 347,
"roomNumber": "5B412",
"coursrName": "习近平新时代中国特色社会主义思想概论",
"weekId": 0,
"weekName": "1-12周",
"period": 2,
"weekDay": 1,
"startSection": 5,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321412 0321413 "
}
]
},
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": [
{
"id": 144819,
"tcId": 78457,
"roomId": 350,
"roomNumber": "5B415",
"coursrName": "C++面向对象程序设计",
"weekId": 0,
"weekName": "2-13周",
"period": 2,
"weekDay": 5,
"startSection": 5,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0322408 0322409 <br/>0322410 "
}
]
},
{
"teacherArrange": []
},
{
"teacherArrange": []
}
],
[
{
"teacherArrange": []
},
{
"teacherArrange": [
{
"id": 144935,
"tcId": 78432,
"roomId": 351,
"roomNumber": "5B410",
"coursrName": "操作系统原理",
"weekId": 0,
"weekName": "1-16周",
"period": 2,
"weekDay": 2,
"startSection": 7,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321413 "
}
]
},
{
"teacherArrange": [
{
"id": 144953,
"tcId": 78440,
"roomId": 354,
"roomNumber": "5B506",
"coursrName": "Java程序设计",
"weekId": 0,
"weekName": "1-10周",
"period": 2,
"weekDay": 3,
"startSection": 7,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0321413 "
}
]
},
{
"teacherArrange": [
{
"id": 144820,
"tcId": 78457,
"roomId": 350,
"roomNumber": "5B415",
"coursrName": "C++面向对象程序设计",
"weekId": 0,
"weekName": "2-13周",
"period": 2,
"weekDay": 4,
"startSection": 7,
"courseSection": null,
"periodType": 0,
"teacherId": 2001467,
"teacherName": "朱梅",
"classesName": "0322408 0322409 <br/>0322410 "
}
]
},
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": []
}
],
[
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": []
},
{
"teacherArrange": []
}
]
],
"year": 2023,
"term": "0"
}经过分析数据：
js
// 这个是接口返回的数据
const data = [
// 第 1-2 节课
[
// 周一
{teacherArrange:[]},
// 周二
{teacherArrange:[]},
{teacherArrange:[
// {...} -> 是上课课程信息
{...},
{...}
]},
{teacherArrange:[]},
{teacherArrange:[]},
{teacherArrange:[]},
// 周日
{teacherArrange:[]}
],
// 3 - 4 节
[],
// 5 - 6 节
[],
// 7 - 8 节
[],
// 9 - 10
[],
]数据处理
js
import {getCourseScheduleUrl} from "@/api/home/home";
const param = reactive({
queryYear: '0',
})
const weekCourse = ref([])
const firstCollum = ref([])
// 当前周次
const currentWeek = ref(1)
// 当前周次课程
const currentWeekCourse = ref([])
const getCourseSchedule = () => {
let type = 2
getCourseScheduleUrl(type, param).then((req) => {
weekCourse.value = req.data
firstCollum.value = req.firstCollum
getCurrentWeekCourseByWeek()
})
}
const backgroundColorList = ref(['#8BA2FF', '#FF6160', '#FEBF00', '#97CFF2', '#72BD3C', '#FF9899', '#F58345', '#EFA5E0', '#F88183']) // 背景颜色数组集合
const backGroundColor = new Map()
const getCurrentWeekCourseByWeek = () => {
let colorIndex = 0
backGroundColor.clear()
currentWeekCourse.value = []
for (let i = 0; i < weekCourse.value.length; i++) {
const item = weekCourse.value[i]
let needCourse = []
for (let j = 0; j < item.length; j++) {
// 这里看情况而定
// 可以过滤展示指定周次的信息，也可以展示所有的课程信息
const courses = item[j]?.teacherArrange.filter((course, index) => {
let startWeek, endWeek
if (course.weekName.indexOf('-') !== -1) {
startWeek = course.weekName.split('-')[0]
endWeek = course.weekName.split('-')[1]
}
if (startWeek && endWeek) {
startWeek = parseInt(startWeek)
endWeek = parseInt(endWeek)
if (startWeek <= currentWeek.value && currentWeek.value <= endWeek) {
return true
}
}
}).map((course)=> {
console.log("course", course.coursrName)
const courseName = course?.coursrName
if (backGroundColor.has(courseName)) {
course.color = backGroundColor.get(courseName)
}else {
course.color = backgroundColorList.value[colorIndex]
backGroundColor.set(courseName, course.color)
colorIndex++
}
return course
})
needCourse.push(courses)
}
currentWeekCourse.value.push(needCourse)
}
}
const weeks = reactive([
{
id: 1,
week: '星期一',
},
// ...
{
id: 7,
week: '星期日',
},
])
const options = [
{
label: '第一周',
value: 1,
},
// ...
{
label: '第十八周',
value: 18,
},
]
onMounted(() => {
getCourseSchedule()
})template 部分
vue
<template>
<el-card>
<template #header>
<!--后期可以将 select 换成 segmented 分段控制器 -->
<el-select v-model="currentWeek" size="small" @change="getCurrentWeekCourseByWeek">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</template>
<template #default>
<div class="timetable w100">
<!--课程表 -->
<div class="timetable-b w100">
<table class="timetable-content w100">
<!--表格表头数据 -->
<thead>
<tr>
<th/>
<th v-for="(week, weekIndex) in weeks" :key="week.id">
{{ week.week }}
</th>
</tr>
</thead>
<!--表格数据 -->
<tbody>
<tr v-for="(item2, index2) in firstCollum" :key="index2">
<!--第一列课表节 -->
<td>
<p>{{ item2 }}</p>
</td>
<td v-for="(item, index) in currentWeekCourse[index2 - 1]" :key="index">
<div
:style="[
{
background: course.color,
},
{ color: '#fff' },
{ borderRadius: '15px' },
{ padding: '10px' },
{ height: '100%' },
{ width: '100%' },
]"
v-for="(course, index3) in item" class="div-class-tab" :key="index3"
style="overflow: hidden; text-overflow: ellipsis; ">
{{ course.coursrName }}
<br/>
<span v-html="course.classesName"/>
<br/>
{{ course.weekName }}
<br/>
{{ course.roomNumber }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
</el-card>
</template>