<template>
|
<el-row>
|
<el-col :span="7" class="page-right">
|
<!-- <el-scrollbar height="var(--fy-body-height)"> -->
|
<ManagementView></ManagementView>
|
<!-- </el-scrollbar> -->
|
</el-col>
|
<el-col :span="10">
|
<el-scrollbar class="page-left-top">
|
<VisualizationView></VisualizationView>
|
</el-scrollbar>
|
<el-scrollbar class="page-left-bottom">
|
<InspectionView></InspectionView>
|
</el-scrollbar>
|
</el-col>
|
<el-col :span="7" class="page-right">
|
<el-scrollbar height="var(--fy-body-height)">
|
<StatisticView></StatisticView>
|
</el-scrollbar>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script setup>
|
import { provide, ref } from 'vue'
|
import InspectionView from '@/views/inspection/InspectionView.vue'
|
import ManagementView from '@/views/management/ManagementView.vue'
|
import StatisticView from '@/views/management/StatisticView.vue'
|
import VisualizationView from '@/views/visualization/VisualizationView.vue'
|
import { useAreaStore } from '@/stores/area.js'
|
|
const windowHeight = ref(window.innerHeight)
|
const areaStore = useAreaStore()
|
areaStore.setTimeOneDay()
|
|
// const headerHeight = computed(()=>{
|
// return
|
// })
|
// fetch('../../assets/styles/layout.scss').then((res) => {
|
// console.log(res.text())
|
// })
|
|
provide('mapHeight', 'calc(var(--fy-body-height) / 3 * 2)')
|
</script>
|
|
<style scoped>
|
.page-left-top {
|
height: calc(var(--fy-body-height) / 3 * 2);
|
/* background-color: aquamarine; */
|
}
|
.page-left-bottom {
|
height: calc(var(--fy-body-height) / 3 * 1);
|
/* background-color: bisque; */
|
}
|
|
.page-right {
|
/* background-color: aliceblue; */
|
}
|
</style>
|
