<template>
  <!-- 防汛排涝  监测预警 -->
  <div class="Jianceyujin">
    <!-- 左侧监测预警 -->
    <Transition name="fade_left">
      <MonitoringWarningLeft v-show="!showPanel"></MonitoringWarningLeft>
    </Transition>
    <!-- 右侧监测预警 -->

    <Transition name="fade_right">
      <MonitoringWarningRigh v-show="!showPanel"></MonitoringWarningRigh>
    </Transition>

    <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
    <!-- 气象云图播放进度 -->
      <RainsIntervalBtn v-show="isqixiangMap"></RainsIntervalBtn>
  </div>
</template>
<script setup name="Jianceyujin">
import { ref, reactive, onMounted } from 'vue';
import MonitoringWarningLeft from './MonitoringWarningLeft/index.vue';
import MonitoringWarningRigh from './MonitoringWarningRigh/index.vue';
import RainsIntervalBtn from './MonitoringWarningRigh/component/RainsIntervalBtn.vue';
// 面板控制组件
import PanelDisplayHidden from '@/views/pictureOnMap/page/components/PanelDisplayHidden.vue';
const showPanel = ref(false); //面板展开收起
const PanelChange = val => {
  showPanel.value = val;
};
const { proxy } = getCurrentInstance();
import bus from "@/bus";

const isqixiangMap = ref(false); //面板展开收起

onMounted(() => {
   bus.on('MeteorologicalCloudMapBus', is => {
    isqixiangMap.value=is
   })
});
onBeforeUnmount(() => {
  bus.off('MeteorologicalCloudMapBus');
});
</script>
<style lang="scss" scoped>
.Jianceyujin {
}
</style>