You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
325 lines
6.9 KiB
325 lines
6.9 KiB
<template> |
|
<view style="height: 100vh;display: flex;flex-direction: column;background: #F0F2FF;"> |
|
<view class="header"> |
|
<view :style="{height:styles.top+'px'}"></view> |
|
<uni-nav-bar @clickLeft='back' :border="false" color='white' backgroundColor="rgba(0,0,0,0)" |
|
left-icon="back" title="网点数据统计" /> |
|
</view> |
|
<view class="options"> |
|
时间：{{dataTime.start}} ~ {{dataTime.end}} |
|
</view> |
|
<view class="overview"> |
|
<view>{{info.revenueAmountCount}}元</view> |
|
<view>{{paramter.params.provinceName}}油站消费总金额</view> |
|
<view> |
|
<text>总毛利：{{info.grossProfitCount}}元</text> |
|
<text>毛利率：{{info.grossMargin}}%</text> |
|
</view> |
|
</view> |
|
<view class="category"> |
|
<text v-for="item,index in menuList" :key="index" :class="currentIndex == index ? 'active':''" |
|
@click="changeCategory(index,item)">{{item.label}}</text> |
|
</view> |
|
<view style="flex:1;overflow: hidden;margin-top: 55rpx;"> |
|
<view v-if="!tableList.length" |
|
style="width: 100vw; height: 100%; display: flex;align-items: center;justify-content: center;"> |
|
<image src="@/static/qx.png" style="width: 500rpx; height: 355rpx;"></image> |
|
</view> |
|
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'> |
|
<view class="container"> |
|
<view class="item" v-for="item,index in tableList" :key="index"> |
|
<view class="sequence" :class="['first','second','third'][index] || ''">{{ |
|
index < 3 ? '' : index + 1 |
|
}}</view> |
|
<view class="info"> |
|
<view> |
|
<text>{{item.siteName || item.accountName || ''}}</text> |
|
<text>{{item.revenueAmountCount|| '- - '}}元</text> |
|
</view> |
|
<view> |
|
<view :style="{ |
|
width:(item.revenueAmountCount/info.revenueAmountCount * 100 > 2 |
|
? item.revenueAmountCount/info.revenueAmountCount * 100 |
|
: 2) |
|
+ '%'}"> |
|
</view> |
|
</view> |
|
<view> |
|
<text>总毛利：{{item.grossProfitCount|| '- - '}}元</text> |
|
<text>毛利率：{{item.grossMargin|| '- - '}}%</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
<view style="height: 50rpx;"></view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import serve from '@/api/dataStatistics/networkPoint.js' |
|
|
|
export default { |
|
data() { |
|
return { |
|
styles: {}, |
|
currentIndex: 0, |
|
paramter: { |
|
currentPage: 1, |
|
pageSize: 10, |
|
params: { |
|
provinceName: '', |
|
dateStartTime: '', |
|
dateEndTime: '', |
|
type: '1' |
|
} |
|
}, |
|
|
|
tableList: [], |
|
denominator: '', |
|
menuList: [{ |
|
value: '1', |
|
label: '油站排名' |
|
}, |
|
{ |
|
value: '2', |
|
label: '油站账户排名' |
|
}, |
|
], |
|
info: {}, |
|
dataTime: {} |
|
} |
|
}, |
|
onLoad(options) { |
|
this.styles = uni.getMenuButtonBoundingClientRect() |
|
let { |
|
dataTime, |
|
item |
|
} = JSON.parse(decodeURIComponent(options.info)) |
|
this.dataTime = dataTime |
|
this.info = item |
|
this.paramter.params.provinceName = item.provinceName |
|
this.paramter.params.dateStartTime = dataTime.start + ' 00:00:00' |
|
this.paramter.params.dateEndTime = dataTime.end + ' 23:59:59' |
|
this.seachFn() |
|
}, |
|
|
|
methods: { |
|
changeCategory(index, item) { |
|
this.currentIndex = index |
|
this.paramter.params.type = item.value |
|
this.seachFn() |
|
}, |
|
|
|
seachFn() { |
|
this.tableList = [] |
|
this.paramter.currentPage = 1 |
|
|
|
this.getByPage() |
|
}, |
|
getByPage() { |
|
|
|
serve.getByProvincePage(this.paramter).then(res => { |
|
if (res.code === 20000) { |
|
if (this.paramter.currentPage !== 1 && !res.data.list.length) { |
|
uni.showToast({ |
|
title: '没有更多数据了~', |
|
icon: 'none' |
|
}) |
|
return |
|
} |
|
|
|
let filterData = res.data.list.map((item, index) => { |
|
// if (this.paramter.currentPage = 1 && index == 0) { |
|
// this.denominator = item.revenueAmountCount |
|
// } |
|
item.grossMargin = this.toFixed2Handle(item.grossMargin) |
|
item.grossProfitCount = this.toFixed2Handle(item.grossProfitCount) |
|
item.revenueAmountCount = this.toFixed2Handle(item.revenueAmountCount) |
|
return item |
|
}); |
|
|
|
this.tableList = this.tableList.concat(filterData) |
|
} |
|
|
|
}) |
|
}, |
|
toFixed2Handle(value) { |
|
if (!value && value != 0) { |
|
return '' |
|
} |
|
return +value.toFixed(2) + '' |
|
}, |
|
|
|
// 触底加载 |
|
scrolltolower() { |
|
this.paramter.currentPage += 1 |
|
this.getByPage() |
|
|
|
}, |
|
back() { |
|
uni.navigateBack() |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.header { |
|
position: relative; |
|
width: 100%; |
|
background: #2866FF; |
|
} |
|
|
|
.options { |
|
margin-top: 30rpx; |
|
padding: 0 33rpx; |
|
|
|
.special { |
|
display: inline-block; |
|
max-width: 115rpx; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
|
|
.overview { |
|
margin: 27rpx auto 0; |
|
padding: 55rpx 41rpx 0; |
|
width: 684rpx; |
|
height: 285rpx; |
|
color: #333; |
|
background: url('https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/networkPoint-background.png') 100%/100%; |
|
border-radius: 30rpx; |
|
|
|
>view { |
|
&:nth-of-type(1) { |
|
text-align: center; |
|
font-size: 60rpx; |
|
color: #fff; |
|
} |
|
|
|
&:nth-of-type(2) { |
|
text-align: center; |
|
font-size: 20rpx; |
|
color: #fff; |
|
} |
|
|
|
&:nth-of-type(3) { |
|
margin-top: 45rpx; |
|
display: flex; |
|
justify-content: space-between; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
.category { |
|
display: flex; |
|
justify-content: space-evenly; |
|
margin-top: 45rpx; |
|
|
|
>text { |
|
color: #999999; |
|
|
|
&.active { |
|
font-weight: 550; |
|
color: #333; |
|
} |
|
} |
|
} |
|
|
|
.container { |
|
padding: 0 60rpx 0 32rpx; |
|
|
|
.item { |
|
display: flex; |
|
margin-bottom: 35rpx; |
|
|
|
&:nth-last-of-type(1) { |
|
margin-bottom: 0; |
|
} |
|
|
|
.sequence { |
|
position: relative; |
|
top: 3rpx; |
|
width: 60rpx; |
|
height: 60rpx; |
|
font-size: 24rpx; |
|
color: #999999; |
|
line-height: 60rpx; |
|
text-align: center; |
|
|
|
&.first { |
|
background: url('./img/1.png') 100%/100%; |
|
} |
|
|
|
&.second { |
|
background: url('./img/2.png') 100%/100%; |
|
} |
|
|
|
&.third { |
|
background: url('./img/3.png') 100%/100%; |
|
} |
|
} |
|
|
|
.info { |
|
margin-left: 15rpx; |
|
flex: 1; |
|
|
|
>view { |
|
&:nth-of-type(1) { |
|
font-size: 28rpx; |
|
color: #333; |
|
|
|
>text { |
|
&:nth-of-type(1) { |
|
display: inline-block; |
|
width: 400rpx; |
|
font-weight: 550; |
|
} |
|
|
|
&:nth-of-type(2) { |
|
float: right; |
|
color: #333333; |
|
} |
|
} |
|
} |
|
|
|
&:nth-of-type(2) { |
|
position: relative; |
|
margin-top: 15rpx; |
|
width: 100%; |
|
height: 15rpx; |
|
border-radius: 37rpx; |
|
background: #E5E5E5; |
|
|
|
>view { |
|
position: relative; |
|
width: 20%; |
|
height: 15rpx; |
|
border-radius: 37rpx; |
|
background: #2866FF; |
|
} |
|
} |
|
|
|
&:nth-of-type(3) { |
|
margin-top: 5rpx; |
|
color: #666666; |
|
font-size: 24rpx; |
|
|
|
>text { |
|
&:nth-of-type(2) { |
|
float: right; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|