Skip to content

C
confucius
Commit 33dcd21e authored by 罗超's avatar 罗超
Browse files
Options

1

parent 7ac77e06
Hide whitespace changes
Inline Side-by-side
Showing with 443 additions and 123 deletions
src/api/classroom/index.js
View file @ 33dcd21e
......@@ -23,3 +23,15 @@ export function getSchoolAndRoomNav(data) {
data
})
}
/**
* 获取教室使用记录
* @param {JSON参数} data
*/
export function getClassRoomTimeList(data) {
return request({
url: '/ClassRoom/GetClassRoomTimeList',
method: 'post',
data
})
}
src/pages/classroom/Scheduling.vue
View file @ 33dcd21e
......@@ -10,7 +10,7 @@
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="classroom-name">{{_item.RoomName}}
<div class="classroom-name" @click="goUrl">{{_item.RoomName}}
<!-- <img src="../../assets/images/classroom/warning.png" class="q-ml-sm" v-if="_item.warn">
<img src="../../assets/images/classroom/normal.png" class="q-ml-sm" v-if="!_item.warn"> -->
</div>
......@@ -25,8 +25,8 @@
class="q-ma-md classroom-user"
readonly
style="text-align: center"
>
{{ _item.UserRate}}%
<br/>
使用率
......
src/pages/classroom/components/classroomNav.vue
View file @ 33dcd21e
<template>
<div class="">
<q-list style="width:180px;overflow:hidden;background-color: rgb(245, 246, 247);">
<template v-for="(x,i) in secondNavs">
<q-item :to="x.MenuUrl" clickable v-ripple :active="currentPath==x.MenuUrl" v-if="x.SubList.length==0"
<template v-for="(x,i) in NavData">
<q-item to="" clickable v-ripple :active="currentNav==x.key" @click="chooseNav(x)" v-if="x.RoomList.length==0"
:key="i">
<q-item-section avatar style="min-width:30px;">
<q-icon :name="x.MenuIcon" size="20px" />
</q-item-section>
<q-item-section>{{x.MenuName}}</q-item-section>
<!-- <q-item-section avatar style="min-width:30px;"> -->
<!-- <q-icon :name="x.MenuIcon" size="20px" /> -->
<!-- </q-item-section> -->
<q-item-section>{{x.SchoolName}}</q-item-section>
</q-item>
<q-expansion-item v-else :label="x.MenuName">
<q-item :to="y.MenuUrl" clickable v-ripple :active="currentPath==y.MenuUrl"
v-for="(y, yi) in x.SubList" :key="yi">
<q-item-section avatar style="padding-right:0;min-width:30px;">
<q-icon :name="y.MenuIcon" size="20px" />
</q-item-section>
<q-item-section>{{y.MenuName}}</q-item-section>
<q-expansion-item v-else :label="x.SchoolName" @show="showNav($event,x.Key)">
<q-item to="" clickable v-ripple :active="currentNav==y.RoomId"
v-for="(y, yi) in x.RoomList" :key="y.RoomId" @click="chooseNav(y)">
<!-- <q-item-section avatar style="padding-right:0;min-width:30px;"> -->
<!-- <q-icon :name="y.MenuIcon" size="20px" /> -->
<!-- </q-item-section> -->
<q-item-section style="padding-left:20px">{{y.RoomName}}</q-item-section>
</q-item>
</q-expansion-item>
</template>
......@@ -24,6 +24,7 @@
</template>
<script>
import { active } from 'src/pages/financial/lang/zh';
export default {
meta: {
title: "使用记录"
......@@ -31,52 +32,39 @@
props:{
NavData:{
type:Array,
default:()=>{
[
{
MenuName:"总部",
MenuIcon:"",
MenuUrl:"",
SubList:[
{MenuName:"樱花教室",MenuUrl:"/",MenuIcon:""},
{MenuName:"菊花教室",MenuUrl:"/",MenuIcon:""}
]
}
]
}
default:[]
},
activeNav:{
type:[Number,String],
default:0
}
},
watch:{
activeNav(val){
if(val!=this.currentNav){
this.currentNav=val
console.log(45,this.currentNav)
}
}
},
watch: {
$route: {
handler: function (route) {
this.currentPath = route.path
},
immediate: true
},
},
data() {
return {
currentPath: "",
secondNavs:[
{
MenuName:"总部",
MenuIcon:"",
SubList:[
{MenuName:"樱花教室",MenuUrl:"",MenuIcon:""},
{MenuName:"菊花教室",MenuUrl:"",MenuIcon:""}
]
}
]
currentNav: 1,
schoolId:0,
};
},
mounted(){
},
methods:{
showNav(val,id){
this.schoolId=id
},
chooseNav(i){
this.currentNav=i.RoomId
this.$emit("success",{...i,...{schoolId:this.schoolId}})
}
}
};
......
src/pages/classroom/components/css/comSummary.css
View file @ 33dcd21e
......@@ -225,14 +225,15 @@
.comSummary .mainSummary {
width: 100%;
/* min-height: 500px; */
margin-top:30px;
margin:10px;
overflow: auto;
}
.comSummary .summaryTable {
width:100%;
min-width: 1400px;
border-radius:4px;
background-color:#E6E6E6;
/* background-color:#E6E6E6; */
background-color: #F1F6FB;
/* table-layout:fixed;word-break:break-all; */
}
......@@ -360,7 +361,7 @@
cursor: pointer;
}
.summaryTable th:first-child{
/* width:180px; */
width:50px;
cursor: default;
}
.dayListTable td {
......
src/pages/classroom/components/js/lunarCalendar.js
View file @ 33dcd21e
......@@ -196,18 +196,36 @@ var lunarCalendar = {
* @param m solar month
* @return Array
*/
initLunar: function (yearStr, monthStr, dayNum) {
initLunar: function (yearStr, monthStr, dayNum, dateStr) {
//年份限定、上限
if (yearStr < 1900 || yearStr > 2100) {
return -1;
}
var objDate = new Date();
var endDate = new Date();
if (dateStr) {
console.log(dateStr)
let d = Date.parse(dateStr)
let res = new Date(d);
console.log(res, 'res');
objDate = res
endDate = res
}
console.log(211, objDate.getTime(), objDate)
endDate.setDate(endDate.getDate() + dayNum);
console.log(222, endDate.getTime(), endDate)
console.log(endDate.getTime() - objDate.getTime(), 'time');
//修正ymd参数
var m = objDate.getMonth() + 1, d = objDate.getDate();
var totalMonthDay = lunarCalendar.solarDays(yearStr, m);
var array = [];
while ((endDate.getTime() - objDate.getTime()) > 0) {
//星期几
var nWeek = objDate.getDay(), cWeek = lunarCalendar.weekStr[nWeek];
......
src/pages/classroom/components/scenicSummary.vue
View file @ 33dcd21e
<style>
<style lang="scss">
@import "./css/comSummary.css";
.td-item{
min-width: 160px;
position: relative;
margin: 0 10px;
border-radius: 4px;
box-shadow: 0px 4px 40px 0px rgba(2, 44, 66, 0.1);
margin-bottom: 20px;
padding: 10px;
background-color: #fff;
.ClassStatus{
position: absolute;
top: 0;
right: 0px;
}
.name{
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
margin-bottom: 10px;
}
.time{
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
}
.td-bg{
background-color: #F1F6FB;
}
</style>
<template>
<div class="flexOne comSummary">
<div class="mainSummary">
<table class="summaryTable" cellspacing="0">
<thead>
<th>
<th class="">
<div class="leftDay">
<div class="leftDayTop">
<!-- <span class="yearCircle"></span> -->
......@@ -19,13 +51,12 @@
<!-- <span class="monthLis">{{$t('pub.month')}}</span> -->
</div>
</th>
<th>
<th style="width:10px">
<div class="Arrow" @click="leftClick()">
<i class="iconfont icon-previewleft"></i>
</div>
</th>
<th v-for="(k,index) in Calendar" :key="k.subCode" :class="{'redType':k.Week=='日'||k.Week=='六','ckedTd':index==columnLine&&dataList!=''}" @click="getDayInfo(k.CurrentYear,k.CurrentMonth,k.CurrentDay)" @mouseover="columnsMouseOver(index)">
<div slot="reference">
<div class="_week">{{k.Week}}</div>
<div class="_monthDay" v-if="k.CurrentDay==1">
......@@ -36,13 +67,44 @@
</div>
<div class="_lineSummary" v-if="index==columnLine&&dataList!=''"></div>
</th>
<th>
<th style="width:10px">
<div class="Arrow" @click="rightClick()">
<i class="iconfont icon-arrow-right"></i>
</div>
</th>
</thead>
<tbody>
<tr>
<td style="width:50px;text-align:center;padding-top:8px;" :colspan='2'>
<el-timeline :reverse="reverse">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
color="#D9F3FF"
:timestamp="activity.timestamp">
<!-- {{activity.timestamp}} -->
</el-timeline-item>
</el-timeline>
</td>
<td v-for="(item,index) in tbodayData" :class="{'td-bg':index%2==0}">
<div v-for="(_item,_index) in item.InfoList" class="absolute" :style="{'top':_item.offSetTop+'px','z-index':_index}">
<div class="td-item" v-if="_item.Type===0" >
<img src="../../../assets/images/classroom/useing.png" alt="" class="ClassStatus" v-if="_item.ClassStatus===1">
<img src="../../../assets/images/classroom/not-use.png" alt="" class="ClassStatus" v-if="_item.ClassStatus!==1">
<span class="name">{{_item.Title}}</span>
<div class="time">{{_item.StartTime}}-{{_item.EndTime}}</div>
</div>
<div class="td-item" v-if="_item.Type===1">
<span class="name">{{_item.Title}}</span>
<div class="time">{{_item.StartTime}}-{{_item.EndTime}}</div>
</div>
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
......@@ -51,6 +113,69 @@
<script>
import lunarCalendar from "./js/lunarCalendar"
export default {
props:{
tbodayData:{
type:Array,
default:null
},
startT:{
type:String,
default:''
}
},
watch:{
tbodayData:{
handler(val){
val.forEach(e=>{
e.InfoList.forEach(_e=>{
if(_e){
this.activities.forEach((x,i)=>{
if(x.timestamp==_e.StartTime) {
let top= this.getOffSet(i)
_e.offSetTop=top-190
}
})
}
})
})
},
deep:true
},
startT:{
handler(val){
if(val){
this.msg.StartDate=val;
let startYear = this.msg.StartDate.split("-")[0];
let startMonth = this.msg.StartDate.split("-")[1];
var data = lunarCalendar.initLunar(
startYear,
startMonth,
this.dayNum,
val
);
console.log(156,data)
this.CalendarDataArray = data;
this.QStartDate = data[0].CurrentDate;
this.QEndDate = data[data.length - 1].CurrentDate;
this.Calendar = this.CalendarDataArray.slice(0,7);
console.log(158,this.Calendar)
}
}
},
msg:{
handler(val){
if(val){
let t=Date.parse(val.StartDate)
let d= new Date(t)
let m=d.getMonth()+1
this.nowMonth=m
this.$emit("change",this.msg.StartDate);
}
},
deep:true
}
},
data() {
return {
msg: {
......@@ -68,10 +193,109 @@ export default {
nowMonth: "",
QStartDate: "",
QEndDate: "",
dayNum: 25, //默认加载天数
columnLine: -1
dayNum: 7, //默认加载天数
columnLine: -1,
reverse: false,
activities: [{//时间线数据
timestamp: '09:30'
}, {
timestamp: '09:45'
}, {
timestamp: '10:00'
},{
timestamp: '10:15'
},{
timestamp: '10:30'
},{
timestamp: '10:45'
},{
timestamp: '11:00'
},{
timestamp: '11:15'
},{
timestamp: '11:30'
},{
timestamp: '11:45'
},{
timestamp: '12:00'
},{
timestamp: '12:15'
},{
timestamp: '12:30'
},{
timestamp: '12:45'
},{
timestamp: '13:00'
},{
timestamp: '13:15'
},{
timestamp: '13:30'
},{
timestamp: '13:45'
},{
timestamp: '14:00'
},{
timestamp: '14:15'
},{
timestamp: '14:30'
},{
timestamp: '14:45'
},{
timestamp: '15:00'
},{
timestamp: '15:15'
},{
timestamp: '15:30'
},{
timestamp: '15:45'
},{
timestamp: '16:00'
},{
timestamp: '16:15'
},{
timestamp: '16:30'
},{
timestamp: '16:45'
},{
timestamp: '17:00'
},{
timestamp: '17:15'
},{
timestamp: '17:30'
},{
timestamp: '17:45'
},{
timestamp: '18:00'
},{
timestamp: '18:15'
},{
timestamp: '18:30'
},{
timestamp: '18:45'
},{
timestamp: '19:00'
},{
timestamp: '19:15'
},{
timestamp: '19:30'
},{
timestamp: '19:45'
},{
timestamp: '20:00'
},{
timestamp: '20:15'
},{
timestamp: '20:45'
},{
timestamp: '21:00'
},{
timestamp: '21:15'
},{
timestamp: '21:30'
},],
};
},
methods: {
//初始化日历数据
initData() {
......@@ -85,29 +309,17 @@ export default {
this.CalendarDataArray = data;
this.QStartDate = data[0].CurrentDate;
this.QEndDate = data[data.length - 1].CurrentDate;
this.Calendar = this.CalendarDataArray;
this.Calendar = this.CalendarDataArray.slice(0,7);
},
// getList() {
// this.apipost(
// "ticketcoupons_get_GetTicketCouponsSummary",
// this.msg,
// res => {
// if (res.data.resultCode == 1) {
// this.dataList = res.data.data;
// this.tempDataList = res.data.data;
// }
// },
// null
// );
// },
//左侧点击
leftClick() {
var tempStartDate = lunarCalendar.changeLunar(this.QStartDate, -1);
this.CalendarDataArray.unshift(tempStartDate);
this.nowYear = tempStartDate.CurrentYear;
this.nowMonth = tempStartDate.CurrentMonth;
// this.nowMonth = tempStartDate.CurrentMonth;
this.CalendarDataArray.pop(); //删除最后一个元素
this.Calendar = this.CalendarDataArray;
this.Calendar = this.CalendarDataArray.slice(0,7);
this.QStartDate = tempStartDate.CurrentDate;
this.QEndDate = this.CalendarDataArray[
this.CalendarDataArray.length - 1
......@@ -123,9 +335,9 @@ export default {
var tempEndDate = lunarCalendar.changeLunar(this.QEndDate, 1);
this.CalendarDataArray.push(tempEndDate);
this.nowYear = tempEndDate.CurrentYear;
this.nowMonth = tempEndDate.CurrentMonth;
// this.nowMonth = tempEndDate.CurrentMonth;
this.CalendarDataArray.shift(); //删除第一个元素
this.Calendar = this.CalendarDataArray;
this.Calendar = this.CalendarDataArray.slice(0,7);
this.QStartDate = this.CalendarDataArray[0].CurrentDate;
this.QEndDate = tempEndDate.CurrentDate;
this.msg.StartDate = this.CalendarDataArray[0].CurrentDate;
......@@ -144,6 +356,7 @@ export default {
this.msg.EndDate = d.Format("yyyy-MM-dd");
},
getDayInfo(Y, M, D) {
console.log(148,Y, M, D)
// let StartDate = Y + "-" + M + "-" + D;
// let msg = {
// StartDate: StartDate
......@@ -158,8 +371,14 @@ export default {
// },
// null
// );
},
getOffSet(index){
let el=document.getElementsByClassName('el-timeline-item')[index]
let top=el.getBoundingClientRect().top
return top
}
},
mounted() {
this.initData();
this.getEndDay();
......
src/pages/classroom/useRecord.vue
View file @ 33dcd21e
<template>
<div class="page-body con">
<div class="left">
<ClassroomNav/>
<div class="dateModel col-5 q-mb-sm cursor-pointer shadow-1">
<div class="q-mb-sm">开始日期:{{dateModel}}</div>
<q-btn label="重新选择" color="primary" size="sm" >
<q-popup-proxy transition-show="scale" transition-hide="scale">
<q-date now-btn v-model="dateModel" mask="YYYY-MM-DD" @input="dateChoose">
<div class="row items-center justify-end">
<q-btn v-close-popup label="关闭" color="primary q-px-md" flat />
</div>
</q-date>
</q-popup-proxy>
</q-btn>
</div>
<ClassroomNav :NavData="navData" :activeNav="msg.RoomId" @success="successNav"/>
</div>
<div class="right">
<!-- <el-timeline :reverse="reverse">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.timestamp">
</el-timeline-item>
</el-timeline> -->
<Calendar></Calendar>
<Calendar :tbodayData="tbodayData" :startT="dateModel" @change="CalendarChange"></Calendar>
</div>
</div>
</template>
......@@ -22,60 +25,131 @@
import ClassroomNav from "./components/classroomNav";
import Calendar from './components/scenicSummary.vue'
import {
getSchoolAndRoomNav
getSchoolAndRoomNav,
getClassRoomTimeList
} from '../../api/classroom/index';
export default {
meta: {
title: "使用记录"
title: "教室状态"
},
components:{
ClassroomNav,
Calendar,
},
data() {
return {
return {
dateModel:"",
loading: true,
msg: {
pageIndex: 1,
pageSize: 12,
},
schoolId:0,
navData:[],
reverse: true,
activities: [{
timestamp: '09:30'
}, {
timestamp: '09:45'
}, {
timestamp: '10:00'
}]
msg:{
RoomId:0,
SchoolId:0,
StartTime:"2020-07-08",
EndTime:""
},
tbodayData:[]
};
},
created(){
let d=new Date();
let year =d.getFullYear();
let month=d.getMonth()+1;
month=month<10?'0'+month:month;
let day=d.getDate();
day=day<10?'0'+day:day;
let today=year+'-'+month+'-'+day;
this.msg.StartTime=today;
this.dateModel=today;
let endDate = new Date(d.getTime() + 6 * 24 * 60 * 60 * 1000);
let endYear = endDate.getFullYear();
let enDMonth = endDate.getMonth() + 1
if (enDMonth < 10) {
enDMonth = '0' + enDMonth
}
let endDay = endDate.getDate()
if (endDay < 10) {
endDay = '0' + endDay
}
let end = endYear + '-' + enDMonth + '-' + endDay
this.msg.EndTime = end;
},
mounted(){
this.getNavList();
this.getNavList();
// this.getClassRoomTimeList();
},
methods:{
// goUrl(){
// this.$router.push({
// path:"/classroom/useRecord",
// query:{
// }
// })
// },
getNavList() {
// 获取校区教室导航列表
getNavList() {
let that=this
getSchoolAndRoomNav({}).then(res => {
this.loading = false
if(res.Code===1){
this.navData=res.Data
this.msg.SchoolId=res.Data[0].Key
this.msg.RoomId=res.Data[0].RoomList[0].RoomId
that.getClassRoomTimeList()
}
}).catch(() => {
})
},
//获取教室使用记录
getClassRoomTimeList() {
getClassRoomTimeList(this.msg).then(res => {
this.loading = false
if(res.Code===1){
this.tbodayData=res.Data
}
}).catch(() => {
this.loading = false;
})
},
//选择校区教室导航
successNav(val){
this.msg.RoomId=val.RoomId
this.msg.SchoolId=val.SchoolId
this.getClassRoomTimeList();
this.$forceUpdate()
},
dateChoose(value, reason, details){
console.log(112,this.dateModel)
},
//获取结束日期
getEndTime(date){
let d=Date.parse(date)
let endDate = new Date(d + 6 * 24 * 60 * 60 * 1000);
let endYear = endDate.getFullYear();
let enDMonth = endDate.getMonth() + 1
if (enDMonth < 10) {
enDMonth = '0' + enDMonth
}
let endDay = endDate.getDate()
if (endDay < 10) {
endDay = '0' + endDay
}
let end = endYear + '-' + enDMonth + '-' + endDay
this.msg.EndTime = end;
},
//切换日历
CalendarChange(val){
let arr=val.split('-');
if(arr[1].length==1){
let month=parseInt(arr[1])
if(month<10){
arr[1]='0'+arr[1]
}
}
let newVal= arr.join("-")
this.dateModel=newVal
this.msg.StartTime=newVal
this.getEndTime(newVal)
this.getClassRoomTimeList();
this.$forceUpdate()
}
}
};
......@@ -85,8 +159,16 @@
padding: 5px !important;
display: flex;
.left{
width: 200px;
background-color: rgb(245, 246, 247);
}
}
.dateModel{
// height: 50px;
padding: 20px 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment