zhgdlarge/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftCenter.vue

<template>
	<div class="leftTop">
		<Card title="人员概况">
			<div class="topPeopleNum">
				<div class="dataTlo">
					<div class="text"><i>实名制人数</i></div>
					<div class="num">
						<i>{{ statisticsCount.workercount.totalPerson || 0 }}</i>
					</div>
				</div>
				<div class="dataTlt">
					<div class="text"><i>在场人数</i></div>
					<div class="num">
						<i>{{ statisticsCount.presencecount.totalPerson || 0 }}</i>
					</div>
				</div>
			</div>
			<div class="bottomPeopleNum">
				<div style="display: flex; margin-left: 2%">
					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 2%"></div>
					<div><i>管理人员</i></div>
				</div>
				<div class="peopleData">
					<div class="peoImg"><img src="@/assets/images/comprehensiveManage/project3.png" alt="" /></div>
					<div class="peoNum">
						<div class="penName"></div>
						<div class="penN"></div>
						<div class="numData1 numData">
							<div class="text"><i>甲方人员</i></div>
							<div class="num">
								<i style="color: #eea959"
									>{{ statisticsCount.presencecount.jfGlPersonTotal || 0 }}/{{
										statisticsCount.workercount.jfGlPersonTotal || 0
									}}</i
								>
							</div>
						</div>
						<div class="numData2 numData">
							<div class="text"><i>监理人员</i></div>
							<div class="num">
								<i style="color: #82fbea"
									>{{ statisticsCount.presencecount.jlGlPersonTotal || 0 }}/{{
										statisticsCount.workercount.jlGlPersonTotal || 0
									}}</i
								>
							</div>
						</div>
						<div class="numData3 numData">
							<div class="text"><i>乙方人员</i></div>
							<div class="num">
								<i style="color: #7aa0ea"
									>{{ statisticsCount.presencecount.yfGlPersonTotal || 0 }}/{{
										statisticsCount.workercount.yfGlPersonTotal || 0
									}}</i
								>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import { ref, onMounted, watch } from "vue";
// ts
type Props = {
	statisticsCount?: any; // 传入人员数据
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	statisticsCount: {}
});
// 人员概况数据
const statisticsCount = ref({
	workercount: {},
	presencecount: {}
} as any);

watch(
	() => props.statisticsCount,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			statisticsCount.value = newVal;
		}
	}
);
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	.topPeopleNum {
		height: 40%;
		display: flex;
		.dataTlo {
			width: 35%;
			height: 100%;
			background: url("@/assets/images/comprehensiveManage/project9.png") no-repeat;
			background-size: 100% 100%;
			margin-left: 10%;
		}
		.dataTlt {
			width: 35%;
			height: 100%;
			background: url("@/assets/images/comprehensiveManage/project12.png") no-repeat;
			background-size: 100% 100%;
			margin-left: 10%;
		}
		.text {
			color: #fff;
			font-size: 14px;
			margin-left: 50%;
			margin-top: 15%;
		}
		.num {
			font-size: 24px;
			font-weight: bold;
			background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-left: 47%;
			margin-top: 5%;
		}
	}
	.bottomPeopleNum {
		height: 60%;
		div {
			height: 20%;
			color: #fff;
			font-size: 16px;
		}
		.peopleData {
			height: 80%;
			display: flex;
			.peoImg {
				width: 30%;
				height: 100%;
				img {
					margin-left: 30%;
					width: 50%;
					margin-top: 7%;
				}
			}
			.peoNum {
				height: 100%;
				width: 70%;
				position: relative;
				.penName {
					background: rgba(39, 88, 192, 0.6);
					margin: 5% 5%;
				}
				.penN {
					height: 10px;
					background: url("@/assets/images/comprehensiveManage/project8.png") no-repeat;
					background-size: 100% 100%;
					margin: 13% 5%;
				}
				.numData1 {
					left: 5%;
					top: -10%;
				}
				.numData2 {
					left: 35%;
					top: -10%;
				}
				.numData3 {
					left: 65%;
					top: -10%;
				}
				.numData {
					position: absolute;
					height: 60%;
					width: 30%;
					display: flex;
					flex-direction: column;
					align-items: center;
					.text {
						margin-top: 18%;
						font-size: 16px;
					}
					.num {
						font-size: 20px;
						margin-top: 18%;
						// margin-left: 10%;
					}
				}
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
</style>