admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(数字工地)：完成人脸闸机布局

Browse Source
This commit is contained in:
Jack 2022-08-04 17:53:25 +08:00
parent 78c34ed20d
commit 9dd38f2ed4
2 changed files with 78 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftBottom.vue
View File

@ -32,6 +32,7 @@ export default {
<style lang="less" scoped>
.list {
padding: 0 10px;
color: #fff;
.list-head {
margin-bottom: 6px;
padding-left: 16px;
@ -44,13 +45,13 @@ export default {
display: flex;
align-items: center;
&.online {
background-image: linear-gradient(90deg, rgba(24, 52, 73, 1), rgba(24, 52, 73, 0.2));
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(44, 35, 56, 1), rgba(44, 35, 56, 0.2));
background-image: linear-gradient(90deg, rgba(67, 42, 63, 1), rgba(67, 42, 63, 0.2));
.status {
background-color: #ff6c7f;
}

77
src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightBottom.vue
View File

@ -1,7 +1,19 @@
<template>
<Card :title="title">
<DeviceCard :leftCount="{ value: 22, label: '在线设备' }" :rightCount="{ value: 65, label: '离线设备' }">
hello
<div class="list">
<div class="list-head">
<div class="device">设备名称</div>
<div class="enter">进场人数</div>
<div class="outer">出场人数</div>
</div>
<div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
<div class="status">在线</div>
<div class="label">1号塔吊</div>
<div class="enter">66</div>
<div class="outer">99</div>
</div>
</div>
</DeviceCard>
</Card>
</template>
@ -23,4 +35,65 @@ export default {
}
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.list {
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;
}
}
.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>