门禁系统提交

longyvfengyun

2023-09-05 d6f23984d45ddab08a7f32fef182c0116ca9bf79

门禁系统提交

 src/views/accessControl/accessControl.vue

@@ -2,8 +2,37 @@
import FlexBox from "@/components/FlexBox.vue";
import doorInfoModule from "@/views/accessControl/js/doorInfoModule";
import HdwLight from "@/components/HdwLight.vue";
const {doorInfos} = doorInfoModule();
import {ElMessageBox} from "element-plus";
const {doorInfos, openDoor, closeDoor} = doorInfoModule();
const openDoorConfirm = async (info)=>{
    ElMessageBox.confirm(
        "确认开启门禁",
        "系统提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
            draggable: true,
        }
    ).then(()=>{
        openDoor(info);
    }).catch(()=>{});
}

const closeDoorConfirm = async (info)=>{
    ElMessageBox.confirm(
        "确认关闭门禁",
        "系统提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
            draggable: true,
        }
    ).then(()=>{
        closeDoor(info);
    }).catch(()=>{});
}
</script>

<template>
@@ -15,25 +44,16 @@
                        <el-col :span="4" v-for="item in doorInfos" :key="item">
                            <div class="access-control-item">
                                <div class="access-control-tool">
                                    <div class="access-control-tool-item" v-if="item.status === 0">
                                        <el-button type="primary" size="large">开门</el-button>
                                    </div>
                                    <div class="access-control-tool-item" v-else-if="item.status === 1">
                                        <el-button type="warning" size="large">关门</el-button>
                                    </div>
                                    <div class="access-control-tool-item" v-else>
                                        <hdw-light :type="1"></hdw-light>
                                    <div class="access-control-tool-item">
                                        <el-button type="warning" size="large" @click="openDoorConfirm(item)">开门</el-button>
                                    </div>
                                </div>
                                <flex-box>
                                    <div class="access-control-img">
                                        <img src="./images/menJin.png" alt="">
                                    </div>
<!--                                    <div class="access-control-text update-time">-->
<!--                                        2023-06-29 00:00:00-->
<!--                                    </div>-->
                                    <div class="access-control-text home-number">{{ item.name }}</div>
                                    <div class="access-control-text state">门锁状态：{{ item.statusText }}</div>
                                    <div class="access-control-text state">门锁状态：<span :class="{'error-text': item.status !==0}">{{ item.statusText }}</span></div>
                                </flex-box>
                            </div>
                        </el-col>
@@ -93,6 +113,9 @@
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 8px;
        .error-text {
            color: #FF0000;
        }
    }
}
</style>

 src/views/accessControl/js/api.js

New file
@@ -0,0 +1,18 @@
import axios from "@/assets/js/axios";

/**
 * 读取参数
 * @param info 设备信息
 * @return {Promise<axios.AxiosResponse<any>> | *}
 */
export const changeDoorState = (info, dwstaic)=>{
  return axios({
    method: "POST",
    url: "/CarCamera/controllCarCamera",
    data: {
      ...info,
      lgatewayIndex: -1,
      dwstaic
    }
  });
}

 src/views/accessControl/js/doorInfoModule.js

@@ -2,6 +2,8 @@
import {onMounted, reactive} from "vue";
import door from "@/assets/js/const/door";
import getLabelByKey from "@/assets/js/tools/getLabelByKey";
import {changeDoorState} from "@/views/accessControl/js/api";
import {ElLoading, ElMessage} from "element-plus";
const lockStatusList = door.lockStatus;
const doorInfoModule = ()=>{
  const {
@@ -48,9 +50,72 @@
    doorInfos.map(item=>{
      let doorInfo = data[item.ip];
      item.status = doorInfo.data2.lockStatus;
      //item.status = 2;
      item.statusText = getLabelByKey(doorInfo.data2.lockStatus, lockStatusList, "未知");
    });
  }
  /**
   * 开启门禁
   */
  const openDoor = async (info)=>{
    const loading = ElLoading.service({
      lock: false,
      text: '开启门禁中...',
      background: 'rgba(0, 0, 0, 0.3)',
    });
    try {
      const res = await changeDoorState(info, 1);
      loading.close();
      let rs = res.data;
      if(rs.code === 1 && rs.data) {
        ElMessage({
          showClose: true,
          message: '开启门禁成功',
          type: 'success',
        });
      }else {
        ElMessage({
          showClose: true,
          message: '开启门禁失败',
          type: 'error',
        });
      }
    }catch (error){
      console.log(error);
      loading.close();
    }

  }

  /**
   * 关闭门禁
   */
  const closeDoor = async (info)=>{
    const loading = ElLoading.service({
      lock: false,
      text: '关闭门禁中...',
      background: 'rgba(0, 0, 0, 0.3)',
    });
    try {
      const res = await changeDoorState(info, 0);
      loading.close();
      let rs = res.data;
      if(rs.code === 1 && rs.data) {
        ElMessage({
          showClose: true,
          message: '关闭成功',
          type: 'success',
        });
      }else {
        ElMessage({
          showClose: true,
          message: '关闭失败',
          type: 'error',
        });
      }
    }catch (error){
      console.log(error);
      loading.close();
    }
  }

  onMounted(()=>{
@@ -58,7 +123,11 @@
    SOCKET.value.addEventListener("message", handleMessage, false);
  });

  return {doorInfos};
  return {
    doorInfos,
    openDoor,
    closeDoor
  };
}

export default doorInfoModule;

 src/views/home/js/homeInfoModule.js

@@ -54,7 +54,7 @@
      pos: {
        visible: true,
        placement: "top",
        x: 916,
        x: 900,
        y: 690
      },
      info: {
@@ -72,7 +72,7 @@
      pos: {
        visible: true,
        placement: "left",
        x: 1212,
        x: 1230,
        y: 690
      },
      info: {
@@ -270,7 +270,7 @@
      pos: {
        visible: true,
        placement: "left",
        x: 1200,
        x: 1240,
        y: 490
      },
      info: {