pika_shangjia/pages/index/index.vue

<template>
	<view>
		<!-- 背景图 -->
		<view class="index-bg">
			<image src="../../static/pages/images/self/indexBg.png"></image>
		</view>
		<!-- 数据 -->
		<view class="data-box">
			<view>
				<view class="ljsy">{{statisticData.totalProfit?statisticData.totalProfit:0}}</view>
				<view class="ljsy-label">累计收益（元）</view>
			</view>

			<view class="jy ddflex">
				<view>
					<view class="jy-data">{{statisticData.todayOrderCount?statisticData.todayOrderCount:0}}</view>
					<view class="jy-label">今日订单数</view>
				</view>
				<view class="jy-line"></view>
				<view>
					<view class="jy-data"><text style="font-size: 22rpx;font-weight: 400;">￥</text>{{statisticData.todayTurnover?statisticData.todayTurnover:0}}</view>
					<view class="jy-label">今日营业额</view>
				</view>
				<view class="jy-line"></view>
				<view>
					<view class="jy-data"><text style="font-size: 22rpx;font-weight: 400;">￥</text>{{statisticData.todayProfit?statisticData.todayProfit:0}}</view>
					<view class="jy-label">今日收益额</view>
				</view>
			</view>
		</view>

		<!-- 总数 -->
		<view class="total-box ddflex">
			<view class="fflex" v-if="!userInfo.storeId">
				<view class="total-label">商家总数</view>
				<view class="total-data">{{statisticData.merchantCount?statisticData.merchantCount:0}}</view>
			</view>
			<view v-if="!userInfo.storeId" class="total-data-line"></view>
			<view class="fflex" v-if="!userInfo.storeId">
				<view class="total-label">门店总数</view>
				<view class="total-data">{{statisticData.storeCount?statisticData.storeCount:0}}</view>
			</view>
			<view v-if="!userInfo.storeId" class="total-data-line"></view>
			<view class="fflex">
				<view class="total-label">设备总数</view>
				<view class="total-data">{{statisticData.batteryCount?statisticData.batteryCount:0}}</view>
			</view>
			<view class="total-data-line"></view>
			<view class="fflex">
				<view class="total-label">订单总数</view>
				<view class="total-data">{{statisticData.totalOrderCount?statisticData.totalOrderCount:0}}</view>
			</view>
		</view>

		<!-- nav -->
		<view v-if="!userInfo.storeId" class="nav-box ddflex">
			<view class="nav-item">
				<image class="nav-item-icon" src="../../static/pages/images/wdsj.png" @click="jumpUrl('/pages/myStore/myStore')"></image>
				<view class="nav-item-title">我的商家</view>
			</view>
			<view class="nav-item" @click="jumpUrl('/pages/myMerchant/myMerchant')">
				<image class="nav-item-icon" src="../../static/pages/images/wdmd.png"></image>
				<view class="nav-item-title">我的门店</view>
			</view>
			<view class="nav-item" v-if="!userInfo.storeId&&!userInfo.merchantId" @click="jumpUrl('/mine/myUser/myUser')">
				<image class="nav-item-icon" src="../../static/pages/images/wdyh.png"></image>
				<view class="nav-item-title">我的用户</view>
			</view>
			<view class="nav-item" @click="jumpUrl('/pages/operationData/operationData')">
				<image class="nav-item-icon" src="../../static/pages/images/yysj.png"></image>
				<view class="nav-item-title">运营数据</view>
			</view>
		</view>
		
		<view v-if="userInfo.storeId" class="nav-box ddflex" style="padding: 10rpx 30rpx;justify-content: space-between;" @click="jumpUrl('/pages/operationData/operationData')">
			<view class="nav-item ddflex">
				<image class="nav-item-icon" src="../../static/pages/images/yysj.png"></image>
				<view class="nav-item-title">运营数据</view>
			</view>
			<image style="width: 36rpx;height:36rpx;" src="../../static/pages/images/ssicon.png"></image>
		</view>

		<!-- 图表统计 -->
		<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="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 class="echart-box-timeType ddflex">
					<view :class="'echart-box-timeType-item '+(storeType==1?'echart-box-timeType-item-acitve':'')"
						@click="storeTypeChange(1)">商户</view>
					<view :class="'echart-box-timeType-item '+(storeType==2?'echart-box-timeType-item-acitve':'')"
						@click="storeTypeChange(2)">门店</view>
				</view>
			</view>
			<view>
				<l-echart ref="chart2" @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="ddflex">
				<view class="fflex" style="height: 250rpx;">
					<l-echart ref="chart4" @finished="init"></l-echart>
				</view>
				<view class="fflex" style="height: 250rpx;">
					<l-echart ref="chart5" @finished="init"></l-echart>
				</view>
				<view class="fflex" style="height: 250rpx;">
					<l-echart ref="chart6" @finished="init"></l-echart>
				</view>
			</view>
			<view class="echart-line"></view>
			<view class="ddflex">
				<view style="width: 100%;height: 300rpx;">
					<l-echart ref="chart3" @finished="init"></l-echart>
				</view>
			</view>
		</view>

		<view class="guide" @tap="hideGuide" v-if="first">
			<image src="/static/pages/images/guide.png" mode="widthFix"></image>
		</view>
		<foot channel="home" :isUpdate="isUpdate"></foot>
	</view>
