jp-housekeep-electric/pages/statistics/statistics.vue

<template>
	<view>
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="title">
				能源中心 (电力110)
			</view>
			<view class="icon" @click="toDataMonitoringList">
				<image class="img" src="@/assets/img/riLine-equalizer-line.svg" mode=""></image>
			</view>
		</view>
		<!-- 标签 -->
		<view class="tabs-box">
			<view class="tabs" v-if="companyList.length != 0">
				<u-tabs :list="merchantList1" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF" bg-color="#1677FF"
					:current="current" @change="change"></u-tabs>
			</view>
			<view class="more" @click="popShow=true" v-if="companyList.length != 0">
				<u-icon name="arrow-down" color="#fff" size="40"></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">
			<!-- 统计1 -->
			<view class="statistics-1">
				<view class="item" @click="toDataMonitoringList">
					<view class="item-top">
						<view class="img-box">
							<u-circle-progress active-color="#2979ff" :percent="8/15*100" width="88">
							</u-circle-progress>
						</view>
						<view class="number">
							<view class="normal">
								正常：8台
							</view>
							<view class="abnormal">
								异常：7台
							</view>
						</view>
					</view>
					<!-- 累计 -->
					<view class="total">
						本月累计报警 <text class="total-number">12</text> 次
					</view>
				</view>

				<view class="item" @click="toWorkOrderManagement()">
					<view class="item-top">
						<view class="img-box">
							<u-circle-progress active-color="#2979ff" :percent="12/20*100" width="88">
							</u-circle-progress>
						</view>
						<view class="number">
							<view class="normal">
								未处理：8
							</view>
							<view class="abnormal">
								已处理：12
							</view>
						</view>
					</view>
					<!-- 累计 -->
					<view class="total">
						本月累计工单 <text class="total-number">20</text> 条
					</view>
				</view>

			</view>
			<!-- 用电量 -->
			<view class="statistics-e statistics" v-if="codes.indexOf('reading') != -1">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						用电量 (度)
					</view>
					<view class="change" @click="getPowerConsumption(1)">
						<image class="change-img" :class="pRotation ? 'rotation-img' : ''" src="@/assets/img/refresh-line.svg"
							mode=""></image>
						<text>换一批</text>
					</view>
					<view class="check-all" @click="toEquipmentElectricity">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>
				<view class="electricity">
					<view class="item" v-for="(item, index) in kWhList" :key="index"
						@click="toElectronicMonitoring(item)">

						<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>
			<!-- 统计2 异常告警记录 -->
			<view class="statistics-2 statistics">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						异常告警记录
					</view>
					<view class="check-all">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>
				<!-- 异常  -->
				<view class="abnormal-item" v-for="item in 3">
					<view class="item-title">
						<!-- <image class="img" src="@/assets/img/riFill-error-warning-fill 1.svg"></image> -->
						<view class="name">
							温度异常
						</view>
						<view class="date">
							2024-02-14 09:00:01
						</view>
					</view>
					<view class="item-value">
						<view class="value1">
							荆鹏软件园01
						</view>
						<view class="value2">
							荆鹏集团
						</view>
					</view>
				</view>


			</view>
			<!-- 统计3 设备数据监测-->
			<view class="statistics-3 statistics" v-if="codes.indexOf('detector') != -1">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						设备数据监测
					</view>
					<view class="change" @click="getEquipmentDataMonitoring(1)">
						<image class="change-img" :class="eRotation ? 'rotation-img' : ''" src="@/assets/img/refresh-line.svg"
							mode=""></image>
						<text>换一批</text>
					</view>
					<view class="check-all" @click="toDataMonitoringList">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				</view>
				<view class="monitoring-item" v-for="(item, index) in deviceList" :key="index"
					@click="toElectronicMonitoring(item)">
					<view class="item-title">
						<view class="text1">
							{{item.name}}
						</view>
						<view class="text2">
							{{item.companyName}}
						</view>
						<view class="state">
							<view class="state1">
								<view class="icon">
									<image class="img" src="@/assets/img/antFill-alert.svg" mode=""></image>
								</view>
								{{item.temperatureStatus=='1' ? '正常' : '异常'}}
							</view>
							<view class="state2">
								<view class="icon">
									<image class="img" src="@/assets/img/smoke.svg" mode=""></image>
								</view>
								{{item.smokeStatus=='1' ? '正常' : '异常'}}
							</view>
						</view>
					</view>
					<!-- 监控信息 -->
					<view class="infos">
						<view class="infos-item">
							<view class="icon">
								<img src="../../assets/img/iconPark-electric-wave 1.svg" alt="" />
							</view>
							<view class="text">
								{{item.remoteMonitorRecord.dcaTotal.toFixed(2)}}A
							</view>
						</view>
						<view class="infos-item">
							<view class="icon">
								<img src="../../assets/img/voltage.svg" alt="" />
							</view>
							<view class="text">
								{{item.remoteMonitorRecord.dcvTop.toFixed(2)}}V
							</view>
						</view>
						<view class="infos-item">
							<view class="icon">
								<img src="../../assets/img/iconPark-thermometer.svg" alt="" />
							</view>
							<view class="text">
								{{item.remoteMonitorRecord.temperatureTop}}℃
							</view>
						</view>
						<view class="infos-item">
							<view class="icon">
								<img src="../../assets/img/power.svg" alt="" />
							</view>
							<view class="text">
								{{(item.remoteMonitorRecord.totalPower).toFixed(2)}}kW
							</view>
						</view>
						<view class="infos-item">
							<view class="icon">
								<img src="../../assets/img/powerFactor.svg" alt="" />
							</view>
							<view class="text">
								{{item.remoteMonitorRecord.averPowerFactor}} / 
								{{item.remoteMonitorRecord.averPowerFactorHistory}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<energyCenterTabbar :current="0"></energyCenterTabbar>
	</view>
</template>

<script>
	import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
	import * as echarts from 'echarts';
	import * as API from '@/apis/pagejs/energy/index.js'

	export default {
		components: {
			energyCenterTabbar
		},
		data() {
			return {
				companyId: '',
				pageIndexe: 1, // 设备数据检测
				totalPagee: 1,
				deviceList: [],
				pageIndexp: 1, // 用电量
				totalPagep: 1,
				kWhList: [],
				codes: '', // 判断：reading用电量 detector设备数据检测
				merchantList1: [], // 商户
				merchantList2: [],
				companyList: [],
				pRotation: false,
				eRotation: false,
				popShow: false,
				current: 0
			}
		},
		onReady() {
			this.getfindByOpenId();
			this.getPowerConsumption(0);
			this.getEquipmentDataMonitoring(0);
			this.getCompanyInfoList()
		},
		methods: {
			merchantChange(item,index) {
				var m = item;
				var n = this.merchantList1[this.current];
				this.merchantList1[this.current] = m;
				this.merchantList2[index] = n;
			},
			// 单位
			getCompanyInfoList() {
				this.merchantList1 = [];
				this.merchantList2 = [];
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deviceCompanyList().then((response) => {
					uni.hideLoading();
					this.companyList = response.data.companyInfoList;
					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"
					})
				})
			},
			// 商户ID
			getfindByOpenId() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.codes = response.data.regUser.codes;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 设备数据监测
			getEquipmentDataMonitoring(pl) {
				this.eRotation = true;
				this.pageIndexe = this.pageIndexe + pl;
				if (this.pageIndexe > this.totalPagee) {
					this.pageIndexe = 1;
				}

				API.homePageDeviceData({
					pageIndex: this.pageIndexe,
					pageSize: 3,
					companyId: this.companyId
				}).then((response) => {
					uni.hideLoading();
					this.eRotation = false;
					this.deviceList = response.data.data;
					this.totalPagee = response.data.totalPage;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 异常告警记录
			getAbnormalAlarmRecord() {

			},
			// 用电量
			getPowerConsumption(pl) {
				this.pRotation = true;
				this.pageIndexp = this.pageIndexp + pl;
				if (this.pageIndexp > this.totalPagep) {
					this.pageIndexp = 1;
				}

				API.homePageKwh({
					pageIndex: this.pageIndexp,
					pageSize: 3,
					companyId: this.companyId
				}).then((response) => {
					uni.hideLoading();
					this.pRotation = false;
					this.kWhList = response.data.data;
					this.totalPagep = response.data.totalPage;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 累计工单
			getAccumulatedWorkOrders() {

			},
			// 累计报警
			getAccumulatedAlarms() {

			},
			change(index) {
				this.current = index;
				this.companyId = this.merchantList1[index].id;
				this.getPowerConsumption(0);
				this.getEquipmentDataMonitoring(0);
			},
			toDataMonitoringList() {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/dataMonitoring-list'
				})
			},
			toWorkOrderManagement() {
				uni.navigateTo({
					url: '/pages/workOrderManagement/workOrderManagement'
				})
			},
			toEquipmentElectricity() {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/equipmentElectricity'
				})
			},
			toElectronicMonitoring(item) {
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/electronicMonitoring'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rotation-img {
		animation: rotation 2s linear infinite;
	}

	@keyframes rotation {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	page {
		padding-bottom: 200rpx;
	}

	/deep/.u-drawer-content {
		margin-top: 88rpx;
	}

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

		.tabs {
			width: 80%;
		}
	}

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

		.item {
			width: 25%;
			margin-bottom: 40rpx;
		}
	}

	// 导航栏
	.navbar {
		background-color: rgba(22, 119, 255, 1);
		color: #fff;
		line-height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999999;

		.img {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}
	}


	// 标签
	.tabs-box {
		padding: 32rpx 0;
		margin-top: 88rpx;
		padding-right: 32rpx;
		background-color: rgba(22, 119, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tabs {
			width: 80%;
		}

	}

	.main {
		border-radius: 16px 16px 0px 0px;
		background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
		margin-top: -24rpx;
		padding: 32rpx;

		.statistics {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
			margin-top: 24rpx;
			padding: 40rpx;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.img {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
				}

				.change {
					display: flex;
					align-items: center;

					.change-img {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}

					text {

						margin-left: 8rpx;
					}
				}


				.text {
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					margin-left: 16rpx;
					font-weight: bold;
				}

				.change {
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #838383;

				}

				.check-all {
					margin-left: auto;
					color: rgba(131, 131, 131, 1);
					font-size: 24rpx;
				}
			}
		}

		// 用电量
		.statistics-e {
			.electricity {
				background-color: #fff;

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

					.equipment {
						width: 30%;
						
						.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;
							}
						}
					}
				}
			}
		}

		// 统计1
		.statistics-1 {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				width: 330rpx;
				padding: 24rpx;
				box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
				border-radius: 8px;
				background-color: rgba(255, 255, 255, 1);

				.item-top {
					display: flex;
					align-items: center;

					.img {
						width: 88rpx;
						height: 88rpx;
						margin-right: 24rpx;
						vertical-align: middle;
					}

					.number {
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;

						.normal {
							margin-bottom: 12rpx;
						}
					}
				}

				.total {
					margin-top: 28rpx;
					text-align: center;
					color: rgba(119, 119, 119, 1);
				}

				.total-number {
					color: #EE3138;
					margin: 0 8rpx;
				}
			}
		}

		// 统计2异常报警记录
		.statistics-2 {

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

				.item-title {


					color: rgba(51, 51, 51, 1);

					.img {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}

					.name {
						color: rgba(51, 51, 51, 1);
					}

					.date {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;
					}
				}

				.item-value {
					text-align: right;

					.value1 {
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}

					.value2 {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;
					}
				}
			}
		}

		// 统计3设备实时监控
		.statistics-3 {
			.monitoring-item {
				padding: 16rpx 0;
				border-bottom: 1px solid rgba(245, 245, 245, 1);

				.item-title {
					display: flex;
					align-items: center;

					.text1 {
						color: rgba(51, 51, 51, 1);
					}

					.text2 {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;
						margin-left: 8rpx;

					}
				}

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

					.state1,
					.state2 {
						display: flex;
						align-items: center;
						margin-left: 24rpx;
					}

					.img {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
						margin-right: 8rpx;
					}
				}

				// 监控信息
				.infos {
					margin-top: 8rpx;

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

					.infos-item {
						display: flex;
						align-items: center;

					}

					.text {
						margin-left: 4rpx;
					}
				}
			}
		}

		// 设备状态
		.statistics-4 {
			.chat-img {
				width: 100%;
				height: 620rpx;
			}
		}

		// 故障类型
		.statistics-5,
		.statistics-6 {
			.chat-img {
				width: 100%;
				height: 410rpx;
			}
		}

		// 异常设备排名
		.statistics-ranking {
			.total {
				color: rgba(16, 16, 16, 1);

				text {
					color: #1677FF;
					padding: 0 8rpx;
				}
			}

			.ranking-main {
				margin-top: 48rpx;
				border-radius: 16px;
				background-color: #fff;

				.item {
					display: flex;
					align-items: center;
					margin-bottom: 32rpx;

					.ranking {
						color: rgba(16, 16, 16, 1);
						font-weight: bold;
					}

					.icon {
						width: 72rpx;
						height: 72rpx;
						border-radius: 4px;
						background-color: rgba(219, 234, 255, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 24rpx;

						.img {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.name {
						margin-left: 16rpx;

						.name1 {
							color: rgba(51, 51, 51, 1);
							font-weight: bold;
						}

						.name2 {
							color: rgba(119, 119, 119, 1);
							font-size: 24rpx;
							margin-top: 4rpx;
						}
					}

					.time {
						color: rgba(16, 16, 16, 1);
						margin-left: auto;
						font-weight: bold;
					}
				}


			}

			// 查看全部排名
			.check-all {
				text-align: center;
				color: rgba(119, 119, 119, 1);
				font-size: 12px;
			}
		}
	}
</style>