androidCnToWechatGrt/pagesHome/airConditioner/index.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='智慧空调' bgColor='transparent'></cus-header>
		<image class="bg" :src="imgBase+'home/kongtiao_bg.png'" mode="widthFix"></image>
		<div class="nums">
			<div class="pre">空调：<span class="mr">{{ktNum}}</span></div>
			<div class="pre">正常：<span class="zc">{{zcNum}}</span></div>
			<div class="pre">离线：<span class="lx">{{lxNum}}</span></div>
		</div>
		<div class="boxs" v-if="list.length">
			<div class="box" v-for="(item,index) in list" :key="index" :style="{'background':modeCfg[item.attributeList[2].value].color}" @tap="showDetail(item,index)">
				<image :src="modeCfg[item.attributeList[2].value].icon.split(';')[0]" class="type" mode="widthFix"></image>
				<div class="place">{{item.installSite}}{{item.roomNumbers}}</div>
				<div class="position">{{item.airConditionerName}}</div>
				<div class="temperature" :class="{'off':item.opStatus==0}">{{item.attributeList[5].value}}℃</div>
				<div class="text">温度</div>
				<div class="btn" v-if="item.opStatus==1" @tap.stop="switchOpenClose(1,item.deviceId, index,item.attributeList[3].sensorAddress)">
					<div class="circle"></div>
					<text style="margin-left: 4rpx;">ON</text>
				</div>
				<div class="btn" v-else-if="item.opStatus==0" @tap.stop="switchOpenClose(0,item.deviceId, index,item.attributeList[3].sensorAddress)">
					<text style="margin-right: 4rpx;">OFF</text>
					<div class="circle off"></div>
				</div>
			</div>
		</div>
		<template v-else>
			<page-empty :height="'calc(100vh - 200px)'"></page-empty>
		</template>
		<u-popup :show="show" mode="bottom" :round="40" @close="ktClose">
			<div class="kt_info">
				<div class="top">
					<div class="left">
						<image :src="imgBase+'home/kongtiao_kt.png'"></image>
						<div class="addr">
							<text>{{ktInfo.installSite}}{{ktInfo.roomNumbers}}</text>
							<text class="ts">{{ktInfo.airConditionerName}}</text>
						</div>
					</div>
					<div class="right" @tap="ktClose">
						<u-icon name="close" color="#333333" size="48"></u-icon>
					</div>
				</div>
				<template v-if="!setShow">
					<!-- <image class="setting" :src="imgBase+'home/kongtiao_set.png'" @tap="setShow = true"></image> -->
					<div class="wendu">
						<TemperatureControl :temperature="temperature" @changeTemperature="changeTemperature" ref="tcRef"></TemperatureControl>
					</div>
					<div class="type" v-if="ktInfo.attributeList&&ktInfo.attributeList.length">
						<div class="pre" v-for="item in modeList" :key="item.id" :style="{'width':'calc(100% / '+modeList.length+' - 20rpx)'}"
							:class="{'active':temperature&&modeValue==item.dictValue}" @tap="changeType(item.dictValue)">
							<image :src="item.icon.split(';')[2]" v-if="temperature&&modeValue==item.dictValue"></image>
							<image :src="item.icon.split(';')[1]" v-else></image>
							<text>{{item.dictLabel}}</text>
						</div>
					</div>
					<div class="speend">
						<text>风速</text>
						<image class="jian" :src="imgBase+'home/kongtiao_jian.png'" @tap="changeWindSpeend(1)"></image>
						<div class="area" v-if="speendList.length">
							<div class="pre" :class="{'active':temperature&&speendValue==item.dictValue}"
								:style="{'width':'calc(100% / '+speendList.length+' - 3rpx)'}"
								v-for="item in speendList" :key="item.id">
								<div class="text" v-if="temperature&&speendValue==item.dictValue">{{item.dictLabel}}</div>
							</div>
						</div>
						<image class="jia" :src="imgBase+'home/kongtiao_jia.png'" @tap="changeWindSpeend(2)"></image>
					</div>
					<div class="btns">
						<!-- <div class="btn" :class="{'blue':wtype==1}" @tap="changeWindFx(1)">左右扫风</div> -->
						<div></div>
						<image :src="imgBase+'home/kongtiao_open1.png'" v-if="ktInfo.opStatus==1" @tap="control(1)"></image>
						<image :src="imgBase+'home/kongtiao_open2.png'" v-else-if="ktInfo.opStatus==0" @tap="control(0)"></image>
						<!-- <div class="btn" :class="{'blue':wtype==2}" @tap="changeWindFx(2)">上下扫风</div> -->
						<div></div>
					</div>
				</template>
				<template v-else>
					<div class="form">
						<div class="item">
							<div class="left">所属楼栋</div>
							<div class="right">
								<input type="text" placeholder="请输入楼栋">
							</div>
						</div>
						<div class="item">
							<div class="left">所属楼层</div>
							<div class="right">
								<input type="text" placeholder="请输入楼层">
							</div>
						</div>
						<div class="item">
							<div class="left">房间号</div>
							<div class="right">
								<input type="text" placeholder="请输入房间号">
							</div>
						</div>
						<div class="item">
							<div class="left">设备序列号</div>
							<div class="right">
								<input type="text" placeholder="请输入设备序列号">
							</div>
						</div>
						<div class="item">
							<div class="left">空调名称</div>
							<div class="right">
								<input type="text" placeholder="请输入空调名称">
							</div>
						</div>
						<div class="item">
							<div class="left">空调编号</div>
							<div class="right">
								<input type="text" placeholder="请输入空调编号">
							</div>
						</div>
						<div class="item">
							<div class="left">是否为公共区域</div>
							<div class="right">
								<u-switch></u-switch>
							</div>
						</div>
					</div>
					<div class="confirm" @tap="confirmSet">确定</div>
				</template>
			</div>
		</u-popup>
	</view>
