校园报告—门禁报告1

src/pages/SchoolReport/SchoolReport.vue

@@ -124,9 +124,9 @@
 						<!-- 门禁报告 -->
 						<view v-show="tabIndex==2" class="attendance-report-context-card-one-context">
 							<view class="attendance-report-context-card-one-context-item">
-								<text>共<text class="txt-important">4</text>天出勤异常，请及时关注</text>
-								<!-- <text>恭喜<text
-											class="txt-important">{{userInfo.userName}}</text>荣获全勤好学生，风雨无阻上学路</text> -->
+								<text v-if="attendanceReport.abnormalNum">共<text
+										class="txt-important">{{attendanceReport.abnormalNum}}</text>天出勤异常，请及时关注</text>
+								<text v-else>恭喜<text class="txt-important">{{userInfo.userName}}</text>荣获全勤好学生，风雨无阻上学路</text>
 							</view>
 						</view>
 						<!-- 公话报告 -->
@@ -203,10 +203,10 @@
 							</view>
 						</view>
 						<view class="school-report-context-card-two-calendar">
-							<van-calendar :formatter="formatter" :min-date="minDate" :max-date="maxDate"
-								:default-date="minDate" :row-height="44" :show-title="false" :show-subtitle="false"
-								:show-mark="false" :poppable="false" :show-confirm="false" :style="{ height: '575rpx' }"
-								@select="dateSelect" />
+							<van-calendar v-if="tabIndex==1" :formatter="formatter" :min-date="minDate"
+								:max-date="maxDate" :default-date="minDate" :row-height="44" :show-title="false"
+								:show-subtitle="false" :show-mark="false" :poppable="false" :show-confirm="false"
+								:style="{ height: '575rpx' }" @select="dateSelect" />
 						</view>
 						<view class="school-report-context-card-two-details">
 							<view class="school-report-context-card-two-details-item">
@@ -354,7 +354,8 @@
 						</view>
 						<view class="attendance-report-context-card-two-conclusion">
 							<view class="attendance-report-context-card-two-conclusion-txt">
-								<text>本{{['月','周'][reportTypeIndex]}}共<text class="abnormal-days">4</text>天出勤异常</text>
+								<text>本{{['月','周'][reportTypeIndex]}}共<text
+										class="abnormal-days">{{attendanceReport.abnormalNum}}</text>天出勤异常</text>
 							</view>
 							<view class="attendance-report-context-card-two-conclusion-logo">
 								<view class="attendance-report-context-card-two-conclusion-logo-item">
@@ -374,20 +375,24 @@
 							</view>
 						</view>
 						<view class="attendance-report-context-card-two-calendar">
-							<van-calendar :formatter="formatter" :min-date="minDate" :max-date="maxDate"
-								:default-date="minDate" :row-height="44" :show-title="false" :show-subtitle="false"
-								:show-mark="false" :poppable="false" :show-confirm="false" :style="{ height: '575rpx' }"
-								@select="attendanceDateSelect">
+							<van-calendar v-if="tabIndex==2" :formatter="formatter" :min-date="minDate"
+								:max-date="maxDate" :default-date="minDate" :row-height="44" :show-title="false"
+								:show-subtitle="false" :show-mark="false" :poppable="false" :show-confirm="false"
+								:style="{ height: '575rpx' }" @select="attendanceDateSelect">
 								<template #top-info="item">
 									<span v-if="item.topInfo=='请假'" class="mark-green">请假</span>
 									<span v-if="item.topInfo=='迟到'" class="mark-orange">迟到</span>
 									<span v-if="item.topInfo=='旷课'" class="mark-orange">旷课</span>
 									<span v-if="item.topInfo=='早退'" class="mark-orange">早退</span>
+									<span v-if="item.topInfo=='冠军'" class="mark-yellow">冠军</span>
 								</template>
 							</van-calendar>
 						</view>
 					</view>
-					<view v-show="tabIndex==2" class="attendance-report-context-card-two-details">
+					<view v-if="tabIndex==2&&attendanceReportDatail.length" class="attendance-report-context-details">
+						<view v-for="(detailItem,detailIndex) in attendanceReportDatail">
+							<view v-if="detailItem.attendIntervalType&&detailItem.attendIntervalType!=-1"
+								class="attendance-report-context-card-two-details">
 								<view class="attendance-report-context-card-two-details-item">
 									<view class="attendance-report-context-card-two-details-time">
 										<view class="attendance-report-context-card-two-details-time-img">
