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

<template>
	<div>
		<!-- 主体内容 -->
		<div class="main">
			<!-- 左侧 -->
			<div class="main-left">
				<!-- 班级详情 -->
				<div class="left-one">
					<div class="left-content" v-if="className!=''">
						<div class="left-title">
							<div class="pultitle">班级详情</div>
						</div>
						<div class="second-title">{{className}}</div>
						<div class="line"></div>
						<div class="three-content">
							<div>老师：{{teacherName}}</div>
							<div>班级人数：{{classNum}}</div>
						</div>
						<div class="line"></div>
						<div class="left-last">
							<div v-for="(item,index) in daoArr" :key="index">
								<div>{{item.num}}</div>
								<div>{{item.title}}</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 宝宝食谱 -->
				<div class="left-one">
					<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>
				</div>
				<!-- 通知公告 -->
				<div class="left-one">
					<div class="left-content">
						<div class="left-title">
							<div class="pultitle">通知公告</div>
						</div>
						<div class="second-title">中二班</div>
						<div class="line"></div>
						<div class="three-content left-notice">
							<div class="clips2">老师：罗敏 宋春</div>
						</div>
						<div class="notice-time">
							<div>2021-11-15</div>
							<div><img src="../../static/img/home/slices.png" />15</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 中部 -->
			<div class="main-center">
				<!-- 班级动态图文 -->
				<div class="center-img-box">
					<div class="center-title">班级动态</div>
					<div class="img-box">
						<img :src="classImgArr[0]" style="object-fit: cover" />
					</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>1</div>
					</div>
					<div class="msg-box">
						<div v-if="babyBirthdayData!=0">生日提醒</div>
						<div>{{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">
						<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="clips3">{{ itemc.Name }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "homepage",
		data() {
			return {
				threeMeals: ["早餐", "午餐", "晚餐"],
				threeMealIndex: 0,
				noticeData: 0,
				babyBirthdayData: 0,
				dynamicPictureData: "",
				noonArr: [],
				className:'',//班级名称
				teacherName:'',//老师姓名
				classNum:'',//班级人数
				daoArr:[],//实到、未到、请假
				classImgArr:[]
			};
		},
		methods: {
			// 早中晚餐切换事件
			chooseMeal(e) {
				this.threeMealIndex = e;
			},
			// 宝宝食谱
			async babyRecipeEv() {
				let data = await this.$axios({
					// 调用 serviceAPI
					url: this.$https.babyRecipe,
					methods: "get",
					params: {
						EquipmentID: "yaohaotest001",
					},
				});
				this.threeMeals = data.data.data;
			},
			// 通知消息数量
			async notice() {
				let data = await this.$axios({
					// 调用 serviceAPI
					url: this.$https.notice,
					methods: "get",
					params: {
						EquipmentID: "yaohaotest001",
					},
				});
				this.noticeData = data.data.count;
			},
			async schedulingWeb() {
				let data = await this.$axios({
					// 调用 serviceAPI
					url: this.$https.schedulingWeb,
					methods: "get",
					params: {
						EquipmentID: "yaohaotest001",
					},
				});
				this.noonArr = data.data.data[0].WeekData;
			},
			// 获取当日宝宝生日
			async babyBirthday() {
				let data = await this.$axios({
					// 调用 serviceAPI
					url: this.$https.babyBirthday,
					methods: "get",
					params: {
						EquipmentGuid: "yaohaotest001",
					},
				});
				this.babyBirthdayData = data.data.count;

			},
			async dynamicPicture() {
				let data = await this.$axios({
					// 调用 serviceAPI
					url: this.$https.dynamicPicture,
					methods: "post",
					params: {
						EquipmentID: "yaohaotest001",
					},
				});
				this.classImgArr = data.data.data.PictureUrls;
			},
			// 班级情况
			async classStatusEv() {
				let data = await this.$axios({
					url: this.$https.classStatus,
					methods: "get",
					params: {
						EquipmentID: "yaohaotest001",
					},
				});
				let classInfo = data.data.data;
				this.className = classInfo.ClassName;
				let newTeacher = [];
				classInfo.Teachers.forEach(item=>{
					newTeacher.push(item.TeacherName);
				})
				// 老师
				this.teacherName = newTeacher.join(' ');
				// 班级人数
				this.classNum = classInfo.StudentCount;
				// 实到、未到、请假
				this.daoArr = [
					{num:classInfo.Signed,title:'实到'},
					{num:classInfo.NotSigned,title:'未到'},
					{num:classInfo.Holiday,title:'请假'},
				];
			},
		},
		mounted() {
			this.babyRecipeEv();
			this.schedulingWeb();
			this.babyBirthday()
			this.dynamicPicture()
			// 班级详情
			this.classStatusEv();
			// 引用mobile-detect文件
			var MobileDetect = require('../utils/mobile-detect.js');
			console.log(navigator.language, '当前系统语言');
			// 判断是不是手机
			if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
				// this.is_telephone = "是";
				console.log("是手机");
			} else {
				// this.is_telephone = "不是";
				console.log("不是手机");
			}
			// 检测是浏览器端还是微信端
			let ua = navigator.userAgent.toLowerCase();
			// 微信端
			if (String(ua.match(/MicroMessenger/i)) === 'micromessenger') {
				console.log('是微信');
				// this.isWechat = true        
			} else {
				// this.isWechat = false
				console.log('不是微信');
			}
			var md = new MobileDetect(navigator.userAgent);
			// 品牌
			console.log(md.mobile(), '手机品牌');
			// 操作系统
			console.log(md.os(), '操作系统');
			var device_type = navigator.userAgent; //获取userAgent信息
			var networkStr = device_type.match(/NetType\/\w+/) ? device_type.match(/NetType\/\w+/)[0] : 'NetType/other';
			networkStr = networkStr.toLowerCase().replace('nettype/', '');
			var networkType;
			switch (networkStr) {
				case 'wifi':
					networkType = 'wifi';
					break;
				case '4g':
					networkType = '4g';
					break;
				case '3g':
					networkType = '3g';
					break;
				case '3gnet':
					networkType = '3g';
					break;
				case '2g':
					networkType = '2g';
					break;
				default:
					networkType = 'other';
			}
			// this.device_network_type = networkType;
			console.log(networkType, '网络类型');
			var os = md.os(); //获取系统
			var model = "";
			if (os == "iOS") { //ios系统的处理
				model = md.mobile();
			} else if (os == "AndroidOS") { //Android系统的处理
				var sss = device_type.split(";");
				var i = sss.contains("Build/");
				if (i > -1) {
					model = sss[i].substring(0, sss[i].indexOf("Build/"));
				}
			}
			console.log(model, '手机型号');

		},
		created() {
			this.notice();
		},
	};
</script>