<template> <view class="content flex flex_column"> <view class="p-header" @click="openShlef"> <text>{{curCustomerName||'全部客户'}}</text> <u-icon name="arrow-right"></u-icon> </view> <view class="e-chart"> <view class="card-box" v-if="$hasPermissions('M_salesStatistics_mobile')"> <view class="card-tits"> 销售单 </view> <view class="card-body"> <view class="data-box flex"> <view> <view class="data-amount"> {{allData&&allData.salesTotalQty||0}} </view> <view class="data-label">销售产品数量(个)</view> </view> <view> <view class="data-amount"> <u-count-to :end-val="allData&&allData.salesTotalAmount||0" separator="," :decimals="2"></u-count-to> </view> <view class="data-label">销售金额(元)</view> </view> </view> <qiun-data-charts type="line" :opts="opts" :ontouch="true" :chartData="chartData" @complete="complete" /> </view> </view> <view class="card-box" v-if="allData&&allData.xprhFlag&&$hasPermissions('M_shelfOrderTj_mobile')"> <view class="card-tits"> 货架订单 </view> <view class="card-body"> <view class="data-box flex"> <view> <view class="data-amount"> {{allData&&allData.orderTotalQty||0}} </view> <view class="data-label">取货产品数量(个)</view> </view> <view> <view class="data-amount"> <u-count-to :end-val="allData&&allData.orderTotalAmount||0" separator="," :decimals="2"></u-count-to> </view> <view class="data-label">取货产品金额(元)</view> </view> </view> <qiun-data-charts type="line" :opts="opts1" :ontouch="true" :chartData="chartData1" @complete="complete" /> </view> </view> <view class="card-box" v-if="allData&&allData.xprhFlag&&$hasPermissions('M_tempOrderTj_mobile')"> <view class="card-tits"> 急送订单 </view> <view class="card-body"> <view class="data-box flex"> <view> <view class="data-amount"> {{allData&&allData.tempTotalQty||0}} </view> <view class="data-label">急送产品数量(个)</view> </view> <view> <view class="data-amount"> <u-count-to :end-val="allData&&allData.tempTotalAmount||0" separator="," :decimals="2"></u-count-to> </view> <view class="data-label">急送产品金额(元)</view> </view> </view> <qiun-data-charts type="line" :opts="opts2" :ontouch="true" :chartData="chartData2" @complete="complete" /> </view> </view> </view> <!-- 筛选项 --> <u-popup v-model="showSearch" mode="right" width="70%"> <view class="tabBox"> <view class="tabs"> <view class="flex"> <view :class="item.val==curTab?'active':'all'" v-for="item in placeTab" :key="item.val" @click="tabChange(item)">{{item.name}}</view> </view> </view> <view class="flex align_center" style="padding: 0 30rpx;" v-if="curTab == 6"> <u-input v-model="dateArray" type="select" :clearable="false" placeholder="请选择时间段" @click="showDate=true" /> </view> <view class="form-footer-btn"> <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button> <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button> </view> </view> </u-popup> <!-- 选择日期范围 --> <u-calendar v-model="showDate" ref="rangeDate" @change="dateChange" mode="range"></u-calendar> </view> </template> <script> import { salesStatistics } from '@/api/sales.js' import getDate from '@/libs/getDate.js' export default { data() { return { customerSn: '', curCustomerName: '', chartData: {}, chartData1: {}, chartData2: {}, opts: {}, opts1:{}, opts2:{}, allData: {xprhFlag:true}, showSearch: false, showDate: false, dateArray: '', customBtnStyle: { // 自定义按钮样式 borderColor: this.$config('primaryColor'), backgroundColor: this.$config('primaryColor'), color: '#fff' }, queryPramas:{ beginDate: '', endDate: '', buyerSn: '' }, placeTab: [ { name:'今日', val: '0' }, { name:'昨日', val: '1' }, { name:'本周', val: '2' }, { name:'上周', val: '3' }, { name:'本月', val: '4' }, { name:'上月', val: '5' }, { name:'自定义', val: '6' } ], curTab: '4', searcTab: '', // 实际查询条件 webView: null } }, onLoad() { uni.$on('chooseShelfOk',(data)=>{ this.customerSn = data.customerSn this.curCustomerName = data.customerName this.queryPramas.buyerSn = data.customerSn this.getServerData() }) //#ifdef APP-PLUS this.webView = this.$scope.$getAppWebview(); //#endif // 默认数据 this.tabChange(this.placeTab[2]) }, onReady() { setTimeout(()=>{ this.getServerData() },500) }, onUnload() { uni.$off("chooseShelfOk") }, onNavigationBarButtonTap() { this.showSearch = true this.curTab = this.searcTab }, onBackPress() { if(this.showDate){ this.showDate = false return true } if(this.showSearch){ this.showSearch = false return true } }, methods: { // 时间 change dateChange(date){ this.dateArray = date.startDate + ' ~ ' + date.endDate this.queryPramas.beginDate = date.startDate + ' 00:00:00' this.queryPramas.endDate = date.endDate + ' 23:59:59' }, tabChange(data){ this.curTab = data.val if(data.val == 6){ this.dateArray = '' this.queryPramas.beginDate = '' this.queryPramas.endDate = '' } }, // 重置 handleClean(){ this.tabChange(this.placeTab[2]) this.searcTab = this.placeTab[2].val this.$refs.rangeDate.init() this.showSearch = false this.getServerData() }, complete(data){ console.log(data) }, // 查询 handleSearch(){ if(this.curTab == 6){ if(this.queryPramas.beginDate&&this.queryPramas.endDate){ this.getServerData() this.showSearch = false }else{ uni.showToast({ icon:'none', title: "请选择时间段" }) } }else{ this.getServerData() this.showSearch = false } }, // 格式化折线图数据 getFormatData(categories,data,name){ if(data){ data.map(item => Number(item)) } return { categories: categories, series: [ { name: name, data: data||[], label:{ position: 'top' } }, ] } }, getOpts(data){ return { enableScroll: true, xAxis: { disableGrid: true, itemCount: 4, scrollShow: data.length > 4, scrollAlign:'right' }, yAxis: { gridType: "dash", dashLength: 2 }, } }, getQueryDate(){ const fun = [ getDate.getToday, getDate.getYesterday, getDate.getCurrWeekDays, getDate.getLastWeekDays, getDate.getCurrLastMonthDays, getDate.getLastMonthDays ]; return { beginDate: fun[this.curTab]().starttime, endDate: fun[this.curTab]().endtime } }, getServerData() { let params = {} // 不是自定义时间段 if(this.curTab != 6){ params = this.getQueryDate() } salesStatistics(Object.assign(this.queryPramas,params)).then(res => { console.log(res) if(res.status == 200){ this.allData = JSON.parse(JSON.stringify(res.data)) this.chartData = this.getFormatData(res.data.salesDateList,res.data.salesAmountList,"销售金额") this.opts = this.getOpts(res.data.salesDateList) this.chartData1 = this.getFormatData(res.data.orderDateList,res.data.orderAmountList,"取货产品金额") this.opts1 = this.getOpts(res.data.orderDateList) this.chartData2 = this.getFormatData(res.data.tempDateList,res.data.tempAmountList,"急送产品金额") this.opts2 = this.getOpts(res.data.tempDateList) // 不是自定义时间段 if(this.curTab != 6){ //#ifdef APP-PLUS this.webView.setTitleNViewButtonStyle(0, { "text":"\ue626 "+ this.placeTab[this.curTab].name, "color": "#00aaff", "width": "80px" }); //#endif }else{ //#ifdef APP-PLUS this.webView.setTitleNViewButtonStyle(0, { "text":"\ue626 "+this.queryPramas.beginDate.substr(5,5)+"至"+this.queryPramas.endDate.substr(5,5), "color": "#00aaff", "width": "130px" }); //#endif } this.searcTab = this.curTab } }) }, openShlef(){ uni.navigateTo({ url: "/pages/statistics/chooseShelf?customerSn="+this.customerSn }) } } } </script> <style lang="less"> .content{ height: 100vh; width: 100%; .p-header{ background-color: #fff; text-align: center; padding-bottom: 20rpx; } .e-chart{ flex-grow: 1; padding: 20rpx; font-size: 28rpx; overflow: auto; .card-box{ background-color: #fff; margin-bottom: 20rpx; border-radius: 16rpx; overflow: hidden; > view{ padding: 20rpx; &:first-child{ padding-bottom: 0; } } .card-tits{ font-weight: bold; } .data-box{ padding-bottom: 20rpx; > view{ width: 50%; text-align: center; border-right: 1rpx solid #eee; &:last-child{ border:0; } .data-amount{ font-size: 50rpx; } .data-label{ color: #999; font-size: 24rpx; } } } } .card-body{ overflow: auto; } } // 筛选 .tabBox{ height: 100vh; .tabs{ flex-grow: 1; overflow: auto; padding: 20rpx; > view{ flex-wrap: wrap; justify-content: space-between; > view{ width: 45%; border: 1rpx solid #eee; padding: 15rpx; border-radius: 50rpx; text-align: center; margin-bottom: 15rpx; } .active{ border:0; background-color: #0485F6; color: #fff; } } } .form-item-inp{ border-bottom: 1rpx solid #eee; } .form-footer-btn{ margin: 30upx; display: flex; justify-content: space-between; } .form-footer-btn { display: flex; .handle-btn { font-size: 28upx; margin: 0 10upx; flex: 1; } } } } </style>