zhgdlarge/src/views/commandScreen/commandCenter/index.vue

<template>
	<div class="projectContent">
		<div class="left">
			<leftTop class="leftTop"></leftTop>
			<leftBottom class="leftBottom" @openDialog="openPeopleCountDialog"></leftBottom>
		</div>
		<div class="center">
			<centerTop class="centerTop" @openDialog="openPeopleCountDialog"></centerTop>
			<centerBottom class="centerBottom"></centerBottom>
		</div>
		<div class="right">
			<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
		</div>
		<dataDialog ref="partyBuildRef"></dataDialog>
	</div>
</template>

<script setup lang="ts">
import leftTop from "@/views/commandScreen/commandCenter/leftTop.vue";
import leftBottom from "@/views/commandScreen/commandCenter/leftBottom.vue";
import centerTop from "@/views/commandScreen/commandCenter/centerTop.vue";
import centerBottom from "@/views/commandScreen/commandCenter/centerBottom.vue";
import rightAll from "@/views/commandScreen/commandCenter/rightAll.vue";
import { GlobalStore } from "@/stores";
import dataDialog from "../dialogCompnnents/data-dialog.vue";
const store = GlobalStore();
import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
import { ref, onMounted, onBeforeUnmount,nextTick } from "vue";
const statisticsCount = ref(null as any);

const projectData = ref(null as any);
// 弹窗
const partyBuildRef = ref();
const openPeopleCountDialog = (index:any) => {
	partyBuildRef.value.openDialog(index);
	// console.log(partyBuildRef.value);
};
</script>
<style lang="scss" scoped>
.projectContent {
	width: 100%;
	height: 100%;
	display: flex;
	.left {
		height: 109.5%;
		width: 26%;
		transform: translateY(-70px);
		.leftTop {
			height: 24.5%;
		}
		.leftBottom {
			height: 75.5%;
			margin: 3% 0 3% 0;
		}
	}
	.center {
		width: 46%;
		margin: 0 1%;

		.centerTop {
			height: 53.8%;
			// margin-bottom: 3%;
		}
		.centerBottom {
			height: 45.85%;
			margin: 2% 0 0 0;
		}
	}
	.right {
		width: 26%;
		height: 109.2%;
		transform: translateY(-70px);
		// .rightAll {
		// 	height: 32%;
		// }
		// .rightCenter {
		// 	height: 33%;
		// 	margin: 3% 0 3% 0;
		// }
		// .rightBottom {
		// 	height: 32%;
		// }
	}
}
</style>