- <template>
- <div class="moduleBox moduleBoxLeft flex flex-v">
- <EachModuleTitle title="防汛调度" />
- <div class="typeList flex">
- <div class="flex-1 tab" :class="tabActive==i.value?'active':''" v-for="i in tabData" :key="i.value" @click="tabClickFun(i)">{{i.label}}</div>
- </div>
- <div class="tabContent flex flex-v">
- <fxjc v-if="tabActive==1" />
- <clgz v-if="tabActive==2" />
- <bzdd v-if="tabActive==3" />
- <pzdd v-if="tabActive==4" />
- </div>
- </div>
- </template>
-
- <script setup name="PailaodiaoduLeft">
- import bus from '@/bus';
- import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue'
- import fxjc from './components/fxjc.vue'
- import clgz from './components/clgz.vue'
- import bzdd from './components/bzdd.vue'
- import pzdd from './components/pzdd.vue'
- const emit = defineEmits(['changeType'])
- const events_params = {
- setHighlight: { key: "setHighlight" },
- setLayerVisible: { key: "setLayerVisible" },
- };
- const tabData=[
- {label:'防汛检查',value:'1'},
- {label:'车辆跟踪',value:'2',keys:'泵车离线,泵车在线'},
- {label:'泵站调度',value:'3', keys:"rainPumpStation"},
- {label:'排渍调度',value:'4',keys:"waterlogging"},
- ]
- const tabActive=ref(1)
- const tabClickFun=(item)=>{
- const { setLayerVisible } = events_params;
- tabActive.value=item.value
- emit('changeType',item.value)
- closeAllLayer();
- item.keys && item.keys.split(',').forEach((i) => bus.emit(setLayerVisible.key, { layername: i, isCheck: true }));
- };
-
- const closeAllLayer = () => {
- const { setLayerVisible, setHighlight } = events_params;
- tabData.map((i) => (i.keys || '').split(',')).flat().filter(Boolean).flat().forEach((i) => bus.emit(setLayerVisible.key, { layername: i, isCheck: false }));
- bus.emit(setHighlight.key, []);
- };
- </script>
-
- <style lang="scss" scoped>
- .tabContent{
- height: calc(100% - 60px);
- overflow: hidden;
- }
- </style>