144 lines
3.4 KiB
Vue
144 lines
3.4 KiB
Vue
<template>
|
|
<!-- 人员概览 -->
|
|
<div class="containerBox">
|
|
<div class="titleTxt">{{ title }}</div>
|
|
<div class="personCount">
|
|
<div class="countItem">
|
|
<img src="@/assets/images/projectImg/labor_shi.png" />
|
|
<div class="info">
|
|
<div class="num1">
|
|
{{ statisticsCount.workercount.totalPerson }}
|
|
</div>
|
|
<!-- 实名制人数 -->
|
|
<div class="label label1">
|
|
{{ '实名制人数' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="countItem">
|
|
<img src="@//assets/images/dataBoard/training.png" />
|
|
<div class="info">
|
|
<div class="num2">
|
|
{{ statisticsCount.educationPersonNum }}
|
|
</div>
|
|
<div class="label">
|
|
{{ '在场总人数' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="countItem">
|
|
<img src="@/assets/images/projectImg/labor_men.png" />
|
|
<div class="info">
|
|
<div class="num3">
|
|
{{
|
|
(
|
|
(isNaN(
|
|
statisticsCount.workercount.manPersonTotal /
|
|
(statisticsCount.workercount.womanPersonTotal +
|
|
statisticsCount.workercount.manPersonTotal)
|
|
)
|
|
? 0
|
|
: statisticsCount.workercount.manPersonTotal /
|
|
(statisticsCount.workercount.womanPersonTotal +
|
|
statisticsCount.workercount.manPersonTotal)) * 100
|
|
).toFixed(2)
|
|
}}%
|
|
</div>
|
|
<div class="label">
|
|
{{ '在职男女比例' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="countItem">
|
|
<img src="@//assets/images/dataBoard/training2.png" />
|
|
<div class="info">
|
|
<div class="num4">
|
|
{{ statisticsCount.workercount.totalPerson }}
|
|
</div>
|
|
<div class="label">
|
|
{{ '培训总人数' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "default title"
|
|
},
|
|
statisticsCount:{
|
|
type: Object,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.containerBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #0081c3;
|
|
|
|
.titleTxt {
|
|
font-size: 18px;
|
|
color: #6ee4f0;
|
|
margin-top: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
.personCount {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
margin-left: 30px;
|
|
.countItem {
|
|
flex-shrink: 0;
|
|
height: 35%;
|
|
width:48%;
|
|
margin-top: 20px;
|
|
img {
|
|
margin-right: 8px;
|
|
width:50px;
|
|
height:50px;
|
|
}
|
|
.info{
|
|
display: inline-block;
|
|
line-height: 50px;
|
|
.num1{
|
|
color:#7851f6;
|
|
}
|
|
.num2{
|
|
color:#fe6c7f;
|
|
}
|
|
.num3{
|
|
color:#44d7b6;
|
|
}
|
|
.num4{
|
|
color: #7852f7;
|
|
}
|
|
.label{
|
|
font-size: 12px;
|
|
line-height: 10px;
|
|
}
|
|
.label1{
|
|
width:68px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|