<template> <div class="moduleBox moduleBoxRight flex flex-v"> <EachModuleTitle title="监测回顾" :rightTabArr="rightTabArr" activeTab="1" :isTab="true" @rightTabClick="rightTabClick"/> <div class="flex-1 flex flex-v"> <shuiqing v-if="tabActive==1" :day='props.day'/> <xianqing v-if="tabActive==2" :day='props.day'/> <gongqing v-if="tabActive==3" :day='props.day'/> </div> </div> </template> <script setup name="pailaodiaoduright"> import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue' import gongqing from './components/gongqing.vue'; import shuiqing from './components/shuiqing.vue'; import xianqing from './components/xianqing.vue'; const props = defineProps({ //数据 day: { type: String, default: '', }, }) const tabActive=ref(1) const rightTabArr=ref([ { label: '水雨情', value: '1', }, { label: '险情', value: '2', }, { label: '工情', value: '3', }, ]) const rightTabClick=(tab)=>{ console.log('tab',tab); tabActive.value=tab.value } </script> <style lang="scss" scoped> </style>