zhgdyun/src/views/commandScreen/liveScreen/index.vue

<template>
	<div class="projectContent">
		<div class="left">
			<leftTop :projectData="projectData" class="leftTop" ref="leftTopRef"></leftTop>
			<leftCenter :statisticsCount="statisticsCount" class="leftCenter"></leftCenter>
			<leftBottom :statisticsCount="statisticsCount" class="leftBottom"></leftBottom>
		</div>
		<div class="center">
			<centerTop :projectData="projectData" class="centerTop" ref="centerTopRef"></centerTop>
			<div class="centerBottom">
				<centerBottomLeft :projectData="projectData" class="centerBottomLeft" ref="centerBottomLeftRef"></centerBottomLeft>
				<centerBottomRight :projectData="projectData" class="centerBottomRight" ref="centerBottomRightRef"></centerBottomRight>
			</div>
		</div>
		<div class="right">
			<rightTop class="rightTop" ref="rightTopRef"></rightTop>
			<rightBottom class="rightBottom" ref="rightBottomRef"></rightBottom>
		</div>
	</div>
</template>

<script setup lang="ts">
import leftTop from "@/views/commandScreen/liveScreen/leftTop.vue";
import leftCenter from "@/views/commandScreen/liveScreen/leftCenter.vue";
import leftBottom from "@/views/commandScreen/liveScreen/leftBottom.vue";
import centerTop from "@/views/commandScreen/liveScreen/centerTop.vue";
import centerBottomLeft from "@/views/commandScreen/liveScreen/centerBottomLeft.vue";
import centerBottomRight from "@/views/commandScreen/liveScreen/centerBottomRight.vue";
import rightTop from "@/views/commandScreen/liveScreen/rightTop.vue";
import rightBottom from "@/views/commandScreen/liveScreen/rightBottom.vue";
import { GlobalStore } from "@/stores";
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 getProjectInfo = async (showLoading: boolean) => {
	const res = await getProjectDetail({ projectSn: store.sn },showLoading);
	projectData.value = res.result;
};

//获取人员概览
const getPersonDetail = async () => {
	const res = await getWorkerStatisticsCountApi({ sn: store.sn });
	statisticsCount.value = res.result;
};

const leftTopRef = ref();
const centerTopRef = ref();
const centerBottomLeftRef = ref();
const rightTopRef = ref();
const rightBottomRef = ref();
const callChildFn = async () => {
	nextTick( async ()=>{
		leftTopRef.value.projectTypeEnum()
		centerTopRef.value.getQueryBySnData()
		centerBottomLeftRef.value.getProgressOption()
		rightTopRef.value.getSafeInfo()
		rightBottomRef.value.getList()
	})
}
//定时器
const interval = ref(null as any);
//定时调用
const startInterval = async () => {
	interval.value= setInterval(() => {
		getPersonDetail();
		getProjectInfo();
		callChildFn();
	}, 30 * 1000);
}
// 在组件销毁时清除 interval
const destroyInterval = () => {
	if (interval.value) {
		clearInterval(interval.value);
  }
}
// 在组件销毁时调用 destroyInterval 方法清除 interval
onBeforeUnmount(() => {
	destroyInterval();
})
window.onbeforeunload = (e) => {
	destroyInterval();
}
onMounted( async () => {
	getPersonDetail();
	getProjectInfo();
	startInterval();
});
</script>
<style lang="scss" scoped>
.projectContent {
	width: 100%;
	height: 100%;
	display: flex;
	.left {
		width: 26%;
		.leftTop {
			height: 32%;
		}
		.leftCenter {
			height: 33%;
			margin: 3% 0 3% 0;
		}
		.leftBottom {
			height: 35.25%;
		}
	}
	.center {
		width: 46%;
		margin: 0 1%;

		.centerTop {
			height: 66%;
			margin-bottom: 2.1%;
		}
		.centerBottom{
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: space-between;
			.centerBottomLeft {
				width: 49%;
				height: 35.23%;
			}
			.centerBottomRight {
				width: 49%;
				height: 35.23%;
			}
		}
	}
	.right {
		width: 26%;

		.rightTop {
			height: 32%;
		}
		.rightBottom {
			height: 78.636%;
			margin: 3% 0 0 0;
		}
	}
}
</style>