<template> <!-- 海绵综合一张图 项目建设 --> <div class="publicContainer"> <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']"> <!-- 建设状态 --> <ConstructionStatus></ConstructionStatus> <!-- 项目展示--> <ProjectDisplay @qipaoDateMeth="qipaoDateMeth"></ProjectDisplay> </div> <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']"> <!-- 降雨日历 --> <CaldarRain></CaldarRain> <!--项目评估 --> <ProjectEvaluation></ProjectEvaluation> </div> </div> <!-- 项目详情 --> <qipao v-if="visibleqipao" @closed="closed" :allDateList="allDate"></qipao> </template> <script setup> import CaldarRain from '@/views/sponeScreen/waterFlood/rainCaldar.vue'; //降雨日历 import ConstructionStatus from '@/views/sponeScreen/projectHM/ConstructionStatus.vue'; //建设状态 import ProjectYype from '@/views/sponeScreen/projectHM/ProjectYype.vue'; //建设状态 import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay_1.vue'; //项目展示 import ProjectEvaluation from '@/views/sponeScreen/projectHM/ProjectEvaluation.vue'; //项目评估 import qipao from '@/views/sponeScreen/projectHM/gongchenkanbani_comp/qipao.vue'; const { proxy } = getCurrentInstance(); const showPanel = ref(true); //面板展开收起 const visibleqipao = ref(false); const allDate = ref({}); // 面板内容展开收起控制 const props = defineProps({ showPanel: { type: Boolean, }, }); watch( () => props.showPanel, () => { console.log('val---', props.showPanel); showPanel.value = props.showPanel; }, { immediate: true } ); function qipaoDateMeth(v, isShow) { visibleqipao.value = false; allDate.value = v; setTimeout(() => { if (isShow) { // debugger visibleqipao.value = true; } }, 10); } function closed(v) { visibleqipao.value = v; } onMounted(() => { // 默认缩放比、中心点 newfiberMapbox.map.easeTo({ center: [114.35, 34.802], zoom: 8.9, pitch: 55, }); }); </script> <style lang="scss" scoped> .publicContainer { position: relative; } </style>