zhgdyunapp_vue3/pages/homePage/newhomePage.vue

<template>
	<view class="fullHeight">
		<view class="header_box">
			<view class="tab_main">
				<view class="tab flex2" style="background-color: white;">
					<view class="tabType" v-for="item in tabTypeListUp" :key="item.id" @click="changeTab(item.id)"
						:class="checkedTab==item.id?'checkedTab':'noCheckTab'">
						<image v-if="checkedTab==item.id" src="@/static/bthgIcon/project_icon6.png" mode=""></image>
						{{item.tabName}}
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="smallHeight" scroll-y>
			<view class="personnel_box" v-if="checkedTab == 1">
				<view class="bottomPeopleNum">
					<view>
						<image src="/static/bthgIcon/homeOverview_icon1.png" alt="" />
						<view>监理单位</view>
						<view>{{ homeOverviewCountEnterprise.supervise }}个</view>
					</view>
					<view>
						<image src="/static/bthgIcon/homeOverview_icon2.png" alt="" />
						<view>EPC承包商</view>
						<view>{{ homeOverviewCountEnterprise.epc }}个</view>
					</view>
					<view>
						<image src="/static/bthgIcon/homeOverview_icon3.png" alt="" />
						<view>施工承包商</view>
						<view>{{ homeOverviewCountEnterprise.construction }}个</view>
					</view>
				</view>
				<view class="personnel_count">
					<view>
						<view>
							<view>工地总人数</view>
							<view>
								<text>{{ selectPersonInfo.toaltPerson && selectPersonInfo.toaltPerson.totalPerson }}</text>人
							</view>
						</view>
						<image src="/static/bthgIcon/personnel_icon1.png" alt="" />
					</view>
					<view>
						<view>
							<view>今日出勤人数</view>
							<view>
								<text>{{ selectPersonInfo.attendancePerson && selectPersonInfo.attendancePerson.totalPerson }}</text>人
							</view>
						</view>
						<image src="/static/bthgIcon/personnel_icon2.png" alt="" />
					</view>
				</view>
				<view class="right-top_header">
					<view class="right-top_header_left">
						<view @click="onSelectPersonType(item)" :class="{ active: selectPersonType == item.id }"
							v-for="item in selectPersonTypeList" :key="item.id">
							{{ item.selectPersonTypeName }}
						</view>
					</view>
				</view>
				<view class="columnarChart">
					<u-charts canvas-id="columnarChart1" chartType="column" :opts="columnarChart1" ref="columnarChart1"
						:cWidth="cWidth" :cHeight="cHeight" :legends="false" />
				</view>
			</view>
			<safeFile v-else-if="checkedTab == 2"></safeFile>
			<massFile v-else-if="checkedTab == 3"></massFile>
			<progressCurve v-else-if="checkedTab == 4"></progressCurve>
			<constructionFile v-else-if="checkedTab == 5"></constructionFile>
			<pipelineWeld v-else-if="checkedTab == 6"></pipelineWeld>
		</scroll-view>

		<footers v-if="(accountType == 5 || accountType == 6 || accountType == 10) && projectDetail.projectSn"
			:activeTab="'homePage'"></footers>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/component.vue';
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import footers from '@/components/footers/footers.vue';
	import safeFile from "@/pages/homePage/components/safeFile.vue"
	import massFile from "@/pages/homePage/components/massFile.vue"
	import progressCurve from "@/pages/homePage/components/progressCurve.vue"
	import constructionFile from "@/pages/homePage/components/constructionFile.vue"
	import pipelineWeld from "@/pages/homePage/components/pipelineWeld.vue"

	import {
		getBottomLevelData
	} from "@/utils/tool.js"

	export default {
		components: {
			footers,
			uCharts,
			safeFile,
			massFile,
			progressCurve,
			constructionFile,
			pipelineWeld
		},
		props: {
			userInfo: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				swiperList: [{
					id: 1,
					imgUrl: "homepage_bg4"
				}, {
					id: 2,
					imgUrl: "homepage_bg3"
				}, {
					id: 3,
					imgUrl: "homepage_bg2"
				}, {
					id: 4,
					imgUrl: "homepage_bg1"
				}],
				checkedTab: 1,
				tabTypeList: [{
					id: 1,
					tabName: '人员管理'
				}, {
					id: 2,
					tabName: '安全管理'
				}, {
					id: 3,
					tabName: '质量管理'
				}, {
					id: 4,
					tabName: '进度曲线'
				}, {
					id: 5,
					tabName: '施工管理'
				}, {
					id: 6,
					tabName: '管道焊接'
				}],
				selectPersonInfo: {},
				selectPersonList: [],
				selectPersonTypeList: [{
						id: 1,
						selectPersonTypeName: '在册人数'
					},
					{
						id: 2,
						selectPersonTypeName: '出勤人数'
					},
					{
						id: 3,
						selectPersonTypeName: '在场人数'
					}
				],
				selectPersonType: 1,
				columnarChart1: {
					categories: [],
					series: [{
						// name: "温度",
						data: []
					}]
				},
				cWidth: 0,
				cHeight: 0,
				projectDetail: {},
				accountType: 1,
				uid: '',
				haveModuleList: [],
				homeOverviewCountEnterprise: {
					supervise: 0,
					epc: 0,
					construction: 0
				}
			}
		},
		mounted() {

		},
		onShow() {

		},
		onLoad(options) {
			// var userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			// console.log('userInfo===========', userInfo)
			// this.userInfo = userInfo;
			// console.log("我是组件", this.userInfo)

		},
		watch: {
			userInfo: {
				handler() {
					console.log("我是组件", this.userInfo)
					this.accountType = this.userInfo.accountType
					this.getHomePageSelectPersonTypeAndEduStatistics();
					const that = this;
					uni.getSystemInfo({
						success: function(res) {
							console.log(res.windowWidth);
							console.log(11111, res.windowHeight, );
							that.cWidth = res.windowWidth - uni.upx2px(100);
							that.cHeight = uni.upx2px(420)
						}
					});
					this.uid = uni.getStorageSync('UID');
					this.getProjectDetail();
					this.executeChangeTab();
					this.getModuleAllList();
				},
				immediate: true,
				deep: true,
			}
		},
		computed: {
			tabTypeListUp() {
				const resultList = this.tabTypeList.map(item => {
					// if(this.haveModuleList)
					const findIndex = this.haveModuleList.findIndex(ele => {
						if (item.tabName == "进度曲线") {
							return ele.moduleName == "进度管理"
						}
						return ele.moduleName == item.tabName;
					})
					if (findIndex > -1) {
						return item
					}
				}).filter(item => item);
				this.checkedTab = resultList.length > 0 ? resultList[0].id : this.checkedTab;
				return resultList;
			}
		},
		methods: {
			getHomePageCountEnterprise() {
				var that = this
				this.sendRequest({
					url: "xmgl/homeOverview/countEnterprise",
					data: {
						projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
					},
					method: "get",
					success(res) {
						if (res.success) {
							console.log(res);
							that.homeOverviewCountEnterprise = res.result;
						}
					}
				})
			},
			getModuleAllList() {
				var that = this
				this.sendRequest({
					url: "xmgl/baseModule/getModuleAndMenuList",
					data: {
						projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
						userId: JSON.parse(uni.getStorageSync('userInfo')).userId,
					},
					method: "post",
					success(result) {
						if (result.success) {
							that.haveModuleList = result.result.moduleList.filter(item => item.moduleType == 2 &&
								item.pcShow != 2);
							uni.setStorageSync("haveModuleList", that.haveModuleList);
							console.log(88888888, that.haveModuleList, that.tabTypeList)
						}
					}
				})
			},
			getProjectDetail() {
				var that = this
				this.sendRequest({
					url: 'xmgl/project/getProjectInfoBySn',
					data: {
						projectSn: this.userInfo.sn
						// 获取存储数组最底层的projectSn
					},
					method: 'POST',
					success(res) {
						that.projectDetail = res.result
						uni.setStorageSync('projectDetail', JSON.stringify(res.result))
					}
				})
			},
			//切换tab
			changeTab(type) {
				if (type == this.checkedTab) return;
				this.checkedTab = type;
				this.executeChangeTab();
			},
			executeChangeTab() {
				if (this.checkedTab == 1) {
					this.getHomePageCountEnterprise();
					this.getHomePageSelectProjectComapnyWorkTotalList()
				}
			},
			getHomePageSelectPersonTypeAndEduStatistics() {
				const that = this;
				this.sendRequest({
					url: 'xmgl/homePage/selectPersonTypeAndEduStatistics',
					data: {
						projectSn: this.userInfo.sn
					},
					method: 'post',
					success(res) {
						console.log(res.result.iconType)
						that.selectPersonInfo = res.result.personType;
					}
				})
			},
			onSelectPersonType(row) {
				this.selectPersonType = row.id;
				const dataX = this.selectPersonList.map(item => item.enterpriseName);
				const dataY = this.selectPersonList.map(item => {
					if (this.selectPersonType == 1) {
						return item.totalPersonNum;
					} else if (this.selectPersonType == 2) {
						return item.attendancePersonNum;
					} else if (this.selectPersonType == 3) {
						return item.presencePersonNum;
					}
				});
				this.columnarChart1.textDataX = this.selectPersonList.map(item => item.enterpriseName);;
				this.columnarChart1.categories = dataX
				this.columnarChart1.series = [{
					// name: "温度",
					data: dataY
				}]
				this.$refs.columnarChart1.changeData('columnarChart1', this.columnarChart1)
				// this.weldEacherChart(this.$refs.personnelChart, dataX, dataY, 'personnelChart', this.selectPersonList);
			},
			// 人员管理查询项目下所有企业出勤人数列表
			getHomePageSelectProjectComapnyWorkTotalList() {
				const that = this;
				this.sendRequest({
					url: 'xmgl/homePage/selectProjectComapnyWorkTotalList',
					data: {
						projectSn: this.userInfo.sn
					},
					method: 'post',
					success(res) {
						console.log(res.result.iconType)
						that.selectPersonList = res.result;
						that.onSelectPersonType({
							id: that.selectPersonType
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.smallHeight {
		// height: calc(100vh - 432rpx - 92rpx);
		// margin-top: 92rpx;
		// padding-bottom: 110rpx;

		.personnel_box {
			margin-top: 24rpx;
			padding: 0 20rpx 20rpx;

			.bottomPeopleNum {
				width: 100%;
				// height: 50%;
				color: #444444;
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;

				>view {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// background: url('@/assets/images/bthgIcon/homeOverview_bg5.png') no-repeat;
					// background-size: 100% 100%;
					// cursor: pointer;
					font-size: 28rpx;

					>image {
						width: 72rpx;
						height: 86rpx;
					}

					>view {
						margin-left: 20rpx;
					}
				}

				>view:not(:first-child) {
					margin-left: 20rpx;
				}
			}

			.columnarChart {
				margin-top: 20rpx;
			}

			.personnel_count {
				display: flex;
				justify-content: space-between;

				>view {
					// width: calc(360rpx - 12rpx);
					width: calc(49% - 12rpx);
					height: 140rpx;
					background: #e9f2ff;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 44rpx 24rpx 24rpx;
					cursor: pointer;

					>view:first-child {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						>view:first-child {
							color: #444444;
							font-size: 28rpx;
						}

						>view:last-child {
							color: #0056a8;
							margin-top: 24rpx;

							>text {
								font-size: 36rpx;
								margin-right: 24rpx;
								display: inline-block;
							}
						}
					}

					>image {
						width: 88rpx;
						height: 88rpx;
					}
				}
			}

			.right-top_header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// margin-left: 32rpx;
				margin-top: 24rpx;

				.right-top_header_left {
					display: flex;

					>view {
						border: 2rpx solid #0056A8;
						padding: 6rpx 12rpx;
						font-size: 24rpx;
						color: #0056a8;
						cursor: pointer;
						position: relative;
						border-radius: 6rpx;
					}

					>view:not(:first-child) {
						margin-left: 20rpx;
					}

					>view.active {
						background-color: #2B8DF3;
						border-color: #2B8DF3;
						color: white;
					}

					.el-icon-close {
						position: absolute;
						font-size: 16rpx;
						top: -2rpx;
						right: -2rpx;
						background-color: #ff0000;
					}
				}
			}
		}

		.right-top_header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right-top_header_left {
				display: flex;

				>view {
					border: 2rpx solid #0056a8;
					padding: 6rpx 12rpx;
					font-size: 24rpx;
					color: #0056a8;
					cursor: pointer;
					position: relative;
				}

				>view:not(:first-child) {
					margin-left: 20rpx;
				}

				>view.active {
					background-color: #0056a8;
					color: white;
				}
			}
		}
	}

	.header_box {
		position: relative;

		.header_bg {
			width: 100vw;
			height: 330rpx;
			background-image: url(@/static/bthgIcon/homePage_bg5.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			// background: linear-gradient(180deg, #2B8DF3 0%, #F4F5FD 100%);
			// position: absolute;
			// top: 0;
			position: relative;

			.userBox {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 100%;
				padding: 0 62rpx;
				display: flex;

				>view:last-child {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					color: white;
					font-size: 30rpx;
					margin-left: 24rpx;

					>text:last-child {
						font-size: 24rpx;
					}
				}
			}
		}

		.uni-margin-wrap {
			padding: 94rpx 20rpx 20rpx;

			.swiper {
				height: 376rpx;

				.swiperIcon {
					width: 100%;
					height: 100%;
				}
			}
		}

		.flex2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tab_main {
			width: 100%;
			margin-top: 20rpx;
			// position: absolute;
			// bottom: -88rpx;
		}

		.tab {
			// width: 100%;
			overflow: auto;
			height: 120rpx;
			text-align: center;
			border-radius: 32rpx;

			// box-shadow: 0 0 20rpx rgba(194, 194, 194, 0.5);

			.tabType {
				// width: 33%;
				min-width: 180rpx;
				line-height: 86rpx;
				position: relative;
				// border-bottom: 2rpx solid rgba(194, 194, 194, 0.2);
				border-bottom: 2rpx dashed rgba(45, 142, 243, 0.3);
				color: #808080;
			}

			.checkedTab {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #2B8AFD;
				font-weight: bold;

				>image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			// .checkedTab::after {
			// 	content: '';
			// 	width: 120rpx;
			// 	height: 4rpx;
			// 	position: absolute;
			// 	left: 50%;
			// 	bottom: 0;
			// 	transform: translateX(-50%);
			// 	// color: #4181FE;
			// 	// border-bottom: 4rpx solid;
			// 	background: linear-gradient(to right, #2B8DF3, #ffffff);
			// }

			.noCheckTab {
				// padding-bottom: 4rpx;
			}
		}
	}
</style>