提交更新

src/pages/SchoolReport/SchoolReport.vue

@@ -46,15 +46,21 @@
 					<view class="school-report-context-tab-item">
 						<view v-if="isService" class="school-report-context-tab-item-one"
 							:class="tabIndex==1?'active':''" @tap="tabTap(1)">
-							<text>消费报告</text>
+							<view class="tab-title"><text>消费报告</text></view>
+							<view :class="tabIndex==1?'active-bottomline':''">
+							</view>
 						</view>
 						<view v-if="isAttendanceService" class="school-report-context-tab-item-one"
 							:class="tabIndex==2?'active':''" @tap="tabTap(2)">
-							<text>出入校报告</text>
+							<view class="tab-title"><text>出入校报告</text></view>
+							<view :class="tabIndex==2?'active-bottomline':''">
+							</view>
 						</view>
 						<view v-if="isPubTalkService" class="school-report-context-tab-item-one"
 							:class="tabIndex==3?'active':''" @tap="tabTap(3)">
-							<text>公话报告</text>
+							<view class="tab-title"><text>公话报告</text></view>
+							<view :class="tabIndex==3?'active-bottomline':''">
+							</view>
 						</view>
 					</view>
 					<view class="school-report-context-tab-item-two">
@@ -72,7 +78,8 @@
 				<view :class="['consumer-report-bgImg','attendance-report-bgImg','pubTalk-report-bgImg'][tabIndex-1]">
 				</view>
 				<view class="school-report-context-card">
-					<view class="school-report-context-card-one" :style="{height:[598,256,525][tabIndex-1]+'rpx'}">
+					<view class="school-report-context-card-one"
+						:style="{height:[598,256,pubTalkSummaryHeight][tabIndex-1]+'rpx'}">
 						<view :class="['consumer-report-img','attendance-report-img','pubTalk-report-img'][tabIndex-1]">
 						</view>
 						<!-- 消费报告 -->
@@ -131,7 +138,7 @@
 						<view v-show="tabIndex==2" class="attendance-report-context-card-one-context">
 							<view class="attendance-report-context-card-one-context-item">
 								<text v-if="attendanceReport.abnormalNum&&attendanceReport.abnormalNum!=-1">共<text
-										class="txt-important">{{attendanceReport.abnormalNum}}</text>天出勤异常，请及时关注</text>
+										class="txt-important">{{attendanceReport.abnormalNum}}</text>天出入异常，请及时关注</text>
 								<text v-else-if="attendanceReport.abnormalNum==-1">风雨无阻上学路,继续加油哦</text>
 								<text v-else>恭喜<text
 										class="txt-important">{{userInfo.userName}}</text>荣获全勤好学生，风雨无阻上学路</text>
@@ -369,13 +376,13 @@
 					<view v-show="tabIndex==2" class="attendance-report-context-card-two">
 						<view class="school-report-context-card-title">
 							<view class="school-report-context-card-title-img">
-								<text>出勤情况</text>
+								<text>出入校情况</text>
 							</view>
 						</view>
 						<view class="attendance-report-context-card-two-conclusion">
 							<view class="attendance-report-context-card-two-conclusion-txt">
 								<text v-if="attendanceReport.abnormalNum!=-1">本{{['月','周'][reportTypeIndex]}}共<text
-										class="abnormal-days">{{attendanceReport.abnormalNum}}</text>天出勤异常</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">
@@ -402,14 +409,16 @@
 								<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-orange">早退</span>
 									<span v-if="item.topInfo=='冠军'" class="mark-yellow">冠军</span>
+									<span v-if="item.topInfo=='进步'" class="mark-yellow">进步</span>
 								</template>
 							</van-calendar>
 						</view>
 					</view>
-					<view v-if="tabIndex==2&&attendanceReportDatail.length" class="attendance-report-context-details">
+					<view v-if="tabIndex==2" class="attendance-report-context-details"
+						:style="{height:attendanceReportDatail.length?858:620+'rpx',overflow:attendanceReportDatail.length?'scroll':'none',top:attendanceReportDatail.length?-30:0+'rpx'}">
 						<view v-for="(detailItem,detailIndex) in attendanceReportDatail" :key="detailIndex">
 							<view v-if="detailItem.attendIntervalType&&detailItem.attendIntervalType!=-1"
 								class="attendance-report-context-card-two-details">
@@ -433,6 +442,8 @@
 								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">
+										</view>
 										<view class="attendance-report-context-card-two-details-time-txt txt-details">
 											<text>未设置考勤时间</text>
 										</view>
@@ -442,7 +453,7 @@
 									</view>
 								</view>
 							</view>