</template>

<script>
	import TemperatureControl from '@/pagesHome/components/TemperatureControl/index.vue'
	import pageEmpty from '@/components/pageEmpty/index.vue'
	export default {
		components:{
			TemperatureControl,
			pageEmpty
		},
		data(){
			return {
				ktNum:0,
				zcNum:0,
				lxNum:0,
				params:{
					page:1,
					limit:9999,
					controlCategory:'CommonLighting'
				},
				modeList:[],
				modeCfg:{},
				modeValue:'',
				speendList:[],
				speendCfg:{},
				speendValue:'',
				ktStatus:'',
				temperature:0,
				list:[],
				lIndex:'',
				show:false,
				setShow:false,
				ktInfo:{},
				wtype:1,
				canClick:true
			}
		},
		async onLoad() {
			await this.getModeList();
			await this.getSpeendList();
			this.getList();
		},
		onPullDownRefresh() {
			this.getList();
		},
		methods:{
			async getModeList(){
				let res = await this.$api.get('/sys/dict/data/getListByType/air_mode');
				if(res.data.code===0){
					this.modeList = res.data.data;
					res.data.data.map(d=>this.modeCfg[d.dictValue]=d);
				}else this.$showToast(res.data.msg)
			},
			async getSpeendList(){
				let res = await this.$api.get('/sys/dict/data/getListByType/air_fan');
				if(res.data.code===0){
					this.speendList = res.data.data;
					res.data.data.map(d=>this.speendCfg[d.dictValue]=d);
				}else this.$showToast(res.data.msg)
			},
			getList(){
				this.$api.get('/airconditioner/page',this.params).then(res=>{
					if(res.data.code===0){
						this.list = res.data.data.list;
						this.ktNum = res.data.data.total;
						this.zcNum = this.list.filter(l=>l.opStatus==1).length;
						this.lxNum = this.list.filter(l=>l.opStatus==0).length;
					}else this.$showToast(res.data.msg)
				})
			},
			showDetail(item,index){
				this.ktInfo = JSON.parse(JSON.stringify(item));
				this.ktStatus = item.opStatus;
				this.modeValue = this.ktInfo.attributeList[2].value;
				this.temperature = this.ktInfo.attributeList[5].value;
				this.speendValue = this.ktInfo.attributeList[0].value;
				this.lIndex = index;
				
				this.show = true;
				this.$refs.tcRef.status = this.ktStatus;
				this.$refs.tcRef.sjTemperature = this.temperature;
				this.$refs.tcRef.init();
			},
			changeType(type){
				if(this.ktInfo.opStatus==0) return
				if(this.modeValue == type) return
				this.modeValue = type;
				this.updateAirConditioner(type,this.ktInfo.attributeList[2].sensorAddress)
			},
			changeWindSpeend(type){
				if(this.ktInfo.opStatus==0) return
				let idx = this.speendList.findIndex(s=>s.dictValue==this.speendValue)
				
				if(idx>-1){
					if(type==1){
						if(idx==0) return
						this.speendValue = this.speendList[idx-1].dictValue;
					}else if(type==2){
						if(idx==this.speendList.length-1) return
						this.speendValue = this.speendList[idx+1].dictValue;
					}
				}
				this.updateAirConditioner(this.speendValue,this.ktInfo.attributeList[0].sensorAddress)
			},
			// changeWindFx(type){
			// 	if(this.ktInfo.opStatus==0) return
			// },
			control(status){
				this.openCloseAirConditioner(status,this.ktInfo.deviceId,this.lIndex,this.ktInfo.attributeList[3].sensorAddress);
			},
			ktClose(){
				this.ktInfo = {};
				this.setShow = false;
				this.show = false;
			},
			confirmSet(){
				this.setShow = false;
			},
			changeTemperature(temperature){
				this.updateAirConditioner(temperature,this.ktInfo.attributeList[5].sensorAddress)
			},
			switchOpenClose(status,deviceId,index,identifier){
				this.openCloseAirConditioner(status,deviceId,index,identifier);
			},
			openCloseAirConditioner(status,deviceId,index,identifier){
				let msg = status?'关闭':'开启';
				uni.showModal({
					title:'温馨提示',
					content:`是否确认【${msg}】此设备`,
					success: (res) => {
						if(res.confirm){
							this.$api.post('/airconditioner/command',{
								identifier,
								action: 0,
								value: status? 0 : 1,
								deviceId,
							}).then(resu=>{
								if(resu.data.code===0){
									this.show = false;
									this.$showToast('操作成功');
									setTimeout(()=>{
										this.getList();
									},3000)
								}else this.$showToast(resu.data.msg)
							})
						}
					}
				})
			},
			updateAirConditioner(value, identifier){
				if(!this.canClick) return
				this.canClick = false;
				this.$api.post('/airconditioner/command',{
					action: 0,
					identifier,
					value,
					deviceId:this.ktInfo.deviceId,
				}).then(resu=>{
					if(resu.data.code===0){
						this.show = false;
						this.$showToast('操作成功');
						setTimeout(()=>{
							this.getList();
						},3000)
					}else this.$showToast(resu.data.msg)
					this.canClick = true;
				}).catch(err=>{
					this.canClick = true;
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		width: 100%;
		padding: 0 24rpx 20rpx;
		box-sizing: border-box;
		background: #F4F8FB;
		
		.bg{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}
	
		.nums{
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 37rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			margin-top: 20rpx;
			position: relative;
			.pre{
				width: calc(100% / 3);
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #4E5969;
				line-height: 36rpx;
				text-align: left;
				span{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					line-height: 36rpx;
					text-align: left;
					&.mr{
						color: #1D2129;
					}
					&.zc{
						color: #14CC8C;
					}
					&.lx{
						color: #F95050;
					}
				}
			}
		}
	
		.boxs{
			position: relative;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 4rpx;
			.box{
				width: calc(50% - 11rpx);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(35,130,255,0.1), inset 0rpx 3rpx 3rpx 0rpx #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;
				padding: 32rpx 21rpx 42rpx 29rpx;
				box-sizing: border-box;
				position: relative;
				
				.type{
					width: 164rpx;
					height: 164rpx;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 9;
				}
				.place{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.position{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #86909C;
					line-height: 33rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 16rpx;
				}
				.temperature{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 54rpx;
					color: #198CFF;
					line-height: 64rpx;
					margin-top: 33rpx;
					&.off{
						color: #4E5969;
					}
				}
				.text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #86909C;
					line-height: 33rpx;
					margin-top: 9rpx;
				}
				.btn{
					width: 98rpx;
					height: 54rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.06), inset 0rpx 2rpx 4rpx 0rpx #FFFFFF, inset 0rpx -1rpx 1rpx 0rpx #FFFFFF;
					border-radius: 27rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 21rpx;
					bottom: 40rpx;
					.circle{
						width: 24rpx;
						height: 24rpx;
						background: #6FDD93;
						border-radius: 50%;
						&.off{
							background: #CCCCCC;
						}
					}
					text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #1D2129;
						line-height: 33rpx;
					}
				}
			}
		}
	
		.kt_info{
			width: 100%;
			padding: 40rpx 30rpx 65rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			position: relative;
			border-radius: 40rpx 40rpx 0 0;
			.top{
				display: flex;
				justify-content: space-between;
				.left{
					display: flex;
					image{
						width: 72rpx;
						height: 72rpx;
					}
					.addr{
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						text{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #1D2129;
							line-height: 42rpx;
							text-align: left;
							&.ts{
								font-weight: 400;
								font-size: 24rpx;
								color: #86909C;
								margin-top: 16rpx;
							}
						}
					}
				}
			}
			.setting{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 30rpx;
				top: 165rpx;
				z-index: 9;
			}
			.wendu{
				width: 484rpx;
				height: 484rpx;
				margin: 69rpx auto 0;
			}
			.type{
				display: flex;
				justify-content: space-around;
				margin-top: 20rpx;
				.pre{
					margin: 0 10rpx;
					padding: 36rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					background: linear-gradient( 180deg, #ECF2F7 0%, #FFFFFF 100%);
					box-shadow: 0rpx 4rpx 16rpx 0rpx #EDF4FF, inset 0rpx 3rpx 3rpx 0rpx #FFFFFF;
					border-radius: 16rpx;
					border: 2rpx solid #FFFFFF;
					image{
						width: 48rpx;
						height: 48rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						line-height: 40rpx;
						text-align: center;
						margin-top: 16rpx;
					}
					&.active{
						background: #198CFF;
						box-shadow: 0rpx 4rpx 16rpx 4rpx #EDF4FF;
						text{
							font-weight: bold;
							color: #FFFFFF;
						}
					}
				}
			}
			.speend{
				width: 100%;
				padding-left: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin-top: 80rpx;
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
					line-height: 40rpx;
				}
				image{
					width: 32rpx;
					height: 32rpx;
					margin: 0 20rpx;
				}
				.area{
					width: calc(100% - 200rpx);
					height: 20rpx;
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					.pre{
						height: 20rpx;
						background: #EDF4FF;
						position: relative;
						&.active{
							background: linear-gradient( 90deg, #3A8DFF 0%, #0BC6FF 100%);
							box-shadow: 0rpx 4rpx 16rpx 4rpx #EFEFEF;
						}
						.text{
							width: 100%;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							line-height: 33rpx;
							text-align: center;
							position: absolute;
							top: -33rpx;
						}
					}
				}
			}
			.btns{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;
				.btn{
					width: 210rpx;
					height: 88rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 12rpx 4rpx #EDF4FF;
					border-radius: 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
					line-height: 88rpx;
					text-align: center;
					&.blue{
						background: #198CFF;
						color: #FFFFFF;
					}
				}
				image{
					width: 170rpx;
					height: 170rpx;
				}
			}
			.form{
				margin-top: 72rpx;
				.item{
					width: 100%;
					padding: 28rpx 30rpx;
					box-sizing: border-box;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EDF4FF;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #1D2129;
						line-height: 42rpx;
						letter-spacing: 2rpx;
					}
					.right{
						input{
							outline: none;
							border: none;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #4E5969;
							line-height: 42rpx;
							text-align: right;
						}
					}
				}
			}
			.confirm{
				width: calc(100% - 48rpx);
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				margin: 234rpx 24rpx 0;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	}
</style>