大屏(首页概览)：解耦人员概况组件
This commit is contained in:
Jack
parent
984ec5fbb7
commit
ac5e9b12a3
@ -1,15 +1,147 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="personOverview">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
props: ['statisticsCount']
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<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>
|
</style>
|
||||||
@ -3,109 +3,11 @@
|
|||||||
<div class="fullHeight aside">
|
<div class="fullHeight aside">
|
||||||
<div class="blockBox">
|
<div class="blockBox">
|
||||||
<!-- 项目信息 -->
|
<!-- 项目信息 -->
|
||||||
<ProjectInfo :projectData="projectData"></ProjectInfo>
|
<ProjectInfo :projectData="projectData" />
|
||||||
</div>
|
</div>
|
||||||
<div class="blockBox">
|
<div class="blockBox">
|
||||||
<!-- 人员概况 -->
|
<!-- 人员概况 -->
|
||||||
<div class="blockTitle">
|
<PersonOverview :statisticsCount="statisticsCount" />
|
||||||
{{ $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>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="blockBox">
|
<div class="blockBox">
|
||||||
<!-- 智能设备 -->
|
<!-- 智能设备 -->
|
||||||
@ -663,9 +565,10 @@ import {
|
|||||||
queryBySnData
|
queryBySnData
|
||||||
} from '@/assets/js/api/projectSummary.js'
|
} from '@/assets/js/api/projectSummary.js'
|
||||||
import ProjectInfo from './homePage/projectInfo'
|
import ProjectInfo from './homePage/projectInfo'
|
||||||
|
import PersonOverview from './homePage/personOverview'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { devNumChart, airQulityChart, ProjectInfo },
|
components: { devNumChart, airQulityChart, ProjectInfo, PersonOverview },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
COMPANY: '',
|
COMPANY: '',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user