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.
424 lines
9.1 KiB
424 lines
9.1 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"> |
|
<view @click="changeUser">{{params.nickName || '负责人'}} |
|
<uni-icons type="forward"></uni-icons> |
|
</view> |
|
<view> |
|
<picker :range="areaList" range-key="areaName" @change="changeArea"> |
|
<view class="uni-input"> |
|
<text class="special">{{params.provinceName || '省份'}}</text> |
|
<uni-icons style="vertical-align: top;" type="forward"></uni-icons> |
|
</view> |
|
</picker> |
|
</view> |
|
<view> |
|
<uni-datetime-picker type="daterange" @change="changeDatetime"> |
|
{{dataTime.start || '开始时间'}} ~ {{dataTime.end || '结束时间'}} |
|
<uni-icons type="forward"></uni-icons> |
|
</uni-datetime-picker> |
|
</view> |
|
</view> |
|
<view class="overview"> |
|
<view>{{info.revenueAmountCount || '- - '}}元</view> |
|
<view>GMV总金额</view> |
|
<view> |
|
<text>总毛利：{{info.grossProfitCount || '- - '}}元</text> |
|
<text>毛利率：{{info.grossMargin || '- - '}}%</text> |
|
</view> |
|
</view> |
|
<view class="title">省份排名：</view> |
|
<view style="flex:1;overflow: hidden;margin-top: 35rpx;"> |
|
<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"> |
|
<view class="container"> |
|
<view class="item" v-for="item,index in tableList" :key="index" @click="jumpDetail(item)"> |
|
<view class="sequence" :class="['first','second','third'][index] || ''">{{ |
|
index < 3 ? '' : index + 1 |
|
}}</view> |
|
<view class="info"> |
|
<view> |
|
<text>{{item.provinceName}}</text> |
|
<text>动销油站（<text style="color: #ff0000;">{{item.siteDXCount}}</text>）</text> |
|
<text>{{item.revenueAmountCount || '- - '}}元</text> |
|
</view> |
|
<view> |
|
<view :style="{ |
|
width:(item.revenueAmountCount/denominator * 100 > 2 |
|
? item.revenueAmountCount/denominator * 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> |
|
<charge v-model="controlWindows.charge" @chargeChange='chargeChange' /> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import serve from '@/api/dataStatistics/networkPoint.js' |
|
|
|
import charge from './components/charge.vue' |
|
export default { |
|
components: { |
|
charge |
|
}, |
|
data() { |
|
return { |
|
controlWindows: { |
|
charge: false |
|
}, |
|
dataTime: { |
|
start: '', |
|
end: '' |
|
}, |
|
styles: {}, |
|
areaList: [], |
|
params: { |
|
businessLeader: '', |
|
nickName: '', |
|
provinceName: '', |
|
dateStartTime: '', |
|
dateEndTime: '' |
|
}, |
|
tableList: [], |
|
denominator: '', |
|
info: {}, |
|
|
|
} |
|
}, |
|
onLoad() { |
|
this.styles = uni.getMenuButtonBoundingClientRect() |
|
this.getCheckInfo() |
|
this.initDate() |
|
this.seachFn() |
|
|
|
|
|
}, |
|
|
|
methods: { |
|
getNetworkCount() { |
|
|
|
serve.getNetworkCount(this.params).then(res => { |
|
if (res.code === 20000) { |
|
let { |
|
grossMargin, |
|
grossProfitCount, |
|
revenueAmountCount |
|
} = res.data |
|
this.info = { |
|
grossMargin: this.toFixed2Handle(grossMargin), |
|
grossProfitCount: this.toFixed2Handle(grossProfitCount), |
|
revenueAmountCount: this.toFixed2Handle(revenueAmountCount) |
|
} |
|
this.denominator = revenueAmountCount |
|
} |
|
}) |
|
}, |
|
chargeChange(item) { |
|
let { |
|
id, |
|
nickName |
|
} = item |
|
this.params.businessLeader = id |
|
this.params.nickName = nickName |
|
this.seachFn() |
|
}, |
|
initDate() { |
|
let yesterday = new Date().getTime() - 86400000 |
|
let { |
|
year, |
|
month, |
|
day |
|
} = this.dateHandle(yesterday) |
|
this.dataTime.start = this.dataTime.end = `${year}-${month}-${day}` |
|
}, |
|
dateHandle(datetime) { |
|
let date = new Date(datetime) |
|
let year = date.getFullYear() |
|
let month = date.getMonth() + 1 |
|
let day = date.getDate() |
|
return { |
|
year, |
|
month, |
|
day |
|
} |
|
}, |
|
jumpDetail(item) { |
|
uni.navigateTo({ |
|
url: `./province?info=${encodeURIComponent(JSON.stringify({ |
|
dataTime:this.dataTime, |
|
item |
|
}))}` |
|
}) |
|
}, |
|
changeUser() { |
|
this.controlWindows.charge = true |
|
}, |
|
changeArea(event) { |
|
let index = event.detail.value |
|
this.params.provinceName = index == 0 ? '' : this.areaList[index].areaName |
|
this.seachFn() |
|
}, |
|
changeDatetime(value) { |
|
let [start, end] = value |
|
this.dataTime.start = start |
|
this.dataTime.end = end |
|
this.seachFn() |
|
}, |
|
async seachFn() { |
|
this.tableList = [] |
|
let { |
|
start, |
|
end |
|
} = this.dataTime |
|
this.params.dateStartTime = start + ' 00:00:00' |
|
this.params.dateEndTime = end + ' 23:59:59' |
|
await this.getNetworkCount() |
|
this.getByPage() |
|
|
|
}, |
|
getByPage() { |
|
serve.getByProvince(this.params).then(res => { |
|
if (res.code === 20000) { |
|
this.tableList = res.data.filter(item => { |
|
if(item.provinceName) return item |
|
}).map((item, index) => { |
|
item.grossMargin = this.toFixed2Handle(item.grossMargin) |
|
item.grossProfitCount = this.toFixed2Handle(item.grossProfitCount) |
|
item.revenueAmountCount = this.toFixed2Handle(item.revenueAmountCount) |
|
return item |
|
}); |
|
} |
|
|
|
}) |
|
}, |
|
toFixed2Handle(value) { |
|
if (!value && value != 0) { |
|
return '' |
|
} |
|
return +value.toFixed(2) + '' |
|
}, |
|
getCheckInfo() { |
|
serve.getCheckInfo().then(res => { |
|
if (res.code == 20000) { |
|
this.areaList = res.data.areaCodeList |
|
this.areaList.unshift({ |
|
areaName: '全部' |
|
}) |
|
} |
|
}) |
|
}, |
|
// // 触底加载 |
|
// scrolltolower() { |
|
// this.paramter.currentPage += 1 |
|
// this.getByPage() |
|
|
|
// }, |
|
|
|
back() { |
|
uni.navigateBack() |
|
}, |
|
jump(item) { |
|
uni.navigateTo({ |
|
url: `./details?details=${item.details}` |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
// .uni-easyinput__content { |
|
// background-color: #fff; |
|
// } |
|
|
|
.header { |
|
position: relative; |
|
width: 100%; |
|
background: #2866FF; |
|
// min-height: 403rpx; |
|
// background: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png') center/100% no-repeat; |
|
} |
|
|
|
.options { |
|
display: flex; |
|
margin-top: 30rpx; |
|
padding: 0 33rpx; |
|
|
|
>view { |
|
|
|
&:nth-of-type(1), |
|
&:nth-of-type(2), |
|
{ |
|
flex: 1; |
|
} |
|
|
|
&:nth-of-type(3), |
|
{ |
|
flex: 2.5; |
|
} |
|
} |
|
|
|
.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) { |
|
// margin-top: 5rpx; |
|
text-align: center; |
|
font-size: 20rpx; |
|
color: #fff; |
|
} |
|
|
|
&:nth-of-type(3) { |
|
margin-top: 45rpx; |
|
display: flex; |
|
justify-content: space-between; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
|
|
.title { |
|
margin-top: 34rpx; |
|
padding-left: 33rpx; |
|
font-size: 28rpx; |
|
} |
|
|
|
.container { |
|
// margin-top: ; |
|
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: 135rpx; |
|
font-weight: 550; |
|
} |
|
|
|
&:nth-of-type(2) { |
|
margin-left: 25rpx; |
|
} |
|
|
|
&:nth-of-type(3) { |
|
|
|
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; |
|
padding-left: 97rpx; |
|
color: #666666; |
|
font-size: 24rpx; |
|
|
|
>text { |
|
&:nth-of-type(2) { |
|
float: right; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|