zhgdyunapp/pages/projectEnd/laborManage/workerAnalysis.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;//年龄数据
							console.log('区域数据--',this.provinceList);
							console.log('工种数据--',this.workerTypeList);
							console.log('年龄数据--',this.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>