v3-lab-xcx/pages_manage/laboratory/iotControl.vue

<template>
	<view class="iotControl">
		<view class="device-type">
			<view v-for="(item,index) in deviceType" @click="deviceTypeFun(item)">
				<img :src="item.img">
				<view>{{item.name}}</view>
				<img src="@/images/basicsModules/icon_wdwg_gd.png">
			</view>
		</view>
		<!-- 传感器监测 -->
		<view class="small-title">
			<view></view>
			<view>传感器监测</view>
		</view>
		<view class="sensor">
			<view v-for="(item,index) in sensorData">
				<img :src="item.img">
				<veiw>{{item.name}}</veiw>
			</view>
		</view>
		<!-- 智能控制 -->
		<view class="small-title">
			<view></view>
			<view>智能控制</view>
		</view>
		<view class="intelligent-control">
			<view  v-for="(item,index) in labHardwareVOList" :key="index">
			  <view class="for-button-p">{{item.hardwareName}}
				<text v-if="item.state.code=='3'&& item.hardwareTypeEnum.hardwareTypeCode==2">({{item.dictLabel}})</text>
			  </view>
			  <img v-if="item.state.code=='3' && item.pcType != 1" src="@/images/basicsModules/icon_10.png" @click="buttonClick('switch',item,'close')">
			  <img v-if="item.state.code=='4' && item.pcType != 1" src="@/images/basicsModules/icon_11.png" @click="buttonClick('switch',item,'open')">
			  <view class="for-button-p" v-if="item.state.code=='0' && item.pcType != 1">离线</view>
			  <view class="for-button-p" v-if="item.state.code=='2' && item.pcType != 1" style="color:#0183FA;">在线</view>
			  <view v-if="item.pcType == 1" class="pcType-button" @click="buttonClick('operate',item,'')">操作</view>
			</view>
		</view>
		<!-- 智能终端 -->
		<view class="small-title">
			<view></view>
			<view>智能终端</view>
		</view>
		<view class="intelligent-control">
			<view  v-for="(item,index) in terminalData" :key="index">
			  <view class="for-button-p">{{item.name}}</view>
			  <view class="for-button-p" v-if="item.pcType == 1">离线</view>
			  <view class="for-button-p" v-if="item.pcType != 1" style="color:#0183FA;">在线</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {} from '@/api/basicsModules/index.js'
	export default {
		name: "iotControl",
		props: {
			subjectData: {},
		},
		data() {
			return {
				deviceType:[
					{
						id:1,
						name:'视频监控',
						img: require('@/images/basicsModules/icon_xq_spjk.png'),
					},
					{
						id:2,
						name:'语音广播',
						img: require('@/images/basicsModules/icon_sskz_xz.png'),
					},
					{
						id:3,
						name:'空调1',
						img: require('@/images/basicsModules/icon_xq_kt.png'),
					},
					{
						id:4,
						name:'空调2',
						img: require('@/images/basicsModules/icon_xq_kt.png'),
					},
				],
				sensorData:[
					{
						name:'温度:  36°',
						img: require('@/images/basicsModules/icon_yw_yc.png'),
					},
					{
						name:'湿度:  60%',
						img: require('@/images/basicsModules/icon_yw_yc.png'),
					},
					{
						name:'烟感1号:  0',
						img: require('@/images/basicsModules/icon_yw_yc.png'),
					},
					{
						name:'烟感2号:  1',
						img: require('@/images/basicsModules/icon_yw_yc.png'),
					},
					{
						name:'一氧化碳:  0ppm',
						img: require('@/images/basicsModules/icon_yw_yc.png'),
					},
					
				],
				labHardwareVOList:[
					{
						hardwareName:'高温设备1',
						hardwareTypeEnum:{
							enumName:'',	
						},
						state:{
							code:3,
						},
						pcType:2,
					}
				],
				terminalData:[
					{
						name:'智能管控一体机',
						pcType:1,
					}
				],
			}
		},
		created() {
			
		},
		mounted() {
			console.log(this.subjectData)
		},
		methods: {
			//物联控制设备
			deviceTypeFun(item){
				if(item.id==1){
					
				}else if(item.id==2){
					//语音广播弹窗开启
					this.$parent.buttonClick('broadcastOpen','');
				}else if(item.id==3){
					//空调弹窗开启
					this.$parent.buttonClick('conditioningOpen','');
				}
			},
			buttonClick(type,row,status){
			    let self = this;
				if(type == 'switch'){
				  //开关			
				  let text = '';
				  if(status == 'close'){
				  	text = '关闭';
				  }else if(status == 'open'){
				  	text = '开启';
				  }
				  uni.showModal({
						content: '确认要'+text+'吗?',
						cancelColor:"#999",
						confirmColor:"#0183FA",
						success: function (res) {
						  if (res.confirm) {
							self.mangerControl(row,status);
							console.log('用户点击确定');
						  } else if (res.cancel) {
							console.log('用户点击取消');
						  }
						}
				  });  
				}else if(type=='operate'){
					//操作
					uni.showModal({
					  content: '确认要操作该设备吗?',
					  cancelColor:"#999",
					  confirmColor:"#0183FA",
					  success: function (res) {
						if (res.confirm) {
						  self.controlSwitch(item.id);
						  console.log('用户点击确定');
						} else if (res.cancel) {
						  console.log('用户点击取消');
						}
					  }
					});
				}
			  
			},
			//设备开关
			async mangerControl(item,status){
			  let obj = {
				id:item.id,
				command:status,
			  };
			  const {data} = await mangerControl(obj);
			  if(data.code == 200){
				if(command == 'open'){
				  item.type = 3;
				}else if(command == 'close'){
				  item.type = 4;
				}
				uni.showToast({
				  title: '操作成功',
				  icon:"none",
				  mask:true,
				  duration: 2000
				});
			  }
			},
			async controlSwitch(id){
				const {data} = await controlSwitch({id:id});
				if(data.code == 200){
					uni.showToast({
					  title: '操作成功',
					  icon:"none",
					  mask:true,
					  duration: 2000
					});
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.iotControl {
		width: 750rpx;
		.device-type{
			background: #fff;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			>view{
				width: 356rpx;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-right: 1px dashed #E0E0E0;
				border-bottom: 1px dashed #E0E0E0;
				padding-left: 10rpx;
				box-sizing: border-box;
				>img:nth-of-type(1){
					width: 42rpx;
					height: 42rpx;
					margin-right: 12rpx;
				}
				>view{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
					line-height: 80rpx;
					width: 244rpx;
				}
				>img:nth-of-type(2){
					width: 24rpx;
					height: 22rpx;
				}
			}
			>view:nth-child(2n){
				border-right: none;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
			>view:nth-last-child(1){
				border-bottom: none;
			}
			>view:nth-last-child(2){
				border-bottom: none;
			}
		}
		.small-title{
			height: 80rpx;
			border-bottom: 1rpx solid #E0E0E0;
			background: #FFFFFF;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			>view:nth-of-type(1){
				width: 4rpx;
				height: 34rpx;
				background: #0D97EB;
				margin: 0rpx 24rpx 0 20rpx;
			}
			>view:nth-of-type(2){
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 80rpx;
			}
			
		}
		.sensor{
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			background: #fff;
			padding: 12rpx 20rpx 30rpx;
			box-sizing: border-box;
			>view{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 66rpx;
				width: 355rpx;
				>img{
					width: 42rpx;
					height: 42rpx;
					margin-right: 20rpx;
				}
				>view{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					line-height: 30rpx;
				}
			}
		}
		.intelligent-control{
			background: #fff;
			padding:0 20rpx;
			box-sizing: border-box;
			>view{
				display flex
				border-bottom:1rpx solid #e0e0e0;
				.for-button-p{
				  flex:1;
				  line-height:90rpx;
				  color:#333333;
				  font-size:28rpx;
				  >text{
					  font-size: 28rpx;
					  color: #0183FA;
				  }
				}
				>img{
				  height:50rpx;
				  width:100rpx;
				  margin:20rpx 0 20rpx 0;
				}
				view:nth-child(2){
				  text-align right
				  color:#999;
				}
				.pcType-button{
				  width:120rpx;
				  line-height:42rpx;
				  border:4rpx solid #0183FA;
				  border-radius:30rpx;
				  color: #0183FA !important;
				  font-size: 24rpx;
				  text-align center !important;
				  margin:20rpx 0 20rpx 0;
				}
			}
			>view:nth-last-child(1){
				border-bottom:none;
			}	
		}
	}
</style>