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">
            <van-switch
                :model-value="deviceDetal.outDoor"
                @update:model-value="outDoorChg"
                size="22"
                active-value="1"
                inactive-value="0"
            />
          </div>
          <span class="info3 o-pl-50">{{$t("device.status")}}: </span>
          <span class="info3 o-pl-10">{{ deviceDetal.outDoor != 1 ? $t("device.close") : $t("device.open") }}</span>
        </template>
      </van-field>

      <van-field
          colon
          readonly
          :label="`${$t('device.inDoor')}`"
          label-width="40px"
      >
        <template #input>
          <div class="l-flex-RC">
            <van-switch
                :model-value="deviceDetal.inDoor"
                @update:model-value="inDoorChg"
                size="22"
                active-value="1"
                inactive-value="0"
            />
          </div>
          <span class="info3 o-pl-50">{{$t("device.status")}}: </span>
          <span class="info3 o-pl-10">{{ deviceDetal.inDoor != 1 ? $t("device.close") : $t("device.open") }}</span>
        </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";
import { styleUrl } from "../../common/js/utils";

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

    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('deviceOper');
      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";
</style>