smartswrtch-app/pages/tj.vue

<template>
	<view class="page" >
      <!-- <u-navbar :is-back="true" title="运营" :border-bottom="false" :background="bgc" title-color='#fff' @custom-back="btncustom" back-icon-color="#fff"
       	title-size='36' height='44' id="navbar">
       </u-navbar> -->
	   <view class="titles">
	   	<image src="https://api.ccttiot.com/smartmeter/img/static/uyr6T0Vfkefty2blkDmU" mode="aspectFit"
	   		style="width: 52rpx;height: 52rpx;margin-right: 10rpx;vertical-align: bottom;vertical-align: bottom;"
	   		@click="btnshouye"></image>
	   	<text>运营</text>
	   </view>
	   <image src="https://api.ccttiot.com/smartmeter/img/static/u3f8ZWoJQnnXNHEaXC2N" class="imgbj" mode=""></image>
		<view class="box">
			<view class="topding">
				   <view class="dawz" style="border-right: 1px solid #D5CEFF;">
				   	  <view class="shuwz">
				   	  	{{tjobj.todayIncome == null ? '0.00' : tjobj.todayIncome}}
				   	  </view>
						  <view class="yuwz">
						  	今日营业额/元
						  </view>
				   </view>
					   <view class="dawz">
					   	  <view class="shuwz">
					   	  	{{tjobj.todayOrder == null ? '0.00' : tjobj.todayOrder}}
					   	  </view>
					   	  <view class="yuwz">
					   	  	今日订单/笔
					   	  </view>
					   </view>
			</view>
			<view class="shouru">
				<view class="tongji">
					<view class="one">
						<view class="top">
							{{tjobj.totalIncome == null ? '0.00' : tjobj.totalIncome}}
						</view>
						<view class="bot" style="font-size: 24rpx;">
							总收入/元
						</view>
					</view>
					<view class="one">
						<view class="top">
							{{tjobj.totalOrder == null ? 0 : tjobj.totalOrder}}
						</view>
						<view class="bot" style="font-size: 24rpx;">
							总订单/笔
						</view>
					</view>
					<view class="one">
						<view class="top">
							{{tjobj.balance == null ? '0.00' : tjobj.balance}}
						</view>
						<view class="bot" style="font-size: 24rpx;">
							账户余额
						</view>
					</view>
				</view>
			</view>
			<view class="gailan">
				<view class="name">
					运营概览
				</view>
				<view class="top">
					<view class="lt">
						经营概况
					</view>
					<view class="rt">
						<view @click="btntab(1)" :class="tabindex == 1 ? 'actives' : ''">
							近30天
						</view>
						<view @click="btntab(2)" :class="tabindex == 2 ? 'actives' : ''">
							近7天
						</view>
					</view>
				</view>
				<view class="zhixian">
					<view class="echarts" style="padding: 20rpx;">
							<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 class="shuom">
						<view class="">
							<text style="background-color: #B1A5FF;"></text>
							订单营收
						</view>
						<view class="">
							<text style="background-color: #A9D2FF;"></text>
							订单数
						</view>
					</view>
				</view>
				<view class="bijiao">
					<view class="lt" style="border-right: 1px solid #D8D8D8;">
						<view class="price">
							{{zongprice}}
						</view>
						<view class="wz">
							订单营收(元)
						</view>
					</view>
					<view class="lt" style="padding-left: 34rpx;box-sizing: border-box;">
						<view class="price">
							{{zongnum}}
						</view>
						<view class="wz">
							订单数(单)
						</view>
					</view>
				</view>
			</view>
			<view class="shebei">
				<view class="name">
					当前运营情况 
				</view>
				<view class="bd">
					<view class="one">
						<view class="">
							设备总数
						</view>
						<view class="cu">
							{{tjobj.deviceCount == null ? 0 : tjobj.deviceCount}}
						</view>
					</view>
					<view class="one">
						<view class="">
							空闲
						</view>
						<view class="cu">
							{{tjobj.freeDeviceCount == null ? 0 : tjobj.freeDeviceCount}}
						</view>
					</view>
					<view class="one" style="border: none;">
						<view class="">
							租赁中
						</view>
						<view class="cu">
							{{tjobj.usingDeviceCount == null ? 0 : tjobj.usingDeviceCount}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
        <tab-bar :indexs='1' style=""></tab-bar>
	</view>
</template>

<script>
	import * as echarts from '@/components/uni-ec-canvas/echarts.js'
	let chart = null
	export default {
		data() {
			return {
				ec: {
					lazyLoad: true
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				recharge: 0,
				bgc: {
					backgroundColor: "",
				},
				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:'',
				tabindex: 1,
				smflag:false,
				revenuelist:[], //营收
				quantitylist:[], //订单数
				shoururiqilist:[], //日期
				tjobj:{},
				formattedCurrentDate:'',
				formattedThirtyDaysAgo:'',
				zongprice:'',
				zongnum:'',
				userobj:{}
			}
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		onLoad(option) {
           
		},
		onShow() {
			this.tabindex = 1
			this.shoururiqilist =[]
			this.revenuelist =[]
			this.quantitylist = []
			// 计算往前推30天的日期
			const currentDate = new Date()
			const thirtyDaysAgo = new Date(currentDate)
			thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
			this.formattedCurrentDate = this.formatDate(currentDate)
			this.formattedThirtyDaysAgo = this.formatDate(thirtyDaysAgo)
			console.log(this.formattedCurrentDate,this.formattedThirtyDaysAgo)
			// this.getinfo()
			this.gettimes()
			this.gettj()
		},
		methods: {
			// 点击导航栏回到首页
			btnshouye() {
				uni.reLaunch({
					url: '/pages/shouye/index'
				})
			},
			 
			// 设置日期格式为 YYYY-MM-DD
			formatDate(date) {
			  const year = date.getFullYear()
			  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
			  const day = String(date.getDate()).padStart(2, '0')
			  return `${year}-${month}-${day}`
			},
			// 订单营收蓝色 订单数紫色
			gettimes() {
				this.$u.get('/app/dashboard/mchRevenue').then((res) => {
					if (res.code == 200) {
						this.tjobj = res.data
					}
				})
			},
			// 统计图
			gettj() {
				this.$u.get(`/app/dashboard/bonusTrend?payDateStart=${this.formattedThirtyDaysAgo}&payDateEnd=${this.formattedCurrentDate}`).then((res) => {
					if (res.code == 200) {
						this.zongprice = res.data.totalIncome
						this.zongnum = res.data.totalOrder
						res.data.detailList.forEach(item => {
							this.shoururiqilist.push( item.date.slice(-2) + '日')
                            this.revenuelist.push(item.incomeAmount)
							this.quantitylist.push(item.orderCount) 
						})
						console.log('营收',this.revenuelist);
						console.log('订单',this.quantitylist);
						this.$refs.canvas.init(this.initChart)
					}
				})
			},
			
            // 点击切换周还是月
            btntab(num) {
            	this.tabindex = num
				this.shoururiqilist =[]
				this.revenuelist =[]
				this.quantitylist = []
				if(num == 1){
					const currentDate = new Date()
					const thirtyDaysAgo = new Date(currentDate)
					thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
					this.formattedCurrentDate = this.formatDate(currentDate)
					this.formattedThirtyDaysAgo = this.formatDate(thirtyDaysAgo)
					this.gettj()
				}else{
					const currentDate = new Date()
					const thirtyDaysAgo = new Date(currentDate)
					thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 7)
					this.formattedCurrentDate = this.formatDate(currentDate)
					this.formattedThirtyDaysAgo = this.formatDate(thirtyDaysAgo)
					this.gettj()
				}
            },
			
			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
				const option = {
					grid: {
						left: 35,
						right: 0,
						top: 10,
						bottom: 20,
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							color: '#808080',
							fontSize: 11,
							rotate: 0,
						},
						splitLine: {
							show: false,
						},
						data: that.shoururiqilist,
					},
					yAxis: {
						show: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							color: '#808080',
							fontSize: 11,
							formatter: function(value) {
								// 保留两位小数，没有小数时显示00
								return value
							},
						},
						splitLine: {
							show: false,
						},
					},
					series: [{
						type: 'line',
						smooth: 0.6,
						symbol: 'none',
						lineStyle: {
							color: '#E0DBFF',
							width: 2,
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#ECE8FF'
								}, ]),
							}, 
						},
						data: that.chartData,
					},{
						type: 'line',
						smooth: 0.6,
						symbol: 'none',
						lineStyle: {
							color: '#A9D2FF',
							width: 2,
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#C3E0FF'
								}, ]),
							}, 
						},
						data: that.chartData,
					}],
					tooltip: {
						trigger: 'axis',
						triggerOn: 'click',
						formatter: '时间:{b} \n营收:{c}元\n订单:{c1}单'
					},
				}
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				option.series[0].data = that.revenuelist
				option.series[1].data = that.quantitylist
				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:#F0EFFF;
	}
    .actives {
    	background: #fff !important;
    	box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.15) !important;
    }
	.topding{
		padding: 0 112rpx;
		box-sizing: border-box;
		display: flex;
		.dawz{
			width: 50%;
			text-align: center;
			.shuwz{
				font-weight: 600;
				font-size: 60rpx;
				color: #FFFFFF;
			}
			.yuwz{
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
		}
	}
    
    .box {
    	width: 100%;
    	height: 77vh;
    	overflow: scroll;
    }
	.imgbj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
    .shebei{
    	width: 680rpx;
    	margin: auto;
    	margin-top: 34rpx;
    	.name{
    		font-weight: 600;
    		font-size: 36rpx;
    		color: #3D3D3D;
    		display: flex;
    		align-items: center;
    		text{
    			width: 184rpx;
    			height: 54rpx;
    			background: #E8E8E8;
    			border-radius: 8rpx 8rpx 8rpx 8rpx;
    			line-height: 54rpx;
    			text-align: center;
    			font-size: 26rpx;
    			color: #3D3D3D;
    			margin-left: 20rpx;
    		}
    		image{
    			margin-left: 10rpx;
    			width: 30rpx;
    			height: 30rpx;
    		}
    	}
    	.bd{
    		width: 680rpx;
    		height: 172rpx;
    		background: #FFFFFF;
    		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72,137,59,0.1);
    		border-radius: 24rpx 24rpx 24rpx 24rpx;
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
    		text-align: center;
    		margin-top: 20rpx;
    		.one{
    			border-right: 1px solid #C7C7C7;
    			width: 33%;
    			view{
    				font-size: 24rpx;
    				color: #3D3D3D;
    			}
    			.cu{
    				font-weight: 600;
    				font-size: 40rpx;
    				color: #3D3D3D;
    				margin-top: 8rpx;
    				text{
    					color: #8883F0;
    				}
    			}
    		}
    	}
    }
    .gailan {
    	width: 680rpx;
    	max-height: 1868rpx;
    	background: #FFFFFF;
    	box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72, 137, 59, 0.1);
    	border-radius: 24rpx 24rpx 24rpx 24rpx;
    	margin: auto;
    	margin-top: 34rpx;
    	padding: 0 30rpx;
    	padding-top: 38rpx;
    	padding-bottom: 24rpx;
    	box-sizing: border-box;
    
    	.bijiao {
    		width: 636rpx;
    		max-height: 204rpx;
    		background: #DEF1DA;
    		border-radius: 24rpx 24rpx 24rpx 24rpx;
    		display: flex;
    		padding: 24rpx 40rpx;
    		box-sizing: border-box;
    		margin-top: 34rpx;
    
    		.lt {
    			width: 50%;
    
    			.price {
    				font-weight: 600;
    				font-size: 36rpx;
    				color: #3D3D3D;
    			}
    
    			.wz {
    				font-size: 24rpx;
    				color: #3D3D3D;
    				display: flex;
    				align-items: center;
    				margin-top: 10rpx;
    
    				image {
    					width: 32rpx;
    					height: 32rpx;
    					margin-left: 10rpx;
    				}
    			}
    		}
    	}
    
    	.zhixian {
    		.shuom {
    			margin-top: 26rpx;
    			display: flex;
    			align-items: center;
    			padding: 0 76rpx;
    			box-sizing: border-box;
    			justify-content: space-between;
    
    			view {
    				font-size: 24rpx;
    				color: #3D3D3D;
                    text{
						display: inline-block;
						width: 76rpx;
						height: 18rpx;
						margin-right: 10rpx;
					}
    				// image {
    				// 	width: 76rpx;
    				// 	height: 18rpx;
    				// 	margin-right: 10rpx;
    				// }
    			}
    		}
    	}
    
    	.top {
    		display: flex;
    		justify-content: space-between;
    		height: 66rpx;
    		line-height: 66rpx;
    		align-items: center;
    		margin-top: 24rpx;
    
    		.lt {
    			border-left: 10rpx solid #8883F0;
    			font-weight: 600;
    			font-size: 32rpx;
    			color: #3D3D3D;
    			height: 50rpx;
    			line-height: 50rpx;
    			padding-left: 16rpx;
    			box-sizing: border-box;
    		}
    
    		.rt {
    			width: 236rpx;
    			height: 66rpx;
    			background: #F6F6F6;
    			border-radius: 8rpx 8rpx 8rpx 8rpx;
    			display: flex;
    			justify-content: space-between;
    			align-items: center;
    
    			view {
    				width: 116rpx;
    				height: 58rpx;
    				border-radius: 8rpx 8rpx 8rpx 8rpx;
    				text-align: center;
    				line-height: 58rpx;
    			}
    		}
    	}
    
    	.name {
    		font-weight: 600;
    		font-size: 36rpx;
    		color: #3D3D3D;
    		text-align: center;
    		width: 100%;
    	}
    }
    
    .shouru {
    	width: 680rpx;
    	max-height: 838rpx;
    	background: #FFFFFF;
    	box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72, 137, 59, 0.1);
    	border-radius: 24rpx 24rpx 24rpx 24rpx;
    	margin: auto;
    	margin-top: 24rpx;
    	padding: 26rpx 32rpx;
    	box-sizing: border-box;
    
    	.tongji {
    		display: flex;
    		text-align: center;
    		margin-top: 20rpx;
    		box-sizing: border-box;
    		justify-content: space-between;
            padding:0 50rpx;
    		.one {
    			.top {
    				font-weight: 600;
    				font-size: 36rpx;
    				color: #8883F0;
					margin-bottom: 12rpx;
    			}
    
    			.bot {
    				font-size: 28rpx;
    				color: #7C7C7C;
					margin-top: 12rpx;
    			}
    		}
    	}
    
    	.name {
    		font-weight: 600;
    		font-size: 36rpx;
    		color: #3D3D3D;
    	}
    }
    
	.page {
		// padding: 0 59rpx;
		.titles {
			padding-left: 32rpx;
			font-size: 40rpx;
			color: #fff;
			padding-top: 104rpx;
			height: 200rpx;
			background-color: #AFA4FB;
			text {
				padding-left: 33%;
			}
		}
        .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>