湖里大屏(劳务管理):在场统计页面更改

This commit is contained in:
骆乐 2022-08-16 13:48:24 +08:00
parent e15b186806
commit aa984fc814
2 changed files with 239 additions and 54 deletions

View File

@ -2,7 +2,7 @@
<div class="container"> <div class="container">
<div class="leftBox"> <div class="leftBox">
<div class="leftTop"> <div class="leftTop">
<leftTop title="人员类别" /> <leftTop title="在场统计" />
</div> </div>
<div class="leftCenter"> <div class="leftCenter">
<leftCenter title="人员概况"></leftCenter> <leftCenter title="人员概况"></leftCenter>

View File

@ -2,12 +2,11 @@
<!-- 人员类别 --> <!-- 人员类别 -->
<div class="containerBox"> <div class="containerBox">
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">{{ title }}</div>
<div class="personCount"> <!-- <div class="personCount">
<div class="countItem"> <div class="countItem">
<img src="@/assets/images/projectImg/labor_green.png" /> <img src="@/assets/images/projectImg/labor_green.png" />
<div class="info"> <div class="info">
<div class="num1">{{ 62590 }}</div> <div class="num1">{{ 62590 }}</div>
<!-- 实名制人数 -->
<div class="label label1">{{ '在场总人数' }}</div> <div class="label label1">{{ '在场总人数' }}</div>
</div> </div>
</div> </div>
@ -15,22 +14,98 @@
<img src="@/assets/images/projectImg/labor_yellow.png" /> <img src="@/assets/images/projectImg/labor_yellow.png" />
<div class="info"> <div class="info">
<div class="num2">{{ 62590 }}</div> <div class="num2">{{ 62590 }}</div>
<!-- 在场人数 -->
<div class="label">{{ '在场劳务人数' }}</div> <div class="label">{{ '在场劳务人数' }}</div>
</div> </div>
</div> </div>
</div>-->
<div class="statisticsHead">
<div class="statisticsHead_item">
<span style="color:#5181F6">{{statisticsCount.workercount.totalPerson}}</span>
<p>
<!-- 在册人数 -->
{{$t('message.dataBoard.numberOfPresent')}}
</p>
</div>
<div class="statisticsHead_item">
<span style="color: #F67F51;">{{statisticsCount.workercount.totalPerson}}</span>
<p>
<!-- 实名制人数 -->
{{$t('message.dataBoard.realnameSystem')}}
</p>
</div>
<div class="statisticsHead_item">
<span style="color: #5CE2F6;">{{ statisticsCount.presencecount.lsPersonTotal}}</span>
<span>/</span>
<span>{{statisticsCount.workercount.lsPersonTotal}}</span>
<p>
<!-- 临时工人数 -->
{{$t('message.dataBoard.numberOfTemporaryWorkers')}}
</p>
</div>
</div> </div>
<div class="persontype"> <div class="persontype">
<span>项目管理人员</span> <p class="person">679</p>
<p class="person">679</p> <p class="person">679</p>
<span>特种作业人员</span>
<p class="person">679</p>
</div> </div>
<div class="persontype"> <div class="persontype">
<span>一般作业人员</span> <span>在册甲方管理人员数</span>
<p class="person">679</p> <span>在场甲方管理人员数</span>
<span>临时作业人员</span> </div>
<p class="person">679</p> <div class="persontype">
<p class="person">679</p>
<p class="person">679</p>
</div>
<div class="persontype">
<span>在册劳务人员数</span>
<span>在场劳务人员数</span>
</div>
<div class="minTit">
<div class="point"></div>
{{$t('message.dataBoard.managementPersonnelStatistics')}}
</div>
<div class="management">
<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" style="border: 1px solid #F67F51;">
<img src="@/assets/images/dataBoard/jl.png" alt />
</div>
</div>
<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" style="border: 1px solid #5181F6;">
<img src="@/assets/images/dataBoard/jf.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" style="border: 1px solid #7851F6;">
<img src="@/assets/images/dataBoard/yf.png" alt />
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -44,7 +119,51 @@ export default {
} }
}, },
data() { data() {
return {}; return {
statisticsCount: {
attendancePersonNum: 0,
educationPersonNum: 0,
workercount: {
lwPersonYesterdayAdd: 0,
eduPersonTotal: 0,
jfGlPersonTotal: 0,
age18: 0,
age18to25: 0,
womanPersonTotal: 0,
lsPersonTotal: 0,
jlGlPersonTotal: 0,
age45to60: 0,
lwPersonTotal: 0,
manPersonTotal: 0,
totalPerson: 0,
age25to35: 0,
glPersonTotal: 0,
yfGlPersonTotal: 0,
avgage: 0,
age35to45: 0,
glPersonYesterdayAdd: 0,
age60: 0
},
presencecount: {
jfGlPersonTotal: 0,
age18: 0,
age18to25: 0,
womanPersonTotal: 0,
lsPersonTotal: 0,
jlGlPersonTotal: 0,
age45to60: 0,
lwPersonTotal: 0,
manPersonTotal: 0,
totalPerson: 0,
age25to35: 0,
glPersonTotal: 0,
yfGlPersonTotal: 0,
avgage: 0,
age35to45: 0,
age60: 0
}
}
};
} }
}; };
</script> </script>
@ -55,61 +174,127 @@ export default {
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
.statisticsHead {
display: flex;
justify-content: space-around;
margin: 20px 0px;
background-image: linear-gradient(
to right,
rgba(92, 226, 246, 0),
rgba(92, 226, 246, 0.2),
rgba(92, 226, 246, 0)
);
.statisticsHead_item {
box-sizing: border-box;
width: 113px;
height: 50px;
font-size: 16px;
text-align: center;
padding-top: 5px;
span {
font-size: 20px;
}
}
}
.titleTxt { .titleTxt {
font-size: 18px; font-size: 18px;
color: #6ee4f0; color: #6ee4f0;
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
} }
.personCount { // .personCount {
display: flex; // display: flex;
margin-top: 30px; // margin-top: 30px;
margin-left: 30px; // margin-left: 30px;
margin-bottom: 30px; // margin-bottom: 30px;
.countItem { // .countItem {
flex: 1; // flex: 1;
height: 35%; // height: 35%;
display: flex; // display: flex;
img { // img {
margin-right: 8px; // margin-right: 8px;
width:50px; // width: 50px;
height:50px; // height: 50px;
} // }
.info { // .info {
margin-top: 5px; // margin-top: 5px;
.num1 { // .num1 {
color: #309b8a; // color: #309b8a;
} // }
.num2 { // .num2 {
color: #f7d400; // color: #f7d400;
} // }
.label { // .label {
font-size: 12px; // font-size: 12px;
} // }
.label1 { // .label1 {
width: 68px; // width: 68px;
} // }
} // }
} // }
} // }
.persontype { .persontype {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 38px; height: 23px;
line-height: 30px; line-height: 23px;
margin-bottom: 20px; // margin-bottom: 10px;
span{ span {
font-size: 12px; width: 168px;
text-align: left;
font-size: 16px;
margin-right: 10px; margin-right: 10px;
} }
.person { .person {
width: 15%; width: 25%;
text-align: center; text-align: center;
margin-right: 30px; margin-right: 60px;
color: #47b1c4; color: #47b1c4;
background-image: url(~@/assets/images/projectImg/numBgc.png); // background-image: url(~@/assets/images/projectImg/numBgc.png);
background-size:100%; // background-size:100%;
background-repeat: no-repeat; // background-repeat: no-repeat;
}
}
.minTit {
color: #ffffff;
margin-top: 20px;
.point {
width: 8px;
height: 8px;
margin-left: 20px;
border-radius: 50%;
background-color: #5be1f5;
display: inline-block;
}
}
.management {
display: flex;
justify-content: space-between;
position: absolute;
margin-top: 20px;
// top: 2%;
left: 5%;
.management_item {
box-sizing: border-box;
position: relative;
width: 120px;
text-align: start;
margin-right: 15px;
.item_content {
position: absolute;
left: 50px;
}
.itemImgBox {
width: 40px;
height: 40px;
border-radius: 50%;
img {
margin-top: 8px;
margin-left: 8px;
width: 23px;
height: 23px;
}
}
} }
} }
} }