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>