546 lines
13 KiB
Vue
546 lines
13 KiB
Vue
<template>
|
||
<view class="fullHeight bgLightBlue">
|
||
<scroll-view scroll-y="true" class="pageContent">
|
||
<headers :showBack="parentSn">
|
||
<view class="headerName">
|
||
{{currentCompany.companyName}}
|
||
</view>
|
||
</headers>
|
||
<scroll-view v-if="userInfo.accountType!=5&&userInfo.accountType!=6" class="scroll-view_H" scroll-x="true">
|
||
<view class="scroll-view-item_H" :class="activeTabIndex==-1?'active':''" @click="changeLevel(-1)">
|
||
<text class="name">{{currentCompany.companyName=='集团'?currentCompany.companyName:'全部'}}</text>
|
||
</view>
|
||
<view class="scroll-view-item_H" :class="activeTabIndex==index?'active':''" v-for="(item,index) in mapData" :key="index"
|
||
@click="changeLevel(index)">
|
||
<text class="name">{{item.name}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="blockBox">
|
||
<view class="blockContent">
|
||
<u-charts class="labourCanvas" :cWidth="355" :cHeight="120" canvas-id="labourCanvas" chartType="arcbar" :opts="personnelsChartData"
|
||
ref="labourCanvas" />
|
||
<uni-icons2 @click="forwardFn" v-show="activeTabIndex!=-1&&!mapData[activeTabIndex].projectSn" class="forwardImg" style="color: #007AFF;" type="arrowright" size="30"></uni-icons2>
|
||
<view class="dataBox">
|
||
<view class="dataItem">
|
||
<view class="text">
|
||
在场
|
||
</view>
|
||
<view class="num primaryText" style="color: #FFB512;">
|
||
{{listData.presencecount?listData.presencecount.totalPerson:0}}
|
||
</view>
|
||
</view>
|
||
<view class="dataItem">
|
||
<view class="text">
|
||
实名制
|
||
</view>
|
||
<view class="num primaryText" style="color: #0CCD90;">
|
||
{{listData.workercount?listData.workercount.totalPerson:0}}
|
||
</view>
|
||
</view>
|
||
<view class="dataItem">
|
||
<view class="text">
|
||
在职
|
||
</view>
|
||
<view class="num primaryText" style="color: #0F7FE7;">
|
||
{{listData.workercount?listData.workercount.totalPerson:0}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="blockBox">
|
||
<view class="blockTitle flex">
|
||
<view class="titleName">
|
||
现场人员分析
|
||
</view>
|
||
<uni-icons2 type="arrowright" color="#007aff" @click="goAnalyse" style="font-weight: 700;font-size: 40rpx;" />
|
||
</view>
|
||
<view class="blockContent">
|
||
|
||
<view class="dataBox">
|
||
<view class="dataItem">
|
||
<view class="num primaryText">
|
||
{{listData.presencecount?listData.presencecount.lwPersonTotal:0}}
|
||
</view>
|
||
<view class="text">
|
||
在场施工人员
|
||
</view>
|
||
</view>
|
||
<view class="dataItem">
|
||
<view class="num primaryText">
|
||
{{listData.presencecount?listData.presencecount.glPersonTotal:0}}
|
||
</view>
|
||
<view class="text">
|
||
在场管理人员
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="blockBox">
|
||
<view class="blockTitle flex">
|
||
<view class="titleName">
|
||
工种情况
|
||
</view>
|
||
<view style="font-size: 24rpx; color: #262D47; opacity: 0.8;">左右滑动查看更多</view>
|
||
</view>
|
||
<view class="blockContent">
|
||
<u-charts class="ucharts" :cWidth="355" :cHeight="160" canvas-id="chartPeopleWork" chartType="column" :opts="workTypeChartData"
|
||
ref="chartPeopleWork" />
|
||
</view>
|
||
</view>
|
||
<view class="blockBox">
|
||
<view class="blockTitle flex">
|
||
<view class="titleName">
|
||
工人年龄统计
|
||
</view>
|
||
<view style="font-size: 24rpx; opacity: 0.8;" class="flex">
|
||
<view style="width:20rpx;height:20rpx; background-color:#2A8BE7; margin-right: 10rpx;"></view>在场人数
|
||
<view style="width:20rpx;height:20rpx; background-color:#80D5FF; margin:0 10rpx 0 20rpx;"></view> 在职人数
|
||
</view>
|
||
</view>
|
||
<view class="blockContent">
|
||
<u-charts class="ucharts" :cWidth="355" :cHeight="160" canvas-id="chartProjectAge" chartType="column" :opts="ageChartData"
|
||
ref="chartProjectAge" />
|
||
</view>
|
||
<view class="flex" style="margin: 10rpx; font-size: 28rpx;">
|
||
<text>平均年龄</text>
|
||
<view>
|
||
<text style="margin-right: 26rpx;color: #2A8BE7;">在场：{{listData.presencecount?listData.presencecount.avgage.toFixed(0):0}}岁</text>
|
||
<text style="color: #80D5FF">在职：{{listData.workercount?listData.workercount.avgage.toFixed(0):0}}岁</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="blockBox">
|
||
<view class="blockTitle">
|
||
<view class="titleName">
|
||
入场培训教育交底
|
||
</view>
|
||
</view>
|
||
<view class="blockContent">
|
||
<u-charts class="ucharts" :cWidth="355" :cHeight="130" canvas-id="integritySafety2" chartType="ring" :opts="infoSafetyChartData"
|
||
ref="integritySafety2" />
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%; height: 1px;"></view>
|
||
|
||
</scroll-view>
|
||
<footers :activeTab="'personManage'"></footers>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headers from '../../components/headers/headers.vue'
|
||
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: {
|
||
headers,
|
||
footers,
|
||
uCharts,
|
||
uniIcons
|
||
},
|
||
data() {
|
||
return {
|
||
userInfo: null,
|
||
listData: {}, // 页面数据集
|
||
// showMapBack:false,
|
||
backArr: [],
|
||
searchsn: '',
|
||
mapData: [],
|
||
activeTabIndex: -1,
|
||
parentSn: '',
|
||
currentCompany: {
|
||
companyName: '集团',
|
||
},
|
||
//头部半环数据
|
||
personnelsChartData: {
|
||
series: [{
|
||
name: '劳务',
|
||
data: 0,
|
||
color: '#FFB512',
|
||
},
|
||
{
|
||
name: '',
|
||
data: 0,
|
||
color: '#0CCD90',
|
||
},
|
||
{
|
||
name: '',
|
||
data: 0,
|
||
color: '#0F7FE7',
|
||
|
||
},
|
||
]
|
||
},
|
||
workTypeChartData: {
|
||
categories: [],
|
||
series: []
|
||
},
|
||
ageChartData: {
|
||
categories: [
|
||
"18及以下",
|
||
"18-25岁",
|
||
"25-35岁",
|
||
"35-45岁",
|
||
"45-59岁",
|
||
"60及以上",
|
||
],
|
||
series: [{
|
||
data: [],
|
||
color: '#2A8BE7'
|
||
},
|
||
{
|
||
data: [],
|
||
color: '#80D5FF'
|
||
},
|
||
]
|
||
},
|
||
infoSafetyChartData: {
|
||
title: {
|
||
name: "",
|
||
color: '#7cb5ec',
|
||
fontSize: 25,
|
||
offsetY: 0,
|
||
},
|
||
series: [{
|
||
"data": 0,
|
||
color: '#1890FF'
|
||
},
|
||
{
|
||
"data": 0,
|
||
color: '#E7EDF3'
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
|
||
this.getAreaList(true);
|
||
},
|
||
onShow() {
|
||
|
||
// console.log('onShow')
|
||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||
let curRoute = routes[routes.length - 1].route //获取当前页面路由
|
||
let curParam = routes[routes.length - 1].options; //获取路由参数
|
||
if (curParam.sn) {
|
||
this.parentSn = curParam.sn
|
||
this.searchsn = curParam.sn
|
||
}
|
||
this.activeTabIndex = -1;
|
||
if (this.parentSn) {
|
||
this.getAreaList(false);
|
||
this.loadStatictisData()
|
||
} else {
|
||
this.initData();
|
||
}
|
||
},
|
||
mounted() {
|
||
// console.log('mounted')
|
||
|
||
|
||
},
|
||
methods: {
|
||
//权限判断
|
||
initData(type) {
|
||
var that = this
|
||
switch (that.userInfo.accountType) {
|
||
case 2:
|
||
this.searchsn = that.userInfo.headquartersSn
|
||
break;
|
||
case 3:
|
||
this.searchsn = that.userInfo.sn
|
||
break;
|
||
case 4:
|
||
this.searchsn = that.userInfo.sn
|
||
break;
|
||
case 5:
|
||
this.searchsn = that.userInfo.sn
|
||
break;
|
||
case 6:
|
||
this.searchsn = that.userInfo.sn
|
||
break;
|
||
case 7:
|
||
this.searchsn = that.userInfo.sn
|
||
break;
|
||
}
|
||
|
||
if (that.userInfo.accountType == 5 || that.userInfo.accountType == 6 || that.userInfo.accountType == 10) {
|
||
// this.getProjectDetail()
|
||
} else {
|
||
this.getAreaList(type);
|
||
}
|
||
this.loadStatictisData()
|
||
|
||
},
|
||
|
||
|
||
|
||
//获取区域
|
||
getAreaList() {
|
||
let that = this;
|
||
this.sendRequest({
|
||
url: "xmgl/company/getComapnyStatisticsList",
|
||
method: 'POST',
|
||
data: {
|
||
sn: this.searchsn,
|
||
},
|
||
success(res) {
|
||
that.mapData = res.result.companyList ? res.result.companyList : res.result.projectList
|
||
if (res.result.companyInfo) {
|
||
that.currentCompany = res.result.companyInfo
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
|
||
//切换企业地区
|
||
changeLevel(index) {
|
||
this.activeTabIndex = index;
|
||
// console.log('changeLevel', index)
|
||
if (this.activeTabIndex != -1) {
|
||
this.searchsn = this.mapData[index].projectSn ? this.mapData[index].projectSn : this.mapData[index].companySn
|
||
// this.loadData(false);
|
||
this.loadStatictisData()
|
||
if (this.mapData[index].projectSn) {
|
||
// this.getProjectDetail()
|
||
}
|
||
} else {
|
||
if (this.parentSn) {
|
||
this.searchsn = this.parentSn
|
||
// this.loadData(false);
|
||
this.loadStatictisData()
|
||
} else {
|
||
this.initData(true)
|
||
}
|
||
}
|
||
|
||
},
|
||
|
||
//获取区域下的数据
|
||
loadStatictisData() {
|
||
let that = this;
|
||
this.sendRequest({
|
||
url: 'xmgl/workerInfo/selectWorkerManageStatistics',
|
||
data: {
|
||
sn: that.searchsn,
|
||
},
|
||
method: 'post',
|
||
success(res) {
|
||
let data = res.result;
|
||
that.listData = data;
|
||
//头部半圆数据
|
||
let count = (data.presencecount.totalPerson + data.workercount.totalPerson * 2) / 100;
|
||
that.personnelsChartData = {
|
||
series: [{
|
||
name: '劳务',
|
||
data: (data.presencecount.totalPerson / count) / 100,
|
||
color: '#FFB512',
|
||
},
|
||
{
|
||
name: '',
|
||
data: (data.workercount.totalPerson / count) / 100,
|
||
color: '#0CCD90',
|
||
},
|
||
{
|
||
name: '',
|
||
data: (data.workercount.totalPerson / count) / 100,
|
||
color: '#0F7FE7',
|
||
|
||
},
|
||
]
|
||
};
|
||
that.$refs.labourCanvas.changeData('labourCanvas', that.personnelsChartData);
|
||
//获取工种信息
|
||
let obj = {
|
||
data: [],
|
||
color: '#0F7FE7',
|
||
name:'',
|
||
};
|
||
let titleArr = [];
|
||
data.workerTypeList.forEach(item => {
|
||
titleArr.push(item.typeName);
|
||
obj.data.push(item.personNum)
|
||
})
|
||
that.workTypeChartData.categories = titleArr;
|
||
that.workTypeChartData.series = [obj];
|
||
that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
|
||
//获取工人年龄统计
|
||
that.ageChartData.series = [{
|
||
data: [data.presencecount.age18, data.presencecount.age18to25, data.presencecount.age25to35,
|
||
data.presencecount.age35to45, data.presencecount.age45to60, data.presencecount.age60
|
||
],
|
||
color: '#2A8BE7',
|
||
name:'在场人数',
|
||
},
|
||
{
|
||
data: [data.workercount.age18, data.workercount.age18to25, data.workercount.age25to35,
|
||
data.workercount.age35to45, data.workercount.age45to60, data.workercount.age60
|
||
],
|
||
color: '#80D5FF',
|
||
name:'在职人数',
|
||
},
|
||
];
|
||
that.$refs.chartProjectAge.changeData('chartProjectAge', that.ageChartData);
|
||
|
||
//获取培训数据
|
||
let trainingNum = (data.workercount.eduPersonTotal / data.workercount.totalPerson) * 100;
|
||
|
||
that.infoSafetyChartData.title = {
|
||
name: Number.isNaN(trainingNum) ? '0%' : Number(trainingNum.toFixed(2)) + "%",
|
||
color: '#7cb5ec',
|
||
fontSize: 25,
|
||
offsetY: 0,
|
||
};
|
||
that.infoSafetyChartData.series = [{
|
||
"data": Number.isNaN(trainingNum) ? 0 : Number(trainingNum.toFixed(2)),
|
||
color: '#1890FF'
|
||
},
|
||
{
|
||
"data": Number.isNaN(trainingNum) ? 0 : Number((100 - trainingNum).toFixed(2)),
|
||
color: '#E7EDF3'
|
||
}
|
||
];
|
||
|
||
that.$refs.integritySafety2.changeData('integritySafety2', that.infoSafetyChartData);
|
||
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
|
||
|
||
forwardFn() {
|
||
var type = 'area'
|
||
if (this.mapData[this.activeTabIndex].projectSn) {
|
||
type = 'project'
|
||
}
|
||
uni.navigateTo({
|
||
url: './personManage?sn=' + this.searchsn + '&type=' + type
|
||
})
|
||
},
|
||
|
||
|
||
//现场人员分析
|
||
goAnalyse() {
|
||
let title = this.activeTabIndex == -1 ? '集团' : this.mapData[this.activeTabIndex].name;
|
||
uni.navigateTo({
|
||
url: './peopleAnalyze?sn=' + this.searchsn + '&title=' + title,
|
||
})
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.blockBox {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.blockBox .blockTitle .titleName::before {
|
||
height: 75%;
|
||
top: 16%;
|
||
}
|
||
|
||
.labourCanvas {
|
||
width: 100%;
|
||
height: 240rpx;
|
||
}
|
||
|
||
.blockContent {
|
||
position: relative;
|
||
}
|
||
|
||
.ucharts {
|
||
width: 100%;
|
||
height: 175px;
|
||
}
|
||
|
||
.forwardImg {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
margin-top: -30rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.statusTips {
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 4rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.kuai {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.text {
|
||
font-size: 24rpx;
|
||
color: $uni-text-color;
|
||
opacity: 0.9;
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
|
||
.kuai1 {
|
||
background-color: $uni-color-primary;
|
||
}
|
||
|
||
.kuai2 {
|
||
background-color: $--color-primary2;
|
||
}
|
||
|
||
.kuai3 {
|
||
background-color: $--color-primary6;
|
||
}
|
||
|
||
.kuai4 {
|
||
background-color: $--color-primary3;
|
||
}
|
||
|
||
.kuaiBox {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-bottom: 6rpx;
|
||
|
||
.kuai {
|
||
min-width: 40rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
color: white;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.avgageBox {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
color: $uni-text-color;
|
||
|
||
.primaryText {
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
</style>
|