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">10086.75</view>
				<view class="ljsy-label">累计收益（元）</view>
			</view>

			<view class="jy ddflex">
				<view>
					<view class="jy-data">152</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>2000.00</view>
					<view class="jy-label">昨日交易金额</view>
				</view>
			</view>
		</view>

		<!-- 总数 -->
		<view class="total-box ddflex">
			<view>
				<view class="total-label">用户总数</view>
				<view class="total-data">385</view>
			</view>
			<view class="total-data-line"></view>
			<view>
				<view class="total-label">商家总数</view>
				<view class="total-data">6</view>
			</view>
			<view class="total-data-line"></view>
			<view>
				<view class="total-label">电池总数</view>
				<view class="total-data">226</view>
			</view>
			<view class="total-data-line"></view>
			<view>
				<view class="total-label">订单总数</view>
				<view class="total-data">113</view>
			</view>
		</view>

		<!-- nav -->
		<view v-if="true" class="nav-box ddflex">
			<view class="nav-item">
				<image class="nav-item-icon" src="../../static/pages/images/wdsj.png" @click="jumpUrl('/pages/myMerchant/myMerchant')"></image>
				<view class="nav-item-title">我的商家</view>
			</view>
			<view class="nav-item">
				<image class="nav-item-icon" src="../../static/pages/images/wdmd.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="true" 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)">按月</view>
					<view :class="'echart-box-timeType-item '+(timeType==3?'echart-box-timeType-item-acitve':'')"
						@click="timeTypeChange(3)">季度</view>
				</view>
			</view>
			<view>
				<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>
				<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.按季度

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

				// 商家营业额排名
				option2: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					grid: {
						left: 0,
						right: 20,
						bottom: 40,
						top: 40,
						containLabel: true
					},
					xAxis: [{
						type: 'value',
						// data: [],
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666',
							// interval: 0,

						}
					}],
					yAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						data: [],
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666',
							// inside:true,
							padding: [0, 0, 0, 0]
						}
					}],
					series: [{
						name: '订单',
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'right',
								color: '#4c4a4a',
								formatter:'￥{c}',
							},
						},
						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) {
			QQMapWX.initMap();
			req.getLocation(res => {
				const to = {
					latitude: res.latitude,
					longitude: res.longitude
				};
				QQMapWX.reverseGeocoder(to, resp => {});
			});
		},

		async onShow() {
			let _ts = this;
			await this.getConfig().then(res => {
				// _ts.getMerchant();
			});

		},

		onUnload() {},

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

		methods: {
			jumpUrl(url){
				if(req.isLogins(true)){
					uni.navigateTo({
						url:url
					})
				}
			},
			// 统计时间切换
			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 = ['2023/04/12', '2023/04/12', '2023/04/12', '2023/04/12']
					this.option.series[0].data = [1, 2, 3, 4]
					this.option.series[1].data = [1, 2, 3, 4]
					chart.setOption(this.option);
				});
				if (this.$refs.chart2) {
					this.$refs.chart2.init(echarts, async chart => {
						// let echartData = await this.getEchartData()
						this.option2.yAxis[0].data = ['罗技', '刘涛', '陈楚生', '罗巧红', '李冰冰']
						this.option2.series[0].data = [8125, 6802, 5622, 4588, 2458]
						chart.setOption(this.option2);
					});
				}
				if (this.$refs.chart3) {
					this.$refs.chart3.init(echarts, async chart => {
						// // let echartData = await this.getEchartData()
						// this.option2.yAxis[0].data = ['罗技', '刘涛', '陈楚生', '罗巧红', '李冰冰']
						// this.option2.series[0].data = [8125, 6802, 5622, 4588, 2458]
						this.option3.title.textStyle.fontSize = 28 * this.rpxTopxScale
						this.option3.legend.itemHeight = 10 * this.rpxTopxScale
						this.option3.legend.itemWidth = 40 * this.rpxTopxScale
						chart.setOption(this.option3);
					});
				}
				if (this.$refs.chart4) {
					this.$refs.chart4.init(echarts, async chart => {
						// // let echartData = await this.getEchartData()
						// this.option2.yAxis[0].data = ['罗技', '刘涛', '陈楚生', '罗巧红', '李冰冰']
						// this.option2.series[0].data = [8125, 6802, 5622, 4588, 2458]
						this.option4.title.textStyle.fontSize = 24 * this.rpxTopxScale
						chart.setOption(this.option4);
					});
				}
				if (this.$refs.chart5) {
					this.$refs.chart5.init(echarts, async chart => {
						// // let echartData = await this.getEchartData()
						// this.option2.yAxis[0].data = ['罗技', '刘涛', '陈楚生', '罗巧红', '李冰冰']
						// this.option2.series[0].data = [8125, 6802, 5622, 4588, 2458]
						this.option5.title.textStyle.fontSize = 24 * this.rpxTopxScale
						chart.setOption(this.option5);
					});
				}
				if (this.$refs.chart6) {
					this.$refs.chart6.init(echarts, async chart => {
						// // let echartData = await this.getEchartData()
						// this.option2.yAxis[0].data = ['罗技', '刘涛', '陈楚生', '罗巧红', '李冰冰']
						// this.option2.series[0].data = [8125, 6802, 5622, 4588, 2458]
						this.option6.title.textStyle.fontSize = 24 * this.rpxTopxScale
						chart.setOption(this.option6);
					});
				}
			},
			// 获取图表数据
			getEchartData() {
				return new Promise((r, j) => {
					req.getRequest('/api/v3/recovery/chart', {
						dayType: this.dayType
					}, res => {
						console.log('resres', res)
						r(res)
					})
				})
			},
			getMerchant() {
				let _ts = this;
				if (req.header.appId == 'ZQ1VK5oc17I387E') {
					// 默认门店
					let merchant = req.getStorage('defaultMerchant');
					var timestamp = Date.parse(new Date());
					merchant.time = timestamp + 1 * 60 * 1000;
					if (merchant) {
						req.setStorage('MERCHANT', merchant);
						_ts.setData({
							merchant: merchant
						});
						console.log('》》》》获取当前的门店>>>>>>>>', merchant);
						_ts.init(merchant);
					} else {
						return new Promise((resolve, reject) => {
							req.getRequest(
								'/api/merchant/list', {
									page: 0,
									limit: 10000
								},
								res => {
									console.log('获取到门店列表>>>>>>>>', res);
									var data = res.filter(it => it.isDefault == 1);
									var timestamp = Date.parse(new Date());
									res[0].time = timestamp + 1 * 60 * 1000;
									_ts.setData({
										merchant: data[0]
									});
									// console.log(data)
									console.log('缓存当前的门店>>>>>>>>', data[0]);
									req.setStorage('defaultMerchant', data[0]);
									req.setStorage('MERCHANT', data[0]);
									_ts.init(data[0]);
									resolve();
								}
							);
						});
					}
				} else {
					return new Promise((resolve, reject) => {
						api.getMerchant(_ts.query, req, data => {
							console.log('data==', data)
							if (data == 1) {
								uni.showModal({
									title: '温馨提示',
									content: '获取定位失败，请前往设置打开定位权限',
									showCancel: false,
									success(res) {
										if (res.confirm) {
											// console.log('用户点击确定');
											uni.openSetting({
												success(res) {
													console.log(res
														.authSetting
													); // res.authSetting = {
												}
											});
										}
									}
								});
							} else {
								_ts.merchant = data;
								_ts.init(data);
							}
							resolve();
						});
					});
				}
			},

			getConfig() {
				var _this = this;
				return new Promise((res, rej) => {
					req.g(
						'/api/config',
						data => {
							req.setStorage('configRes', JSON.stringify(data));
							this.about = data;

							res(data);
						},
						true
					);
				});
			},
		},
		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>