@@ -396,7 +401,20 @@
 											<text>考勤时间</text>
 										</view>
 										<view class="attendance-report-context-card-two-details-time-txt">
-									<text>08:00-22:00</text>
+											<text>{{detailItem.attendIntervalName}}</text>
+										</view>
+									</view>
+									<view v-if="detailIndex==0" class="attendance-report-context-card-two-details-date">
+										<text>{{attendanceSituations.attendanceDate}}</text>
+									</view>
+								</view>
+							</view>
+							<view v-else-if="detailItem.attendIntervalType==-1"
+								class="attendance-report-context-card-two-details">
+								<view class="attendance-report-context-card-two-details-item">
+									<view class="attendance-report-context-card-two-details-time">
+										<view class="attendance-report-context-card-two-details-time-txt txt-details">
+											<text>未设置考勤时间</text>
 										</view>
 									</view>
 									<view class="attendance-report-context-card-two-details-date">
@@ -404,18 +422,63 @@
 									</view>
 								</view>
 							</view>
-					<view v-show="tabIndex==2" class="attendance-report-context-card-three">
-						<view class="dashed-line-first">
+							<view class="attendance-report-context-card-three">
+								<view v-for="(item,index) in detailItem.attendDetailReportDTOList">
+									<view class="attendance-report-details">
+										<view class="dashed-line-box">
+											<view v-if="index" class="dashed-line">
+											</view>
+											<view v-else class="dashed-line-first">
+											</view>
+											<view v-if="index" class="attendance-report-dot" :style="{border:item.border}">
+											</view>
+											<view v-else class="attendance-report-dot-first"
+												:style="{border:item.border}">
+											</view>
+										</view>
+										<view class="attendance-report-details-item-box"
+											:style="{top: 18+index*170+'rpx'}">
+											<view class="attendance-report-details-item">
+												<view class="attendance-report-time">
+													<view class="attendance-report-time-txt">
+														<text>{{item.iotTypeName}}</text>
 													</view>
-						<view class="attendance-report-dot">
+													<view class="attendance-report-time-item">
+														<text>{{item.timeContent}}</text>
 													</view>
-						<view v-for="(item,index) in tempList">
-							<view class="dashed-line">
+													<view v-if="item.describeContent=='当日早到冠军'" class="early-champions">
+														<view class="early-champions-img">
 														</view>
-							<view class="attendance-report-dot" :style="{border:item.border}">
+														<view class="early-champions-txt">
+															<text>早到冠军</text>
 														</view>
 													</view>
 												</view>
+											</view>
+											<view class="attendance-report-details-img-item">
+												<view class="attendance-report-time-details">
+													<view v-if="item.describeContent!='当日早到冠军'" class="attendance-report-time-details-item">
+														<text>{{item.describeContent}}</text>
+													</view>
+													<view class="attendance-report-time-details-icon">
+													</view>
+												</view>
+												<view class="attendance-report-details-img-box">
+													<image v-if="item.attendImage" :src="item.attendImage" mode="" @click="imageClick(item.attendImage)">
+													</image>
+												</view>
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					<van-dialog v-model="imageDialogShow" width="620rpx">
+						<view class="image-dialog">
+							<image :src="imageDialogSrc" mode=""></image>
+						</view>
+					</van-dialog>
 					<!-- 公话报告 -->
 					<view v-show="tabIndex==3" class="pubTalk-report-context-card-two">
 						<view class="school-report-context-card-title">
@@ -429,7 +492,7 @@
 						<view id="call-number-bar">
 						</view>
 					</view>
-					<view v-show="tabIndex==3&&this.isPubTalkOpen" class="pubTalk-report-context-card-three">
+					<view v-show="tabIndex==3&&isPubTalkOpen" class="pubTalk-report-context-card-three">
 						<view class="school-report-context-card-title">
 							<view class="school-report-context-card-title-img">
 								<text>通话时长</text>
@@ -441,7 +504,7 @@
 						<view id="call-duration-bar">
 						</view>
 					</view>
