admin-web-master/src/views/serve/salesStatistics.vue

<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>客服服务管理</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">销售统计</span></div>
			</div>
			<div class="toolbar">
			  <el-form  :inline="true" :model="pageindex"> 
			    <el-form-item label="商铺">
			    <el-select  placeholder="全部"   v-model="pageindex.merchantId"
			      style="width: 120px;margin-right: 15px">
			     <el-option v-for="(item,index) in listType" :label="item.shopName" :value="item.id" />
			    </el-select>
			    </el-form-item>
			    <el-form-item label="日期">
			      <el-date-picker
			        v-model="pageindex.list"
			        type="daterange"
			        range-separator="至"
			        start-placeholder="开始时间"
			        end-placeholder="结束时间"
			        value-format="yyyy-MM-dd"
			      />
			    </el-form-item>
			
			    <el-form-item label-width="0">
			      <el-button   @click="search" style="background-color: #3F9B6A;color: #fff">查询</el-button>
			      <el-button  @click="clear" class="buttonHover"
			     style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
			    </el-form-item>
			  </el-form>
			</div>
			<div style="width: 100%;margin-bottom:30px;">
				<div style="display:flex;margin-top:10px;">
					<div style="width:50%;height: 400px;marigin-right:20px;">
						<div style="display: flex;justify-content: space-between;">
							<div style="line-height:35px;">销售趋势图</div>
						</div>
						<div ref="shop1TJ" style="width:100%;height: 400px;"></div>
					</div>
					<div style="width:50%;height: 400px;marigin-right:20px;">
						<div style="display: flex;justify-content: space-between;">
							<div style="line-height:35px;">热销商品TOP10榜</div>
						</div>
						<div ref="shop1ZX" style="width:100%;height: 400px;"></div>
					</div>
				</div>
			</div>
			<div style="width: 100%;margin-bottom;20px;">
				<div style="display:flex;margin-top:10px;">
					<div style="width:50%;height: 400px;marigin-right:20px;">
						<div style="display: flex;justify-content: space-between;">
							<div style="line-height:35px;">商品销售占比</div>
						</div>
						<div ref="shop2TJ" style="width:100%;height: 400px;"></div>
					</div>
					<div style="width:50%;height: 400px;marigin-right:20px;">
						<div style="display: flex;justify-content: space-between;">
							<div style="line-height:35px;">品牌销售对比图</div>
						</div>
						<div ref="shop3QS" style="width:100%;height: 400px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		cereSalesAdd,
		cereSalesPage,
		getSalesReportingToSalesStatistics
	} from '@/api/salesReport';
	import {
	  contractGetAllnew,
	  edit,
	  editById
	} from '@/api/manage.js'
	import * as echarts from 'echarts'
	export default {
		name: 'atmosphereGl',
		data() {
			return {
				currentPage: 1,
				radio1: 0,
				total: 100,
				flag: false,
				pageSize: 10,
				tableData: [],
				pageindex: {
					merchantId: '',
					createTime: "",
					endTime: "",
					list:[]
				},
				heindex:{
					dataStatus: '1',
					pageNumber: 0,
					pageSize: 10,
					contractType:'商铺合同'
				},
				listType:[]
			}
		},
		computed: {},
		mounted() {
			this.getAll()
			this.getShop()
			
		},
		methods: {
			search(){
				if(this.pageindex.list.length!=0){
					this.pageindex.createTime = this.pageindex.list[0]+' 00:00:00'
					this.pageindex.endTime = this.pageindex.list[1]+' 23:59:59'	
				}
				
				this.getAll()
			},
			clear(){
				this.pageindex={
					merchantId: '',
					createTime: "",
					endTime: "",
					list:[]
				}
				this.getAll()
			},
			charDam(val) {
				// val.sort((a, b) => b.sales - a.sales)
				// 处理数据，前 5 显示名称，6 往后合并为“其余商品”
				let top5Data = val.slice(0, 5)
				let otherSales = val.slice(5).reduce((total, item) => total + Number(item.proportion), 0)
				if (otherSales > 0) {
					top5Data.push({
						brand: '其他品牌',
						proportion: otherSales
					})
				}
				// 获取图表容器的 DOM 元素
				const chartDom = this.$refs.shop2TJ
				// 初始化 ECharts 实例
				const myChart = echarts.init(chartDom);
				// 配置 ECharts 选项
				const option = {
					color: [
						'#3F9B6A', '#40fcff', '#7d29d0', '#c438a3', '#256c9b', '#ef8c4a'
					],
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b}: {c} ({d}%)'
					},
					  legend: {
					  orient: 'vertical', // 图例竖着显示
					            right: '5%', // 图例位于图表右边
					            top: 'center' // 图例垂直居中
					  },
					emphasis: {
						label: {
							show: true,
							fontSize: 40,
							fontWeight: 'bold'
						}
					},
					
					series: [{
						name: '商品销售占比',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						data: top5Data.map(item => ({
							name: item.productName,
							value: item.proportion
						})),
						labelLine: {
							show: false
						},
						label: {
							show: false,
							position: 'center'
						},
					},
					]
				};
				// 使用刚指定的配置项和数据显示图表
				option && myChart.setOption(option)
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			},
			charDam1(val) {
				const chartDom = this.$refs.shop1ZX;
				const myChart = echarts.init(chartDom)
				val.sort((a, b) => a.salesQuantity - b.salesQuantity)
				
				const productNames = val.map(item => item.productName)
				const salesData = val.map(item => item.salesQuantity)
					
				// 配置 ECharts 选项
				const option = {
				      grid: {
				        left: '8%', 
				        right: '5%',
				        top: '8%',
				        bottom: '8%',
				        containLabel: true
				      },
				      tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				          type: 'shadow'
				        }
				      },
				      xAxis: {
				        type: 'value',
				        axisLine: {  
				          lineStyle: {
				            color: '#666'
				          }
				        },
				        splitLine: {  
				          show: false
				        }
				      },
				      yAxis: {
				        type: 'category',
				        data: productNames,
				        axisLine: {
				          lineStyle: {
				            color: '#666'
				          }
				        },
				        axisTick: {  
				          show: true,
				          lineStyle: {
				            color: '#666'
				          }
				        },
				        axisLabel: {
				          interval: 0,
				          margin: 10
				        }
				      },
				      series: [{
				        name: '销售数量',
				        type: 'bar',
				        data: salesData,
				        color: '#3f9b6a',
				        barWidth: 30,  
				        // 关键调整：增大 barCategoryGap 值，增加类目（数据）之间的间隙
				        barCategoryGap: '50%', // 原为 40%，调整为 60% 增加间隙
				        barGap: '20%', 
				        itemStyle: {  
				          emphasis: {
				            shadowBlur: 10,
				            shadowOffsetX: 0,
				            shadowColor: 'rgba(0, 0, 0, 0.3)'
				          }
				        },
				        animation: true  
				      }]
				    };
				
				    option && myChart.setOption(option);
				    window.addEventListener('resize', () => myChart.resize());
			},
			charDam3(val) {
				console.log(val)
			
				let Dom = this.$refs.shop1TJ
				let myChart = echarts.init(Dom)
				val.sort((a, b) => {
					const timeA = new Date(a.saleDay);
					const timeB = new Date(b.saleDay);
					return timeA - timeB;
				})
				let productNames =val.map(item => item.saleDay)
				// const salesData = val.map(item => item.price)
				let option = {
					legend: {},
					tooltip: {},
					xAxis: {
						type: 'category',
							data: productNames
					},
					yAxis: {
						type: 'value',
						// max: 1000,
						
					},
					grid: {
						left: '1%',
						right: '1%',
						top: '5%',
						bottom: '6%',
						containLabel: true
					},
					series: [{
						type: 'bar',
						color: '#3f9b6a',
						data: val.map(item => ({
							name: item.saleDay,
							value: item.price
						})),
					}]
				};
				option && myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			},
			charDam5(val) {
			
				// 处理数据，前 5 显示名称，6 往后合并为“其余商品”
				let top5Data = val.slice(0, 5)
				let otherSales = val.slice(5).reduce((total, item) => total + Number(item.proportion), 0)
				if (otherSales > 0) {
					top5Data.push({
						brand: '其余商品',
						proportion: otherSales
					})
				}
			
				// 获取图表容器的 DOM 元素
				const chartDom = this.$refs.shop3QS
				// 初始化 ECharts 实例
				const myChart = echarts.init(chartDom);
			
				// 配置 ECharts 选项
				const option = {
					color: [
						'#3F9B6A', '#40fcff', '#7d29d0', '#c438a3', '#256c9b', '#ef8c4a'
					],
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b}: {c} ({d}%)'
					},
					  legend: {
					  orient: 'vertical', // 图例竖着显示
					            right: '5%', // 图例位于图表右边
					            top: 'center' // 图例垂直居中
					  },
					emphasis: {
						label: {
							show: true,
							fontSize: 40,
							fontWeight: 'bold'
						}
					},
					
					series: [{
						name: '品牌销售占比',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						data: top5Data.map(item => ({
							name: item.brand,
							value: item.proportion
						})),
						labelLine: {
							show: false
						},
						label: {
							show: false,
							position: 'center'
						},
					},
					]
				};
			
				// 使用刚指定的配置项和数据显示图表
				option && myChart.setOption(option)
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			
			},
			async getAll() {
				const res = await getSalesReportingToSalesStatistics(this.pageindex)
			
				this.charDam1(res.data.cereSalesReportingToHotProductVOS)
				this.charDam(res.data.cereSalesReportingToProportionGoodsSoldVOS)
				this.charDam5(res.data.cereSalesReportingToProportionBrandSalesVOS)
				this.charDam3(res.data.cereSalesReportingToSalesTrendVOS)
				
			},
			 getShop(){
				let arr = []
				contractGetAllnew(this.heindex).then(shopList=>{
					let listType = shopList.data.content
					listType.map((item,index)=>{
						arr.push(item.cereBasicInformationShop)
						  // this.$set(this.listType, index, item.cereBasicInformationShop)
					})
					const uniqueArray = arr.reduce((acc, current) => {
						
					    const existing = acc.find(item => item.shopName === current.shopName);
						
					    if (!existing) {
					        acc.push(current);
							this.$set(this.listType, this.listType.length,current)
					    }
						
					    return acc;
					}, []);	
					
				})	
			},
	
		}
	}
