107 lines
2.3 KiB
Vue
107 lines
2.3 KiB
Vue
<template>
|
|
<div class="vehicleBox">
|
|
<div class="top">
|
|
<div class="left">
|
|
<TopLeft ref="topLeftRef"></TopLeft>
|
|
</div>
|
|
<div class="right">
|
|
<TopRight ref="topRightRef"></TopRight>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottom-left">
|
|
<BottomLeft ref="bottomLeftRef"></BottomLeft>
|
|
</div>
|
|
<div class="bottom-right">
|
|
<BottomRight ref="bottomRightRef"></BottomRight>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import TopLeft from "@/views/sevenLargeScreen/vehicleManagement/topLeft.vue";
|
|
import TopRight from "@/views/sevenLargeScreen/vehicleManagement/topRight.vue";
|
|
import BottomLeft from "@/views/sevenLargeScreen/vehicleManagement/bottom-left.vue";
|
|
import BottomRight from "@/views/sevenLargeScreen/vehicleManagement/bottom-right.vue";
|
|
import { ref,onMounted,onBeforeUnmount,nextTick } from "vue";
|
|
// export default {
|
|
// components: {
|
|
// TopLeft,
|
|
// TopRight,
|
|
// BottomLeft,
|
|
// BottomRight
|
|
// }
|
|
// };
|
|
const topLeftRef = ref();
|
|
const topRightRef = ref();
|
|
const bottomLeftRef = ref();
|
|
const bottomRightRef = ref();
|
|
const callChildFn = async () => {
|
|
nextTick( async () =>{
|
|
topLeftRef.value.getBoxAlarmList()
|
|
topRightRef.value.getExitList()
|
|
bottomLeftRef.value.getMemberCareList()
|
|
bottomRightRef.value.getVehicleList()
|
|
})
|
|
// await topLeftRef.value.getBoxAlarmList()
|
|
// await topRightRef.value.getExitList()
|
|
// await bottomLeftRef.value.getMemberCareList()
|
|
// await bottomRightRef.value.getVehicleList()
|
|
}
|
|
//定时器
|
|
const interval = ref(null as any);
|
|
//定时调用
|
|
const startInterval = async () => {
|
|
interval.value= setInterval(() => {
|
|
callChildFn();
|
|
}, 30 * 1000);
|
|
}
|
|
// 在组件销毁时清除 interval
|
|
const destroyInterval = () => {
|
|
if (interval.value) {
|
|
clearInterval(interval.value);
|
|
}
|
|
}
|
|
// 在组件销毁时调用 destroyInterval 方法清除 interval
|
|
onBeforeUnmount(() => {
|
|
destroyInterval();
|
|
})
|
|
window.onbeforeunload = (e) => {
|
|
destroyInterval();
|
|
}
|
|
onMounted(() => {
|
|
startInterval();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.vehicleBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
.top {
|
|
height: 49%;
|
|
display: flex;
|
|
margin-bottom: 1%;
|
|
.left {
|
|
width: 49%;
|
|
margin-right: 1%;
|
|
}
|
|
.right {
|
|
width: 50%;
|
|
}
|
|
}
|
|
.bottom {
|
|
height: 49%;
|
|
display: flex;
|
|
.bottom-left{
|
|
width: 20%;
|
|
margin-right: 1%;
|
|
}
|
|
.bottom-right{
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|