jp-housekeep-manage/pages/timing/autoOff.vue

<template>
	<view>
		<u-navbar :title="title" title-color="#101010">

			<view slot="right" @click="submitApi">
				<img src="@/assets/img/riLine-check-line 1.svg" alt="" />
			</view>

		</u-navbar>

		<view class="time-group">
			<view class="time-item" @click="typeShow=true">
				<view class="time">
					<view class="time-slot">
						重复
					</view>
					<view class="type weeklistclass" v-if="typeShowIndex==2">
						<template v-for="(item,i) in weekdaysList">
							<template v-if="item==1">
								<span :key="i">
									{{weeklist[i]}}
								</span>
								<span class="weeklistclassSpan" :key="i+'a'" >
									,
								</span>
							</template>
							
						</template>
						
					</view>
					<view class="type" v-else >
						
						{{typeShowIndex==0?'执行一次':''}}
						{{typeShowIndex==1?'每天':''}}
					</view>
				</view>

				<view class="more">
					<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				</view>

			</view>

			<view class="time-item" v-show="switchStatus==2"
			 @click="pickerShow4=true">
				<view class="time">
					 <view class="time-slot" >
						供电时间段
						
					 </view>
					<view class="type">
											
							{{startTime?startTimeStr(startTime)+'-':'未设置'}}
							{{showjp2time(startTime,endTime)?'次日':''}}
							{{endTime?startTimeStr(endTime):''}}
					</view>
				 </view>
				 <view class="more">
				 	<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				 </view>
				 
			</view> 
			<view class="time-item" v-show="switchStatus==3"
			 @click="pickerShow3=true">
				
				<view class="time">
					 <view class="time-slot" >
						智能停电时间区间
						
					 </view>
					 <view class="type">
						
						{{startTime?startTimeStr(startTime)+'-':'未设置'}}
						{{showjp2time(startTime,endTime)?'次日':''}}
						{{endTime?startTimeStr(endTime):''}}
					 </view>
				 </view>
				 <view class="more">
				 	<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				 </view>
			</view> 
			<view class="time-item" v-show="switchStatus==1"
			 @click="pickerShow1=true">
				<view class="time">
					
					<view class="time-slot" >
						供电时间
						
					</view>
					
					
					<view class="type">
						{{startTime?startTimeStr(startTime):'未设置'}}
					</view>
				</view>

				<view class="more">
					<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				</view>

			</view>
			
			<view class="time-item" v-show="switchStatus==0"
			 @click="pickerShow2=true">
				<view class="time">
					
					<view class="time-slot"  v-show="switchStatus==0">
						停电时间
					</view>
					
					<view class="type">
						
						
						{{endTime?startTimeStr(endTime):'未设置'}}
					</view>
				</view>

				<view class="more">
					<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				</view>

			</view>

			<view class="time-item" v-show="switchStatus==3"
			 @click="thresholdsPopup=true" >
				<view class="time">
					<view class="time-slot">
						智能停电条件
					</view>
					<view class="type">
						{{formData.maxPower!=''?formData.maxPower+'kW':'未设置'}}
					</view>
					
					
				</view>

				<view class="more">
					<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				</view>

			</view>
			<view class="time-item" v-show="switchStatus==3"
			>
				<view class="time">
					
					<view class="type">
						1. 智能停电条件：智能停电是功率大于等于阈值持续达到一定时间后；<br/>
						2. 达到智能停电条件后“自动停电”，1分钟后回复电源供电；<br/>
						3.“智能停电”结束时，如果处于停电状态将打开电源供电；

					</view>
				</view>
			
				
			
			</view>
			
			<view class="time-item" v-show="switchStatus==2">
				<view class="time">
					
					<view class="type">
						在时间段开始时间开启电源供电，时间段结束时间停止供电。

					</view>
				</view>
			
				
			
			</view>
			
			<view class="time-item2" v-show="startTime||endTime" >
				<view class="time">
					
					<view class="time-slot" >
											用电设置图示
											
					</view>
				</view>
				<view class="progressText"  >
					<view class="progress1" v-if="progress1style.width!='0%'" :style="progress1style" >{{progress1style.text}}</view>
					<view class="progress2">&nbsp;</view>
					<view class="progress3" v-if="progress3style.width!='0%'"
					 :style="progress3style">{{progress3style.text}}</view>
				</view>
				
				<view class="progress" :style="{
					backgroundColor:progressColor
				}" >
					<view class="progress1" :style="progress1style" ></view>
					<view class="progress2">&nbsp;</view>
					<view class="progress3" :style="progress3style"></view>
				</view>
				<view class="type" style=" color: #777777; margin-top: 16rpx;"  >
					<view></view>
					
				</view>
				<view class="type"  style=" color: #777777;"  v-if="switchStatus!=3">
					<view v-if="switchStatus==1||switchStatus==2">设置生效后将在{{gethtml(startTime)}}供电</view>
					<view v-if="switchStatus==0||switchStatus==2">设置生效后将在{{gethtml(endTime)}}停电</view>
				</view>
				<view class="type" style=" color: #777777;" v-else >
					<view>设置生效后将在{{gethtml(startTime)}}开启“智能停电”</view>
					<view>设置生效后将在{{gethtml(endTime)}}关闭“智能停电”</view>
				</view>
				
			</view>
		</view>
		
		<!-- 重复类型 -->
		<view class="repeatType" v-if="typeShow">

			<u-popup v-model="typeShow" mode="bottom">
				<view>
					<view class="headline">
						重复类型
					</view>
					<view class="type-group">
						<view class="item" :class="{
								'item-title-checked':typeShowIndex==0
							}"  @click="typeShowIndex=0,typeShow=false">
							<view class="item-title " >
								执行一次
							</view>
							<view class="item-icon item-icon1">
								<img src="@/assets/img/riLine-check-line.svg" alt="" />
							</view>
							<view class="item-icon item-icon2">
								<img src="" alt="" />
							</view>
						</view>
						<view class="item" :class="{
								'item-title-checked':typeShowIndex==1
							}" @click="typeShowIndex=1,typeShow=false">
							<view class="item-title "  >	每天
							</view>
							<view class="item-icon item-icon1">
								<img src="@/assets/img/riLine-check-line.svg" alt="" />
							</view>
							<view class="item-icon item-icon2">
								<img src="" alt="" />
							</view>
						</view>
						<view class="item" :class="{
								'item-title-checked':typeShowIndex==2
							}" @click="customPopup=true,weekdaysListTemp=weekdaysList">
							<view class="item-title" >
								自定义
								
							</view>
							<view class="item-icon item-icon1">
								<img src="@/assets/img/riLine-check-line.svg" alt="" />
							</view>
							<view class="item-icon item-icon2">
								<img src="" alt="" />
							</view>
							
						</view>
					</view>
				</view>
			</u-popup>

		</view>

		<!-- 关闭时间 -->
		<ujpPicker mode="time" jp="1" :default-time="startTime?'2024-1-1 '+startTime+':1':''"
		 v-model="pickerShow1" :params="params" @confirm="pickerShow1confirm" ></ujpPicker>
		
		<ujpPicker mode="time" jp="2" :default-time="endTime?'2024-1-1 '+endTime+':1':''"  :defaultStartTime="startTime"
		 v-model="pickerShow2" :params="params" @confirm="pickerShow2confirm" ></ujpPicker>
		<!-- 自定义重复 -->
		<ujpPicker2   :texts="['开启“智能停电”','停止“智能停电”']"
		:defaultTime="startTime?'2024-1-1 '+startTime+':1':''"
		:defaultTime2="endTime?'2024-1-1 '+endTime+':1':''"
		
		 v-model="pickerShow3"  @confirm="pickerShow1confirm2" ></ujpPicker2>
		
		<ujpPicker2 :texts="['供电时间','停电时间']"
		:defaultTime="startTime?'2024-1-1 '+startTime+':1':''"
		:defaultTime2="endTime?'2024-1-1 '+endTime+':1':''"
		
		 v-model="pickerShow4"  @confirm="pickerShow1confirm2" ></ujpPicker2>
		
		
		<u-popup v-model="customPopup" mode="bottom">
			<view class="custom">
				<view class="headline">
					自定义重复
				</view>
				<view class="radio-group">
					<checkbox-group @change="checkboxChange" >
					<view class="radio-item" v-for="(item,i) in weekdaysListTemp" :key="i">
						<view class="item-title" >
							{{weeklist[i]}}
						</view>
						<view class="item-value">
								<checkbox 
								:value="''+i"
								:checked="item?true:false" 
											
											
										></checkbox>
						</view>
					</view>
					</checkbox-group>
					
				</view>

				<view class="btn-group">
					<view class="btn cancel" @click="customPopup=false">
						取消
					</view>
					<view class="btn confirm"  @click="customPopupApi" >
						确认
					</view>
				</view>


			</view>
		</u-popup>
		 
		<u-popup v-model="thresholdsPopup" mode="bottom">
			<view class="thresholds">
				<view class="headline">
					智能停电条件：功率(kW)
				</view>
				<view class="input" style=" padding: 0 24rpx;">
				  	<u-input type="digit" min="1"
					 v-model="maxPower" placeholder="填写触发智能停电的功率数值" />
				</view>
				<view class="btn-group">
					<view class="btn cancel" @click="thresholdsPopup=false" >
						取消
					</view>
					<view class="btn confirm"  @click="thresholdsPopupApi">
						确认
					</view>
				</view>
				
			</view>
			
			
		</u-popup>
	</view>
