androidCnToWechatGrt/pagesHome/energyConsumption/index.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='能耗管理' bgColor='transparent'></cus-header>
		<image class="bg" :src="imgBase+'storage/home_bg.png'" mode="widthFix"></image>
		<div class="top">
			<div class="pre line">
				<div class="left">
					<div class="tip">今日用电(kwh)</div>
					<div class="num">{{'9,879'}}</div>
				</div>
				<div class="right">
					<image :src="imgBase+'home/nhgl_today.png'"></image>
				</div>
			</div>
			<div class="pre">
				<div class="left">
					<div class="tip">本月用电(kwh)</div>
					<div class="num">{{'89,879'}}</div>
				</div>
				<div class="right">
					<image :src="imgBase+'home/nhgl_month.png'"></image>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="title">用电量统计</div>
			<div class="chart">
				<div class="select">
					<div class="month">按月</div>
					<div class="year" @tap="show = true">
						<text>{{year}}年</text>
						<u-icon name="arrow-down" color="#86909C" size="26"></u-icon>
					</div>
				</div>
				<l-echart ref="chartRef" :canvas2d="true" @finished="initChart"></l-echart>
			</div>
			<div class="list" v-if="list.length">
				<div class="item" v-for="(item,index) in list" :key="index">
					<div class="left">
						<div class="date">{{item.date}}</div>
						<div class="place">位置：{{item.place}}</div>
					</div>
					<div class="right">{{item.kwh}}</div>
				</div>
			</div>
		</div>
		
		<u-picker :show="show" :columns="columns" title="年份" @cancel="show = false;" @confirm="yearConfirm"></u-picker>
	</view>
</template>

<script>
	import * as echarts from '@/pagesHome/components/lime-echart/static/echarts.min.js'
	import lEchart from '@/pagesHome/components/lime-echart/components/l-echart/l-echart.vue'
	export default {
		components:{
			lEchart
		},
		data(){
			return {
				year:new Date().getFullYear()-1,
				show:false,
				columns:(function(){
					let years = [];
					let cy = new Date().getFullYear();
					for(let i=cy;i>cy-10;i--){
						years.push(i)
					}
					return [years];
				})(),
				list:[
					{
						date:'2024年12月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年11月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年10月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年09月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年08月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年07月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年06月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年05月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年04月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年03月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年02月',
						place:'B#',
						kwh:'2408.23kwh'
					},
					{
						date:'2024年01月',
						place:'B#',
						kwh:'2408.23kwh'
					}
				]
			}
		},
		methods:{
			async initChart(){
				const chart = await this.$refs.chartRef.init(echarts);
				let option = {
				  title: {
					text: '数量',
					textStyle:{
						fontSize:16,
						color:'#86909C'
					}
				  },
				  xAxis: {
					type: 'category',
					data: (function(){
						let months = [];
						for (let i=1;i<=12;i++) {
							months.push(i+'月')
						}
						return months;
					})()
				  },
				  yAxis: {
					type: 'value'
				  },
				  tooltip: {
					trigger: 'axis',
					axisPointer: {
					  type: 'cross',
					  label: {
						backgroundColor: '#6a7985'
					  }
					}
				  },
				  grid: {
					left: '1%',
					right: '1%',
					bottom: '5%',
					top: '20%',
					containLabel: true
				  },
				  series: [
					{
					  name:'用电量',
					  data: (function(){
							let data = [];
							for (let i=1;i<=12;i++) {
								data.push(Math.random()*1200)
							}
							return data;
					  })(),
					  type: 'line',
					  lineStyle:{
					   color:'#198CFF',
					   width: 3
					  },
					  symbol:'none',
					  areaStyle: {
						color:'rgba(25,140,255,.4)'
					  },
					  smooth: true
					}
				  ]
				};
				chart.setOption(option);
			},
			yearConfirm(e){
				this.year = e.value[0];
				this.show = false;
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		width: 100%;
		padding: 0 24rpx 20rpx;
		box-sizing: border-box;
		background: #F4F8FB;
		
		.bg{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}
	
		.top{
			padding: 40rpx 0;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			position: relative;
			margin-top: 20rpx;
			.pre{
				width: 50%;
				padding: 0 24rpx;
				box-sizing: border-box;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&.line::after{
					content: '';
					width: 1rpx;
					height: 100rpx;
					background: #EFEFEF;
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -50rpx;
				}
				.left{
					.tip{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #657588;
						line-height: 28rpx;
						text-align: left;
					}
					.num{
						font-family: D-DIN, D-DIN;
						font-weight: bold;
						font-size: 48rpx;
						color: #1D2129;
						line-height: 48rpx;
						text-align: left;
						margin-top: 16rpx;
					}
				}
				.right{
					width: 80rpx;
					height: 80rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	
		.card{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 40rpx 24rpx;
			position: relative;
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #1D2129;
				line-height: 36rpx;
			}
			.chart{
				position: relative;
				.select{
					width: 226rpx;
					height: 48rpx;
					border-radius: 6rpx;
					border: 1rpx solid #ECECEC;
					display: flex;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 999;
					
					.month{
						width: 87rpx;
						height: 48rpx;
						border-right: 1rpx solid #ECECEC;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #198CFF;
						line-height: 48rpx;
						text-align: center;
					}
					.year{
						width: calc(100% - 88rpx);
						display: flex;
						align-items: center;
						justify-content: center;
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							line-height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
			.list{
				.item{
					width: 100%;
					padding: 31rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					.left{
						.date{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #1D2129;
							line-height: 36rpx;
						}
						.place{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 24rpx;
							margin-top: 14rpx;
						}
					}
					.right{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #1D2129;
						line-height: 36rpx;
						text-align: right;
					}
				}
			}
		}
	}
</style>