zhgdlarge/src/views/sevenLargeScreen/laborManagement/index.vue

<template>
	<div class="laboorBox">
		<div class="left">
			<LeftTop class="leftTop" @openDialog="openPeopleCountDialog"></LeftTop>
			<LeftBottom class="leftBottom"></LeftBottom>
		</div>
		<div class="right">
			<RightTop class="rightTop"></RightTop>
			<RightCenter class="rightCenter"></RightCenter>
			<RightBottom class="rightBottom"></RightBottom>
		</div>
		<dataDialog ref="partyBuildRef"></dataDialog>
	</div>
</template>

<script lang="ts" setup>
import LeftTop from "@/views/sevenLargeScreen/laborManagement/leftTop.vue";
import LeftBottom from "@/views/sevenLargeScreen/laborManagement/leftBottom.vue";
import RightTop from "@/views/sevenLargeScreen/laborManagement/rightTop.vue";
import RightCenter from "@/views/sevenLargeScreen/laborManagement/rightCenter.vue";
import RightBottom from "@/views/sevenLargeScreen/laborManagement/rightBottom.vue";
import dataDialog from "./data-dialog.vue";
import { ref } from "vue";
// export default {
// 	components: {
// 		LeftTop,
// 		LeftBottom,
// 		RightTop,
// 		RightCenter,
// 		RightBottom
// 	}
// };
// 弹窗
const partyBuildRef = ref();
const openPeopleCountDialog = (obj:any) => {
	partyBuildRef.value.openDialog(obj);
	// console.log(partyBuildRef.value);
};

</script>

<style lang="scss" scoped>
.laboorBox {
	width: 100%;
	height: 100%;
	display: flex;
	.left {
		width: 75%;
		height: 102%;
		.leftTop {
			height: 67%;
		}
		.leftBottom {
			height: 29%;
		}
	}
	.right {
		width: 25%;
		height: 102%;
		.rightTop {
			height: 29%;
		}
		.rightCenter {
			margin: 8% 0 8% 0;
			height: 29%;
		}
		.rightBottom {
			height: 29%;
		}
	}
}
</style>