wit-uniapp/pages/Workorder/AccessControl/AccessControl.vue

<template>
	<view class="menjin" >
		<view class="mjym"  v-for="(item,index) in mjlist" :key="item.id">
<view class="mjzt1" v-if="item.status==1">在线</view>
			<view class="mjzt2"  v-if="item.status==0">离线</view>

<h3 class="mjname">{{item.deviceName}}</h3>
<view class="mjlx">{{item.deviceSerial}}</view>
			<view class="mjsh">{{item.parentCategory}}</view>

			<view class="mjkg">
				<view class="sfkq">
					<view class="sfkq1">是否开启</view>
					<view class="sfkq2"><u-switch activeColor="#2979FF" asyncChange @change="asyncChange1(item)"
												  inactiveColor="rgb(230, 230, 230)" v-model="item.value1" size="40" ></u-switch></view>
				</view>
				<view class="sfkq">
					<view class="sfkq1">是否常开</view>
					<view class="sfkq2"><u-switch activeColor="#2979FF" asyncChange @change="asyncChange2(item)"
												  inactiveColor="rgb(230, 230, 230)" v-model="item.value2" size="40" ></u-switch></view>
				</view>
			</view>
		</view>


		<u-notify ref="uNotify" message="" ></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mjlist:[],
			//	postdata:{},
			}
		},
		onLoad(){
			this.getalldata()
		},

		methods: {
			getalldata(){
				this.$api.get('/access/page',{})
						.then(res=>{

							if(res.data.code==0){
								if(res.data.data.length==0){
									this.mjlist=[]
								}else{
									for(let i=0;i<res.data.data.length;i++){
										res.data.data[i].value1=false;
										res.data.data[i].value2=false;
									}

									this.mjlist=res.data.data;
								}
								//console.log('111111111111111111',this.mjlist)
							}else{
								this.$refs.uNotify.error(res.data.msg)
							}
						})
			},
			operate(e){
				this.$api.post('/access/operate',e)
						.then(res=>{
							if(res.data.code==0){
								this.$refs.uNotify.success('成功')
							}else{
								this.$refs.uNotify.error(res.data.msg)
							}
						})
			},

			asyncChange1(e,) {
				uni.showModal({
					content: e.value1 ? '确定要关闭门禁吗' : '确定要开启门禁吗',
					success: (res) => {
						if (res.confirm) {
							e.value1=!e.value1;

if(e.value1==true){
	let postdata={
		cmd:'open',
		deviceSerial:e.deviceSerial
	}
	this.operate(postdata)
}else{
	let postdata={
		cmd:'close',
		deviceSerial:e.deviceSerial
	}
	this.operate(postdata)
}


						}
					}
				})

			},
			asyncChange2(e,) {
				uni.showModal({
					content: e.value2 ? '确定要关闭常开吗' : '确定要常开吗',
					success: (res) => {
						if (res.confirm) {
							e.value2=!e.value2;

							if(e.value2==true){
								let postdata={
									cmd:'alwaysOpen',
									deviceSerial:e.deviceSerial
								}
								this.operate(postdata)
							}else{
								let postdata={
									cmd:'alwaysClose',
									deviceSerial:e.deviceSerial
								}
								this.operate(postdata)
							}
						}
					}
				})

			},

		}
	}
</script>

<style>
.menjin{

}
.sfkq1{
	padding-right: 25rpx;
}
.sfkq{
	width: 345rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mjkg{
	display: flex;
	align-items: center;
margin-top: 80rpx;
}
.mjsh{
	padding: 0rpx 0 0rpx 30rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #697081;
}
.mjlx{
	font-size: 30rpx;
	padding: 0rpx 0 20rpx 30rpx;
	font-weight: 600;
	color: #0c1935;
}
.mjname{
	padding: 50rpx 0 50rpx 30rpx;
}
	.mjym{
		width: 690rpx;
		height: 400rpx;
		background: #fff;
		margin: 20rpx auto;
		border-radius: 10px;
		position: relative;
	}
.mjzt1{
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	background: #30D3A2;
	color: #fff;
	width: 100rpx;
	height: 50rpx;
	border-radius: 10px;
	line-height: 50rpx;
	text-align: center;
}
.mjzt2{
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	background:rgb(105, 112, 129);
	color: #fff;
	width: 100rpx;
	height: 50rpx;
	border-radius: 10px;
	line-height: 50rpx;
	text-align: center;
}

</style>