<template>
|
<div style="width: 100%; height: 100%">
|
<CurrentTaskDetails
|
:class="{ 'narrowScreen': narrowScreen }"
|
v-model:show="isShowCurrentTaskDetails"
|
:wayLineJobInfoId="route.query.wayLineJobInfoId"
|
:selectDockSn="route.query.dockSn"
|
:batchNo="route.query?.batchNo"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { useRoute } from 'vue-router'
|
import CurrentTaskDetails from '@/components/CurrentTaskDetails/CurrentTaskDetails.vue'
|
const route = useRoute()
|
const isShowCurrentTaskDetails = ref(true)
|
|
// 窄屏检测
|
const narrowScreen = ref(true)
|
const landscapeMode = ref(false)
|
provide('landscapeMode',landscapeMode)
|
const narrowScreenFun = () => {
|
narrowScreen.value = window.innerWidth / window.innerHeight < 16 / 9
|
landscapeMode.value = !narrowScreen.value
|
if (landscapeMode.value) {
|
document.body.classList.add('landscapeMode');
|
} else {
|
document.body.classList.remove('landscapeMode')
|
}
|
}
|
|
onMounted(() => {
|
narrowScreenFun()
|
window.addEventListener('resize', narrowScreenFun)
|
window.screen.orientation.addEventListener('change', narrowScreenFun)
|
})
|
|
onBeforeUnmount(() => {
|
window.removeEventListener('resize', narrowScreenFun)
|
window.screen.orientation.removeEventListener('change', narrowScreenFun)
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.narrowScreen{
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
}
|
</style>
|
