electron-ban-pai/src/components/header.vue

<template>
	<div>
		<!-- 头部导航 start -->
		<div class="header-box">
			<!-- logo -->
			<div class="logo-box">
				<div class="logo">
					<img v-if="logoImg!=''" :src="logoImg" style="object-fit: cover;">
					<div style="display: flex;flex-direction: column;">
						<span style="font-size: 33.8px;">都江堰市机关幼儿园</span>
						<span style="font-size: 16px;">DOU JANG YAN JI GUAN YOU ER YUAN</span>
					</div>
				</div>
			</div>
			<!-- 文本导航 -->
			<div class="title-box">
				<div class="title-item" :class="activeIndex==index?activeTitle:''" v-for="(item,index) in titleArr" 
					:key="index" @click="chooseTitle(index)">{{item}}</div>
			</div>
			<!-- 天气 -->
			<div class="weather-box">
				<img :src="weather" v-if="weather!=''" style="margin-right: 10px;">
				<div>
					<div style="color: #FF9393;">{{date}}</div>
					<div class="weather-three">
						<div>{{temperature}}</div>
						<div>{{time}}</div>
						<div>{{week}}</div>
					</div>
				</div>
			</div>
			<!-- 功能图标 -->
			<div><img @click="clickFun" src="../../static/img/home/icon-set.png"></div>
		</div>
		<!-- 头部导航 end -->
		
		
		
		
		<!-- 首页 -->
		<homepage v-if="activeIndex==0"></homepage>
		<!-- 幼儿园介绍 -->
		<kindIntroduction v-if="activeIndex==1"></kindIntroduction>
		<!-- 宝宝活动 -->
		<babyActivity v-if="activeIndex==2"></babyActivity>
		<!-- 出勤详情 -->
		<attendanceDetail v-if="activeIndex==3"></attendanceDetail>
		<!-- 宝宝相册 -->
		<babyAlbum v-if="activeIndex==4"></babyAlbum>
		<!-- 疫情管理 -->
		<yiqingmanagement v-if="activeIndex==5"></yiqingmanagement>
		
		
		<!-- 底部 -->
		<div class="footer">
			<img src="../../static/img/home/foot-icon.png">
			<img v-if="activeIndex==1" src="../../static/img/kindergartenIntroduce/chahua-01.png" >
			<img v-if="activeIndex==2" src="../../static/img/home/baby-foot.png">
			<img v-if="activeIndex==3" src="../../static/img/attendancedetail/chah.png">
			<img v-if="activeIndex==4 || activeIndex==5" src="../../static/img/babyalbum/chah.png">
		</div>
		<!-- 网络弹框 -->
		<div v-if="isNetwork" class="popu-box">
			<div class="item-row">班排设备ID：*******</div>
			<div class="item-row">网络链接状态：网络监测（{{onLine?'已连接':'已断开'}}）<img v-if="onLine"
					src="../../static/img/home/icon-link.png" style="width: 20px;"></div>
			<div class="item-row">
				<span style="flex-shrink: 0;">班牌显示模式：</span>
				<div class="mode-box">
					<div :class="'new'+index" v-for="(item,index) in modeArr" :key="index" @click="chooseMode(index)">
						<div class="radio-box">
							<span v-if="item.isActive"></span>
						</div>
						{{item.title}}
					</div>
				</div>
			</div>
			<div class="item-row">
				控制操作：
				<div class="refresh-btn" @click="refreshEv">刷新</div> 
				<div class="back-btn" @click="backHomeEv">返回首页</div>
			</div>
		</div>
		<img v-if="wellcomeFlag" @click="closeWellcome" src="../../static/img/babyalbum/wellcome-baby.png" class="wellcome-img" >
	</div>
