564 lines
16 KiB
Vue
564 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<error-page v-if="showError" @closeError="closeError"></error-page>
|
||
<!-- 主体内容 -->
|
||
<div class="main-box" v-else>
|
||
<!-- 左侧 -->
|
||
<div class="main-left">
|
||
<!-- 班级详情 -->
|
||
<div class="left-one flex-s0">
|
||
<div class="left-content">
|
||
<div class="left-title">
|
||
<div class="pultitle">班级详情</div>
|
||
</div>
|
||
<div class="second-title" v-if="className!=''">{{className}}</div>
|
||
<div class="line" v-if="className!=''"></div>
|
||
<div class="three-content" v-if="className!=''">
|
||
<div>老师：{{teacherName}}</div>
|
||
<div>班级人数：{{classNum}}</div>
|
||
</div>
|
||
<div class="line" v-if="className!=''"></div>
|
||
<div class="left-last">
|
||
<div @click="chooseIndex(index)" v-for="(item,index) in daoArr" :key="index">
|
||
<div>{{item.num}}</div>
|
||
<div>{{item.title}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<loading :isShow="showLoading_one"></loading>
|
||
</div>
|
||
<!-- 宝宝食谱 -->
|
||
<div class="left-one flex-s0">
|
||
<div class="left-content">
|
||
<div class="left-title">
|
||
<div class="pultitle">今日食谱</div>
|
||
</div>
|
||
<div v-if="threeMeals.length!=0">
|
||
<div class="eat-three">
|
||
<div :class="threeMealIndex == index ? 'threeMealActive' : ''"
|
||
v-for="(item, index) in threeMeals" :key="index" @click="chooseMeal(index)">
|
||
{{ item.Type }}
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div v-for="(item, index) in threeMeals" :key="index">
|
||
<div v-if="index == threeMealIndex" class="meal-box">
|
||
<img :src="item.Images" />
|
||
<div class="clips2">{{ item.FoodName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<loading :isShow="showLoading_two"></loading>
|
||
</div>
|
||
<!-- 通知公告 -->
|
||
<div class="left-one">
|
||
<v-touch v-on:swipeleft="touchEv" v-on:swiperight="touchEv">
|
||
<div class="left-content">
|
||
<div class="left-title">
|
||
<div class="pultitle">通知公告</div>
|
||
</div>
|
||
<div class="second-title">{{className}}</div>
|
||
<div class="line" v-if="noticeObj.Content!=''"></div>
|
||
<div class="three-content left-notice" v-if="noticeObj.Content!=''">
|
||
<div class="clips2">{{noticeObj.Content}}</div>
|
||
</div>
|
||
<div class="notice-time" v-if="noticeObj.Content!=''">
|
||
<div>{{noticeObj.PublishTime}}</div>
|
||
<!-- <div><img src="../../static/img/home/slices.png" />{{noticeObj.BroweTotal}}</div> -->
|
||
</div>
|
||
</div>
|
||
</v-touch>
|
||
<loading :isShow="showLoading_three"></loading>
|
||
</div>
|
||
</div>
|
||
<!-- 中部 -->
|
||
<div class="main-center">
|
||
<!-- 班级动态图文 -->
|
||
<div class="center-img-box">
|
||
<div class="center-title">班级动态</div>
|
||
<div class="img-box">
|
||
<video v-if="videoSrc" width="100%" class="home-swiper" controls :src="videoSrc"></video>
|
||
<swiper class="home-swiper" v-if="classImgArr.length && videoSrc==''" :options="swiperOption" style="position: relative;">
|
||
<swiper-slide v-for="(item,index) in classImgArr" :key="index" class="home-slide">
|
||
<img :src="item">
|
||
</swiper-slide>
|
||
</swiper>
|
||
<div v-if="videoSrc==''" class="swiper-pagination"></div>
|
||
<loading :isShow="showLoading_four"></loading>
|
||
</div>
|
||
</div>
|
||
<!-- 提醒 -->
|
||
<div class="remind-box">
|
||
<div class="msg-box">
|
||
<img src="../../static/img/home/icon-notice.png" />
|
||
<div v-if="noticeData!=0">{{noticeData}}</div>
|
||
</div>
|
||
<div class="msg-box">
|
||
<div>宝宝提醒</div>
|
||
<div v-if="babyNotice!=0">{{babyNotice}}</div>
|
||
</div>
|
||
<div class="msg-box">
|
||
<div >生日提醒</div>
|
||
<div v-if="babyBirthdayData!=0">{{babyBirthdayData}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧 -->
|
||
<div class="main-right">
|
||
<div class="left-title">
|
||
<div class="pultitle">今日活动</div>
|
||
</div>
|
||
<div class="right-content">
|
||
<div v-if="noonArr.length!=0" id="innerbox">
|
||
<div v-for="(item, index) in noonArr" :key="index">
|
||
<div class="right-title">{{ item.Ampm }}</div>
|
||
<div class="line" style="margin: 0 6px"></div>
|
||
<div class="right-item-box" v-for="(itemc, indexc) in item.Content"
|
||
:class="indexc % 2 != 0 ? 'oddActive' : ''" :key="indexc">
|
||
<div>{{ itemc.TimePart }}</div>
|
||
<div class="">{{ itemc.Name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<loading :isShow="showLoading_five"></loading>
|
||
</div>
|
||
</div>
|
||
<!-- 公告弹框 -->
|
||
<div v-if="isNotice" class="notice-k" @click="closeNotice">
|
||
<div @click.stop="isNotice=true" class="notice-box">
|
||
<div class="notice-title-box">
|
||
<!-- <img src="../../static/img/home/flower.png"> -->
|
||
<div>通知公告</div>
|
||
<!-- <img src="../../static/img/home/flower.png"> -->
|
||
</div>
|
||
<div style="padding: 0 20px;">
|
||
<div class="second-title">{{className}}</div>
|
||
<div class="line" v-if="noticeObj.Content!=''"></div>
|
||
<div class="three-content left-notice" style="height: auto;max-height: 600px;overflow: hidden;overflow-y: scroll;" v-if="noticeObj.Content!=''">
|
||
<div class="">{{noticeObj.Content}}</div>
|
||
</div>
|
||
<div class="notice-time" style="margin-top: 15px;" v-if="noticeObj.Content!=''">
|
||
<div>{{noticeObj.PublishTime}}</div>
|
||
<!-- <div><img src="../../static/img/home/slices.png" />{{noticeObj.BroweTotal}}</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import $ from 'jquery'
|
||
import storage from 'good-storage'
|
||
export default {
|
||
name: "homepage",
|
||
data() {
|
||
return {
|
||
threeMeals: [],
|
||
threeMealIndex: 0,
|
||
noticeData: 0,
|
||
babyBirthdayData: 0,
|
||
babyNotice:0,//宝宝提醒数量
|
||
dynamicPictureData: "",
|
||
noonArr: [],
|
||
moId:"",
|
||
model:"",
|
||
className:'',//班级名称
|
||
teacherName:'',//老师姓名
|
||
classNum:'',//班级人数
|
||
daoArr:[],//实到、未到、请假
|
||
classImgArr:[],
|
||
showLoading_one:true,
|
||
showLoading_two:true,
|
||
showLoading_three:true,
|
||
showLoading_four:true,
|
||
showLoading_five:true,
|
||
noticeObj:{
|
||
PublishTime:'',
|
||
Content:''
|
||
},
|
||
classGuid:'',
|
||
timer:null,
|
||
|
||
swiperOption: {
|
||
pagination: '.swiper-pagination',
|
||
paginationClickable: true,
|
||
autoplay: 3000,
|
||
autoplayDisableOnInteraction: false,
|
||
loop: true,
|
||
coverflow: {
|
||
rotate: 30,
|
||
stretch: 10,
|
||
depth: 60,
|
||
modifier: 2,
|
||
slideShadows : true
|
||
}
|
||
},
|
||
showError:false,
|
||
monitorTimer:null,
|
||
chuTime:null,
|
||
animate:false,
|
||
topVal:0,
|
||
classCardId:'',
|
||
diffHeight:'',
|
||
isNotice:false,
|
||
classTimer:null,//班级人数心跳事件
|
||
videoSrc:'',//视频地址
|
||
swiperTime:null//班级动态心跳事件
|
||
};
|
||
},
|
||
destroyed() {
|
||
clearInterval(this.timer);
|
||
this.topVal = 0;
|
||
clearInterval(this.monitorTimer);
|
||
clearInterval(this.chuTime);
|
||
// 清除班级人数心跳
|
||
clearInterval(this.classTimer);
|
||
clearInterval(this.swiperTime);
|
||
},
|
||
methods: {
|
||
// 获取班级动态视频或图片列表
|
||
async getVideo(){
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.getVideo,
|
||
methods: "GET",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID')
|
||
},
|
||
});
|
||
if(data.data.data.VideoUrls!=undefined){
|
||
this.videoSrc = data.data.data.VideoUrls;
|
||
this.$storage.set('videoSrc',this.videoSrc);
|
||
}
|
||
if(data.data.data.PictureUrls.length){
|
||
this.classImgArr = data.data.data.PictureUrls;
|
||
this.$storage.set('classImgArr',this.classImgArr);
|
||
}
|
||
} else {
|
||
if(this.$storage.get('videoSrc')!=undefined){
|
||
this.videoSrc = this.$storage.get('videoSrc');
|
||
}
|
||
if(this.$storage.get('classImgArr')!=undefined){
|
||
this.classImgArr = this.$storage.get('classImgArr');
|
||
}
|
||
}
|
||
this.showLoading_four = false;
|
||
},
|
||
// 跳转
|
||
chooseIndex(index){
|
||
let current = '';
|
||
if(index==0) current = 1;
|
||
if(index==1) current = 3;
|
||
if(index==2) current = 4;
|
||
this.$emit('numEv',current)
|
||
},
|
||
// 手指滑动事件
|
||
touchEv(){
|
||
this.isNotice = true;
|
||
},
|
||
// 关闭通知公告弹框
|
||
closeNotice(){
|
||
this.isNotice = false;
|
||
},
|
||
// 滚动动画
|
||
scrollEv(){
|
||
this.topVal = 0;
|
||
clearInterval(this.monitorTimer);
|
||
let parentHeight = $('.right-content').height();
|
||
let childrenHeight = $('#innerbox').height();
|
||
this.diffHeight = childrenHeight - parentHeight;
|
||
this.monitorTimer = setInterval(()=>{
|
||
let topFlag = $('#innerbox').position().top;
|
||
if(-topFlag*1==0){
|
||
this.upEv();
|
||
}
|
||
if(-topFlag*1==this.diffHeight*1){
|
||
this.downEv();
|
||
}
|
||
},100)
|
||
},
|
||
downEv(){
|
||
$('#innerbox').animate({top:0+'px'},(this.diffHeight/4)*100,'linear');
|
||
},
|
||
upEv(){
|
||
$('#innerbox').animate({top:-this.diffHeight+'px'},(this.diffHeight/4)*100,'linear');
|
||
},
|
||
closeError(){
|
||
this.showError = false;
|
||
},
|
||
// 早中晚餐切换事件
|
||
chooseMeal(e) {
|
||
this.threeMealIndex = e;
|
||
},
|
||
// 宝宝食谱
|
||
async babyRecipeEv() {
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.babyRecipe,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID')
|
||
},
|
||
});
|
||
if(data.data.data!=undefined){
|
||
this.threeMeals = data.data.data;
|
||
this.$storage.set('threeMeals',this.threeMeals);
|
||
}
|
||
} else {
|
||
if(this.$storage.get('threeMeals')!=undefined){
|
||
this.threeMeals = this.$storage.get('threeMeals');
|
||
}
|
||
}
|
||
|
||
this.showLoading_two = false;
|
||
},
|
||
// 通知消息数量
|
||
async notice() {
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.notice,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID')
|
||
},
|
||
});
|
||
if(data.data.data!=null){
|
||
this.noticeData = data.data.count;
|
||
this.noticeObj = data.data.data;
|
||
this.noticeObj.PublishTime = this.noticeObj.PublishTime.slice(0,11);
|
||
this.$storage.set('noticeData',this.noticeData)
|
||
this.$storage.set('noticeObj',this.noticeObj)
|
||
this.$storage.set('PublishTime',this.noticeObj.PublishTime)
|
||
}
|
||
} else {
|
||
this.noticeData = this.$storage.get('noticeData');
|
||
if(this.$storage.get('noticeObj')!=undefined){
|
||
this.noticeObj = this.$storage.get('noticeObj');
|
||
this.noticeObj.PublishTime = this.$storage.get('PublishTime');
|
||
}
|
||
}
|
||
this.showLoading_three = false;
|
||
},
|
||
// 今日活动
|
||
async schedulingWeb() {
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.schedulingWeb,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID')
|
||
},
|
||
});
|
||
if(data.data.data!=undefined){
|
||
this.noonArr = data.data.data[0].WeekData;
|
||
this.$storage.set('noonArr',this.noonArr)
|
||
this.animate = true;
|
||
}
|
||
} else {
|
||
if(this.$storage.get('noonArr')==undefined){
|
||
this.noonArr = [];
|
||
} else {
|
||
this.noonArr = this.$storage.get('noonArr');
|
||
this.animate = true;
|
||
}
|
||
}
|
||
this.showLoading_five = false;
|
||
},
|
||
// 获取当日宝宝生日
|
||
async babyBirthday() {
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.babyBirthday,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentGuid: this.$storage.get('EquipmentID')
|
||
},
|
||
});
|
||
this.babyBirthdayData = data.data.count;
|
||
this.$storage.set('babyBirthdayData',this.babyBirthdayData)
|
||
} else {
|
||
this.babyBirthdayData = this.$storage.get('babyBirthdayData');
|
||
}
|
||
|
||
},
|
||
// 班级动态
|
||
async dynamicPicture() {
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.dynamicPicture,
|
||
methods: "post",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID')
|
||
},
|
||
});
|
||
// if(data.data.data!=null){
|
||
// this.classImgArr = data.data.data.PictureUrls;
|
||
// this.$storage.set('classImgArr',this.classImgArr);
|
||
// }
|
||
} else {
|
||
// if(this.$storage.get('classImgArr')!=undefined){
|
||
// this.classImgArr = this.$storage.get('classImgArr');
|
||
// }
|
||
}
|
||
this.showLoading_four = false;
|
||
},
|
||
// 班级情况
|
||
async classStatusEv() {
|
||
if(this.$storage.get('network')){
|
||
this.showError = false;
|
||
let data = await this.$axios({
|
||
url: this.$https.classStatus,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID')
|
||
},
|
||
});
|
||
if(data.data.code==200){
|
||
let classInfo = data.data.data;
|
||
this.className = classInfo.ClassName;
|
||
this.$storage.set('className',this.className);
|
||
let newTeacher = [];
|
||
classInfo.Teachers.forEach(item=>{
|
||
newTeacher.push(item.TeacherName);
|
||
})
|
||
// 老师
|
||
this.teacherName = newTeacher.join(' ');
|
||
this.$storage.set('teacherName',this.teacherName);
|
||
// 班级人数
|
||
this.classNum = classInfo.StudentCount;
|
||
this.$storage.set('classNum',this.classNum);
|
||
// 实到、未到、请假
|
||
this.daoArr = [
|
||
{num:classInfo.Signed,title:'实到'},
|
||
{num:classInfo.NotSigned,title:'未到'},
|
||
{num:classInfo.Holiday,title:'请假'},
|
||
];
|
||
this.$storage.set('daoArr',this.daoArr);
|
||
// 班级guid
|
||
this.classGuid = classInfo.ClassGuid;
|
||
this.$storage.set('classGuid',this.classGuid);
|
||
// 调取宝宝提醒
|
||
this.remindEv();
|
||
}
|
||
} else {
|
||
if(this.$storage.get('className')!=undefined){
|
||
this.className = this.$storage.get('className');
|
||
} else {
|
||
this.showError = true;
|
||
}
|
||
if(this.$storage.get('teacherName')!=undefined){
|
||
this.teacherName = this.$storage.get('teacherName');
|
||
}
|
||
if(this.$storage.get('classNum')!=undefined){
|
||
this.classNum = this.$storage.get('classNum');
|
||
}
|
||
if(this.$storage.get('daoArr')!=undefined){
|
||
this.daoArr = this.$storage.get('daoArr');
|
||
}
|
||
if(this.$storage.get('classGuid')!=undefined){
|
||
this.classGuid = this.$storage.get('classGuid');
|
||
}
|
||
}
|
||
this.showLoading_one = false;
|
||
},
|
||
// 宝宝提醒
|
||
async remindEv() {
|
||
if(this.$storage.get('network')){
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.remind,
|
||
methods: "post",
|
||
params: {
|
||
EquipmentID: this.$storage.get('EquipmentID'),
|
||
page:1,
|
||
limit:100,
|
||
ClassGuid:this.classGuid
|
||
},
|
||
});
|
||
this.babyNotice = data.data.count;
|
||
this.$storage.set('babyNotice',this.babyNotice)
|
||
} else {
|
||
this.babyNotice = this.$storage.get('babyNotice');
|
||
}
|
||
},
|
||
plusReady(){
|
||
var device_type = navigator.userAgent;//获取userAgent信息
|
||
var that = this;
|
||
if(plus.networkinfo.getCurrentType()!=1){
|
||
that.$storage.set('network',true);
|
||
}
|
||
that.requestEv();
|
||
//网络更改
|
||
document.addEventListener( "netchange", function(res) {
|
||
var network = plus.networkinfo.getCurrentType();
|
||
if(network == 1) {
|
||
that.isNetwork = true;
|
||
that.$storage.set('network',false);
|
||
that.onLine = false;
|
||
}else {
|
||
that.activeIndex = '-1';
|
||
setTimeout(()=>{
|
||
that.activeIndex = that.cunIndex;
|
||
},100)
|
||
that.isNetwork = false;
|
||
that.$storage.set('network',true);
|
||
that.onLine = true;
|
||
}
|
||
})
|
||
},
|
||
requestEv(){
|
||
this.babyRecipeEv();
|
||
this.schedulingWeb();
|
||
this.babyBirthday();
|
||
this.dynamicPicture();
|
||
this.notice();
|
||
},
|
||
},
|
||
mounted() {
|
||
clearInterval(this.monitorTimer);
|
||
clearInterval(this.chuTime);
|
||
this.chuTime = setInterval(()=>{
|
||
if(this.animate){
|
||
this.scrollEv()
|
||
clearInterval(this.chuTime);
|
||
}
|
||
},1000)
|
||
// 清除班级人数心跳
|
||
clearInterval(this.classTimer);
|
||
// 班级详情
|
||
this.classStatusEv();
|
||
this.classTimer = setInterval(()=>{
|
||
this.classStatusEv();//班级人数心跳
|
||
},1000*60)
|
||
setTimeout(()=>{
|
||
this.plusReady();
|
||
// 视频
|
||
this.getVideo();
|
||
},500)
|
||
// 清除班级人数心跳
|
||
clearInterval(this.swiperTime);
|
||
this.swiperTime = setInterval(()=>{
|
||
this.getVideo();
|
||
},1000*6*5)
|
||
setTimeout(()=>{
|
||
this.timer = setInterval(()=>{
|
||
// 宝宝提醒
|
||
this.remindEv();
|
||
// 通知公告
|
||
this.notice();
|
||
// 生日提醒
|
||
this.babyBirthday();
|
||
},1000*60)
|
||
},5000)
|
||
|
||
},
|
||
};
|
||
</script> |