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="getCompanyInfoList()"></image>
			</view>

		</view>
		<!-- 标签 -->
		<view class="tabs-box" v-if="companyList.length >= 2">
			<view class="tabs" :style="{width: companyList.length>4 ? '' : '100%'}">
				<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" v-if="companyList.length >= 4">
				<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="main" v-for="(item, index) in companyKwhList" :key="index" v-if="current==0"
			@click="companyChange(item,index)">
			<view class="item">
				<view class="item-content">
					<view class="equipment">
						<view class="equipment1 ">
							{{item.name}}
						</view>
						<view class="equipment2">
							共 {{item.listNum}} 台设备
						</view>
					</view>
					<view class="electricity">
						<view class="electricity-item electricity-item-day">
							<view class="date">
								今日
							</view>
							<view class="number">
								{{item.thisDayKwh}}
							</view>
						</view>
						<view class="electricity-item">
							<view class="date">
								本月
							</view>
							<view class="number">
								{{item.thisMonthKwh}}
							</view>
						</view>
						<view class="electricity-item">
							<view class="date">
								上月
							</view>
							<view class="number">
								{{item.lastMonthKwh}}
							</view>
						</view>
					</view>
				</view>
				<view class="more">
					<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
				</view>
			</view>
		</view>

		<view class="main" v-for="(item, index) in kWhList" :key="item.id" v-if="current!=0"
			@click="toElectronicMonitoring(item)">
			<view class="item">
				<view class="item-content">
					<view class="equipment">
						<view class="equipment1 ">
							{{item.name}}
						</view>
						<view class="equipment2">
							{{item.installationAddressSimple}}
						</view>

						<view class="state" v-if="!item.online">
							<view class="dot off-line"></view>
							<view class="text">离线</view>
						</view>
						<view class="state state2" v-else>
							<view class="dot on-line"></view>
							<view class="text">在线</view>
						</view>
					</view>
					<view class="electricity">
						<view class="electricity-item electricity-item-day">
							<view class="date">
								今日
							</view>
							<view class="number">
								{{item.thisDayKwh}}
							</view>
						</view>
						<view class="electricity-item">
							<view class="date">
								本月
							</view>
							<view class="number">
								{{item.thisMonthKwh}}
							</view>
						</view>
						<view class="electricity-item">
							<view class="date">
								上月
							</view>
							<view class="number">
								{{item.lastMonthKwh}}
							</view>
						</view>
					</view>
				</view>
				<view class="more">
					<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
				</view>
			</view>
		</view>

	</view>
</template>

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

	export default {
		data() {
			return {
				companyList: [], // 商户
				merchantList1: [],
				merchantList2: [],
				kWhList: [], //设备
				companyId: '',
				popShow: false,
				current: 0,
				allKWhList: [],
				companyKwhList: [],
				pageIndex: 1,
				recordsTotal: 0,
			}
		},
		onLoad() {
			this.getCompanyInfoList();
		},
		onReachBottom() {
			if (this.kWhList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			companyChange(item, index) {
				this.current = index + 1;
				this.companyId = item.id;

				this.getList(true);
			},
			getCompanyKwhList(list) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.companyKwhList({
					companyId: list.id
				}).then((response) => {
					uni.hideLoading();
					var wkh = response.data;
					var num = 0;
					if (list.remoteReadingMeterList.length != 0) {
						num = list.remoteReadingMeterList.length;
					}
					var wkhList = {
						id: list.id,
						name: list.name,
						listNum: num,
						thisDayKwh: wkh.thisDayTotalKwh,
						thisMonthKwh: wkh.thisMonthTotalKwh,
						lastMonthKwh: wkh.lastMonthTotalKwh,
					};
					this.companyKwhList.push(wkhList);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getCompanyInfoList() {

				API.deviceCompanyList().then((response) => {
					var list = response.data.companyInfoList;
					this.companyList = list;

					var mList1 = [];
					var mList2 = [];
					mList1.push({
						id: '',
						name: '全部'
					});

					for (var i = 0; i < list.length; i++) {
						if (i >= 3) {
							mList2.push(list[i]);
						} else {
							mList1.push(list[i]);
						}

						this.getCompanyKwhList(list[i]);
					}

					this.merchantList1 = mList1;
					this.merchantList2 = mList2;

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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"
					})
				})
			},
			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(true);
			},
			change(index) {
				this.current = index;
				this.companyId = this.merchantList1[index].id;

				if (index != 0) {
					this.getList(true);
				}
			},
			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>
	page {
		padding-bottom: 100rpx;
	}

	.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;
		border-bottom: 1px solid rgba(232, 232, 232, 1);

		.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%);


		.company {
			display: flex;
			align-items: center;
			justify-content: space-between;

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

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

		.infos {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 4rpx;
			width: 93%;

			.infos-item {

				display: flex;
				width: 33.3%;


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

				.time {
					color: #f2f4f6;

				}
			}
		}

	}



	// 用电量
	.main {
		background-color: #fff;
		padding: 26rpx 32rpx;

		.item:last-of-type {
			border: none;
		}

		.item {
			padding: 16rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid rgba(245, 245, 245, 1);

			.item-content {
				width: 93%;
			}

			.equipment {

				display: flex;
				align-items: center;


				.equipment1 {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					max-width: 40%;
					font-weight: bold;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.equipment2 {
					color: rgba(119, 119, 119, 1);
					margin-left: 16rpx;
					max-width: 40%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;






				}
			}

			// 状态
			.state {


				display: flex;
				align-items: center;
				color: rgba(255, 123, 0, 1);
				margin-left: auto;

				.dot {
					margin-right: 8rpx;

					width: 16rpx;
					height: 16rpx;
					background-color: rgba(255, 123, 0, 1);
					border-radius: 999px;
					margin-left: auto;

				}

				.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;
				align-items: center;

				margin-top: 8rpx;
				text-align: center;

				.electricity-item {
					display: flex;
					align-items: center;
					width: 33.3%;

					.number {
						color: rgba(51, 51, 51, 1);

						font-weight: bold;
						font-size: 32rpx;
						margin-left: 8rpx;
					}

					.date {
						color: rgba(119, 119, 119, 1);


					}
				}

			}
		}

	}
</style>