ghjg-digital-twin/src/views/home/ComPage.vue

<template>
  <div id="common">
    <boat-panel v-if="boatPanelShow" :boat-info="boatPanelInfo.value" @close-boat-panel="boatPanelShow=false"/>
    <scene-box v-if="sceneBoxShow"/>
    <pic-viewer v-if="picViewShow" :pic-list="picList.value" @close-pic-viewer="picViewShow=false"></pic-viewer>
    <under-water-legend/>
    <MapArea  @changeBaseMap=""  />
  </div>
</template>

<script>
export default {
  name: 'ComPage'
}
</script>

<script setup>
import { reactive, ref, watch, computed } from 'vue';
import bus from '@/utils/bus'
import BoatPanel from './cpns/boatPanel/Index.vue'
import SceneBox from './cpns/SceneBox.vue';
import PicViewer from './cpns/PicViewer.vue';
import UnderWaterLegend from './cpns/UnderWaterLegend.vue';
import MapArea from '@/views/map/BaseMapArea.vue'
import {locationBoat,clearBoatHistoryPath} from "@/utils/map/Boat";

const boatPanelShow = ref(false)

const boatPanelInfo = reactive({value: {}})

//船舶面板显示-增加定位
bus.on('ueRec_BoatClick', (data) => {
  boatPanelInfo.value = data
  boatPanelShow.value = true
  locationBoat(data.mmsi,true)
  bus.emit('closeAllBoatDockList')
})
watch(boatPanelShow, (newValue, oldValue) => {
 if (!newValue){
   locationBoat( null,false)
 }
 clearBoatHistoryPath()
});

bus.on('ueRec_BoatNotFound', (data) => {
  boatPanelInfo.value = data
  boatPanelShow.value = true
})

const sceneBoxShow = ref(false)

bus.on('toggleSceneBox', () => {
  sceneBoxShow.value = !sceneBoxShow.value
})

const picViewShow = ref(false)

const picList = reactive({value: []})

bus.on('showPicViewer', (data) => {
  picList.value = data
  picViewShow.value = true
})

</script>

<style lang="scss" scoped>
#common {
  #boat-panel {
    z-index: 1;
  }
  #scene-box {
    z-index: 1;
  }
  #pic-viewer {
    z-index: 2;
  }
}
</style>