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" @click="getList()"></image>
			</view>

		</view>
		<!-- 标签 -->
		<view class="tabs-box" v-if="companyList.length > 2">
			<view class="tabs">
				<u-tabs :list="merchantList1" :is-scroll="false" inactive-color="#999999" active-color="#666666" :current="current"
					@change="change"></u-tabs>
			</view>
			<view class="icon" @click="popShow=true">
				<u-icon name="arrow-down" color="#999999"></u-icon>
			</view>
		</view>
		<!-- 标签弹出层 -->
		<u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
			<view class="popup-tabs">
				<view class="tabs">
					<u-tabs :list="merchantList1" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view class="more">
					<u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
				</view>
			</view>
			<view class="tabs-options">
				<view class="item" v-for="(item, index) in merchantList2" :key="index" @click="merchantChange(item,index)">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		<view class="tatol-main" v-for="(m, i) in kWhList" :key="i" style="margin-bottom: 15px;">
			<!-- 用电量合计 -->
			<view class="total">
				<view class="company">
					<view class="name">
						{{m.companyName}}
					</view>
					<view class="amount">
						共 {{m.deviceList.length}} 台设备
					</view>
				</view>
				<view class="infos">
					<view class="infos-item">
						<view class="number">
							{{m.thisDayKwh.toFixed(2)}}
						</view>
						<view class="time">
							今日
						</view>
					</view>
					<view class="infos-item">
						<view class="number">
							{{m.thisMonthKwh.toFixed(2)}}
						</view>
						<view class="time">
							本月
						</view>
					</view>
					<view class="infos-item">
						<view class="number">
							{{m.lastMonthKwh.toFixed(2)}}
						</view>
						<view class="time">
							上月
						</view>
					</view>
				</view>
			</view>

			<view class="main">
				<view class="item" v-for="(item, index) in m.deviceList" :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 equipment-text-overflow">
							{{item.name}}
						</view>
						<view class="equipment2 equipment-text-overflow">
							<view class="companyName">
								{{item.companyName}}
							</view>
							<!-- 离线 -->
							<view class="state" v-if="!item.online">
								<text class="off-line"></text>离线
							</view>
							<!-- 在线 -->
							<view class="state state2" v-else>
								<text class="on-line"></text>在线
							</view>
						</view>
					</view>
					<view class="electricity">
						<view class="electricity-item">
							<view class="number">
								{{item.thisDayKwh}}
							</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>
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/energy/index.js'

	export default {
		data() {
			return {
				companyList: [], // 商户
				merchantList1: [], 
				merchantList2: [],
				kWhList: [], //设备
				companyId: '',
				popShow: false,
				current: 0
			}
		},
		onLoad() {
			this.getList();
			this.getCompanyInfoList();
		},
		methods: {
			getCompanyInfoList() {
				this.merchantList1 = [];
				this.merchantList2 = [];

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deviceCompanyList().then((response) => {
					uni.hideLoading();
					this.companyList = response.data.companyInfoList;
					for (var i = 0; i < this.companyList.length; i++) {
						this.companyList[i].name = this.companyList[i].fullName;
					}
					if (this.companyList.length > 3) {
						this.merchantList1.push(this.companyList.slice(0, 3));
						this.merchantList2.push(this.companyList.slice(3));
					} else {
						this.merchantList1 = this.companyList;
					}
					this.merchantList1.unshift({
						id: '',
						name: '全部'
					});
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var data = {
					pageIndex: 1,
					pageSize: 100,
					companyId: this.companyId
				};
				API.homePageKwh(data).then((res) => {
					uni.hideLoading()
					var dataList = res.data.data;
					var idList = [];
					var list = []
					for (var i = 0; i < dataList.length; i++) {
						idList.push(dataList[i].companyId);
					}
					idList = Array.from(new Set(idList));
					for (var m = 0; m < idList.length; m++) {
						list.push({
							companyId: idList[m],
							companyName: '',
							thisDayKwh: 0,
							thisMonthKwh: 0,
							lastMonthKwh: 0,
							deviceList: []
						});
						for (var n = 0; n < dataList.length; n++) {
							if(dataList[n].companyId == idList[m]) {
								list[m].companyName = dataList[n].companyName;
								list[m].deviceList.push(dataList[n]);
								list[m].thisDayKwh += dataList[n].thisDayKwh;
								list[m].thisMonthKwh += dataList[n].thisMonthKwh;
								list[m].lastMonthKwh += dataList[n].lastMonthKwh;
							}
						}
					}
					// console.log(list)
					this.kWhList = list;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			merchantChange(item,index) {
				var m = item;
				var n = this.merchantList1[this.current];
				this.merchantList1[this.current] = m;
				this.merchantList2[index] = n;
				this.companyId = item.id;
				this.popShow = false;
				
				this.getList();
			},
			change(index) {
				this.current = index;
				this.companyId = this.merchantList1[index].id;

				this.getList();
			},
			backStatistics() {
				uni.navigateBack()
			},
			toElectronicMonitoring(item) {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item.name
						+ '&companyId=' + item.companyId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		z-index: 999;
		width: 200rpx;
	}

	/deep/.u-drawer-content {
		margin-top: 88rpx;
	}
	
	/deep/.u-tab-item {
		width: 25% !important;
		flex: none !important;
	}

	.tabs-box {
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		padding-right: 32rpx;
		justify-content: space-between;

		.tabs {
			width: 88%;
		}

		.icon {
			margin-left: auto;
			margin-right: 24rpx;
		}
	}

	.popup-tabs {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		padding-top: 32rpx;

		.tabs {
			width: 88%;
		}
	}

	.tabs-options {
		display: flex;
		padding: 64rpx 32rpx 0;
		flex-wrap: wrap;

		.item {
			width: 25%;
			margin-bottom: 40rpx;
		}
	}
	
	/deep/.u-tab-item {
		width: 25% !important;
		flex: none !important;
	}

	// 用电量合计
	.total {
		padding: 24rpx 32rpx;
		background: linear-gradient(90deg, rgba(49, 110, 207, 1) 2%, rgba(37, 138, 255, 1) 100%);
		display: flex;

		.company {
			.name {
				color: rgba(255, 255, 255, 1);
				font-size: 36rpx;
				font-weight: bold;
			}

			.amount {
				color: #f2f4f6;
				margin-top: 4rpx;
			}
		}

		.infos {
			display: flex;
			margin-left: auto;

			.infos-item {
				margin-left: 32rpx;
				text-align: center;

				.number {
					color: rgba(255, 255, 255, 1);
					font-size: 32rpx;
					font-weight: bold;
				}

				.time {
					color: #f2f4f6;
					margin-top: 4rpx;
				}
			}
		}
	}



	// 用电量
	.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 {
				width: 40%;
				margin-left: 16rpx;

				// .equipment-text-overflow {
				// 	display: -webkit-box;
				// 	-webkit-box-orient: vertical;
				// 	-webkit-line-clamp: 1;
				// 	overflow: hidden;
				// }

				.equipment1 {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-weight: bold;
				}

				.equipment2 {
					display: flex;
					color: rgba(119, 119, 119, 1);
					.companyName{
						width: 60%;
					// 	white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;
					}
					.state{
						
						display: flex;
						align-items: center;
						color: rgba(255,123,0,1);
						text{
							margin-right: 8rpx;
							display: inline-block;
							width: 16rpx;
							height: 16rpx;
							border-radius: 999px;
						}
						.off-line{
							
							background-color: rgba(255,123,0,1);
							
						}
						.on-line{
							background-color: rgba(0,185,98,1);
						}
					}
					.state2{
						color: rgba(0,185,98,1);
					}
				}
			}

			.electricity {
				display: flex;
				justify-content: space-between;
				flex: 1;
				margin-left: 48rpx;
				text-align: center;

				.electricity-item {
					width: 30%;

					.number {
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
						font-weight: bold;
						height: 40rpx;
						line-height: 40rpx;
					}

					.date {
						color: rgba(119, 119, 119, 1);
						margin-top: 4rpx;
					}
				}
			}
		}
	}
</style>