jp-housekeep-hall/pages/mine/electronicMonitoring.vue

<template>
	<view>

		
		<u-tabs :list="listTab" style="margin-top: 88rpx;" :is-scroll="false"
		:current="current" bg-color="#1677ff"  v-if="type==''&&(electricityMeterList.length&&waterMeterList.length)"
		active-color="#fff"  inactive-color	="#fff"
		 @change="change"></u-tabs>
		 <view v-show="type==''||((meterId!=''&&type=='1')||(type=='2'&&waterId!=''))">
			 
			<electricityComponents  
			  :showtab="waterMeterList.length"
			 v-show="switchTab" ref="refElectricityComponents">
			 
			 </electricityComponents>
			<waterComponents v-show="!switchTab"  
				  :showtab="electricityMeterList.length"
			ref="refWaterComponents" >
			
			</waterComponents>
		 </view>
		 <view v-show="callbackBl&&((meterId==''&&type=='1')||(type=='2'&&waterId==''))">
			<u-navbar title="未绑定"  title-color="#101010" ></u-navbar>
			
			 <u-divider :isnone="true"   nonetext="设备未绑定"
			 	border-color="#CFD2D5">已经到底了</u-divider>
		 </view>
	</view>
</template>

<script>
	import {
		parseUnixTime,
		beforeTimeStamp,
		getWeek,newDate
	} from '@/apis/utils'
	import * as API from '@/apis/pagejs/tenantElectricityMeter.js'
	import * as echarts from "echarts";
	import * as API_water from '@/apis/pagejs/water.js'
	
	import electricityComponents from './electronicMonitoring/electricity.vue'
	import waterComponents from './electronicMonitoring/water.vue'
	
	export default {
		components:{
			electricityComponents,waterComponents
		},
		data() {
			return {
				switchTab:true,
				 
				title:"查询中",
				 
				electricityMeterList:[],
				waterMeterList:[],
				
				background: {
					backgroundColor: '#1677FF',
				},
				listTab:[
					{
						name: '电表'
					}, {
						name: '水表'
					}
				],
				current:0,
				
				meterId:"",
				waterId:"",
				type:"",
				callbackBl:false,
			
			};
		},
		onLoad(op) {
			if(op.id){
				this.meterId=op.id;	
			}
			if(op.waterId){			
				this.waterId=op.waterId;				
			}
			if(op.type){
				this.type=op.type;	
				//只查看其中1个， 没有就显示 无
				if(op.type==1){
					this.getElectricityMeterList(1);
				}else{
					this.getWaterMeterList()
				}
			}else{
				this.getElectricityMeterList();
			}
			
			
		},
		 
		methods: {
			change(e){
				this.current=e
				this.clicktab(!e)
			},
			clicktab(bl){
				
				this.switchTab=bl
				if(!bl){
					this.$refs.refWaterComponents.initSet(this.waterId,this.waterMeterList)
					this.$refs.refWaterComponents.init()
				}
				if(bl){
					this.$refs.refElectricityComponents.initSet(this.meterId,this.electricityMeterList)
					this.$refs.refElectricityComponents.init()
				}
			},
			callback(){
				this.callbackBl=true
				if(this.electricityMeterList.length==0&&this.waterMeterList.length==0&&this.type==""){
					uni.showModal({
						title:"提示",
						content:"未绑定设备,请联系管理员！",
						showCancel:false,
						success() {
							uni.navigateBack()
						}
					})
				}
				if(this.electricityMeterList.length==0&&this.waterMeterList.length){
					this.switchTab=false
					this.$refs.refWaterComponents.initSet(this.waterId,this.waterMeterList)
					this.$refs.refWaterComponents.init()
				}
				if(this.electricityMeterList.length){
					this.$refs.refElectricityComponents.initSet(this.meterId,this.electricityMeterList)
					this.$refs.refElectricityComponents.init()
				}
				
				
				
			},
		
			getWaterMeterList(){
				API_water.waterMeterList().then((response) => {
					uni.hideLoading();
					this.waterMeterList=response.data.meterList
					
					if(this.type!=""&&this.waterMeterList&&this.waterMeterList.length){
						this.waterId=this.waterMeterList[0].id
					}
					this.callback()
				}).catch(error => {
					uni.showToast({
							title: error,
							icon: "none"
					})
				})
			},
			getElectricityMeterList(bl ){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
							
				
							
				API.electricityMeterList().then((response) => {
					uni.hideLoading();
					this.electricityMeterList=response.data.meterList
					
					if(this.type!=""&&this.electricityMeterList&&this.electricityMeterList.length){
						this.meterId=this.electricityMeterList[0].id
						this.callback()
					}
					
					if(!bl){
						this.getWaterMeterList()
					}
					
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			
			
			 
			 
			
		}
	};
</script>


<style lang="scss" scoped>
	page {
		padding-bottom: 100rpx;
	}

	.background {
		background-color: rgba(22, 119, 255, 1);
		padding-bottom: 100rpx;



		::v-deep.u-border-bottom:after {
			border: none;
		}

		.u-nav-slot {
			margin-right: 32rpx;

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


	}


	.background::after {
		content: '';
		position: absolute;
		width: 160%;
		height: 80px;
		background-color: rgba(22, 119, 255, 1);
		left: -30%;
		border-radius: 0 0 50% 50%;

	}

	// // 日期
	.date-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 24rpx 32rpx;


		.item {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.15);
			width: 120rpx;
			height: 120rpx;
			color: #fff;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			    align-items: center;
			.date {
				font-size: 40rpx;


			}
			.dot{
				width: 10rpx;
				height: 10rpx;
				background-color: rgba(255,150,0,1);
				border-radius: 999px;
				
				bottom: -5rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.item-today {
			background-color: rgba(255, 255, 255, 1);
            position: relative;
			.date {
				color: rgba(22, 119, 255, 1);
			}

			.week {
				color: rgba(16, 16, 16, 1);
			}
			
		}
		
	}
	

	// 用电量
	.electricity-consumption {
		background-color: #fff;
		padding: 40rpx 32rpx 0rpx;
		border-radius: 8px;
		margin: -48rpx 32rpx 0;
		position: relative;
		border: 1px solid rgba(255,255,255,1);
		background: linear-gradient(180deg, rgba(187,216,255,1) 0%,rgba(255,255,255,1) 63%);
		
		// 统计
		.statistics-content{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			
			.statistics-item{
				width: 300rpx;
				padding: 24rpx 0 24rpx 24rpx;
				border-radius: 8px;
				box-shadow: 0px 0px 8px 0px rgba(22,119,255,0.3);
				background-color: #fff;
			}
			.item-title{
				color: rgba(22,119,255,1);
				font-size: 32rpx;
				display: flex;
				align-items: center;
				font-weight: bold;
				.img{
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					margin-right: 4rpx;
				}
			}
			.item-title2{
				color: rgba(129,97,255,1);
			}
			.item-value{
				color: rgba(16,16,16,1);
				font-size: 48rpx;
				font-weight: bold;
				margin-top: 8rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				
				text{
					display: inline-block;
					width: 80%;
					margin-right: 4rpx;
				}
			}
		}
		
        .title{
			display: flex;
			 justify-content: space-between;
			.titleUnit{
				color: rgba(16,16,16,1);
				font-size: 36rpx;
			}
			.titleElectricity{
				color:#333333 100%;
				font-size: 28rpx;
				.spanradius{
					width: 20rpx;
					height: 20rpx;
					background-color: #FF7B00  ;
					color: #FF7B00  ;
					margin-right: 4rpx;
					 border-radius: 50%; /* 将正方形变成圆形 */
					  display: inline-block; 
				}
				.normal{
					background-color: #00B962 ;
					color: #00B962 ;
				}
				
			}
		}
		.degree{
			display: flex;
			margin-top: 32rpx;
			.item{
				margin-right: 6rpx;
				text-align: center;
				.item-text{
					color: rgba(16,16,16,1);
				}
				.item-number{
					margin-top: 24rpx;
					width: 72rpx;
					height: 96rpx;
					background-color: rgba(16,16,16,1);
					color: #fff;
					font-size: 72rpx;
					
				}
				.decimal{
					background-color: #900005;
				}
			}
		}
		

		// .tab {
		// 	width: 240rpx;
		// 	height: 0;
		// 	border-width: 0px 48rpx 72rpx 0px;
		// 	border-radius: 8px 8px 0 0;
		// 	border-style: none solid solid none;
		// 	border-color: transparent transparent #fff;
		// 	position: absolute;
		// 	top: -72rpx;
		// 	left: 0rpx;
		// 	right: 0rpx;
		// 	color: #101010;
		// 	color: rgba(16, 16, 16, 1);
		// 	text-align: center;
		// 	line-height: 72rpx;
		// 	z-index: 999;
		// 	text-indent: 16rpx;
		// }

		// .tab2 {
		// 	width: 240rpx;
		// 	height: 0;
		// 	border-width: 0px 48rpx 72rpx 0px;
		// 	border-radius: 8px 8px 0 0;
		// 	border-style: none solid solid none;
		// 	border-color: transparent transparent #D4DBE4;
		// 	position: absolute;
		// 	top: -72rpx;
		// 	left: 210rpx;
		// 	right: 0rpx;
		// 	color: #777777;
		// 	text-align: center;
		// 	line-height: 72rpx;
		// 	text-indent: 16rpx;
		// }

		.radio {
			margin-top: 24rpx;
		    padding-left: 8rpx;
			::v-deep.u-radio {
				margin-bottom: 8px;
				min-width: 25% !important;
				
				
				
				
			}
			::v-deep.u-radio__label{
				margin-left: 24rpx;
				font-size: 28rpx;			;
			}
		
		}
	}

	//各时段用电量
	.electricity-chart {
		margin: 24rpx 32rpx;
		padding: 40rpx 0rpx;
		background-color: #fff;
		border-radius: 8px;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			margin-bottom: 40rpx;

			.icon {
				width: 36rpx;
				height: 36rpx;
				background-color: rgba(22, 119, 255, 1);
				border: 6px solid rgba(182, 212, 255, 1);
				border-radius: 100px;
			}

			.text {
				display: flex;
				align-items: center;
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
				margin-left: 16rpx;
			}
			.queryDayClass{
				border: 1px solid #999;
				border-radius: 3px;
				padding: 4rpx 8rpx;
			}
		}

		.chart {
			width: 100%;
			//height: 440rpx;

			.img {
				width: 100%;
				height: 440rpx;
			}
		}
	}
	// 设备信息弹窗
	.equipment-popup {
	
		.content {
	
			padding: 32rpx;
	
			.headline {
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				text-align: center;
				font-weight: bold;
				margin-bottom: 24rpx;
			}
	
			.infos {
				padding-bottom: 100rpx;
	
				.item:last-of-type {
					border: none;
				}
	
				.item {
					display: flex;
					align-items: center;
	
					line-height: 48rpx;
					padding: 24rpx 0;
					border-bottom: 1px solid #cccccc;
	
					.item-title {
						color: rgba(51, 51, 51, 1);
						width: 200rpx;
					}
	
					.item-value {
						color: #666666;
						flex: 1;
						margin-left: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.img{
							width: 32rpx;
							height: 32rpx;
							transform: rotate(90deg);
							margin-left: 96rpx;
						}
					}
				}
	
			}
	
			.get {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 4px;
				background-color: rgba(22, 119, 255, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 32rpx;
			}
		}
	}
	// 异常
	.abnormal {
		margin: 24rpx 32rpx;
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 8px;

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

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

			.icon {
				width: 36rpx;
				height: 36rpx;
				background-color: rgba(22, 119, 255, 1);
				border: 6px solid rgba(182, 212, 255, 1);
				border-radius: 100px;
			}

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

		.more {
			color: #838383;
			font-size: 24rpx
		}

		.details {
			margin-top: 40rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 32rpx;

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

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

	}

	// 能源监测
	.energy-inspection,.data-analysis {
		margin: 24rpx 32rpx;
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 8px;

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

			

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

		.grid {
			.icon {
				width: 128rpx;
				height: 128rpx;
				border-radius: 12px;
				background-color: rgba(35, 186, 178, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16rpx;

				.img {
					width: 80rpx;
					height: 80rpx;
				}
			}
			.icon2{
				background-color: rgba(42,186,72,1);
			}
			.icon3{
				background-color: rgba(78,96,246,1);
			}
			.icon4{
				background-color: rgba(22,119,255,1);
			}
			.icon5{
				background-color: rgba(35,186,178,1);
			}
			.icon6{
				background-color: rgba(42,186,72,1);
			}
			.icon7{
				background-color: rgba(22,119,255,1);
			}
			.icon8{
				background-color: rgba(35,186,178,1);
			}

			.grid-text {
				color: #333333;
			}
		}
	}
	.icon-title{
		width: 36rpx;
		height: 36rpx;
		background-color: rgba(182, 212, 255, 1);
		border: 6px solid rgba(22, 119, 255, 1);
		border-radius: 100px;
	}
	.equipment-information {
		margin: 24rpx 32rpx;
		padding: 40rpx 0rpx;
		background-color: #fff;
		border-radius: 8px;
	
		.title {
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			margin-bottom: 40rpx;
	
			
	
			.text {
				display: flex;
				align-items: center;
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
				margin-left: 16rpx;
				font-weight: bold;
			}
	
			.date {
				margin-left: auto;
			}
	
			.more {
				color: #838383;
				font-size: 24rpx;
				margin-left: auto;
	
			}
		}
	
		.chart {
			width: 100%;
			height: 440rpx;
	
			.img {
				width: 100%;
				height: 440rpx;
			}
		}
	
		.infos {
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;
	
			.border {
				margin: auto 0;
				height: 70rpx;
				width: 2rpx;
				background-color: rgba(204, 204, 204, 1);
				;
			}
	
			.item-title {
				color: rgba(119, 119, 119, 1);
			}
	
			.item-value {
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				margin-top: 16rpx;
			}
	
		}
	}
	
	// 远程控制电源开关
	.control{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 24rpx 32rpx;
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 8px;
		.text{
			color: rgba(51,51,51,1);
			font-size: 36rpx;
			font-weight: bold;
		}
		.icon{
			img{
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>