jp-housekeep-hall/pages/remoteControl/switchDetail.vue

<template>
	<view>
		<u-navbar :title="title" title-color="#101010"></u-navbar>
		
		<view class="control-group" >
               <view class="control">
               	<view class="text">
               		电源
               	</view>
               	
               </view>
			   
			   <view class="control">
			   	<view class="text">
			   		开关
			   	</view>
			   	<view class="icon">
					<img src="@/assets/img/switchIcon.png"
					 @tap.stop="switchBtnApi(meterDetails.meter,0)" class="img"
					 v-if="meterDetails.meter.switchStatus" alt="" ></img >
					<img src="@/assets/img/switchClose.png" 
					 @tap.stop="switchBtnApi(meterDetails.meter,1)" class="img"
					v-else alt="" ></img >
			   		<!-- <img src="@/assets/img/control.png" alt="" /> -->
			   	</view>
			   </view>
		</view>
		
		<!-- 用电信息 -->
		<view class="electricity-information">
			<view class="title">
		
				
				<view class="text">
					用电信息
		
				</view>
				<!-- <view class="more" @click="gotoUrl('/pages/tenantList/electricityInformation')">  
					<u-icon name="arrow-right" size="24" color="#d4d4d4"></u-icon>
				</view> -->
			</view>
		
			<view class="infos">
				<view class="item" style="width: 30%;">
					
					<view class="item-value">
						{{meterDetails.thisDayKwh}}
					</view>
					<view class="item-title">
						今日用电量(度)
					</view>
				</view>
				
				<view class="item" style="width: 30%;">
					
					<view class="item-value">
						{{meterDetails.thisMonthKwh}}
					</view>
					<view class="item-title">
						当月用电量(度)
					</view>
				</view>
				
				<view class="item" style="width: 30%;">
					
					<view class="item-value" v-if="meterDetails.nowRecord">
						{{meterDetails.nowRecord.totalPower}}
					</view>
					<view class="item-title">
						当前功率(千瓦)
					</view>
				</view>
			</view>
		</view>
		
		<!-- 日志 -->
		<view class="log"  @click="gotoUrl('/pages/timing/timing?id='+meterId)">
		       <view class="icon">
				  <u-icon name="clock" color="#fff" size="40" ></u-icon>
		       </view>
			   <view class="text">
			   	定时
			   </view>
			   <view class="more">
			   	<u-icon name="arrow-right" size="32" color="#bbbbbb" ></u-icon>
			   </view> 
		
		</view>
		
		<view class="log" @click="gotoUrl('/pages/remoteControl/operationLog?id='+meterId)">
		       <view class="icon">
		       	<img src="@/assets/img/riLine-file-list-2-line.svg" alt="" />
		       </view>
			   <view class="text">
			   	日志
			   </view>
			   <view class="more">
			   	<u-icon name="arrow-right" size="32" color="#bbbbbb" ></u-icon>
			   </view>

		</view>
		
	</view>
	
	
</template>

<script>
	import * as API from '@/apis/pagejs/tenantElectricityMeter.js'
	import * as API_meterTimer from '@/apis/pagejs/meterTimer.js'
	
	
	export default {
		data() {
			return {
				codes:"",
				meterId:"",
				meterDetails:{},
				role:false,
				title:"",
				intervalId:"",
				getMeterReady:false,
			}
		},
		onLoad(op) {
			if(op.id){
				this.meterId=op.id;
				this.getMeter()
			}
		},
		onShow() {
			if(this.meterId&&this.getMeterReady){
				this.startInterval()
			}
			
		},
		onHide() {
			this.clearTimer()
		},
		methods: {
			clearTimer() {
				if (this.intervalId) {
					clearInterval(this.intervalId); // 清除定时器  
					this.intervalId = null; // 重置定时器ID  
				}
			},
			startInterval() {
				this.clearTimer(); // 组件销毁前清除定时器 
				this.intervalId = setInterval(() => {
					
					this.getMeter(true)
				}, 60000);
			},
			switchBtnApiMethod(node,key){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.remoteSwitch({
					meterId:node.id,
					enabled:key
				}).then((res) => {
					uni.hideLoading();
					node.switchStatus=key
					
				}).catch(error => {
					
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			switchBtnApi(node,key){
				uni.showModal({
					confirmColor:`${key?'#3CC51F':'red'}`,
					confirmText:`${key?'开启':'关闭'}`,
					content: `确认是否要"${key?'开启':'关闭'}"${node.name}`,
					title: "提示",
					success:res=> {
						if(res.confirm){
							this.switchBtnApiMethod(node,key);
						}
					}
				})
				console.log(node,key)
			},
			getMeter(bl){
				if(!bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				
				API_meterTimer.meterDetails({
					meterId:this.meterId
				}).then((response) => {
					//this.codes =this.carhelp.getPersonInfo().codes;
					//this.role=this.codes&&this.codes.indexOf('switch')!=-1;
					this.meterDetails=response.data
					if(!bl){
						uni.hideLoading();
					}
					this.getMeterReady=true;
					if(this.meterDetails.meter){
						this.title=this.meterDetails.meter.name
					}
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.control-group{
		margin: 24rpx 32rpx;
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 8px;
		
		 .control:first-of-type{
			 margin-top: 0;
		 }
		.control{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 56rpx;
			.text{
				color: rgba(51,51,51,1);
				font-size: 32rpx;
				font-weight: bold;
			}
			.icon{
				img{
					width: 64rpx;
					height: 64rpx;
				}
			}
		}
		
		
	}
	
	.electricity-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;
	
			
	
			.item-title {
				color: rgba(119,119,119,1);
				font-size: 24rpx;
				margin-top: 8rpx;
			}
	
			.item-value {
				color: rgba(16, 16, 16, 1);
				font-size: 56rpx;
				margin-top: 16rpx;
			}
	
		}
	}
    
	
  .log{
	  margin: 24rpx 32rpx;
	  		padding: 40rpx 32rpx;
	  		background-color: #fff;
	  		border-radius: 8px;
			display: flex;
			align-items: center;
	  		.icon{
				width: 88rpx;
				height: 88rpx;
				border-radius: 999px;
				background-color: rgba(22,119,255,1);
				display: flex;
				align-items: center;
				justify-content: center;
				img{
					width: 48rpx;
					height: 48rpx;
				}
			}
			.text{
				color: rgba(51,51,51,1);
				font-size: 32rpx;
				margin-left: 24rpx;
				font-weight: bold;
			}
			.more{
				margin-left: auto;
			}
	  
  }	
</style>