门禁系统提交

longyvfengyun

2023-09-05 d6f23984d45ddab08a7f32fef182c0116ca9bf79

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<script setup>
import FlexBox from "@/components/FlexBox.vue";
import doorInfoModule from "@/views/accessControl/js/doorInfoModule";
import HdwLight from "@/components/HdwLight.vue";
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>
    <div class="flex-layout--container">
        <div class="flex-layout--body">
            <div class="flex-layout-absolute">
                <div class="access-control-list">
                    <el-row>
                        <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">
                                        <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 home-number">{{ item.name }}</div>
                                    <div class="access-control-text state">门锁状态：<span :class="{'error-text': item.status !==0}">{{ item.statusText }}</span></div>
                                </flex-box>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>
 
<style lang="less" scoped>
.access-control-list {
    height: 100%;
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    overflow-y: auto;
}
.access-control-item {
    position: relative;
    margin-left: 16px;
    margin-bottom: 16px;
    text-align: center;
    .access-control-tool {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 7;
        .access-control-tool-item {
            margin-bottom: 8px;
        }
    }
}
.access-control-img {
    display: inline-block;
    padding: 16px 0 8px;
    width: 22%;
    img {
        width: 100%;
        height: auto;
    }
}
.access-control-text {
    color: #ffffff;
    text-align: center;
    &.update-time {
        padding: 4px 0;
        font-size: 14px;
    }
 
    &.home-number {
        font-weight: bold;
        font-size: 18px;
    }
 
    &.state {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 8px;
        .error-text {
            color: #FF0000;
        }
    }
}
</style>