kaiguan-zfb/pages/tj.vue

<template>
	<view class="page" >
		<u-navbar :is-back="false" title="统计" :border-bottom="false" :background="bgc" title-color='#fff'
			title-size='44' height='48'  id="navbar">
		</u-navbar>
		<view v-if="userType=='01'" style="padding-top: 30rpx;">
			<view class="card">
				<view class="xzsj">
					<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
				</view>
				<view class="month" @click="show = true">
					{{yeartime.year + '年' + yeartime.month + '月'}} <u-icon style="margin-left: 10rpx;"
						name="arrow-down-fill"></u-icon>
				</view>
				<view class="tit">
					本月收入{{recharge.toFixed(2)}}（元） 累计收入{{totalRecharge.toFixed(2)}}（元）
				</view>

				<view class="echarts" >
						<l-echart class="line-chart" ref="lineChart"></l-echart>
				</view>
			</view>
			<view class="list" style="padding-bottom: 240rpx;">
				<view class="card_list" v-for="(item,index) in timelists" :key="index">
					<view class="left">
						{{yeartime.year + '年' + yeartime.month + '月' + item.createDay + '日'}}
					</view>
					<view class="right">
						{{item.recharge}}元
					</view>
				</view>
			</view>
		</view>
		<view v-if="userType=='00'">
			<view class="title">
				统计
			</view>
			<view class="card">
				<view class="xzsj">
					<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
				</view>
				<view class="month" @click="show = true">
					{{yeartime.year + '年' + yeartime.month + '月'}}
				</view>
				<view class="tit">
					本月用电量（度）
				</view>
				<div class="txt">
					{{quantity}}
				</div>
				<view class="echarts" v-if="loging">

				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
               <tab-bar :indexs='1'></tab-bar>
		<!-- #endif -->

	</view>
</template>