</script>
<style scoped>
	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #Fff;
	}
	/deep/ .el-form-item__content {
		line-height: 0;
	}
	.tableBtn {
		display: inline-block;
		margin-right: 10px;
	}
	.formSearch {
		position: relative;
		margin-top: 30px;
		display: flex;
		width: 100%;
		height: 30px;
		font-size: 14px;
		margin-bottom: 10px;
	}
	.greens {
		color: #3F9B6A;
	}
	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: flex-start;
		position: relative;
	}
	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}
	.el-row {
		margin-bottom: 20px;
	}
	:last-child {
		margin-bottom: 0;
	}
	.el-col {
		border-radius: 4px;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	.bg-purple {
		background: #d3dce6;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
	/deep/ .bg-purple[data-v-0e3fe4ec] {
		background: #fff;
		height: 50px;
	}
	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}
	.demo-input-suffix {
		display: flex;
		margin-right: 20px;
	}
	.pagination {
		text-align: right;
		line-height: 20px;
	}
	/deep/ .el-pagination__total {
		margin-top: 4px;
	}
	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: #3F9B6A
	}
	/deep/ .el-dialog__header {
		background-color: #fff;
		padding: 0
	}
	/deep/ .el-radio__input.is-checked .el-radio__inner {
		border-color: #3F9B6A;
		background: #3F9B6A;
	}
	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}
</style>