</template>
<script>
	// 首页
	import homepage from '@/components/homepage.vue';
	// 幼儿园介绍
	import kindIntroduction from '@/components/kindIntroduction.vue';
	// 宝宝活动
	import babyActivity from '@/components/babyActivity.vue';
	// 出勤详情
	import attendanceDetail from '@/components/attendanceDetail.vue';
	// 宝宝相册
	import babyAlbum from '@/components/babyAlbum.vue';
	// 疫情管理
	import yiqingmanagement from '@/components/yiqingmanagement.vue';
	export default {
		components:{
			homepage,
			kindIntroduction,
			babyActivity,
			attendanceDetail,
			babyAlbum,
			yiqingmanagement
		},
		name: 'v-header',
		data() {
			return {
				titleArr: ['首页', '幼儿园介绍', '宝宝活动', '出勤详情', '宝宝相册', '疫情防控'],
				activeIndex: 0,
				cunIndex:0,
				modeArr: [{
						isActive: false,
						title: '欢迎模式'
					},
					{
						isActive: true,
						title: '班牌模式'
					},
					{
						isActive: false,
						title: '大数据模式'
					},
				],
				modeIndex:'-1',
				wellcomeFlag:false,//欢迎模式
				onLine: navigator.onLine,
				list: [],
				city: '',
				date: '', //2021-12-19
				week: '', //星期几
				temperature: '', //天气温度
				time: '', //当前时间
				timer: null,
				currentTemper:1,//
				activeTitle: 'activeTitle',
				isNetwork:false,
				weather:'',
				OrgGuid:'',
				logoImg:'',
			}
		},
		methods: {
			// 关闭欢迎模式
			closeWellcome(){
				this.wellcomeFlag = false;
				this.modeIndex = 2;
				this.clearChoose();
			},
			// 选择班牌显示模式
			chooseMode(e) {
				if(this.onLine){
					this.modeArr.forEach(item => {
						item.isActive = false
					})
					this.modeArr[e].isActive = true;
					if(e==0) {this.modeIndex = 1;this.wellcomeFlag = true;}
					if(e==1) {this.modeIndex = 2;this.wellcomeFlag = false;}
					if(e==2) {
						this.modeIndex = 4;
						this.wellcomeFlag = false;
						// window.open(`../../static/EverydayData/wisdomMedic.html`);
						window.location.href = `./averydaydata/wisdomMedic.html`;
					}
					this.isNetwork = false;
					this.updatemodelapiEv();
				}
			},
			// 导航切换
			chooseTitle(e) {
				this.cunIndex = this.activeIndex = e;
				e == 0 ? this.activeTitle = 'activeTitle' : this.activeTitle = 'activeTitle2';
			},
			// 网络状态
			updateOnlineStatus(e) {
				const {
					type
				} = e;
				this.onLine = type === 'online';
				if (this.onLine) {
					this.refreshEv();
					this.weatherEv();
					this.isNetwork = false;
				} else {
					// this.isNetwork = true;
				}
			},
			// 天气
			// weatherEv() {
			// 	// 获取时间
			// 	this.dateEv();
			// 	this.timer = setInterval(() => {
			// 		this.dateEv();
			// 	}, 1000)
			// 	var that = this;
			// 	this.$axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + '成都').then((res) => {
			// 		let weatherList = res.data.data.forecast;
			// 		// 星期几
			// 		this.week = weatherList[0].date.slice(weatherList[0].date.indexOf('日') + 1);
			// 		// 当天气温
			// 		this.temperature = `${weatherList[0].low.slice(2,-1)} -${weatherList[0].high.slice(2)}`
			// 	}).catch((err) => {
			// 		console.log(err);
			// 	})
			// },
			// 天气
			async weatherEv() {
				// 获取时间
				this.dateEv();
				this.timer = setInterval(() => {
					this.dateEv();
				}, 1000)
				if(this.$storage.get('network')){
					let data = await this.$axios({
						// 调用 serviceAPI
						url: this.$https.weather,
						methods: "get",
						params: {
							EquipmentID: this.$storage.get('EquipmentID'),
						},
					});
					if(data.data.code==200) {
						// 星期几
						this.week = data.data.data.week;
						this.$storage.set('week',this.week);
						let newtempera = data.data.data.weather.result.forecasts[0];
						// 当天气温
						this.temperature = `${newtempera.low}-${newtempera.high}°C`;
						this.$storage.set('temperature',this.temperature);
						this.weather = require(`../../static/img/weather/2.png`);
						let weatherObj = '晴|多云|阴|阵雨|'
						// let text = data.data.data.weather.result.now.text;
						let text = newtempera.text_day;
						if (
							text == "阵雨" ||
							text == "小雨" ||
							text == "中雨" ||
							text == "大雨" ||
							text == "暴雨" ||
							text == "大暴雨" ||
							text == "特大暴雨" ||
							text == "小雨转中雨" ||
							text == "中雨转大雨" ||
							text == "大雨转暴雨" ||
							text == "暴雨转大暴雨" ||
							text == "大暴雨转特大暴雨"
						) {
							this.weather = require(`../../static/img/weather/2.png`); //有雨
						} else if (text == "阴") {
							this.weather = require(`../../static/img/weather/1.png`); //阴天
						} else if (text == "多云") {
							this.weather = require(`../../static/img/weather/3.png`); //多云
						} else if (text == "雷阵雨" || text == "雷阵雨伴有冰雹") {
							this.weather = require(`../../static/img/weather/4.png`); //雷阵雨
						} else if (text == "晴") {
							this.weather = require(`../../static/img/weather/5.png`); //晴
						} else if (
							  text == "雨夹雪" ||
							  text == "小雪" ||
							  text == "中雪" ||
							  text == "大雪" ||
							  text == "暴雪"
						) {
							this.weather = require(`../../static/img/weather/9.png`); //雨夹雪
						}else{
							this.weather = require(`../../static/img/weather/1.png`) //晴
						}
						this.$storage.set('weather',this.weather);
					}
				} else {
					this.weather = this.$storage.get('weather');
					this.week = this.$storage.get('week');
					this.temperature = this.$storage.get('temperature');
					this.time = this.$storage.get('time');
				}
				
			},
			// 当前时间
			dateEv() {
				let date = new Date();
				// 年
				let year = date.getFullYear();
				// 月
				let month = date.getMonth() + 1;
				// 日
				let day = date.getDate();
				this.date = `${year}-${month<10?'0'+ month: month}-${day<10?'0'+ day: day}`;
				// 时
				let hour = date.getHours();
				// 分
				let minute = date.getMinutes();
				// 当前时间
				this.time = `${hour < 10 ? '0'+hour : hour}:${minute < 10 ? '0'+minute : minute}`;
				this.$storage.set('time',this.time);
			},
			// 右上角按钮点击
			clickFun(){
				this.isNetwork = !this.isNetwork;
				this.clearChoose();
				this.classcardByIdEv();
			},
			// 全部不选中
			clearChoose(){
				this.modeArr.forEach(item=>{
					item.isActive = false;
				})
			},
			// 刷新
			refreshEv(){
				this.activeIndex = '-1';
				if(this.onLine) {
					setTimeout(()=>{
						this.isNetwork = false;
					},100)
				}
				setTimeout(()=>{
					this.activeIndex = this.cunIndex;
				},100)
				this.clearChoose();
			},
			// 返回首页
			backHomeEv(){
				this.activeIndex = '-1';
				if(this.onLine) {
					this.isNetwork = false;
				}
				setTimeout(()=>{
					this.activeIndex = 0;
				},100)
				this.clearChoose();
			},
			// 获取班牌模式
			async classcardByIdEv() {
				if(this.$storage.get('network')){
					let data = await this.$axios({
						// 调用 serviceAPI
						url: this.$https.classcardById,
						methods: "get",
						params: {
							EquipmentID: this.$storage.get('EquipmentID'),
						},
					});
					let modeObj = data.data.data;
					if(modeObj!=null){
						this.clearChoose();
						if(modeObj.Mode==1){
							this.modeArr[0].isActive = true;
							this.wellcomeFlag = true;
						} else if(modeObj.Mode==2 || modeObj.Mode==0){
							this.modeArr[1].isActive = true;
							this.wellcomeFlag = false;
						} else if(modeObj.Mode==4){
							this.modeArr[2].isActive = true;
							this.wellcomeFlag = false;
							window.location.href = `./averydaydata/wisdomMedic.html`;
						}
						this.$storage.set('wellcomeFlag',this.wellcomeFlag);
					} else {
						this.modeArr[1].isActive = true;
					}
				} else {
					this.modeArr[1].isActive = true;
					if(this.$storage.get('wellcomeFlag')!=undefined){
						this.wellcomeFlag = this.$storage.get('wellcomeFlag');
					}
				}
				
			},
			// 设置班牌模式
			async updatemodelapiEv() {
				if(this.$storage.get('network')){
					let data = await this.$axios({
						// 调用 serviceAPI
						url: this.$https.updatemodelapi,
						methods: "get",
						params: {
							Mode:this.modeIndex,
							OrgGuid:storage.get('orgGuid')
						},
					});
				}
				// console.log(data.data.data);
			},
			// 获取设备型号(设备id)
			obtainEv(){
				this.weatherEv();
				this.introduce();
				this.classcardByIdEv();
				setInterval(()=>{
					this.classcardByIdEv();
				},1000*60)
			},
			plusReady(){
				var that = this;
				// 手机有效
				// this.$storage.set('EquipmentID',plus.device.imei);
				this.$storage.set('EquipmentID','yaohaotest001');
				that.obtainEv();
				if(plus.networkinfo.getCurrentType()!=1){
					that.$storage.set('network',true);
					that.onLine = true;
				} else {
					that.onLine = false;
				}
				// 网页网络监听有效
				// window.addEventListener('online', this.updateOnlineStatus); //网络由异常到正常时触发
				// window.addEventListener('offline', this.updateOnlineStatus); //网络由正常到异常时触发
				//网络更改
				 document.addEventListener( "netchange", function(res) {
					var network = plus.networkinfo.getCurrentType();
					if(network == 1) {
						// that.isNetwork = true;
						that.$storage.set('network',false);
						that.onLine = false;
						// plus.nativeUI.toast('您的网络已断开');
					}else {
						that.activeIndex = '-1';
						setTimeout(()=>{
							that.activeIndex = that.cunIndex;
						},100)
						that.isNetwork = false;
						that.$storage.set('network',true);
						that.obtainEv();
						that.onLine = true;
						// plus.nativeUI.toast('您的网络已连接');
					}
				})
			},
			// logo图标
			async introduce() {
				if(this.$storage.get('network')){
					this.showError = false;
					let data = await this.$axios({
						// 调用 serviceAPI
						url: this.$https.mechanism,
						methods: "get",
						params: {
							EquipmentID: this.$storage.get('EquipmentID'),
						},
					});
					if(data.data.data!=undefined){
						this.logoImg = data.data.data.Img_Url;
						this.$storage.set('logoImg',this.logoImg);
					}
				} else {
					this.logoImg = this.$storage.get('logoImg');
				}
			},
		},
		mounted() {
			var that = this;
			that.obtainEv();
			if (window.plus) {
				that.plusReady();
			} else {
				document.addEventListener("plusready", that.plusReady, false);
			}
			setTimeout(()=>{
				that.plusReady();
			},1000)
		}
	}
</script>