-							<view class="attendance-report-context-card-three">
+							<view v-if="attendanceReportDatail.length" class="attendance-report-context-card-three">
 								<view v-for="(item,index) in detailItem.attendDetailReportDTOList" :key="index">
 									<view class="attendance-report-details">
 										<view class="dashed-line-box">
@@ -474,17 +485,26 @@
 															<text>早到冠军</text>
 														</view>
 													</view>
+													<view v-else-if="item.describeContent=='非常不错哦，比昨天早到'"
+														class="early-champions" style="width: 368rpx">
+														<view class="progress-img">
+														</view>
+														<view class="early-champions-txt">
+															<text>非常不错哦，比昨天早到</text>
+														</view>
 													</view>
 												</view>
-											<view class="attendance-report-details-img-item">
 												<view class="attendance-report-time-details">
-													<view v-if="item.describeContent!='当日早到冠军'"
+													<view
+														v-if="item.describeContent!='当日早到冠军'&&item.describeContent!='非常不错哦，比昨天早到'"
 														class="attendance-report-time-details-item">
 														<text>{{item.describeContent}}</text>
 													</view>
 													<view class="attendance-report-time-details-icon">
 													</view>
 												</view>
+											</view>
+											<view class="attendance-report-details-img-item">
 												<view class="attendance-report-details-img-box">
 													<image v-if="item.attendImage" :src="item.attendImage" mode=""
 														@click="imageClick(item.attendImage)">
@@ -496,6 +516,24 @@
 								</view>
 							</view>
 						</view>
+						<view v-if="!attendanceReportDatail.length" class="noAttendanceReportDatail">
+							<view 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">
+										</view>
+										<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">
+										<text>{{attendanceSituations.attendanceDate}}</text>
+									</view>
+								</view>
+							</view>
+							<view class="noAttendanceReportDatailImg">
+							</view>
+						</view>
 					</view>
 					<van-dialog v-model="imageDialogShow" width="620rpx">
 						<view class="image-dialog">
@@ -571,7 +609,7 @@
 					</view>
 				</view>
 			</view>
-			<view v-if="flag==tabIndex" class="no-open"
+			<view v-if="false" class="no-open"
 				:style="{height:[915,845,891][tabIndex-1]+'rpx',top:[1425,1099,1260][tabIndex-1]+'rpx'}">
 				<view class="no-open-solution" @tap="equityPay">
 					<view class="no-open-solution-txt">
@@ -694,7 +732,7 @@
 									<view class="admission-analysis-img">
 									</view>
 									<view class="open-results-items-details-item-txt">
-										<text>出勤情况分析</text>
+										<text>出入情况分析</text>
 									</view>
 								</view>
 								<view class="open-results-items-details-item">
@@ -777,8 +815,20 @@
 				<text>当前为使用高峰期，请稍后再试</text>
 			</view>
 		</view>
-		<van-dialog class="htmlCanvas" id="htmlCanvas" ref="imgCanvas" v-model="dialogShow" :showConfirmButton="false"
-			close-on-click-overlay style="width: 100%; max-height: 80% !important;overflow: scroll">
+		<van-dialog v-model="dialogShow" :showConfirmButton="false" close-on-click-overlay
+			style="width: 90%;background: linear-gradient(225deg, #0ADD80 0%, #04B871 100%);margin: 100rpx 0 0;">
+			<view class="htmlCanvasTxt">
+				<view class="htmlCanvasTxt1">
+					<text>长按下方图片分享</text>
+				</view>
+				<view class="htmlCanvasTxt2">
+					<text>您可以分享给好友，或者保存到手机</text>
+				</view>
+			</view>
+			<view class="htmlCanvasBox">
+				<view class="htmlCanvas" id="htmlCanvas" ref="imgCanvas">
+				</view>
+			</view>
 		</van-dialog>
 	</view>
 	</view>
@@ -879,11 +929,11 @@
 				isOpen: false,
 				isService: false,
 				// 出入校
-				isAttendanceOpen: false,
-				isAttendanceService: false,
+				isAttendanceOpen: true,
+				isAttendanceService: true,
 				// 公话
-				isPubTalkOpen: false,
-				isPubTalkService: false,
+				isPubTalkOpen: true,
+				isPubTalkService: true,
 				flag: 0,
 				memberInfo: {
 					leastAmount: '',
@@ -891,13 +941,14 @@
 					differDay: ''
 				},
 				containerHeight: '',
+				pubTalkSummaryHeight: 525
 			}
 		},
 		mounted() {
-			if (this.isPeakPeriod()) {
-				this.showReport = false;
-				return
-			}
+			// if (this.isPeakPeriod()) {
+			// 	this.showReport = false;
+			// 	return
+			// }
 			this.showReport = true;
 			// 有无消费报告入口
 			if (new Date().getTime() <= new Date('2022/06/30').getTime()) {
@@ -910,12 +961,12 @@
 				})
 			}
 			// 有无进出校、公话入口
-			this.queryMemberServcieItem().then(() => {
-				if (this.queryMemberServcieItemList.length) {
-					this.isAttendanceService = this.queryMemberServcieItemList.indexOf(3002) == -1 ? false : true;
-					this.isPubTalkService = this.queryMemberServcieItemList.indexOf(2002) == -1 ? false : true;
-				}
-			})
+			// this.queryMemberServcieItem().then(() => {
+			// 	if (this.queryMemberServcieItemList.length) {
+			// 		this.isAttendanceService = this.queryMemberServcieItemList.indexOf(3002) == -1 ? false : true;
+			// 		this.isPubTalkService = this.queryMemberServcieItemList.indexOf(2002) == -1 ? false : true;
+			// 	}
+			// })
 			// 消费报告
 			this.queryIsDredgeMember(1002).then(() => {
 				if (this.isOpen) {
@@ -986,6 +1037,7 @@
 					this.diningSituations.notRepastDetails = {};
 				}
 			});
+			this.getPubTalkReport(1);
 		},
 		methods: {
 			// 当天6：30 ~ 9：00，11：30 ~ 12：00， 17：30 ~ 19：00属于高峰期
@@ -1117,7 +1169,8 @@
 						let img = document.createElement("img");
 						img.setAttribute('src', this.imgUrl);
 						img.setAttribute('class', 'htmlCanvasImg');
-						img.style.width = '100vw';
+						img.style.width = '83vw';
+						img.style.borderRadius = '15px';
 						htmlCanvas.appendChild(img);
 					})
 				})
@@ -1198,10 +1251,11 @@
 							.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);
-						// 迟到 早退 旷课
+						const progressList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 7);
+						// 迟到 早退 未到校
 						abnomalList.forEach(item => {
 							if (sum == item.attendDate.slice(0, 10)) {
-								var topInfo = item.abnomalType == 5 ? '旷课' : item.abnomaleName;
+								var topInfo = item.abnomalType == 5 ? '未到校' : item.abnomaleName;
 								day.topInfo = topInfo;
 								day.className = 'late-day';
 							}
@@ -1220,6 +1274,13 @@
 								day.className = 'champion-day';
 							}
 						})
+						// 进步
+						progressList.forEach(item => {
+							if (sum == item.attendDate.slice(0, 10)) {
+								day.topInfo = item.abnomaleName;
+								day.className = 'progress-day';
+							}
+						})
 					}
 				}
 				return day;
@@ -1910,7 +1971,7 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 				}
 			},
 			// 获取公话报告
-			async getPubTalkReport() {
+			async getPubTalkReport(num) {
 				try {
 					let data = await this.$http.post({
 						url: gHost +
@@ -1930,6 +1991,15 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 						return
 					}
 					this.pubTalkReport = data.data || {};
+					if (num == 1) {
+						if (!this.pubTalkReport.talkText5 && !this.pubTalkReport.talkText9) {
+							this.pubTalkSummaryHeight = 275;
+						} else if (this.pubTalkReport.talkText5 && !this.pubTalkReport.talkText9) {
+							this.pubTalkSummaryHeight = 387;
+						} else {
+							this.pubTalkSummaryHeight = 525;
+						}
+					}
 				} catch (e) {
 					//TODO handle the exception
 					console.log(e);
@@ -1973,7 +2043,7 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 					})
 				}
 			},
