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: 18.1px;">DU 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 || '../../static/weather/5.png'" 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：{{classCardId}}</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 style="position: fixed;background-color: rgba(0,0,0,.5);top: 120px;left: 0;right: 0;bottom: 0;z-index: 10000;">
			<img style="width: 100px;height: 100px;object-fit: cover;" src="https://qqbaby-creating.oss-cn-beijing.aliyuncs.com/1.jpg" >
			<img style="width: 100px;height: 100px;object-fit: cover;" src="https://qqbaby-creating.oss-cn-beijing.aliyuncs.com/2.jpg" >
			<img style="width: 100px;height: 100px;object-fit: cover;" src="https://qqbaby-creating.oss-cn-beijing.aliyuncs.com/3.jpg" >
		</div> -->
	</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: '',
				classCardId: '',
				infoObj: '',
				name: '',
				ver: 0,
				s: '',
				newwidth:document.body.clientWidth,
				newheight:document.body.clientHeight
			}
		},
		// metaInfo: {
		//     title: "页面标题",
		//     meta: [
		// 		{ name: "keywords", content: "页面关键字" },
		// 		{ name: "description", content: "页面描述" },
		//     ],
		// },
		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(`http://47.108.248.86:56688/`,'_blank');
					}
					this.isNetwork = false;
					this.updatemodelapiEv();
					var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
					var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
					var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
					var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
					if (isIE) {
						console.log(isIE);
						var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
						reIE.test(userAgent);
						var fIEVersion = parseFloat(RegExp["$1"]);
						if (fIEVersion == 7) {
							return 7;
						} else if (fIEVersion == 8) {
					 	return 8;
						} else if (fIEVersion == 9) {
							return 9;
						} else if (fIEVersion == 10) {
							return 10;
						} else {
					 	return 6; //IE版本<=7
						}
					} else if (isEdge) {
						return 'edge'; //edge
					} else if (isIE11) {
						return 11; //IE11
					} else {
						return -1; //不是ie浏览器
					}
				}
			},
			// 导航切换
			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;
				}
			},
			// 天气
			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);
						this.$storage.set('orgGuid', modeObj.OrgGuid);
					} 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')
						},
					});
				}
			},
			// 获取设备型号(设备id)
			obtainEv() {
				let Build = plus.android.importClass("android.os.Build");
				let serial = Build.SERIAL;
				this.$storage.set('EquipmentID',Build.SERIAL);
				// this.$storage.set('EquipmentID','B520P2RXM0');
				this.classCardId = this.$storage.get('EquipmentID');
				this.weatherEv();
				this.introduce();
				this.classcardByIdEv();
				setInterval(() => {
					this.classcardByIdEv();
					this.introduce();
				}, 1000 * 60)
			},
			plusReady() {
				var that = this;
				// 手机有效
				that.obtainEv();
				if(plus.networkinfo.getCurrentType()!=1){
					that.$storage.set('network', true);
					that.onLine = true;
				} else {
					that.onLine = false;
				}
				//网络更改
				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;
					}
				})
			},
			// logo图标
			async introduce() {
				if (this.$storage.get('network')) {
					this.showError = false;
					this.logoImg = this.$storage.get('logoImg');
					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;
			setTimeout(() => {
				that.plusReady();
			}, 500)
		}
	}
</script>