新增宝宝详情

src/assets/css/electron.css

@@ -395,6 +395,7 @@ img {
 	flex-wrap: wrap;
 	overflow: hidden;
 	overflow-y: scroll;
+	position: relative;
 }
 .attendance-right::-webkit-scrollbar{
 	display: none;
@@ -577,6 +578,25 @@ img {
 .baby-album-box > img {width: 58px;height: 58px;}
 .introduce-img {display: flex;flex-wrap: wrap;}
 .introduce-img img {margin: 10px 10px 0 0;}
+
+.attenddetail-ring{display: flex;width: 100%;margin-left: 40px;font-size: 16px;color: #666666;}
+.top-row {display: flex;align-items: center;}
+.attenddetail-ring >div{margin-right: 90px;}
+.attenddetail-ring >div div:last-child{margin-top: 20px;}
+.attendance-con{
+	font-size: 16px;
+	font-weight: 400;
+	color: #666666;
+	border-top: 1px solid #D3D3D3;
+	padding-top: 15px;
+	margin-top: 15px;
+	margin-bottom: 78px;
+}
+.baby-img01{width: 119px;height: 119px;background: #D3D3D3;border: 5px solid #ECE6FF;border-radius: 50%;}
+.baby-img02{width: 245px;height: 154px;border-radius: 10px;display: flex;justify-content: center;align-items: center;background-color: #F3F3F3;margin-right: 20px;}
+.attend-title {text-align: left;padding-right: 50px;width: 100%;}
+.chengjian{display: flex;margin-top: 5px;font-size: 16px;color: #666666;}
+.chengjian>div{display: flex;align-items: flex-end;width: 50%;line-height: 30px;}
 @media screen and (min-width:768px) and (max-width:1400px) {
 	.header-box {
 		height: 70px;

src/components/attendanceBabuDetail.vue

@@ -0,0 +1,76 @@
+<template>
+	<div style="width: 100%;">
+		<div class="yiqing-title attend-title">何雨桐</div>
+		<img src="../../static/img/kindergartenIntroduce/icon-back.png" class="back-img" @click="backNews">
+		<div class="attendance-con">
+			<div class="top-row">
+				<img src="../../static/img/seconds/tu-01.png" class="baby-img01" alt="">
+				<div class="attenddetail-ring">
+					<div>
+						<div>性别：女</div>
+						<div>班级：中二班</div>
+					</div>
+					<div>
+						<div>生日：2017-08-21</div>
+						<div>考勤卡：20152222</div>
+					</div>
+					<div>
+						<div>家长：母亲 何智刚</div>
+						<div>电话号码：181****258</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="yiqing-title attend-title">今日晨检考勤</div>
+		<div class="attendance-con">
+			<div class="chengjian">
+				<div>
+					<img class="baby-img02" src="../../static/img/seconds/tu-01.png" >
+					<div>
+						<div>入院时间：</div>
+						<div>08:20:04</div>
+					</div>
+				</div>
+				<div>
+					<div class="baby-img02" >
+						<img src="../../static/img/attendancedetail/icon-wu.png" style="width: 156px;height: 106px;" >
+					</div>
+					<div>
+						<div>离院时间：</div>
+						<div>暂无数据展示</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'attendanceBabuDetail',
+		props:{
+			dataObj:{
+				type:Object,
+				default:()=>{
+					return ''
+				}
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			backNews(){
+				this.$emit('backNews',false);
+			}
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

src/components/attendanceDetail.vue

@@ -9,7 +9,8 @@
 				</div>
 			</div>
 			<div class="attendance-right">
-				<div v-if="!isNothing" class="attendance-right-item-box" v-for="(item,index) in babyArr" :key="index">
+				<div v-if="!showDetail" style="display: flex;flex-wrap: wrap;">
+					<div v-if="!isNothing" class="attendance-right-item-box" @click="goDetail(index)" v-for="(item,index) in babyArr" :key="index">
 						<img :src="item.Head_Img" alt="">
 						<span>{{item.DisplayName}}</span>
 						<div :style="{background:['#9C7CFA','#FF9393','#D3D3D3','#F4B52F'][item.CheckResult]}">{{['正常','未到校','离校','请假'][item.CheckResult]}}</div>
@@ -19,36 +20,43 @@
 						<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
 					</div>
 				</div>
+				<attendanceBabuDetail v-if="showDetail" :dataObj="dataObj" @backNews="backNews"></attendanceBabuDetail>
+			</div>
 		</div>
 	</div>
 </template>
 <script>
+	import attendanceBabuDetail from '@/components/attendanceBabuDetail.vue';
 	export default {
+		components:{
+			attendanceBabuDetail
+		},
 		name: 'babyActivity',
 		data() {
 			return {
 				navArr:[
-					{icon:require('../../static/img/attendancedetail/icon-attendancedetail.png'),title:'出勤详情',num:12},
+					{icon:require('../../static/img/attendancedetail/icon-attendancedetail.png'),title:'出勤详情',num:0},
 					{icon:require('../../static/img/attendancedetail/icon-lixiao.png'),title:'离校情况',num:0},
 					{icon:require('../../static/img/attendancedetail/icon-weidao.png'),title:'未到校宝宝',num:0},
 					{icon:require('../../static/img/attendancedetail/icon-qingj.png'),title:'请假宝宝',num:0},
 				],
 				navIndex:0,
-				babyArr:[
+				babyArr:[],
-					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
-					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:1},
-					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:2},
-					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:3},
-					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
-					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
-					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
-					{teatherImg:require('../../static/img/seconds/tu-01.png'),teatherName:'张跑跑',status:0},
-				],
 				isNothing:false,
-				cunArr:[]
+				cunArr:[],
+				showDetail:false,
+				dataObj:''
 			}
 		},
 		methods: {
+			goDetail(e){
+				console.log(e);
+				this.showDetail = true;
+			},
+			// 继承详情返回事件
+			backNews(e){
+				this.showDetail = e;
+			},
 			chooseNavEv(e){
 				this.navIndex = e;
 				if(e==0){
@@ -76,10 +84,26 @@
 				this.navArr[3].num = leftInfo.leaveSchoolNum;
 				this.babyArr = leftInfo.list;
 				this.cunArr = leftInfo.list;
-			}
+			},
+			// 获取出勤详情数量问题
+			async queryattendancebyidEv(){
+				let data = await this.$axios({
+					// 调用 serviceAPI
+					url: this.$https.queryattendancebyid,
+					methods: "get",
+					params: {
+						EquipmentGuid: "yaohaotest001"
+					},
+				});
+				console.log(data.data.data);
+				
+			},
 		},
 		mounted() {
+			// 获取出勤数据
 			this.checkAttendanceNum();
+			// 获取当前学生信息
+			this.queryattendancebyidEv();
 		}
 	}
 </script>

src/components/babyActivity.vue

@@ -25,29 +25,13 @@
 								</div>
 							</div>
 							<!-- 当前活动 -->
-							<div v-for="(item,index) in dangArr" :key="index" class="class-item-box" style="height: 210px;">
+							<div v-for="(item,index) in dangArr.Content" :key="index" class="class-item-box" style="height: 210px;">
 								<div class="teather-title">当前活动</div>
 								<div class="class-active">
 									<label>{{item.TimePart}}</label>
 									<label>{{item.Name}}</label>
 								</div>
 							</div>
-							<!-- 当前活动 -->
-							<div class="class-item-box" style="height: 210px;">
-								<div class="teather-title">当前活动</div>
-								<div class="class-active">
-									<label>13:00-15:00</label>
-									<label>户外体育</label>
-								</div>
-							</div>
-							<!-- 当前活动 -->
-							<div class="class-item-box" style="height: 210px;">
-								<div class="teather-title">当前活动</div>
-								<div class="class-active">
-									<label>13:00-15:00</label>
-									<label>户外体育</label>
-								</div>
-							</div>
 						</div>
 					</div>
 				</div>
@@ -90,19 +74,14 @@
 		data() {
 			return {
 				weekNum:0,
-				dateTime:'2021年12月28日',
+				dateTime:'',
 				className:'',
-				teatherArr:[
+				teatherArr:[],
-					{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
-					{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
-					{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
-					{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
-					{name:'张芳芳',headImg:require('../../static/img/seconds/tu-01.png')},
-				],
 				kebiaoArr:['时间','星期一','星期二','星期三','星期四','星期五'],
 				dataArr:[],
 				isNothing:false,
-				dangArr:[]
+				dangArr:[],
+				timer:null
 			}
 		},
 		methods: {
@@ -135,7 +114,15 @@
 					},
 				});
 				let newData = data.data.data;
-				this.dangArr = newData[0].WeekData;
+				let newDate = new Date();
+				let timeDate = `${newDate.getHours()}.${newDate.getMinutes()}`;
+				if('8.00' <= timeDate && timeDate <= '11.55') {
+					this.dangArr = newData[0].WeekData[0];
+				} else if('11.55' <= timeDate && timeDate <= '15.00') {
+					this.dangArr = newData[0].WeekData[1];
+				} else if('15.00' <= timeDate && timeDate <= '17.00') {
+					this.dangArr = newData[0].WeekData[2];
+				}
 			},
 			// 班级情况
 			async classStatusEv() {
@@ -158,6 +145,13 @@
 			this.schedulingWebEv();
 			// 班级情况
 			this.classStatusEv();
+			// 各一分钟调用一次当前活动
+			this.timer = setInterval(()=>{
+				this.schedulingWebEv();
+			},1000)
+		},
+		destroyed(){
+			clearInterval(this.timer);
 		}
 	}
 </script>