bigDataApp/pages/waterandfer/basestate.vue

<template>
	<view class="statebox">
		<view class="stateitem" v-for="item,index in olddatas" :key="index">
			<view class="stateitem_img">
				<image :src="$imageURL+'/bigdata_pc/sf/tubiao/'+typename[item.icon]+item.value+'.png'" mode="" class="img"></image>
			</view>
			<view class="stateitem_txt">
				{{item.txt}}
			</view>
			<view class="stateitem_btn">
				<u-switch v-model="item.valuenum" active-color="#6EF1BE" size="40" @change="change(item,$event)"></u-switch>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				olddatas: [],
				typename: [
					"-",
					"风机",
					"水泵",
					"增氧机",
					"湿帘",
					"遮阳",
					"开窗",
					"保温",
					"投食机",
				],
				device_id:""
			}
		},
		onLoad(option) {
			this.device_id = option.device_id
			this.history()
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			uni.navigateTo({
				url:"./waterhis?device_id="+this.device_id
			})
		},
		methods: {
			async history() { //设备列表
				// this.dataloadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=weather.weather.sf_status',
					data: {
						device_id: this.device_id
					}
				})
				// this.dataloadingtf = false
				// console.log(res)
				this.olddatas = []
				var dataarr = res.conf.relayName.split("/")
				var elearr = res.conf.relayNum.split("/")
				var numarr = JSON.stringify(res.dat.device_status).slice(2, -2)
				numarr = numarr.split(",")
				var numobj = {}
				for (var i = 0; i < numarr.length; i++) {
					numarr[i] = numarr[i].split(":")
					var index = numarr[i][0].indexOf("j") == -1 ? numarr[i][0].indexOf("e") : numarr[i][0].indexOf("j")
					numobj[numarr[i][0].slice(index, -1)] = Number(numarr[i][1])
				}
				// console.log(numobj)
				for (var i = 0; i < dataarr.length; i++) {
					if (dataarr[i] != "-") {
						var obj = {
							txt: dataarr[i],
							icon: elearr[i],
							value: numobj['j' + (i + 1)],
							valuenum: numobj['j' + (i + 1)]== 1 ? true : false,
							id:i
							// + elelist[elearr[i]].unit
						}
						this.olddatas.push(obj)
					}
				}
				// console.log(this.olddatas)
			},
			change(item,e){
				if(e){
					item.value = 1
				}else{
					item.value = 0
				}
				this.sf_control(item)
			},
			async sf_control(item){
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=weather.weather.sf_control',
					data: {
						device_id: this.device_id,
						relayNum: item.id,
						relayState: item.value,
					}
				})
				// console.log(res)
				if(res.controlState){
					uni.showToast({
						title: "操作成功",
						icon: "none"
					})
				}else{
					uni.showToast({
						title: "操作失败",
						icon: "none"
					})
					for(var i=0;i<this.olddatas.length;i++){
						if(this.olddatas[i].id == res.relayNum ){
							this.olddatas[i].valuenum = res.controlState
							this.olddatas[i].value = res.controlState ? 1 : 0
						}
					}
				}
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}
	.statebox{
		padding-top: 30rpx;
	}
	.stateitem {
		width: 90%;
		margin: 0 auto 30rpx;
		display: flex;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10rpx #bcb9ca;
		background-color: #fff;
		justify-content: space-between;
		border-radius: 20rpx;
		.stateitem_img{
			width: 60rpx;
			height: 60rpx;
			.img{
				width: 60rpx;
				height: 60rpx;
			}
		}
		.stateitem_txt{
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			width: 60%;
		}
		.stateitem_btn{
			padding-top:10rpx ;
		}
	}
</style>