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">{{8}}</span></div>
			<div class="pre">正常：<span class="zc">{{20}}</span></div>
			<div class="pre">离线：<span class="lx">{{1}}</span></div>
		</div>
		<div class="boxs" v-if="list.length">
			<div class="box" v-for="(item,index) in list" :key="index" :class="bgcolorCfg[item.type]" @tap="showDetail(item)">
				<image :src="imgCfg[item.type]" class="type" mode="widthFix"></image>
				<div class="place">{{item.place}}</div>
				<div class="position">{{item.position}}</div>
				<div class="temperature" :class="{'off':item.status==2}">{{item.temperature}}℃</div>
				<div class="text">温度</div>
				<div class="btn" v-if="item.status==1">
					<div class="circle"></div>
					<text style="margin-left: 4rpx;">ON</text>
				</div>
				<div class="btn" v-else-if="item.status==2">
					<text style="margin-right: 4rpx;">OFF</text>
					<div class="circle off"></div>
				</div>
			</div>
		</div>
		<template v-else>
			<page-empty :height="'calc(100vh - '+(mt+65)+'px)'" marginTop="65px"></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.place}}</text>
							<text class="ts">{{ktInfo.position}}</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="27" @changeTemperature="changeTemperature"></TemperatureControl>
					</div>
					<div class="type">
						<div class="pre" :class="{'active':ktInfo.type==1}" @tap="changeType(1)">
							<image :src="imgBase+'home/kongtiao_zl_bai.png'" v-if="ktInfo.type==1"></image>
							<image :src="imgBase+'home/kongtiao_zl_hui.png'" v-else></image>
							<text>制冷</text>
						</div>
						<div class="pre" :class="{'active':ktInfo.type==2}" @tap="changeType(2)">
							<image :src="imgBase+'home/kongtiao_zr_bai.png'" v-if="ktInfo.type==2"></image>
							<image :src="imgBase+'home/kongtiao_zr_hui.png'" v-else></image>
							<text>制热</text>
						</div>
						<div class="pre" :class="{'active':ktInfo.type==3}" @tap="changeType(3)">
							<image :src="imgBase+'home/kongtiao_cs_bai.png'" v-if="ktInfo.type==3"></image>
							<image :src="imgBase+'home/kongtiao_cs_hui.png'" v-else></image>
							<text>除湿</text>
						</div>
						<div class="pre" :class="{'active':ktInfo.type==4}" @tap="changeType(4)">
							<image :src="imgBase+'home/kongtiao_sf_bai.png'" v-if="ktInfo.type==4"></image>
							<image :src="imgBase+'home/kongtiao_sf_hui.png'" v-else></image>
							<text>送风</text>
						</div>
					</div>
					<div class="speend">
						<text>风速</text>
						<image class="jian" :src="imgBase+'home/kongtiao_jian.png'" @tap="changeWindSpeend(1)"></image>
						<div class="area">
							<div class="jd" :style="{'width':speend+'%'}"></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>
						<image :src="imgBase+'home/kongtiao_open1.png'" v-if="ktInfo.status==1" @tap="control(1)"></image>
						<image :src="imgBase+'home/kongtiao_open2.png'" v-else-if="ktInfo.status==2" @tap="control(2)"></image>
						<div class="btn" :class="{'blue':wtype==2}" @tap="changeWindFx(2)">上下扫风</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'
	export default {
		components:{
			TemperatureControl
		},
		data(){
			return {
				imgCfg:{
					1:this.$imgBase+'home/kongtiao_cold.png',
					2:this.$imgBase+'home/kongtiao_sun.png',
					3:this.$imgBase+'home/kongtiao_water.png',
					4:this.$imgBase+'home/kongtiao_wind.png'
				},
				bgcolorCfg:{
					1:'cold',
					2:'hot',
					3:'water',
					4:'wind'
				},
				list:[
					{
						place:'B#/13F1301',
						position:'传秀-指挥中心东',
						temperature:18,
						status:1,//1开启 2关闭
						type:1//1制冷 2制热 3除湿 4送风
					},
					{
						place:'B#/13F1302',
						position:'传秀-指挥中心南',
						temperature:20.5,
						status:2,//1开启 2关闭
						type:3//1制冷 2制热 3除湿 4送风
					},
					{
						place:'B#/13F1303',
						position:'传秀-指挥中心西',
						temperature:28,
						status:1,//1开启 2关闭
						type:4//1制冷 2制热 3除湿 4送风
					},
					{
						place:'B#/13F1304',
						position:'传秀-指挥中心北',
						temperature:28,
						status:1,//1开启 2关闭
						type:2//1制冷 2制热 3除湿 4送风
					}
				],
				show:false,
				setShow:false,
				ktInfo:{},
				speend:20,
				wtype:1
			}
		},
		methods:{
			showDetail(item){
				this.ktInfo = JSON.parse(JSON.stringify(item));
				if(item.status==2){
					this.speend = 0;
					this.wtype = '';
					this.ktInfo.type = '';
				} 
				this.show = true;
			},
			changeType(type){
				if(this.ktInfo.status==2) return
				this.ktInfo.type = type;
			},
			changeWindSpeend(type){
				if(this.ktInfo.status==2) return
				if(type==1){
					if(this.speend<=20) return
					this.speend-=20;
				}else if(type==2){
					if(this.speend==100) return
					this.speend+=20;
				}
			},
			changeWindFx(type){
				if(this.ktInfo.status==2) return
				this.wtype = type;
			},
			control(type){
				this.show = false;
			},
			ktClose(){
				this.setShow = false;
				this.show = false;
			},
			confirmSet(){
				this.setShow = false;
			},
			changeTemperature(temperature){
				console.log(temperature,'temperature');
			}
		}
	}
</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;
				&.cold{
					background: linear-gradient( 180deg, #D7EBFF 0%, #FFFFFF 100%);
				}
				&.hot{
					background: linear-gradient( 180deg, #FFE7E4 0%, #FFFFFF 100%);
				}
				&.water{
					background: linear-gradient( 180deg, #ECF2F7 0%, #FFFFFF 100%);
				}
				&.wind{
					background: linear-gradient( 180deg, #ECF2F7 0%, #FFFFFF 100%);
				}
				
				.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{
					width: calc(25% - 20rpx);
					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;
					background: #EDF4FF;
					border-radius: 16rpx;
					position: relative;
					.jd{
						height: 100%;
						border-radius: 16rpx;
						background: linear-gradient( 90deg, #3A8DFF 0%, #0BC6FF 100%);
						box-shadow: 0rpx 4rpx 16rpx 4rpx #EFEFEF;
						position: absolute;
						left: 0;
						top: 0;
					}
				}
			}
			.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>