<template>
|
<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 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>
|
</el-drawer>
|
</div>
|
</template>
|
<script>
|
import {
|
getBySessionExistsOfDay,
|
getSubjectByCourseAndDateRange,
|
} from "@/api/curriculum";
|
export default {
|
props: {
|
// 下午节次数
|
afternoonLength: {
|
type: [String, Number],
|
default: 6,
|
},
|
// 总节次
|
length: {
|
type: [String, Number],
|
default: 14,
|
},
|
// 课表数据
|
// events: {
|
// type: Array,
|
// default: this.events1,
|
// },
|
},
|
data() {
|
return {
|
// 课程表数据
|
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.getCourses();
|
},
|
methods: {
|
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;
|
});
|
});
|
},
|
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>
|
