297 lines
7.7 KiB
Vue
297 lines
7.7 KiB
Vue
<template>
|
|
<view class="fullHeight bgLightBlue">
|
|
<scroll-view scroll-y="true" class="pageContent">
|
|
<view class="title flex">
|
|
<uni-icons2 @click="goback" class="forwardImg" style="font-weight: 700;" type="arrowleft" size="22"></uni-icons2>
|
|
<text style="margin-left:-24rpx">{{title}}</text>
|
|
<text></text>
|
|
</view>
|
|
<view class="banner_bg flex">
|
|
<view class="type">
|
|
<view>{{listData.workercount?listData.workercount.lwPersonTotal:0}}</view>
|
|
<view class="type_name">在职施工人员</view>
|
|
</view>
|
|
<view class="type">
|
|
<view>{{listData.workercount?listData.workercount.glPersonTotal:0}}</view>
|
|
<view class="type_name">在职管理人员</view>
|
|
</view>
|
|
</view>
|
|
<view class="statistics1">
|
|
<view class="flex wake">
|
|
<view class="type color1">
|
|
<view class="font_24">{{listData.currentAttendance?Number(listData.currentAttendance.glPersonTotal+listData.currentAttendance.lwPersonTotal):0}}</view>
|
|
<view class="type_name color2">当日出勤人数</view>
|
|
</view>
|
|
<view class="type color1">
|
|
<view class="font_24">{{listData.workercount?Number(listData.currentAttendance.glPersonTotal+listData.currentAttendance.lwPersonTotal)/listData.workercount.totalPerson:0}}%</view>
|
|
<view class="type_name color2">昨日出勤率</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="flex wake">
|
|
<view class="type color3">
|
|
<view class="font_24">22</view>
|
|
<view class="type_name color2">当日出勤工种</view>
|
|
</view>
|
|
<view class="type color3">
|
|
<view class="font_24">22</view>
|
|
<view class="type_name color2">昨日出勤工种数</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="flex wake">
|
|
<view class="type color1" >
|
|
<view class="font_24">{{listData.workercount?listData.workercount.eduPersonTotal:0}}</view>
|
|
<view class="type_name color2">安全教育培训人数</view>
|
|
<!-- <uni-icons2 @click="goPeopleTrain" class="locationImg" style="color: #4396e7;" type="arrowright" size="20"></uni-icons2> -->
|
|
</view>
|
|
<view class="type color1" >
|
|
<view class="font_24">{{listData.presencecount?listData.presencecount.totalTeamNum:0}}</view>
|
|
<view class="type_name color2">现场班组</view>
|
|
<!-- <uni-icons2 @click="goLocaleTeam" class="locationImg" style="color: #4396e7;" type="arrowright" size="20"></uni-icons2> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex workType" >
|
|
<view class="type color1">
|
|
<view class="font_24">{{listData.presencecount?listData.presencecount.totalWorkerTypeNum:0}}</view>
|
|
<view class="type_name color2">现场工种</view>
|
|
</view>
|
|
<!-- <view class="type color4">
|
|
<view class="font_24">{{listData.workercount?listData.workercount.glPersonTotal:0}}</view>
|
|
<view class="type_name color2">特殊工种数</view>
|
|
</view> -->
|
|
<view class="type color4">
|
|
<view class="font_24">{{listData.workercount?listData.workercount.specialPersonTotal:0}}</view>
|
|
<view class="type_name color2">特殊工种人数</view>
|
|
</view>
|
|
</view>
|
|
<view class="blockBox">
|
|
<view class="blockTitle">
|
|
<view class="titleName">
|
|
工种分析
|
|
</view>
|
|
</view>
|
|
<view class="blockContent">
|
|
<u-charts class="ucharts" :cWidth="355" :cHeight="160" canvas-id="jobEvaluation" chartType="ring" :opts="jobEvaluationChartData"
|
|
ref="jobEvaluation" />
|
|
<view class="statisticsType">
|
|
<view class="flex" v-for="(item,index) in listData.workerTypeList" :key="index" v-if="listData.workerTypeList.length>0">
|
|
<view style="width:40%" class="flex2"><view :style="{width:'20rpx',height:'20rpx','background-color':colorList[index],'margin-right':'10rpx'}"></view>{{item.typeName}}</view>
|
|
<view style="width:30%;text-align: center;">{{item.personNum}}人</view>
|
|
<view style="width:30%;text-align: center;">{{item.ratioNum}}%</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<footers :activeTab="'personManage'"></footers>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import footers from '../../components/footers/footers.vue'
|
|
import uCharts from '@/components/u-charts/component.vue';
|
|
import uniIcons from "@/components/uni-icons/uni-icons.vue"
|
|
export default {
|
|
components: {
|
|
footers,
|
|
uCharts,
|
|
uniIcons
|
|
},
|
|
data() {
|
|
return {
|
|
title: '',
|
|
searchsn: '',
|
|
jobEvaluationChartData: {
|
|
title: {
|
|
name: "",
|
|
color: '#7cb5ec',
|
|
fontSize: 25,
|
|
offsetY: 0,
|
|
},
|
|
series: [{
|
|
"data": 0,
|
|
color: '#1890FF'
|
|
},
|
|
{
|
|
"data": 0,
|
|
color: '#E7EDF3'
|
|
}
|
|
|
|
]
|
|
},
|
|
colorList:['#3E9CE0','#F14027','#F69CA2','#D8F584','#9878F2','#94E133','#605DE9','#EF7197','#12DED1',
|
|
'#E74F0D','#3FDEAF','#E74676','#123DD9','#3E9CE0','#F14027','#F69CA2','#D8F584','#9878F2','#94E133',
|
|
'#605DE9','#EF7197','#12DED1','#E74F0D','#3FDEAF','#E74676','#123DD9',
|
|
'#3E9CE0','#F14027','#F69CA2','#D8F584','#9878F2','#94E133','#605DE9','#EF7197','#12DED1','#E74F0D','#3FDEAF','#E74676','#123DD9',
|
|
'#3E9CE0','#F14027','#F69CA2','#D8F584','#9878F2','#94E133','#605DE9','#EF7197','#12DED1','#E74F0D','#3FDEAF','#E74676','#123DD9',],
|
|
listData:{},
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
this.title = options.title;
|
|
this.searchsn = options.sn;
|
|
this.getListData();
|
|
},
|
|
|
|
|
|
methods: {
|
|
//返回上一页
|
|
goback() {
|
|
uni.navigateBack({})
|
|
},
|
|
|
|
//获取数据
|
|
getListData(){
|
|
let that = this;
|
|
this.sendRequest({
|
|
url:"xmgl/workerInfo/selectWorkerManageStatistics",
|
|
data: {
|
|
sn: that.searchsn,
|
|
},
|
|
method: 'post',
|
|
success(res){
|
|
that.listData = res.result;
|
|
that.jobEvaluationChartData.series = [];
|
|
let count = 0;
|
|
res.result.workerTypeList.forEach((item,index)=>{
|
|
count = count+item.personNum;
|
|
let data = {
|
|
"data": item.personNum,
|
|
color: that.colorList[index]
|
|
};
|
|
that.jobEvaluationChartData.series.push(data)
|
|
})
|
|
that.jobEvaluationChartData.title.name = count;
|
|
that.$refs.jobEvaluation.changeData('jobEvaluation', that.jobEvaluationChartData);
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//安全
|
|
goPeopleTrain(){
|
|
uni.navigateTo({
|
|
url:'./peopleTrain?sn='+this.searchsn+'&title='+this.title
|
|
})
|
|
},
|
|
//现场班组
|
|
goLocaleTeam(){
|
|
uni.navigateTo({
|
|
url:'./localeTeam?sn='+this.searchsn+'&title='+this.title
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fullHeight {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex2 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
line-height: 48px;
|
|
background-color: #FFFFFF;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.banner_bg {
|
|
background-image: url(../../static/personnelimg/banner_bg.png);
|
|
width: 100%;
|
|
background-size: 100%;
|
|
height: 300rpx;
|
|
}
|
|
|
|
.type {
|
|
width: 50%;
|
|
text-align: center;
|
|
font-size: 60rpx;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
position: relative;
|
|
}
|
|
|
|
.type_name {
|
|
font-size: 24rpx;
|
|
font-weight: initial
|
|
}
|
|
|
|
.statistics1 {
|
|
background-color: #FFFFFF;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.wake {
|
|
padding: 8px 0;
|
|
|
|
}
|
|
|
|
.locationImg {
|
|
position: absolute;
|
|
top: calc(50% - 11px);
|
|
right: 50rpx;
|
|
}
|
|
|
|
.color1 {
|
|
color: #4396e7;
|
|
}
|
|
|
|
.color2 {
|
|
color: #919191;
|
|
}
|
|
|
|
.color3 {
|
|
color: #0bb67d;
|
|
}
|
|
.color4{
|
|
color: #ffb71b;
|
|
}
|
|
|
|
.font_24 {
|
|
font-size: 48rpx;
|
|
font-weight: initial;
|
|
}
|
|
|
|
.workType {
|
|
margin: 20rpx 0;
|
|
box-sizing: border-box;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #FFFFFF
|
|
}
|
|
|
|
.blockBox .blockTitle .titleName::before {
|
|
height: 75%;
|
|
top: 16%;
|
|
}
|
|
.statisticsType{
|
|
margin: 30rpx 0;
|
|
padding: 20rpx 40rpx;
|
|
box-sizing: border-box;
|
|
line-height: 28rpx;
|
|
font-size: 24rpx;
|
|
color: #8E8E8E;
|
|
}
|
|
</style>
|