pika_shangjia/pages/operationData/operationData.vue

<template>
	<view style="padding-bottom: 30rpx;">
		<!-- tab -->
		<view class="tab-box ddflex">
			<view :class="'tab-item fflex '+(queryType==1?'tab-item-active':'')" @click="queryTypeChange(1)">
				<view>我的</view>
				<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
			</view>
			<view :class="'tab-item fflex '+(queryType==2?'tab-item-active':'')" @click="queryTypeChange(2)">
				<view>商家</view>
				<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
			</view>
			<view :class="'tab-item fflex '+(queryType==3?'tab-item-active':'')" @click="queryTypeChange(3)">
				<view>门店</view>
				<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
			</view>
		</view>
		<view style="height: 110rpx;"></view>

		<!-- 我的收益 -->
		<block v-if="queryType==1">
			<!-- 图表统计 -->
			<view class="echart-box">
				<view class="echart-box-header ddflex">
					<view class="echart-box-title">交易趋势</view>
					<view class="echart-box-timeType ddflex">
						<view :class="'echart-box-timeType-item '+(timeType==1?'echart-box-timeType-item-acitve':'')"
							@click="timeTypeChange(1)">今日</view>
						<view :class="'echart-box-timeType-item '+(timeType==2?'echart-box-timeType-item-acitve':'')"
							@click="timeTypeChange(2)">近7日</view>
						<view :class="'echart-box-timeType-item '+(timeType==3?'echart-box-timeType-item-acitve':'')"
							@click="timeTypeChange(3)">近30日</view>
					</view>
				</view>
				<view style="margin-top: 30rpx;height:500rpx">
					<l-echart ref="chart" @finished="init"></l-echart>
				</view>
			</view>

			<!-- 图表统计 -->
			<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-label">总数</view>
						<view class="sssb-data">{{statisticData.batteryCount?statisticData.batteryCount:0}}台</view>
					</view>
					<view class="sssb-line"></view>
					<view class="sssb-item fflex">
						<view class="sssb-label">使用总次数</view>
						<view class="sssb-data">{{statisticData.useCount?statisticData.useCount:0}}次</view>
					</view>
				</view>
				<!-- <view class="sssb-box ddflex">
					<view class="sssb-item">
						<view class="sssb-label">已下发</view>
						<view class="sssb-data">509台</view>
					</view>
					<view class="sssb-line"></view>
					<view class="sssb-item">
						<view class="sssb-label">总收益</view>
						<view class="sssb-data sssb-color">92516元</view>
					</view>
				</view> -->
			</view>

			<!-- 图表统计 -->
			<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">{{statisticData.totalTurnover?statisticData.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">{{statisticData.totalRefund?statisticData.totalRefund:0}}</view>
						<view class="sssb-label">累计退款</view>
					</view>
				</view>
				<view class="sssb-box ddflex">
					<view class="sssb-item fflex">
						<view class="sssb-data sssb-color">{{statisticData.totalProfit?statisticData.totalProfit:0}}</view>
						<view class="sssb-label">收益总额</view>
					</view>
					<view class="sssb-line"></view>
					<view class="sssb-item fflex">
						<view class="sssb-data sssb-color">{{statisticData.useProfit?statisticData.useProfit:0}}</view>
						<view class="sssb-label">可分账金额</view>
					</view>
				</view>
				<view style="margin-top: 30rpx;height:500rpx">
					<view class="echart-title">近一周营业额度(元)图表数据</view>
					<l-echart ref="chart2" @finished="init"></l-echart>
				</view>
				<view style="margin-top: 30rpx;height:500rpx">
					<view class="echart-title">近一周收益额度(元)</view>
					<l-echart ref="chart3" @finished="init"></l-echart>
				</view>
			</view>
		</block>
		
		<!-- 商家营业额 -->
		<block v-if="queryType==2">
			<!-- 搜索 -->
			<view>
				<view class="search-box ddflex">
					<image class="search-icon" src="../../static/images/ssico.png"></image>
					<input class="fflex" v-model="searchValue" confirm-type="search" @confirm="searchFn" placeholder="请输入商家名称或电话"/>
					<view class="search-btn" @click="searchFn">搜索</view>
				</view>
			</view>
			<!-- 数据 -->
			<view>
				<view class="sjyy-item" v-for="item,index in groupList" :key="index">
					<view class="ddflex">
						<view class="sjyy-header">
							<image src="../../static/pages/images/wdsj.png"></image>
						</view>
						<view class="fflex">
							<view class="sjyy-name">{{item.name}}</view>
							<view class="sjyy-phone">{{item.phone}}</view>
						</view>
						<view class="sjyy-btn" @click="jumpUrl('/pages/operationDataPersonal/operationDataPersonal?merchantId='+item.id+'&totalTurnover='+item.totalTurnover+'&totalRefund='+item.totalRefund+'&totalProfit='+item.totalProfit+'&useProfit='+item.useProfit)">运营情况</view>
					</view>
					<view class="sjyy-data">
						<view class="ddflex">
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">{{item.totalTurnover?item.totalTurnover:0}}</view>
								<view class="sssb-label">营业总额</view>
							</view>
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">{{item.totalRefund?item.totalRefund:0}}</view>
								<view class="sssb-label">累计退款</view>
							</view>
						</view>
						<view class="ddflex" style="margin-top: 40rpx;">
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">{{item.totalProfit?item.totalProfit:0}}</view>
								<view class="sssb-label">收益总额</view>
							</view>
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">{{item.useProfit?item.useProfit:0}}</view>
								<view class="sssb-label">可分账金额</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		
		<!-- 门店营业额 -->
		<block v-if="queryType==3">
			<!-- 搜索 -->
			<view>
				<view class="search-box ddflex">
					<image class="search-icon" src="../../static/images/ssico.png"></image>
					<input class="fflex" v-model="searchValue" confirm-type="search" @confirm="searchFn" placeholder="请输入门店名称或电话"/>
					<view class="search-btn" @click="searchFn">搜索</view>
				</view>
			</view>
			<!-- 数据 -->
			<view>
				<view class="sjyy-item" v-for="item,index in groupList" :key="index">
					<view class="ddflex">
						<view class="sjyy-header">
							<image src="../../static/pages/images/wdmd.png"></image>
						</view>
						<view class="fflex">
							<view class="sjyy-name">{{item.name}}</view>
							<view class="sjyy-phone">{{item.linkman}}({{item.phone}})</view>
						</view>
						<view class="sjyy-btn" 
						@click="jumpUrl('/pages/operationDataPersonal/operationDataPersonal?storeId='+item.id+'&totalTurnover='+item.totalTurnover+'&totalRefund='+item.totalRefund+'&totalProfit='+item.totalProfit+'&useProfit='+item.useProfit)">
						运营情况</view>
					</view>
					<view class="sjyy-data ddflex" style="padding: 20rpx;">
						<image style="width: 26rpx;height: 26rpx;margin-right: 10rpx;" src="../../static/pages/images/address-icon.png"></image>
						<view class="tover fflex" style="font-size: 24rpx;line-height: 36rpx;color: #A8A5A5;">{{item.address}}</view>
					</view>
					<view class="sjyy-data">
						<view class="ddflex">
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">{{item.totalTurnover?item.totalTurnover:0}}</view>
								<view class="sssb-label">营业总额</view>
							</view>
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">{{item.totalRefund?item.totalRefund:0}}</view>
								<view class="sssb-label">累计退款</view>
							</view>
						</view>
						<view class="ddflex" style="margin-top: 40rpx;">
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">{{item.totalProfit?item.totalProfit:0}}</view>
								<view class="sssb-label">收益总额</view>
							</view>
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">{{item.useProfit?item.useProfit:0}}</view>
								<view class="sssb-label">可分账金额</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>


	</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,

				merchantId:null,
				storeId:null,

				queryType: 1,
				timeType: 1, //统计时间 1.按日 2.按月 3.按季度
				
				groupList: [],
				page: 1,
				limit: 10,
				searchValue:'',
				isQuerying:false,//正在查询数据
				
				echartData:{},//交易趋势图表
				statisticData:{},
				barEchartData:{},

				// 交易趋势图表数据
				option: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					legend: {
						data: ['订单数', '订单金额','收益金额'],
						x: 'center', //可设定图例在左、右、居中
						y: 'top', //可设定图例在上、下、居中
						padding: [15, 0, 0, 0]
					},
					grid: {
						left: 0,
						right: 8,
						bottom: 5,
						top: 45,
						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: 'line',
							data: [300, 270, 340, 344, 300, 320, 310],
							showSymbol: false,
							smooth: true,
							itemStyle: {
								// 颜色
								color: '#5F50E6',
								// 给bar设置倒角
								barBorderRadius: [15, 15, 0, 0]
							}
						},
						{
							name: '订单金额',
							type: 'line',
							data: [120, 102, 141, 174, 190, 250, 220],
							showSymbol: false,
							smooth: true,
							itemStyle: {
								// 颜色
								color: '#FF7D00',
								// 给bar设置倒角
								barBorderRadius: [15, 15, 0, 0]
							}
						},
						{
							name: '收益金额',
							type: 'line',
							data: [120, 102, 141, 174, 190, 250, 120],
							showSymbol: false,
							smooth: true,
							itemStyle: {
								// 颜色
								color: '#FFDC0F',
								// 给bar设置倒角
								barBorderRadius: [15, 15, 0, 0]
							}
						},
					]
				},

				// 近一周营业额度(元)图表数据
				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: (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]
						}
					}]
				},

				// 近一周收益额度(元)
				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) {
			this.getStatisticData()
		},
		onShow() {

		},
		methods: {
			jumpUrl(url) {
				if (req.isLogins(true)) {
					uni.navigateTo({
						url: url
					})
				}
			},
			queryTypeChange(val) {
				if (this.queryType == val) return false
				this.queryType = val
				if(this.queryType==1){
					this.getStatisticData()
				}
				if(this.queryType==2||this.queryType==3){
					this.getDataList()
					this.searchValue = ''
				}
			},
			// 统计时间切换
			timeTypeChange(val) {
				if (this.timeType == val) return false
				this.timeType = val
				this.getStatisticData()
			},
			init() {
				this.$refs.chart.init(echarts, async chart => {
					// let echartData = await this.getEchartData()
					this.option.legend.itemHeight = 10 * this.rpxTopxScale
					this.option.legend.itemWidth = 40 * this.rpxTopxScale
					this.option.xAxis[0].data = this.echartData.orderList.map(item=>{return item.showTime})
					this.option.series[0].data = this.echartData.orderList.map(item=>{return item.orderCount})
					this.option.series[1].data = this.echartData.profitList.map(item=>{return item.profit})
					this.option.series[2].data = this.echartData.turnoverList.map(item=>{return item.turnover})
					chart.setOption(this.option);
				});
				if (this.$refs.chart2) {
					this.$refs.chart2.init(echarts, async chart => {
						// let echartData = await this.getEchartData()
						this.option2.xAxis[0].data = this.echartData.orderList.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.orderList.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);
					});
				}
			},
			
			
			
			getDataList(isPage) {
				if(this.isQuerying) return
				else this.isQuerying = true
				if (!isPage) {
					this.page = 1
				}
				let queryParams = {
					page: this.page,
					limit: this.limit,
				}
				if(this.searchValue){
					queryParams.name=this.searchValue
				}
				let api = '/admin/v2/merchant/pageDate'
				if(this.queryType==2){
					api = '/admin/v2/merchant/pageDate'
				}
				if(this.queryType==3){
					api = '/admin/v2/store/pageData'
				}
				req.getRequest(
					api,
					queryParams,
					data => {
						if (data != null && data.list.length > 0) {
							if (!isPage) {
								this.groupList = data.list
							} else {
								this.groupList = this.groupList.concat(data.list)
							}
							this.page++
						} else {
							if (!isPage)
								this.groupList = data.list
							else {}
						}
						uni.hideLoading()
						this.isQuerying = false
					}
				)
			},
			searchFn(){
				this.getDataList()
			},
			
			// 获取运营数据-交易趋势
			async getStatisticData(){
				await this.getEchartData()
				await this.getTopData()
				await this.getBarEchartData()
				this.init()
			},
			getEchartData() {
				return new Promise((r, j) => {
					req.getRequest('/admin/v2/statistic/chart', {type: this.timeType}, res => {
						this.echartData = res
						console.log('statistic chart', res)
						r(res)
					})
				})
			},
			// 获取统计数据
			getTopData() {
				return new Promise((r, j) => {
					req.getRequest('/admin/v2/statistic/top', {}, res => {
						console.log('statistic top', res)
						this.statisticData = res
						r(res)
					})
				})
			},
			getBarEchartData() {
				return new Promise((r, j) => {
					let merchantId = this.merchantId?this.merchantId:req.getStorage('userInfo').merchantId?req.getStorage('userInfo').merchantId:''
					let storeId = this.storeId?this.storeId:req.getStorage('userInfo').storeId?req.getStorage('userInfo').storeId:''
					let pData = {
						merchantId:merchantId,
						storeId:storeId
					}
					req.getRequest('/admin/v2/statistic/histogram', pData, res => {
						this.barEchartData = 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) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

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