</template>

<script>
	//index.js
	//获取应用实例
	const app = getApp();
	const req = require('../../utils/request.js');
	const api = require('../../utils/api.js');
	const utils = require('../../utils/util.js');
	const mes = require('../../utils/requestmessage.js');
	const route = require('../../utils/route');
	const QQMapWX = require("../../utils/qqmap.js");
	import foot from '../../components/nav-bar/index';
	import footerCopyright from '../../components/footer-copyright/footer-copyright';
	import LEchart from '../../components/l-echart/l-echart.vue';
	import * as echarts from '../../utils/echarts.min.js'

	export default {
		data() {
			return {
				systems: {},
				bottomBlankHeight: app.globalData.isIPhoneX ? 68 : 0,
				pxToRpxScale: 0,
				rpxTopxScale: 0,

				timeType: 1, //统计时间 1.按日 2.按月 3.按季度
				storeType:1,//营业额查询1.商家 2.门店
				
				statisticData:{},//统计数据
				echartData:{},//曲线图
				storeRanking:{},//营业额排行
				
				userInfo:{},

				// 交易趋势图表数据
				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: -60,
						right: 5,
						bottom: 40,
						top: 40,
						containLabel: true
					},
					xAxis: [{
						type: 'value',
						// data: [],
						show: false,
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666',
							// interval: 0,

						},
						splitLine:{
							show:false // 不显示网格线
						},
					}],
					yAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						data: [],
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666',
							// inside:true,
							width:10,
							padding: [-20, -100, 0, 10],
							verticalAlign:'top',
							align:'left'
						},
					}],
					series: [{
						name: '营业额',
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'right',
								color: '#4c4a4a',
								formatter:'￥{c}',
								padding: [-20, 5, 0, -100],
								verticalAlign:'top',
								align:'right'
							},
						},
						data: [300, 270, 340, 344, 300, 320, 310],
						barWidth: 5,
						itemStyle: {
							// 颜色
							color: '#FF770F',
							// 给bar设置倒角
							barBorderRadius: [0, 15, 15, 0]
						}
					}]
				},

				// 设备状态
				option3: {
					title: {
						text: '设备出租比例',
						textStyle: {
							fontSize: 14
						},
						left: '70%',
						top: '30%'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					legend: {
						data: ['已租', '未租'],
						x: 'right', //可设定图例在左、右、居中
						y: '50%', //可设定图例在上、下、居中
						itemHeight:5,
						itemWidth:20
					},
					grid: {
						left: 0,
						containLabel: true
					},
					series: [{
						name: '设备出租比例',
						type: 'pie',
						center: ['30%', '50%'],
						radius: ['60%', '80%'],
						label: {
							show: false
						},
						data: [{
								value: 1055,
								name: '未租',
								itemStyle: {
									color: "#FF770F"
								}
							},
							{
								value: 735,
								name: '已租',
								itemStyle: {
									color: "#EAECF5"
								}
							}
						]
					}]
				},

				// 已租设备
				option4: {
					title: {
						text: '已租设备',
						textStyle: {
							fontSize: 14,
							fontWeight: 500
						},
						left: 'center',
						bottom: '0'
					},
					series: [{
						type: 'pie',
						radius: ['60%', '70%'],
						label: {
							normal: {
								show: true,
								position: 'center',
								color: '#4c4a4a',
								formatter:'{c}',
							},
							emphasis: { //中间文字显示 
								show: true,
								textStyle:{
									
								}
							}
						},
						data: [{
								value: 1055,
								name: '已租',
								itemStyle: {
									color: "#0FCB27"
								}
							},
							{
								value: 735,
								name: '未租',
								itemStyle: {
									color: "#EAECF5"
								}
							}
						]
					}]
				},

				// 未租设备
				option5: {
					title: {
						text: '未租设备',
						textStyle: {
							fontSize: 14,
							fontWeight: 500
						},
						left: 'center',
						bottom: '0'
					},
					series: [{
						type: 'pie',
						center: ['50%', '50%'],
						radius: ['60%', '70%'],
						label: {
							normal: {
								show: true,
								position: 'center',
								color: '#4c4a4a',
								formatter:'{c}',
							},
							emphasis: { //中间文字显示 
								show: true,
								textStyle:{
									
								}
							}
						},
						data: [{
								value: 1055,
								name: '未租设备',
								itemStyle: {
									color: "#666464"
								}
							},
							{
								value: 735,
								name: '已租设备',
								itemStyle: {
									color: "#EAECF5"
								}
							}
						]
					}]
				},

				// 到期设备
				option6: {
					title: {
						text: '到期设备',
						textStyle: {
							fontSize: 14,
							fontWeight: 500
						},
						left: 'center',
						bottom: '0'
					},
					series: [{
						type: 'pie',
						center: ['50%', '50%'],
						radius: ['60%', '70%'],
						label: {
							normal: {
								show: true,
								position: 'center',
								color: '#4c4a4a',
								formatter:'{c}',
							},
							emphasis: { //中间文字显示 
								show: true,
								textStyle:{
									
								}
							}
						},
						data: [{
								value: 1055,
								name: '到期',
								itemStyle: {
									color: "#FF770F"
								}
							},
							{
								value: 735,
								name: '未到期',
								itemStyle: {
									color: "#EAECF5"
								}
							}
						]
					}]
				},

			};
		},

		components: {
			foot,
			footerCopyright,
			LEchart
		},
		props: {},
		onLoad: async function(options) {
		},

		async onShow() {
			await this.getEchartData()
			await this.getStatisticData()
			await this.getStoreData()
			
			this.init()
			
			this.getUserInfo()
		},

		onUnload() {},

		onHide() {},
		onReachBottom() {},

		methods: {
			jumpUrl(url){
				if(req.isLogins(true)){
					uni.navigateTo({
						url:url
					})
				}
			},
			// 统计时间切换
			async timeTypeChange(val) {
				if (this.timeType == val) return false
				this.timeType = val
				await this.getEchartData()
				
				this.init()
			},
			// 营业额切换
			async storeTypeChange(val) {
				if (this.storeType == val) return false
				this.storeType = val
				await this.getStoreData()
				
				this.init()
			},
			init() {
				this.$refs.chart.init(echarts, async chart => {
					// let echartData = await this.getEchartData()
					this.option.yAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
					this.option.xAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
					this.option.legend.itemHeight = 10 * this.rpxTopxScale
					this.option.legend.itemWidth = 40 * this.rpxTopxScale
					if(this.echartData.orderList.length>0){
						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})
					}
					if(this.echartData.profitList.length>0){
						this.option.series[1].data = this.echartData.profitList.map(item=>{return item.profit})
					}
					if(this.echartData.turnoverList.length>0){
						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()
						if(this.storeRanking.length>0){
							this.option2.yAxis[0].data = this.storeRanking.map(item=>{return item.name})
							this.option2.series[0].data = this.storeRanking.map(item=>{return item.turnover})
						}
						chart.setOption(this.option2);
					});
				}
				if (this.$refs.chart3) {
					this.$refs.chart3.init(echarts, async chart => {
						this.option3.title.textStyle.fontSize = 28 * this.rpxTopxScale
						this.option3.legend.itemHeight = 10 * this.rpxTopxScale
						this.option3.legend.itemWidth = 40 * this.rpxTopxScale
						this.option3.series[0].data[0].value = this.statisticData.noLeaseCount
						this.option3.series[0].data[1].value = this.statisticData.leaseCount
						chart.setOption(this.option3);
					});
				}
				if (this.$refs.chart4) {
					this.$refs.chart4.init(echarts, async chart => {
						this.option4.title.textStyle.fontSize = 24 * this.rpxTopxScale
						this.option4.series[0].data[0].value = this.statisticData.leaseCount
						this.option4.series[0].data[1].value = this.statisticData.noLeaseCount
						this.option4.series[0].label.normal.formatter = ()=>{return this.statisticData.leaseCount}
						chart.setOption(this.option4);
					});
				}
				if (this.$refs.chart5) {
					this.$refs.chart5.init(echarts, async chart => {
						this.option5.title.textStyle.fontSize = 24 * this.rpxTopxScale
						this.option5.series[0].data[0].value = this.statisticData.noLeaseCount
						this.option5.series[0].data[1].value = this.statisticData.leaseCount
						this.option4.series[0].label.normal.formatter = ()=>{return this.statisticData.noLeaseCount}
						chart.setOption(this.option5);
					});
				}
				if (this.$refs.chart6) {
					this.$refs.chart6.init(echarts, async chart => {
						this.option6.title.textStyle.fontSize = 24 * this.rpxTopxScale
						this.option6.series[0].data[0].value = this.statisticData.expireCount
						this.option6.series[0].data[1].value =Number(this.statisticData.batteryCount) - Number(this.statisticData.leaseCount)
						this.option6.series[0].label.normal.formatter = ()=>{return this.statisticData.expireCount}
						chart.setOption(this.option6);
					});
				}
			},
			// 获取图表数据
			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)
					})
				})
			},
			// 获取营业额数据
			getStoreData() {
				return new Promise((r, j) => {
					req.getRequest('/admin/v2/statistic/ranking', {type: this.storeType}, res => {
						this.storeRanking = res
						console.log('statistic ranking', res)
						r(res)
					})
				})
			},
			// 获取图表数据
			getStatisticData() {
				return new Promise((r, j) => {
					req.getRequest('/admin/v2/statistic/top', {}, res => {
						console.log('statistic top', res)
						this.statisticData = res
						r(res)
					})
				})
			},
			// 获取当前用户
			getUserInfo(){
				req.getRequest('/admin/v2/userInfo',{},res=>{
					this.userInfo = 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;
		}
	};
</script>
<style>
	@import './index.css';
</style>