|
@@ -0,0 +1,190 @@
|
|
|
|
+<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
|
|
|
|
+ :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
|
|
|
|
+ :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>
|