Skip to content

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

1

parent 17f3f6ba
Show whitespace changes
Inline Side-by-side
Showing with 132 additions and 49 deletions
src/pages/ConsumptionReport/ConsumptionReport.vue
View file @ f601ac3a
......@@ -38,15 +38,15 @@
<view class="consumption-report-card-one-item">
<view class="consumption-total-number">
<view class="consumption-total-number-item">
650.80
{{weekConsumerAmout.consumerAmount}}
</view>
<view class="consumption-total-number-trend">
<view class="consumption-total-number-trend-item">
+142.50
{{condition+weekConsumerAmout.compareAmount}}
</view>
<view
class="consumption-total-number-trend-item consumption-total-number-trend-percent">
20%
{{weekConsumerAmout.rate+'%'}}
</view>
</view>
</view>
......@@ -59,7 +59,7 @@
环比上周
</view>
<view class="consumption-total-text-contrast-img">
<image class="consumption-total-text-trend-img" src="../../static/images/trend.png">
<image class="consumption-total-text-trend-img" :src="trendimg">
</image>
</view>
</view>
......@@ -103,11 +103,13 @@
<view class="average-daily-consumption">
<view class="average-daily-consumption-item">
<text>¥</text>
<text class="average-daily-consumption-item-num">{{dayConsumerTrend.userWeekAvgAmount}}</text>
<text
class="average-daily-consumption-item-num">{{dayConsumerTrend.userWeekAvgAmount}}</text>
</view>
<view class="average-daily-consumption-item average-daily-consumption-item-orange">
<text>¥</text>
<text class="average-daily-consumption-item-num">{{dayConsumerTrend.classWeekAvgAmount}}</text>
<text
class="average-daily-consumption-item-num">{{dayConsumerTrend.classWeekAvgAmount}}</text>
</view>
</view>
<view class="average-daily-consumption-contrast">
......@@ -175,7 +177,7 @@
</view>
</view>
<view class="consumption-preferences-list-item-text-cash">
￥{{consumptionPreferencesData[0]}}
￥{{consumptionPreferencesData.canteenAmount}}
</view>
</view>
<view class="consumption-preferences-list-item-proportion">
......@@ -203,7 +205,7 @@
</view>
</view>
<view class="consumption-preferences-list-item-text-cash">
￥{{consumptionPreferencesData[1]}}
￥{{consumptionPreferencesData.supermarketAmount}}
</view>
</view>
<view class="consumption-preferences-list-item-proportion">
......@@ -230,7 +232,7 @@
</view>
</view>
<view class="consumption-preferences-list-item-text-cash">
￥{{consumptionPreferencesData[2]}}
￥{{consumptionPreferencesData.otherAmount}}
</view>
</view>
<view class="consumption-preferences-list-item-proportion">
......@@ -473,16 +475,19 @@
consumerNameIndex: 0,
dataRangeIndex: 0,
consumerNameArr: [], // 学生姓名列表
consumerInfo:[], //家长关联的学生信息
specifiedConsumerInfo:{}, //选择学生的信息
dayConsumerTrend:{}, //日消费趋势数据
consumerInfo: [], //家长关联的学生信息
specifiedConsumerInfo: {}, //选择学生的信息
dayConsumerTrend: {}, //日消费趋势数据
// 周消费要点数据
weekConsumerAmout: {},
condition: '',
trendimg: '',
// 日期范围列表
dataRangeArr: ['12月06日~12月12日', '11月29日~12月05日', '11月22日~11月28日'],
// 日消费趋势图表数据
dailyConsumptionData: [],
dailyConsumptionDate: [],
// 消费偏好数据
consumptionPreferencesData: [372.81, 145.05, 108.34],
consumptionPreferencesData: {}, // 消费偏好数据
}
},
computed: {
......@@ -490,9 +495,7 @@
return this.dailyConsumptionData.map(data => data / Math.max(...this.dailyConsumptionData) * 266)
},
percentArr() {
var consumptionPreferencesTotal = this.consumptionPreferencesData.reduce((preValue, curValue) => preValue +
curValue)
return this.consumptionPreferencesData.map(data => (Math.round(data / consumptionPreferencesTotal *
return this.consumptionPreferencesData.map(data => ((data / this.consumptionPreferencesData.grossAmount *
10000) / 100).toFixed(1) + '%')
},
widthArr() {
......@@ -503,43 +506,45 @@
}
},
mounted() {
this.queryPatriarchByStudent().then(()=>{
this.queryPatriarchByStudent().then(() => {
this.queryDayConsumerTrend()
this.queryWeekConsumerAmout()
this.queryStudentConsumerPreference()
})
this.getDataRangeArr()
},
methods: {
consumerChange(e) {
this.consumerNameIndex = e.target.value
this.specifiedConsumerInfo=this.consumerInfo[this.consumerNameIndex]
this.specifiedConsumerInfo = this.consumerInfo[this.consumerNameIndex]
this.queryDayConsumerTrend()
},
dataRangeChange(e) {
this.dataRangeIndex = e.target.value
},
// 获取当前日期
getNowFormatDate(){
var date=new Date()
var seperator='-'
var year=date.getFullYear()
var month=date.getMonth()+1
var day=date.getDate()
if(month>=1&&month<=9){
month='0'+month
}
if(day>=1&&day<=9){
day='0'+day
}
var currentdate=year+seperator+month+seperator+day
getNowFormatDate() {
var date = new Date()
var seperator = '-'
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (day >= 1 && day <= 9) {
day = '0' + day
}
var currentdate = year + seperator + month + seperator + day
return currentdate
},
// 获取日期范围列表
getDataRangeArr(){
getDataRangeArr() {
console.log(this.getNowFormatDate())
},
// 查询家长关联的学生
queryPatriarchByStudent() {
let this_=this
let this_ = this
return new Promise((resolve, reject) => {
$.ajax({
url: gHost + '/report-push/student-consumer-report/queryPatriarchByStudent',
......@@ -547,13 +552,14 @@
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
phone:getQueryParams('phone')
phone: getQueryParams('phone')
},
success: function(res) {
if(res.code==200){
this_.consumerNameArr=res.obj.map(element=>element.name)
this_.consumerInfo=res.obj
this_.specifiedConsumerInfo=this_.consumerInfo[this_.consumerNameIndex]
if (res.code == 200) {
this_.consumerNameArr = res.obj.map(element => element.name)
this_.consumerInfo = res.obj
this_.specifiedConsumerInfo = this_.consumerInfo[this_
.consumerNameIndex]
}
resolve()
},
......@@ -564,10 +570,53 @@
})
},
// 查询周要点，消费金额
queryWeekConsumerAmout() {
let this_ = this
return new Promise((resolve, reject) => {
$.ajax({
url: gHost + '/report-push/student-consumer-report/queryWeekConsumerAmout',
type: 'get',
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
userId: this_.specifiedConsumerInfo.id,
schoolId: this_.specifiedConsumerInfo.schoolid,
startDate: '2021-12-06',
endDate: '2021-12-12'
},
success: function(res) {
if (res.code == 200) {
this_.weekConsumerAmout = res.obj
this_.weekConsumerTrend(this_.weekConsumerAmout.compareStatus)
}
resolve()
},
error: function(error) {
reject(error)
}
})
})
},
// 周消费趋势箭头
weekConsumerTrend(compareStatus) {
switch (compareStatus) {
case 0:
this.condition = ''
this.trendimg = '../../static/images/trend0.png'
return
case 1:
this.condition = '+'
this.trendimg = '../../static/images/trend.png'
return
case 2:
this.condition = '-'
this.trendimg = '../../static/images/trend2.png'
return
}
},
// 日消费趋势
queryDayConsumerTrend(){
let this_=this
queryDayConsumerTrend() {
let this_ = this
return new Promise((resolve, reject) => {
$.ajax({
url: gHost + '/report-push/student-consumer-report/queryDayConsumerTrend',
......@@ -575,16 +624,46 @@
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
userId:this_.specifiedConsumerInfo.id,
schoolId:this_.specifiedConsumerInfo.schoolid,
startDate:'2021-12-06',
endDate:'2021-12-12'
userId: this_.specifiedConsumerInfo.id,
schoolId: this_.specifiedConsumerInfo.schoolid,
startDate: '2021-12-06',
endDate: '2021-12-12'
},
success: function(res) {
if (res.code == 200) {
this_.dayConsumerTrend = res.obj
this_.dailyConsumptionData = Object.values(this_.dayConsumerTrend
.dayConsumerMap).reverse()
this_.dailyConsumptionDate = Object.keys(this_.dayConsumerTrend
.dayConsumerMap).map(element => element.substr(5).replace('-',
'/')).reverse()
}
resolve()
},
error: function(error) {
reject(error)
}
})
})
},
// 查询学生消费偏好类型
queryStudentConsumerPreference() {
let this_ = this
return new Promise((resolve, reject) => {
$.ajax({
url: gHost + '/report-push/student-consumer-report/queryStudentConsumerPreference',
type: 'get',
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
userId: this_.specifiedConsumerInfo.id,
schoolId: this_.specifiedConsumerInfo.schoolid,
startDate: '2021-12-06',
endDate: '2021-12-12'
},
success: function(res) {
if(res.code==200){
this_.dayConsumerTrend=res.obj
this_.dailyConsumptionData=Object.values(this_.dayConsumerTrend.dayConsumerMap).reverse()
this_.dailyConsumptionDate=Object.keys(this_.dayConsumerTrend.dayConsumerMap).map(element=>element.substr(5).replace('-','/')).reverse()
if (res.code == 200) {
this_.consumptionPreferencesData=res.obj
}
resolve()
},
......@@ -594,6 +673,10 @@
})
})
},
// 消费偏好百分比
consumerPreferencePercent(num){
return (Math.round(num/this.consumptionPreferencesData.grossAmount*10000)/100).toFixed(1)+'%'
}
}
}
</script>
......
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