-			// 出勤情况明细
+			// 出入情况明细
 			async attendanceReprotDatail(currentDate) {
 				try {
 					let data = await this.$http.post({
@@ -2049,11 +2119,11 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 							this.isPubTalkOpen = data.obj.status;
 							if (this.isPubTalkOpen) {
 								this.queryMemberValidTime(serviceItemCode);
-								this.containerHeight = 3290;
+								this.containerHeight = 2765 + this.pubTalkSummaryHeight;
 								this.flag = 0;
 							} else {
 								this.queryMemberConsumerAmount(serviceItemCode);
-								this.containerHeight = 2130;
+								this.containerHeight = 1605 + this.pubTalkSummaryHeight;
 								this.flag = 3;
 							}
 							break;
@@ -2243,6 +2313,37 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 		}
 	}
 
+	.htmlCanvasTxt {
+		height: 154rpx;
+		width: 100%;
+		padding: 42rpx 0 20rpx 29rpx;
+		box-sizing: border-box;
+
+
+		.htmlCanvasTxt1 {
+			font-size: 32rpx;
+			font-family: PingFangSC-Semibold, PingFang SC;
+			font-weight: 600;
+			color: #FFFFFF;
+			line-height: 44rpx;
+		}
+
+		.htmlCanvasTxt2 {
+			font-size: 26rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #FFFFFF;
+			line-height: 44rpx;
+		}
+	}
+
+	.htmlCanvasBox {
+		overflow: scroll;
+		height: 943rpx;
+		border-radius: 30rpx;
+		margin: 0 24rpx 25rpx;
+	}
+
 	.tainer {
 		position: relative;
 
@@ -2370,13 +2471,24 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 						font-family: PingFangSC-Semibold, PingFang SC;
 						color: rgba(0, 0, 0, 0.85);
 						display: flex;
-						justify-content: center;
 						align-items: center;
+						flex-direction: column;
 
 						&.active {
 							background: #E4F9F2;
 							font-weight: 600;
 						}
+
+						.tab-title {
+							margin: 20rpx 0 10rpx;
+						}
+
+						.active-bottomline {
+							width: 49rpx;
+							height: 7rpx;
+							background: #04B871;
+							border-radius: 4rpx;
+						}
 					}
 				}
 
@@ -2409,6 +2521,7 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 					}
 				}
 			}
+
 		}
 
 		.school-report-context {
@@ -2948,19 +3061,25 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 							height: 88rpx;
 							margin-left: 10rpx;
 						}
+
+						/deep/ .progress-day {
+							color: #DAA000;
+							background: url(../../static/images/progress.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: #F5F7F7;
-						padding: 57rpx 39rpx 0 34rpx;
+						padding: 28rpx 39rpx 0 34rpx;
 						box-sizing: border-box;
 
 						.attendance-report-context-card-two-details-item {
@@ -3066,13 +3185,16 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 
 							.attendance-report-details-item-box {
 								width: 83.5%;
+								height: 156rpx;
 								display: flex;
-								justify-content: space-between;
+								flex-direction: column;
 								position: absolute;
 								margin-left: 71rpx;
 
 								.attendance-report-details-item {
 									height: 40rpx;
+									display: flex;
+									justify-content: space-between;
 
 									.attendance-report-time {
 										display: flex;
@@ -3082,6 +3204,10 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 										color: rgba(0, 0, 0, 0.85);
 										line-height: 40rpx;
 										
+										.attendance-report-time-txt{
+											width: 56rpx;
+										}
+
 										.attendance-report-time-item {
 											color: #F9793F;
 											margin: 0 21rpx 0 15rpx;
@@ -3103,6 +3229,13 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 												margin-right: 2rpx;
 											}
 
+											.progress-img {
+												width: 30rpx;
+												height: 29rpx;
+												background: no-repeat center/100% url(../../static/images/progressIcon.png);
+												margin-right: 2rpx;
+											}
+
 											.early-champions-txt {
 												font-size: 24rpx;
 												font-family: PingFangSC-Regular, PingFang SC;
@@ -3111,12 +3244,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 											}
 										}
 									}
-								}
-
-								.attendance-report-details-img-item {
-									display: flex;
-									flex-direction: column;
-									align-items: flex-end;
 								
 									.attendance-report-time-details {
 										width: 212rpx;
@@ -3141,13 +3268,20 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 											width: 21rpx;
 											height: 12rpx;
 											background: no-repeat center/100% url(../../static/images/arrowUp.png);
-											margin-left: 30rpx;
+											// margin-left: 30rpx;
 										}
 									}
 									
-									.attendance-report-details-img-box {
+								}
+
+								.attendance-report-details-img-item {
+									display: flex;
+									align-items: flex-end;
 									width: 155rpx;
 									height: 95rpx;
+									margin: 14rpx 0 0;
+
+									.attendance-report-details-img-box {
 										display: flex;
 										justify-content: flex-end;
 
@@ -3160,6 +3294,21 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
 							}
 						}
 					}
+
+					.noAttendanceReportDatail {
+						height: 620rpx;
+						background: #F5F7F7;
+						margin: -40rpx 0 0;
+						border-radius: 0 0 16rpx 16rpx;
+
+						.noAttendanceReportDatailImg {
+							margin: 78rpx 0 0 107rpx;
+							width: 474rpx;
+							height: 235rpx;
+							background: no-repeat center/100% url(../../static/images/noAttendanceReportDatailData.png);
+						}
+					}
+
 				}
 
 				.image-dialog {