shenze-sysMan/src/views/device/openDoor.vue

<template>
	<!-- 远程开门 -->
	<div class="page flex-col">
		<s-header :name="$t('device.remoteDoorOpening')" :noback="false"></s-header>
		<div class="box1">
			<div class="block2 flex-row justify-between">
				<div class="block3 flex-col"></div>
				<span class="info2">{{ $t('device.equipmentName') }}：{{ deviceDetal ? deviceDetal.name : '' }}</span>
			</div>
			<van-field
				colon
				readonly
				:label="`${$t('device.outDoor')}`"
				label-width="40px"
			>
				<template #input>
					<div class="l-flex-RC">
					<span>{{ deviceDetal.outDoor != 1 ? $t("device.close") : $t("device.open") }}</span>
					<van-switch
						disabled
						:model-value="deviceDetal.outDoor"
						@update:model-value="outDoorChg"
						size="24"
						active-value="1"
						inactive-value="0"
					/>
					</div>
				</template>
			</van-field>
			
			<van-field
				colon
				readonly
				:label="`${$t('device.inDoor')}`"
				label-width="40px"
			>
				<template #input>
					<div class="l-flex-RC">
					<span>{{ deviceDetal.inDoor != 1 ? $t("device.close") : $t("device.open") }}</span>
					<van-switch
						disabled
						:model-value="deviceDetal.inDoor"
						@update:model-value="inDoorChg"
						size="24"
						active-value="1"
						inactive-value="0"
					/>
					</div>
				</template>
			</van-field>
		</div>
	</div>
</template>

<script>
	import { onMounted, ref } from 'vue';
	import sHeader from "@/components/SimpleHeader";
	import { useRoute } from 'vue-router';
	import { getDeviceDetal, Api_openDoor } from '@/service/device'
	import { Toast, Dialog } from 'vant';
	import { useI18n } from "vue-i18n";

	export default {
		setup() {
			const route = useRoute();
			const deviceId = route.query.deviceId;
			const deviceDetal = ref({});
			const { t } = useI18n();

			// 初始化页面获取列表
			onMounted(async () => {
				getDeviceDetalFun();
				console.log(deviceDetal.value)
			});

			// 获取设备列表数据
			const getDeviceDetalFun = async () => {
				const {
					data
				} = await getDeviceDetal({
					id: deviceId
				});
				if (data.code === '00000') {
					// outDoor如果是null，默认是关闭
					if (data.data.outDoor == null) {
					  data.data.outDoor = "0";
					}
					// inDoor如果是null，默认是关闭
					if (data.data.inDoor == null) {
					  data.data.inDoor = "0";
					}
					deviceDetal.value = data.data;
				} else {
					Toast.fail(data.message);
				}
			}
			
			// 点击外门开关
			const outDoorChg = (outDoor) => {
				Dialog.confirm({
				    title: t('device.openRemind'),
				    message: t('device.openRemindOut'),
				}).then(() => {
				    Api_openDoor({
				    	equipmentId: deviceDetal.value.id,
				    	type: 0,
				    	status: outDoor,
				    }).then((res) => {
				    	Toast(res.data.message);
				    	setTimeout(() => {
				    		getDeviceDetalFun();
				    	}, 1000);
				    });
				});
			};
			
			// 点击内门开关
			const inDoorChg = (inDoor) => {
				Dialog.confirm({
				    title: t('device.openRemind'),
				    message: t('device.openRemindIn'),
				}).then(() => {
				    Api_openDoor({
				    	equipmentId: deviceDetal.value.id,
				    	type: 1,
				    	status: inDoor,
				    }).then((res) => {
				    	Toast(res.data.message);
				    	setTimeout(() => {
				    		getDeviceDetalFun();
				    	}, 1000);
				    });
				});
			};
			
			return {
				deviceDetal,
				outDoorChg,
				inDoorChg
			};
		},
		components: {
			sHeader
		},
	}
</script>

<style lang="less" scoped>
	@import "../../common/style/common";
	
	.page {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
		width: 100%;
		height: calc(100vh - 44px);
		overflow: hidden;
		
		
		.box1 {
			width: 100%;
			height: 237px;
			
			
			.block2 {
				width: 162px;
				height: 20px;
				margin: 18px 0 0 15px;
			
				.block3 {
					background-color: rgba(128, 150, 236, 1);
					border-radius: 2px;
					width: 4px;
					height: 12px;
					margin-top: 4px;
				}
			
				.info2 {
					width: 150px;
					height: 20px;
					overflow-wrap: break-word;
					color: rgba(64, 77, 116, 1);
					font-size: 14px;
					font-family: PingFangSC-Medium;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
					display: block;
				}
			}
		}
	}
</style>