zhgdyunapp_vue3/pages/homePage/homePage.vue

<template>
	<view class="fullHeight" style="background-color: #F3F5F7">
		<view class="header_box">
			<view class="header_bg">
				<view class="userBox">
					<!-- <image class="userImg" :src="url_config + 'image/' + userInfo.avatar" v-if="userInfo.avatar"></image>
					<image class="userImg" src="@/static/userImg.png" v-else></image> -->
					<u-image :src="url_config + 'image/' + userInfo.avatar"
						style="width: 100rpx;height: 100rpx;border-radius: 50%;margin-right: 20rpx;" shape="circle"
						mode="scaleToFill">
						<image slot="error" style="width: 100rpx;height: 100rpx;border-radius: 50%;"
							src="@/static/userImg.png"></image>
					</u-image>
					<view>
						<text v-if="uid">{{userInfo.realName}}</text>
						<text v-else>{{userInfo.account}}</text>
						<text>
							<!-- 欢迎来到智慧工地系统 -->
							岗位(工种)：{{userInfo.postWorkTypeName}}
						</text>
					</view>
				</view>
			</view>
			<!-- <view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="false" autoplay :interval="2000" :duration="500">
					<swiper-item v-for="item in swiperList" :key="item.id">
						<image class="swiperIcon" :src="'/static/bthgIcon/'+item.imgUrl+'.png'"></image>
					</swiper-item>
				</swiper>
			</view> -->
			<view class="tab_main">
				<view class="tab flex2" style="background-color: white;">
					<view class="tabType" v-for="item in tabTypeList" :key="item.id" @click="changeTab(item.id)"
						:class="checkedTab==item.id?'checkedTab':'noCheckTab'">{{item.tabName}}</view>
				</view>
			</view>
		</view>
		<scroll-view class="smallHeight" scroll-y>
			<view class="personnel_box" v-if="checkedTab == 1">
				<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="345" :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
		},
		data() {
			return {
				userInfo: {},
				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,
				projectDetail: {},
				accountType: 1,
				uid: '',
			}
		},
		mounted() {
			this.executeChangeTab();
		},
		onShow() {
			this.getProjectDetail()
		},
		onLoad(options) {
			var userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			console.log('userInfo===========', userInfo)
			this.userInfo = userInfo;
			this.accountType = 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 - 25;
				}
			});
			this.uid = uni.getStorageSync('UID')
		},
		methods: {
			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.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;

			.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%;
			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);
			}

			.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>