-					<view v-show="tabIndex==3&&this.isPubTalkOpen" class="pubTalk-report-context-card-four">
+					<view v-show="tabIndex==3&&isPubTalkOpen" class="pubTalk-report-context-card-four">
 						<view class="school-report-context-card-title">
 							<view class="school-report-context-card-title-img">
 								<text>亲子留言</text>
@@ -642,6 +705,7 @@
 				style="width: 100%; max-height: 80% !important;overflow: scroll">
 			</van-dialog>
 		</view>
+	</view>
 </template>
 
 
@@ -710,8 +774,11 @@
 				lineDatas: [],
 				// 门禁报告数据
 				attendanceSituations: {
-					attendanceDate: ''
+					attendanceDate: '',
+					abnomalDateList: [],
 				},
+				imageDialogShow:false,
+				imageDialogSrc:'',
 				// 公话报告数据
 				pubTalkReport: {
 					// 通话次数
@@ -721,6 +788,12 @@
 					// 亲子留言
 					leaveMessageInfoList: []
 				},
+				// 门禁报告数据
+				attendanceReport: {
+					abnormalNum: 0,
+					abnomalDateList: [],
+				},
+				attendanceReportDatail: [],
 				// 会员信息 
 				// 消费
 				isOpen: false,
@@ -741,7 +814,6 @@
 					differDay: ''
 				},
 				containerHeight: '',
-				tempList:[{border:'4rpx solid #F9793F'},{border:'4rpx solid rgba(0, 0, 0, 0.25)'},{border:'4rpx solid #F9793F'}]
 			}
 		},
 		mounted() {
@@ -817,10 +889,12 @@
 			this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
 			this.attendanceSituations.attendanceDate = this.formatDate(this.minDate);
 			this.queryCampusStudentInfo();
-			this.queryNotRepastDetails(this.diningSituations.diningSituationsRequestDate, this.diningSituations
-				.diningSituationsRequestDate, 1);
+			let tmpDate = this.formatDateTwo(this.minDate);
 			this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
-				.dataRangeIndex].endDate, 2);
+				.dataRangeIndex].endDate).then(() => {
+				let today = this.diningSituations.notRepastDetailsDTOS.filter(e => e.repastDate === tmpDate)[0];
+				this.diningSituations.notRepastDetails = today;
+			});
 			this.queryConsumerTrend();
 		},
 		methods: {
@@ -837,7 +911,10 @@
 							this.queryDayConsumerTrend();
 						}
 					})
-				} else if (num == 3) {
+				} else if (num == 2) {
+					this.statisAttendanceAbnormal();
+					this.attendanceReprotDatail(this.dataRangeArr[this.dataRangeIndex].startDate);
+				} else {
 					// this.memberInfo.differDay='';
 					// this.memberInfo.invalidDateStr='';
 					// this.memberInfo.leastAmount='';
@@ -912,20 +989,6 @@
 					this.dataRangeArr = tmpArr;
 				} else {
 					let tmpArr = []
-					if (new Date().getDate() > 5) {
-						for (let i = 0; i <= 11; i++) {
-							let startWeek = dayjs().subtract(i, 'month').startOf('month');
-							let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'month').endOf('month').$d
-								.getTime() ?
-								dayjs().subtract(i, 'month').endOf('month') : dayjs();
-							tmpArr.push({
-								week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
-								weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
-								startDate: startWeek.format("YYYY-MM-DD"),
-								endDate: endWeek.format("YYYY-MM-DD")
-							})
-						}
-					} else {
 					for (let i = 1; i <= 11; i++) {
 						let startWeek = dayjs().subtract(i, 'month').startOf('month');
 						let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'month').endOf('month').$d
@@ -938,7 +1001,6 @@
 							endDate: endWeek.format("YYYY-MM-DD")
 						})
 					}
-					}
 					this.dataRangeArr = tmpArr;
 				}
 				this.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
@@ -947,10 +1009,13 @@
 					this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
 					this.diningSituations.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex]
 						.startDate;
-					this.queryNotRepastDetails(this.diningSituations.diningSituationsRequestDate, this.diningSituations
-						.diningSituationsRequestDate, 1);
+					let tmpDate = this.formatDateTwo(this.minDate);
 					this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
