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.
635 lines
18 KiB
635 lines
18 KiB
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view class="page_salesman_reportForm">
|
|
<u-navbar title="商品分类统计" :autoBack="true" leftIconSize="0" placeholder>
|
|
<u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon>
|
|
</u-navbar>
|
|
<z-paging ref="paging" v-model="list" @query="queryList">
|
|
<div class="box">
|
|
<div class="statistics">
|
|
<div class="time" @click="show1=true">{{$util.timeStampTurnTime(start_timeone,'yearmonthday')}} ~ {{$util.timeStampTurnTime(end_timeone,'yearmonthday')}}<u-icon name="arrow-down" color="#333333"
|
|
size="14"></u-icon>
|
|
<u-datetime-picker :show="show1" v-model="value1" mode="date" @cancel='show1=false'
|
|
@confirm='confirm'></u-datetime-picker>
|
|
<u-datetime-picker :show="show2" v-model="value2" mode="date" @cancel='show2=false'
|
|
@confirm='confirmtwo'></u-datetime-picker>
|
|
</div>
|
|
<view class="df">
|
|
<div class="statistics-item">
|
|
<div class="label">
|
|
<span></span>
|
|
订单金额
|
|
</div>
|
|
<div class="value">{{total_order_money}}</div>
|
|
</div>
|
|
<div class="statistics-item">
|
|
<div class="label">
|
|
<span></span>
|
|
订单数量
|
|
</div>
|
|
<div class="value">{{total_order_num}}</div>
|
|
</div>
|
|
</view>
|
|
<view class="df">
|
|
<div class="statistics-item">
|
|
<div class="label">
|
|
<span></span>
|
|
退货数量
|
|
</div>
|
|
<div class="value">{{total_order_refund_num}}</div>
|
|
</div>
|
|
<div class="statistics-item">
|
|
<div class="label">
|
|
<span></span>
|
|
退货金额
|
|
</div>
|
|
<div class="value">{{total_order_refund_money}}</div>
|
|
</div>
|
|
</view>
|
|
|
|
|
|
</div>
|
|
<div class="df jcsb" style="margin-top: 40rpx;">
|
|
<div>订货金额 (元)</div>
|
|
<div>订货数量</div>
|
|
</div>
|
|
<div class="chart">
|
|
<lineChart ref="lineChart" :Monthly="report"></lineChart>
|
|
</div>
|
|
</div>
|
|
<view class="df jcsa saixuna">
|
|
<view class="f1 df aic jcsa" v-for="(item,index) in arrangelist" :key="index">
|
|
<view class="df" @click='click(index)' :style="tiaozheng==index?'color:#20BBF3':''">
|
|
{{item.name}}
|
|
<!-- <image :src="$util.img('/upload/weapp/user/topone.png')" mode="" ></image> -->
|
|
<view class="" v-if="tiaozheng==index">
|
|
<view class="" v-if="box&&tiaozheng==0">
|
|
<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="!box&&tiaozheng==0">
|
|
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="box1&&tiaozheng==1">
|
|
<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="!box1&&tiaozheng==1">
|
|
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="box2&&tiaozheng==2">
|
|
<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="!box2&&tiaozheng==2">
|
|
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="box3&&tiaozheng==3">
|
|
<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="!box3&&tiaozheng==3">
|
|
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
|
|
</view>
|
|
<!-- <view class="" v-if="!box">
|
|
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="!box1">
|
|
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="!box2">
|
|
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
|
|
</view>
|
|
<view class="" v-else-if="!box3">
|
|
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
|
|
</view> -->
|
|
</view>
|
|
<view class="" v-if="tiaozheng!=index">
|
|
<image :src="$util.img('/upload/weapp/user/topone.png')" mode="" ></image>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<div class="type-head" v-for="(item,index) in todayStatHome" :key="index" @click="cellClick(item.category_id)">
|
|
|
|
<div class="type-type">{{item.cate_name}}</div>
|
|
<div class="df aic">
|
|
<div class="f1">
|
|
<div class="type-item">订货数量：{{item.order_goods_num}}</div>
|
|
<div class="type-item">退货数量：{{item.order_refund_goods_num}}</div>
|
|
</div>
|
|
<div class="f1">
|
|
<div class="type-items">订货金额：{{item.order_goods_money}}</div>
|
|
<div class="type-items">退货金额：{{item.order_refund_goods_money}}</div>
|
|
</div>
|
|
<div class="imges">
|
|
<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</z-paging>
|
|
<tabbar :tabIndex="1"></tabbar>
|
|
<!-- <u-datetime-picker :show="show" @close="show=false" v-model="time" mode="year-month" confirmColor="#21BBF3"
|
|
closeOnClickOverlay></u-datetime-picker> -->
|
|
<selectPopup ref="selectPopup" :tochild="chilData"></selectPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from "@/components/pageSalesman/tabbar/tabbar.vue"
|
|
import lineChart from "../components/lineChart.vue"
|
|
import selectPopup from "../components/selectPopup.vue"
|
|
export default {
|
|
components: {
|
|
tabbar,
|
|
lineChart,
|
|
selectPopup
|
|
},
|
|
data() {
|
|
return {
|
|
report:{
|
|
report:4,
|
|
day_time:'',
|
|
end_time:''
|
|
},
|
|
box:true,
|
|
box1:false,
|
|
box2:false,
|
|
box3:false,
|
|
tiaozheng:0,
|
|
chilData:'商品分类统计',
|
|
time: '',
|
|
value1: Number(new Date()),
|
|
show1: false,
|
|
value2: Number(new Date()),
|
|
show2: false,
|
|
show: false,
|
|
list:[1],
|
|
arrangelist: [{
|
|
name: '订货数量'
|
|
},
|
|
{
|
|
name: '订货金额'
|
|
},
|
|
{
|
|
name: '退货数量'
|
|
},
|
|
{
|
|
name: '退货金额'
|
|
}
|
|
],
|
|
classificationlist: [{
|
|
classify: '根茎类',
|
|
orderquantity: 1000.00,
|
|
orderamount: 1000.00,
|
|
Returnquantity: 0.00,
|
|
Returnamount: 0.00
|
|
},
|
|
{
|
|
classify: '动物类',
|
|
orderquantity: 1000.00,
|
|
orderamount: 1000.00,
|
|
Returnquantity: 0.00,
|
|
Returnamount: 0.00
|
|
},
|
|
{
|
|
classify: '花叶类',
|
|
orderquantity: 1000.00,
|
|
orderamount: 1000.00,
|
|
Returnquantity: 0.00,
|
|
Returnamount: 0.00
|
|
},
|
|
|
|
],
|
|
statisticsList: [{
|
|
label: '订单笔数',
|
|
value: 5829
|
|
},
|
|
{
|
|
label: '订单金额',
|
|
value: 726382.00
|
|
},
|
|
{
|
|
label: '退货单数',
|
|
value: 9527
|
|
},
|
|
{
|
|
label: '退货金额',
|
|
value: 726382.00
|
|
},
|
|
],
|
|
start_time:'' ,//开始时间
|
|
end_time:'',//结束时间
|
|
start_timeone:'' ,//开始时间
|
|
end_timeone:'',//结束时间
|
|
total_order_money: '',
|
|
total_order_num: '',
|
|
total_order_refund_money: '',
|
|
total_order_refund_num: '',
|
|
todayStatHome:[]
|
|
};
|
|
},
|
|
methods: {
|
|
queryList(pageNo, pageSize) {
|
|
this.$refs.paging.complete(this.list);
|
|
|
|
},
|
|
click(value){
|
|
this.tiaozheng=value
|
|
if(value==0){
|
|
this.box=!this.box
|
|
this.box1=false
|
|
this.box2=false
|
|
this.box3=false
|
|
if(this.box){
|
|
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data:{
|
|
start_time: this.start_time,
|
|
end_time: this.end_time,
|
|
type:1,
|
|
type_sort:1
|
|
},
|
|
success:res=>{
|
|
console.log(res,'订单金额升序');
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
}
|
|
})
|
|
}else{
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data:{
|
|
start_time: this.start_time,
|
|
end_time:this.end_time,
|
|
type:1,
|
|
type_sort:2
|
|
},
|
|
success:res=>{
|
|
console.log(res,'订单金额降序');
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
}
|
|
})
|
|
}
|
|
}
|
|
if(value==1){
|
|
this.box1=!this.box1
|
|
this.box=false
|
|
this.box2=false
|
|
this.box3=false
|
|
if(this.box1){
|
|
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data:{
|
|
start_time: this.start_time,
|
|
end_time:this.end_time,
|
|
type:2,
|
|
type_sort:1
|
|
},
|
|
success:res=>{
|
|
console.log(res,'订单笔数升序');
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
}
|
|
})
|
|
}else{
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data:{
|
|
start_time: this.start_time,
|
|
end_time:this.end_time,
|
|
type:2,
|
|
type_sort:2
|
|
},
|
|
success:res=>{
|
|
console.log(res,'订单笔数降序');
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
}
|
|
})
|
|
}
|
|
}
|
|
if(value==2){
|
|
this.box2=!this.box2
|
|
this.box=false
|
|
this.box1=false
|
|
this.box3=false
|
|
if(this.box2){
|
|
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data:{
|
|
start_time: this.start_time,
|
|
end_time:this.end_time,
|
|
type:3,
|
|
type_sort:1
|
|
},
|
|
success:res=>{
|
|
console.log(res,'退货订单数升序');
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
}
|
|
})
|
|
}else{
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data:{
|
|
start_time: this.start_time,
|
|
end_time:this.end_time,
|
|
type:3,
|
|
type_sort:2
|
|
},
|
|
success:res=>{
|
|
console.log(res,'退货订单数降序');
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
}
|
|
})
|
|
}
|
|
}
|
|
if(value==3){
|
|
this.box3=!this.box3
|
|
this.box=false
|
|
this.box1=false
|
|
this.box2=false
|
|
if(this.box3){
|
|
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data:{
|
|
start_time: this.start_time,
|
|
end_time:this.end_time,
|
|
type:4,
|
|
type_sort:1
|
|
},
|
|
success:res=>{
|
|
console.log(res,'退货金额升序');
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
}
|
|
})
|
|
}else{
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data:{
|
|
start_time: this.start_time,
|
|
end_time:this.end_time,
|
|
type:4,
|
|
type_sort:2
|
|
},
|
|
success:res=>{
|
|
console.log(res,'退退货金额降序');
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
}
|
|
})
|
|
}
|
|
}
|
|
console.log(this.box,'1');
|
|
console.log(this.box1,'2');
|
|
console.log(this.box2,'3');
|
|
console.log(this.box3,'4');
|
|
console.log(value,'value');
|
|
},
|
|
cellClick(category_id) {
|
|
console.log(category_id,'category_id');
|
|
setTimeout(()=>{
|
|
uni.$emit('classification',{
|
|
category_id,
|
|
start_time:this.start_time,
|
|
end_time:this.end_time
|
|
})
|
|
},500)
|
|
uni.navigateTo({
|
|
url: '/page_salesman_reportForm/Salesstatistics_details/Salesstatistics_details'
|
|
})
|
|
},
|
|
confirm(value) {
|
|
this.StatList=value.value
|
|
this.show1 = false
|
|
this.show2=true
|
|
},
|
|
confirmtwo(value){//timeStampTurnTime
|
|
this.end_time = this.times(value.value)
|
|
this.start_time = this.times(this.StatList)
|
|
this.report.day_time=this.times(this.StatList)
|
|
this.report.end_time=this.times(value.value)
|
|
this.$refs.lineChart.roductdivision(this.times(this.StatList),this.times(value.value))
|
|
this.end_timeone = value.value/1000
|
|
this.start_timeone = this.StatList/1000
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data: {
|
|
start_time: this.start_time,
|
|
end_time:this.end_time,
|
|
page:'1',
|
|
page_size:'10'
|
|
},
|
|
success: res => {
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
console.log(res.data, '商品分类列表');
|
|
}
|
|
})
|
|
this.show2=false
|
|
},
|
|
times(num) {
|
|
let now = new Date(Number(num))
|
|
let n = now.getFullYear()
|
|
let y = now.getMonth() + 1
|
|
let r =now.getDate()>=10?now.getDate():0+''+now.getDate()
|
|
return n + '-' + y+'-'+r
|
|
},
|
|
},
|
|
created() {
|
|
// this.$router.go(0)//：刷新；
|
|
// let timestamp = Date.parse(new Date());
|
|
let myDate = new Date()
|
|
let myte=new Date().setDate(1)
|
|
let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
|
|
let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
|
|
let myToday = myDate.getDate(); //获取当前日(1-31)
|
|
myMonth = myMonth > 9 ? myMonth : '0' + myMonth
|
|
myToday = myToday > 9 ? myToday : '0' + myToday
|
|
this.end_timeone = myDate/1000
|
|
this.start_timeone = myte/1000
|
|
|
|
this.report.day_time=this.times(myte)
|
|
this.report.end_time=this.times(myDate)
|
|
this.start_time=myYear +'-'+ myMonth +'-'+ '01'
|
|
// console.log(nowDate,'nowDatenowDatenowDate');
|
|
// this.start_time = this.times(timestamp)
|
|
this.end_time= myYear +'-'+ myMonth +'-'+ myToday
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanstat/goodsCateStatList',
|
|
data: {
|
|
start_time: this.start_time,
|
|
end_time:this.end_time,
|
|
page:'1',
|
|
page_size:'10'
|
|
},
|
|
success: res => {
|
|
this.todayStatHome = res.data.list
|
|
this.total_order_refund_num = res.data.total_order_refund_num
|
|
this.total_order_refund_money = res.data.total_order_refund_money
|
|
this.total_order_num = res.data.total_order_num
|
|
this.total_order_money = res.data.total_order_money
|
|
console.log(res.data, '商品分类列表');
|
|
}
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.saixuna{
|
|
height: 100rpx;
|
|
image{
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.u-tabs {
|
|
width: 100%;
|
|
}
|
|
|
|
.type-head {
|
|
.type-type {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 34rpx;
|
|
margin-left: 36rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
|
|
.type-item {
|
|
padding-top: 8rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666;
|
|
line-height: 34rpx;
|
|
margin-left: 36rpx;
|
|
}
|
|
|
|
.type-items {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 34rpx;
|
|
padding-top: 4rpx;
|
|
}
|
|
.imges {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
border: 1rpx dotted #ccc;
|
|
position: relative;
|
|
margin-right: 24rpx;
|
|
image {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page_salesman_reportForm {
|
|
padding: 32rpx;
|
|
|
|
.list {
|
|
margin-bottom: -26rpx;
|
|
margin-top: 42rpx;
|
|
width: 750rpx;
|
|
height: 108rpx;
|
|
background: #F6F4F6;
|
|
border-radius: 8rpx;
|
|
|
|
}
|
|
|
|
.box {
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 16rpx 32rpx;
|
|
margin-top: 80rpx;
|
|
/* #ifdef APP */
|
|
margin-top: 178rpx !important;
|
|
/* #endif */
|
|
}
|
|
|
|
.statistics {
|
|
|
|
.time {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.statistics-item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
.label {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background: #20BBF3;
|
|
border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
|
|
.value {
|
|
margin-left: 24rpx;
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|