<template>
  <!-- 防汛排涝  监测预警  右侧 -->
  <div class="MonitoringWarningRigh">
    <div class="moduleBox moduleBoxRight">
      <div  class="h33">
        <!-- 降雨分布 -->
      <RainfallDistribution></RainfallDistribution>
      </div>
      <div  class="h33">
        <!-- 降雨预报 -->
      <RainfallForecast></RainfallForecast>
      </div>
      <div  class="h33">
         <!-- 监测告警 -->
      <MonitoringAlarm></MonitoringAlarm>
      </div>
    </div>
  </div>
</template>
<script setup name="MonitoringWarningRigh">
import { ref, reactive, onMounted } from 'vue';
import RainfallDistribution from '@/views/pictureOnMap/page/FloodControlAndDrainage/Jianceyujin/MonitoringWarningRigh/component/RainfallDistribution.vue';
import RainfallForecast from '@/views/pictureOnMap/page/FloodControlAndDrainage/Jianceyujin/MonitoringWarningRigh/component/RainfallForecast.vue';
import MonitoringAlarm from '@/views/pictureOnMap/page/FloodControlAndDrainage/Jianceyujin/MonitoringWarningRigh/component/MonitoringAlarm.vue';

const { proxy } = getCurrentInstance();


onMounted(() => {});
</script>
<style lang="scss" scoped>
.MonitoringWarningRigh {
  .h33 {
    height: 33.33%;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
}
</style>