150 lines
4.2 KiB
Vue
150 lines
4.2 KiB
Vue
<template>
|
|
<div class="personOverview">
|
|
<div class="title">
|
|
{{ $t('message.companyDiagram.peopleOverview') }}
|
|
</div>
|
|
<div class="content">
|
|
<div class="personCount">
|
|
<div class="countItem">
|
|
<img src="@//assets/images/dataBoard/numImg_purple.png" />
|
|
<div class="info">
|
|
<div class="num">
|
|
{{ statisticsCount.presencecount.totalPerson }}
|
|
</div>
|
|
<!-- 实名制人数 -->
|
|
<div class="label">
|
|
{{ $t('message.companyDiagram.registerPeopleNum') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="countItem">
|
|
<img src="@//assets/images/dataBoard/numImg_orange.png" />
|
|
<div class="info">
|
|
<div class="num">
|
|
{{ statisticsCount.presencecount.lwPersonTotal }}
|
|
</div>
|
|
<!-- 在场人数 -->
|
|
<div class="label">
|
|
{{ $t('message.companyDiagram.onlineLabourPeople') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="manager">
|
|
<div class="manager-title">
|
|
<!-- 管理人员 -->{{ $t('message.companyDiagram.onlineManagePeople') }}
|
|
</div>
|
|
<div class="manager-persons">
|
|
<div class="person">
|
|
<div class="person-info">
|
|
<div class="person-rate">
|
|
<span>{{ statisticsCount.presencecount.jfGlPersonTotal }}</span
|
|
>/{{ statisticsCount.workercount.jfGlPersonTotal }}
|
|
</div>
|
|
<div class="person-label">
|
|
<!-- 监理人员 -->{{ $t('message.dataBoard.PartyAPersonnel') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="person">
|
|
<div class="person-info">
|
|
<div class="person-rate">
|
|
<span>{{ statisticsCount.presencecount.jlGlPersonTotal }}</span
|
|
>/{{ statisticsCount.workercount.jlGlPersonTotal }}
|
|
</div>
|
|
<div class="person-label">
|
|
<!-- 甲方人员 -->{{ $t('message.dataBoard.supervisoryStaff') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="person">
|
|
<div class="person-info">
|
|
<div class="person-rate">
|
|
<span>{{ statisticsCount.presencecount.yfGlPersonTotal }}</span
|
|
>/{{ statisticsCount.workercount.yfGlPersonTotal }}
|
|
</div>
|
|
<div class="person-label">
|
|
<!-- 乙方人员 -->{{ $t('message.dataBoard.PartyBPersonnel') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['statisticsCount']
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.personOverview {
|
|
position: relative;
|
|
margin-bottom: 25px;
|
|
height: calc(100% - 2px);
|
|
width: 100%;
|
|
.title {
|
|
position: relative;
|
|
top: -10px;
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #6ce9f0;
|
|
}
|
|
.content {
|
|
position: relative;
|
|
padding: 10px 20px;
|
|
height: calc(100% - 20px - 24px);
|
|
z-index: 2;
|
|
.personCount {
|
|
display: flex;
|
|
.countItem {
|
|
flex: 1;
|
|
height: 35%;
|
|
display: flex;
|
|
img {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
.manager {
|
|
.manager-title {
|
|
margin-top: 6px;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
&::before {
|
|
content: '';
|
|
margin-right: 6px;
|
|
width: 5px;
|
|
height: 5px;
|
|
background-color: #6ce9f0;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.manager-persons {
|
|
display: flex;
|
|
margin-left: 20px;
|
|
.person {
|
|
position: relative;
|
|
width: 86px;
|
|
height: 86px;
|
|
margin-right: 25px;
|
|
background: url(~@/assets/images/dataBoard/fc857081d1aded7077e783a698bd1d6.png);
|
|
&:nth-child(2) {
|
|
background: url(~@/assets/images/dataBoard/9f4e0bd5a0baebf3e96d512b208527b.png);
|
|
}
|
|
.person-info {
|
|
transform: translate(15px);
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |