370 lines
10 KiB
Vue
370 lines
10 KiB
Vue
<template>
|
|
<view class="fullHeight">
|
|
<headers :showBack="true" :themeType="'white'">
|
|
<view class="headerName">
|
|
在岗工人分析
|
|
</view>
|
|
</headers>
|
|
<view class="content">
|
|
<view class="nav_wrap">
|
|
<view class="navigation1 flex2">
|
|
<view class="navType" :class="checkNavType==1?'checkNavType':'padding_2'" @click="changeNavType(1)">按工种</view>
|
|
<view class="navType" :class="checkNavType==2?'checkNavType':'padding_2'" @click="changeNavType(2)">按年龄</view>
|
|
<view class="navType" :class="checkNavType==3?'checkNavType':'padding_2'" @click="changeNavType(3)">按地区</view>
|
|
</view>
|
|
<view class="navigation2 flex">
|
|
<view class="navCharts" :class="navChartsType==1?'navChartsType1':''" @click="changeNavCharts(1)">饼图</view>
|
|
<view class="navCharts" :class="navChartsType==2?'navChartsType2':''" @click="changeNavCharts(2)">条形图</view>
|
|
</view>
|
|
</view>
|
|
<!-- 饼图 -->
|
|
<view class="charts_wrap" v-if="navChartsType==1">
|
|
<u-charts canvas-id="pieChart" chartType="ring" :opts="pieChartData" ref="pieChart" />
|
|
<view class="data_wrap">
|
|
<!-- 工种 -->
|
|
<view class="flex" style="margin: 10px 0;" v-if="checkNavType==1" v-for="(item,index) in workerTypeList" :key="index">
|
|
<view class="name flex">
|
|
<view class="bg_color" :style="{'background-color': colorList[index]}"></view> {{item.typeName}}
|
|
</view>
|
|
<view class="num">{{item.personNum}} 人</view>
|
|
<view class="ratio">{{item.ratioNum}} %</view>
|
|
</view>
|
|
<!-- 年龄 -->
|
|
<view class="flex" style="margin: 10px 0;" v-if="checkNavType==2" v-for="(item,index) in workercountList" :key="index">
|
|
<view class="name flex">
|
|
<view class="bg_color" :style="{'background-color': colorList[index]}"></view> {{item.typeName}}
|
|
</view>
|
|
<view class="num">{{item.personNum}} 人</view>
|
|
<view class="ratio">{{item.ratioNum}} %</view>
|
|
</view>
|
|
<!-- 区域 -->
|
|
<view class="flex" style="margin: 10px 0;" v-if="checkNavType==3" v-for="(item,index) in provinceList" :key="index">
|
|
<view class="name flex">
|
|
<view class="bg_color" :style="{'background-color': colorList[index]}"></view> {{item.provinceName}}
|
|
</view>
|
|
<view class="num">{{item.personNum}} 人</view>
|
|
<view class="ratio">{{item.ratioNum}} %</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 条形图 -->
|
|
<view class="bar_wrap" v-else>
|
|
<!-- 工种 -->
|
|
<view class="item" v-if="checkNavType==1" v-for="(item,index) in workerTypeList" :key="index">
|
|
<view class="flex2" style="margin-bottom: 6px;">
|
|
<view class="flex">
|
|
<text class="item_name">{{item.typeName}}</text>
|
|
<text class="item_ratio">{{item.ratioNum}}%</text>
|
|
</view>
|
|
<view class="item_num">{{item.personNum}}人</view>
|
|
</view>
|
|
<view class="showRatioBar" :style="{width:item.ratioNum+'%'}"></view>
|
|
</view>
|
|
<!-- 年龄 -->
|
|
<view class="item" v-if="checkNavType==2" v-for="(item,index) in workercountList" :key="index">
|
|
<view class="flex2" style="margin-bottom: 6px;">
|
|
<view class="flex">
|
|
<text class="item_name">{{item.typeName}}</text>
|
|
<text class="item_ratio">{{item.ratioNum}}%</text>
|
|
</view>
|
|
<view class="item_num">{{item.personNum}}人</view>
|
|
</view>
|
|
<view class="showRatioBar" :style="{width:item.ratioNum+'%'}"></view>
|
|
</view>
|
|
<!-- 区域 -->
|
|
<view class="item" v-if="checkNavType==3" v-for="(item,index) in provinceList" :key="index">
|
|
<view class="flex2" style="margin-bottom: 6px;">
|
|
<view class="flex">
|
|
<text class="item_name">{{item.provinceName}}</text>
|
|
<text class="item_ratio">{{item.ratioNum}}%</text>
|
|
</view>
|
|
<view class="item_num">{{item.personNum}}人</view>
|
|
</view>
|
|
<view class="showRatioBar" :style="{width:item.ratioNum+'%'}"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headers from "../../../components/headers/headers.vue"
|
|
import uCharts from '@/components/u-charts/component.vue';
|
|
export default {
|
|
components: {
|
|
headers,
|
|
uCharts
|
|
},
|
|
data() {
|
|
return {
|
|
pieChartData: {
|
|
title: {
|
|
name: "",
|
|
color: '#7cb5ec',
|
|
fontSize: 25,
|
|
offsetY: 0,
|
|
},
|
|
series: [{
|
|
"data": 0,
|
|
color: '#1890FF'
|
|
},
|
|
{
|
|
"data": 0,
|
|
color: '#E7EDF3'
|
|
},
|
|
|
|
]
|
|
},
|
|
checkNavType: 1, // 工种 年龄 区域
|
|
navChartsType: 1, //条形 饼图;
|
|
projectSn: '',
|
|
provinceList:[],//区域数据
|
|
workerTypeList:[],//工种数据
|
|
workercount:{},//年龄数据
|
|
workercountList:[],
|
|
colorList:['#00b0f0','#0070c0','#c00000','#ff0000','#ffc000','#ffff00','#92d050','#00b050','#002060','#7030a0','#262626',
|
|
'#a6a6a6','#660010','#b21016','#c00000','#ff0000','#ffc000','#ffff00','#00b0f0','#0070c0','#92d050','#00b050','#002060','#7030a0','#262626',
|
|
'#a6a6a6','#660010','#b21016'],
|
|
};
|
|
},
|
|
mounted() {
|
|
// this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
|
this.projectSn = '52f1b39bac744fb597a1a1b71511362c';
|
|
this.getListData();
|
|
},
|
|
methods: {
|
|
//切换 tabs
|
|
changeNavType(type) {
|
|
this.checkNavType = type;
|
|
if(type==1){
|
|
this.pieChartData.title.name = '工种';
|
|
if(this.workerTypeList.length>0){
|
|
let arr = [];
|
|
this.workerTypeList.forEach((item,index)=>{
|
|
let json = {
|
|
"data": item.ratioNum,
|
|
color: this.colorList[index]
|
|
};
|
|
arr.push(json)
|
|
});
|
|
this.pieChartData.series = arr;
|
|
|
|
};
|
|
}else if(type==2){
|
|
this.pieChartData.title.name = '年龄';
|
|
this.workercountList = [
|
|
{typeName:'18岁以下', personNum:this.workercount.age18,ratioNum:this.workercount.age18ratio},
|
|
{typeName:'18岁至25岁', personNum:this.workercount.age18to25,ratioNum:this.workercount.age18to25ratio},
|
|
{typeName:'25岁至35岁', personNum:this.workercount.age25to35,ratioNum:this.workercount.age25to35ratio},
|
|
{typeName:'35岁至45岁', personNum:this.workercount.age35to45,ratioNum:this.workercount.age35to45ratio},
|
|
{typeName:'45岁至60岁', personNum:this.workercount.age45to60,ratioNum:this.workercount.age45to60ratio},
|
|
{typeName:'60岁以上', personNum:this.workercount.age60,ratioNum:this.workercount.age60ratio}
|
|
];
|
|
|
|
}else if(type==3){
|
|
this.pieChartData.title.name = '区域';
|
|
if(this.provinceList.length>0){
|
|
let arr = [];
|
|
this.provinceList.forEach((item,index)=>{
|
|
let json = {
|
|
"data": item.ratioNum,
|
|
color: this.colorList[index]
|
|
};
|
|
arr.push(json)
|
|
});
|
|
this.pieChartData.series = arr;
|
|
|
|
};
|
|
}
|
|
|
|
},
|
|
|
|
//切换图形
|
|
changeNavCharts(type) {
|
|
this.navChartsType = type;
|
|
},
|
|
|
|
//获取列表数据
|
|
getListData() {
|
|
this.sendRequest({
|
|
url: 'xmgl/workerInfo/selectProjectLabourWorkerCount',
|
|
method: 'POST',
|
|
data: {
|
|
projectSn: this.projectSn,
|
|
},
|
|
success: (res) => {
|
|
if (res.code == 200) {
|
|
this.pieChartData.title.name = '工种';
|
|
this.provinceList=res.result.provinceList;//区域数据
|
|
this.workerTypeList=res.result.workerTypeList;//工种数据
|
|
this.workercount=res.result.workercount;//年龄数据
|
|
|
|
this.workercountList = [
|
|
{typeName:'18岁以下', personNum:this.workercount.age18,ratioNum:this.workercount.age18ratio},
|
|
{typeName:'18岁至25岁', personNum:this.workercount.age18to25,ratioNum:this.workercount.age18to25ratio},
|
|
{typeName:'25岁至35岁', personNum:this.workercount.age25to35,ratioNum:this.workercount.age25to35ratio},
|
|
{typeName:'35岁至45岁', personNum:this.workercount.age35to45,ratioNum:this.workercount.age35to45ratio},
|
|
{typeName:'45岁至60岁', personNum:this.workercount.age45to60,ratioNum:this.workercount.age45to60ratio},
|
|
{typeName:'60岁以上', personNum:this.workercount.age60,ratioNum:this.workercount.age60ratio}
|
|
];
|
|
|
|
//设置显示工种数据
|
|
if(this.workerTypeList.length>0){
|
|
let arr = [];
|
|
this.workerTypeList.forEach((item,index)=>{
|
|
let json = {
|
|
"data": item.ratioNum,
|
|
color: this.colorList[index]
|
|
};
|
|
arr.push(json)
|
|
});
|
|
this.pieChartData.series = arr;
|
|
};
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.content .nav_wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-bottom: 1px;
|
|
box-shadow: 0 5px 10px rgba(236, 236, 236, 1.0);
|
|
background-color: rgba(236, 236, 236, 0.2);
|
|
}
|
|
|
|
.nav_wrap .navType {
|
|
width: 33%;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.nav_wrap .navType:active {
|
|
background-color: rgba(43, 141, 243, 0.08);
|
|
}
|
|
|
|
.nav_wrap .navigation1 {
|
|
height: 32px;
|
|
}
|
|
|
|
.navigation1 .checkNavType {
|
|
color: #2b8df3;
|
|
border-bottom: 2px solid #2b8df3;
|
|
}
|
|
|
|
.navigation1 .padding_2 {
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.nav_wrap .navigation2 {
|
|
margin: 12px auto;
|
|
width: 60%;
|
|
height: 30px;
|
|
background-color: rgba(43, 141, 243, 0.3);
|
|
border-radius: 35px;
|
|
}
|
|
|
|
.navigation2 .navCharts {
|
|
width: 50%;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.navigation2 .navChartsType1 {
|
|
background-color: rgba(43, 141, 243, 0.75);
|
|
border-top-left-radius: 35px;
|
|
border-bottom-left-radius: 35px;
|
|
color: #fff;
|
|
}
|
|
|
|
.navigation2 .navChartsType2 {
|
|
background-color: rgba(43, 141, 243, 0.75);
|
|
border-top-right-radius: 35px;
|
|
border-bottom-right-radius: 35px;
|
|
color: #fff;
|
|
}
|
|
|
|
.content .charts_wrap {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.charts_wrap .data_wrap {
|
|
width: 100%;
|
|
padding: 0 18px;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.data_wrap .name {
|
|
width: 45%;
|
|
}
|
|
|
|
.data_wrap .bg_color {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 35px;
|
|
margin: 0 5px 0 10px;
|
|
}
|
|
|
|
.data_wrap .num {
|
|
width: 30%;
|
|
}
|
|
|
|
.data_wrap .ratio {
|
|
width: 25%;
|
|
}
|
|
|
|
.content .bar_wrap {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.bar_wrap .item {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-bottom: 4px;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.showRatioBar {
|
|
height: 9px;
|
|
background-color: rgba(43, 141, 243, 0.9);
|
|
}
|
|
|
|
.item_name {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.item_num {
|
|
color: rgba(43, 141, 243, 0.95);
|
|
}
|
|
|
|
.item_ratio {
|
|
color: rgba(38, 45, 71, 0.7);
|
|
}
|
|
</style>
|