Newer
Older
DH_Apicture / src / views / pictureOnMap / page / FloodControlAndDrainage / Pailaodiaodu / MonitoringWarningLeft / index.vue
@zhangqy zhangqy on 29 Nov 1 KB first commit
  1. <template>
  2. <div class="moduleBox moduleBoxLeft flex flex-v">
  3. <EachModuleTitle title="防汛调度" />
  4. <div class="typeList flex">
  5. <div class="flex-1 tab" :class="tabActive==i.value?'active':''" v-for="i in tabData" :key="i.value" @click="tabClickFun(i)">{{i.label}}</div>
  6. </div>
  7. <div class="tabContent flex flex-v">
  8. <fxjc v-if="tabActive==1" />
  9. <clgz v-if="tabActive==2" />
  10. <bzdd v-if="tabActive==3" />
  11. <pzdd v-if="tabActive==4" />
  12. </div>
  13. </div>
  14. </template>
  15.  
  16. <script setup name="PailaodiaoduLeft">
  17. import bus from '@/bus';
  18. import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue'
  19. import fxjc from './components/fxjc.vue'
  20. import clgz from './components/clgz.vue'
  21. import bzdd from './components/bzdd.vue'
  22. import pzdd from './components/pzdd.vue'
  23. const emit = defineEmits(['changeType'])
  24. const events_params = {
  25. setHighlight: { key: "setHighlight" },
  26. setLayerVisible: { key: "setLayerVisible" },
  27. };
  28. const tabData=[
  29. {label:'防汛检查',value:'1'},
  30. {label:'车辆跟踪',value:'2',keys:'泵车离线,泵车在线'},
  31. {label:'泵站调度',value:'3', keys:"rainPumpStation"},
  32. {label:'排渍调度',value:'4',keys:"waterlogging"},
  33. ]
  34. const tabActive=ref(1)
  35. const tabClickFun=(item)=>{
  36. const { setLayerVisible } = events_params;
  37. tabActive.value=item.value
  38. emit('changeType',item.value)
  39. closeAllLayer();
  40. item.keys && item.keys.split(',').forEach((i) => bus.emit(setLayerVisible.key, { layername: i, isCheck: true }));
  41. };
  42.  
  43. const closeAllLayer = () => {
  44. const { setLayerVisible, setHighlight } = events_params;
  45. tabData.map((i) => (i.keys || '').split(',')).flat().filter(Boolean).flat().forEach((i) => bus.emit(setLayerVisible.key, { layername: i, isCheck: false }));
  46. bus.emit(setHighlight.key, []);
  47. };
  48. </script>
  49.  
  50. <style lang="scss" scoped>
  51. .tabContent{
  52. height: calc(100% - 60px);
  53. overflow: hidden;
  54. }
  55. </style>