<template>
	<view class="tainer" :style="{height:containerHeight+'rpx'}">
		<view v-if="showReport">
			<view class="school-report-header-bg">
			</view>
			<view class="school-report-header-position">
				<view class="school-report-header">
					<view class="school-report-header-item">
						<view class="user-avatar">
						</view>
						<view class="user-info">
							<view class="user-name">
								<text>{{userInfo.userName}}</text>
							</view>
							<view class="class-name">
								<text>{{userInfo.gradeName}} {{userInfo.className}}</text>
							</view>
						</view>
					</view>
					<view class="school-report-header-item">
						<view class="school-report-screen">
							<view class="school-report-screen-item">
								<view class="school-report-type">
									<picker @change="schoolReportChange" :value="reportTypeIndex"
										:range="reportTypeArr">
										<view class="uni-input">{{reportTypeArr[reportTypeIndex]}}</view>
									</picker>
								</view>
								<view class="triangle">
								</view>
							</view>
							<view class="school-report-screen-item-two">
								<view class="school-report-date">
									<picker @change="dataRangeChange" :value="dataRangeIndex" :range="dataRangeArr"
										range-key="week">
										<view class="uni-input">{{dataRangeArr[dataRangeIndex].weekstr||""}}</view>
									</picker>
								</view>
								<view class="triangle">
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="school-report-context-tab">
					<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)">
							<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)">
							<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)">
							<view class="tab-title"><text>公话报告</text></view>
							<view :class="tabIndex==3?'active-bottomline':''">
							</view>
						</view>
					</view>
					<view class="school-report-context-tab-item-two">
						<view class="share-button" @tap="shareHandler">
							<view class="share-button-img">
							</view>
							<view class="share-button-txt">
								<text>分享</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tabIndex" class="school-report-context">
				<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:[consumerDetailCalculateObj.totalData>0?496:598,256,pubTalkSummaryHeight][tabIndex-1]+'rpx'}">
						<view :class="['consumer-report-img','attendance-report-img','pubTalk-report-img'][tabIndex-1]">
						</view>
						<!-- 消费报告 -->
						<view v-show="tabIndex==1&&consumerDetailCalculateObj.totalData>0"
							class="school-report-context-card-one-context">
							<!-- <view class="school-report-context-card-one-context-item">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="school-report-context-card-one-context-txt">
									<text v-if="diningSituations.cateringLevel">共<text
											class="txt-important">{{diningSituations.notCateringNumber}}</text>次未吃{{diningSituations.notCateringType}},请提醒<text
											class="txt-important">{{userInfo.userName}}</text>
										{{diningSituations.clues}}</text>
									<text v-else>恭喜<text
											class="txt-important">{{userInfo.userName}}</text>荣获“快乐干饭人”称号，快乐要和家人一起分享哦</text>
								</view>
							</view> -->
							<view class="school-report-context-card-one-context-item">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="school-report-context-card-one-context-txt">
									本{{['月','周'][reportTypeIndex]}}就餐<text
										class="txt-important">{{consumerDetailCalculateObj.cateringNumber}}</text>次，未就餐<text
										class="txt-important">{{consumerDetailCalculateObj.notCateringNumber}}</text>次。食堂总消费<text
										class="txt-important">{{consumerDetailCalculateObj.canteenData}}</text>元，生活费总花费<text
										class="txt-important">{{consumerDetailCalculateObj.totalData}}</text>元
								</view>
							</view>
							<view class="school-report-context-card-one-context-item">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="school-report-context-card-one-context-txt">
									<text v-if="isEatLow">正餐消费占比<text
											class="txt-important-two">过低</text>,请及时调整饮食习惯</text>
									<text v-else>饮食较<text class="txt-important-two">均衡</text>，继续保持哦</text>
								</view>
							</view>
							<!-- <view class="school-report-context-card-one-context-item">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="school-report-context-card-one-context-txt">
									消费 <text
										class="txt-important">{{consumerAmountObj.consumergrossamount}}</text>元,超过全校
									<text class="txt-important">{{consumerAmountObj.gtgraderate}}%</text>
									的同学<text v-if="isReasonable">,请及时评估生活费是否合理</text>
								</view>
							</view> -->
							<view class="school-report-context-card-one-context-item">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="school-report-context-card-one-context-txt">
									<text v-if="isAbnormal"><text
											class="txt-important-two">{{consumerTrend.clues}}</text>的消费金额存在异常,请及时关注</text>
									<text v-else>每日消费金额较稳定，继续保持哦</text>
								</view>
							</view>
							<!-- <view class="school-report-context-card-one-context-item">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view v-if="!abnormalStr" class="school-report-context-card-one-context-txt">
									早、中、晚餐就餐时间较稳定，按时吃饭，自律如昔，你就赢了大多数人
								</view>
								<view v-else class="school-report-context-card-one-context-txt">
									<text class="txt-important">{{abnormalStr}}</text>的就餐时间跟同班同学相差超20分钟，如果快乐很难，那么按时吃饭
								</view>
							</view>
							<view
								class="school-report-context-card-one-context-item school-report-context-card-one-context-item-last">
								<view class="school-report-context-card-one-context-dot">
									<view class="school-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view v-if="!mealPalArr.length" class="school-report-context-card-one-context-txt">
									独立的<text class="txt-important">{{userInfo.userName}}</text>很棒，偶尔也可以叫上朋友一起吃饭哦</text>
								</view>
								<view v-else-if="mealPalArr.length==1"
									class="school-report-context-card-one-context-txt">
									最佳饭友非<text class="txt-important">{{mealPalStr}}</text>莫属，有饭友吃嘛嘛香</text>
								</view>
								<view v-else class="school-report-context-card-one-context-txt">
									最佳干饭组合，赶快叫上<text class="txt-important">{{mealPalStr}}</text>一起吃饭吧</text>
								</view>
							</view> -->
						</view>
						<view v-show="tabIndex==1&&consumerDetailCalculateObj.totalData<=0"
							class="school-report-context-card-one-context">
							<view class="school-report-context-card-one-context-nodata">
								<view class="card-one-nodata-img">
									<image :src="ImgUrl+'SchoolReport/noConsumption.png'" mode=""></image>
								</view>
								<view class="card-one-nodata-txt">
									<text>所选日期内暂无消费</text>
								</view>
							</view>
						</view>

						<!-- 出入校报告 -->
						<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>
								<text v-else-if="attendanceReport.abnormalNum==-1">风雨无阻上学路,继续加油哦</text>
								<text v-else>恭喜<text
										class="txt-important">{{userInfo.userName}}</text>荣获全勤好学生，风雨无阻上学路</text>
							</view>
						</view>
						<!-- 公话报告 -->
						<view v-show="tabIndex==3" class="pubTalk-report-context-card-one-context">
							<view class="pubTalk-report-context-card-one-context-item" v-if="pubTalkReport.talkText1">
								<view class="pubTalk-report-context-card-one-context-dot">
									<view class="pubTalk-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="pubTalk-report-context-card-one-context-txt">
									<text>最喜欢和<text class="txt-important">{{pubTalkReport.talkText1}}</text>沟通，共通话<text
											class="txt-important">{{pubTalkReport.talkText2}}次{{pubTalkReport.talkText3}}分钟</text>，超过全校<text
											class="txt-important">{{pubTalkReport.talkText4}}</text>的同学</text>
								</view>
							</view>
							<view class="pubTalk-report-context-card-one-context-item" v-else>
								<view class="pubTalk-report-context-card-one-context-dot">
									<view class="pubTalk-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="pubTalk-report-context-card-one-context-txt">
									<text class="txt-important">有事没事记得和家人多联系哦~</text>
								</view>
							</view>
							<view class="pubTalk-report-context-card-one-context-item" v-if="pubTalkReport.talkText5">
								<view class="pubTalk-report-context-card-one-context-dot">
									<view class="pubTalk-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="pubTalk-report-context-card-one-context-txt">
									<text>跟<text class="txt-important">{{pubTalkReport.talkText5}}</text>沟通最少，共通话<text
											class="txt-important">{{pubTalkReport.talkText6}}次{{pubTalkReport.talkText7}}分钟</text>，超过全校<text
											class="txt-important">{{pubTalkReport.talkText8}}</text>的同学</text>
								</view>
							</view>
							<view
								class="pubTalk-report-context-card-one-context-item pubTalk-report-context-card-one-context-item-last"
								v-if="pubTalkReport.talkText9">
								<view class="pubTalk-report-context-card-one-context-dot">
									<view class="pubTalk-report-context-card-one-context-dot-item">
									</view>
								</view>
								<view class="pubTalk-report-context-card-one-context-txt">
									<text><text
											class="txt-important">{{pubTalkReport.talkText9}}</text>是默默的守护，有时也不要忘记多和<text
											class="txt-important">{{pubTalkReport.talkText9}}</text>进行交流</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 消费报告 -->
					<view v-show="tabIndex==1" class="school-report-context-card-eight"
						:style="{height:isOpen?'1431rpx':'882rpx'}">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>消费明细</text>
							</view>
						</view>
						<view class="school-report-context-card-eight-conclusion">
							<view v-if="consumerDetailCalculateObj.totalData>0"
								class="school-report-context-card-eight-conclusion-item">
								<text>本{{['月','周'][reportTypeIndex]}}食堂<text
										class="txt-important">{{consumerDetailCalculateObj.canteenData}}</text>元，总消费<text
										class="txt-important">{{consumerDetailCalculateObj.totalData}}</text>元</text>
							</view>
							<view v-else
								class="school-report-context-card-eight-conclusion-item eight-conclusion-nodata">
								<text>所选日期内暂无消费</text>
							</view>
						</view>
						<view class="school-report-context-card-eight-details">
							<view class="consumer-details-header">
								<view v-for="item in consumerDetailsHeaderList" class="consumer-details-header-item">
									<text>{{item}}</text>
								</view>
							</view>
							<view v-if="isOpen" class="consumer-details-body-box">
								<view v-for="(item,index) in campusConsumerDetailObj.campusConsumerDetailList"
									class="consumer-details-body"
									:style="{background:Number.isInteger(index/2)?'#FFFFFF':'#F8F8F7'}">
									<view class="consumer-details-body-item" v-for="(e,i) in item.consumerDetailsArr"
										:class="i?'':'consumer-details-body-data'">
										<text>{{e}}</text>
									</view>
								</view>
							</view>
							<view v-else class="consumer-details-body-box">
								<view class="consumer-details-body" style="background: #FFFFFF;">
									<view class="consumer-details-body-item"
										v-for="(e,i) in campusConsumerDetailObj.campusConsumerDetailList[0].consumerDetailsArr"
										:class="i?'':'consumer-details-body-data'">
										<text>{{e}}</text>
									</view>
								</view>
								<view class="consumer-details-body" style="background: #F8F8F7;">
									<view class="consumer-details-body-item"
										v-for="(e,i) in campusConsumerDetailObj.campusConsumerDetailList[1].consumerDetailsArr"
										:class="i?'':'consumer-details-body-data'">
										<text>{{e}}</text>
									</view>
								</view>
							</view>
							<view v-if="isOpen&&campusConsumerDetailObj.campusConsumerDetailList.length>7"
								class="consumer-details-body-notice-box">
								<view class="consumer-details-body-notice">
									<view class="consumer-details-body-notice-txt">
										<text>滑动查看更多</text>
									</view>
									<view class="consumer-details-body-notice-icon">
										<image :src="ImgUrl+'SchoolReport/slide.png'" mode=""></image>
									</view>
								</view>
							</view>
							<view style="height: 40rpx;"
								v-if="isOpen&&campusConsumerDetailObj.campusConsumerDetailList.length<=7">
							</view>
							<view v-if="isOpen"
								v-for="item in campusConsumerDetailObj.campusConsumerDetailCalculateList"
								class="consumer-details-sum">
								<view v-for="(e,i) in item.consumerDetailsSumArr" class="consumer-details-sum-item"
									:class="i?'':'consumer-details-sum-type'">
									<text :style="{color:item.calculateType=='较上月'?trendColorList[i]:''}"> {{e}} </text>
								</view>
							</view>
						</view>
					</view>
					<view v-show="tabIndex==1&&isOpen" class="school-report-context-card-two"
						:style="{height:consumerDetailCalculateObj.totalData>0?'876rpx':'916rpx'}">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>就餐情况</text>
							</view>
						</view>
						<view v-if="consumerDetailCalculateObj.totalData<=0" class="school-report-context-card-nodata">
							<text>所选日期内暂无消费</text>
						</view>
						<view class="school-report-context-card-two-conclusion"
							:style="{'margin-top': consumerDetailCalculateObj.totalData>0?'40rpx':''}">
							<view class="school-report-context-card-two-conclusion-txt">
								<text
									v-show="consumerDetailCalculateObj.totalData>0">本{{['月','周'][reportTypeIndex]}}共<text
										class="abnormal-days">{{diningSituations.notRepastDay}}</text>天未就餐</text>
							</view>
							<view class="school-report-context-card-two-conclusion-logo">
								<view class="school-report-context-card-two-conclusion-logo-item">
									<view class="school-report-context-card-two-conclusion-logo-item-dot">
									</view>
								</view>
								<view
									class="school-report-context-card-two-conclusion-logo-item school-report-context-card-two-conclusion-logo-item-right">
									<text>未就餐</text>
								</view>
							</view>
						</view>
						<view class="school-report-context-card-two-calendar">
							<van-calendar v-show="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">
								<view class="school-report-context-card-two-details-date">
									<text>{{diningSituations.diningSituationsDate}}</text>
								</view>
								<view class="school-report-context-card-two-details-meal">
									<view class="school-report-context-card-two-details-meal-txt">
										<text>早餐</text>
									</view>
									<view class="school-report-context-card-two-details-meal-logo">
										<view v-if="diningSituations.notRepastDetails.breakfastStatus==1"
											class="school-report-context-card-two-details-meal-img">
											<image :src="ImgUrl+'SchoolReport/eatted.png'" mode=""></image>
										</view>
										<view v-else-if="diningSituations.notRepastDetails.breakfastStatus==0"
											class="school-report-context-card-two-details-meal-noeat">
											<text>缺</text>
										</view>
									</view>
									<view class="school-report-context-card-two-details-meal-txt">
										<text>中餐</text>
									</view>
									<view
										class="school-report-context-card-two-details-meal-logo school-report-context-card-two-details-meal-logo-two">
										<view v-if="diningSituations.notRepastDetails.lunchStatus==1"
											class="school-report-context-card-two-details-meal-img">
											<image :src="ImgUrl+'SchoolReport/eatted.png'" mode=""></image>
										</view>
										<view v-else-if="diningSituations.notRepastDetails.lunchStatus==0"
											class="school-report-context-card-two-details-meal-noeat">
											<text>缺</text>
										</view>
									</view>
									<view class="school-report-context-card-two-details-meal-txt">
										<text>晚餐</text>
									</view>
									<view
										class="school-report-context-card-two-details-meal-logo school-report-context-card-two-details-meal-logo-three">
										<view v-if="diningSituations.notRepastDetails.supperStatus==1"
											class="school-report-context-card-two-details-meal-img">
											<image :src="ImgUrl+'SchoolReport/eatted.png'" mode=""></image>
										</view>
										<view v-else-if="diningSituations.notRepastDetails.supperStatus==0"
											class="school-report-context-card-two-details-meal-noeat">
											<text>缺</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="tabIndex==1&&isOpen" class="school-report-context-card-three">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>消费偏好</text>
							</view>
						</view>
						<view class="school-report-context-card-three-conclusion">
							<view class="school-report-context-card-three-conclusion-item"
								:class="consumerDetailCalculateObj.totalData>0?'':'card-three-conclusion-nodata'">
								<text v-if="consumerDetailCalculateObj.totalData>0">
									<text v-if="isEatLow">正餐消费占比<text
											class="school-report-context-card-three-conclusion-item-describe">过低</text>,请及时调整饮食习惯</text>
									<text v-else>饮食较<text
											class="school-report-context-card-three-conclusion-item-describe">均衡</text>，继续保持哦</text>
								</text>
								<text v-else>
									所选日期内暂无消费
								</text>
							</view>
						</view>
						<view id="consumer-preferences-pie">
						</view>
					</view>
					<view v-show="tabIndex==1&&isOpen" class="school-report-context-card-four">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>生活费额度</text>
							</view>
						</view>
						<view class="school-report-context-card-four-conclusion">
							<view class="school-report-context-card-four-conclusion-item"
								:class="consumerDetailCalculateObj.totalData>0?'':'card-four-conclusion-nodata'">
								<!-- <text>消费<text
										class="consume-total">{{consumerAmountObj.consumergrossamount}}</text>元，超过同年级<text
										class="consume-total">{{consumerAmountObj.gtgraderate}}%</text>的同学<text
										v-if="isReasonable">，请及时评估生活费是否合理</text></text> -->
								<text v-if="consumerDetailCalculateObj.totalData>0">消费总额<text
										class="consume-total">{{livingExpensesAllowance.userConsumeAmount}}</text>元<text
										v-if="livingExpensesAllowance.gradeAverageAmount>0">，同比上{{['月','周'][reportTypeIndex]}}<text
											class="consume-total">{{livingExpensesAllowance.lastMonthRateStr}}
											<van-icon :class="livingExpensesAllowance.lastMonthRate>0?'':'livingCostUp'"
												name="down" />
										</text>
									</text>
								</text>
								<text v-else>
									所选日期内暂无消费
								</text>
							</view>
						</view>
						<view class="consume-total-img">
							<view class="school-average" :style="{height:schoolAverageHeight+'rpx'}">
								<view class="school-average-num">
									<text>{{livingExpensesAllowance.schoolAverageAmount}}</text>
								</view>
								<view class="school-average-img">
									<image :src="ImgUrl+'SchoolReport/greenArrow.png'" mode=""></image>
								</view>
							</view>
							<view class="school-average last-month" :style="{height:gradeAverageHeight+'rpx'}">
								<view class="school-average-num">
									<text>{{livingExpensesAllowance.gradeAverageAmount}}</text>
								</view>
								<view class="school-average-img">
									<image :src="ImgUrl+'SchoolReport/greenArrow.png'" mode=""></image>
								</view>
							</view>
							<view class="user-consume" :style="{height:userConsumeHeight+'rpx'}">
								<view class="user-consume-num">
									<text>{{livingExpensesAllowance.userConsumeAmount}}</text>
								</view>
								<view class="user-consume-img">
									<image :src="ImgUrl+'SchoolReport/yellowArrow.png'" mode=""></image>
								</view>
							</view>
						</view>
						<view class="consume-total-img-des">
							<view class="consume-total-img-des-item" style="margin-left: 20rpx;">
								<text>上上{{['月','周'][reportTypeIndex]}}</text>
							</view>
							<view class="consume-total-img-des-item consume-des">
								<text>上{{['月','周'][reportTypeIndex]}}</text>
							</view>
							<view class="consume-total-img-des-item">
								<text>本{{['月','周'][reportTypeIndex]}}</text>
							</view>
						</view>
					</view>
					<view v-show="tabIndex==1&&isOpen" class="school-report-context-card-five">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>消费趋势</text>
							</view>
						</view>
						<view class="school-report-context-card-five-conclusion">
							<view v-if="consumerDetailCalculateObj.totalData>0"
								class="school-report-context-card-five-conclusion-item">
								<text v-if="isAbnormal"><text
										class="abnormal-date">{{consumerTrend.clues}}</text>的消费金额存在异常,请及时关注</text>
								<text v-else>每日消费金额较稳定，继续保持哦</text>
							</view>
							<view v-else
								class="school-report-context-card-five-conclusion-item card-five-conclusion-nodata">
								<text>所选日期内暂无消费</text>
							</view>
						</view>
						<view id="consumer-trend-line">
						</view>
						<view class="consumer-trend-line-icon">
							<view class="consumer-trend-line-icon-item">
								<view class="consumer-trend-line-icon-logo">
									<view class="consumer-trend-line-icon-logo-left">
									</view>
									<view class="consumer-trend-line-icon-logo-middle">
									</view>
									<view class="consumer-trend-line-icon-logo-right">
									</view>
								</view>
								<view class="consumer-trend-line-icon-txt">
									<text>消费金额</text>
								</view>
							</view>
						</view>
					</view>
					<!-- <view v-show="tabIndex==1&&isOpen" class="school-report-context-card-six">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>就餐时间趋势</text>
							</view>
						</view>
						<view class="school-report-context-card-six-conclusion">
							<view class="school-report-context-card-six-conclusion-item">
								<text v-if="!abnormalStr">早、中、晚餐就餐时间较稳定，按时吃饭，自律如昔，你就赢了大多数人</text>
								<text v-else>
									<text class="abnormal-date">{{abnormalStr}}</text>的就餐时间跟同班同学相差超20分钟，如果快乐很难，那么按时吃饭
								</text>
							</view>
						</view>
						<view v-if="mealtypeArr.indexOf(1)!=-1" class="mealtime-trends">
							<view class="mealtime-trends-theme">
								<view class="meal-type">
									<text>早餐</text>
								</view>
								<view class="user-meal-time">
									<view class="user-meal-time-logo">
										<view class="user-meal-time-logo-left">
										</view>
										<view class="user-meal-time-logo-middle">
										</view>
										<view class="user-meal-time-logo-right">
										</view>
									</view>
									<view class="user-meal-time-txt">
										<text>就餐时间</text>
									</view>
								</view>
								<view class="class-meal-time">
									<view class="user-meal-time-logo">
										<view class="user-meal-time-logo-left" style="background: rgba(0, 0, 0, 0.5)">
										</view>
										<view class="user-meal-time-logo-middle"
											style="border: 3rpx solid rgba(0, 0, 0, 0.5)">
										</view>
										<view class="user-meal-time-logo-right" style="background: rgba(0, 0, 0, 0.5)">
										</view>
									</view>
									<view class="user-meal-time-txt">
										<text>班级集中就餐时间</text>
									</view>
								</view>
							</view>
						</view>
						<view v-if="mealtypeArr.indexOf(1)!=-1" id="breakfast-time-line">
						</view>
						<view v-if="mealtypeArr.indexOf(2)!=-1" class="mealtime-trends"
							style="position: relative;top:-134rpx">
							<view class="mealtime-trends-theme">
								<view class="meal-type">
									<text>中餐</text>
								</view>
								<view class="user-meal-time">
									<view class="user-meal-time-logo">
										<view class="user-meal-time-logo-left">
										</view>
										<view class="user-meal-time-logo-middle">
										</view>
										<view class="user-meal-time-logo-right">
										</view>
									</view>
									<view class="user-meal-time-txt">
										<text>就餐时间</text>
									</view>
								</view>
								<view class="class-meal-time">
									<view class="user-meal-time-logo">
										<view class="user-meal-time-logo-left" style="background: rgba(0, 0, 0, 0.5)">
										</view>
										<view class="user-meal-time-logo-middle"
											style="border: 3rpx solid rgba(0, 0, 0, 0.5)">
										</view>
										<view class="user-meal-time-logo-right" style="background: rgba(0, 0, 0, 0.5)">
										</view>
									</view>
									<view class="user-meal-time-txt">
										<text>班级集中就餐时间</text>
									</view>
								</view>
							</view>
						</view>
						<view v-if="mealtypeArr.indexOf(2)!=-1" id="lunch-time-line">
						</view>
						<view v-if="mealtypeArr.indexOf(3)!=-1" class="mealtime-trends"
							style="position: relative;top:-286rpx">
							<view class="mealtime-trends-theme">
								<view class="meal-type">
									<text>晚餐</text>
								</view>
								<view class="user-meal-time">
									<view class="user-meal-time-logo">
										<view class="user-meal-time-logo-left">
										</view>
										<view class="user-meal-time-logo-middle">
										</view>
										<view class="user-meal-time-logo-right">
										</view>
									</view>
									<view class="user-meal-time-txt">
										<text>就餐时间</text>
									</view>
								</view>
								<view class="class-meal-time">
									<view class="user-meal-time-logo">
										<view class="user-meal-time-logo-left" style="background: rgba(0, 0, 0, 0.5)">
										</view>
										<view class="user-meal-time-logo-middle"
											style="border: 3rpx solid rgba(0, 0, 0, 0.5)">
										</view>
										<view class="user-meal-time-logo-right" style="background: rgba(0, 0, 0, 0.5)">
										</view>
									</view>
									<view class="user-meal-time-txt">
										<text>班级集中就餐时间</text>
									</view>
								</view>
							</view>
						</view>
						<view v-if="mealtypeArr.indexOf(3)!=-1" id="dinner-time-line">
						</view>
					</view>
					<view v-show="tabIndex==1&&isOpen" class="school-report-context-card-seven">
						<view class="school-report-context-card-title">
							<view class="school-report-context-card-title-img">
								<text>饭友分析</text>
							</view>
						</view>
						<view class="school-report-context-card-seven-conclusion">
							<view class="school-report-context-card-seven-conclusion-item">
								<text v-if="!mealPalArr.length">
									独立的<text class="abnormal-date">{{userInfo.userName}}</text>很棒，偶尔也可以叫上朋友一起吃饭哦</text>
								</text>
								<text v-else-if="mealPalArr.length==1">
									最佳饭友非<text class="abnormal-date">{{mealPalStr}}</text>莫属，有饭友吃嘛嘛香</text>
								</text>
								<text v-else>
									最佳干饭组合，赶快叫上<text class="abnormal-date">{{mealPalStr}}</text>一起吃饭吧</text>
								</text>
							</view>
						</view>
						<view class="meal-pal-bar-unit">
							<view class="meal-pal-bar-unit-item">
								<view class="meal-pal-bar-icon">
								</view>
								<view class="meal-pal-bar-txt">
									<text>一起就餐天数</text>
								</view>
							</view>
						</view>
						<view id="meal-pal-bar">
						</view>
					</view> -->
					<!-- 出入校报告 -->
					<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>
							</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>
							</view>
							<view class="attendance-report-context-card-two-conclusion-logo">
								<view class="attendance-report-context-card-two-conclusion-logo-item">
									<view class="attendance-report-context-card-two-conclusion-logo-item-dot leave">
									</view>
									<view class="attendance-report-context-card-two-conclusion-logo-item-txt">
										<text>请假</text>
									</view>
								</view>
								<view class="attendance-report-context-card-two-conclusion-logo-item">
									<view class="attendance-report-context-card-two-conclusion-logo-item-dot">
									</view>
									<view class="attendance-report-context-card-two-conclusion-logo-item-txt">
										<text>异常</text>
									</view>
								</view>
							</view>
						</view>
						<view class="attendance-report-context-card-two-calendar">
							<van-calendar v-show="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>
									<span v-if="item.topInfo=='进步'" class="mark-yellow">进步</span>
								</template>
							</van-calendar>
						</view>
					</view>
					<view v-if="tabIndex==2&&isAttendanceOpen" 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">
								<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 class="attendance-report-context-card-two-details-time-txt">
											<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-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 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">
											<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-time-item">
														<text>{{item.timeContent}}</text>
													</view>
													<view v-if="item.describeContent=='当日早到冠军'" class="early-champions">
														<view class="early-champions-img">
														</view>
														<view class="early-champions-txt">
															<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-time-details">
													<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)">
													</image>
												</view>
											</view>
										</view>
									</view>
								</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">
							<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">
							<view class="school-report-context-card-title-img">
								<text>通话次数</text>
							</view>
						</view>
						<view class="call-number-bar-unit">
							<text>（次）</text>
						</view>
						<view id="call-number-bar">
						</view>
					</view>
					<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>
							</view>
						</view>
						<view class="call-duration-bar-unit">
							<text>（min）</text>
						</view>
						<view id="call-duration-bar">
						</view>
					</view>
					<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>
							</view>
						</view>
						<view class="leave-message-summary" v-if="pubTalkReport.messageText1">
							<text><text class="txt-important">{{pubTalkReport.messageText1}}</text> 最喜欢和你留言，共 <text
									class="txt-important">{{pubTalkReport.messageText2}}</text> 次，超过全校<text
									class="txt-important">{{pubTalkReport.messageText3}}</text>的同学</text>
						</view>
						<view class="leave-message-summary" v-else>
							<text class="txt-important">想家人了可以多多留言哦~</text>
						</view>
						<view class="leave-message-summary leave-message-less-summary"
							v-if="pubTalkReport.messageText4">
							<text><text class="txt-important">{{pubTalkReport.messageText4}}</text> 留言最少，共 <text
									class="txt-important">{{pubTalkReport.messageText5}}</text> 次，超过全校<text
									class="txt-important">{{pubTalkReport.messageText6}}</text>的同学</text>
						</view>
						<view class="leave-message-bar-unit">
							<text>（次）</text>
						</view>
						<view id="leave-message-bar">
						</view>
					</view>
					<view v-if="tabIndex&&flag!=tabIndex" class="school-report-footer">
						<view class="school-report-footer-item">
							<view class="school-report-footer-item-txt">
								<text>到期后将无法查看完整报告</text>
							</view>
							<view class="school-report-validity">
								<text>有效期至<text class="validity-date">{{memberInfo.invalidDateStr}}</text>,剩余<text
										class="validity-date">{{memberInfo.differDay}}天</text></text>
							</view>
						</view>
						<view class="school-report-footer-item-two">
							<view class="school-report-footer-item-btn" @tap="equityPay">
								<text>延长权益</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tabIndex&&flag==tabIndex" class="no-open"
				:style="{height:[860,845,891][tabIndex-1]+'rpx',top:[1426,1099,pubTalkNoopenHeight][tabIndex-1]+'rpx'}">
				<view class="no-open-solution" @tap="equityPay">
					<view class="no-open-solution-txt">
						<text>最低{{memberInfo.leastAmount}}元/天开通，查看完整{{['消费','出入校','公话'][tabIndex-1]}}报告</text>
					</view>
					<view class="no-open-solution-item">
					</view>
				</view>
				<view class="open-results">
					<!-- 消费报告 -->
					<view v-if="tabIndex==1" class="open-results-title consume-open-results-title">
						<text>开通后，掌握消费动态、更省心</text>
					</view>
					<view v-else class="open-results-title">
						<text>开通后，你将解锁</text>
					</view>
					<view class="open-results-items" :class="tabIndex==1?'consume-open-results-items':''">
						<view v-if="tabIndex==2||tabIndex==3" class="open-results-items-summary">
							<view class="summary-item">
								<text>{{['实时推送','音视频通话'][tabIndex-2]}}</text>
							</view>
							<view class="summary-item-icon"
								:class="['attendance-report-icon','pubTalk-report-icon'][tabIndex-2]">
								<text>+</text>
							</view>
							<view class="summary-item">
								<text>{{['月','周'][reportTypeIndex]}}{{['度出入校报告','度公话报告'][tabIndex-2]}}</text>
							</view>
						</view>
						<!-- 消费报告 -->
						<view v-if="tabIndex==1" class="consume-open-results-items-details">
							<view class="consume-open-results-items-details-item">
								<view class="details-item-left">
									<view class="details-item-up">
										<text>孩子是否缺餐？</text>
									</view>
									<view class="details-item-down">
										<view class="dining-situations-img">
										</view>
										<view class="details-item-down-txt">
											<text>【就餐情况】告诉你</text>
										</view>
									</view>
								</view>
								<view class="details-item-left">
									<view class="details-item-up">
										<text>钱花哪里了？</text>
									</view>
									<view class="details-item-down">
										<view class="consumer-trend-img">
										</view>
										<view class="details-item-down-txt">
											<text>【消费明细】告诉你</text>
										</view>
									</view>
								</view>
								<!-- <view class="details-item-left">
									<view class="details-item-up">
										<text>孩子在校交友了？</text>
									</view>
									<view class="details-item-down">
										<view class="meal-pal-img">
										</view>
										<view class="details-item-down-txt">
											<text>【饭友分析】告诉你</text>
										</view>
									</view>
								</view> -->
							</view>
							<view class="consume-open-results-items-details-item">
								<view class="details-item-left">
									<view class="details-item-up">
										<text>消费偏高还是偏低？</text>
									</view>
									<view class="details-item-down">
										<view class="consumer-num-img">
										</view>
										<view class="details-item-down-txt">
											<text>【生活费额度】直观看</text>
										</view>
									</view>
								</view>
								<view class="details-item-left">
									<view class="details-item-up">
										<text>孩子正餐超市消费多？</text>
									</view>
									<view class="details-item-down">
										<view class="consumer-preference-img">
										</view>
										<view class="details-item-down-txt">
											<text>【消费偏好】直观看</text>
										</view>
									</view>
								</view>
							</view>
							<!-- <view class="consume-open-results-items-details-item">
								<view class="details-item-left">
									<view class="details-item-up">
										<text>担心孩子被迫高额消费？</text>
									</view>
									<view class="details-item-down">
										<view class="consumer-trend-img">
										</view>
										<view class="details-item-down-txt">
											<text>【消费趋势】告诉你</text>
										</view>
									</view>
								</view>
								<view class="details-item-left">
									<view class="details-item-up">
										<text>孩子是否准时就餐？</text>
									</view>
									<view class="details-item-down">
										<view class="time-trends-img">
										</view>
										<view class="details-item-down-txt">
											<text>【就餐时间趋势】告诉你</text>
										</view>
									</view>
								</view>
							</view> -->
						</view>
						<view v-else class="open-results-items-details">
							<!-- 出入校报告 -->
							<view v-if="tabIndex==2">
								<view class="open-results-items-details-item">
									<view class="admission-notice-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>出入校通知</text>
									</view>
									<view class="admission-analysis-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>出入情况分析</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="admission-record-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>出入校记录</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="admission-image-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>出入校图片</text>
									</view>
								</view>
							</view>
							<!-- 公话报告 -->
							<view v-else>
								<view class="open-results-items-details-item">
									<view class="video-call-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>视频通话</text>
									</view>
									<view class="communication-advice-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>家庭沟通建议</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="voice-call-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>语音通话</text>
									</view>
									<view class="call-count-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>通话次数分析</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="leave-word-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>亲子留言</text>
									</view>
									<view class="call-duration-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>通话时长分析</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="face-call-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>刷脸通话</text>
									</view>
									<view class="leave-word-analysis-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>家庭留言分析</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="nodata" @click="nodataClick">
			<view class="nodataImg">
				<img style="width: 100%" :src="ImgUrl+'images/purchaseChart.gif'" />
			</view>
			<view class="nodataTxt">
				<text>当前为使用高峰期，请稍后再试</text>
			</view>
		</view>
		<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>