<script>
	import * as echarts from '@/components/lime-echart/static/echarts.min.js';
	let chart = null

	export default {
		components: {
			// uniEcCanvas
		},
		data() {
			return {
				type: 1, //交易分析模块里的类型
				jdData: {}, //进度那块数据
				ec: {
					lazyLoad: true
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				recharge: 0,
				bgc: {
					backgroundColor: "#8883f0",
				},
				show: false,
				yeartime: {
					year: '',
					month: ''
				},
				timelist: '',
				chartData: [],
				chartday: [],
				loging: true,
				deviceId: '',
				userType: '',
				totalRecharge: 0,
				dateday:'',
			    timelists:'',
				monthdui:''
			}
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		onLoad() {
			
		},
		onShow() {
			this.timelist = []
			setTimeout(() => {
				//加载折线图数据
				this.loadLineData();
			}, 500)
			this.recharge = 0
			this.deviceId = uni.getStorageSync('deviceId')
			this.userType = uni.getStorageSync('userType')
			this.userType = '01'
			const now = new Date();
			this.yeartime.year = now.getFullYear()
			this.yeartime.month = now.getMonth() + 1
			this.monthdui = this.yeartime.month
			this.dateday = String(now.getDate()).padStart(2, '0')
			this.gettime()
		},
		methods: {
			// 点击获取时间
			confirm(e) {
				this.recharge = 0
				this.yeartime = e
				this.gettime()
				setTimeout(() => {
					//加载折线图数据
					this.loadLineData();
				}, 500)
			},
			// 进行获取用电量请求
			gettime() {
				let data = {
					year: this.yeartime.year,
					month: this.yeartime.month,
					groupBy: 'create_date'
				}
				this.loging = false
				this.$u.get('app/bill/landlordCount', data).then((res) => {
					if (res.code == 200) {
						this.timelist = res.data
						if(this.monthdui != this.yeartime.month){
							this.timelists = this.timelist
							this.totalRecharge = res.totalRecharge
							this.chartData = this.timelist.map(item => item.recharge);
							this.chartday = this.timelist.map(item => item.createDay + '日');
						}else{
							this.timelists = this.timelist.slice(0,this.dateday)
							this.timelists.reverse()
							this.totalRecharge = res.totalRecharge
							this.chartData = this.timelist.slice(0, this.dateday).map(item => item.recharge)
							this.chartday = this.timelist.slice(0, this.dateday).map(item => item.createDay + '日');
						}
						this.loging = true
						for (let i = 0; i < this.timelist.length; i++) {
							this.recharge += this.timelist[i].recharge
						}
						return this.recharge
						//加载折线图数据
						this.loadLineData();
					}
				})
			},
			//加载折线图数据
			loadLineData() {
				//这里请求服务器拿到数据
				let res = {
					//x轴数据
					xData: this.chartday,
					//y轴数据
					yData: this.chartData,
				}
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				let option = {
					xAxis: {
						type: 'category',
						// x轴数据文字颜色
						axisLabel: {
							color: '#fff'
						},
						// x轴那天坐标轴线的颜色
						axisLine: {
							lineStyle: {
								color: '#fff',
							}
						},
						//x轴上面刻度线隐藏
						axisTick: {
							show: false,
						},
						//这里是x轴数据
						data: res.xData
					},
					//设置网格
					grid: {
						top: 40,
						bottom: 30,
					},
					//y轴设置
					yAxis: {
						type: 'value',
						//y轴标签文字颜色
						axisLabel: {
							color: '#fff'
						},
						// y轴分割线设置为虚线
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					//设置提示为点击时
					tooltip: {
						trigger: 'axis',
						triggerOn: 'click',
						formatter: '{b} \n 收入: {c}￥'
					},
					//设置曲线的颜色
					color: ['#fff'],
					series: [{
						//这里是数据
						data: res.yData,
						type: 'line',
						//设置为平滑，默认为折线
						smooth: true,
					}]
				};
				this.$refs.lineChart.init(echarts, chart => {
					chart.setOption(option);
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f1f3f2;
		padding: 20rpx 0rpx 100rpx;
	}
	
	.t-sm {
		font-size: 22rpx;
		color: #6e6e6e;
		padding-left: 10rpx;
	}
	
	.chart-con {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 28rpx;
	
		.chart-wrap {
			width: 100%;
			box-sizing: border-box;
			background-color: #ffffff;
			padding: 32rpx 0rpx;
			border-radius: 20rpx;
	
			.title {
				box-sizing: border-box;
				width: 100%;
				padding: 0rpx 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}
	
			.ver-line {
				height: 30rpx;
				width: 8rpx;
				border-radius: 10rpx;
				background-color: #4e9d77;
			}
	
			.title-desc {
				font-size: 30rpx;
				color: #222222;
				margin-left: 22rpx;
				font-weight: bold;
			}
	
			.ring-chart {
				height: 400rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 28rpx;
				margin-top: 32rpx;
			}
	
			.process-con {
				padding: 50rpx 28rpx 18rpx;
				box-sizing: border-box;
				width: 100%;
	
				.process-item:not(:last-child) {
					margin-bottom: 50rpx;
				}
	
				.process-item {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
	
					.pay-img {
						width: 65rpx;
						height: 65rpx;
					}
	
					.percent-con {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;
						flex: 1;
						padding-left: 28rpx;
	
						.top {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							font-size: 28rpx;
							color: #222222;
							width: 100%;
	
						}
	
						.bot {
							width: 100%;
							height: 12rpx;
							background-color: #f5f5f5;
							border-radius: 10rpx;
							position: relative;
							margin-top: 14rpx;
	
							.percent-num {
								background-color: #4e9d77;
								position: absolute;
								height: 100%;
								top: 0;
								left: 0;
								z-index: 1;
								border-radius: 10rpx;
								transition: width .5s ease-in;
							}
						}
					}
				}
			}
	
			.line-chart-con {
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 28rpx;
	
				.fun-tabs {
					margin-top: 42rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-self: center;
					width: 100%;
					box-sizing: border-box;
	
					.tab-item {
						width: 200rpx;
						height: 120rpx;
						border-radius: 10rpx;
						padding-left: 20rpx;
						background: #ffffff;
						border: 1rpx solid #ececec;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;
						box-sizing: border-box;
	
						.item-name {
							color: #6e6e6e;
							font-size: 20rpx;
						}
	
						.item-val {
							color: #222222;
							font-size: 24rpx;
							font-weight: bold;
							margin-top: 20rpx;
						}
					}
	
					.selected {
						background: #edf5f1 !important;
						border: 1rpx solid #4e9d77 !important;
	
						.item-name {
							color: #4e9d77 !important;
						}
	
						.item-val {
							color: #4e9d77 !important;
						}
					}
				}
	
				.line-chart {
					margin-top: 30rpx;
					height: 380rpx;
				}
			}
		}
	}
	
	
	.gap {
		margin-top: 30rpx;
	}
	
	.t-items {
		width: 690rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		background: #fff;
		margin: 10rpx auto;
		height: 100rpx;
		.t-item {
			font-size: 28rpx;
			height: 60rpx;
			font-weight: bold;
			background: green;
			padding: 0rpx 40rpx;
			border-radius: 6rpx;
			color: #ffffff;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	
	}
	/deep/ .u-title{
		padding-bottom: 20rpx;
	}
	/deep/ .u-icon__icon{
		padding-bottom: 20rpx;
	}

	.uni-ec-canvas {
		width: 100%;
		height: 320rpx;
		display: block;
		margin-top: 30rpx;
	}
	.btnxz {
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		color: #FFFFFF;
	}

	page {
		background-color: #F7FAFE;
	}

	.page {
		padding: 0 59rpx;

		.title {
			margin-top: 120rpx;
			font-size: 48rpx;
			font-weight: 400;
			letter-spacing: 0rpx;

			color: rgba(38, 43, 55, 1);
		}

		.card {
			padding-top: 32rpx;
			margin-top: 10rpx;
			width: 632rpx;
			height: 480rpx;
			background: #8883F0;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			opacity: 1;
			border-radius: 40rpx;

			.month {

				margin-left: 22rpx;
				font-size: 28rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				color: #FFFFFF;
			}

			.tit {
				margin-top: 18rpx;
				margin-left: 22rpx;
				font-size: 20rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				color: #FFFFFF;

			}

			.txt {
				margin-top: 2rpx;
				margin-left: 22rpx;
				font-size: 36rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 700;
				color: #FFFFFF;
			}

			.echarts {
				margin-left: 22rpx;
				// margin-top: 20rpx;
				width: 588rpx;
				height: 320rpx;
			}
		}

		.list {
			margin-top: 16rpx;
            height: 800rpx;
			overflow: auto;
			.card_list {
				width: 632rpx; 
				height: 88rpx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 30rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				margin-top: 16rpx;
				align-items: center;

				.left {
					margin-left: 52rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #808080;
				}

				.right {
					margin-right: 20rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #808080;
				}
			}
		}
	}
</style>