smartswrtch-app/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 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" style="display: flex;">
					<text @click="btnshow(1)">{{yeartime.year + '年' + yeartime.month + '月' + yeartime.day + '日'}} </text> 
					<view class="" style="margin: 0 10rpx;">
						-
					</view>
					<view @click="btnshow(2)">{{yeartimes.year + '年' + yeartimes.month + '月' + yeartimes.day + '日'}} <u-icon style="margin-left: 10rpx;margin-top: 6rpx;"name="arrow-down-fill"></u-icon></view> 
				</view>
				<view class="tit">
					当前时间段收入{{recharge.toFixed(2)}}（元） 累计收入{{totalRecharge.toFixed(2)}}（元）
				</view>

				<view class="echarts" >
						<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: 240rpx;">
				<view class="card_list" v-for="(item,index) in timelists" :key="index">
					<view class="left">
						<!-- // {{yeartime.year + '年' + yeartime.month + '月' + item.createDay + '日'}} -->
						{{item.key}}
					</view>
					<view class="right">
						{{item.value}}元
					</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 + '月' + yeartime.day + '日'}}
				</view>
				<view class="tit">
					本月用电量（度）
				</view>
				<div class="txt">
					{{quantity}}
				</div>
				<view class="echarts" v-if="loging">
				</view>
			</view>
		</view>
		<!-- <view class="name">
			更多功能
		</view>
		<view class="gongneng">
			<image @click="btndingdan" src="https://api.ccttiot.com/smartmeter/img/static/uabiTqXSZVFrY5ck0MoK" mode=""></image>
			<image @click="btnshebie" src="https://api.ccttiot.com/smartmeter/img/static/u5SKuZPtnuFJPdQOYe4u" mode=""></image>
			<image @click="btndianpu" src="https://api.ccttiot.com/smartmeter/img/static/ubVQt7h69i4GKsvRK64V" mode=""></image>
			<image @click="btngeren" src="https://api.ccttiot.com/smartmeter/img/static/uUnZuUCeUajUb5gD23O4" mode=""></image>
		</view> -->
         <tab-bar :indexs='1' style=""></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: true,
					hour: false,
					minute: false,
					second: false
				},
				recharge: 0,
				bgc: {
					backgroundColor: "#8883f0",
				},
				show: false,
				yeartime: {
					year: '',
					month: '',
					day:''
				},
				yeartimes: {
					year: '',
					month: '',
					day:''
				},
				timelist: '',
				quantity: 0, //电量
				chartData: [],
				chartday: [],
				loging: true,
				deviceId: '',
				userType: '',
				totalRecharge: 0,
				dateday:'',
			    timelists:'',
				monthdui:'',
				employId:'',
				sceneValue:'',
				kstime:'',
				jstime:'',
				num:''
			}
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		onLoad(option) {
            if(option.q){
				function getQueryParam(url, paramName) {
					let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
					let results = regex.exec(url);
					return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
				}
				this.sceneValue = option.q
				let decodedValue = decodeURIComponent(this.sceneValue);
				let id = getQueryParam(decodedValue, 'i')
				this.employId = id
				let that = this
				uni.showModal({
				    title: '温馨提示', 
				    content: '您确定要成为合伙人吗？',
				    showCancel: true,
				    success: function(res) {
				        if (res.confirm) { 
				            that.$u.put(`/app/storeStaff/bindUser?employId=${that.employId}`).then(res => {
				            	if (res.code == 200) {
									uni.showToast({
										title:'绑定成功',
										icon: 'success',
										duration: 2000
									})
				            	}else if(res.code == 401){
									uni.reLaunch({
										url:'/pages/login/login'
									})
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
				            })
				        } else if (res.cancel) {
				            uni.reLaunch({
				            	url:'/pages/shouye/index'
				            })
				        }
				    }
				})
			}
		},
		onShow() {
			this.timelist = []
			setTimeout(() => {
				console.log(this.$refs)
				this.$refs.canvas.init(this.initChart)
			}, 500)
			this.recharge = 0
			const now = new Date();
			this.yeartime = {
			    year: now.getFullYear(),
			    month: now.getMonth() + 1, // 月份从0开始，所以需要+1
			    day: 1 // 设置为月份的第一天
			}
			this.kstime = this.yeartime.year + '-' + this.yeartime.month + '-' + (this.yeartime.day < 10 ? '0' + this.yeartime.day : this.yeartime.day)
			this.yeartimes.year = now.getFullYear()
			this.yeartimes.month = now.getMonth() + 1
			this.yeartimes.day = now.getDate()
			this.jstime = this.yeartimes.year + '-' + this.yeartimes.month + '-' + (this.yeartimes.day < 10 ? '0' + this.yeartimes.day : this.yeartimes.day)
			this.gettime()
		},
		methods: {
			// 选择时间
			btnshow(num){
				this.show = true
				this.num = num
			},
			// 点击跳转到管理店铺
			btndianpu(){
				uni.navigateTo({
					url:'/page_fenbao/statulist/myshop/index?types=' + 11
				})
			},
			// 点击返回首页
			btns(){
				uni.reLaunch({
				   url:'/pages/shouye/index'
				})
			},
			// 点击跳转到个人中心
			btngeren(){
				uni.navigateTo({
					url:'/page_fenbao/hehuoren/geren'
				})
			},
			// 点击跳转到订单管理
			btndingdan(){
				uni.navigateTo({
					url:'/page_user/switchs?type=' + 11
				})
			},
			// 点击跳转到设备列表
			btnshebie(){
				uni.navigateTo({
					url:'/page_fenbao/hehuoren/shebeilist'
				})
			},
			// 点击获取时间
			confirm(e) {
				console.log(e);
				this.recharge = 0
				if(this.num == 1){
					this.yeartime = e
					this.kstime = this.yeartime.year + '-' + this.yeartime.month + '-' + this.yeartime.day
				}else{
					this.yeartimes = e
					this.jstime = this.yeartimes.year + '-' + this.yeartimes.month + '-' + this.yeartimes.day
				}
				this.gettime()
				setTimeout(() => {
					console.log(this.$refs)
					this.$refs.canvas.init(this.initChart)
				}, 500)
			},
			// 进行获取用电量请求
			gettime() {
				// let data = {
				// 	year: this.yeartime.year,
				// 	month: this.yeartime.month,
				// 	groupBy: 'create_date'
				// }
				this.loging = false
				this.$u.get(`/app/dashboard/bonusDailyAmount?payDateStart=${this.kstime}&payDateEnd=${this.jstime}`).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.value);
							this.chartday = this.timelist.map(item => item.key.slice(-2) + '日');
						// }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.timelists = this.timelist
						this.totalRecharge = res.total
						this.loging = true
						for (let i = 0; i < this.timelist.length; i++) {
							this.recharge += this.timelist[i].value
						}
						return this.recharge
						this.$refs.canvas.init(this.initChart)
					}else{
						uni.showToast({
							title:res.msg,
							icon: 'none',
							duration:2000
						})
					}
				})
			},

			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 + '日');
						this.loging = true
					}
				})
			},
			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 + '元'
							},
						},
						splitLine: {
							show: false,
						},
					},
					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
			},
		}
	}
</script>

<style lang="scss">
	/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;
        .name{
			font-size: 36rpx;
			color: #3D3D3D;
			margin-top: 20rpx;
		}
		.gongneng{
			margin-top: 40rpx;
			width: 632rpx;
			height: 150rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			display: flex;
			justify-content: space-between;
			padding: 26rpx 50rpx;
			box-sizing: border-box;
			image{
				width: 96rpx;
				height: 102rpx;
			}
		}
		.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: 540rpx;
			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: 60rpx;
				width: 588rpx;
				height: 320rpx;
			}
		}

		.list {
			margin-top: 16rpx;
            height: 630rpx;
			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>