门禁系统提交

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>