<script setup>
|
import FlexBox from "@/components/FlexBox.vue";
|
import doorInfoModule from "@/views/accessControl/js/doorInfoModule";
|
import HdwLight from "@/components/HdwLight.vue";
|
const {doorInfos} = doorInfoModule();
|
|
</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" 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>
|
</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>
|
</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;
|
}
|
}
|
</style>
|