</template>

<script>
	import html2cancas from "html2canvas"
	var gHost = "https://" + window.location.host;
	if (window.location.protocol != "https:") {
		gHost = "https://fpdev.xiaopay.net";
	}
	//获取参数
	function getQueryParams(params) {
		let href = window.location.href
		let query = href.substring(href.indexOf('?') + 1);
		let vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			let pair = vars[i].split("=");
			if (pair[0] == params) {
				return pair[1];
			}
		}
		return (false);
	}
	// 时间处理模块
	import dayjs from 'dayjs'
	import moment from "moment";
	export default {
		name: 'SchoolReport',
		data() {
			return {
				ImgUrl: this.$ImgUrl,
				showReport: true,
				nodataImgUrl: this.$ImgUrl,
				userInfo: {},
				reportTypeIndex: 0,
				reportTypeArr: ['月报', '周报'],
				dataRangeIndex: 0,
				dataRangeArr: [{
					week: "",
					weekstr: "",
					startDate: "",
					endDate: ""
				}],
				minDate: new Date('1970/01/01'),
				maxDate: new Date(),
				imgUrl: '', // 存储base64图片
				dialogShow: false,
				tabIndex: 0,
				// 消费明细
				campusConsumerDetailObj: {
					campusConsumerDetailList: [],
					campusConsumerDetailCalculateList: []
				},
				consumerDetailsHeaderList: ['日期', '早餐', '午餐', '晚餐', '其他', '合计'],
				consumerDetailCalculateObj: {
					canteenData: '', // 食堂消费
					totalData: '', // 总消费
					cateringNumber: '', // 就餐次数
					notCateringNumber: '', //未就餐次数
				},
				trendColorList: [],
				// 就餐情况
				diningSituations: {
					diningSituationsDate: '',
					diningSituationsRequestDate: '',
					notRepastDay: '',
					notRepastDetails: {},
					notRepastDetailsDTOS: [],
					cateringLevel: '',
					notCateringNumber: '',
					notCateringType: ''
				},
				// 消费偏好
				pieDatas: [],
				isEatLow: false,
				// 生活费额度
				livingExpensesAllowance: {
					lastMonthRateStr: '',
					lastMonthRate: '',
					userConsumeAmount: '', //本月
					gradeAverageAmount: '', //上月
					schoolAverageAmount: '' //上上月
				},
				consumerAmountObj: [],
				isReasonable: false,
				schoolAverageHeight: '',
				userConsumeHeight: '',
				gradeAverageHeight: '',
				// 消费趋势
				consumerTrend: {},
				isAbnormal: false,
				lineDatas: [],
				// 饭友分析
				mealPalData: [],
				mealPalArr: [],
				mealPalStr: '',
				// 就餐时间趋势
				breakfastAbnormalStr: '',
				lunchAbnormalStr: '',
				dinnerAbnormalStr: '',
				mealtypeArr: [],
				mealtimeTrendsData: [],
				// 出入校报告数据
				attendanceSituations: {
					attendanceDate: '',
					abnomalDateList: [],
				},
				imageDialogShow: false,
				imageDialogSrc: '',
				// 公话报告数据
				pubTalkReport: {
					// 通话次数
					callNumberInfoList: [],
					// 通话时长
					callDurationInfoList: [],
					// 亲子留言
					leaveMessageInfoList: []
				},
				// 出入校报告数据
				attendanceReport: {
					abnormalNum: 0,
					abnomalDateList: [],
				},
				attendanceReportDatail: [],
				// 会员信息 
				queryMemberServcieItemList: [],
				// 消费
				isOpen: false,
				isService: false,
				// 出入校
				isAttendanceOpen: false,
				isAttendanceService: false,
				// 公话
				isPubTalkOpen: false,
				isPubTalkService: false,
				flag: 0,
				memberInfo: {
					leastAmount: '',
					invalidDateStr: '',
					differDay: ''
				},
				containerHeight: '',
				pubTalkSummaryHeight: 275,
				pubTalkNoopenHeight: 1260,
				isnodataClick: false
			}
		},
		computed: {
			abnormalStr() {
				if (this.mealtypeArr.length) {
					var breakfastAbnormalStr = this.mealtimeAbnormalDate(1);
					var lunchAbnormalStr = this.mealtimeAbnormalDate(2);
					var dinnerAbnormalStr = this.mealtimeAbnormalDate(3);
					var str1 = breakfastAbnormalStr ? breakfastAbnormalStr + '早餐' : '';
					var str2 = lunchAbnormalStr ? lunchAbnormalStr + '中餐' : '';
					var str3 = dinnerAbnormalStr ? dinnerAbnormalStr + '晚餐' : '';
					var str = str1 ? (str1 + (str2 ? ('、' + str2 + (str3 ? '、' + str3 : '')) : (str3 ? '、' + str3 : ''))) :
						(str2 ? (str2 + (str3 ? '、' + str3 : '')) : (str3 ? str3 : ''));
				} else {
					var str = ''
				}
				return str;
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				if (this.isPeakPeriod() && !this.isnodataClick) {
					this.showReport = false;
					return
				}
				this.showReport = true;
				// 有无消费报告入口
				if (new Date().getTime() <= new Date('2022/06/30').getTime()) {
					this.isService = true;
				} else {
					this.queryMemberServcieItem().then(() => {
						if (this.queryMemberServcieItemList.length) {
							this.isService = this.queryMemberServcieItemList.indexOf(1002) == -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) {
						this.queryMemberValidTime(1002).then(e => {
							if (new Date(this.memberInfo.invalidDate).getTime() <= new Date('2022/06/30')
								.getTime()) {
								this.flag = 0;
								this.tabIndex = 1;
								this.memberInfo.invalidDateStr = '2022年6月30日';
								this.memberInfo.differDay = dayjs('2022/06/30').diff(dayjs(), 'day') + 1;
								this.containerHeight = 4200;
								this.queryConsumerSummaryAmount(1).then(e => this.piechart());
								this.queryLivingCostsAmount();
								this.queryDayConsumerTrend(1).then(e => this.linechart(this
									.reportTypeIndex));
								// this.queryMealPalAnalyse().then(() => this.mealPalBarchart());
								// this.queryRepastTimeTrend().then(() => {
								// 	if (this.mealtypeArr.indexOf(1) != -1) {
								// 		this.breakfastTimeLinechart(this.reportTypeIndex,
								// 			'breakfast-time-line',
								// 			1);
								// 	}
								// 	if (this.mealtypeArr.indexOf(2) != -1) {
								// 		this.breakfastTimeLinechart(this.reportTypeIndex,
								// 			'lunch-time-line',
								// 			2);
								// 	}
								// 	if (this.mealtypeArr.indexOf(3) != -1) {
								// 		this.breakfastTimeLinechart(this.reportTypeIndex,
								// 			'dinner-time-line',
								// 			3);
								// 	}
								// })
							} else {
								this.tabIndex = 1;
								this.queryIsDredgeMember(1002, 1).then(() => {
									this.queryConsumerSummaryAmount(1).then(e => this
										.piechart());
									this.queryLivingCostsAmount();
									this.queryDayConsumerTrend(1).then(e => this.linechart(this
										.reportTypeIndex));
									// this.queryMealPalAnalyse().then(() => this.mealPalBarchart());
									// this.queryRepastTimeTrend().then(() => {
									// 	if (this.mealtypeArr.indexOf(1) != -1) {
									// 		this.breakfastTimeLinechart(this
									// 			.reportTypeIndex,
									// 			'breakfast-time-line',
									// 			1);
									// 	}
									// 	if (this.mealtypeArr.indexOf(2) != -1) {
									// 		this.breakfastTimeLinechart(this
									// 			.reportTypeIndex, 'lunch-time-line',
									// 			2);
									// 	}
									// 	if (this.mealtypeArr.indexOf(3) != -1) {
									// 		this.breakfastTimeLinechart(this
									// 			.reportTypeIndex, 'dinner-time-line',
									// 			3);
									// 	}
									// })
								});
							}
							this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate,
								this.dataRangeArr[this
									.dataRangeIndex].endDate).then(() => {
								if (this.diningSituations.notRepastDetailsDTOS) {
									let today = this.diningSituations.notRepastDetailsDTOS.filter(
										e => e.repastDate ===
										tmpDate)[
										0];
									this.diningSituations.notRepastDetails = today;
								} else {
									this.diningSituations.notRepastDetails = {};
								}
							});
						})
					} else {
						if (new Date().getTime() <= new Date('2022/06/30').getTime()) {
							this.isOpen = true;
							this.flag = 0;
							this.tabIndex = 1;
							this.memberInfo.invalidDateStr = '2022年6月30日';
							this.memberInfo.differDay = dayjs('2022/06/30').diff(dayjs(), 'day') + 1;
							this.containerHeight = 4200;
							this.queryConsumerSummaryAmount(1).then(e => this.piechart());
							this.queryLivingCostsAmount();
							this.queryDayConsumerTrend(1).then(e => this.linechart(this.reportTypeIndex));
							// this.queryMealPalAnalyse().then(() => this.mealPalBarchart());
							// this.queryRepastTimeTrend().then(() => {
							// 	if (this.mealtypeArr.indexOf(1) != -1) {
							// 		this.breakfastTimeLinechart(this.reportTypeIndex,
							// 			'breakfast-time-line',
							// 			1);
							// 	}
							// 	if (this.mealtypeArr.indexOf(2) != -1) {
							// 		this.breakfastTimeLinechart(this.reportTypeIndex, 'lunch-time-line',
							// 			2);
							// 	}
							// 	if (this.mealtypeArr.indexOf(3) != -1) {
							// 		this.breakfastTimeLinechart(this.reportTypeIndex, 'dinner-time-line',
							// 			3);
							// 	}
							// })
						} else {
							this.tabIndex = 1;
							this.queryIsDredgeMember(1002, 1).then(() => {
								this.queryConsumerSummaryAmount();
								this.queryLivingCostsAmount();
								this.queryDayConsumerTrend();
								// this.queryMealPalAnalyse();
								// this.queryRepastTimeTrend();
							})
						}
					}
				});
				let tmpArr = []
				// 获取时间
				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.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")
					})
				}
				this.dataRangeArr = tmpArr
				this.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
				this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
				this.diningSituations.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex].startDate;
				this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
				this.attendanceSituations.attendanceDate = this.formatDate(this.minDate);
				this.queryCampusStudentInfo();
				let tmpDate = this.formatDateTwo(this.minDate);
				this.queryConsumerDetail(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
					.dataRangeIndex].endDate);
				if (this.isPubTalkService) {
					this.getPubTalkReport();
				}
			},
			// 当天11：00 ~ 13：00属于高峰期
			isPeakPeriod() {
				let first = this.timeIn("11:00:00", "13:00:00");
				return first;
			},
			nodataClick: function() {
				this.isnodataClick = true
				this.init()
			},
			/*在某段时间内*/
			timeIn(s, e) {
				let t = moment().format("YYYY-MM-DD");
				if (
					moment(t + " " + s).diff(moment()) < 0 &&
					moment(t + " " + e).diff(moment()) > 0
				) {
					return true;
				}
				return false;
			},
			tabTap: function(num) {
				this.tabIndex = num;
				this.tabTapHandler(this.tabIndex);
			},
			tabTapHandler: function(num, flag) {
				this.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
				this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
				if (num == 1) {
					this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
					this.diningSituations.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex]
						.startDate;
					let tmpDate = this.formatDateTwo(this.minDate);
					this.queryConsumerDetail(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
						.dataRangeIndex].endDate);
					this.queryConsumerSummaryAmount();
					this.queryIsDredgeMember(1002, 1).then(() => {
						if (this.isOpen) {
							this.queryConsumerSummaryAmount(1).then(e => this.piechart());
							this.queryLivingCostsAmount();
							this.queryDayConsumerTrend(1).then(e => this.linechart(this
								.reportTypeIndex));
							this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this
								.dataRangeArr[this
									.dataRangeIndex].endDate).then(() => {
								if (this.diningSituations.notRepastDetailsDTOS) {
									let today = this.diningSituations.notRepastDetailsDTOS.filter(e =>
										e.repastDate ===
										tmpDate)[
										0];
									this.diningSituations.notRepastDetails = today;
								} else {
									this.diningSituations.notRepastDetails = {};
								}
							});
							// this.queryMealPalAnalyse().then(() => this.mealPalBarchart());
							// this.queryRepastTimeTrend().then(() => {
							// 	if (this.mealtypeArr.indexOf(1) != -1) {
							// 		this.breakfastTimeLinechart(this.reportTypeIndex,
							// 			'breakfast-time-line',
							// 			1);
							// 	}
							// 	if (this.mealtypeArr.indexOf(2) != -1) {
							// 		this.breakfastTimeLinechart(this.reportTypeIndex,
							// 			'lunch-time-line',
							// 			2);
							// 	}
							// 	if (this.mealtypeArr.indexOf(3) != -1) {
							// 		this.breakfastTimeLinechart(this.reportTypeIndex,
							// 			'dinner-time-line',
							// 			3);
							// 	}
							// })
						} else {
							this.queryConsumerSummaryAmount();
							this.queryDayConsumerTrend();
						}
					})

				} else if (num == 2) {
					if (flag) {
						this.attendanceSituations.attendanceDate = this.formatDate(this.minDate);
						this.statisAttendanceAbnormal();
						this.attendanceReprotDatail(this.dataRangeArr[this.dataRangeIndex].startDate);
					} else {
						this.memberInfo.differDay = '';
						this.memberInfo.invalidDateStr = '';
						this.memberInfo.leastAmount = '';
						this.queryIsDredgeMember(3002).then(() => {
							this.attendanceSituations.attendanceDate = this.formatDate(this.minDate);
							this.statisAttendanceAbnormal();
							if (this.isAttendanceOpen) {
								this.attendanceReprotDatail(this.dataRangeArr[this.dataRangeIndex].startDate)
									.then(e => {
										if (this.attendanceReportDatail.length) {
											this.containerHeight = 2762;
										} else {
											this.containerHeight = 2524;
										}
									});
							}
						})
					}
				} else {
					if (flag) {
						if (this.isPubTalkOpen) {
							this.getPubTalkReport().then(() => {
								this.$nextTick(() => {
									this.callNumberBarchart();
									this.callDurationBarchart();
									this.leaveMessageBarchart();
								})
							})
						} else {
							this.getPubTalkReport().then(() => {
								this.$nextTick(() => {
									this.callNumberBarchart();
								})
							})
						}
					} else {
						this.memberInfo.differDay = '';
						this.memberInfo.invalidDateStr = '';
						this.memberInfo.leastAmount = '';
						this.getPubTalkReport().then(() => {
							this.queryIsDredgeMember(2002).then(e => {
								if (this.isPubTalkOpen) {
									this.$nextTick(() => {
										this.callNumberBarchart();
										this.callDurationBarchart();
										this.leaveMessageBarchart();
									})
								} else {
									this.$nextTick(() => {
										this.callNumberBarchart();
									})
								}
							})
						})
					}
				}
			},
			toImage: function() {
				this.$nextTick(() => {
					html2cancas(document.getElementsByClassName("tainer")[0], {
						useCORS: true,
						// 解决截图不完整问题
						scale: 1,
						height: document.getElementsByClassName("tainer")[0].scrollHeight,
						windowHeight: document.getElementsByClassName("tainer")[0].scrollHeight
					}).then((canvas) => {
						let htmlCanvas = document.getElementById('htmlCanvas');
						let url = canvas.toDataURL('image/png');
						this.imgUrl = url;
						let img = document.createElement("img");
						img.setAttribute('src', this.imgUrl);
						img.setAttribute('class', 'htmlCanvasImg');
						img.style.width = '83vw';
						img.style.borderRadius = '15px';
						htmlCanvas.appendChild(img);
					})
				})
			},
			shareHandler: function() {
				let htmlCanvasImg = document.getElementsByClassName("htmlCanvasImg")[0];
				if (htmlCanvasImg) {
					htmlCanvasImg.parentNode.removeChild(htmlCanvasImg);
				}
				this.toImage();
				this.dialogShow = true;
			},
			schoolReportChange: function(e) {
				this.reportTypeIndex = e.target.value;
				this.getDataRangeArr(this.reportTypeIndex);
			},
			dataRangeChange: function(e) {
				this.dataRangeIndex = e.target.value;
				this.getDataRangeArr(this.reportTypeIndex);
			},
			getDataRangeArr: function(num) {
				if (num) {
					let tmpArr = []
					for (let i = 1; i <= 52; i++) {
						let startWeek = dayjs().subtract(i, 'week').startOf('week');
						let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'week').endOf('week').$d.getTime() ?
							dayjs().subtract(i, 'week').endOf('week') : 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")
						})
					}
					this.dataRangeArr = tmpArr;
				} else {
					let tmpArr = []
					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
							.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")
						})
					}
					this.dataRangeArr = tmpArr;
				}
				this.tabTapHandler(this.tabIndex, 1);
			},
			formatter(day) {
				const year = day.date.getFullYear();
				const month = day.date.getMonth() + 1;
				const monthstr = month < 10 ? '0' + month : month;
				const date = day.date.getDate();
				const datestr = date < 10 ? '0' + date : date;
				const sum = year + '-' + monthstr + '-' + datestr;
				if (this.tabIndex == 1) { // 消费报告
					if (this.diningSituations.notRepastDetailsDTOS) {
						const contrastList = this.diningSituations.notRepastDetailsDTOS.filter(e => e
							.dayNotEatNumber != 0);
						contrastList.forEach(item => {
							if (sum == item.repastDate) {
								const breakfastTxt = item.breakfastStatus ? '' : '早';
								const lunchTxt = item.lunchStatus ? '' : '中';
								const supperTxt = item.supperStatus ? '' : '晚';
								day.topInfo = breakfastTxt + lunchTxt + supperTxt;
								if (day.topInfo) {
									day.className = 'notice-day'
								}
							}
						})
					}
				} else if (this.tabIndex == 2) { // 出入校报告
					if (this.attendanceReport.abnomalDateList && 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);
						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;
								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';
							}
						})
						// 进步
						progressList.forEach(item => {
							if (sum == item.attendDate.slice(0, 10)) {
								day.topInfo = item.abnomaleName;
								day.className = 'progress-day';
							}
						})
					}
				}
				return day;
			},
			formatDate(date) {
				return `${date.getMonth()+1}月${date.getDate()}日`;
			},
			formatDateTwo(date) {
				return `${date.getFullYear()}-${date.getMonth()<9?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
			},
			formatDateThree(date) {
				return date.slice(5, 7) + '/' + date.slice(8);
			},
			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()}`;
				if (this.diningSituations.notRepastDetailsDTOS) {
					let today = this.diningSituations.notRepastDetailsDTOS.filter(e => e.repastDate === dateStr)[0];
					this.diningSituations.notRepastDetails = today;
				} else {
					this.diningSituations.notRepastDetails = {};
				}
			},
			attendanceDateSelect(date) {
				this.attendanceSituations.attendanceDate = this.formatDate(date);
				this.attendanceReprotDatail(this.formatDateTwo(date));
			},
			piechart: function() {
				var myChart = echarts.init(document.getElementById('consumer-preferences-pie'));
				var option = {
					tooltip: {
						trigger: 'item'
					},
					series: this.pieDatas.map(function(data, idx) {
						return {
							type: 'pie',
							radius: ['33', '58'],
							data: data,
							itemStyle: {
								borderColor: '#fff',
								borderWidth: 3,
							},
							label: {
								formatter: function(e) {
									return e.name + "\n" + e.value + '元';
								},
								padding: [0, 2],
								rich: {
									color: 'rgba(0, 0, 0, 0.85)',
									fontSize: 12,
									fontFamily: 'PingFangSC-Regular, PingFang SC',
									fontWeight: 400,
									lineHeight: 17
								}
							}
						};
					}),
					color: ['#00C47C', '#F6C723', '#FF8646']
				};
				option && myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			},
			// 获取某月的所有周六
			getMonthSaturdayDate: function(year, month) {
				const lastDay = new Date(year, month, 0).getDate();
				const startDay = new Date(year, month, 1).getDate()
				const allDate = [];
				for (var i = startDay; i <= lastDay; i++) {
					allDate[i - 1] = i < 10 ? year + '-' + month + '-' + '0' + i : year + '-' + month + '-' +
						i;
				}
				const saturdayDate = allDate.filter(e => {
					const date = new Date(e);
					if (date.getDay() == 6) {
						return true
					}
				})
				return saturdayDate;
			},
			linechart: function(num) {
				var mySize = document.getElementById('consumer-trend-line');
				mySize.style.width = 360 + 'px';
				mySize.style.height = 260 + 'px';
				var myLineChart = echarts.init(mySize);
				var xdata = this.lineDatas.map(v => v.name);
				var year = this.dataRangeArr[this.dataRangeIndex].startDate.slice(0, 4);
				var month = this.dataRangeArr[this.dataRangeIndex].startDate.slice(5, 7);
				var saturdayList = this.getMonthSaturdayDate(year, month);
				switch (num) {
					case 0:
						var seriesData = [];
						this.lineDatas.map(v => {
							if (v.isException == 1) {
								if (v.date == this.formatDateTwo(new Date(year, month, 0)) ||
									saturdayList
									.includes(v.date)) {
									seriesData.push(Object.assign(v, {
										itemStyle: {
											color: '#0BDB7E',
											borderWidth: 1.5
										}
									}))

								} else {
									seriesData.push(Object.assign(v, {
										itemStyle: {
											color: '#0BDB7E',
											borderWidth: 1.5
										},
										symbol: 'none'
									}))
								}
							} else {
								if (v.date == this.formatDateTwo(new Date(year, month, 0)) ||
									saturdayList
									.includes(v.date)) {
									seriesData.push(Object.assign(v, {
										itemStyle: {
											color: '#FF8646',
											borderWidth: 1.5
										}
									}))
								} else {
									seriesData.push(Object.assign(v, {
										itemStyle: {
											color: '#FF8646',
											borderWidth: 1.5
										},
										symbol: 'none'
									}))
								}
							}
						});
						break;
					case 1:
						var seriesData = [];
						this.lineDatas.map(v => {
							if (v.isException == 1) {
								seriesData.push(Object.assign(v, {
									itemStyle: {
										color: '#0BDB7E',
										borderWidth: 1.5
									}
								}))
							} else {
								seriesData.push(Object.assign(v, {
									itemStyle: {
										color: '#FF8646',
										borderWidth: 1.5
									}
								}))
							}
						});
						break;
				}
				var option = {
					xAxis: {
						type: 'category',
						data: xdata
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						data: seriesData,
						type: 'line',
						smooth: true,
						areaStyle: {
							color: 'linear-gradient(180 deg, #0DDE7E 0%, rgba(4, 205, 124, 0) 100%)',
							opacity: 0.2
						},
						lineStyle: {
							color: '#0BDB7E'
						}
					}],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							shadowStyle: {
								color: 'transparent'
							}
						},
						extraCssText: `width:109px;height:55px;line-height:33rpx;background: no-repeat center/100% url(./static/images/consumeTrendbgm.png);

font-size:24rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;

color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
						confine: true,
						position: function(pt) {
							return [pt[0] - 27, pt[1] - 73];
						},
						formatter: function(data) {
							let desp = ['', '消费金额偏高', '消费金额偏低'][data[0].data.isException - 1]
							return data[0].name + '消费' + data[0].value + '元' + '<br>' + desp;
						}
					},
				};
				option && myLineChart.setOption(option);
				window.addEventListener('resize', function() {
					myLineChart.resize();
				})
			},
			// 就餐时间趋势
			breakfastTimeLinechart: function(num, eleId, mealtype) {
				var mySize = document.getElementById(eleId);
				mySize.style.width = 350 + 'px';
				mySize.style.height = 260 + 'px';
				var myBreakfastTimeLineChart = echarts.init(mySize);
				var cateringList = this.mealtimeTrendsData.filter(e => e.mealtype == mealtype)[0].cateringList;
				var breakfastTimeData = JSON.parse(JSON.stringify(cateringList));
				var breakfastTimeDataTwo = JSON.parse(JSON.stringify(cateringList));
				breakfastTimeData.forEach(e => {
					if ('itemStyle' in e) delete e.itemStyle;
					if ('symbol' in e) delete e.symbol;
					if ('symbolSize' in e) delete e.symbolSize;
					if (e.classmealtime.indexOf('2022/07/01') == -1) {
						e.classmealtime = "2022/07/01 " + e.classmealtime
					}
					e.value = e.classmealtime;
				});
				breakfastTimeDataTwo.forEach(e => {
					if ('itemStyle' in e) delete e.itemStyle;
					if ('symbol' in e) delete e.symbol;
					if ('symbolSize' in e) delete e.symbolSize;
					if (e.usermealtime.indexOf('2022/07/01') == -1) {
						e.usermealtime = "2022/07/01 " + e.usermealtime
					}
					e.value = e.usermealtime;
				});
				var xInterval = this.reportTypeIndex ? 0 : 6;
				var yMidPoint = "2022/07/01 " + this.mealtimeTrendsData.filter(e => e.mealtype == 1)[0].earliestTime;
				var maxDate = new Date(yMidPoint).setHours(new Date(yMidPoint).getHours() == 23 ? '00' : new Date(
					yMidPoint).getHours() + 1);
				var minDate = new Date(yMidPoint).setHours(new Date(yMidPoint).getHours() == 0 ? 23 : new Date(
					yMidPoint).getHours() - 1);
				var xdata = breakfastTimeData.map(e => e.repasttime.slice(5));
				var year = this.dataRangeArr[this.dataRangeIndex].startDate.slice(0, 4);
				var month = this.dataRangeArr[this.dataRangeIndex].startDate.slice(5, 7);
				var saturdayList = this.getMonthSaturdayDate(year, month);
				var seriesDataOne = [];
				var seriesDataTwo = [];
				switch (num) {
					case 0: // 月报
						breakfastTimeData.map(v => {
							if (v.repastType == 1) {
								if (v.repasttime == this.formatDateTwo(new Date(year, month, 0)) ||
									saturdayList
									.includes(v.repasttime)) { // 第1/2/3/4周的最后一天+月末最后一天
									seriesDataOne.push(Object.assign(v, {
										itemStyle: {
											color: 'rgba(0, 0, 0, 0.5)',
											borderWidth: 1.5
										},
										symbolSize: 4
									}))
								} else {
									seriesDataOne.push(Object.assign(v, {
										itemStyle: {
											color: 'rgba(0, 0, 0, 0.5)',
											borderWidth: 1.5
										},
										symbol: 'none'
									}))
								}
							} else {
								if (v.repasttime == this.formatDateTwo(new Date(year, month, 0)) ||
									saturdayList
									.includes(v.repasttime)) {
									seriesDataOne.push(Object.assign(v, {
										itemStyle: {
											color: 'rgba(0, 0, 0, 0.5)',
											borderWidth: 1.5
										},
										symbolSize: 4
									}))
								} else {
									seriesDataOne.push(Object.assign(v, {
										itemStyle: {
											color: '#FF8646',
											borderWidth: 1.5
										},
										symbol: 'none'
									}))
								}
							}
						});
						breakfastTimeDataTwo.map(v => {
							if (v.repastType == 1) {
								if (v.repasttime == this.formatDateTwo(new Date(year, month, 0)) ||
									saturdayList
									.includes(v.repasttime)) {
									seriesDataTwo.push(Object.assign(v, {
										itemStyle: {
											color: '#0BDB7E',
											borderWidth: 1.5
										},
										symbolSize: 4
									}))
								} else {
									seriesDataTwo.push(Object.assign(v, {
										itemStyle: {
											color: '#0BDB7E',
											borderWidth: 1.5
										},
										symbol: 'none'
									}))
								}
							} else {
								if (v.repasttime == this.formatDateTwo(new Date(year, month, 0)) ||
									saturdayList
									.includes(v.repasttime)) {
									seriesDataTwo.push(Object.assign(v, {
										itemStyle: {
											color: '#0BDB7E',
											borderWidth: 1.5
										},
										symbolSize: 4
									}))
								} else {
									seriesDataTwo.push(Object.assign(v, {
										itemStyle: {
											color: '#FF8646',
											borderWidth: 1.5
										},
										symbol: 'none'
									}))
								}
							}
						});
						break;
					case 1: // 周报
						breakfastTimeData.map(v => {
							if (v.repastType == 1) {
								seriesDataOne.push(Object.assign(v, {
									itemStyle: {
										color: 'rgba(0, 0, 0, 0.5)',
										borderWidth: 1.5
									},
									symbolSize: 4
								}))
							} else {
								seriesDataOne.push(Object.assign(v, {
									itemStyle: {
										color: '#FF8646',
										borderWidth: 1.5
									},
									symbolSize: 4
								}))
							}
						});
						breakfastTimeDataTwo.map(v => {
							if (v.repastType == 1) {
								seriesDataTwo.push(Object.assign(v, {
									itemStyle: {
										color: '#0BDB7E',
										borderWidth: 1.5
									},
									symbolSize: 4
								}))
							} else {
								seriesDataTwo.push(Object.assign(v, {
									itemStyle: {
										color: '#FF8646',
										borderWidth: 1.5
									},
									symbolSize: 4
								}))
							}
						});
						break;
				}
				var option = {
					xAxis: {
						type: 'category',
						data: xdata,
						axisLabel: {
							interval: xInterval
						},
					},
					yAxis: {
						type: 'time',
						axisLabel: {
							margin: 2,
							formatter: function(value) {
								return (moment(value).format('YYYY-MM-DD HH:mm')).slice(11)
							}
						},
						max: function(value) {
							if (new Date(maxDate).getMinutes() > 0 && new Date(maxDate).getMinutes() <
								30) {
								return new Date(maxDate).setMinutes(30);
							} else {
								return maxDate;
							}
						},
						min: minDate,
						minInterval: 2400 * 1000,
						maxInterval: 2400 * 1000
					},
					series: [{
						data: seriesDataOne,
						type: 'line',
						smooth: true,
						lineStyle: {
							color: 'rgba(0, 0, 0, 0.5)'
						}
					}, {
						data: seriesDataTwo,
						type: 'line',
						smooth: true,
						lineStyle: {
							color: '#0BDB7E'
						}
					}, ],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							shadowStyle: {
								color: 'transparent'
							}
						},
						extraCssText: `width:150px;height:30px;line-height:33rpx;background: no-repeat center/100% url(./static/images/breakfastTimeBg.png);

					font-size:24rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;

					color: #FF8646;padding:23px 0 30px 12px;box-sizing:border-box;`,
						confine: true,
						position: function(pt) {
							return [pt[0] - 30, pt[1] - 5];
						},
						formatter: function(data) {
							if (data[0].data.repastType == 2 && data[0].data.symbolSize) {
								return `${new Date(data[0].data.repasttime).getMonth()+1}月${new Date(data[0].data.repasttime).getDate()}日就餐时间较晚`;
							} else if (data[0].data.repastType == 3 && data[0].data.symbolSize) {
								return `${new Date(data[0].data.repasttime).getMonth()+1}月${new Date(data[0].data.repasttime).getDate()}日就餐时间较早`;
							}
						}
					},
				};
				option && myBreakfastTimeLineChart.setOption(option);
				window.addEventListener('resize', function() {
					myBreakfastTimeLineChart.resize();
				})
			},
			mealPalBarchart: function() {
				var mySize = document.getElementById('meal-pal-bar');
				mySize.style.width = 300 + 'px';
				mySize.style.height = 280 + 'px';
				var myMealPalBarchart = echarts.init(mySize);
				var ydata = this.mealPalArr;
				var seriesData = this.mealPalData.map(v => v.mealnumber);
				var seriesDataMax = Math.max(...seriesData);
				var option = {
					xAxis: {
						type: 'value',
						interval: Math.ceil(seriesDataMax / 5),
						axisLabel: {
							formatter: '{value}天'
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ['#979797'],
								width: 0.5,
								type: 'solid'
							}
						}
					},
					yAxis: {
						type: 'category',
						data: ydata,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000000',
								fontSize: 12
							},
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: ['#979797'],
								width: 0.5,
								type: 'solid'
							}
						}
					},
					series: [{
						data: seriesData,
						type: 'bar',
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
									offset: 0,
									color: '#04B871'
								},
								{
									offset: 1,
									color: '#07D66A'
								}
							]),
							barBorderRadius: [0, 8, 8, 0],
						},
						label: {
							show: true,
							position: 'right',
							color: '#04B871',
							fontSize: '14px',
							formatter: (params) => {
								return params.value + '天';
							}
						},
						barWidth: 25
					}]
				};
				option && myMealPalBarchart.setOption(option);
				window.addEventListener('resize', function() {
					myMealPalBarchart.resize();
				})
			},
			callNumberBarchart: function() {
				var mySize = document.getElementById('call-number-bar');
				mySize.style.width = 350 + 'px';
				mySize.style.height = 260 + 'px';
				var myCallNumberBarchart = echarts.init(mySize);
				var xdata = this.pubTalkReport.callNumberInfoList.map(v => v.nickname);
				var seriesData = this.pubTalkReport.callNumberInfoList.map(v => v.callNumber);
				var option = {
					xAxis: {
						type: 'category',
						data: xdata,
						axisLabel: {
							show: true,
							interval: 0,
							textStyle: {
								color: 'rgba(0, 0, 0, 0.5)',
								fontSize: 12
							},
							formatter: function(params) {
								var newParamsName = "";
								var tempParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 2;
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										tempParamsName += tempStr;
									}
								} else {
									tempParamsName = params;
								}
								if (tempParamsName.length > 9) {
									newParamsName = tempParamsName.substring(0, 10) + '...';
								} else {
									newParamsName = tempParamsName;
								}
								return newParamsName;
							}
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: function(value) {
							return Math.ceil(value.max) + 1
						},
						minInterval: 1
					},
					series: [{
						data: seriesData,
						type: 'bar',
						itemStyle: {
							color: '#FF9523',
							barBorderRadius: [5, 5, 0, 0],
						},
						label: {
							show: true,
							position: 'top',
							color: '#FE931F',
							fontSize: '14px',
							formatter: (params) => {
								return params.value[params.encode.x[0]];
							}
						},
						barWidth: 25
					}]
				};
				option && myCallNumberBarchart.setOption(option);
				window.addEventListener('resize', function() {
					myCallNumberBarchart.resize();
				})
			},
			callDurationBarchart: function() {
				var mySize = document.getElementById('call-duration-bar');
				mySize.style.width = 340 + 'px';
				mySize.style.height = 260 + 'px';
				var myCallDurationBarchart = echarts.init(mySize);
				var xdata = this.pubTalkReport.callDurationInfoList.map(v => v.nickname);
				var seriesData = this.pubTalkReport.callDurationInfoList.map(v => v.duration);
				var option = {
					xAxis: {
						type: 'category',
						data: xdata,
						axisLabel: {
							show: true,
							interval: 0,
							textStyle: {
								color: 'rgba(0, 0, 0, 0.5)',
								fontSize: 12
							},
							formatter: function(params) {
								var newParamsName = "";
								var tempParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 2;
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										tempParamsName += tempStr;
									}
								} else {
									tempParamsName = params;
								}
								if (tempParamsName.length > 9) {
									newParamsName = tempParamsName.substring(0, 10) + '...';
								} else {
									newParamsName = tempParamsName;
								}
								return newParamsName;
							}
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: function(value) {
							return Math.ceil(value.max)
						},
						minInterval: 1
					},
					series: [{
						data: seriesData,
						type: 'bar',
						itemStyle: {
							color: '#D59F00',
							barBorderRadius: [5, 5, 0, 0],
						},
						label: {
							show: true,
							position: 'top',
							color: '#D59F00',
							fontSize: '14px',
							formatter: (params) => {
								return params.value[params.encode.x[0]];
							}
						},
						barWidth: 25
					}]
				};
				option && myCallDurationBarchart.setOption(option);
				window.addEventListener('resize', function() {
					myCallDurationBarchart.resize();
				})
			},
			leaveMessageBarchart: function() {
				var mySize = document.getElementById('leave-message-bar');
				mySize.style.width = 350 + 'px';
				mySize.style.height = 260 + 'px';
				var myLeaveMessageBarchart = echarts.init(mySize);
				var xdata = this.pubTalkReport.leaveMessageInfoList.map(v => v.nickname);
				var seriesData = this.pubTalkReport.leaveMessageInfoList.map(v => v.leaveMessageNumber);
				var option = {
					xAxis: {
						type: 'category',
						data: xdata,
						axisLabel: {
							show: true,
							interval: 0,
							textStyle: {
								color: 'rgba(0, 0, 0, 0.5)',
								fontSize: 12
							},
							formatter: function(params) {
								var newParamsName = "";
								var tempParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 2;
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										tempParamsName += tempStr;
									}
								} else {
									tempParamsName = params;
								}
								if (tempParamsName.length > 9) {
									newParamsName = tempParamsName.substring(0, 10) + '...';
								} else {
									newParamsName = tempParamsName;
								}
								return newParamsName;
							}
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: function(value) {
							return Math.ceil(value.max)
						},
						minInterval: 1
					},
					series: [{
						data: seriesData,
						type: 'bar',
						itemStyle: {
							color: '#00AB6C',
							barBorderRadius: [5, 5, 0, 0],
						},
						label: {
							show: true,
							position: 'top',
							color: '#00AB6C',
							fontSize: '14px',
							formatter: (params) => {
								return params.value[params.encode.x[0]];
							}
						},
						barWidth: 25
					}]
				};
				option && myLeaveMessageBarchart.setOption(option);
				window.addEventListener('resize', function() {
					myLeaveMessageBarchart.resize();
				})
			},
			// 查询学生信息
			async queryCampusStudentInfo() {
				try {
					let data = await this.$http.get({
						url: gHost + '/report-push/campus-consumer-report/queryCampusStudentInfo'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.userInfo = data.obj || {};
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			sortCalculateType: function(a, b) {
				return a.calculateType - b.calculateType;
			},
			// 获取日期数组
			enumerateDaysBetweenDates: function(startDate, endDate) { // startDate必须小于endDate，且二者不相等
				let daysList = [];
				let SDate = moment(startDate);
				let EDate = moment(endDate);
				let xt;
				daysList.push(SDate.format("MM/DD"));
				while (SDate.add(1, "days").isBefore(EDate)) { // 注意这里add方法处理后SDate对象已经改变。      
					daysList.push(SDate.format("MM/DD"));
				}
				daysList.push(EDate.format("MM/DD"));
				return daysList;
			},
			// 查询消费明细
			async queryConsumerDetail(startDate, endDate) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryConsumerDetail'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate,
						endDate,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code == 200) {
						if (data.obj && data.obj.campusConsumerDetailList && Array.isArray(data.obj
								.campusConsumerDetailList) && data.obj.campusConsumerDetailList.length && data.obj
							.campusConsumerDetailCalculateList && Array.isArray(data.obj
								.campusConsumerDetailCalculateList) && data.obj.campusConsumerDetailCalculateList
							.length) {
							this.campusConsumerDetailObj = data.obj;
							this.campusConsumerDetailObj.campusConsumerDetailList.forEach(e => {
								e.currentDate = this.formatDateThree(e.currentDate);
								e.consumerDetailsArr = Object.values(e);
							})
							this.campusConsumerDetailObj.campusConsumerDetailCalculateList.sort(this
								.sortCalculateType);
							let tmpColorList = [''];
							this.campusConsumerDetailObj.campusConsumerDetailCalculateList.forEach((e, index) => {
								e.calculateType = ['就餐(次)', '未就餐(次)', '均值(元)', '较上月', '总计(元)'][e
									.calculateType -
									1
								];
								if (e.calculateType == '较上月') {
									for (let item in e) {
										if (item != 'calculateType') {
											if (e[item] > 0) {
												tmpColorList.push('#FA2B00');
											} else if (e[item] > 0) {
												tmpColorList.push('#00A367');
											} else {
												tmpColorList.push('');
											}

											e[item] = e[item] > 0 ? e[item] +
												'%↑' : (e[item] < 0 ? e[item].toString().slice(1) + '%↓' :
													0);
										}
									}
								}
								this.trendColorList = JSON.parse(JSON.stringify(tmpColorList));
								e.consumerDetailsSumArr = Object.values(e);
							})
							if (this.campusConsumerDetailObj.campusConsumerDetailCalculateList[4]) {
								// 食堂消费=总消费-其他消费
								this.consumerDetailCalculateObj.canteenData = this.campusConsumerDetailObj
									.campusConsumerDetailCalculateList[4].totalAmount - this.campusConsumerDetailObj
									.campusConsumerDetailCalculateList[4].otherAmount;
								// 总消费
								this.consumerDetailCalculateObj.totalData = this.campusConsumerDetailObj
									.campusConsumerDetailCalculateList[4].totalAmount;
							}
							if (this.campusConsumerDetailObj.campusConsumerDetailCalculateList[0]) {
								// 就餐次数
								this.consumerDetailCalculateObj.cateringNumber = this.campusConsumerDetailObj
									.campusConsumerDetailCalculateList[0].totalAmount;
							}
							if (this.campusConsumerDetailObj.campusConsumerDetailCalculateList[1]) {
								// 未就餐次数
								this.consumerDetailCalculateObj.notCateringNumber = this.campusConsumerDetailObj
									.campusConsumerDetailCalculateList[1].totalAmount;
							}
						}
					} else if (data.code == 500) { // 暂无消费数据
						let tmpDetailList = [];
						let dateList = this.enumerateDaysBetweenDates(startDate, endDate);
						dateList.forEach(e => {
							tmpDetailList.push({
								"currentDate": e,
								"breakfastAmount": 0,
								"lunchAmount": 0,
								"supperAmount": 0,
								"otherAmount": 0,
								"totalAmount": 0,
								"consumerDetailsArr": [e, 0, 0, 0, 0, 0]
							})
						});
						this.campusConsumerDetailObj.campusConsumerDetailList = JSON.parse(JSON.stringify(
							tmpDetailList));
						let tmpCalculatList = [];
						let calculateTypeList = ['就餐(次)', '未就餐(次)', '均值(元)', '较上月', '总计(元)'];
						calculateTypeList.forEach(e => {
							tmpCalculatList.push({
								"calculateType": e,
								"breakfastAmount": 0,
								"lunchAmount": 0,
								"supperAmount": 0,
								"otherAmount": 0,
								"totalAmount": 0,
								"consumerDetailsSumArr": [e, 0, 0, 0, 0, 0]
							})
						});
						this.campusConsumerDetailObj.campusConsumerDetailCalculateList = JSON.parse(JSON.stringify(
							tmpCalculatList));
						this.trendColorList = ['', '', '', '', '', ''];
						this.consumerDetailCalculateObj = {
							canteenData: '', // 食堂消费
							totalData: '', // 总消费
							cateringNumber: '', // 就餐次数
							notCateringNumber: '', //未就餐次数
						};
					} else {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询就餐情况
			async queryNotRepastDetails(startDate, endDate) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryNotRepastDetails'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate,
						endDate,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					if (!data.obj) {
						this.diningSituations = {};
						return;
					}
					this.diningSituations.notRepastDay = data.obj.notRepastDay;
					this.diningSituations.notRepastDetailsDTOS = data.obj.notRepastDetailsDTOS;
					this.diningSituations.cateringLevel = data.obj.cateringLevel;
					this.diningSituations.notCateringNumber = data.obj.notCateringNumber;
					this.diningSituations.notCateringType = this.diningSituations
						.cateringLevel ? ['早餐', '午餐',
							'晚餐'
						][this.diningSituations.cateringLevel - 1] : '';
					this.diningSituations.clues = this.diningSituations.cateringLevel ? [
						'早餐吃好，一天才能活力满满哦',
						'及时补充能量，下午才能集中精神学习哦', '晚餐好好吃，身体才能更健康'
					][this.diningSituations.cateringLevel - 1] : '';
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 三对象排序
			numsort(obj1, obj2, obj3) {
				var temp;
				if (obj1.num > obj2.num) {
					temp = JSON.parse(JSON.stringify(obj1));
					obj1 = JSON.parse(JSON.stringify(obj2));
					obj2 = JSON.parse(JSON.stringify(temp));
				}
				if (obj2.num > obj3.num) {
					temp = JSON.parse(JSON.stringify(obj2));
					obj2 = JSON.parse(JSON.stringify(obj3));
					obj3 = JSON.parse(JSON.stringify(temp));
				}
				if (obj1.num > obj2.num) {
					temp = JSON.parse(JSON.stringify(obj1));
					obj1 = JSON.parse(JSON.stringify(obj2));
					obj2 = JSON.parse(JSON.stringify(temp));
				}
				return [{
					name: obj1.name,
					value: obj1.num,
					tag: 0
				}, {
					name: obj2.name,
					value: obj2.num,
					tag: 1
				}, {
					name: obj3.name,
					value: obj3.num,
					tag: 2
				}];
			},
			// 数组中数据的个数
			counterArray(arr) {
				var obj = {}
				arr.forEach(function(v, k) {
					if (obj[v]) {
						obj[v]++;
					} else {
						obj[v] = 1;
					}
				})
				return obj;
			},
			// 查询消费总额及学生消费偏好类型
			async queryConsumerSummaryAmount(num) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryConsumerSummaryAmount'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					if (!data.obj) return;
					if (data.obj.length) {
						const tmpObj = data.obj[0];
						this.isEatLow = tmpObj.canteenamount / tmpObj.consumergrossamount < 0.5 ?
							true : false;
						if (num) {
							this.pieDatas = [
								[{
									name: '正餐',
									value: tmpObj.canteenamount
								}, {
									name: '超市',
									value: tmpObj.supermarketamount
								}, {
									name: '其他',
									value: tmpObj.otheramount
								}]
							]
						}
						// this.consumerAmountObj = tmpObj;
						// this.isReasonable = this.consumerAmountObj.gtgraderate >= 40 && this
						// 	.consumerAmountObj.gtgraderate <=
						// 	60 ? false : true;
						// const sortArr = this.numsort({
						// 	name: 'schoolAverageHeight',
						// 	num: this.consumerAmountObj.schoolavgamount
						// }, {
						// 	name: 'userConsumeHeight',
						// 	num: this.consumerAmountObj.consumergrossamount
						// }, {
						// 	name: 'gradeAverageHeight',
						// 	num: this.consumerAmountObj.gradeavgamount
						// });
						// const tempArr = [this.consumerAmountObj.schoolavgamount, this
						// 	.consumerAmountObj
						// 	.consumergrossamount,
						// 	this.consumerAmountObj.gradeavgamount
						// ];
						// const heightArr = Object.keys(this.counterArray(tempArr)).length == 1 ? [
						// 	139, 139, 139
						// ] : (
						// 	Object.keys(this.counterArray(tempArr)).length == 2 ? [139, 139,
						// 		160
						// 	] : [139, 160, 192]
						// );
						// sortArr.forEach(e => {
						// 	this[e.name] = heightArr[e.tag]
						// })
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			livingCostType: function(a, b) {
				return a.livingCostType - b.livingCostType;
			},
			// 查询生活费额度
			async queryLivingCostsAmount() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryLivingCostsAmount'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					if (!data.obj) return;
					if (data.obj.length) {
						this.consumerAmountObj = data.obj;
						this.consumerAmountObj.sort(this.livingCostType);
						const sortArr = this.numsort({
							name: 'schoolAverageHeight',
							num: this.consumerAmountObj[2].livingCostAmount
						}, {
							name: 'gradeAverageHeight',
							num: this.consumerAmountObj[1].livingCostAmount
						}, {
							name: 'userConsumeHeight',
							num: this.consumerAmountObj[0].livingCostAmount
						});
						const tempArr = [this.consumerAmountObj[2].livingCostAmount, this.consumerAmountObj[1]
							.livingCostAmount, this.consumerAmountObj[0].livingCostAmount
						];
						const heightArr = Object.keys(this.counterArray(tempArr)).length == 1 ? [
							139, 139, 139
						] : (
							Object.keys(this.counterArray(tempArr)).length == 2 ? [139, 139,
								160
							] : [139, 160, 192]
						);
						sortArr.forEach(e => {
							this[e.name] = heightArr[e.tag]
						})
						if (this.consumerAmountObj[0]) {
							this.livingExpensesAllowance.userConsumeAmount = this.consumerAmountObj[0]
								.livingCostAmount; //本月
						}
						if (this.consumerAmountObj[1]) {
							this.livingExpensesAllowance.gradeAverageAmount = this.consumerAmountObj[1]
								.livingCostAmount; //上月
							this.livingExpensesAllowance.lastMonthRate = this.consumerAmountObj[1].rate;
							this.livingExpensesAllowance.lastMonthRateStr = this.consumerAmountObj[1].rate > 0 ? this
								.consumerAmountObj[1].rate + '%' : (this.consumerAmountObj[1].rate < 0 ? this
									.consumerAmountObj[1].rate.toString()
									.slice(1) + '%' : 0 + '%');
						}
						if (this.consumerAmountObj[2]) {
							this.livingExpensesAllowance.schoolAverageAmount = this.consumerAmountObj[2]
								.livingCostAmount; //上上月
						}
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 日消费趋势
			async queryDayConsumerTrend(num) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryDayConsumerTrend'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex]
							.startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return

					}
					if (!data.obj) return;
					var exceptionDate = data.obj.exceptionDate;
					this.isAbnormal = exceptionDate.length ? true : false;
					var clues = '';
					exceptionDate.forEach((item, index) => item.slice(5, 6) == '0' ? (
						clues += item.slice(6, 7) + '月' +
						item.slice(8, 10) + '日' + (index == exceptionDate.length -
							1 ? '' : '、')) : (clues +=
						item.slice(5, 7) + '月' + item.slice(8, 10) + '日' + (
							index == exceptionDate.length - 1 ?
							'' : '、')))
					this.consumerTrend.clues = clues;
					if (num) {
						var lineDatas = data.obj.dayConsumerAmount.map(item => Object
							.assign(item, {
								value: item.consumerAmount,
								name: item.date.slice(5)
							}));
						this.lineDatas = lineDatas;
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 饭友分析
			async queryMealPalAnalyse() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryMealPalAnalyse'
					}, {
						schoolId: getQueryParams('schoolId'),
						studentId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.message
						})
						return
					}
					this.mealPalData = data.obj || [];
					this.mealPalArr = this.mealPalData.length ? this.mealPalData.map(v => v.mealpalname
						.slice(0, 1) +
						'**') : [];
					this.mealPalStr = this.mealPalArr.length ? this.mealPalArr.join('、') : '';
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 异常就餐日期
			mealtimeAbnormalDate(mealtype) { // mealtype  1 早餐  2 中餐  3 晚餐
				var breakfastArr = this.mealtimeTrendsData.filter(e => e.mealtype == mealtype);
				var breakfastAbnormalArr = [];
				var breakfastAbnormalStr = '';
				if (breakfastArr.length && breakfastArr[0].cateringList) {
					breakfastAbnormalArr = breakfastArr[0].cateringList.filter(e => e.repastType == 2 || e
							.repastType == 3)
						.map(e => e.repasttime.slice(8, 9) ? e.repasttime.slice(8) : e.repasttime.slice(8,
							9))
					if (breakfastAbnormalArr.length > 1) {
						for (var i = 0; i < breakfastAbnormalArr.length - 1; i++) {
							breakfastAbnormalStr += breakfastAbnormalArr[i] + '日、';
						}
						breakfastAbnormalStr += breakfastAbnormalArr[breakfastAbnormalArr.length - 1] +
							'日';
					} else if (breakfastAbnormalArr.length == 1) {
						breakfastAbnormalStr += breakfastAbnormalArr[breakfastAbnormalArr.length - 1] +
							'日';
					}
				}
				return breakfastAbnormalStr;
			},
			// 就餐时间趋势
			async queryRepastTimeTrend() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryRepastTimeTrend'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
						timeType: this.dataRangeIndex == 0 ? 2 : 1
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.message
						})
						return

					}
					if (data.obj) {
						this.mealtimeTrendsData = data.obj
					}
					if (data.obj && data.obj.filter(e => e.mealtype == 1).length && data.obj.filter(
							e => e.mealtype ==
							1)[0].cateringList) {
						this.mealtypeArr.push(1)

					}
					if (data.obj && data.obj.filter(e => e.mealtype == 2).length && data.obj.filter(
							e => e.mealtype ==
							2)[0]
						.cateringList) {
						this.mealtypeArr.push(2)

					}
					if (data.obj && data.obj.filter(e => e.mealtype == 3).length && data.obj.filter(
							e => e.mealtype ==
							3)[0]
						.cateringList) {
						this.mealtypeArr.push(3)
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 获取公话报告
			async getPubTalkReport() {
				try {
					let data = await this.$http.post({
						url: gHost +
							'/report-push/vpt-web-report/pubTalkReport/getPubTalkReport'
					}, {
						schoolId: getQueryParams('schoolId'),
						studentId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex]
							.startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex]
							.endDate,
					})
					if (data.code != 0) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.message
						})
						return

					}
					this.pubTalkReport = data.data || {};
					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);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 出入校报告
			// 统计异常天数
			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
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.message
						})
						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
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.message
						})
						return
					}
					var tempList = data.data;
					if (tempList && tempList.length) {
						tempList.forEach(e => {
							if (e.attendDetailReportDTOList && e
								.attendDetailReportDTOList.length) {
								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 {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryIsDredgeMember'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						serviceItemCode
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					switch (serviceItemCode) {
						case 1002:
							this.isOpen = data.obj && data.obj.status ||
								false;
							if (!this.isOpen) {
								this.flag = 1;
							}
							break;
						case 2002:
							this.isPubTalkOpen = data.obj && data.obj
								.status || false;
							if (this.isPubTalkOpen) {
								this.queryMemberValidTime(serviceItemCode);
								this.containerHeight = 2765 + this
									.pubTalkSummaryHeight;
								this.flag = 0;
							} else {
								this.queryMemberConsumerAmount(
									serviceItemCode);
								this.containerHeight = 1605 + this
									.pubTalkSummaryHeight;
								this.pubTalkNoopenHeight = 735 + this
									.pubTalkSummaryHeight;
								this.flag = 3;
							}
							break;
						case 3002:
							this.isAttendanceOpen = data.obj && data.obj
								.status || false;
							if (this.isAttendanceOpen) {
								this.queryMemberValidTime(serviceItemCode);
								this.containerHeight = 2762;
								this.flag = 0;
							} else {
								this.queryMemberConsumerAmount(
									serviceItemCode);
								this.containerHeight = 1974;
								this.flag = 2;
							}
							break;
					}
					if (num == 1) {
						if (this.isOpen) {
							this.queryMemberValidTime(serviceItemCode);
							this.containerHeight = 4200;
							this.flag = 0;
						} else {
							this.queryMemberConsumerAmount(
								serviceItemCode);
							this.containerHeight = 2207;
						}
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询是否开通服务项（入口展示服务项）
			async queryMemberServcieItem() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryMemberServcieItem'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					const tempList = data.obj || [];
					if (tempList.length) {
						this.queryMemberServcieItemList = tempList.map(
							e => e.serviceCode);
					} else {
						this.queryMemberServcieItemList = [];
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询会员消费金额
			async queryMemberConsumerAmount(serviceItemCode) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryMemberConsumerAmount'
					}, {
						schoolId: getQueryParams(
							'schoolId'),
						userId: getQueryParams('userId'),
						serviceItemCode
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.memberInfo.leastAmount = data.obj
						.leastAmount;
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询会员有效期
			async queryMemberValidTime(serviceItemCode) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/member-info/queryMemberValidTime'
					}, {
						schoolId: getQueryParams(
							'schoolId'),
						userId: getQueryParams(
							'userId'),
						serviceItemCode
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.memberInfo.differDay = data.obj
						.differDay;
					this.memberInfo.invalidDate = data.obj
						.invalidDate;
					if (data.obj.invalidDate) {
						let month = data.obj.invalidDate.slice(
								5, 6) == 0 ? data
							.obj.invalidDate.slice(6, 7) : data
							.obj
							.invalidDate.slice(5, 7);
						let date = data.obj.invalidDate.slice(
								8, 9) == 0 ? data.obj
							.invalidDate.slice(9) : data.obj
							.invalidDate.slice(8);
						this.memberInfo.invalidDateStr = data
							.obj.invalidDate
							.slice(0, 4) + '年' + month + '月' +
							date + '日';
					} else {
						this.memberInfo.invalidDateStr = '';
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			equityPay: function() {
				jWeixin.miniProgram.switchTab({
					url: `/pages/Member/main`,
					success: function success() {
						console.log('skip success')
					},
					fail: function fail(_fail) {
						console.warn(_fail);
						uni.showModal({
							content: JSON
								.stringify(
									_fail)
						});
					}
				});
			},
			imageClick: function(src) {
				this.imageDialogSrc = src;
				this.imageDialogShow = true;
			},
		},
	}
</script>

<style lang="scss">
	.nodata {
		position: absolute;
		left: 50%;
		top: 0%;
		width: 100%;
		transform: translate(-50%, 0);

		.nodataImg {
			width: 100%;
			text-align: center;
		}

		.nodataTxt {
			margin-top: -100rpx;
			display: flex;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.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;

		.school-report-header-bg {
			height: 292rpx;
		}

		.school-report-header-position {
			height: 292rpx;
			padding: 72rpx 0 0 30rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			background: #FFFFFF;
			z-index: 1000;

			.school-report-header {
				height: 88rpx;
				display: flex;
				justify-content: space-between;
				position: relative;
				margin: 0 0 48rpx;

				.school-report-header-item {
					display: flex;

					.user-avatar {
						width: 88rpx;
						height: 88rpx;
						background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/avatar.png);
					}

					.user-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 9rpx;

						.user-name {
							width: 200rpx;
							font-size: 34rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1B1B1B;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.class-name {
							width: 200rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.25);
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.school-report-screen {
						display: flex;

						.school-report-screen-item {
							width: 156rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.school-report-type {
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #1B1B1B;
								margin-right: 12rpx;
							}

							.triangle {
								width: 21rpx;
								height: 10rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/grayTriangle.png);
							}
						}

						.school-report-screen-item-two {
							width: 270rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.school-report-date {
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #1B1B1B;
								margin-right: 17rpx;
							}

							.triangle {
								width: 21rpx;
								height: 10rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/grayTriangle.png);
							}
						}
					}
				}
			}

			.school-report-context-tab {
				height: 84rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.school-report-context-tab-item {
					display: flex;

					.school-report-context-tab-item-one {
						width: 172rpx;
						background: #F9F9F9;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						color: rgba(0, 0, 0, 0.85);
						display: flex;
						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;
						}
					}
				}

				.school-report-context-tab-item-two {
					width: 155rpx;
					margin: 8rpx 0 0;

					.share-button {
						width: 155rpx;
						height: 64rpx;
						background: rgba(4, 184, 113, .13);
						border-radius: 32rpx 0rpx 0rpx 32rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.share-button-img {
							width: 26rpx;
							height: 26rpx;
							background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/share.png);
							margin-right: 11rpx;
						}

						.share-button-txt {
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #04B871;
						}
					}
				}
			}

		}

		.school-report-context {
			.consumer-report-bgImg {
				width: 100%;
				height: 452rpx;
				background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/consumeReportBg.png);
			}

			.attendance-report-bgImg {
				width: 100%;
				height: 452rpx;
				background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/attendanceReportBg.png);
			}

			.pubTalk-report-bgImg {
				width: 100%;
				height: 452rpx;
				background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/pubTalkReportBg.png);
			}

			.school-report-context-card-title {
				height: 62rpx;
				display: flex;
				justify-content: center;

				.school-report-context-card-title-img {
					width: 318rpx;
					background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/cardBg.png);
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.85);
					line-height: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.school-report-context-card {
				width: 100%;
				background: #E5F8F1;
				padding: 0 30rpx;
				position: absolute;
				top: 720rpx;
				box-sizing: border-box;

				.school-report-context-card-one {
					width: 100%;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.consumer-report-img {
						width: 428rpx;
						height: 428rpx;
						background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/consumeReport.png);
						position: absolute;
						top: -172rpx;
						left: 160rpx;
					}

					.attendance-report-img {
						width: 428rpx;
						height: 428rpx;
						background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/attendanceReport.png);
						position: absolute;
						top: -172rpx;
						left: 160rpx;
					}

					.pubTalk-report-img {
						width: 428rpx;
						height: 428rpx;
						background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/pubTalkReport.png);
						position: absolute;
						top: -172rpx;
						left: 160rpx;
					}

					.school-report-context-card-one-context {
						width: 613rpx;
						margin: 0 30rpx 0 47rpx;
						position: absolute;
						top: 163rpx;

						.school-report-context-card-one-context-nodata {
							box-sizing: border-box;
							display: flex;
							align-items: center;
							flex-direction: column;
							padding: 80rpx 0 0;
							box-sizing: border-box;

							.card-one-nodata-img {
								width: 500rpx;
								height: 232rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.card-one-nodata-txt {
								height: 40rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: rgba(0, 0, 0, 0.45);
								line-height: 40rpx;
							}
						}

						.school-report-context-card-one-context-item {
							margin: 0 0 32rpx;
							display: flex;

							.school-report-context-card-one-context-dot {
								height: 40rpx;
								display: flex;
								align-items: center;

								.school-report-context-card-one-context-dot-item {
									width: 10rpx;
									height: 10rpx;
									background: #04B871;
									border-radius: 10rpx;
									margin-right: 16rpx;
								}
							}

							.school-report-context-card-one-context-txt {
								line-height: 40rpx;

								.txt-important {
									color: #04B871;
									margin: 0 4rpx;
								}

								.txt-important-two {
									color: #04B871;
								}
							}

							&.school-report-context-card-one-context-item-last {
								margin: 0;
							}
						}
					}

					.attendance-report-context-card-one-context {
						padding: 163rpx 0 0;
						box-sizing: border-box;

						.attendance-report-context-card-one-context-item {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							display: flex;
							justify-content: center;

							.txt-important {
								color: #04B871;
								margin: 0 4rpx;
							}
						}
					}

					.pubTalk-report-context-card-one-context {
						width: 613rpx;
						margin: 0 30rpx 0 47rpx;
						position: absolute;
						top: 163rpx;

						.pubTalk-report-context-card-one-context-item {
							margin: 0 0 32rpx;
							display: flex;

							.pubTalk-report-context-card-one-context-dot {
								height: 40rpx;
								display: flex;
								align-items: center;

								.pubTalk-report-context-card-one-context-dot-item {
									width: 10rpx;
									height: 10rpx;
									background: #04B871;
									border-radius: 10rpx;
									margin-right: 16rpx;
								}
							}

							.pubTalk-report-context-card-one-context-txt {
								line-height: 40rpx;

								.txt-important {
									color: #04B871;
									margin: 0 4rpx;
								}

								.txt-important-two {
									color: #04B871;
								}
							}

							&.pubTalk-report-context-card-one-context-item-last {
								margin: 0;
							}
						}
					}
				}

				.school-report-context-card-two {
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-nodata {
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						text-align: center;
						color: orangered;
						line-height: 40rpx;
						margin: 40rpx 0 0;
					}

					.school-report-context-card-two-conclusion {
						height: 40rpx;
						padding: 0 40rpx 0 30rpx;
						box-sizing: border-box;
						margin: 0 0 32rpx;
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.85);

						.school-report-context-card-two-conclusion-txt {
							.abnormal-days {
								color: #F9793F;
								margin: 0 5rpx;
							}
						}

						.school-report-context-card-two-conclusion-logo {
							display: flex;

							.school-report-context-card-two-conclusion-logo-item {
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #F9793F;
								display: flex;
								align-items: center;

								.school-report-context-card-two-conclusion-logo-item-dot {
									width: 12rpx;
									height: 12rpx;
									background: #F9793F;
									border-radius: 12rpx;
								}

								&.school-report-context-card-two-conclusion-logo-item-right {
									margin-left: 14rpx;
								}
							}
						}
					}

					.school-report-context-card-two-calendar {
						height: 575rpx;
						width: 690rpx;

						/deep/ .van-calendar__weekdays {
							background: #F7FAF8;
						}

						/deep/ .van-calendar__weekday {
							text-align: left;
							padding-left: 30rpx;
							box-sizing: border-box;
						}

						/deep/ .van-calendar__weekday:first-of-type {
							color: rgba(0, 0, 0, 0.25);
						}

						/deep/ .van-calendar__weekday:last-of-type {
							color: rgba(0, 0, 0, 0.25);
						}

						/deep/ .van-calendar__month-title {
							display: none;
						}

						/deep/ .van-calendar__days {
							margin: 10rpx 0 0;
						}

						/deep/ .van-calendar__day {
							margin: 0 0 8rpx;
							border-radius: 22rpx;
							display: flex;
							align-items: flex-end;
						}

						/deep/ .van-calendar__selected-day {
							background: rgba(0, 0, 0, .1);
							color: #F9793F;
							display: flex;
							align-items: flex-end;
							border-radius: 22rpx;
						}

						/deep/ .van-calendar__top-info {
							top: 0;
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #F9793F;
							line-height: 28rpx;
							margin: 12rpx 0 4rpx;
						}

						/deep/ .notice-day {
							color: #F9793F;
							background: rgba(249, 121, 63, .1);
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-right: 10rpx;
							display: flex;
							align-items: flex-end;
						}
					}

					.school-report-context-card-two-details {
						height: 132rpx;
						background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/diningSituations.png);
						padding: 55rpx 42rpx 30rpx 29rpx;
						box-sizing: border-box;
						border-radius: 0 0 16rpx 16rpx;

						.school-report-context-card-two-details-item {
							display: flex;
							height: 43rpx;

							.school-report-context-card-two-details-date {
								width: 130rpx;
								height: 43rpx;
								border-radius: 8rpx;
								border: 1rpx solid #04B871;
								font-size: 28rpx;
								font-family: FontName;
								font-weight: 700;
								font-style: italic;
								color: #04B871;
								margin-right: 65rpx;
								display: flex;
								justify-content: center;
							}

							.school-report-context-card-two-details-meal {
								display: flex;

								.school-report-context-card-two-details-meal-txt {
									width: 56rpx;
									margin-right: 8rpx;
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: rgba(0, 0, 0, 0.85);
									line-height: 40rpx;
								}

								.school-report-context-card-two-details-meal-logo {
									display: flex;
									align-items: center;
									margin-right: 48rpx;

									&.school-report-context-card-two-details-meal-logo-two {
										margin-right: 56rpx;
									}

									&.school-report-context-card-two-details-meal-logo-three {
										margin: 0;
									}

									.school-report-context-card-two-details-meal-img {
										width: 48rpx;
										height: 40rpx;

										image {
											height: 100%;
											width: 100%;
											max-height: 100%;
											max-width: 100%;
										}
									}

									.school-report-context-card-two-details-meal-noeat {
										width: 40rpx;
										height: 40rpx;
										background: rgba(249, 121, 63, 0.17);
										border-radius: 12rpx;
										font-size: 24rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #F9793F;
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}

							}
						}
					}
				}

				.attendance-report-context-card-two {
					height: 748rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 0 0;

					.attendance-report-context-card-two-conclusion {
						height: 40rpx;
						padding: 0 30rpx 0;
						box-sizing: border-box;
						margin: 36rpx 0 29rpx;
						display: flex;
						justify-content: space-between;

						.attendance-report-context-card-two-conclusion-txt {
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;

							.abnormal-days {
								color: #F9793F;
								margin: 0 5rpx;
							}
						}

						.attendance-report-context-card-two-conclusion-logo {
							width: 190rpx;
							display: flex;
							justify-content: space-between;

							.attendance-report-context-card-two-conclusion-logo-item {
								display: flex;
								align-items: center;

								.attendance-report-context-card-two-conclusion-logo-item-dot {
									width: 12rpx;
									height: 12rpx;
									background: #F9793F;
									border-radius: 12rpx;

									&.leave {
										background: #04B871;
									}
								}

								.attendance-report-context-card-two-conclusion-logo-item-txt {
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: rgba(0, 0, 0, 0.5);
									margin-left: 14rpx;
								}
							}
						}
					}

					.attendance-report-context-card-two-calendar {
						height: 575rpx;
						width: 690rpx;

						.mark-green {
							color: #04B871;
						}

						.mark-orange {
							color: #F9793F;
						}

						.mark-yellow {
							color: #DAA000;
						}

						/deep/ .van-calendar__weekdays {
							background: #F7FAF8;
						}

						/deep/ .van-calendar__weekday {
							text-align: left;
							padding-left: 30rpx;
							box-sizing: border-box;
						}

						/deep/ .van-calendar__weekday:first-of-type {
							color: rgba(0, 0, 0, 0.25);
						}

						/deep/ .van-calendar__weekday:last-of-type {
							color: rgba(0, 0, 0, 0.25);
						}

						/deep/ .van-calendar__month-title {
							display: none;
						}

						/deep/ .van-calendar__days {
							margin: 10rpx 0 0;
						}

						/deep/ .van-calendar__day {
							margin: 0 0 8rpx;
							border-radius: 22rpx;
							display: flex;
							align-items: flex-end;
						}

						/deep/ .van-calendar__selected-day {
							background: rgba(0, 0, 0, .1);
							color: #F9793F;
							display: flex;
							align-items: flex-end;
							border-radius: 22rpx;
						}

						/deep/ .van-calendar__top-info {
							top: 0;
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #F9793F;
							line-height: 28rpx;
							margin: 12rpx 0 4rpx;
						}

						/deep/ .late-day {
							color: #F9793F;
							background: rgba(249, 121, 63, .1);
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-left: 10rpx;
						}

						/deep/ .leave-day {
							color: #04B871;
							background: rgba(4, 184, 113, .09);
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-left: 10rpx;
						}

						/deep/ .champion-day {
							color: #DAA000;
							background: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/champion.png) no-repeat -4rpx center/100%;
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-left: 10rpx;
						}

						/deep/ .progress-day {
							color: #DAA000;
							background: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/progress.png) no-repeat -2rpx center/100%;
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-left: 10rpx;
						}
					}
				}

				.attendance-report-context-details {

					.attendance-report-context-card-two-details {
						position: relative;
						height: 146rpx;
						background: #F5F7F7;
						padding: 28rpx 39rpx 0 34rpx;
						box-sizing: border-box;

						.attendance-report-context-card-two-details-item {
							height: 50rpx;
							display: flex;
							justify-content: space-between;

							.attendance-report-context-card-two-details-time {
								display: flex;
								align-items: center;

								.attendance-report-context-card-two-details-time-img {
									width: 25rpx;
									height: 25rpx;
									background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/attendanceTime.png);
								}

								.attendance-report-context-card-two-details-time-txt {
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: rgba(0, 0, 0, 0.85);

									&.txt-details {
										margin: 0 16rpx 0 13rpx;
									}
								}

							}

							.attendance-report-context-card-two-details-date {
								width: 130rpx;
								height: 43rpx;
								border-radius: 8rpx;
								border: 1rpx solid #04B871;
								font-size: 28rpx;
								font-family: FontName;
								font-weight: 700;
								font-style: italic;
								color: #04B871;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}

					.attendance-report-context-card-three {
						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: absolute;
									left: 44rpx;
								}

								.attendance-report-dot-first {
									width: 16rpx;
									height: 16rpx;
									background: #FFFFFF;
									border: 4rpx solid rgba(0, 0, 0, 0.25);
									border-radius: 16rpx;
									position: absolute;
									top: 66rpx;
									left: 34rpx;
								}

								.dashed-line {
									width: 2rpx;
									height: 146rpx;
									border-left: 2rpx dashed rgba(0, 0, 0, .25);
									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%;
								height: 156rpx;
								display: flex;
								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;
										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-txt {
											width: 56rpx;
										}

										.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(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/champions.png);
												margin-right: 2rpx;
											}

											.progress-img {
												width: 30rpx;
												height: 29rpx;
												background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/progressIcon.png);
												margin-right: 2rpx;
											}

											.early-champions-txt {
												font-size: 24rpx;
												font-family: PingFangSC-Regular, PingFang SC;
												font-weight: 400;
												color: #916610;
											}
										}
									}

									.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(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/arrowUp.png);
											// margin-left: 30rpx;
										}
									}

								}

								.attendance-report-details-img-item {
									display: flex;
									justify-content: flex-end;
									width: 100%;
									height: 95rpx;
									margin: 14rpx 0 0;

									.attendance-report-details-img-box {
										width: 155rpx;
										height: 95rpx;

										image {
											width: 100%;
											height: 100%;
										}
									}
								}
							}
						}
					}

					.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(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/noAttendanceReportDatailData.png);
						}
					}

				}

				.image-dialog {
					width: 620rpx;
					height: 800rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pubTalk-report-context-card-two {
					height: 506rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin: 0 0 40rpx;

					.call-number-bar-unit {
						margin: 0 0 28rpx 28rpx;
						height: 33rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
						line-height: 33rpx;
					}

					#call-number-bar {
						position: relative;
						top: -110rpx;
						left: 18rpx;
						z-index: 100;
					}
				}

				.pubTalk-report-context-card-three {
					height: 537rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin: 0 0 40rpx;

					.call-duration-bar-unit {
						margin: 0 0 28rpx 28rpx;
						height: 33rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
						line-height: 33rpx;
					}

					#call-duration-bar {
						position: relative;
						top: -88rpx;
						left: 28rpx;
						z-index: 100;
					}
				}

				.pubTalk-report-context-card-four {
					height: 756rpx;
					background: #FFFFFF;
					border-radius: 16rpx;

					.leave-message-summary {
						height: 90rpx;
						margin: 42rpx 36rpx 0;
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.85);
						line-height: 45rpx;

						.txt-important {
							color: #04B871;
							margin: 0 4rpx;
						}

						&.leave-message-less-summary {
							margin: 0 36rpx 0;
						}
					}

					.leave-message-bar-unit {
						margin: 43rpx 0 28rpx 28rpx;
						height: 33rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
						line-height: 33rpx;
					}

					#leave-message-bar {
						position: relative;
						top: -116rpx;
						left: 18rpx;
						z-index: 100;
					}
				}

				.school-report-context-card-three {
					height: 526rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-three-conclusion {
						margin: 40rpx 0 57rpx 0;

						.school-report-context-card-three-conclusion-item {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;
							margin-left: 30rpx;

							&.card-three-conclusion-nodata {
								text-align: center;
								margin: 0;
								color: orangered;
							}

							.school-report-context-card-three-conclusion-item-describe {
								color: #04B871;
							}
						}
					}

					#consumer-preferences-pie {
						height: 385rpx;
						top: -60rpx;
						z-index: 100;
					}
				}

				.school-report-context-card-four {
					height: 536rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-four-conclusion {
						margin: 36rpx 0 46rpx;

						.school-report-context-card-four-conclusion-item {
							height: 80rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;
							margin: 0 40rpx 0 30rpx;

							&.card-four-conclusion-nodata {
								margin: 0;
								text-align: center;
								color: orangered;
							}

							.consume-total {
								color: #04B871;
								margin: 0 6rpx;
							}

							.livingCostUp {
								transform: rotate(180deg);
							}
						}
					}

					.consume-total-img {
						height: 192rpx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						font-size: 28rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 40rpx;

						.school-average {
							width: 110rpx;
							background: linear-gradient(360deg, #04B871 0%, #07D66A 100%);
							border-radius: 16rpx 16rpx 0 0;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 14rpx 0 0;
							box-sizing: border-box;

							.school-average-img {
								width: 52rpx;
								height: 87rpx;
								margin: 2rpx 0 0;

								image {
									width: 100%;
									height: 100%;
									max-width: 100%;
									max-height: 100%;
								}
							}

							&.last-month {
								margin: 0 74rpx 0;
							}
						}

						.user-consume {
							width: 110rpx;
							background: linear-gradient(360deg, #F0662B 0%, #FF8646 100%);
							border-radius: 16rpx 16rpx 0 0;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 14rpx 0 0;
							box-sizing: border-box;

							.user-consume-img {
								width: 52rpx;
								height: 87rpx;
								margin: 2rpx 0 0;

								image {
									width: 100%;
									height: 100%;
									max-width: 100%;
									max-height: 100%;
								}
							}
						}
					}

					.consume-total-img-des {
						margin: 16rpx 0 0;
						display: flex;
						padding-left: 100rpx;

						.consume-total-img-des-item {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.5);
							line-height: 40rpx;

							&.consume-des {
								margin: 0 128rpx 0 116rpx;
							}
						}
					}
				}

				.school-report-context-card-five {
					height: 634rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin: 0 0 40rpx;
					position: relative;

					.school-report-context-card-five-conclusion {
						margin: 40rpx 0 0;

						.school-report-context-card-five-conclusion-item {
							margin: 0 40rpx 0 30rpx;
							height: 130rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;

							&.card-five-conclusion-nodata {
								margin: 0;
								text-align: center;
								color: orangered;
							}

							.abnormal-date {
								color: #04B871;
							}
						}
					}

					#consumer-trend-line {
						position: absolute;
						top: 120rpx;
						z-index: 100;
					}

					.consumer-trend-line-icon {
						position: absolute;
						top: 558rpx;
						left: 271rpx;
						height: 40rpx;

						.consumer-trend-line-icon-item {
							display: flex;
							align-items: center;

							.consumer-trend-line-icon-logo {
								display: flex;
								align-items: center;
								margin-right: 10rpx;

								.consumer-trend-line-icon-logo-left,
								.consumer-trend-line-icon-logo-right {
									width: 8rpx;
									height: 1rpx;
									background: #0BDA7D;
								}

								.consumer-trend-line-icon-logo-middle {
									width: 12rpx;
									height: 12rpx;
									background: #FFFFFF;
									border: 3rpx solid #0BDB7E;
									border-radius: 12rpx;
								}
							}

							.consumer-trend-line-icon-txt {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #8C8C8C;
								line-height: 40rpx;
							}
						}

					}
				}

				.school-report-context-card-six {
					height: 1590rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin: 0 0 40rpx;

					.school-report-context-card-six-conclusion {
						margin: 40rpx 0 57rpx;

						.school-report-context-card-six-conclusion-item {
							margin: 0 40rpx 0 30rpx;
							height: 120rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;

							.abnormal-date {
								color: #04B871;
							}
						}
					}

					.mealtime-trends {
						.mealtime-trends-theme {
							height: 42rpx;
							padding: 0 49rpx 0 30rpx;
							box-sizing: border-box;
							display: flex;

							.meal-type {
								font-size: 30rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: rgba(0, 0, 0, 0.85);
								line-height: 42rpx;
							}

							.user-meal-time {
								width: 144rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin: 0 32rpx 0 143rpx;
							}

							.class-meal-time {
								width: 234rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
							}

							.user-meal-time-logo {
								display: flex;
								align-items: center;
								margin-right: 10rpx;

								.user-meal-time-logo-left,
								.user-meal-time-logo-right {
									width: 8rpx;
									height: 1rpx;
									background: #0BDA7D;
								}

								.user-meal-time-logo-middle {
									width: 12rpx;
									height: 12rpx;
									background: #FFFFFF;
									border: 3rpx solid #0BDB7E;
									border-radius: 12rpx;
								}
							}

							.user-meal-time-txt {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #8C8C8C;
							}
						}
					}

					#breakfast-time-line {
						position: relative;
						top: -95rpx;
						left: 24rpx;
						z-index: 100;
					}

					#lunch-time-line {
						position: relative;
						top: -228rpx;
						left: 24rpx;
						z-index: 100;
					}

					#dinner-time-line {
						position: relative;
						top: -376rpx;
						left: 24rpx;
						z-index: 100;
					}
				}

				.school-report-context-card-seven {
					height: 645rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin: 0 0 40rpx;

					.school-report-context-card-seven-conclusion {
						margin: 40rpx 0 50rpx;

						.school-report-context-card-seven-conclusion-item {
							margin: 0 40rpx 0 30rpx;
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;

							.abnormal-date {
								color: #04B871;
							}
						}
					}

					.meal-pal-bar-unit {
						height: 33rpx;
						display: flex;
						justify-content: center;

						.meal-pal-bar-unit-item {
							width: 180rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.meal-pal-bar-icon {
								width: 20rpx;
								height: 20rpx;
								background: linear-gradient(360deg, #04B871 0%, #07D66A 100%);
								border-radius: 4rpx;
							}

							.meal-pal-bar-txt {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #8C8C8C;
								line-height: 33rpx;
							}
						}
					}

					#meal-pal-bar {
						position: relative;
						top: -106rpx;
						left: 18rpx;
						z-index: 100;
					}
				}

				.school-report-context-card-eight {
					background: #FFFFFF;
					border-radius: 16rpx;
					margin: 0 0 40rpx;

					.school-report-context-card-eight-conclusion {
						margin: 40rpx 0 30rpx;

						.school-report-context-card-eight-conclusion-item {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;
							padding-left: 30rpx;
							box-sizing: border-box;

							&.eight-conclusion-nodata {
								text-align: center;
								color: orangered;
								padding: 0;
							}

							.txt-important {
								color: #04B871;
								margin: 0 4rpx;
							}
						}
					}

					.school-report-context-card-eight-details {
						.consumer-details-header {
							height: 74rpx;
							background: #F0F0F0;
							padding: 19rpx 0;
							box-sizing: border-box;
							display: flex;
							justify-content: space-around;
							align-items: center;

							.consumer-details-header-item {
								font-size: 26rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: rgba(0, 0, 0, 0.85);
							}
						}

						.consumer-details-body-box {
							max-height: 630rpx;
							overflow: auto;

							.consumer-details-body {
								height: 74rpx;
								border-radius: 47rpx;
								display: flex;
								margin: 16rpx 0 0;

								.consumer-details-body-item {
									width: calc(17%);
									text-align: center;
									font-size: 26rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.75);
									line-height: 74rpx;

									&.consumer-details-body-data {
										font-family: DINPro-Medium, DINPro;
										font-weight: 500;
										color: rgba(0, 0, 0, 0.85);
									}
								}
							}
						}

						.consumer-details-body-notice-box {
							margin: 16rpx 0 23rpx;
							height: 40rpx;
							display: flex;
							justify-content: center;

							.consumer-details-body-notice {
								width: 225rpx;
								display: flex;
								justify-content: space-between;

								.consumer-details-body-notice-txt {
									font-size: 28rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.31);
									line-height: 40rpx;
								}

								.consumer-details-body-notice-icon {
									width: 38rpx;
									height: 29rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}
							}
						}

						.consumer-details-sum {
							height: 74rpx;
							display: flex;
							margin: 0 0 16rpx;

							.consumer-details-sum-item {
								width: calc(16.4%);
								text-align: center;
								font-size: 26rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: rgba(0, 0, 0, 0.65);
								line-height: 74rpx;

								&.consumer-details-sum-type {
									font-size: 24rpx;
									color: rgba(0, 0, 0, 0.85);
									text-align: left;
									padding-left: 12rpx;
									box-sizing: border-box;
								}

								.type-unit {
									font-size: 20rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.45);
									text-align: left;
								}
							}

							.consumer-details-sum-item:first-of-type {
								width: calc(18%);
							}
						}
					}
				}

				.school-report-footer {
					height: 169rpx;
					margin: 40rpx 0 43rpx;
					padding: 33rpx 34rpx 42rpx 42rpx;
					box-sizing: border-box;
					background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/extendPermissionsBg.png);
					display: flex;
					justify-content: space-between;

					.school-report-footer-item {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.school-report-footer-item-txt {
							font-size: 34rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
						}

						.school-report-validity {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(123, 80, 53, 0.85);

							.validity-date {
								color: #F9793F;
							}
						}
					}

					.school-report-footer-item-two {
						display: flex;
						align-items: center;

						.school-report-footer-item-btn {
							width: 180rpx;
							height: 61rpx;
							background: linear-gradient(360deg, #F0662B 0%, #FF8646 100%);
							border-radius: 49rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}

			// 出入校报告
		}

		.no-open {
			width: 100%;
			position: absolute;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.97) 38%, #FFFFFF 100%);
			padding: 309rpx 30rpx 63rpx;
			box-sizing: border-box;
			z-index: 101;

			.no-open-solution {
				height: 40rpx;
				width: 100%;
				display: flex;
				align-items: center;
				margin: 0 0 40rpx;

				.no-open-solution-txt {
					margin: 0 9rpx 0 88rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #04B871;
					line-height: 40rpx;
				}

				.no-open-solution-item {
					width: 15rpx;
					height: 20rpx;
					background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/rightArrow.png);
				}
			}

			.open-results {
				border-radius: 16rpx;

				.open-results-title {
					width: 100%;
					height: 83rpx;
					background: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/openbgm.png) center/100% no-repeat;
					border-radius: 16rpx 16rpx 0 0;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #21775C;
					display: flex;
					justify-content: center;
					align-items: center;

					&.consume-open-results-title {
						background: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/consumeOpenbgm.png) center/100% no-repeat;
					}
				}

				.open-results-items {
					width: 100%;
					height: 379rpx;
					background: #F6FAF9;
					border-radius: 16rpx;
					padding: 32rpx 0 43rpx 73rpx;
					box-sizing: border-box;

					&.consume-open-results-items {
						padding: 44rpx 0 0 34rpx;
						box-sizing: border-box;
						// height: 473rpx;
						height: 340rpx;
					}

					.open-results-items-summary {
						width: 100%;
						height: 45rpx;
						display: flex;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #217456;
						margin: 0 0 26rpx;

						.summary-item {
							font-size: 32rpx;
							line-height: 45rpx;
						}

						.summary-item-icon {
							font-size: 40rpx;
							line-height: 45rpx;
						}

						.attendance-report-icon {
							margin: 0 35rpx 0 134rpx;
						}

						.pubTalk-report-icon {
							margin: 0 35rpx 0 102rpx;
						}
					}

					.consume-open-results-items-details {
						.consume-open-results-items-details-item {
							display: flex;
							height: 80rpx;
							margin: 0 0 55rpx;

							.details-item-left {
								width: 313rpx;

								.details-item-up {
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #13664C;
									line-height: 40rpx;
								}

								.details-item-down {
									display: flex;
									align-items: center;

									.details-item-down-txt {
										font-size: 24rpx;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: rgba(19, 102, 76, 0.7);
										line-height: 33rpx;
									}

									.dining-situations-img {
										width: 26rpx;
										height: 21rpx;
										background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/repast.png);
									}

									.meal-pal-img {
										width: 26rpx;
										height: 22rpx;
										background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/mealPal.png);
									}

									.consumer-num-img {
										width: 22rpx;
										height: 25rpx;
										background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/consumerNum.png);
									}

									.consumer-preference-img {
										width: 25rpx;
										height: 23rpx;
										background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/consumerPreference.png);
									}

									.consumer-trend-img {
										width: 24rpx;
										height: 24rpx;
										background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/consumerTrend.png);
									}

									.time-trends-img {
										width: 25rpx;
										height: 25rpx;
										background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/timeTrends.png);
									}
								}
							}
						}
					}

					.open-results-items-details {
						.open-results-items-details-item {
							width: 100%;
							height: 40rpx;
							margin: 0 0 24rpx;
							display: flex;
							align-items: center;

							.open-results-items-details-item-txt {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #13664C;
								line-height: 40rpx;
							}

							// 出入校报告
							.admission-notice-img {
								width: 30rpx;
								height: 27rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/admissionNotice.png);
								margin-right: 23rpx;
							}

							.admission-analysis-img {
								width: 30rpx;
								height: 32rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/admissionAnalysis.png);
								margin: 0 25rpx 0 135rpx;
							}

							.admission-record-img {
								width: 29rpx;
								height: 31rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/admissionRecord.png);
								margin-right: 24rpx;
							}

							.admission-image-img {
								width: 29rpx;
								height: 29rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/admissionImage.png);
								margin-right: 24rpx;
							}

							// 公话报告
							.video-call-img {
								width: 31rpx;
								height: 24rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/videoCall.png);
								margin-right: 21rpx;
							}

							.communication-advice-img {
								width: 38rpx;
								height: 31rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/communicationAdvice.png);
								margin: 0 24rpx 0 165rpx;
							}

							.voice-call-img {
								width: 25rpx;
								height: 34rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/voiceCall.png);
								margin-right: 26rpx;
							}

							.call-count-img {
								width: 30rpx;
								height: 30rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/callCount.png);
								margin: 0 31rpx 0 165rpx;
							}

							.leave-word-img {
								width: 30rpx;
								height: 28rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/leaveWord.png);
								margin-right: 22rpx;
							}

							.call-duration-img {
								width: 31rpx;
								height: 35rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/callDuration.png);
								margin: 0 23rpx 0 165rpx;
							}

							.face-call-img {
								width: 32rpx;
								height: 31rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/faceCall.png);
								margin-right: 21rpx;
							}

							.leave-word-analysis-img {
								width: 31rpx;
								height: 31rpx;
								background: no-repeat center/100% url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/SchoolReport/leaveWordAnalysis.png);
								margin: 0 23rpx 0 165rpx;
							}
						}
					}
				}
			}
		}

	}
</style>
