Commit a672cd3c authored by 罗超's avatar 罗超
parents 100cd38a 52e0309e
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
"@riophae/vue-treeselect": "^0.4.0", "@riophae/vue-treeselect": "^0.4.0",
"ali-oss": "^6.12.0", "ali-oss": "^6.12.0",
"axios": "^0.18.1", "axios": "^0.18.1",
"browser-md5-file": "^1.1.1", "browser-md5-file": "^1.0.0",
"co": "^4.6.0", "co": "^4.6.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"cos-js-sdk-v5": "^1.1.5", "cos-js-sdk-v5": "^1.1.5",
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
"relation-graph": "^1.0.8", "relation-graph": "^1.0.8",
"v-viewer": "^1.5.1", "v-viewer": "^1.5.1",
"vue-amap": "^0.5.10", "vue-amap": "^0.5.10",
"vue-draggable-resizable": "^1.7.5", "vue-draggable-resizable": "^1.7.2",
"vue-easytable": "^1.7.2", "vue-easytable": "^1.7.2",
"vue-i18n": "^8.0.0", "vue-i18n": "^8.0.0",
"vue-inline-svg": "^2.0.0", "vue-inline-svg": "^2.0.0",
......
...@@ -30,7 +30,7 @@ export function getSchoolAndRoomNav(data) { ...@@ -30,7 +30,7 @@ export function getSchoolAndRoomNav(data) {
*/ */
export function getClassRoomTimeList(data) { export function getClassRoomTimeList(data) {
return request({ return request({
url: '/ClassRoom/GetClassRoomTimeList', url: '/ClassRoom/GetNewClassRoomTimeList',
method: 'post', method: 'post',
data data
}) })
......
...@@ -167,7 +167,7 @@ ...@@ -167,7 +167,7 @@
<div class="col-3 "> <div class="col-3 ">
<q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.SelectIsEnd" <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.SelectIsEnd"
class="col-6 q-pr-lg q-pr-lg" :options="statusOpts" emit-value map-options label="状态" class="col-6 q-pr-lg q-pr-lg" :options="statusOpts" emit-value map-options label="状态"
@change="resetSearch" /> />
</div> </div>
</div> </div>
</div> </div>
...@@ -208,12 +208,15 @@ ...@@ -208,12 +208,15 @@
<template v-slot:body-cell-AgeAndPeopleNum="props"> <template v-slot:body-cell-AgeAndPeopleNum="props">
<q-td :props="props"> <q-td :props="props">
<div> <div>
<div>{{props.row.AgeLimit ==1?'不区分年龄':'区分年龄'}}</div> <!-- <div>{{props.row.AgeLimit ==1?'不区分年龄':'区分年龄'}}</div>
<div v-if="props.row.AgeLimit==0">范围:{{props.row.StartAge}}岁~{{props.row.EndAge}}</div> <div v-if="props.row.AgeLimit==0">范围:{{props.row.StartAge}}岁~{{props.row.EndAge}}</div>-->
<div>报名人数</div> <!-- <div>报名人数</div> -->
<div v-if="props.row.Distinguish ==1">总人数:{{props.row.ManNum}}</div> <div v-if="props.row.Distinguish ==1">总人数:{{props.row.ManNum}}</div>
<div v-if="props.row.Distinguish ==0">男性:{{props.row.ManNum}}<span <div v-if="props.row.Distinguish ==0">男性:{{props.row.ManNum}}<span
style="margin-left:10px">女性:{{props.row.WoManNum}}</span> </div> style="margin-left:10px">女性:{{props.row.WoManNum}}</span> </div>
<div >
已报入:{{props.row.JoinNum}}
</div>
</div> </div>
</q-td> </q-td>
</template> </template>
...@@ -368,7 +371,7 @@ ...@@ -368,7 +371,7 @@
}, },
{ {
name: "AgeAndPeopleNum", name: "AgeAndPeopleNum",
label: "年龄和报名人数", label: "总人数/已报入",
align: "left" align: "left"
}, },
{ {
......
<style lang="scss" scoped>
@import "./css/comSummary.css";
.td-item{
// min-width: 160px;
width: 195px;
position: relative;
margin-left:9px;
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;
}
.flexOne .el-timeline{
padding-left: 5px;
}
.tbody{
// width: calc(100% + 10px);
width: 1680px;
padding-right: 10px;
height: calc(100vh - 200px);
box-sizing: border-box;
overflow-y: scroll;
overflow-x: hidden;
}
.body-td{
position: relative;
}
.tbody::-webkit-scrollbar{
width:10px;
height:10px;
/**/
}
.tbody::-webkit-scrollbar-track{
background: rgb(239, 239, 239);
border-radius:2px;
}
.tbody::-webkit-scrollbar-thumb{
background: #bfbfbf;
border-radius:10px;
}
.tbody::-webkit-scrollbar-thumb:hover{
background: #333;
}
.mainSummary th:first-child,
td:first-child {
position: sticky;
left: 0;
z-index: 1;
}
</style>
<template> <template>
<div class="flexOne comSummary"> <div class="flexOne comSummary MainPlan">
<div class="mainSummary"> <div>
<!-- <table> <table class="ClassPlanTable plantHead" style="border-collapse:collapse;width:100%;margin:15px 0 0 0;">
<colgroup>
<col style="width: 80px;" />
<col />
</colgroup>
<thead>
<tr><th>序号</th><th>内容</th></tr>
</thead>
</table> -->
<table class="summaryTable" cellspacing="0">
<colgroup>
<col width='105px'/>
<col width='10px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col width='10px'/>
</colgroup>
<thead> <thead>
<th class=""> <tr>
<div class="leftDay"> <th colspan="16">教室使用记录</th>
<div class="leftDayTop"> </tr>
<!-- <span class="yearCircle"></span> --> <tr>
{{nowYear}} <th>周一</th>
<!-- <span class="yearCircle"></span> --> <th>周二</th>
<!-- <div class="rili LI1"></div> <th>周三</th>
<div class="rili LI2"></div> --> <th>周四</th>
</div> <th>周五</th>
<span class="monthNum">{{nowMonth}}</span> <th>周六</th>
<!-- <span class="monthLis">{{$t('pub.month')}}</span> --> <th>周日</th>
</div> </tr>
</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" :width="180" :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">
<span>{{k.CurrentMonthCn}}<br/>{{$t('pub.month')}}</span>
</div>
<div class="_day" v-else>{{k.CurrentDay}}</div>
<!-- <div class="_longli">{{k.LunarDayCn}}</div> -->
</div>
<div class="_lineSummary" v-if="index==columnLine&&dataList!=''"></div>
</th>
<th style="width:10px">
<div class="Arrow" @click="rightClick()">
<i class="iconfont icon-arrow-right"></i>
</div>
</th>
</thead> </thead>
</table> </table>
<div class="tbody" style="width:1680px" > <div class="planTabDiv" ref="planTabDiv">
<colgroup> <table class="ClassPlanTable" ref="PlanTable" style="border-collapse:collapse;margin-top:0;">
<col width='140px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col width='215px'/>
<col/>
</colgroup>
<tbody> <tbody>
<tr> <tr v-for="(item,index) in tbodayData.fridayList" :key="index">
<td style="width:50px;text-align:center;padding-top:8px; width:140px"> <td>
<el-timeline :reverse="reverse"> <div class="plan_ClassDate">{{tbodayData.mondayList[index].ClassDate}}</div>
<el-timeline-item <mateitem @unusual="taggleUserHistory" v-if="tbodayData.mondayList&&tbodayData.mondayList[index].SubList"
v-for="(activity, index) in activities" :dayData="tbodayData.mondayList[index]"></mateitem>
:key="index"
color="#D9F3FF"
:timestamp="activity.timestamp">
<!-- {{activity.timestamp}} -->
</el-timeline-item>
</el-timeline>
</td> </td>
<td v-for="(item,index) in tbodayData" class="body-td" :class="{'td-bg':index%2==0}" > <td>
<div v-for="(_item,_index) in item.InfoList" class="absolute" :style="{'top':_item.offSetTop+'px','z-index':_index}"> <div class="plan_ClassDate">{{tbodayData.tuesdayList[index].ClassDate}}</div>
<div class="td-item" v-if="_item.Type===0" @click="goCourseInfo(_item)" :style="{'height':_item.height}"> <mateitem @unusual="taggleUserHistory" v-if="tbodayData.tuesdayList&&tbodayData.tuesdayList[index].SubList"
<img src="../../../assets/images/classroom/useing.png" alt="" class="ClassStatus" v-if="_item.ClassStatus===1"> :dayData="tbodayData.tuesdayList[index]"></mateitem>
<img src="../../../assets/images/classroom/not-use.png" alt="" class="ClassStatus" v-if="_item.ClassStatus!==1"> </td>
<span class="name">{{_item.Title}}</span> <td>
<div class="time">{{_item.StartTime}}-{{_item.EndTime}}</div> <div class="plan_ClassDate">{{tbodayData.wednesdayList[index].ClassDate}}</div>
</div> <mateitem @unusual="taggleUserHistory" v-if="tbodayData.wednesdayList&&tbodayData.wednesdayList[index].SubList"
<div class="td-item" v-if="_item.Type===1" @click="taggleUserHistory(_item)" :style="{'height':_item.height}"> :dayData="tbodayData.wednesdayList[index]"></mateitem>
<span class="name">{{_item.Title}}</span> </td>
<div class="time">{{_item.StartTime}}-{{_item.EndTime}}</div> <td>
</div> <div class="plan_ClassDate">{{tbodayData.thursdayList[index].ClassDate}}</div>
</div> <mateitem @unusual="taggleUserHistory" v-if="tbodayData.thursdayList&&tbodayData.thursdayList[index].SubList"
:dayData="tbodayData.thursdayList[index]"></mateitem>
</td>
<td>
<div class="plan_ClassDate">{{tbodayData.fridayList[index].ClassDate}}</div>
<mateitem @unusual="taggleUserHistory" v-if="tbodayData.fridayList&&tbodayData.fridayList[index].SubList"
:dayData="tbodayData.fridayList[index]"></mateitem>
</td>
<td>
<div class="plan_ClassDate">{{tbodayData.saturdayList[index].ClassDate}}</div>
<mateitem @unusual="taggleUserHistory" v-if="tbodayData.saturdayList&&tbodayData.saturdayList[index].SubList"
:dayData="tbodayData.saturdayList[index]"></mateitem>
</td>
<td>
<div class="plan_ClassDate">{{tbodayData.sundayList[index].ClassDate}}</div>
<mateitem @unusual="taggleUserHistory" v-if="tbodayData.sundayList&&tbodayData.sundayList[index].SubList"
:dayData="tbodayData.sundayList[index]"></mateitem>
</td> </td>
<td></td>
</tr> </tr>
</tbody> </tbody>
</table>
</div> </div>
</div> </div>
<UserHistory ref="history" :classroomId="classroomUserId" ></UserHistory> <UserHistory ref="history" :classroomId="classroomUserId"></UserHistory>
</div> </div>
</template> </template>
<script> <script>
import lunarCalendar from "./js/lunarCalendar" import lunarCalendar from "./js/lunarCalendar"
import UserHistory from "./userHistory" import UserHistory from "./userHistory"
export default { import mateitem from "./mateitem.vue"
props:{ export default {
tbodayData:{ props: {
type:Array, tbodayData: {
type: [Array,Object],
},
startT:{
type:String,
default:''
}
},
components:{
UserHistory
},
watch:{
tbodayData:{
handler(val){
val.forEach(e=>{
e.InfoList.forEach(_e=>{
_e.height=_e.IntervalNum*41+'px'
let gap= this.getGap("09:30",_e.StartTime,15)
_e.offSetTop=gap*41
})
})
},
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
);
this.CalendarDataArray = data;
this.QStartDate = data[0].CurrentDate;
this.QEndDate = data[data.length - 1].CurrentDate;
this.Calendar = this.CalendarDataArray.slice(0,7);
}
}
}, },
msg:{ startT: {
handler(val){ type: String,
if(val){ default: ''
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 components: {
} UserHistory,
mateitem
}, },
data() { data() {
return { return {
msg: { classroomUserId: ""
StartDate: new Date().Format("yyyy-MM-dd"),
EndDate: ""
},
loading: true,
dataList: "",
tempDataList: [],
Calendar: "", //绑定数据的日历
CalendarDataArray: [], //存放数据的日历
infoList: "",
dayList: "",
nowYear: "",
nowMonth: "",
QStartDate: "",
QEndDate: "",
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'
},],
classroomUserId:""
}; };
}, },
methods: { methods: {
taggleUserHistory(i){ taggleUserHistory(i) {
this.classroomUserId=i.Id this.classroomUserId = i.Id
this.$refs.history.changeShow() this.$refs.history.changeShow()
}, },
goCourseInfo(i){
this.$router.push({
path:"/classroom/courseInfo",
query:{
id:i.Id
}
})
},
//初始化日历数据
initData() {
let startYear = this.msg.StartDate.split("-")[0];
let startMonth = this.msg.StartDate.split("-")[1];
var data = lunarCalendar.initLunar(
startYear,
startMonth,
this.dayNum
);
this.CalendarDataArray = data;
this.QStartDate = data[0].CurrentDate;
this.QEndDate = data[data.length - 1].CurrentDate;
this.Calendar = this.CalendarDataArray.slice(0,7);
}, },
//左侧点击 mounted() {
leftClick() {
var tempStartDate = lunarCalendar.changeLunar(this.QStartDate, -1);
this.CalendarDataArray.unshift(tempStartDate);
this.nowYear = tempStartDate.CurrentYear;
// this.nowMonth = tempStartDate.CurrentMonth;
this.CalendarDataArray.pop(); //删除最后一个元素
this.Calendar = this.CalendarDataArray.slice(0,7);
this.QStartDate = tempStartDate.CurrentDate;
this.QEndDate = this.CalendarDataArray[
this.CalendarDataArray.length - 1
].CurrentDate;
this.msg.StartDate = tempStartDate.CurrentDate;
this.msg.EndDate = this.CalendarDataArray[
this.CalendarDataArray.length - 1
].CurrentDate;
// this.getList();
},
//右侧点击事件
rightClick() {
var tempEndDate = lunarCalendar.changeLunar(this.QEndDate, 1);
this.CalendarDataArray.push(tempEndDate);
this.nowYear = tempEndDate.CurrentYear;
// this.nowMonth = tempEndDate.CurrentMonth;
this.CalendarDataArray.shift(); //删除第一个元素
this.Calendar = this.CalendarDataArray.slice(0,7);
this.QStartDate = this.CalendarDataArray[0].CurrentDate;
this.QEndDate = tempEndDate.CurrentDate;
this.msg.StartDate = this.CalendarDataArray[0].CurrentDate;
this.msg.EndDate = tempEndDate.CurrentDate;
// this.getList(); }
}, };
columnsMouseOver(obj) {
this.columnLine = obj;
},
getEndDay() {
var date1 = this.msg.StartDate;
var date2 = new Date(date1);
var c = date2.getDate();
var d = new Date(date2.setDate(c + 24));
this.msg.EndDate = d.Format("yyyy-MM-dd");
},
getDayInfo(Y, M, D) {
}, </script>
/** <style>
* //计算间隔多少个分钟 .MainPlan .ClassPlanTable {
* @param s 开始时间 width: 100%;
* e 结束时间 color: #000;
* gap 间隔分钟
*/
getGap(s,e,gap){
let stimeArr=s.split(':')
let stime=parseInt(stimeArr[0])*60+parseInt(stimeArr[1])
let etimeArr=e.split(":")
let etime=parseInt(etimeArr[0])*60+parseInt(etimeArr[1])
let res=(etime-stime)/gap
return res
} }
},
mounted() { .ClassPlanTable th,
this.initData(); .ClassPlanTable td {
this.getEndDay(); border: 1px solid #d1d1d1;
let nowDate = new Date().Format("yyyy-MM-dd"); height: 40px;
this.nowYear = nowDate.split("-")[0];
this.nowMonth = parseInt(nowDate.split("-")[1]);
} }
};
</script> .MainPlan td {
\ No newline at end of file vertical-align: top;
padding: 5px;
width: 14%;
}
.MainPlan {
margin: 20px;
}
.MainPlan .plan_ClassDate {
height: 30px;
line-height: 30px;
font-size: 15px;
font-weight: bold;
}
.MainPlan .plantHead th {
border-bottom: 0;
}
.MainPlan .planTabDiv {
max-height: calc(100vh - 280px);
height: calc(100vh - 280px);
overflow-y: overlay;
/* margin-right: -3px; */
}
.planTabDiv::-webkit-scrollbar {
width: 3px;
height: 3px;
background-color: #F5F5F5;
}
/*!*定义滚动条轨道 内阴影+圆角*!*/
.planTabDiv::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*!*定义滑块 内阴影+圆角*!*/
.planTabDiv::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-color: #0ae;
}
.MainPlan .el-collapse-item__header {
font-size: 12px;
line-height: normal;
color: #000;
}
.MainPlan .plan_Inner {
font-size: 12px;
color: #000;
display: flex;
margin-top: 5px;
}
.MainPlan .plan_LeftTitle {
width: 60px;
text-align: right;
flex-shrink: 0
}
.MainPlan .plan_RightInner {
width: 100%;
}
.MainPlan .commonTimeStr {
display: inline-block;
color: #fff;
padding: 1px 3px;
border-radius: 5px;
}
.MainPlan .greenTime {
background-color: green;
}
.MainPlan .blueTime {
background-color: blue;
}
.MainPlan .orangeTime {
background-color: orange;
}
.MainPlan .plan_Tdiv {
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
</style>
<template> <template>
<div class="page-body con"> <div class="page-body con">
<div class="left"> <div class="page-search row items-center">
<div class="dateModel col-5 q-mb-sm cursor-pointer shadow-1"> <div class="col row wrap q-mr-lg q-col-gutter-md">
<!-- <div class="q-mb-sm">开始日期:{{dateModel}}</div> <div class="col-3">
<q-btn label="重新选择" color="primary" size="sm" > <q-select @input="schoolChange" standout="bg-primary text-white" option-value="Key" option-label="SchoolName"
<q-popup-proxy transition-show="scale" transition-hide="scale"> v-model="msg.SchoolId" :options="schoolopt" emit-value map-options label="关联校区" />
<q-date now-btn v-model="dateModel" minimal 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> </div>
</q-date> <div class="col-3">
<q-select @input="getClassRoomTimeList" standout="bg-primary text-white" option-value="RoomId"
</q-popup-proxy> option-label="RoomName" v-model="msg.ClassRoomId" :options="classroomopt" emit-value map-options
</q-btn> --> label="关联教室" @filter="filterFn">
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
未找到相关数据
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-3 Sysuser_Date">
<q-field filled>
 <template v-slot:control>
<el-date-picker v-model="msg.StartTime" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"
@change="changedate">
</el-date-picker>    
</template>
</q-field>
</div>
</div>
</div>
<!-- <div class="left">
<div class="dateModel col-5 q-mb-sm cursor-pointer shadow-1">
<el-date-picker <el-date-picker
v-model="dateModel" v-model="dateModel"
type="date" type="date"
...@@ -22,9 +41,9 @@ ...@@ -22,9 +41,9 @@
</div> </div>
<ClassroomNav :NavData="navData" :activeNav="msg.RoomId" :activeFaNav="msg.SchoolId" @success="successNav"/> <ClassroomNav :NavData="navData" :activeNav="msg.RoomId" :activeFaNav="msg.SchoolId" @success="successNav"/>
</div> </div> -->
<div class="right"> <div class="right">
<Calendar :tbodayData="tbodayData" :startT="dateModel" @change="CalendarChange"></Calendar> <Calendar :tbodayData="tbodayData"></Calendar>
</div> </div>
</div> </div>
</template> </template>
...@@ -40,107 +59,127 @@ ...@@ -40,107 +59,127 @@
meta: { meta: {
title: "使用记录" title: "使用记录"
}, },
components:{ components: {
ClassroomNav, ClassroomNav,
Calendar, Calendar,
}, },
data() { data() {
return { return {
dateModel1:"", dateModel: "",
dateModel:"",
loading: true, loading: true,
schoolId:0, schoolId: 0,
navData:[], navData: [],
msg:{ msg: {
RoomId:0, ClassRoomId: 0,
SchoolId:0, SchoolId: 0,
StartTime:"2020-07-08", StartTime: "",
EndTime:"" EndTime: ""
}, },
tbodayData:[] tbodayData: [],
schoolopt: [],
classroomopt: [],
}; };
}, },
created(){ created() {
if(this.$route.query.key){
this.msg.SchoolId=this.$route.query.key
}
if(this.$route.query.roomId){
this.msg.RoomId=this.$route.query.roomId
}
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) { if (this.$route.query.key) {
enDMonth = '0' + enDMonth this.msg.SchoolId = this.$route.query.key
} }
let endDay = endDate.getDate() if (this.$route.query.roomId) {
if (endDay < 10) { this.msg.ClassRoomId = this.$route.query.roomId
endDay = '0' + endDay
} }
let end = endYear + '-' + enDMonth + '-' + endDay let d = new Date();
this.msg.EndTime = end; 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;
this.getEndTime(today)
this.getNavList();
}, },
mounted(){ methods: {
//筛选教室
filterFn(val, update) {
update(() => {
if (val === '') {
this.classroomopt = JSON.parse(JSON.stringify(this.classroomopt))
} else {
const needle = val.toLowerCase();
this.classroomopt = this.classroomopt.filter(v => v.RoomName.toLowerCase().indexOf(needle) > -1);
this.getNavList(); }
// this.getClassRoomTimeList(); })
}, },
methods:{
// 获取校区教室导航列表 // 获取校区教室导航列表
getNavList() { getNavList() {
let that=this
getSchoolAndRoomNav({}).then(res => { getSchoolAndRoomNav({}).then(res => {
if(res.Code===1){ if (res.Code === 1) {
this.navData=res.Data this.navData = res.Data
if(!this.$route.query.key){ this.schoolopt = res.Data
this.msg.SchoolId=this.navData[0].Key this.schoolChange2(this.msg.SchoolId)
} }
if(!this.$route.query.roomId){ }).catch(() => {
this.msg.RoomId=this.navData[0].RoomList[0].RoomId
})
},
schoolChange(val) {
let res = this.schoolopt.filter(item => {
return item.Key == val
})
if (res.length > 0) {
let obj = {
RoomName: "不限",
RoomId: 0
} }
that.getClassRoomTimeList() this.classroomopt = [obj, ...res[0].RoomList]
} }
}).catch(() => { this.msg.ClassRoomId=0
this.getClassRoomTimeList()
},
schoolChange2(val) {
let res = this.schoolopt.filter(item => {
return item.Key == val
}) })
if (res.length > 0) {
let obj = {
RoomName: "不限",
RoomId: 0
}
this.classroomopt = [obj, ...res[0].RoomList]
}
this.getClassRoomTimeList()
}, },
//获取教室使用记录 //获取教室使用记录
getClassRoomTimeList() { getClassRoomTimeList() {
getClassRoomTimeList(this.msg).then(res => { getClassRoomTimeList(this.msg).then(res => {
this.loading = false this.loading = false
if(res.Code===1){ if (res.Code === 1) {
this.tbodayData=res.Data this.tbodayData = res.Data
} }
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
}) })
}, },
//选择校区教室导航 //选择校区教室导航
successNav(val){ successNav(val) {
this.msg.ClassRoomId = val.RoomId
this.msg.RoomId=val.RoomId this.msg.SchoolId = val.schoolId
this.msg.SchoolId=val.schoolId
this.getClassRoomTimeList(); this.getClassRoomTimeList();
this.$forceUpdate() this.$forceUpdate()
}, },
dateChoose(value, reason, details){ dateChoose(value, reason, details) {
}, },
//获取结束日期 //获取结束日期
getEndTime(date){ getEndTime(date) {
let d=Date.parse(date) let d = Date.parse(date)
let endDate = new Date(d + 6 * 24 * 60 * 60 * 1000); let endDate = new Date(d + 29 * 24 * 60 * 60 * 1000);
let endYear = endDate.getFullYear(); let endYear = endDate.getFullYear();
let enDMonth = endDate.getMonth() + 1 let enDMonth = endDate.getMonth() + 1
if (enDMonth < 10) { if (enDMonth < 10) {
...@@ -153,73 +192,84 @@ ...@@ -153,73 +192,84 @@
let end = endYear + '-' + enDMonth + '-' + endDay let end = endYear + '-' + enDMonth + '-' + endDay
this.msg.EndTime = end; this.msg.EndTime = end;
}, },
//切换日历 changedate(val) {
CalendarChange(val){ if(!val){
let arr=val.split('-'); val=this.dateModel
if(arr[1].length==1){ }
let month=parseInt(arr[1]) this.getEndTime(val)
if(month<10){ this.getClassRoomTimeList()
arr[1]='0'+arr[1]
}
}
let newVal= arr.join("-")
this.dateModel=newVal
this.msg.StartTime=newVal
this.getEndTime(newVal)
this.getClassRoomTimeList();
this.$forceUpdate()
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.con{ .con {
padding: 5px !important; padding: 5px !important;
display: flex; // display: flex;
height: calc( 100vh - 80px); height: calc(100vh - 80px);
.left{ .left {
width: 170px; width: 170px;
background-color: rgb(245, 246, 247); background-color: rgb(245, 246, 247);
min-height: 100%; min-height: 100%;
} }
.right{
.right {
box-sizing: border-box; box-sizing: border-box;
width: calc(100% + 10px); // width: calc(100% + 10px);
width: 100%;
padding-right: 10px; padding-right: 10px;
height: calc(100vh - 100px); height: calc(100vh - 180px);
// height: 900px; // height: 900px;
overflow-x: scroll; // overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
} }
} }
.right::-webkit-scrollbar{
width:10px; .right::-webkit-scrollbar {
height:10px; width: 10px;
height: 10px;
/**/ /**/
} }
.right::-webkit-scrollbar-track{
.right::-webkit-scrollbar-track {
background: rgb(239, 239, 239); background: rgb(239, 239, 239);
border-radius:2px; border-radius: 2px;
} }
.right::-webkit-scrollbar-thumb{
.right::-webkit-scrollbar-thumb {
background: #bfbfbf; background: #bfbfbf;
border-radius:10px; border-radius: 10px;
} }
.right::-webkit-scrollbar-thumb:hover{
.right::-webkit-scrollbar-thumb:hover {
background: #333; background: #333;
} }
// .right::-webkit-scrollbar-corner{
// background: #179a16; // .right::-webkit-scrollbar-corner{
// } // background: #179a16;
// }
.dateModel{ .dateModel {
// height: 50px; // height: 50px;
padding: 20px 10px; padding: 20px 10px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-content: space-around; align-content: space-around;
} }
.Sysuser_Date .el-input {
width: 100%;
border: none;
background-color: transparent;
}
.Sysuser_Date .el-input__inner {
width: 100%;
border: none;
background-color: transparent;
}
</style> </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