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

<template>
	<view>
		
		<u-navbar 
		@titleCk="titleCk" :title-icon="electricityMeterList.length>1?'arrow-down':''"
		 :title="title" >
			
		
			
		<!-- 	<view class="u-nav-slot" slot="right" @click="tabsFrom.show2=true,params.day=true">
				<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
			</view> -->
		</u-navbar>
		<u-picker  v-model="tabsFrom.show1"
		 :defaultSelector="[tabsFrom.show1Index]"
		 mode="selector" :range="tabsFrom.selector1"  range-key="label" @confirm="selector1confirm" ></u-picker>
		
		<template  v-if="meterDetails.meter&&meterDetails.meter.type!=6" >
			<view class="control-group" v-if="meterDetails.meter" >
			      
				   
				   <view class="control">
				   	<view class="text">
				   		电源状态
				   	</view>
				   	<view class="icon"  style="    display: flex;" >
						<span>关</span>
						<u-switch size="32" @change="switchBtnApi(meterDetails.meter,$event)"  
						 v-model="meterDetails.meter.switchStatus"   inactive-color="#ff9900" ></u-switch >
						<span>开</span>
						<!-- 
						<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+'&title='+title)">
			       <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>
		</template>
		<template v-else>
			
			<view class="log" >
			      <!-- <view class="icon">
			      
			       </view> -->
				   <view class="text">
				   	虚拟表不可操作
				   </view>
				   <view class="more">
				   <!-- 	<u-icon name="arrow-right" size="32" color="#bbbbbb" ></u-icon> -->
				   </view>
			
			</view>
		</template>
		
	</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:{},
				electricity:{},
				electricityMeterList:[],
				role:false,
				title:"",
				intervalId:"",
				getMeterReady:false,
				FormData:{
					
				},
				tabsFrom: {
					show1: false,
					show1Index:0,
					show2Index:'',
					show2: false,
					show1Text: "全部类型",
					show2Text: "全部时间",
					selector1:[
						{
								label: '全部类型',
								value: '',
							},
						{
								label: '线上充值',
								value: '1',
							},
							{
								label: '线下充值',
								value: '2',
							},
					]
				},
			}
		},
		onLoad(op) {
			if(op.id){
				this.meterId=op.id;
				//this.getMeter()
				
			}
			this.getElectricityMeterList();
		
		},
		onShow() {
			if(this.meterId&&this.getMeterReady){
				this.startInterval()
			}
			
		},
		onHide() {
			this.clearTimer()
		},
		methods: {
			selector1confirm(e){
				
				var index=e[0]
				this.tabsFrom.show1Index=index
				this.tabsFrom.show1Text=this.tabsFrom.selector1[index].label
				this.title=this.tabsFrom.selector1[index].label
				
				this.FormData.meterId=this.tabsFrom.selector1[index].value
				this.meterId=this.FormData.meterId
			
				//this.value="4"
				this.electricity=this.electricityMeterList[index]
					
				this.getMeter()
				
				
			},
			titleCk(){
				if(this.electricityMeterList.length>1){
					this.tabsFrom.show1=true
				}
			},
			getElectricityMeterList(bl){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
							
				
							
				API.electricityMeterList().then((response) => {
					uni.hideLoading();
					this.electricityMeterList=response.data.meterList
					
					if(this.electricityMeterList.length){
						// this.electricityMeterList=[
						// 	...this.electricityMeterList,
						// 	...this.electricityMeterList
						// ]
						var index=0;
						
						for(var i in this.electricityMeterList){
							var obj=this.electricityMeterList[i]
							if(obj.id==this.meterId){
								index=i
								this.tabsFrom.show1Index=i;
							}
						}
						this.electricity=this.electricityMeterList[index];
							
						this.FormData.meterId=this.electricityMeterList[index].id
						this.meterId=this.FormData.meterId
					
						this.title=this.electricityMeterList[index].name
						// {
						// 		label: '全部类型',
						// 		value: '',
						// 	}
						this.tabsFrom.selector1=[]
						this.tabsFrom.selector1=this.electricityMeterList.map(item=>{
							return {
								label:item.name,
								value:item.id
							}
						})
						//this.tabsFrom.selector1.push({})
						
						this.getMeter()
					}else{
						uni.showModal({
							title:"提示",
							content:"未绑定电表,请联系管理员！",
							showCancel:false,
							success() {
								uni.navigateBack()
							}
						})
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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);
						}else{
							node.switchStatus=!key
						}
					}
				})
				console.log(node,key)
			},
			getMeter(bl){
				if(!bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				
				API_meterTimer.meterDetails({
					meterId:this.FormData.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>