parts_shop_ui_LT/pages/views/salesSlip/tiresalesStatistics.vue

<template>
	<div style="padding-bottom: 40rpx;">
		<view
			style="background-color: #FD4B09;
			font-size: 28rpx;color: #fff;padding:20rpx 0;
			text-align: center;margin-bottom: 20rpx;display: flex;align-items: center;justify-content: space-around;">
			<span style="font-weight: 700;font-size: 32rpx;">{{form.statusDate?form.statusDate.slice(0,7):''}}</span>
			<view style="width: 30%;border: 2rpx solid #fff;padding: 5rpx 0;border-radius: 10rpx;"
				@click="openDate">
				请选择月份
			</view>
		</view>
		<view
			style="display: flex;width: 96%;
			justify-content: space-between;
			margin: 0 auto;padding: 20rpx;
			border-radius: 20rpx;box-sizing: border-box;
			background-color: #fff;">
			<view style="width: 60%;text-align: center;border-right: 1rpx solid #ccc;">
				<view style="display: flex;justify-content: space-around;">
					<view>
						<view style="font-size: 20rpx;">月轮胎销量</view>
						<view style="color: #FD4B09;font-size: 48rpx;">{{customerForm.income}}</view>
					</view>
					<view>
						<view style="font-size: 20rpx;">月客户数量</view>
						<view style="color: #FD4B09;font-size: 48rpx;">{{Number(customerForm.corpsNumber).toFixed(0)}}</view>
					</view>
				</view>
			</view>
			<view style="width: 40%;display: flex;display: flex;justify-content: space-around;">
				<view>
					<view style="font-size: 20rpx;">平均客单价</view>
					<view style="color: #FD4B09;font-size: 48rpx;">￥{{customerForm.averageAmount}}</view>
				</view>
			</view>
		</view>
		
		<view class="qiunbox">
			<view class="charts-box">
			    <qiun-data-charts 
			      type="ring"
			      :opts="opts"
			      :chartData="chartData"
			    />
			</view>
			<view class="spanbzhu">备注:以实际出库为准</view>
		</view>
		
		<view class="qiunbox tableBox">
			<view style="font-size: 30rpx;color:#dd451b;">品牌月销量</view>
			<view class="flexbox" style="position: relative;" v-for="(item,index) of brandSalesData" :key="index">
				<view style="flex:1">{{index + 1}}</view>
				<view style="flex:4" class="shenglv">{{item.cname}}</view>
				<view style="flex:2">{{item.number}}条</view>
				<view style="flex:2">{{Number(item.percentage).toFixed(2)}}%</view>
				<view v-if="index != brandSalesData.length -1" style="position: absolute;width: 100vw;height: 1px;background: #f0f0f0;bottom: 0;left: -50rpx;"></view>
			</view>
		</view>
		
		<view class="qiunbox tableBox">
			<view style="font-size: 30rpx;color:#dd451b;">客户月销量</view>
			<view class="flexbox" style="position: relative;" v-for="(item,index) of corpsSalesData" :key="index">
				<view style="flex:1">{{index + 1}}</view>
				<view style="flex:4" class="shenglv">{{item.cname}}</view>
				<view style="flex:2">{{item.number}}条</view>
				<view style="flex:2">{{Number(item.percentage).toFixed(2)}}%</view>
				<view v-if="index != corpsSalesData.length -1" style="position: absolute;width: 100vw;height: 1px;background: #f0f0f0;bottom: 0;left: -50rpx;"></view>
			</view>
		</view>
		
		<u-datetime-picker :show="pickerShow" v-model="pickerValue" mode="year-month" @confirm="pickerConfirm"></u-datetime-picker>
	</div>
</template>

