Skip to content

X
xzf_uniapp-wechat-web
Commit db16e365 authored by aifen@azjy1.onexmail.com's avatar aifen@azjy1.onexmail.com
Browse files
Options

校园报告—消费报告2

parent 6b116a0e
Hide whitespace changes
Inline Side-by-side
Showing with 32446 additions and 10575 deletions
package-lock.json
View file @ db16e365
This source diff could not be displayed because it is too large. You can view the blob instead.
src/pages/SchoolReport/SchoolReport.vue
View file @ db16e365
<template>
<view class="tainer">
<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>宁哲言</text>
</view>
<view class="class-name">
<text>三年级 2班</text>
<view class="tainer" :style="{height:containerHeight+'rpx'}">
<view>
<view class="school-report-header">
<view class="school-report-header-item">
<view class="user-avatar">
</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 class="user-info">
<view class="user-name">
<text>{{userInfo.userName}}</text>
</view>
<view class="triangle">
<view class="class-name">
<text>{{userInfo.gradeName}} {{userInfo.className}}</text>
</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="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="triangle">
<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>
<view class="school-report-context">
<view class="school-report-context-tab">
<view class="school-report-context-tab-item">
<view class="school-report-context-tab-item-one active">
<text>消费报告</text>
</view>
<view class="school-report-context-tab-item-one">
<text>门禁报告</text>
</view>
<view class="school-report-context-tab-item-one">
<text>公话报告</text>
</view>
</view>
<view class="school-report-context-tab-item-two">
<view class="share-button">
<view class="share-button-img">
<view class="school-report-context">
<view class="school-report-context-tab">
<view class="school-report-context-tab-item">
<view class="school-report-context-tab-item-one active">
<text>消费报告</text>
</view>
<view class="share-button-txt">
<text>分享</text>
<view class="school-report-context-tab-item-one">
<text>门禁报告</text>
</view>
<view class="school-report-context-tab-item-one">
<text>公话报告</text>
</view>
</view>
</view>
</view>
<view class="school-report-context-bgImg">
</view>
<view class="school-report-context-card">
<view class="school-report-context-card-one">
<view class="school-report-context-card-one-img">
</view>
<view 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 class="school-report-context-tab-item-two">
<view class="share-button" @tap="shareHandler">
<view class="share-button-img">
</view>
<view class="school-report-context-card-one-context-txt">
共<text class="txt-important">5</text>次未吃晚餐,请提醒<text class="txt-important">宁哲言</text>
晚餐好好吃,身体才能更健康
<view class="share-button-txt">
<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-bgImg">
</view>
<view class="school-report-context-card">
<view class="school-report-context-card-one">
<view class="school-report-context-card-one-img">
</view>
<view 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-txt">
食堂消费占比<text class="txt-important-two">过低</text>,请及时调整饮食习惯
<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>
<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 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 class="school-report-context-card-one-context-txt">
消费总额 <text class="txt-important">990</text>元,超过全校 <text class="txt-important">80%</text>
的同学,请及时评估生活费是否合理
</view>
</view>
<view 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-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 class="school-report-context-card-two-conclusion">
<view class="school-report-context-card-two-conclusion-txt">
<text>本月共<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 class="school-report-context-card-one-context-txt">
<text class="txt-important-two">12月17日、12月22日</text>的消费金额存在异常,请及时关注
</view>
<view class="school-report-context-card-two-calendar">
<van-calendar :formatter="formatter" :min-date="minDate" :max-date="maxDate"
:default-date="minDate" :row-height="44" :show-title="false" :show-subtitle="false"
:show-mark="false" :poppable="false" :show-confirm="false" :style="{ height: '575rpx' }"
@select="dateSelect" />
</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"
class="school-report-context-card-two-details-meal-img">
<image src="../../static/images/eatted.png" mode=""></image>
</view>
<view v-else 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"
class="school-report-context-card-two-details-meal-img">
<image src="../../static/images/eatted.png" mode=""></image>
</view>
<view v-else 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"
class="school-report-context-card-two-details-meal-img">
<image src="../../static/images/eatted.png" mode=""></image>
</view>
<view v-else class="school-report-context-card-two-details-meal-noeat">
<text>缺</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="school-report-context-card-two">
<view class="school-report-context-card-title">
<view class="school-report-context-card-title-img">
<text>就餐情况</text>
<view v-if="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 class="school-report-context-card-two-conclusion">
<view class="school-report-context-card-two-conclusion-txt">
<text>本月共<text class="abnormal-days">5</text>天就餐异常</text>
<view v-if="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="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 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="school-report-context-card-two-conclusion-logo-item school-report-context-card-two-conclusion-logo-item-right">
<text>未就餐</text>
<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 class="school-report-context-card-two-calendar">
<van-calendar :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' }" />
</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>12月26日</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 class="school-report-context-card-two-details-meal-img">
<image src="../../static/images/eatted.png" mode=""></image>
<view v-if="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>
<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 class="school-report-context-card-two-details-meal-noeat">
<text>缺</text>
<view class="consumer-trend-line-icon-logo-middle">
</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 class="school-report-context-card-two-details-meal-noeat">
<text>缺</text>
<view class="consumer-trend-line-icon-logo-right">
</view>
</view>
<view class="consumer-trend-line-icon-txt">
<text>消费金额</text>
</view>
</view>
</view>
</view>
</view>
<view class="school-report-context-card-three">
<view class="school-report-context-card-title">
<view class="school-report-context-card-title-img">
<text>消费偏好</text>
<view v-if="isOpen" 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>
<view class="school-report-context-card-three-conclusion">
<view class="school-report-context-card-three-conclusion-item">
<text>食堂消费占比<text
class="school-report-context-card-three-conclusion-item-describe">过低</text>，请及时调整饮食习惯</text>
<view class="school-report-footer-item-two">
<view class="school-report-footer-item-btn" @tap="equityPay">
<text>延长权益</text>
</view>
</view>
</view>
</view>
<view 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 v-if="!isOpen" class="no-open">
<view class="no-open-solution">
<view class="no-open-solution-txt">
<text>最低 {{memberInfo.leastAmount}}元/天开通，查看完整消费报告</text>
</view>
<view class="school-report-context-card-four-conclusion">
<view class="school-report-context-card-four-conclusion-item">
<text>消费总额<text class="consume-total">990</text>元，超过全校<text
class="consume-total">80%</text>的同学，请及时评估生活费是否合理</text>
</view>
<view class="no-open-solution-item" @tap="equityPay">
</view>
</view>
<view 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><text class="abnormal-date">12月17日、12月22日</text>的消费金额存在异常，请及时关注</text>
</view>
<view class="open-results">
<view class="open-results-title">
<text>开通后，你将解锁</text>
</view>
</view>
<view 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">2023年12月31日</text>,剩余<text
class="validity-date">8天</text></text>
<view class="open-results-items">
<view class="open-results-items-summary">
<view class="summary-item">
<text>月度消费报告</text>
</view>
<view class="summary-item-icon">
<text>+</text>
</view>
<view class="summary-item">
<text>消费总结</text>
</view>
</view>
</view>
<view class="school-report-footer-item-two">
<view class="school-report-footer-item-btn">
<text>延长权益</text>
<view class="open-results-items-details">
<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>
</view>
</view>
</view>
<van-dialog class="htmlCanvas" id="htmlCanvas" ref="imgCanvas" v-model="dialogShow" show-cancel-button
style="width: 100%; max-height: 80% !important;overflow: scroll">
</van-dialog>
</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'
export default {
name: 'SchoolReport',
data() {
return {
userInfo: {},
reportTypeIndex: 0,
reportTypeArr: ['月报', '周报'],
dataRangeIndex: 0,
......@@ -247,9 +414,43 @@
}],
minDate: new Date('1970/01/01'),
maxDate: new Date(),
imgUrl: '', // 存储base64图片
dialogShow: false,
// 就餐情况
diningSituations: {
diningSituationsDate: '',
diningSituationsRequestDate: '',
notRepastDay: '',
notRepastDetails: {},
notRepastDetailsDTOS: [],
cateringLevel: '',
notCateringNumber: '',
notCateringType: ''
},
// 消费偏好
pieDatas: [],
isEatLow: false,
// 消费总额
consumerAmountObj: {},
isReasonable: false,
schoolAverageHeight: '',
userConsumeHeight: '',
// 消费趋势
consumerTrend: {},
isAbnormal: false,
lineDatas: [],
// 会员信息
isOpen: true,
memberInfo: {
leastAmount: '',
invalidDateStr: '',
differDay: ''
},
containerHeight: '',
}
},
mounted() {
this.onOpen();
let tmpArr = []
// 获取时间
for (let i = 0; i <= 11; i++) {
......@@ -264,10 +465,49 @@
})
}
this.dataRangeArr = tmpArr
this.minDate=new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
this.maxDate=new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
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.queryCampusStudentInfo();
this.queryNotRepastDetails(this.diningSituations.diningSituationsRequestDate, this.diningSituations
.diningSituationsRequestDate, 1);
this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
.dataRangeIndex].endDate, 2);
this.queryConsumerTrend();
if (this.isOpen) {
this.queryStudentConsumerPreference(1).then(e => this.piechart());
this.queryDayConsumerTrend(1).then(e => this.linechart(1));
} else {
this.queryStudentConsumerPreference();
this.queryDayConsumerTrend();
}
},
methods: {
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.zoom = '50%';
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);
......@@ -291,8 +531,23 @@
})
}
this.dataRangeArr = tmpArr;
this.minDate=new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
this.maxDate=new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
this.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
this.diningSituations.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex]
.startDate;
this.queryNotRepastDetails(this.diningSituations.diningSituationsRequestDate, this.diningSituations
.diningSituationsRequestDate, 1);
this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
.dataRangeIndex].endDate, 2);
this.queryConsumerTrend();
if (this.isOpen) {
this.queryStudentConsumerPreference(1).then(e => this.piechart());
this.queryDayConsumerTrend(1).then(e => this.linechart(2));
} else {
this.queryStudentConsumerPreference();
this.queryDayConsumerTrend();
}
} else {
let tmpArr = []
for (let i = 0; i <= 11; i++) {
......@@ -307,10 +562,508 @@
})
}
this.dataRangeArr = tmpArr;
this.minDate=new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
this.maxDate=new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
this.minDate = new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
this.maxDate = new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
this.diningSituations.diningSituationsDate = this.formatDate(this.minDate);
this.diningSituations.diningSituationsRequestDate = this.dataRangeArr[this.dataRangeIndex]
.startDate;
this.queryNotRepastDetails(this.diningSituations.diningSituationsRequestDate, this.diningSituations
.diningSituationsRequestDate, 1);
this.queryNotRepastDetails(this.dataRangeArr[this.dataRangeIndex].startDate, this.dataRangeArr[this
.dataRangeIndex].endDate, 2);
this.queryConsumerTrend();
if (this.isOpen) {
this.queryStudentConsumerPreference(1).then(e => this.piechart());
this.queryDayConsumerTrend(1).then(e => this.linechart(1));
} else {
this.queryStudentConsumerPreference();
this.queryDayConsumerTrend();
}
}
},
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;
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'
}
})
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()}`;;
this.queryNotRepastDetails(dateStr, dateStr, 1);
},
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 = window.innerWidth - 20 + 'px';
mySize.style.height = window.innerHeight - 580 + 'px';
var myChart = 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 1:
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 2:
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 && myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.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, num) {
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
}
switch (num) {
case 1:
this.diningSituations.notRepastDetails = data.obj.notRepastDetailsDTOS[0];
break;
case 2:
this.diningSituations.notRepastDay = data.obj.notRepastDay;
this.diningSituations.notRepastDetailsDTOS = data.obj.notRepastDetailsDTOS;
this.diningSituations.cateringLevel = data.obj.cateringLevel;
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] : '';
break;
}
} 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
}
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
}
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
}
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
})
}
},
// 是否开通消费报告
onOpen() {
// 接口获取
if (this.isOpen) {
this.queryMemberValidTime();
this.containerHeight = 4200;
} else {
this.queryMemberConsumerAmount();
this.containerHeight = 2340;
}
},
// 查询会员消费金额
async queryMemberConsumerAmount() {
try {
let data = await this.$http.get({
url: gHost + '/report-push/member-info/queryMemberConsumerAmount'
}, {
schoolId: getQueryParams('schoolId'),
userId: getQueryParams('userId'),
serviceItemCode: 4001
})
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() {
try {
let data = await this.$http.get({
url: gHost + '/report-push/member-info/queryMemberValidTime'
}, {
schoolId: getQueryParams('schoolId'),
userId: getQueryParams('userId'),
serviceItemCode: 4001
})
if (data.code != 200) {
uni.showToast({
icon: "none",
mask: true,
title: data.msg
})
return
}
this.memberInfo.differDay = data.obj.differDay;
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 + '日';
} catch (e) {
//TODO handle the exception
console.log(e);
uni.showToast({
icon: "none",
mask: true,
title: e.message
})
}
},
equityPay: function() {
jWeixin.miniProgram.redirectTo({
url: `/pages/UserMain/main`,
});
},
},
}
</script>
......@@ -606,19 +1359,42 @@
.school-report-context-card-two-calendar {
height: 575rpx;
/deep/ .van-calendar__month-title{
/deep/ .van-calendar__month-title {
display: none;
}
/deep/ .van-calendar__days{
/deep/ .van-calendar__days {
margin: 10rpx 0 0;
}
/deep/ .van-calendar__day, .van-calendar__selected-day{
margin:0 0 8rpx;
/deep/ .van-calendar__day {
margin: 0 0 8rpx;
}
/deep/ .van-calendar__selected-day{
/deep/ .van-calendar__selected-day {
background: rgba(0, 0, 0, .1);
color: #F9793F;
}
/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: 0 0 4rpx;
}
/deep/ .notice-day {
color: #F9793F;
background: rgba(249, 121, 63, .1);
border-radius: 8rpx;
width: 88rpx;
height: 88rpx;
margin-left: 10rpx;
}
}
.school-report-context-card-two-details {
......@@ -641,6 +1417,8 @@
font-family: FontName;
color: #04B871;
margin-right: 65rpx;
display: flex;
justify-content: center;
}
.school-report-context-card-two-details-meal {
......@@ -725,6 +1503,11 @@
}
}
}
#consumer-preferences-pie {
height: 385rpx;
top: -60rpx;
}
}
.school-report-context-card-four {
......@@ -751,6 +1534,86 @@
}
}
}
.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 {
......@@ -758,6 +1621,7 @@
background: #FFFFFF;
border-radius: 16rpx;
margin-bottom: 37rpx;
position: relative;
.school-report-context-card-five-conclusion {
margin: 40rpx 0 0;
......@@ -776,6 +1640,55 @@
}
}
}
#consumer-trend-line {
position: absolute;
top: 130rpx;
left: 10rpx;
}
.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 {
......@@ -832,5 +1745,147 @@
}
}
}
.no-open {
width: 100%;
height: 915rpx;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.97) 38%, #FFFFFF 100%);
position: absolute;
top: 1425rpx;
padding: 309rpx 30rpx 63rpx;
box-sizing: border-box;
.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;
margin: 0 45rpx 0 70rpx;
}
}
.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;
}
}
}
}
}
}
}
</style>
yarn.lock
View file @ db16e365
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment