463 lines
15 KiB
Vue
463 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<error-page v-if="showError" @closeError="closeError"></error-page>
|
||
<!-- 主体内容 -->
|
||
<div v-if="!showError" class="main">
|
||
<!-- 左侧 -->
|
||
<div class="main-left">
|
||
<!-- 班级情况 -->
|
||
<div class="class-left-one">
|
||
<div class="baby-left-content">
|
||
<div class="class-left-title">
|
||
<div class="pultitle">班级情况</div>
|
||
</div>
|
||
<div class="baby-content-box">
|
||
<div class="class-situation class-item-box" v-if="className!=''">{{className}}</div>
|
||
<!-- 班级老师 -->
|
||
<div class="class-item-box" v-if="teatherArr.length!=0">
|
||
<div class="teather-title">班级老师</div>
|
||
<div class="teather-box">
|
||
<div v-for="(item,index) in teatherArr" :key="index">
|
||
<img v-if="item.AvatarUrl!=''" :src="item.AvatarUrl" >
|
||
<img v-else src="../../static/img/kindergartenIntroduce/teacher-icon.jpg" >
|
||
<span>{{item.TeacherName}}</span>
|
||
<!-- <label @click="goDetail(index)" style="font-size: 14px;margin-top: 10px;color: #9c7cfa;">查看详情</label> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="plan-box">
|
||
<v-touch v-on:swipeleft="touchDayEv" v-on:swiperight="touchDayEv">
|
||
<button type="button">查看周计划</button>
|
||
</v-touch>
|
||
<v-touch v-on:swipeleft="touchMonthEv" v-on:swiperight="touchMonthEv">
|
||
<button type="button">查看月计划</button>
|
||
</v-touch>
|
||
</div>
|
||
<!-- 当前活动 -->
|
||
<!-- 一种排版 -->
|
||
<!-- <div v-for="(item,index) in dangArr.Content" :key="index" class="class-item-box" style="height: 210px;">
|
||
<div class="teather-title">当前活动</div>
|
||
<div class="class-active">
|
||
<label>{{item.TimePart}}</label>
|
||
<label>{{item.Name}}</label>
|
||
</div>
|
||
</div> -->
|
||
<!-- 二种排版 -->
|
||
<!-- <div v-for="(item,index) in dangArr" :key="index">
|
||
<div v-if="item.NowTimePart!=null" class="class-item-box" style="height: 210px;">
|
||
<div class="teather-title">当前活动</div>
|
||
<div class="class-active">
|
||
<label>{{item.NowTimePart}}</label>
|
||
<label>{{item.NowCourse || '暂无活动'}}</label>
|
||
</div>
|
||
</div>
|
||
<div v-if="item.NextTimePart!=null" class="class-item-box" style="height: 210px;">
|
||
<div class="teather-title">当前活动</div>
|
||
<div class="class-active">
|
||
<label>{{item.NextTimePart}}</label>
|
||
<label>{{item.NextCourse || '暂无活动'}}</label>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 周计划弹框 -->
|
||
<div v-if="isDay" class="notice-k" @click="closeNotice">
|
||
<div @click.stop="isDay=true" class="notice-box notice-open-01 ">
|
||
<div class="notice-title-box notice-title-other">
|
||
<!-- <img src="../../static/img/home/flower.png"> -->
|
||
<div>第15周工作计划</div>
|
||
<!-- <img src="../../static/img/home/flower.png"> -->
|
||
</div>
|
||
<div style="padding: 0 20px;">
|
||
<!-- <div class="second-title">啥地方叫了</div>
|
||
<div class="line"></div>
|
||
<div class="three-content left-notice" style="height: auto;max-height: 600px;overflow: hidden;overflow-y: scroll;">
|
||
<div class="">阿萨德立方空间</div>
|
||
</div> -->
|
||
<div class="notice-table notice-table-01">
|
||
<table>
|
||
<tr>
|
||
<td colspan="5">班级：</td>
|
||
<td colspan="5">时间：</td>
|
||
</tr>
|
||
<tr>
|
||
<td>上周情况分析</td>
|
||
<td colspan="7"></td>
|
||
<td class="td-03" colspan="2" rowspan="3">家长工作：</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="td-01">内容</td>
|
||
<td class="td-02">星期</td>
|
||
<td>一</td>
|
||
<td>二</td>
|
||
<td>三</td>
|
||
<td>四</td>
|
||
<td>五</td>
|
||
<td>生成与调整</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="td-01">学<br />习<br />活<br />动</td>
|
||
<td class="td-02">上午</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="td-01" rowspan="2">户<br />外<br />活<br />动</td>
|
||
<td class="td-02">上午</td>
|
||
<td>
|
||
1.体能：<br>
|
||
2.游戏：<br>
|
||
3.自选器械：
|
||
</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td rowspan="2"></td>
|
||
<td class="td-03" colspan="2" rowspan="3">早午操指导重点：</td>
|
||
</tr>
|
||
<tr>
|
||
<td>下午</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="td-01" rowspan="2">游<br />戏<br />活<br />动</td>
|
||
<td class="td-02">上午</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td rowspan="2"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>下午</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">延时活动</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td class="td-03" colspan="2" rowspan="3">环创与资源利用：</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">生活活动<br />(观察引导重点)</td>
|
||
<td colspan="6"></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 月计划弹框 -->
|
||
<div v-if="isMonth" class="notice-k" @click="closeNotice">
|
||
<div @click.stop="isMonth=true" class="notice-box notice-open-02">
|
||
<div class="notice-title-box notice-title-other">
|
||
<div>(2022-2)月主题活动及工作要点</div>
|
||
</div>
|
||
<div style="padding: 0 20px;">
|
||
<!-- <div class="second-title">啥地方叫了</div>
|
||
<div class="line"></div>
|
||
<div class="three-content left-notice" style="height: auto;max-height: 600px;overflow: hidden;overflow-y: scroll;">
|
||
<div class="">阿萨德立方空间</div>
|
||
</div> -->
|
||
<div class="notice-table notice-table-02">
|
||
<table>
|
||
<tr>
|
||
<td colspan="2">班级：</td>
|
||
<td colspan="3">时间：</td>
|
||
</tr>
|
||
<tr>
|
||
<td>本月主题</td>
|
||
<td colspan="4"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>主题目标及价值</td>
|
||
<td colspan="4"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>本月重点工作</td>
|
||
<td colspan="4">
|
||
内容包含（保教工作）
|
||
（环境创设）
|
||
（班务工作）
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>生活活动</td>
|
||
<td colspan="4"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>游戏活动</td>
|
||
<td colspan="2">
|
||
<p>目标</p>
|
||
</td>
|
||
<td colspan="2">
|
||
<p>环境与材料调整</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>学习活动</td>
|
||
<td colspan="2">
|
||
<p>每周主题（简写）</p>
|
||
第一周：<br />
|
||
第二周：<br />
|
||
第三周：<br />
|
||
第四周：
|
||
</td>
|
||
<td colspan="2">
|
||
<p>预设活动</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>体育锻炼</td>
|
||
<td colspan="4"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>家园共育</td>
|
||
<td colspan="4"></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧 -->
|
||
<div class="class-main-right">
|
||
<div v-if="!showDetail">
|
||
<div class="class-left-title">
|
||
<!-- <div class="pultitle" >宝宝课表第{{weekNum}}周（{{dateTime}}）</div> -->
|
||
<div class="pultitle" >宝宝课表第{{weekNum}}周</div>
|
||
</div>
|
||
<div class="baby-content-box">
|
||
<div class="time-title-box">
|
||
<div v-for="(item,index) in kebiaoArr" :key="index">{{item}}</div>
|
||
</div>
|
||
<template v-if="dataArr.length!=0">
|
||
<div class="tiam-data-box" v-for="(item,index) in dataArr" :key="index">
|
||
<div class="time-left" :style="{background:['#C3AEFF','#F1D470','#FF9393'][index]}">{{item.Ampm}}</div>
|
||
<div style="width: 100%;">
|
||
<div class="time-right-box" v-for="(itemt,indext) in item.Content" :key="indext">
|
||
<div class="time-item clips1" style="border-radius: 10px 0 0 10px;display: flex;">
|
||
<div></div>
|
||
<div>{{itemt.TimePart}}</div>
|
||
</div>
|
||
<div class="clips1 time-item">{{itemt.Week1Name}}</div>
|
||
<div class="clips1 time-item">{{itemt.Week2Name}}</div>
|
||
<div class="clips1 time-item">{{itemt.Week3Name}}</div>
|
||
<div class="clips1 time-item">{{itemt.Week4Name}}</div>
|
||
<div class="clips1 time-item">{{itemt.Week5Name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<loading :isShow="showLoading_right"></loading>
|
||
</div>
|
||
</div>
|
||
<div v-if="showDetail" style="background-color: #FFFFFF;border: 3px solid #7240c5;width: 100%;height: 100%;border-radius: 20px;overflow: hidden;">
|
||
<teacherStyleDetail :teacherInfo="teacherInfo" @backstyle="backstyle"></teacherStyleDetail>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import teacherStyleDetail from '@/components/teacherStyleDetail.vue';
|
||
export default {
|
||
components:{
|
||
teacherStyleDetail
|
||
},
|
||
name: 'babyActivity',
|
||
data() {
|
||
return {
|
||
weekNum:0,
|
||
dateTime:0,
|
||
className:'',
|
||
teatherArr:[],
|
||
kebiaoArr:['时间','星期一','星期二','星期三','星期四','星期五'],
|
||
dataArr:[],
|
||
isNothing:false,
|
||
dangArr:[],
|
||
timer:null,
|
||
showLoading_right:true,
|
||
showError:false,
|
||
showDetail:false,
|
||
teacherInfo:{},
|
||
isDay:false,
|
||
isMonth:false
|
||
}
|
||
},
|
||
methods: {
|
||
// 手指滑动事件
|
||
touchDayEv(){
|
||
console.log(151);
|
||
this.isDay = true;
|
||
},
|
||
touchMonthEv(){
|
||
this.isMonth = true;
|
||
},
|
||
// 关闭通知公告弹框
|
||
closeNotice(){
|
||
this.isDay = false;
|
||
this.isMonth = false;
|
||
},
|
||
// 查看教师详情
|
||
goDetail(e){
|
||
if(this.$storage.get('network')){
|
||
this.teacherInfo = this.teatherArr[e];
|
||
console.log(this.teatherArr[e]);
|
||
// this.showLoading = true;
|
||
this.getteachers_demeanor_detailEv(this.teacherInfo.TeacherGuid);
|
||
} else {
|
||
this.showError = true;
|
||
}
|
||
},
|
||
// 关闭教师详情
|
||
backstyle(){
|
||
this.showDetail = false;
|
||
},
|
||
async getteachers_demeanor_detailEv(guid) {
|
||
console.log(guid,'guid');
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.getteachers_demeanor_detail,
|
||
methods: "get",
|
||
params: {
|
||
Guid:guid,
|
||
OrgGuid:this.$storage.get('orgGuid')
|
||
},
|
||
});
|
||
this.teacherInfo = data.data.data;
|
||
this.$storage.set('teacherInfo',this.teacherInfo);
|
||
} else {
|
||
this.teacherInfo = this.$storage.get('teacherInfo');
|
||
}
|
||
this.showDetail = true;
|
||
// this.showLoading = false;
|
||
},
|
||
closeError(){
|
||
this.showError = false;
|
||
},
|
||
// 查看一周的宝宝课表
|
||
async getbabycourseEv() {
|
||
if(this.$storage.get('network')){
|
||
this.showError = false;
|
||
let data = await this.$axios({
|
||
url: this.$https.getbabycourse,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID'),
|
||
},
|
||
});
|
||
if(data.data.data!=undefined){
|
||
let newData = data.data.data;
|
||
// 第几周
|
||
this.weekNum = newData[0].NowWeekNo;
|
||
this.$storage.set('weekNum',this.weekNum);
|
||
// 时间
|
||
let newTime = newData[0].NowDate.slice(0,10).split('/');
|
||
this.dateTime = `${newTime[2]}年${newTime[1]}月${newTime[0]}日`;
|
||
this.$storage.set('dateTimeacti',this.dateTime);
|
||
// 一周安排
|
||
this.dataArr = newData[0].WeekData;
|
||
this.$storage.set('dataArracti',this.dataArr);
|
||
}
|
||
} else {
|
||
this.weekNum = this.$storage.get('weekNum');
|
||
this.dateTime = this.$storage.get('dateTimeacti');
|
||
this.dataArr = this.$storage.get('dataArracti');
|
||
if(this.weekNum==undefined){
|
||
this.showError = true;
|
||
}
|
||
}
|
||
this.showLoading_right = false;
|
||
},
|
||
// 当前活动
|
||
async schedulingWebEv() {
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
url: this.$https.schedulingWeb_two,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID'),
|
||
},
|
||
});
|
||
if(data.data.data!=undefined){
|
||
// let newDataa = data.data.data;
|
||
// let newDate = new Date();
|
||
// let timeDate = `${newDate.getHours()}.${newDate.getMinutes()}`;
|
||
// if('8.00'*100 <= timeDate*100 && timeDate*100 <= '11.55'*100) {
|
||
// this.dangArr = newDataa[0].WeekData[0];
|
||
// } else if('11.55'*100 <= timeDate*100 && timeDate*100 <= '15.00'*100) {
|
||
// this.dangArr = newDataa[0].WeekData[1];
|
||
// } else if('15.00'*100 <= timeDate*100 && timeDate*100 <= '17.00'*100) {
|
||
// this.dangArr = newDataa[0].WeekData[2];
|
||
// }
|
||
this.dangArr = data.data.data;
|
||
this.$storage.set('dangArracti',this.dangArr);
|
||
}
|
||
} else {
|
||
this.dangArr = this.$storage.get('dangArracti');
|
||
}
|
||
},
|
||
// 班级情况
|
||
async classStatusEv() {
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
url: this.$https.classStatus,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID'),
|
||
},
|
||
});
|
||
if(data.data.data!=undefined){
|
||
this.teatherArr = data.data.data.Teachers;
|
||
this.className = data.data.data.ClassName;
|
||
this.$storage.set('teatherArracti',this.teatherArr);
|
||
this.$storage.set('classNameactu',this.className);
|
||
}
|
||
} else {
|
||
this.teatherArr = this.$storage.get('teatherArracti');
|
||
this.className = this.$storage.get('classNameactu');
|
||
}
|
||
},
|
||
|
||
},
|
||
mounted() {
|
||
// 查看一周的宝宝课表
|
||
this.getbabycourseEv();
|
||
// 当前活动
|
||
this.schedulingWebEv();
|
||
// 班级情况
|
||
this.classStatusEv();
|
||
// 各一分钟调用一次当前活动
|
||
this.timer = setInterval(()=>{
|
||
this.schedulingWebEv();
|
||
},1000*60)
|
||
},
|
||
destroyed(){
|
||
clearInterval(this.timer);
|
||
}
|
||
}
|
||
</script>
|