<script>
	import {
		salesVolumesStatistics,
		brandSalesVolume,
		corpsSalesVolume,
		sizeSalesVolumeProportion
	} from '@/api/views/record/index.js'
	import {
		dateFormat,
		onthelastDay
	} from '@/common/dateFormat'
	export default {
		data(){
			return {
				brandSalesData:[], // 品牌
				corpsSalesData:[], // 销量
				pickerShow:false, // 时间弹窗
				pickerValue:new Date(Date.now()), // 时间弹窗的绑定数据
				form:{
					statusDate:'',
					endDate:onthelastDay(new Date(Date.now())),
				},
				customerForm:{
					lossRate:0
				},
				dataForm:{},
				// Ucherts 展示的数据
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					fontSize:11,
				    rotate: false,
				    rotateLock: false,
				    color: ["#f95959","#f27d0c","#f9b233","#f3e2a9","#D3D3D3"],
				    padding: [5,5,5,5],
				    dataLabel: false,
				    enableScroll: false,
				    legend: {
				      show: true,
				      position: "right",
				      lineHeight: 25,
				    },
				    title: {
				      name: "销售尺寸",
				      fontSize: 15,
				      color: "#dd451b"
				    },
				    subtitle: {
				      name: "",
				      fontSize: 25,
				      color: "#7cb5ec"
				    },
				    extra: {
				      ring: {
				        ringWidth: 20,
				        activeOpacity: 0.5,
				        activeRadius: 10,
				        offsetAngle: 0,
				        labelWidth: 15,
				        border: true,
				        borderWidth: 3,
						customRadius:70,
				        borderColor: "#FFFFFF"
				      }
				    }
				},
				
			}
		},
		onReady() {
		    this.sizeSalesVolumeProportionfun();
		},
		onLoad() {
			this.form.statusDate = new Date(Date.now()).getFullYear() + '-' + (new Date(Date.now()).getMonth() + 1) + '-01 00:00:00'
			this.salesVolumesStatisticsfun()
			this.brandSalesVolumefun()
			this.corpsSalesVolumefun()
		},
		onShow() {
			
		},
		methods:{
			openDate(){
				this.pickerShow = true
			},
			// 时间弹窗点击确认
			pickerConfirm(data){
				this.form.statusDate = dateFormat(new Date(data.value))
				this.form.endDate = onthelastDay(new Date(data.value))
				this.pickerShow = false
				this.salesVolumesStatisticsfun()
				this.brandSalesVolumefun()
				this.corpsSalesVolumefun()
				this.sizeSalesVolumeProportionfun()
			},
			// 获取 销量/客户数量/平均客单价
			salesVolumesStatisticsfun(){
				salesVolumesStatistics(this.form).then(res=>{
					this.customerForm = res.data
				})
			},
			 // 品牌销量
			brandSalesVolumefun(){
				brandSalesVolume(this.form).then(res=>{
					this.brandSalesData = res.data
				})
			},
			// 客户销量
			corpsSalesVolumefun(){
				corpsSalesVolume(this.form).then(res=>{
					this.corpsSalesData = res.data
				})
			},
			// 尺寸销量占比
			sizeSalesVolumeProportionfun(){
				sizeSalesVolumeProportion(this.form).then(res=>{
					let arr = []
					for (let item of res.data) {
						if (item.name == '>=19') {
							item.name = '19寸及以上'+ item.number +'条  占比' + Number(item.percentage).toFixed(2) + '%'
						}else if (item.name == '=18') {
							item.name = '18寸'+ item.number +'条  占比' + Number(item.percentage).toFixed(2) + '%'
						}else if (item.name == '=17') {
							item.name = '17寸'+ item.number +'条  占比' + Number(item.percentage).toFixed(2) + '%'
						}else if (item.name == '=16') {
							item.name = '16寸'+ item.number +'条  占比' + Number(item.percentage).toFixed(2) + '%'
						}else if (item.name == '<=15') {
							item.name = '15寸及以下'+ item.number +'条  占比' + Number(item.percentage).toFixed(2) + '%'
						}
						arr.unshift({
							name:item.name,
							value:Number(item.number)
						})
					}
					let chartres = {
						series: [
						  {
						    data: arr
						  }
						]
					}
					this.chartData = JSON.parse(JSON.stringify(chartres))
				})
			},
		}
	}
</script>

<style scoped>
	.qiunbox {
		background: #fff;
		width: 96%;
		margin: 0 auto;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	 /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
	    width: 100%;
	    height: 100%;
	}
	.qiunbox {
		position: relative;
	}
	.spanbzhu {
		font-size: 23rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.tableBox {
		padding: 30rpx;
		box-sizing: border-box;
	}
	.flexbox {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		padding: 20rpx 0;
		text-align: center;
		/* border-bottom: 1px solid #f0f0f0; */
	}
	.shenglv {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
	}
</style>