jp-housekeep-electric/pages/equipmentDataMonitoring/equipmentElectricity.vue

<template>
	<view>
		<view class="navbar-c">
			<view class="back" @click="backStatistics">
				<u-icon name="arrow-left" color="#101010" size="36"></u-icon>
			</view>
			<view class="title">
				设备用电量<image class="img" src="@/assets/img/refresh-line.svg"></image>
			</view>
			
		</view>
		<!-- 标签 -->
		<view class="tabs-box">
			<view class="tabs">
				<u-tabs :list="list" :is-scroll="false" inactive-color="#999999"  active-color="#666666" :current="current" @change="change"></u-tabs>
			</view>
			<view class="icon">
				<u-icon name="arrow-down" color="#999999"></u-icon>
			</view>
		</view>
		<!-- 用电量 -->
		<view class="main">
			<view class="item" v-for="(item, index) in kWhList" :key="index" @click="toElectronicMonitoring(item)">
				<view class="icon">
					<image class="img" src="@/assets/img/energyMeter.svg" mode=""></image>
				</view>
				<view class="equipment">
					<view class="equipment1">
						{{item.name}}
					</view>
					<view class="equipment2">
						{{item.companyName}}
					</view>
				</view>
				<view class="electricity">
					<view class="electricity-item">
						<view class="number">
							{{item.yesterdayKwh}}
						</view>
						<view class="date">
							昨日
						</view>
					</view>
					<view class="electricity-item">
						<view class="number">
							{{item.thisMonthKwh}}
						</view>
						<view class="date">
							本月
						</view>
					</view>
					<view class="electricity-item">
						<view class="number">
							{{item.lastMonthKwh}}
						</view>
						<view class="date">
							上月
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/energy/index.js'
	
	export default {
		data() {
			return {
				kWhList: [],
				companyId: '',
				pageIndex: 1,
				recordsTotal: 0,
				list: [{
					name: '全部'
				}, {
					name: '荆鹏集团'
				}, {
					name: '青少年宫',
					
				}, {
					name: '荆州院子',
					
				}],
				current: 0
			}
		},
		onReady() {
			this.getList()
		},
		onReachBottom() {
			if (this.deviceList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			myLoadmore() {
				this.pageIndex += 1;
				this.getList();
			},
			getList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.kWhList = [];
					this.pageIndex = 1;
				}
				var data = {
					pageIndex: this.pageIndex,
					pageSize: 5,
					companyId: this.companyId
				};
				API.homePageKwh(data).then((res) => {
					uni.hideLoading()
					this.kWhList = [
						...this.kWhList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
			
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			change(index) {
				this.current = index;
			},
			backStatistics() {
				uni.navigateBack()
			},
			toElectronicMonitoring() {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/electronicMonitoring'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		z-index: 999;
		width: 200rpx;
	}
	
	.tabs-box{
		background-color: #fff;
		display: flex;
		align-items: center;
		.tabs{
			width: 80%;
		}
		.icon{
			margin-left: auto;
			margin-right: 24rpx;
		}
	}
   // 用电量
   .main{
	   background-color: #fff;
	   .item{
		   padding: 32rpx;
		   display: flex;
		   align-items: center;
		   border-bottom: 1px solid rgba(245,245,245,1);
		   .icon{
			   width: 72rpx;
			   height: 72rpx;
			   border-radius: 4px;
			   background-color: rgba(219,234,255,1);
			   display: flex;
			   align-items: center;
			   justify-content: center;
			   .img{
				   width: 48rpx;
				   height: 48rpx;
			   }
		   }
		   .equipment{
			   margin-left: 16rpx;
			   .equipment1{
				   color: rgba(51,51,51,1);
				   font-size: 32rpx;
				   font-weight: bold;
			   }
			   .equipment2{
				   color: rgba(119,119,119,1);
			   }
		   }
		   .electricity{
			   display: flex;
			   justify-content: space-between;
			   flex: 1;
			   margin-left: 48rpx;
			   text-align: center;
			   .electricity-item{
				   .number{
					   color: rgba(51,51,51,1);
					   font-size: 32rpx;
					   font-weight: bold;
				   }
				   .date{
					   color: rgba(119,119,119,1);
					   margin-top: 4rpx;
				   }
			   }
		   }
	   }
   }
</style>