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

<template>
	<div>
		<!-- 头部导航 start -->
		<div class="header-box">
			<!-- logo -->
			<div class="logo-box">
				<div class="logo">
					<img src="../assets/home/logo.png">
					<div>都江堰市机关幼儿园</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="../assets/weather/1.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="../assets/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="../assets/home/foot-icon.png">
			<img v-if="activeIndex==1" src="../assets/kindergartenIntroduce/chahua-01.png" >
			<img v-if="activeIndex==2" src="../assets/home/baby-foot.png">
			<img v-if="activeIndex==3" src="../assets/attendancedetail/-s-插画.png">
			<img v-if="activeIndex==4 || activeIndex==5" src="../assets/babyalbum/-s-插画.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="../assets/home/icon-link.png" style="width: 20px;"></div>
			<div class="item-row">
				<span style="flex-shrink: 0;">班牌显示模式：</span>
				<div class="mode-box">
					<div 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>
	</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: true,
						title: '欢迎模式'
					},
					{
						isActive: false,
						title: '班牌模式'
					},
					{
						isActive: false,
						title: '大数据模式'
					},
				],
				onLine: navigator.onLine,
				list: [],
				city: '',
				date: '', //2021-12-19
				week: '', //星期几
				temperature: '', //天气温度
				time: '', //当前时间
				timer: null,
				activeTitle: 'activeTitle',
				isNetwork:false
			}
		},
		methods: {
			// 选择班牌显示模式
			chooseMode(e) {
				this.modeArr.forEach(item => {
					item.isActive = false
				})
				this.modeArr[e].isActive = true;
			},
			// 导航切换
			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.weatherEv();
				}
			},
			// 天气
			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);
				})
			},
			// 当前时间
			dateEv() {
				let date = new Date();
				// 年
				let year = date.getFullYear();
				// 月
				let month = date.getMonth() + 1;
				// 日
				let day = date.getDate();
				this.date = `${year}-${month}-${day}`;
				// 时
				let hour = date.getHours();
				// 分
				let minute = date.getMinutes();
				// 当前时间
				this.time = `${hour < 10 ? '0'+hour : hour}:${minute < 10 ? '0'+minute : minute}`;
			},
			// 右上角按钮点击
			clickFun(){
				this.isNetwork = true;
			},
			refreshEv(){
				this.activeIndex = '-1';
				setTimeout(()=>{
					this.activeIndex = this.cunIndex;
					this.isNetwork = false;
				},100)
			},
			backHomeEv(){
				this.activeIndex = '-1';
				setTimeout(()=>{
					this.activeIndex = 0;
					this.isNetwork = false;
				},100)
			}
		},
		mounted() {
			this.weatherEv();
			window.addEventListener('online', this.updateOnlineStatus); //网络由异常到正常时触发
			window.addEventListener('offline', this.updateOnlineStatus); //网络由正常到异常时触发
		}
	}
</script>