-						.dataRangeIndex].endDate, 2);
+						.dataRangeIndex].endDate).then(() => {
+						let today = this.diningSituations.notRepastDetailsDTOS.filter(e => e.repastDate ===
+							tmpDate)[0];
+						this.diningSituations.notRepastDetails = today;
+					});
 					this.queryConsumerTrend();
 					if (this.isOpen) {
 						this.queryStudentConsumerPreference(1).then(e => this.piechart());
@@ -961,6 +1026,8 @@
 					}
 				} else if (this.tabIndex == 2) {
 					this.attendanceSituations.attendanceDate = this.formatDate(this.minDate);
+					this.statisAttendanceAbnormal();
+					this.attendanceReprotDatail(this.dataRangeArr[this.dataRangeIndex].startDate);
 				} else {
 					this.getPubTalkReport().then(() => {
 						this.$nextTick(() => {
@@ -990,20 +1057,40 @@
 							day.className = 'notice-day'
 						}
 					})
-				} else { // 门禁报告
-					if (sum == '2022-05-04') {
-						day.topInfo = '迟到';
-						day.className = 'late-day';
-					} else if (sum == '2022-05-09') {
-						day.topInfo = '请假';
-						day.className = 'leave-day'
-					} else if (sum == '2022-05-14') {
-						day.topInfo = '旷课';
-						day.className = 'late-day';
-					} else if (sum == '2022-05-16') {
-						day.topInfo = '早退';
+				} else if (this.tabIndex == 2) { // 门禁报告
+					if (this.attendanceReport.abnomalDateList.length) {
+						const abnomalList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 2 || e
+							.abnomalType == 3 || e.abnomalType == 5);
+						const leaveList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 4);
+						const championList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 6);
+						// 迟到 早退 旷课
+						abnomalList.forEach(item => {
+							if (sum == item.attendDate.slice(0, 10)) {
+								var topInfo = item.abnomalType == 5 ? '旷课' : item.abnomaleName;
+								day.topInfo = topInfo;
 								day.className = 'late-day';
 							}
+						})
+						// 请假
+						leaveList.forEach(item => {
+							if (sum == item.attendDate.slice(0, 10)) {
+								day.topInfo = item.abnomaleName;
+								day.className = 'leave-day';
+							}
+						})
+						// 冠军
+						championList.forEach(item => {
+							if (sum == item.attendDate.slice(0, 10)) {
+								day.topInfo = item.abnomaleName;
+								day.className = 'champion-day';
+							}
+						})
+					}
+					// Todos 样式调整
+					if (sum == '2021-11-11') {
+						day.topInfo = '冠军';
+						day.className = 'champion-day';
+					}
 				}
 				return day;
 			},
@@ -1016,11 +1103,13 @@
 			dateSelect(date) {
 				this.diningSituations.diningSituationsDate = this.formatDate(date);
 				var dateStr =
-					`${date.getFullYear()}-${date.getMonth()<9?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;;
-				this.queryNotRepastDetails(dateStr, dateStr, 1);
+					`${date.getFullYear()}-${date.getMonth()<9?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
+				let today = this.diningSituations.notRepastDetailsDTOS.filter(e => e.repastDate === dateStr)[0];
+				this.diningSituations.notRepastDetails = today;
 			},
 			attendanceDateSelect(date) {
 				this.attendanceSituations.attendanceDate = this.formatDate(date);
+				this.attendanceReprotDatail(this.formatDateTwo(date));
 			},
 			piechart: function() {
 				var myChart = echarts.init(document.getElementById('consumer-preferences-pie'));
@@ -1455,8 +1544,7 @@
 						})
 						return
 					}
-					this.userInfo = data.obj;
-
+					this.userInfo = data.obj || {};
 				} catch (e) {
 					//TODO handle the exception
 					console.log(e);
@@ -1468,7 +1556,7 @@
 				}
 			},
 			// 查询就餐情况
-			async queryNotRepastDetails(startDate, endDate, num) {
+			async queryNotRepastDetails(startDate, endDate) {
 				try {
 					let data = await this.$http.get({
 						url: gHost +
@@ -1487,11 +1575,6 @@
 						})
 						return
 					}
-					switch (num) {
-						case 1:
-							this.diningSituations.notRepastDetails = data.obj.notRepastDetailsDTOS[0];
-							break;
-						case 2:
 					this.diningSituations.notRepastDay = data.obj.notRepastDay;
 					this.diningSituations.notRepastDetailsDTOS = data.obj.notRepastDetailsDTOS;
 					this.diningSituations.cateringLevel = data.obj.cateringLevel;
@@ -1504,8 +1587,6 @@
 						'早餐吃好，一天才能活力满满哦',
 						'及时补充能量，下午才能集中精神学习哦', '晚餐好好吃，身体才能更健康'
 					][this.diningSituations.cateringLevel - 1] : '';
-							break;
-					}
 				} catch (e) {
 					//TODO handle the exception
 					console.log(e);
@@ -1683,6 +1764,83 @@
 					})
 				}
 			},
