pika_shangjia/pages/operationDataPersonal/operationDataPersonal.vue

<template>
	<view style="padding-bottom: 30rpx;">
		<!-- 图表统计 -->
		<view class="echart-box">
			<view class="echart-box-header ddflex">
				<view class="echart-box-title">运营情况</view>
			</view>
			<view class="sssb-box ddflex">
				<view class="sssb-item fflex">
					<view class="sssb-data sssb-color">{{totalTurnover?totalTurnover:0}}</view>
					<view class="sssb-label">营业总额</view>
				</view>
				<view class="sssb-line"></view>
				<view class="sssb-item fflex">
					<view class="sssb-data sssb-color">{{totalRefund?totalRefund:0}}</view>
					<view class="sssb-label">累计退款</view>
				</view>
			</view>
			<view class="sssb-box ddflex">
				<view class="sssb-item fflex">
					<view class="sssb-label">收益总额</view>
					<view class="sssb-data sssb-color">{{totalProfit?totalProfit:0}}</view>
				</view>
				<view class="sssb-line"></view>
				<view class="sssb-item fflex">
					<view class="sssb-label">可分账金额</view>
					<view class="sssb-data sssb-color">{{useProfit?useProfit:0}}</view>
				</view>
			</view>
			<view style="margin-top: 30rpx;height:500rpx" v-if="showEchart">
				<view class="echart-title">近一周营业额度(元)图表数据</view>
				<l-echart ref="chart2" @finished="init"></l-echart>
			</view>
			<view style="margin-top: 30rpx;height:500rpx" v-if="showEchart">
				<view class="echart-title">近一周收益额度(元)</view>
				<l-echart ref="chart3" @finished="init"></l-echart>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import LEchart from '../../components/l-echart/l-echart.vue';
	import * as echarts from '../../utils/echarts.min.js'
	export default {
		components: {
			LEchart
		},
		props: {},
		data() {
			return {
				systems: {},
				isTop: 0,
				pxToRpxScale: 0,
				rpxTopxScale: 0,
				
				showEchart:false,
				merchantId:null,
				storeId:null,
				
				totalTurnover:0,
				totalRefund :0,
				totalProfit:0,
				useProfit :0,
				
				echartData:{},


				// 近一周营业额度(元)图表数据
				option2: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					grid: {
						left: 0,
						right: 8,
						bottom: 20,
						top: 30,
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666',
							// interval: 0,

						}
					}],
					yAxis: [{
						type: 'value',

						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666'
						}
					}],
					series: [{
						name: '订单',
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'top',
								color: '#FF770F',
								formatter: '￥{c}',
							},
						},
						data: [285, 200, 285, 300, 285, 285, 320],
						barWidth: 15,
						itemStyle: {
							// 颜色
							color: '#FF770F',
							// 给bar设置倒角
							barBorderRadius: [0, 0, 0, 0]
						}
					}]
				},

				// 近一周收益额度(元)
				option3: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					grid: {
						left: 0,
						right: 8,
						bottom: 20,
						top: 30,
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666',
							// interval: 0,

						}
					}],
					yAxis: [{
						type: 'value',

						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666'
						}
					}],
					series: [{
						name: '订单',
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'top',
								color: '#FF770F',
								formatter: (res)=>{
									if(res.value>0) return '￥'+res.value
									else return ''
								},
							},
						},
						data: [285, 200, 285, 300, 285, 285, 320],
						barWidth: 15,
						itemStyle: {
							// 颜色
							color: '#FF770F',
							// 给bar设置倒角
							barBorderRadius: [0, 0, 0, 0]
						}
					}]
				}

			}
		},
		onLoad(options) {
			if(options.merchantId){
				this.merchantId = options.merchantId
			}
			if(options.storeId){
				this.storeId = options.storeId
			}
			this.totalTurnover = options.totalTurnover&&options.totalTurnover!='null'?options.totalTurnover:0
			this.totalRefund = options.totalRefund&&options.totalRefund!='null'?options.totalRefund:0
			this.totalProfit = options.totalProfit&&options.totalProfit!='null'?options.totalProfit:0
			this.useProfit = options.useProfit&&options.useProfit!='null'?options.useProfit:0
			this.getStatisticData()
		},
		onShow() {

		},
		methods: {
			jumpUrl(url) {
				if (req.isLogins(true)) {
					uni.navigateTo({
						url: url
					})
				}
			},
			
			init() {
				if (this.$refs.chart2) {
					this.$refs.chart2.init(echarts, async chart => {
						// let echartData = await this.getEchartData()
						this.option2.xAxis[0].data = this.echartData.turnoverList.map(item=>{return item.showTime})
						this.option2.yAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option2.xAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option2.series[0].data = this.echartData.turnoverList.map(item=>{return item.orderCount})
						this.option2.series[0].label.normal.fontSize = 13 * this.rpxTopxScale
						chart.setOption(this.option2);
					});
				}
				if (this.$refs.chart3) {
					this.$refs.chart3.init(echarts, async chart => {
						// let echartData = await this.getEchartData()
						this.option3.xAxis[0].data = this.echartData.profitList.map(item=>{return item.showTime})
						this.option3.yAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option3.xAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option3.series[0].data = this.echartData.profitList.map(item=>{return item.profit})
						this.option3.series[0].label.normal.fontSize = 13 * this.rpxTopxScale
						chart.setOption(this.option3);
					});
				}
			},
			async getStatisticData(){
				await this.getBarEchartData()
				this.showEchart = true
				this.init()
			},
			getBarEchartData() {
				return new Promise((r, j) => {
					let merchantId = this.merchantId?this.merchantId:''
					let storeId = this.storeId?this.storeId:''
					let pData = {
						merchantId:merchantId?merchantId:null,
						storeId:storeId?storeId:null
					}
					req.getRequest('/admin/v2/statistic/histogram', pData, res => {
						this.echartData = res
						console.log('statistic chart', res)
						r(res)
					})
				})
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			this.pxToRpxScale = pxToRpxScale
			this.rpxTopxScale = systemInfo.windowWidth / 750
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
		}
	}
</script>

<style>
	@import "./operationDataPersonal.css";
</style>