electron-ban-pai/src/components/homepage.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>