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">
						<view class="sssb-label">总数</view>
						<view class="sssb-data">421台</view>
					</view>
					<view class="sssb-line"></view>
					<view class="sssb-item">
						<view class="sssb-label">使用总次数</view>
						<view class="sssb-data">63889次</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">867.00</view>
						<view class="sssb-label">营业总额</view>
					</view>
					<view class="sssb-line"></view>
					<view class="sssb-item fflex">
						<view class="sssb-data sssb-color">1915.00</view>
						<view class="sssb-label">收益总额</view>
					</view>
				</view>
				<view class="sssb-box ddflex">
					<view class="sssb-item fflex">
						<view class="sssb-data sssb-color">1915.00</view>
						<view class="sssb-label">收益总额</view>
					</view>
					<view class="sssb-line"></view>
					<view class="sssb-item fflex">
						<view class="sssb-data sssb-color">1915.00</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" placeholder="请输入商家名称或电话"/>
					<view class="search-btn">搜索</view>
				</view>
			</view>
			<!-- 数据 -->
			<view>
				<view class="sjyy-item" v-for="item,index in 10">
					<view class="ddflex">
						<view class="sjyy-header">
							<image src="../../static/pages/images/wdsj.png"></image>
						</view>
						<view class="fflex">
							<view class="sjyy-name">宋秀兰</view>
							<view class="sjyy-phone">13815141671</view>
						</view>
						<view class="sjyy-btn" @click="jumpUrl('/pages/operationDataPersonal/operationDataPersonal')">运营情况</view>
					</view>
					<view class="sjyy-data">
						<view class="ddflex">
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">10242.00</view>
								<view class="sssb-label">营业总额</view>
							</view>
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">1242.00</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">1915.00</view>
								<view class="sssb-label">收益总额</view>
							</view>
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">1915.00</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" placeholder="请输入门店名称或电话"/>
					<view class="search-btn">搜索</view>
				</view>
			</view>
			<!-- 数据 -->
			<view>
				<view class="sjyy-item" v-for="item,index in 10">
					<view class="ddflex">
						<view class="sjyy-header">
							<image src="../../static/pages/images/wdmd.png"></image>
						</view>
						<view class="fflex">
							<view class="sjyy-name">白云科技门店</view>
							<view class="sjyy-phone">顾勇(13815141671)</view>
						</view>
						<view class="sjyy-btn" @click="jumpUrl('/pages/operationDataPersonal/operationDataPersonal')">运营情况</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;">朝阳区金台路道家园1号</view>
					</view>
					<view class="sjyy-data">
						<view class="ddflex">
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">10242.00</view>
								<view class="sssb-label">营业总额</view>
							</view>
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">1242.00</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">1915.00</view>
								<view class="sssb-label">收益总额</view>
							</view>
							<view class="sjyy-data-item fflex">
								<view class="sssb-data sssb-color">1915.00</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,


				queryType: 1,
				timeType: 1, //统计时间 1.按日 2.按月 3.按季度

				// 交易趋势图表数据
				option: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					grid: {
						left: 0,
						right: 8,
						bottom: 10,
						top: 10,
						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: [],
						barWidth: 10,
						itemStyle: {
							// 颜色
							color: '#FF7D00',
							// 给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: '￥{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: '￥{c}',
							},
						},
						data: [285, 200, 285, 300, 285, 285, 320],
						barWidth: 15,
						itemStyle: {
							// 颜色
							color: '#FF770F',
							// 给bar设置倒角
							barBorderRadius: [0, 0, 0, 0]
						}
					}]
				}

			}
		},
		onLoad(options) {

		},
		onShow() {

		},
		methods: {
			jumpUrl(url) {
				if (req.isLogins(true)) {
					uni.navigateTo({
						url: url
					})
				}
			},
			queryTypeChange(val) {
				if (this.queryType == val) return false
				this.queryType = val
			},
			// 统计时间切换
			timeTypeChange(val) {
				if (this.timeType == val) return false
				this.timeType = val
			},
			init() {
				this.$refs.chart.init(echarts, async chart => {
					// let echartData = await this.getEchartData()
					this.option.xAxis[0].data = ['04-04', '04-05', '04-06', '04-07', '04-08', '04-09', '04-10']
					this.option.yAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
					this.option.xAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
					this.option.series[0].data = [100, 270, 340, 344, 300, 320, 310]
					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 = ['04-04', '04-05', '04-06', '04-07', '04-08', '04-09',
							'04-10'
						]
						this.option2.yAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option2.xAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option2.series[0].data = [300, 270, 340, 344, 300, 320, 310]
						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 = ['04-04', '04-05', '04-06', '04-07', '04-08', '04-09',
							'04-10'
						]
						this.option3.yAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option3.xAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option3.series[0].data = [300, 270, 340, 344, 300, 320, 310]
						this.option3.series[0].label.normal.fontSize = 13 * this.rpxTopxScale
						chart.setOption(this.option3);
					});
				}
			}
		},
		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>