<template>
	<view class="tainer" :style="{height:containerHeight+'rpx'}">
		<view v-if="showReport">
			<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">
				<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)">
							<text>消费报告</text>
						</view>
						<view v-if="isAttendanceService" class="school-report-context-tab-item-one"
							:class="tabIndex==2?'active':''" @tap="tabTap(2)">
							<text>出入校报告</text>
						</view>
						<view v-if="isPubTalkService" class="school-report-context-tab-item-one"
							:class="tabIndex==3?'active':''" @tap="tabTap(3)">
							<text>公话报告</text>
						</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 :class="['consumer-report-bgImg','attendance-report-bgImg','pubTalk-report-bgImg'][tabIndex-1]">
				</view>
				<view class="school-report-context-card">
					<view class="school-report-context-card-one" :style="{height:[598,256,525][tabIndex-1]+'rpx'}">
						<view :class="['consumer-report-img','attendance-report-img','pubTalk-report-img'][tabIndex-1]">
						</view>
						<!-- 消费报告 -->
						<view v-show="tabIndex==1" 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">
									<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.consumerAmount}}</text>元,超过全校
									<text class="txt-important">{{consumerAmountObj.exceedRate}}%</text>
									的同学<text v-if="isReasonable">,请及时评估生活费是否合理</text>
								</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 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>
						<!-- 出入校报告 -->
						<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-two">
						<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-two-conclusion">
							<view class="school-report-context-card-two-conclusion-txt">
								<text>本{{['月','周'][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="../../static/images/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="../../static/images/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="../../static/images/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-if="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">
								<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>
							</view>
						</view>
						<view id="consumer-preferences-pie">
						</view>
					</view>
					<view v-if="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">
								<text>消费<text
										class="consume-total">{{consumerAmountObj.consumerAmount}}</text>元，超过全校<text
										class="consume-total">{{consumerAmountObj.exceedRate}}%</text>的同学<text
										v-if="isReasonable">，请及时评估生活费是否合理</text></text>
							</view>
						</view>
						<view class="consume-total-img">
							<view class="school-average" :style="{height:schoolAverageHeight+'rpx'}">
								<view class="school-average-num">
									<text>{{consumerAmountObj.schoolAmount}}</text>
								</view>
								<view class="school-average-img">
									<image src="../../static/images/greenArrow.png" mode=""></image>
								</view>
							</view>
							<view class="user-consume" :style="{height:userConsumeHeight+'rpx'}">
								<view class="user-consume-num">
									<text>{{consumerAmountObj.consumerAmount}}</text>
								</view>
								<view class="user-consume-img">
									<image src="../../static/images/yellowArrow.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="consume-total-img-des">
							<view class="consume-total-img-des-item school-average-des">
								<text>全校平均</text>
							</view>
							<view class="consume-total-img-des-item">
								<text>本人消费</text>
							</view>
						</view>
					</view>
					<view v-if="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 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>
						<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==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>
								</template>
							</van-calendar>
						</view>
					</view>
					<view v-if="tabIndex==2&&attendanceReportDatail.length" class="attendance-report-context-details">
						<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-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="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>
											</view>
											<view class="attendance-report-details-img-item">
												<view class="attendance-report-time-details">
													<view v-if="item.describeContent!='当日早到冠军'"
														class="attendance-report-time-details-item">
														<text>{{item.describeContent}}</text>
													</view>
													<view class="attendance-report-time-details-icon">
													</view>
												</view>
												<view class="attendance-report-details-img-box">
													<image v-if="item.attendImage" :src="item.attendImage" mode=""
														@click="imageClick(item.attendImage)">
													</image>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<van-dialog v-model="imageDialogShow" width="620rpx">
						<view class="image-dialog">
							<image :src="imageDialogSrc" mode=""></image>
						</view>
					</van-dialog>
					<!-- 公话报告 -->
					<view v-show="tabIndex==3" class="pubTalk-report-context-card-two">
						<view class="school-report-context-card-title">
							<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="isOpen||isPubTalkOpen||isAttendanceOpen" 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="flag==tabIndex" class="no-open"
				:style="{height:[915,845,891][tabIndex-1]+'rpx',top:[1425,1099,1260][tabIndex-1]+'rpx'}">
				<view class="no-open-solution" @tap="equityPay">
					<view class="no-open-solution-txt">
						<text>最低{{memberInfo.leastAmount||''}}元/天开通，查看完整{{['消费','出入校','公话'][tabIndex-1]}}报告</text>
					</view>
					<view class="no-open-solution-item">
					</view>
				</view>
				<view class="open-results">
					<view class="open-results-title">
						<text>开通后，你将解锁</text>
					</view>
					<view class="open-results-items">
						<view class="open-results-items-summary">
							<view class="summary-item">
								<text>{{['月度消费报告','实时推送','音视频通话'][tabIndex-1]}}</text>
							</view>
							<view class="summary-item-icon"
								:class="['consumer-report-icon','attendance-report-icon','pubTalk-report-icon'][tabIndex-1]">
								<text>+</text>
							</view>
							<view class="summary-item">
								<text>{{['消费总结','月度出入校报告','月度公话报告'][tabIndex-1]}}</text>
							</view>
						</view>
						<view class="open-results-items-details">
							<!-- 消费报告 -->
							<view v-if="tabIndex==1">
								<view class="open-results-items-details-item">
									<view class="dining-situations-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>就餐情况分析</text>
									</view>
									<view class="consumer-rationality-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>消费合理性</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="consumer-preference-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>消费偏好分析</text>
									</view>
									<view class="consumer-advice-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>消费建议</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="consumer-num-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>生活费额度分析</text>
									</view>
								</view>
								<view class="open-results-items-details-item">
									<view class="consumer-trend-img">
									</view>
									<view class="open-results-items-details-item-txt">
										<text>消费趋势分析</text>
									</view>
								</view>
							</view>
							<!-- 出入校报告 -->
							<view v-else-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">
			<view class="nodataImg">
				<img style="width: 100%"
					src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/purchaseChart.gif" />
			</view>
			<view class="nodataTxt">
				<text>当前为使用高峰期，请稍后再试</text>
			</view>
		</view>
		<van-dialog class="htmlCanvas" id="htmlCanvas" ref="imgCanvas" v-model="dialogShow" confirm-button-text='长按保存'
			close-on-click-overlay style="width: 100%; max-height: 80% !important;overflow: scroll">
		</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 {
				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: 1,
				// 就餐情况
				diningSituations: {
					diningSituationsDate: '',
					diningSituationsRequestDate: '',
					notRepastDay: '',
					notRepastDetails: {},
					notRepastDetailsDTOS: [],
					cateringLevel: '',
					notCateringNumber: '',
					notCateringType: ''
				},
				// 消费偏好
				pieDatas: [],
				isEatLow: false,
				// 生活费额度
				consumerAmountObj: {},
				isReasonable: false,
				schoolAverageHeight: '',
				userConsumeHeight: '',
				// 消费趋势
				consumerTrend: {},
				isAbnormal: false,
				lineDatas: [],
				// 出入校报告数据
				attendanceSituations: {
					attendanceDate: '',
					abnomalDateList: [],
				},
				imageDialogShow: false,
				imageDialogSrc: '',
				// 公话报告数据
				pubTalkReport: {
					// 通话次数
					callNumberInfoList: [],
					// 通话时长
					callDurationInfoList: [],
					// 亲子留言
					leaveMessageInfoList: []
				},
				// 出入校报告数据
				attendanceReport: {
					abnormalNum: 0,
					abnomalDateList: [],
				},
				attendanceReportDatail: [],
				// 会员信息 
				// 消费
				isOpen: false,
				isService: false,
				// 出入校
				isAttendanceOpen: false,
				isAttendanceService: false,
				// 公话
				isPubTalkOpen: false,
				isPubTalkService: false,
				flag: 0,
				memberInfo: {
					leastAmount: '',
					invalidDateStr: '',
					differDay: ''
				},
				containerHeight: '',
			}
		},
		mounted() {
			if (this.isPeakPeriod()) {
				this.showReport = false;
				return
			}
			this.showReport = true;
			if (new Date().getTime() <= new Date('2022/06/30').getTime()) {
				this.isService = true;
			} else {
				this.queryIsDredgeMember(1001);
			}
			// 有无进出校公话服务
			this.queryIsDredgeMember(2001);
			this.queryIsDredgeMember(3001);
			// 消费报告
			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.isOpen = true;
							this.flag = 0;
							this.memberInfo.invalidDateStr = '2022年6月30日';
							this.memberInfo.differDay = dayjs('2022/06/30').diff(dayjs(), 'day');
							this.containerHeight = 4200;
							this.queryStudentConsumerPreference(1).then(e => this.piechart());
							this.queryDayConsumerTrend(1).then(e => this.linechart(this.reportTypeIndex));
						} else {
							this.queryIsDredgeMember(1002, 1).then(() => {
								this.queryStudentConsumerPreference(1).then(e => this
									.piechart());
								this.queryDayConsumerTrend(1).then(e => this.linechart(this
									.reportTypeIndex));
							});
						}
					})
				} else {
					if (new Date().getTime() <= new Date('2022/06/30').getTime()) {
						this.isOpen = true;
						this.flag = 0;
						this.memberInfo.invalidDateStr = '2022年6月30日';
						this.memberInfo.differDay = dayjs('2022/06/30').diff(dayjs(), 'day');
						this.containerHeight = 4200;
						this.queryStudentConsumerPreference(1).then(e => this.piechart());
						this.queryDayConsumerTrend(1).then(e => this.linechart(this.reportTypeIndex));
					} else {
						this.queryIsDredgeMember(1002, 1).then(() => {
							this.queryStudentConsumerPreference();
							this.queryDayConsumerTrend();
						});
					}
				}
			});
			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.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.queryConsumerTrend();
		},
		methods: {
			// 当天6：30 ~ 9：00，11：30 ~ 12：00， 17：30 ~ 19：00属于高峰期
			isPeakPeriod() {
				let first = this.timeIn("06:30:00", "09:00:00");
				let second = this.timeIn("11:00:00", "12:00:00");
				let three = this.timeIn("17:30:00", "19:00:00");
				console.log(first, "first", second, "second", three, "three");
				return first || second || three;
			},
			/*在某段时间内*/
			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;
				if (num == 1) {
					this.$nextTick(() => {
						if (this.isOpen) {
							this.queryStudentConsumerPreference(1).then(e => this.piechart());
							this.queryDayConsumerTrend(1).then(e => this.linechart(this
								.reportTypeIndex));
						} else {
							this.queryStudentConsumerPreference();
							this.queryDayConsumerTrend();
						}
					})
				} else if (num == 2) {
					this.memberInfo.differDay = '';
					this.memberInfo.invalidDateStr = '';
					this.memberInfo.leastAmount = '';
					this.queryIsDredgeMember(3002).then(() => {
						this.statisAttendanceAbnormal();
						if (this.isAttendanceOpen) {
							this.attendanceReprotDatail(this.dataRangeArr[this.dataRangeIndex].startDate)
								.then(e => {
									if (this.attendanceReportDatail.length) {
										this.containerHeight = 2762;
									} else {
										this.containerHeight = 1904;
									}
								});
						}
					})
				} else {
					this.memberInfo.differDay = '';
					this.memberInfo.invalidDateStr = '';
					this.memberInfo.leastAmount = '';
					this.queryIsDredgeMember(2002).then(e => {
						if (isPubTalkOpen) {
							this.$nextTick(() => {
								this.callNumberBarchart();
								this.callDurationBarchart();
								this.leaveMessageBarchart();
							})
						} else {
							this.callNumberBarchart();
						}
					})
				}
			},
			toImage: function() {
				this.$nextTick(() => {
					html2cancas(document.getElementsByClassName("tainer")[0], {
						useCORS: true,
					}).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 = '100vw';
						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.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
				this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
				if (this.tabIndex == 1) {
					this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
					this.diningSituations.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex]
						.startDate;
					let tmpDate = this.formatDateTwo(this.minDate);
					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.queryConsumerTrend();
					if (this.isOpen) {
						this.queryStudentConsumerPreference(1).then(e => this.piechart());
						this.queryDayConsumerTrend(1).then(e => this.linechart(this.reportTypeIndex));
					} else {
						this.queryStudentConsumerPreference();
						this.queryDayConsumerTrend();
					}
				} else if (this.tabIndex == 2) {
					this.attendanceSituations.attendanceDate = this.formatDate(this.minDate);
					this.statisAttendanceAbnormal();
					this.attendanceReprotDatail(this.dataRangeArr[this.dataRangeIndex].startDate);
				} else {
					this.getPubTalkReport().then(() => {
						this.$nextTick(() => {
							this.callNumberBarchart();
							this.callDurationBarchart();
							this.leaveMessageBarchart();
						})
					})
				}
			},
			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;
								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);
						// 迟到 早退 旷课
						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';
							}
						})
					}
				}
				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()}`;
			},
			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();
				})
			},
			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
					})
				}
			},
			// 查询就餐情况
			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
					})
					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
					})
				}
			},
			// 查询学生消费偏好类型
			async queryStudentConsumerPreference(num) {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryStudentConsumerPreference'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					if (!data.obj) return;
					const tmpObj = data.obj;
					this.isEatLow = tmpObj.canteenAmount / tmpObj.grossAmount < 0.5 ? true : false;
					if (num) {
						this.pieDatas = [
							[{
								name: '正餐',
								value: tmpObj.canteenAmount
							}, {
								name: '超市',
								value: tmpObj.supermarketAmount
							}, {
								name: '其他',
								value: tmpObj.otherAmount
							}]
						]
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 查询生活费额度
			async queryConsumerTrend() {
				try {
					let data = await this.$http.get({
						url: gHost +
							'/report-push/campus-consumer-report/queryConsumerTrend'
					}, {
						schoolId: getQueryParams('schoolId'),
						userId: getQueryParams('userId'),
						startDate: this.dataRangeArr[this.dataRangeIndex].startDate,
						endDate: this.dataRangeArr[this.dataRangeIndex].endDate,
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					if (!data.obj) return;
					this.consumerAmountObj = data.obj;
					this.isReasonable = this.consumerAmountObj.exceedRate >= 40 && this
						.consumerAmountObj.exceedRate <=
						60 ? false : true;
					this.schoolAverageHeight = this.consumerAmountObj.schoolAmount <= this
						.consumerAmountObj
						.consumerAmount ? 139 : 192;
					this.userConsumeHeight = this.consumerAmountObj.consumerAmount <= this
						.consumerAmountObj
						.schoolAmount ? 139 : 192;
				} 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,
					})
					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 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 || {};
				} 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 1001:
							this.isService = data.obj.status;
							break;
						case 1002:
							this.isOpen = data.obj.status;
							if (!this.isOpen) {
								this.flag = 1;
							}
							break;
						case 2001:
							this.isPubTalkService = data.obj.status;
						case 2002:
							this.isPubTalkOpen = data.obj.status;
							if (this.isPubTalkOpen) {
								this.queryMemberValidTime(serviceItemCode);
								this.containerHeight = 3290;
								this.flag = 0;
							} else {
								this.queryMemberConsumerAmount(serviceItemCode);
								this.containerHeight = 2130;
								this.flag = 3;
							}
							break;
						case 3001:
							this.isAttendanceService = data.obj.status;
							break;
						case 3002:
							this.isAttendanceOpen = data.obj.status;
							if (this.isAttendanceOpen) {
								this.queryMemberValidTime(serviceItemCode);
								this.containerHeight = 2762;
								this.flag = 0;
							} else {
								this.queryMemberConsumerAmount(serviceItemCode);
								this.containerHeight = 1944;
								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 = 2340;
						}
					}
				} 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;
		}
	}

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

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

				.user-avatar {
					width: 88rpx;
					height: 88rpx;
					background: no-repeat center/100% url(../../static/images/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(../../static/images/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(../../static/images/grayTriangle.png);
						}
					}
				}
			}
		}

		.school-report-context {
			.school-report-context-tab {
				height: 84rpx;
				padding-left: 40rpx;
				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;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.85);
						display: flex;
						justify-content: center;
						align-items: center;

						&.active {
							background: #E4F9F2;
						}
					}
				}

				.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(../../static/images/share.png);
							margin-right: 11rpx;
						}

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

			.consumer-report-bgImg {
				width: 100%;
				height: 452rpx;
				background: no-repeat center/100% url(../../static/images/consumeReportBg.png);
			}

			.attendance-report-bgImg {
				width: 100%;
				height: 452rpx;
				background: no-repeat center/100% url(../../static/images/attendanceReportBg.png);
			}

			.pubTalk-report-bgImg {
				width: 100%;
				height: 452rpx;
				background: no-repeat center/100% url(../../static/images/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(../../static/images/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: 650rpx;
				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(../../static/images/consumeReport.png);
						position: absolute;
						top: -172rpx;
						left: 160rpx;
					}

					.attendance-report-img {
						width: 428rpx;
						height: 428rpx;
						background: no-repeat center/100% url(../../static/images/attendanceReport.png);
						position: absolute;
						top: -172rpx;
						left: 160rpx;
					}

					.pubTalk-report-img {
						width: 428rpx;
						height: 428rpx;
						background: no-repeat center/100% url(../../static/images/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-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 {
					height: 876rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-two-conclusion {
						height: 40rpx;
						padding: 0 40rpx 0 30rpx;
						box-sizing: border-box;
						margin: 40rpx 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(../../static/images/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(../../static/images/champion.png) no-repeat -4rpx center/100%;
							border-radius: 22rpx;
							width: 88rpx;
							height: 88rpx;
							margin-left: 10rpx;
						}
					}
				}

				.attendance-report-context-details {
					height: 858rpx;
					overflow: scroll;

					.attendance-report-context-card-two-details {
						position: relative;
						top: -30rpx;
						height: 146rpx;
						background: #F5F7F7;
						padding: 57rpx 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(../../static/images/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%;
								display: flex;
								justify-content: space-between;
								position: absolute;
								margin-left: 71rpx;

								.attendance-report-details-item {
									height: 40rpx;

									.attendance-report-time {
										display: flex;
										font-size: 28rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: rgba(0, 0, 0, 0.85);
										line-height: 40rpx;

										.attendance-report-time-item {
											color: #F9793F;
											margin: 0 21rpx 0 15rpx;
										}

										.early-champions {
											width: 183rpx;
											background: #F7E4BB;
											border-radius: 20rpx;
											padding: 0 26rpx 0 23rpx;
											box-sizing: border-box;
											display: flex;
											align-items: center;

											.early-champions-img {
												width: 32rpx;
												height: 29rpx;
												background: no-repeat center/100% url(../../static/images/champions.png);
												margin-right: 2rpx;
											}

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

								.attendance-report-details-img-item {
									display: flex;
									flex-direction: column;
									align-items: flex-end;

									.attendance-report-time-details {
										width: 212rpx;
										display: flex;
										align-items: center;
										justify-content: flex-end;
										margin: 0 0 11rpx;

										.attendance-report-time-details-item {
											font-size: 28rpx;
											font-family: PingFangSC-Regular, PingFang SC;
											font-weight: 400;
											color: #F9793F;
											line-height: 40rpx;
											width: 165rpx;
											height: 40rpx;
											display: flex;
											justify-content: flex-end;
										}

										.attendance-report-time-details-icon {
											width: 21rpx;
											height: 12rpx;
											background: no-repeat center/100% url(../../static/images/arrowUp.png);
											margin-left: 30rpx;
										}
									}

									.attendance-report-details-img-box {
										width: 155rpx;
										height: 95rpx;
										display: flex;
										justify-content: flex-end;

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

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

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

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

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

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

					.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;
							margin-right: 74rpx;
							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%;
								}
							}
						}

						.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;
						justify-content: center;

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

							&.school-average-des {
								margin-right: 74rpx;
							}
						}
					}
				}

				.school-report-context-card-five {
					height: 634rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					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;

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

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

					.consumer-trend-line-icon {
						position: absolute;
						top: 547rpx;
						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-footer {
					height: 169rpx;
					margin: 40rpx 0 43rpx;
					padding: 33rpx 34rpx 42rpx 42rpx;
					box-sizing: border-box;
					background: no-repeat center/100% url(../../static/images/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(../../static/images/rightArrow.png);
				}
			}

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

				.open-results-title {
					width: 100%;
					height: 83rpx;
					background: url(../../static/images/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;
				}

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

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

						.consumer-report-icon {
							margin: 0 45rpx 0 70rpx;
						}

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

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

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

							.dining-situations-img {
								width: 34rpx;
								height: 27rpx;
								background: no-repeat center/100% url(../../static/images/repast.png);
								margin-right: 22rpx;
							}

							.consumer-rationality-img {
								width: 34rpx;
								height: 34rpx;
								background: no-repeat center/100% url(../../static/images/consumerRationality.png);
								margin: 0 22rpx 0 108rpx;
							}

							.consumer-preference-img {
								width: 30rpx;
								height: 27rpx;
								background: no-repeat center/100% url(../../static/images/consumerPreference.png);
								margin-right: 24rpx;
							}

							.consumer-advice-img {
								width: 31rpx;
								height: 31rpx;
								background: no-repeat center/100% url(../../static/images/consumerAdvice.png);
								margin: 0 24rpx 0 112rpx;
							}

							.consumer-num-img {
								width: 30rpx;
								height: 34rpx;
								background: no-repeat center/100% url(../../static/images/consumerNum.png);
								margin-right: 24rpx;
							}

							.consumer-trend-img {
								width: 28rpx;
								height: 25rpx;
								background: no-repeat center/100% url(../../static/images/consumerTrend.png);
								margin-right: 25rpx;
							}

							// 出入校报告
							.admission-notice-img {
								width: 30rpx;
								height: 27rpx;
								background: no-repeat center/100% url(../../static/images/admissionNotice.png);
								margin-right: 23rpx;
							}

							.admission-analysis-img {
								width: 30rpx;
								height: 32rpx;
								background: no-repeat center/100% url(../../static/images/admissionAnalysis.png);
								margin: 0 25rpx 0 135rpx;
							}

							.admission-record-img {
								width: 29rpx;
								height: 31rpx;
								background: no-repeat center/100% url(../../static/images/admissionRecord.png);
								margin-right: 24rpx;
							}

							.admission-image-img {
								width: 29rpx;
								height: 29rpx;
								background: no-repeat center/100% url(../../static/images/admissionImage.png);
								margin-right: 24rpx;
							}

							// 公话报告
							.video-call-img {
								width: 31rpx;
								height: 24rpx;
								background: no-repeat center/100% url(../../static/images/videoCall.png);
								margin-right: 21rpx;
							}

							.communication-advice-img {
								width: 38rpx;
								height: 31rpx;
								background: no-repeat center/100% url(../../static/images/communicationAdvice.png);
								margin: 0 24rpx 0 165rpx;
							}

							.voice-call-img {
								width: 25rpx;
								height: 34rpx;
								background: no-repeat center/100% url(../../static/images/voiceCall.png);
								margin-right: 26rpx;
							}

							.call-count-img {
								width: 30rpx;
								height: 30rpx;
								background: no-repeat center/100% url(../../static/images/callCount.png);
								margin: 0 31rpx 0 165rpx;
							}

							.leave-word-img {
								width: 30rpx;
								height: 28rpx;
								background: no-repeat center/100% url(../../static/images/leaveWord.png);
								margin-right: 22rpx;
							}

							.call-duration-img {
								width: 31rpx;
								height: 35rpx;
								background: no-repeat center/100% url(../../static/images/callDuration.png);
								margin: 0 23rpx 0 165rpx;
							}

							.face-call-img {
								width: 32rpx;
								height: 31rpx;
								background: no-repeat center/100% url(../../static/images/faceCall.png);
								margin-right: 21rpx;
							}

							.leave-word-analysis-img {
								width: 31rpx;
								height: 31rpx;
								background: no-repeat center/100% url(../../static/images/leaveWordAnalysis.png);
								margin: 0 23rpx 0 165rpx;
							}
						}
					}
				}
			}
		}

	}
</style>
