androidCN/pages/Workorder/AccessControl/AccessControl.vue

<template>
	<view class="menjin">
		<view class="mjym" v-for="(item,index) in mjlist" :key="item.id">
			<view class="top">
				<view class="status" v-if="item.status==1">在线</view>
				<view class="status s2" v-if="item.status==0">离线</view>
				<h3>{{item.deviceName}}</h3>
				<view class="subtit">{{item.deviceSerial}}</view>
				<view class="subtit">{{item.parentCategory}}</view>
			</view>

			<view class="mjkg">
				<view class="anniu">
					<u-button type="primary" :plain="true" text="开启" @click="buttons(item,'open')"></u-button>
				</view>
				<view class="anniu">
					<u-button type="primary" :plain="true" text="关闭" @click="buttons(item,'close')"></u-button>
				</view>
				<view class="anniu">
					<u-button type="primary" :plain="true" text="常开" @click="buttons(item,'alwaysOpen')"></u-button>
				</view>
				<view class="anniu">
					<u-button type="primary" :plain="true" text="常关" @click="buttons(item,'alwaysClose')"></u-button>
				</view>
			</view>
		</view>


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

<script>
	export default {
		data() {
			return {
				mjlist: [],
			}
		},
		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 {
								this.mjlist = res.data.data;
							}
						} else {
							this.$refs.uNotify.error(res.data.msg)
						}
					})
			},

			buttons(e, fs) {
				let postdata = {
					cmd: fs,
					deviceSerial: e.deviceSerial
				}
				this.$api.post('/access/operate', postdata)
					.then(res => {
						if (res.data.code == 0) {
							this.$refs.uNotify.success('成功')
						} 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 lang="scss" scoped>
	.menjin{padding-top: 24rpx;}
	.mjym {
		margin: 0 32rpx 24rpx;
		padding: 24rpx 0 0;
		background-color: #fff;
		
		.top {
			border-bottom: 1px solid #eee;
			padding: 0 32rpx 24rpx;
			position: relative;

			h3 {
				font-size: 32rpx;
				margin-bottom: 24rpx;
			}

			.subtit {
				color: #9DA0AC;
				font-size: 28rpx;
			}
			.status {
				position: absolute;
				width: 96rpx;
				height: 48rpx;
				border-radius: 0 8rpx 0 20rpx;
				right: 0;
				line-height: 48rpx;
				text-align: center;
				top: -24rpx;
				z-index: 1;
				font-size: 22rpx;
				background-color: #30D3A2;
				color: #fff;
			
				&.s2 {
					background-color: #C8C8C8;
				}
			}
			
		}
	}
	.mjkg {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20rpx 32rpx;
		.anniu {
			margin-left: 24rpx;
		}
	}
</style>