+			// 门禁报告
+			// 统计异常天数
+			async statisAttendanceAbnormal() {
+				try {
+					let data = await this.$http.post({
+						url: gHost +
+							'/report-push/attemdance-report/statisAttendanceAbnormal'
+					}, {
+						schoolId: getQueryParams('schoolId'),
+						userId: getQueryParams('userId'),
+						startTime: this.dataRangeArr[this.dataRangeIndex].startDate,
+						endTime: this.dataRangeArr[this.dataRangeIndex].endDate,
+						// classId:this.userInfo.classId
+						classId: 16186
+					})
+					if (data.code != 200) {
+						uni.showToast({
+							icon: "none",
+							mask: true,
+							title: data.msg
+						})
+						return
+					}
+					this.attendanceReport = data.data || {};
+				} catch (e) {
+					//TODO handle the exception
+					console.log(e);
+					uni.showToast({
+						icon: "none",
+						mask: true,
+						title: e.message
+					})
+				}
+			},
+			// 出勤情况明细
+			async attendanceReprotDatail(currentDate) {
+				try {
+					let data = await this.$http.post({
+						url: gHost +
+							'/report-push/attemdance-report/attendanceReprotDatail'
+					}, {
+						schoolId: getQueryParams('schoolId'),
+						userId: getQueryParams('userId'),
+						currentDate,
+						// classId:this.userInfo.classId
+						classId: 16186
+					})
+					if (data.code != 200) {
+						uni.showToast({
+							icon: "none",
+							mask: true,
+							title: data.msg
+						})
+						return
+					}
+					var tempList = data.data;
+					if (tempList.length) {
+						tempList.forEach(e => {
+							e.attendDetailReportDTOList.forEach(c => {
+								c.border = c.describeContent&&c.describeContent!='当日早到冠军' ? '4rpx solid #F9793F' :
+									'4rpx solid rgba(0, 0, 0, 0.25)'
+							})
+						})
+						this.attendanceReportDatail = tempList || [];
+					} else {
+						this.attendanceReportDatail = [];
+					}
+				} catch (e) {
+					//TODO handle the exception
+					console.log(e);
+					uni.showToast({
+						icon: "none",
+						mask: true,
+						title: e.message
+					})
+				}
+			},
 			// 是否开通会员功能
 			async queryIsDredgeMember(serviceItemCode, num) {
 				try {
@@ -1842,6 +2000,10 @@
 					}
 				});
 			},
+			imageClick:function(src){
+				this.imageDialogSrc=src;
+				this.imageDialogShow=true;
+			},
 		},
 	}
 </script>
@@ -2456,6 +2618,10 @@
 							color: #F9793F;
 						}
 
+						.mark-yellow {
+							color: #DAA000;
+						}
+
 						/deep/ .van-calendar__weekdays {
 							background: #F7FAF8;
 						}
@@ -2524,14 +2690,27 @@
 							height: 88rpx;
 							margin-left: 10rpx;
 						}
+
+						/deep/ .champion-day {
+							color: #DAA000;
+							background: url(../../static/images/champion.png) no-repeat -4rpx center/100%;
+							border-radius: 22rpx;
+							width: 88rpx;
+							height: 88rpx;
+							margin-left: 10rpx;
 						}
 					}
