大屏(首页概览)：解耦人员概况组件
This commit is contained in:
Jack
parent
984ec5fbb7
commit
ac5e9b12a3
@ -1,15 +1,147 @@
|
||||
<template>
|
||||
<div class="personOverview">
|
||||
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-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
margin-right: 6px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #6ce9f0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.manager-persons {
|
||||
display: flex;
|
||||
.person {
|
||||
position: relative;
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
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>
|
||||
@ -3,109 +3,11 @@
|
||||
<div class="fullHeight aside">
|
||||
<div class="blockBox">
|
||||
<!-- 项目信息 -->
|
||||
<ProjectInfo :projectData="projectData"></ProjectInfo>
|
||||
<ProjectInfo :projectData="projectData" />
|
||||
</div>
|
||||
<div class="blockBox">
|
||||
<!-- 人员概况 -->
|
||||
<div class="blockTitle">
|
||||
{{ $t('message.companyDiagram.peopleOverview') }}
|
||||
</div>
|
||||
<div class="blockContent dataBoxContent">
|
||||
<div class="dataBox">
|
||||
<img
|
||||
src="@//assets/images/dataBoard/numImg_purple.png"
|
||||
alt=""
|
||||
srcset=""
|
||||
/>
|
||||
<div>
|
||||
<p class="num primaryText5">
|
||||
{{ statisticsCount.workercount.totalPerson }}
|
||||
</p>
|
||||
<!-- 实名制人数 -->
|
||||
<p>{{ $t('message.companyDiagram.registerPeopleNum') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dataBox">
|
||||
<img
|
||||
src="@//assets/images/dataBoard/numImg_orange.png"
|
||||
alt=""
|
||||
srcset=""
|
||||
/>
|
||||
<div>
|
||||
<p class="num primaryText4">
|
||||
{{ statisticsCount.presencecount.lwPersonTotal }}
|
||||
</p>
|
||||
<!-- 在场人数 -->
|
||||
<p>{{ $t('message.companyDiagram.onlineLabourPeople') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="managePeople">
|
||||
<div class="managePeopleTitle">
|
||||
<!-- 管理人员 -->
|
||||
<p>{{ $t('message.companyDiagram.onlineManagePeople') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="management">
|
||||
<div class="management_item">
|
||||
<div class="item_content">
|
||||
<span style="color: #5ce2f6">{{
|
||||
statisticsCount.presencecount.jfGlPersonTotal
|
||||
}}</span>
|
||||
<span>/</span>
|
||||
<span>{{ statisticsCount.workercount.jfGlPersonTotal }}</span>
|
||||
<p>
|
||||
<!-- 监理人员 -->
|
||||
{{ $t('message.dataBoard.PartyAPersonnel') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="itemImgBox">
|
||||
<img
|
||||
src="@/assets/images/dataBoard/fc857081d1aded7077e783a698bd1d6.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="management_item">
|
||||
<div class="item_content">
|
||||
<span style="color: #5ce2f6">{{
|
||||
statisticsCount.presencecount.jlGlPersonTotal
|
||||
}}</span>
|
||||
<span>/</span>
|
||||
<span>{{ statisticsCount.workercount.jlGlPersonTotal }}</span>
|
||||
<p>
|
||||
<!-- 甲方人员 -->
|
||||
{{ $t('message.dataBoard.supervisoryStaff') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="itemImgBox">
|
||||
<img
|
||||
src="@/assets/images/dataBoard/9f4e0bd5a0baebf3e96d512b208527b.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="management_item">
|
||||
<div class="item_content">
|
||||
<span style="color: #5ce2f6">{{
|
||||
statisticsCount.presencecount.yfGlPersonTotal
|
||||
}}</span>
|
||||
<span>/</span>
|
||||
<span>{{ statisticsCount.workercount.yfGlPersonTotal }}</span>
|
||||
<p>
|
||||
<!-- 乙方人员 -->
|
||||
{{ $t('message.dataBoard.PartyBPersonnel') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="itemImgBox">
|
||||
<img
|
||||
src="@/assets/images/dataBoard/cd1a4dbcd4a1b6300f41404ac5bd0ef.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PersonOverview :statisticsCount="statisticsCount" />
|
||||
</div>
|
||||
<div class="blockBox">
|
||||
<!-- 智能设备 -->
|
||||
@ -663,9 +565,10 @@ import {
|
||||
queryBySnData
|
||||
} from '@/assets/js/api/projectSummary.js'
|
||||
import ProjectInfo from './homePage/projectInfo'
|
||||
import PersonOverview from './homePage/personOverview'
|
||||
|
||||
export default {
|
||||
components: { devNumChart, airQulityChart, ProjectInfo },
|
||||
components: { devNumChart, airQulityChart, ProjectInfo, PersonOverview },
|
||||
data() {
|
||||
return {
|
||||
COMPANY: '',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user