</template>

<script>
	import ujpPicker from '@/components/u-picker.vue'
	import ujpPicker2 from '@/components/u-picker2.vue'
	
	import * as API from '@/apis/pagejs/meterTimer.js'
import {
		hourDistanceArr,
		parseUnixTime,
		newDate
	} from '@/apis/utils/index.js'
	export default {
		components: {
			ujpPicker,ujpPicker2
		},
		data() {

			return {
				typeShow: true,
				pickerShow1: false,
				pickerShow2: false,
				pickerShow3: false,
				pickerShow4: false,
				typeShow: false,
				customPopup: false,
				thresholdsPopup: false,
				listtemp: [3,2,1,0],
				list: [
					{
						text:'智能停电',
						value:3
					},{
									text: '供电时间',
									value:2
									
								}, {
									text: '定时供电',
									value:1
								}, {
									text: '定时停电' ,
									value:0
								}],
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false,
				},
				id:"",
				type:"",
				meterId:"",
				title:"",
				weekdaysListTemp:[0,0,0,0,0,0,0],
				weekdaysList:[0,0,0,0,0,0,0],
				weeklist:[
					'周一','周二','周三','周四','周五','周六','周日'
				],
				typeShowIndex:0,
				startTime:"",
				endTime:"",
				 
				maxPower:"",
				timerSwitch:{},
				switchStatus:"",
				formData:{
					meterId:"",
					weekdays:"",
					startTime:"",
					type:"",
					switchStatus:"",
					status:true,
					id:"",
					endTime:"",
					maxPower:"",
				},
				progressColor:"#53b56b",
				
				
			}
		},
		onLoad(op) {
			if(op.meterId){
				this.meterId=op.meterId;
				this.formData.meterId=this.meterId
			}
			if(op.type){
				this.type=op.type;
				this.title=this.list[this.type].text
				this.switchStatus=this.list[this.type].value
			}
			if(op.id){
				this.id=op.id;
				this.getMeterTimerDetails()
			}
		},
		computed:{
			
			progress1style(){
				var width=0;
				var color="red"
				this.progressColor="#53b56b"
				var text=""
				var textColor=""
				if(this.switchStatus==1||this.switchStatus==2||this.switchStatus==3){
					
					var startTime=this.startTime
					var endTime=this.endTime
					if(!startTime){
						startTime="9999"
					}
					if(!endTime){
						endTime="9999"
					}
					console.log(startTime,endTime)
					var num1=parseInt(startTime.replace(":",''))
					var num2=parseInt(endTime.replace(":",''))
					
					
					var num=parseInt(num1>num2?num2:num1)
					
					if(num1>num2){
						if(this.switchStatus!=1){
							color=" #53b56b"
							this.progressColor="red"
						}
						textColor=" red"
						if(this.switchStatus==3){
							text=`智能停电${endTime}`
						}else{
							text=`停电 (${endTime})`
						}
					}else{
						textColor="#53b56b"
						if(this.switchStatus==3){
							text=`智能停电${startTime}`
						}else{
							text+=`供电 (${startTime})`
						}
						 
					}
					width=parseInt(num/2400*100)
					console.log(width)
				}else{
					
					
				}
				
				return {
					color:textColor,
						text:text,
					    width: width+"%",
						backgroundColor:color
				}
			},
			progress3style(){
				var width=0;
				var color="red"
				var text=""
				var textColor=""
				if(this.switchStatus==0||this.switchStatus==2||this.switchStatus==3){
					
					var startTime=this.startTime
					var endTime=this.endTime
					
					if(!startTime){
						startTime="-1"
					}
					if(!endTime){
						endTime="-1"
					}
					
					var num1=parseInt(startTime.replace(":",''))
					var num2=parseInt(endTime.replace(":",''))
					
					if(num1<num2||this.switchStatus==0){
						textColor=" red"
						if(this.switchStatus==3){
							text=`智能停电${endTime}`
						}else{
							text=`停电(${endTime})`
						}
					}else{
						if(this.switchStatus!=0){
							color=" #53b56b"
						}
						textColor=" #53b56b"
						//this.progressColor="red"
						if(this.switchStatus==3){
							text=`智能停电${startTime}`
						}else{
							text+=`供电(${startTime})`
						}
						
					}
					var num=parseInt(num1<num2?num2:num1)
					
					 width=parseInt((2400-num)/2400*100)
					
				}else{
					
				}
				
			
				return {
					color:textColor,
					text:text,
					    width: width+"%",
						backgroundColor:color
				}
			}
		},
		methods: {
			gethtml(item) {
				var str = parseUnixTime(new Date().getTime(), '{y}-{m}-{d}');
				var time1 = new Date();
				var time2 = newDate(str + ' ' + item + ':00');
				var sz = []
				if (time1 > time2) {
					time2.setDate(time2.getDate() + 1)
					sz = hourDistanceArr(time1, time2)
				} else {
			
					sz = hourDistanceArr(time1, time2)
				}
				console.log(sz[0])
				return (sz[0] ? sz[0] + '小时' : '') + (sz[1] ? sz[1] + '分钟后' : '0分钟后')
			
			},
			showjp2time(time1,time2){
				
				if(time1&&time2){
					var num1=parseInt(time1.replace(":",''))
					var num2=parseInt(time2.replace(":",''))
					return num1>num2
				}else{
					return false
				}
				
			},
			getMeterTimerDetails(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.meterTimerDetails({
					id:this.id
				}).then((response) => {
					uni.hideLoading();
					var timerSwitch=response.data.timerSwitch;
					this.formData=timerSwitch
					this.meterId=timerSwitch.meterId
					this.type=this.listtemp[timerSwitch.switchStatus]
					this.switchStatus=this.list[this.type].value
					this.title=this.list[this.type].text
					if(timerSwitch.type==1){
						this.typeShowIndex=0;
					}else{
						if(timerSwitch.weekdays=="1,2,3,4,5,6,7"){
							this.typeShowIndex=1;
						}else{
							this.typeShowIndex=2;
							var sz=timerSwitch.weekdays.split(',');
							for(var i in sz){
								var num= parseInt(sz[i])-1
								this.weekdaysListTemp[num]=1
							}
							this.weekdaysList=this.weekdaysListTemp
						}
					}
					this.startTime=timerSwitch.startTime
					this.endTime=timerSwitch.endTime
					
					if(this.switchStatus==0){
						this.endTime=timerSwitch.startTime
					}
					this.maxPower=this.formData.maxPower
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			thresholdsPopupApi(){
				if(this.maxPower!=''){
					if(this.maxPower<=0){
						uni.showToast({
							title: "请输入大于0的功率阈值（kw）",
							icon: "none"
						})
					}else{
						this.thresholdsPopup=false
						this.formData.maxPower=this.maxPower	
					}
				
				}else{
					uni.showToast({
						title: "请填写智能停电条件：功率（kw）",
						icon: "none"
					})
				}
			},
			pickerShow1confirm2(e){
				if(e.hour+":"+e.minute+""==e.hour2+":"+e.minute2+""){
					this.pickerShow3=true
					uni.showToast({
						title: "请勿设置相同时间",
						icon: "none"
					})
				}else{
					this.startTime=e.hour+":"+e.minute+""
					
					this.endTime=e.hour2+":"+e.minute2+""
				}
				
			},
			
			pickerShow1confirm(e){
			
				
				this.startTime=e.hour+":"+e.minute+""
				//this.startTimeStr=e.hour+"时"+e.minute+"分"
			},
			startTimeStr(str){
				if(str){
					return str.replace(":","时")+"分"
				}else{
					return ''
				}
				
			},
			pickerShow2confirm(e){
				
				this.endTime=e.hour+":"+e.minute+""
				//this.endTimeStr=e.hour+"时"+e.minute+"分"
			},
			customPopupApi(){
				var str1=[0,0,0,0,0,0,0].join()
				var str2=this.weekdaysListTemp.join()
				
				if(str1!=str2){
					this.typeShowIndex=2;
					this.customPopup=false
					this.typeShow=false;
					this.weekdaysList=this.weekdaysListTemp;	
				}else{
					uni.showToast({
						title: "请至少勾选一项",
						icon: "none"
					})
				}
				
				
			},
			checkboxChange(e){
				var sz=e.detail.value;
				this.weekdaysListTemp=[0,0,0,0,0,0,0]
				for(var i in sz){
					var k=sz[i]
					this.weekdaysListTemp[k]=1
				}
				console.log(this.weekdaysListTemp)
			},
			submitApi(){
				this.formData.weekdays=""
				this.formData.switchStatus=this.list[this.type].value
				if(!this.startTime){
					
					if(this.formData.switchStatus==1){
						uni.showToast({
							title: "请设置供电时间",
							icon: "none"
						})
						return
					}
					if(this.formData.switchStatus==2){
						uni.showToast({
							title: "请设置供电时间段",
							icon: "none"
						})
						return
					}
					if(this.formData.switchStatus==3){
						
						
						uni.showToast({
							title: "请设置智能停电时间区间",
							icon: "none"
						})
						return
					}
					 
				}
				if(!this.endTime){
					
					
					if(this.formData.switchStatus==0){
						uni.showToast({
							title: "请设置停电时间",
							icon: "none"
						})
						return
					}
					
				}
				
				
				
				
				
				if(this.formData.switchStatus==0){
					this.formData.startTime=this.endTime
				}else{
					this.formData.startTime=this.startTime
					this.formData.endTime=this.endTime
				}
				if(!this.formData.endTime){
					this.formData.endTime=""
				}
				if(this.typeShowIndex==0){
					this.formData.type="1"
				}else{
					this.formData.type="2"
					var weekdaysList=this.weekdaysList
					if(this.typeShowIndex==1){
						this.formData.weekdays='1,2,3,4,5,6,7'
					}
					if(this.typeShowIndex==2){
						for(var i in weekdaysList){
							var day=weekdaysList[i]
							if(day==1){
								if(this.formData.weekdays!=""){
									this.formData.weekdays+=","
								}
								this.formData.weekdays+=(parseInt(i)+1)
							}
						}
					}
					
				}
				if(this.formData.switchStatus==3&&this.maxPower==''){
					uni.showToast({
						title: "请填写智能停电条件：功率（kw）",
						icon: "none"
					})
					return
				}else{
					this.formData.maxPower=this.maxPower;
					if(!this.formData.maxPower){
						this.formData.maxPower=''
					}
				}
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.saveSwitch(this.formData).then((response) => {
					//uni.hideLoading();
					//this.getMeterTimerListReady=true
					//this.timerSwitchList=response.data.timerSwitchList;
					uni.navigateBack();
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.progressText{
		
		
		    margin-top: 16rpx;
			margin-bottom: 2rpx;
		display: flex;
		justify-content: space-between;
		.progress1,.progress3{
		    white-space: pre;
			background-color: #fff !important;
			  
		}
		.progress1{
			
			text-align: right;
		}
		.progress3{
			text-align: left;
			min-width: 25%;
		}
		
	}
	.progress{
		background-color: #53b56b;
		color: #53b56b;
		height: 60rpx;
		border-radius: 30px;
		display: flex;
		justify-content: space-between;
		.progress1{
			border-radius: 30px 0 0 30px;	
		}
		.progress3{
			border-radius:0 30px   30px 0;	
		}
	}
	
	
	/deep/.u-slot-right {
		padding-right: 32rpx;
		
		img {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.time-group {
		background-color: #fff;
		.time-item2 {
			padding: 24rpx 0;
			margin: 0 32rpx;
			.time {
				.time-slot {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}
			
				.type {
					color: rgba(119, 119, 119, 1);
				}
			}
		}
		.time-item {

			padding: 24rpx 0;
			margin: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(221, 221, 221, 1);

			.time {
				.time-slot {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}

				.type {
					color: rgba(119, 119, 119, 1);
				}
			}
		}

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

	.weeklistclassSpan:last-child{
		display: none;
	}
	// 重复类型
	.repeatType {
		.headline {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			margin-top: 32rpx;
			font-weight: bold;
			text-align: center;
		}

		.type-group {
			margin-top: 24rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;
				line-height: 96rpx;
				border-bottom: 1px solid rgba(245,245,245,1);
				padding: 0 32rpx;
			}
			.time-item:last-of-type{
				border: none;
			}

			.item-title {
				color: rgb(16, 16, 16);
				font-size: 32rpx;
			}
			.item-icon1{
				
				display: none;
			}
			.item-icon2{
				display: block;
			}
			.item-title-checked {
				color: rgba(22, 119, 255, 1);
				.item-title {
					color: rgba(22, 119, 255, 1);
					font-size: 32rpx;
				}
				.item-icon1{
					display: block;
				}
				.item-icon2{
					display: none;
				}
			}
		}
	}



	// 自定义重复
	.custom,
	.thresholds {
		padding: 32rpx 0;
		
		
		.headline {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			margin-bottom: 32rpx;
			font-weight: bold;
			text-align: center;
		}

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

				.item-title {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}
			}


		}

		.btn-group {
			display: flex;
			align-items: center;
			justify-content: space-between;
            padding: 0 32rpx;
			.btn {
				width: 328rpx;
				height: 80rpx;
				line-height: 80rpx;

				font-size: 32rpx;
				border-radius: 4px;
				text-align: center;
				margin-top: 24rpx;
			}

			.cancel {
				background-color: rgba(222, 225, 228, 1);
				color: rgba(51, 51, 51, 1);
			}

			.confirm {
				background-color: rgba(22, 119, 255, 1);
				color: rgba(255, 255, 255, 1);
			}
		}
	}




	/deep/.u-drawer-content-visible {
		border-radius: 12px 12px 0 0;
	}
	/deep/uni-input{
		background-color: rgba(241,242,245,1);
		color: rgba(119,119,119,1);
		font-size: 36rpx;
		height: 80rpx;
		padding-left: 16rpx;
	}
</style>