+				}
+
+				.attendance-report-context-details {
+					height: 858rpx;
+					overflow: scroll;
 
 					.attendance-report-context-card-two-details {
 						position: relative;
 						top: -30rpx;
 						height: 146rpx;
-					background: no-repeat center/100% url(../../static/images/diningSituations.png);
+						background: #F5F7F7;
 						padding: 57rpx 39rpx 0 34rpx;
 						box-sizing: border-box;
 
@@ -2582,27 +2761,37 @@
 					}
 
 					.attendance-report-context-card-three {
-					height: 742rpx;
 						background: #F5F7F7;
 						margin: -40rpx 0 0;
+						position: relative;
+						border-radius: 0 0 16rpx 16rpx;
+						
+						.attendance-report-details {
+							width: 572rpx;
+							height: 168rpx;
+
+							.dashed-line-box {
+								position: relative;
+								top: -40rpx;
+								width: 16rpx;
+								height: 212rpx;
 
 								.dashed-line-first {
 									width: 2rpx;
 									height: 66rpx;
 									border-left: 2rpx dashed rgba(0, 0, 0, .25);
-						position: relative;
-						top: -40rpx;
+									position: absolute;
 									left: 44rpx;
 								}
 
-					.attendance-report-dot {
+								.attendance-report-dot-first {
 									width: 16rpx;
 									height: 16rpx;
 									background: #FFFFFF;
 									border: 4rpx solid rgba(0, 0, 0, 0.25);
 									border-radius: 16rpx;
-						position: relative;
-						top: -40rpx;
+									position: absolute;
+									top: 66rpx;
 									left: 34rpx;
 								}
 
@@ -2610,9 +2799,126 @@
 									width: 2rpx;
 									height: 146rpx;
 									border-left: 2rpx dashed rgba(0, 0, 0, .25);
-						position: relative;
-						left:44rpx;
-						top:-40rpx;
+									position: absolute;
+									left: 44rpx;
+									top: -76rpx;
+								}
+
+								.attendance-report-dot {
+									width: 16rpx;
+									height: 16rpx;
+									background: #FFFFFF;
+									border: 4rpx solid rgba(0, 0, 0, 0.25);
+									border-radius: 16rpx;
+									position: absolute;
+									top: 70rpx;
+									left: 34rpx;
+								}
+							}
+
+							.attendance-report-details-item-box {
+								width: 83.5%;
+								display: flex;
+								justify-content: space-between;
+								position: absolute;
+								margin-left: 71rpx;
+
+								.attendance-report-details-item {
+									height: 40rpx;
+
+									.attendance-report-time {
+										display: flex;
+										font-size: 28rpx;
+										font-family: PingFangSC-Medium, PingFang SC;
+										font-weight: 500;
+										color: rgba(0, 0, 0, 0.85);
+										line-height: 40rpx;
+
+										.attendance-report-time-item {
+											color: #F9793F;
+											margin:0 21rpx 0 15rpx;
+										}
+										
+										.early-champions{
+											width: 183rpx;
+											background: #F7E4BB;
+											border-radius: 20rpx;
+											padding: 0 26rpx 0 23rpx;
+											box-sizing: border-box;
+											display: flex;
+											align-items: center;
+											
+											.early-champions-img{
+												width: 32rpx;
+												height: 29rpx;
+												background: no-repeat center/100% url(../../static/images/champions.png);
+												margin-right: 2rpx;
+											}
+											.early-champions-txt{
+												font-size: 24rpx;
+												font-family: PingFangSC-Regular, PingFang SC;
+												font-weight: 400;
+												color: #916610;
+											}
+										}
+									}
+								}
+
+								.attendance-report-details-img-item {
+									display: flex;
+									flex-direction: column;
+									align-items: flex-end;
+
+									.attendance-report-time-details {
+										width: 212rpx;
+										display: flex;
+										align-items: center;
+										justify-content: flex-end;
+										margin: 0 0 11rpx;
+
+										.attendance-report-time-details-item {
+											font-size: 28rpx;
+											font-family: PingFangSC-Regular, PingFang SC;
+											font-weight: 400;
+											color: #F9793F;
+											line-height: 40rpx;
+											width: 165rpx;
+											height: 40rpx;
+											display: flex;
+											justify-content: flex-end;
+										}
+
+										.attendance-report-time-details-icon {
+											width: 21rpx;
+											height: 12rpx;
+											background: no-repeat center/100% url(../../static/images/arrowUp.png);
+											margin-left: 30rpx;
+										}
+									}
+
+									.attendance-report-details-img-box {
+										width: 155rpx;
+										height: 95rpx;
+										display: flex;
+										justify-content: flex-end;
+
+										image {
+											width: 100%;
+											height: 100%;
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+				
+				.image-dialog{
+					width: 620rpx;
+					height: 800rpx;
+					image{
+						width: 100%;
+						height: 100%;
 					}
 				}