smartmeter-app/pages/tj.vue

<template>
	<view class="page" style="padding-top: 120rpx;">
		<!-- <u-navbar :is-back="false" title="统计" :border-bottom="false" :background="bgc" title-color='#2E4975'
			title-size='44' height='44' id="navbar"> -->
		</u-navbar>
		<view  v-if="userType=='01'">
		<!-- 	<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">
					本月收入{{totalRecharge}}（元）
				</view>
				<div class="txt">
					{{quantity}}
				</div>
				<view class="echarts" v-if="loging">
					<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
				<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
				</uni-ec-canvas>
				</view>
			</view>
			<view class="list" style="padding-bottom: 120rpx;">
				<view class="card_list" v-for="(item,index) in timelist" :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">
					<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
					<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canva" canvas-id="uni-ec-canvas" :ec="ec">
					</uni-ec-canvas>
				</view>
			</view>
			<view class="list" style="padding-bottom: 120rpx;">
				<view class="card_list" v-for="(item,index) in timelist" :key="index">
					<view class="left">
						{{yeartime.year + '年' + yeartime.month + '月' + item.createDay + '日'}}
					</view>
					<view class="right">
						{{item.usedElectriQuantity}}度
					</view>
				</view>
			</view>
		</view>
		<tab-bar :indexs='1'></tab-bar>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				ec: {
					lazyLoad: true
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				bgc: {
					backgroundColor: "#F7FAFE",
				
				},
				show: false,
				yeartime: {
					year: '',
					month: ''
				},
				timelist: '',
				quantity: 0, //电量
				chartData: [],
				chartday:[],
				loging:true,
				deviceId:'',
				userType:'',
				totalRecharge:0,
			}
		},
		onLoad() {
			// setTimeout(() => {

			// 			this.initChart()		
			// }, 300);
			// this.initChart()

            // 首次加载页面给现在的时间
			
         
		},
		onShow() {
			this.deviceId= uni.getStorageSync('deviceId')
			this.userType = uni.getStorageSync('userType')
			const now = new Date();
			this.yeartime.year = now.getFullYear()
			this.yeartime.month = now.getMonth() + 1
			if(	this.userType=='00'){
					this.gettimes()
					setTimeout(() => {
					
						this.$refs.canva.init(this.initCharts)
					}, 1000);
			}else if (	this.userType=='01'){
				   this.gettime()
				   setTimeout(() => {
				   
				   	this.$refs.canvas.init(this.initChart)
				   }, 1000);
			}
		},
		methods: {
			// 点击获取时间
			confirm(e) {
				this.yeartime = e
				this.gettime()
				if(	this.userType=='00'){
						
						setTimeout(() => {
						
							this.$refs.canva.init(this.initCharts)
						}, 1000);
				}else if (	this.userType=='01'){
					
					   setTimeout(() => {
					   
					   	this.$refs.canvas.init(this.initChart)
					   }, 1000);
				}
			},
			// 进行获取用电量请求
			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
						this.totalRecharge=res.totalRecharge
						this.chartData = this.timelist.map(item => item.recharge);
					        this.chartday = this.timelist.map(item => item.createDay + '日');
					        
					        // console.log('用电', this.chartData, '时间', this.chartday);
							this.loging=true
							// this.$refs.canvas.init(this.initChart)
						// 求用电总度数
						// this.quantity = 0
						// for (let i = 0; i < this.timelist.length; i++) {
						// 	this.quantity += this.timelist[i].recharge / 0.5
						// }
						// return this.quantity
					}
				})
			},

			gettimes() {
				let data = {
					deviceId:this.deviceId,
					year: this.yeartime.year,
					month: this.yeartime.month,
					groupBy: 'create_date'
				}
				this.loging=false
				this.$u.get('/app/device/electric/count', data).then((res) => {
					if (res.code == 200) {
						this.timelist = res.data
						this.chartData = this.timelist.map(item => item.usedElectriQuantity);
					    this.chartday = this.timelist.map(item => item.createDay + '日');
					
					        // console.log('用电', this.chartData, '时间', this.chartday);
						this.loging=true
						// this.$refs.canva.init(this.initCharts)
						// 求用电总度数
						// this.quantity = 0
						// for (let i = 0; i < this.timelist.length; i++) {
						// 	this.quantity += this.timelist[i].recharge / 0.5
						// }
						// return this.quantity
					}
				})
			},
			generateWaveData(length) {
				const data = []
				for (let i = 0; i < length; i++) {
					const y = Math.sin((i / (length - 1)) * Math.PI * 2) // 正弦函数生成波浪形状的y值
					data.push((y + 1) * 50) // 映射到0-100的范围
				}
				return data
			},

		initChart(canvas, width, height, canvasDpr) {
			let that = this
			console.log(canvas, width, height, canvasDpr)
			const option = {
				grid: {
					left: 60,
					right: 10,
					top: 10,
					bottom: 30,
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: true,
						color: '#fff',
						fontSize: 11,
						rotate: 0,
					},
					splitLine: {
						show: false,
					},
					data: that.chartday,
				},
				yAxis: {
					show: true,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: true,
						color: '#fff',
						fontSize: 11,
						formatter: function(value) {
							// 保留两位小数，没有小数时显示00
							return value + '.00' + '元'
						},
					},
					splitLine: {
						show: false,
					},
				},
				visualMap: {
					type: 'piecewise',
					show: false,
					dimension: 0,
					seriesIndex: 0,
					pieces: [{
							gt: 1,
							lt: 3,
							color: 'rgba(0, 0, 180, 0.4)',
						},
						{
							gt: 5,
							lt: 7,
							color: 'rgba(0, 0, 180, 0.4)',
						},
					],
				},
				series: [{
					type: 'line',
					smooth: 0.6,
					symbol: 'none',
					lineStyle: {
						color: '#E0DBFF',
						width: 4,
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#B4B0F7'
							}, ]),
						},
					},
					data: that.chartData,
				}],
			};
			chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: canvasDpr
			})
			
			option.series[0].data = that.chartData
			canvas.setChart(chart)
			chart.setOption(option)
			return chart
		},
		initCharts(canvas, width, height, canvasDpr) {
			let that = this
			console.log(canvas, width, height, canvasDpr)
			const option = {
				grid: {
					left: 60,
					right: 10,
					top: 10,
					bottom: 30,
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: true,
						color: '#fff',
						fontSize: 11,
						rotate: 0,
					},
					splitLine: {
						show: false,
					},
					data:that.chartday,
				},
				yAxis: {
					show: true,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: true,
						color: '#fff',
						fontSize: 11,
						formatter: function(value) {
							// 保留两位小数，没有小数时显示00
							return value  + '度'
						},
					},
					splitLine: {
						show: false,
					},
				},
				visualMap: {
					type: 'piecewise',
					show: false,
					dimension: 0,
					seriesIndex: 0,
					pieces: [{
							gt: 1,
							lt: 3,
							color: 'rgba(0, 0, 180, 0.4)',
						},
						{
							gt: 5,
							lt: 7,
							color: 'rgba(0, 0, 180, 0.4)',
						},
					],
				},
				series: [{
					type: 'line',
					smooth: 0.6,
					symbol: 'none',
					lineStyle: {
						color: '#E0DBFF',
						width: 4,
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#B4B0F7'
							}, ]),
						},
					},
					data:that.chartData,
				}],
			};
			chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: canvasDpr
			})
			
			option.xAxis.data =  that.chartday
			canvas.setChart(chart)
			chart.setOption(option)
			return chart
		},
			async initChartss() {
				console.log('111111');
				let that =this
				// let _this = this
				const option = {
					grid: {
						left: 60,
						right: 10,
						top: 10,
						bottom: 30,
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							color: '#fff',
							fontSize: 11,
							rotate: 0,
						},
						splitLine: {
							show: false,
						},
						data:that.chartday,
					},
					yAxis: {
						show: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							color: '#fff',
							fontSize: 11,
							formatter: function(value) {
								// 保留两位小数，没有小数时显示00
								return value  + '度'
							},
						},
						splitLine: {
							show: false,
						},
					},
					visualMap: {
						type: 'piecewise',
						show: false,
						dimension: 0,
						seriesIndex: 0,
						pieces: [{
								gt: 1,
								lt: 3,
								color: 'rgba(0, 0, 180, 0.4)',
							},
							{
								gt: 5,
								lt: 7,
								color: 'rgba(0, 0, 180, 0.4)',
							},
						],
					},
					series: [{
						type: 'line',
						smooth: 0.6,
						symbol: 'none',
						lineStyle: {
							color: '#E0DBFF',
							width: 4,
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#B4B0F7'
								}, ]),
							},
						},
						data:that.chartData,
					}],
				};
				const chart = await that.$refs.charts.init(echarts)
				console.log(option,'111');
				// 给折线图赋值
				// option.series[0].data = that.chartData 
				option.xAxis.data =  that.chartday
				chart.setOption(option)
				return chart 
			}, 
		}
	}
</script>

<style lang="scss">
	.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;
		// padding-bottom: 240rpx;
		// box-sizing: border-box;
	}

	.page {
		
		padding: 0 59rpx;
		padding-bottom: 150rpx;
		.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: 46rpx;
			width: 632rpx;
			height: 586rpx;
			background: #8883F0;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			opacity: 1;
			// filter: blur(0px);
			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: 60rpx;
				// width: 100%;
				// height: 80%;
				width: 588rpx;
				height: 320rpx;
			}
		}

		.list {
			margin-top: 16rpx;
   //          height:280rpx;
			// overflow-y: scroll;
			.card_list {
				width: 632rpx;
				height: 88rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				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>