From 54e06ab83d8fbebf91f8e0c3a621da743ac5af26 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期四, 08 八月 2024 09:28:06 +0800
Subject: [PATCH] 课表页面开发
---
src/views/curriculum/index.vue | 356 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 248 insertions(+), 108 deletions(-)
diff --git a/src/views/curriculum/index.vue b/src/views/curriculum/index.vue
index c1fbb06..de71a49 100644
--- a/src/views/curriculum/index.vue
+++ b/src/views/curriculum/index.vue
@@ -1,131 +1,271 @@
<template>
- <div class="app-container">
- <el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="璇剧▼" name="first" />
- <el-tab-pane label="鏁欏笀" name="fourth" />
- <el-tab-pane label="鍦哄湴" name="xxx" />
+ <div style="padding: 20px">
+ <el-tabs v-model="activeName" @tab-click="getCourses">
+ <el-tab-pane label="璇剧▼" name="course" />
+ <el-tab-pane label="鏁欏笀" name="teacher" />
+ <el-tab-pane label="鍦哄湴" name="site" />
</el-tabs>
- <div>
- <div style="width: 300px">
- <el-date-picker v-model="timeData" type="date" placeholder="閫夋嫨鏃ユ湡">
- </el-date-picker>
- </div>
- <div style="display: flex">
- <div class="timetable-b w100">
- <table class="timetable-content w100">
- <thead>
- <tr>
- <th></th>
- <th v-for="(item1, index1) in weeks" :key="index1">
- xxx
- </th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(item2, index2) in maxCourseLength" :key="index2">
- <td>
- <p>{{ xxx }}</p>
- </td>
- <template v-for="(item3, index3) in weeks">
- <td
- :key="index3"
- :rowspan="
- showData(index3, index2 + 1).subject &&
- showData(index3, index2).subject ===
- showData(index3, index2 + 1).subject
- ? 2
- : ''
- "
- :style="[
- {
- display:
- showData(index3, index2 - 1).subject &&
- showData(index3, index2 - 1).subject ===
- showData(index3, index2).subject
- ? 'none'
- : '',
- },
- ]"
- >
- <div
- class="dmsjandjs-b"
- :style="[
- {
- background: showData(index3, index2).index
- ? getRandomColor()
- : '#FFFFFF',
- },
- { color: '#fff' },
- { borderRadius: '15px' },
- { padding: '12px' },
- { height: '100%' },
- ]"
- >
- <p>
- {{ showData(index3, index2).startTime }}
- {{ showData(index3, index2).startTime ? "-" : "" }}
- {{ showData(index3, index2).endTime }}
- </p>
- <p>{{ showData(index3, index2).subject }}</p>
- <p>{{ showData(index3, index2).major }}</p>
- <p>{{ showData(index3, index2).class }}</p>
- </div>
- </td>
- </template>
- </tr>
- </tbody>
- </table>
+ <div style="margin-bottom: 20px">
+ <el-date-picker
+ v-model="time"
+ type="date"
+ size="small"
+ placeholder="閫夋嫨鏃ユ湡"
+ @change="getCourses"
+ >
+ </el-date-picker>
+ </div>
+ <el-row>
+ <el-col :span="1" style="margin-top: 7px"
+ ><div
+ class=""
+ v-for="i in tiemData"
+ :key="i"
+ style="display: flex; flex-direction: row-reverse; margin: 32px 10px"
+ >
+ {{ i }}
+ </div></el-col
+ >
+ <el-col :span="23">
+ <div class="table_box">
+ <div
+ :style="{ display: 'flex', width: dataList.length * 200 + 'px' }"
+ >
+ <div
+ v-for="(i, index) in dataList"
+ :key="i.id"
+ class="header_box"
+ :id="0 < index ? 'header_boxA' : ''"
+ >
+ {{ i.name }}
+ </div>
+ </div>
+ <div style="display: flex; position: relative">
+ <div v-for="(i, index) in dataList" :key="i.id">
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
+ <div
+ v-for="(j, index) in i.sessions"
+ :key="index"
+ :style="{
+ width: '200px',
+ backgroundColor: j.color,
+ position: 'absolute',
+ top: getTop(j.beginTime),
+ height: getHeight(j.beginTime, j.endTime),
+ borderRadius: '5px',
+ fontSize: '15px',
+ }"
+ @click="lookDetails(j)"
+ >
+ <div>{{ j.staffNames }}</div>
+ <span>{{ j.placeNames }}</span>
+ <div>
+ 瀛﹀憳锛歿{ j.playerCount }}浜� 璇峰亣锛歿{ j.placeCount }}浜�
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-drawer :title="drawerTime" :visible.sync="drawer" direction="rtl">
+ <div v-if="drawerIf">
+ <div style="display: flex; justify-content: center">
+ <i class="el-icon-time"></i> {{ headerTime }}
+ </div>
+ <div>
+ <el-form ref="form" label-width="80px">
+ <el-form-item label="璇剧▼">
+ <span>{{ formData.courseName }}</span>
+ </el-form-item>
+ <el-form-item label="鑰佸笀">
+ <span>{{ formData.staffNames }}</span>
+ </el-form-item>
+ <el-form-item label="鍦哄湴">
+ <span>{{ formData.placeNames }}</span>
+ </el-form-item>
+ <el-form-item label="瀛﹀憳">
+ <div style="display: flex; align-items: center;">
+ <el-progress
+ style="width: 300px"
+ :percentage="
+ Math.floor(
+ (formData.playerCount / formData.playerMax) * 100
+ )
+ "
+ ></el-progress>
+ <span
+ >瀛﹀憳{{ formData.playerCount }}浜�/涓婇檺{{
+ formData.playerMax
+ }}浜�</span
+ >
+ </div>
+ </el-form-item>
+ </el-form>
</div>
</div>
- </div>
+ </el-drawer>
</div>
</template>
-
<script>
-import { getList } from "@/api/table";
-
+import {
+ getBySessionExistsOfDay,
+ getSubjectByCourseAndDateRange,
+} from "@/api/curriculum";
export default {
- filters: {
- statusFilter(status) {
- const statusMap = {
- published: "success",
- draft: "gray",
- deleted: "danger",
- };
- return statusMap[status];
+ props: {
+ // 涓嬪崍鑺傛鏁�
+ afternoonLength: {
+ type: [String, Number],
+ default: 6,
},
+ // 鎬昏妭娆�
+ length: {
+ type: [String, Number],
+ default: 14,
+ },
+ // 璇捐〃鏁版嵁
+ // events: {
+ // type: Array,
+ // default: this.events1,
+ // },
},
data() {
return {
- list: null,
- listLoading: true,
- activeName: "first",
- timeData: new Date(),
+ // 璇剧▼琛ㄦ暟鎹�
+ tiemData: [
+ "07:00",
+ "08:00",
+ "09:00",
+ "10:00",
+ "11:00",
+ "12:00",
+ "13:00",
+ "14:00",
+ "15:00",
+ "16:00",
+ "17:00",
+ "18:00",
+ "19:00",
+ "20:00",
+ ],
+ time: new Date(),
+ dataList: [],
+ drawerTime: new Date(),
+ drawerIf: true,
+ drawer: false,
+ headerTime: "",
+ formData: {},
+ activeName:'course'
};
},
+ mounted() {
+ this.mergeData();
+ },
+ watch: {
+ events: {
+ handler(newVal, oldVal) {
+ this.mergeData();
+ },
+ deep: true,
+ },
+ },
created() {
- this.fetchData();
+ this.getCourses();
},
methods: {
- fetchData() {
- this.listLoading = true;
- getList().then((response) => {
- this.list = response.data.items;
- this.listLoading = false;
+ getCourses() {
+ let data = {
+ staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
+ day: this.getYMD(this.time),
+ };
+ getBySessionExistsOfDay(data).then((res) => {
+ let courseIds = [];
+ res.data.findBySessionExistsOfDay.map((i) => {
+ courseIds.push(i.id);
+ });
+ let params = {
+ staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
+ beginDate: this.getYMD(this.time),
+ endDate: this.getYMD(this.time),
+ courseIds: courseIds,
+ };
+ getSubjectByCourseAndDateRange(params).then((res) => {
+ this.dataList = res.data.findSubjectByCourseAndDateRange[0].subjects;
+ });
});
},
- //闅忔満鑾峰彇棰滆壊
- getRandomColor() {
- let colorList = this.colorList;
- let colorRandom = Math.floor(Math.random() * colorList.length + 1) - 1;
- let color;
- for (let i = 0; colorList.length > i; i++) {
- if (i == colorRandom) {
- color = colorList[i];
- }
- }
- return color;
+ getYMD(time) {
+ const year = time.getFullYear();
+ const month = (time.getMonth() + 1).toString().padStart(2, "0");
+ const day = time.getDate().toString().padStart(2, "0");
+ return `${year}/${month}/${day}`;
+ },
+ getTop(time) {
+ let tiemData = new Date(time);
+ return (tiemData.getHours() - 7 + tiemData.getMinutes() / 60) * 50 + "px";
+ },
+ getHeight(beginTime, endTime) {
+ let time = new Date(beginTime);
+ let timeA = new Date(endTime);
+ return ((timeA - time) / 1000 / 60 / 60) * 50 + "px";
+ },
+ lookDetails(i) {
+ const month = (this.time.getMonth() + 1).toString().padStart(2, "0");
+ const day = this.time.getDate().toString().padStart(2, "0");
+ this.drawerTime = `${month}/${day}(${this.getDayOfWeek(this.time)})`;
+ this.headerTime =
+ new Date(i.beginTime).getHours().toString().padStart(2, "0") +
+ ":" +
+ new Date(i.beginTime).getMinutes().toString().padStart(2, "0") +
+ "-" +
+ new Date(i.endTime).getHours().toString().padStart(2, "0") +
+ ":" +
+ new Date(i.endTime).getMinutes().toString().padStart(2, "0");
+ this.formData = i;
+ this.drawer = true;
+ },
+ getDayOfWeek(timestamp) {
+ const days = ["鍛ㄦ棩", "鍛ㄤ竴", "鍛ㄤ簩", "鍛ㄤ笁", "鍛ㄥ洓", "鍛ㄤ簲", "鍛ㄥ叚"];
+ const date = new Date(timestamp);
+ return days[date.getDay()];
},
},
};
</script>
+<style scoped>
+.table_box {
+ overflow-x: auto;
+ white-space: nowrap;
+}
+.header_box {
+ height: 50px;
+ width: 200px;
+ border: 2px solid rgb(165, 165, 165);
+ background-color: rgb(212, 241, 255);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+#header_boxA {
+ border-left: none;
+}
+.body_box {
+ height: 50px;
+ width: 200px;
+ border: 2px solid rgb(165, 165, 165);
+ border-top: none;
+}
+</style>
--
Gitblit v1.8.0