v3-lab-xcx/pages_manage/views/laboratory/airConditioning.vue

<!-- 空调 -->
<template>
	<view class="airConditioning">
		<view class="null-box" @click="backPage()"></view>
		<!-- 空调按钮 -->
		<view class="panel">
			<view class="panel-t">
				<view>{{infraredControllerForm.name}}</view>
				<view @click="switchFun()" :class="infraredControllerForm.switchType==1?'color-A':'color-B'">{{infraredControllerForm.switchType==1?'开启':'关闭'}}</view>
			</view>
			<view class="panel-m" >
				<view @click="temperatureFun(index)" :class="infraredControllerForm.functionType==item.value?'color-C':''" v-for="(item,index) in infraredControllerData.functionList" :key="index">{{item.label}}</view>
			</view>
			<view class="panel-b">
				<view @click="subtract">-</view>
				<view v-for="(item,index) in infraredControllerData.orderList" :key="index" v-if="item.value == infraredControllerForm.orderType">{{item.value}}</view>
				<view @click="add">+</view>
			</view>
			<view class="panel-button" @click="mangerControl">确定</view>
		</view>
	</view>
</template>
<script>
	import {
		iotAppHardwareOperatingHardware,
	} from '@/pages_manage/api/index.js'
	import { config } from '@/api/request/config.js'
	export default {
		name: "airConditioning",
		props: {
			airConditioningData: {},
		},
		data() {
			return {
				baseUrl:config.base_url,
        /****************** 红外控制器相关 ******************/
        infraredControllerType:false,
        infraredControllerTitle:"",
        infraredControllerForm:{
          name:null,//设备名称
          switchType:null,//0.关 1.开
          functionType:null, //1.制冷 2.制热 3.通风
          orderType:null, //温度指令
          hardwareNo:null, //设备编号
        },
        infraredControllerData:{
          functionList:[
            {label:'制冷',value:'1'},
            {label:'制热',value:'2'},
            {label:'通风',value:'3'},
          ],
          orderList:[
            {label:"18°C",value:18},
            {label:"19°C",value:19},
            {label:"20°C",value:20},
            {label:"21°C",value:21},
            {label:"22°C",value:22},
            {label:"23°C",value:23},
            {label:"24°C",value:24},
            {label:"25°C",value:25},
            {label:"26°C",value:26},
            {label:"27°C",value:27},
          ],
        }
			}
		},
		created() {

		},
		mounted() {
			this.$set(this,'infraredControllerForm',{
				name:this.airConditioningData.hardwareName,
				switchType:parseInt(this.airConditioningData.switchType),
				functionType:this.airConditioningData.switchType == 0 ? 1 : parseInt(this.airConditioningData.functionType),
				orderType:this.airConditioningData.switchType == 1 && this.airConditioningData.functionType !=3 ? parseInt(this.airConditioningData.orderType):18,
				hardwareNo:this.airConditioningData.hardwareNo,
			});
		},
		methods: {
			// 返回按钮
			backPage(){
			  this.$parent.buttonClick('conditioningClose','');
			},
			switchFun(){
				if(this.switchStatus==0){
					this.$set(this, 'switchStatus',1);
				}else{
					this.$set(this, 'switchStatus',0);
				}
			},
			temperatureFun(index){
				this.$set(this, 'keystrokeIndex',index);
			},
			add() {
        if(this.infraredControllerForm.orderType<27){
          this.infraredControllerForm.orderType++
        }
			},
			subtract() {
        if(this.infraredControllerForm.orderType>18){
          this.infraredControllerForm.orderType--
        }
			},	  
			
			//设备开关
			async mangerControl() {
        let text = '';
        if(this.infraredControllerForm.switchType == 1){
          if(this.infraredControllerForm.functionType != 3){
            text = '1-' + this.infraredControllerForm.functionType + '-' + this.infraredControllerForm.orderType;
          }else {
            text = '1-3';
          }
        }else if(this.infraredControllerForm.switchType == 0){
          text = '0';
        }
        let switchData = {
          hardwareNo:this.infraredControllerForm.hardwareNo,
          command:text
        };
				const {
					data
				} = await iotAppHardwareOperatingHardware(switchData);
				if (data.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					this.backPage();
				}
			},
			
		},
	}
</script>

<style lang="stylus" scoped>
	.airConditioning{
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		display: flex;
		flex-direction: column;
		z-index: 10;
		background: rgba(0, 0, 0, 0.2);
		.null-box {
		  flex: 1;
		}
		/* 空调面板 */
		.panel{
			width: 710rpx;
			height: 530rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding:34rpx 30rpx 0rpx;
			box-sizing: border-box;
			position: absolute;
			top: 320rpx;
			left:20rpx;
			.panel-t{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>view:nth-of-type(1){
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 30rpx;
					margin-right: 16rpx;
				}
				.color-A{
					width: 100rpx;
					height: 50rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: center;
					background: #0183FA;
					border-radius: 25rpx;
				}
				.color-B{
					width: 100rpx;
					height: 50rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #666666;
					line-height: 50rpx;
					text-align: center;
					background: #E0E0E0;
					border-radius: 25rpx;
				}
			}
			.panel-m{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 48rpx;
				>view{
					width: 200rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1px solid #E0E0E0;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: center;
				}
				.color-C{
					width: 200rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1px solid #E0E0E0;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
					background: #0183FA;
				}
			}
			.panel-b{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 650rpx;
				height: 100rpx;
				border-radius: 10rpx;
				border: 1px solid #E0E0E0;
				margin-top: 40rpx;
				>view:nth-of-type(1){
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 100rpx;
					width: 120rpx;
					text-align: center;
				}
				>view:nth-of-type(2){
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 30rpx;
				}
				>view:nth-of-type(3){
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 100rpx;
					width: 120rpx;
					text-align: center;
				}
			}
			.panel-button{
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;
				background: #0183fa;
				border-radius: 10rpx;
				color: #fff;
				margin-top: 40rpx;
			}
		}
		
		
	}
</style>