158 lines
3.4 KiB
Vue
158 lines
3.4 KiB
Vue
<template>
|
|
<Card :title="title">
|
|
<DeviceCard
|
|
:leftCount="{ value: offlineNum, label: '在线设备', img: 'online' }"
|
|
:rightCount="{ value: onlineNum, label: '离线设备', img: 'warring2' }"
|
|
>
|
|
<div class="list">
|
|
<div class="list-head">
|
|
<div class="device">设备名称</div>
|
|
<div class="enter">进场人数</div>
|
|
<div class="outer">出场人数</div>
|
|
</div>
|
|
<div class="listBox">
|
|
<div
|
|
class="list-item"
|
|
:class="item.deviceState == 1 ? 'offline' : 'online'"
|
|
v-for="(item, index) in ufaceList.devList"
|
|
:key="index"
|
|
>
|
|
<div class="status">
|
|
{{ item.deviceState == 1 ? '在线' : '离线' }}
|
|
</div>
|
|
<div class="label">{{ item.devName }}</div>
|
|
<div class="enter">{{ item.isEnter }}</div>
|
|
<div class="outer">{{ item.outTotalNum }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DeviceCard>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSelectuFaceDevList } from '@/assets/js/api/dataBoard'
|
|
import Card from '../components/Card.vue'
|
|
import DeviceCard from './components/DeviceCard.vue'
|
|
export default {
|
|
components: { Card, DeviceCard },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
ufaceList: {
|
|
type: Object,
|
|
default: []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
offlineNum: 0,
|
|
onlineNum: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
// console.log('--------------', this.ufaceList)
|
|
},
|
|
methods: {
|
|
getData() {
|
|
let data = {
|
|
projectSn: this.$store.state.projectSn
|
|
}
|
|
// 获取塔吊数量
|
|
getSelectuFaceDevList(data).then((res) => {
|
|
if (res.code === 200) {
|
|
console.log('获取人脸闸机数量', res)
|
|
// let { result } = res
|
|
this.offlineNum = res.result.offlineNum
|
|
this.onlineNum = res.result.onlineNum
|
|
// console.log(result)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
::-webkit-scrollbar {
|
|
width: 3px;
|
|
color: #636364;
|
|
}
|
|
.list {
|
|
height: 100%;
|
|
padding: 0 10px;
|
|
color: #fff;
|
|
.list-head {
|
|
margin-bottom: 6px;
|
|
padding: 0 16px;
|
|
font-size: 12px;
|
|
display: flex;
|
|
.device {
|
|
margin-left: 56px;
|
|
margin-right: auto;
|
|
}
|
|
.enter {
|
|
width: 70px;
|
|
}
|
|
.outer {
|
|
width: 70px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.listBox {
|
|
height: calc(100% - 15px);
|
|
overflow: auto;
|
|
.list-item {
|
|
margin-bottom: 6px;
|
|
padding: 0 16px;
|
|
height: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
&.online {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
rgba(23, 54, 74, 1),
|
|
rgba(23, 54, 74, 0.2)
|
|
);
|
|
.status {
|
|
background-color: #3cabfd;
|
|
}
|
|
}
|
|
&.offline {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
rgba(67, 42, 63, 1),
|
|
rgba(67, 42, 63, 0.2)
|
|
);
|
|
.status {
|
|
background-color: #ff6c7f;
|
|
}
|
|
}
|
|
.status {
|
|
margin-right: 20px;
|
|
width: 36px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
border-radius: 9px;
|
|
}
|
|
.label {
|
|
margin-right: auto;
|
|
font-size: 14px;
|
|
}
|
|
.enter {
|
|
width: 70px;
|
|
}
|
|
.outer {
|
|
width: 70px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|