zhgdyunapp/pages/projectManage/projectManage.vue

<template>
	<view class="fullHeight bgLightBlue">
		<scroll-view scroll-y="true" class="pageContent">
			<headers :showBack="parentSn">
				<!-- <image @click="goBack" src="../../static/logo.png" class="backImg" v-show="showMapBack"></image> -->
				<view class="headerName">
					<!-- {{backArr.length>0?[backArr.length-1].name:'集团'}} -->
					{{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="statictisBox">
				<!-- <view class="currentName">
				集团
			</view> -->
				<!-- <view class="numBox">
				<view class="num">
					1312
				</view>
				<text class="text">区域总数</text>
			</view>
			<view class="numBox">
				<view class="num">
					1312
				</view>
				<text class="text">城市总数</text>
			</view> -->
				<view class="numBox" v-if="statisticsCount.projectcount">
					<view class="num">
						{{statisticsCount.projectcount.projectNum}}
					</view>
					<text class="text">项目总数</text>
				</view>
				<view class="numBox" v-else>
					<view class="num">
						{{projectDetail.saleAcreage}}
					</view>
					<text class="text">建筑面积㎡</text>
				</view>
				<uni-icons @click="forwardFn" color="white"
					v-show="activeTabIndex!=-1&&!mapData[activeTabIndex].projectSn" class="forwardImg" type="arrowright"
					size="30"></uni-icons>
			</view>
			<view class="blockBox">
				<view class="blockTitle">
					<view class="titleName">
						人员管理
					</view>
				</view>
				<view class="blockContent">
					<view class="dataBox">
						<view class="dataItem">
							<view class="num primaryText">
								{{statisticsCount.workercount.totalPerson}}
							</view>
							<view class="text">
								在职人数
							</view>
						</view>
						<view class="dataItem">
							<view class="num primaryText">
								{{statisticsCount.workercount.totalPerson}}
							</view>
							<view class="text">
								实名制人数
							</view>
						</view>
						<view class="dataItem">
							<view class="num primaryText2">
								{{statisticsCount.workercount.lsPersonTotal}}
							</view>
							<view class="text">
								临时工人数
							</view>
						</view>
					</view>
					<view class="dataBox">
						<view class="dataItem">
							<view class="num primaryText">
								{{statisticsCount.workercount.jfGlPersonTotal}}
							</view>
							<view class="text">
								在职甲方管理人员数
							</view>
						</view>
						<view class="dataItem">
							<view class="num primaryText">
								{{statisticsCount.presencecount.jfGlPersonTotal}}
							</view>
							<view class="text">
								在场甲方管理人员数
							</view>
						</view>
					</view>
					<view class="dataBox">
						<view class="dataItem">
							<view class="num primaryText">
								{{statisticsCount.workercount.lwPersonTotal}}
							</view>
							<view class="text">
								在职劳务人员数
							</view>
						</view>
						<view class="dataItem">
							<view class="num primaryText">
								{{statisticsCount.presencecount.lwPersonTotal}}
							</view>
							<view class="text">
								在场劳务人员数
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="blockBox">
				<view class="blockTitle">
					<view class="titleName">
						设备数量
						<!-- 状态 -->
					</view>
					<!-- <view class="statusTips">
					<view class="kuai kuai1">
						
					</view>
					<view class="text">
						在线
					</view>
					<view class="kuai kuai2">
						
					</view>
					<view class="text">
						故障
					</view>
					<view class="kuai kuai3">
						
					</view>
					<view class="text">
						离线
					</view>
				</view> -->
				</view>
				<view class="blockContent">
					<view class="dataBox">
						<view class="dataItem">
							<view class="num primaryText">
								{{statisticsCount.devcount.ufaceDevNum}}
							</view>
							<!-- <view class="kuaiBox">
							<view class="kuai kuai1">
								{{statisticsCount.devcount.ufaceDevNum}}
							</view>
							<view class="kuai kuai2">
								0
							</view>
							<view class="kuai kuai3">
								0
							</view>
						</view> -->
							<view class="text">
								人脸门禁
							</view>
						</view>
						<view class="dataItem">
							<view class="num primaryText">
								{{statisticsCount.devcount.videoNum}}
							</view>
							<!-- <view class="kuaiBox">
							<view class="kuai kuai1">
								{{statisticsCount.devcount.videoNum}}
							</view>
							<view class="kuai kuai2">
								0
							</view>
							<view class="kuai kuai3">
								0
							</view>
						</view> -->
							<view class="text">
								视频监控
							</view>
						</view>
						<view class="dataItem">
							<view class="num primaryText2">
								{{statisticsCount.devcount.environmentDevNum}}
							</view>
							<!-- <view class="kuaiBox">
							<view class="kuai kuai1">
								{{statisticsCount.devcount.environmentDevNum}}
							</view>
							<view class="kuai kuai2">
								0
							</view>
							<view class="kuai kuai3">
								0
							</view>
						</view> -->
							<view class="text">
								环境监测
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="blockBox">
			<view class="blockTitle">
				<view class="titleName">
					入场培训教育统计
				</view>
			</view>
			<view class="blockContent">
				<view class="dataBox">
					<view class="dataItem">
						<view class="num primaryText">
							0
						</view>
						<view class="text">
							已培训人数
						</view>
					</view>
					<view class="dataItem">
						<view class="num primaryText">
							0.00%
						</view>
						<view class="text">
							培训率
						</view>
					</view>
					<view class="dataItem">
						<view class="num primaryText2">
							0
						</view>
						<view class="text">
							不良人数
						</view>
					</view>
				</view>
			</view>
		</view> -->
			<view class="blockBox">
				<view class="blockTitle">
					<view class="titleName">
						年龄结构
					</view>
					<view class="statusTips">
						<view class="kuai kuai1">

						</view>
						<view class="text">
							在职占比
						</view>
						<view class="kuai kuai4">

						</view>
						<view class="text">
							在场占比
						</view>
					</view>
				</view>
				<view class="blockContent">
					<u-charts canvas-id="ageChart" chartType="column" :opts="ageChartData" ref="ageChart" />
					<!-- :cWidth="cWidth" :cHeight="cHeight" -->
					<view class="avgageBox">
						<text>平均年龄</text>
						<view class="">
							<text class="primaryText">在职 {{statisticsCount.workercount.avgage.toFixed(0)}}岁</text>
							<text class="primaryText3">在场 {{statisticsCount.presencecount.avgage.toFixed(0)}}岁</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<footers :activeTab="'projectManage'"></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,
				// showMapBack:false,
				backArr: [],
				searchsn: '',
				mapData: [],
				statisticsCount: {
					"projectcount": {
						"constructionStageCount14": 0,
						"constructionStageCount13": 0,
						"constructionStageCount15": 0,
						"constructionStageCount10": 0,
						"constructionStageCount12": 0,
						"constructionStageCount11": 0,
						"constructionStageCount1": 0,
						"saleAcreageTotal": 0,
						"constructionStageCount9": 0,
						"constructionStageCount8": 0,
						"constructionStageCount7": 0,
						"constructionStageCount6": 0,
						"constructionStageCount5": 0,
						"constructionStageCount4": 0,
						"constructionStageCount3": 0,
						"constructionStageCount2": 0,
						"projectNum": 0
					},
					"workercount": {
						"lwPersonYesterdayAdd": 0,
						"jfGlPersonTotal": 0,
						"age18": 0,
						"age18to25": 0,
						"womanPersonTotal": 0,
						"lsPersonTotal": 0,
						"jlGlPersonTotal": 0,
						"age45to60": 0,
						"lwPersonTotal": 0,
						"manPersonTotal": 0,
						"totalPerson": 0,
						"age25to35": 0,
						"glPersonTotal": 0,
						"yfGlPersonTotal": 0,
						"avgage": 0,
						"age35to45": 0,
						"glPersonYesterdayAdd": 0,
						"age60": 0
					},
					"devcount": {
						"ufaceDevNum": 0,
						"videoNum": 0,
						"environmentDevNum": 0
					},
					"presencecount": {
						"jfGlPersonTotal": 0,
						"age18": 0,
						"age18to25": 0,
						"womanPersonTotal": 0,
						"lsPersonTotal": 0,
						"jlGlPersonTotal": 0,
						"age45to60": 0,
						"lwPersonTotal": 0,
						"manPersonTotal": 0,
						"totalPerson": 0,
						"age25to35": 0,
						"glPersonTotal": 0,
						"yfGlPersonTotal": 0,
						"avgage": 0,
						"age35to45": 0,
						"age60": 0
					}
				},
				ageChartData: {
					categories: [
						"18及以下",
						"18-25岁",
						"25-35岁",
						"35-45岁",
						"45-59岁",
						"60及以上",
					],
					series: []
				},
				activeTabIndex: -1,
				parentSn: '',
				currentCompany: {
					companyName: '集团'
				},
				projectDetail: {}
			};
		},
		onLoad(options) {
   //        //部署三江第三方统一登录h5时需要打开此区域注释的代码
			// console.log('onLoad ==== ：' + window.location.href)
			// // 网页跳转 兼容第三方平台接入 ---做免码登录
			// if (window.location.href.indexOf('UID') != -1) {
			// 	uni.setStorageSync('UID', true);
			// 	let uid = window.location.href.split('UID=')[1]
			// 	let data = {
			// 		uid
			// 	}
			// 	this.sendRequest({
			// 		url: 'xmgl/sj/unifiedAuthentication/getLoginInfoByToken',
			// 		method: 'get',
			// 		data,
			// 		success: res => {
			// 			if (res.code == 200) {
			// 				console.log('onLoad ==== 得到的用户信息：' + JSON.stringify(res.result))
			// 				this.userInfo = res.result
			// 				uni.setStorageSync('userInfo', JSON.stringify(res.result));
			// 			}
			// 		}
			// 	})
			// }
			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
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			if (this.parentSn) {
				this.loadData(false);
				this.loadStatictisData()
			} else {
				this.initData(true)
			}
		},
		onShow() {


		},
		mounted() {
			// console.log('mounted')
		},
		methods: {
			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)
					}
				}


			},
			forwardFn() {
				var type = 'area'
				if (this.mapData[this.activeTabIndex].projectSn) {
					type = 'project'
				}
				uni.navigateTo({
					url: './projectManage?sn=' + this.searchsn + '&type=' + type
				})
			},
			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) {
					this.getProjectDetail()
				} else {
					this.loadData(type);
				}
				this.loadStatictisData()

			},
			//获取所有企业下区域数据
			loadData(type) {
				//type：true代表第一调用
				var that = this
				this.sendRequest({
					url: "xmgl/company/getComapnyStatisticsList",
					data: {
						sn: this.searchsn
					},
					method: "POST",
					success(res) {
						that.mapData = res.result.companyList ? res.result.companyList : res.result.projectList
						if (res.result.companyInfo) {
							that.currentCompany = res.result.companyInfo
						}

					}
				})
			},
			loadStatictisData() {
				var that = this
				this.sendRequest({
					url: "xmgl/workerInfo/getWorkerStatisticsCount",
					data: {
						sn: this.searchsn
					},
					method: "POST",
					success(res) {
						that.statisticsCount = res.result;
						var json1 = that.statisticsCount.presencecount
						var json2 = that.statisticsCount.workercount
						var arr1 = [json1.age18, json1.age18to25, json1.age25to35, json1.age35to45, json1
							.age45to60, json1.age60
						]
						var arr2 = [json2.age18, json2.age18to25, json2.age25to35, json2.age35to45, json2
							.age45to60, json2.age60
						]
						that.ageChartData.series = [{
								name: "在职人数",
								data: arr2
							},
							{
								name: "在场人数",
								data: arr1
							},
						]
						// that.$refs.ageChart.changeData('ageChart',that.ageChartData)
					}
				})
			},
			//获取项目详细
			getProjectDetail() {
				var that = this
				this.sendRequest({
					url: "xmgl/project/getProjectInfoBySn",
					data: {
						projectSn: this.searchsn
					},
					method: "POST",
					success(res) {
						that.projectDetail = res.result
						// that.currentCompany.companyName=res.result.projectName
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.statictisBox {
		width: 100%;
		height: 150px;
		background: url(../../static/bg1.png);
		color: white;
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 10px;

		.numBox {
			flex: 1;
			text-align: center;

			.num {
				font-size: 30px;
				line-height: 40px;
			}

			.text {
				font-size: 12px;

			}
		}
	}

	.forwardImg {
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -15px;
		opacity: 0.8;
	}

	.statusTips {
		position: absolute;
		right: 0px;
		top: 2px;
		display: flex;
		align-items: center;

		.kuai {
			width: 12px;
			height: 12px;
			margin-left: 8px;
		}

		.text {
			font-size: 12px;
			color: $uni-text-color;
			opacity: 0.9;
			margin-left: 3px;
		}
	}

	.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: 3px;

		.kuai {
			min-width: 20px;
			height: 20px;
			line-height: 20px;
			color: white;
			font-size: 12px;
		}
	}

	.avgageBox {
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
		color: $uni-text-color;

		.primaryText {
			margin-right: 10px;
		}
	}
</style>