industry-database/src/views/c-views/visualizationPart/VisualizationHome.vue

<template>
  <div id="visualizationHome">
    <VisualizationHeader />
    <Map/>
<!--    <TreeMenu />-->
    <ServiceTree/>
    <FigureLegend />
<!--    <BaseMapSwitch />-->
    <router-view/>
<!--    <BoardSwitch />-->
<!--    <VisualizationBottom />-->
    <template v-if="mapStore.layerDetailShow">
      <LayerDetailDialog :dia-attrs="{modal:false}"  />
    </template>
  </div>
</template>

<script>
import VisualizationHeader from "../../c-cpns/VisualizationHeader.vue";
import Map from "../../c-cpns/Map.vue";
import VisualizationBottom from "@/views/c-cpns/VisualizationBottom.vue";
import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
import FigureLegend from "@/views/c-cpns/figureLegend.vue";
import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
import BaseMapSwitch from "@/views/c-cpns/BaseMapSwitch.vue";
import {useMapStore} from "@/store/mapStore.js";
import LayerDetailDialog from "@/views/c-cpns/LayerDetailDialog.vue";
import BoardSwitch from "@/views/c-cpns/BoardSwitch.vue";
export default {
  name: "VisualizationHome",
  components: {
    BoardSwitch,
    LayerDetailDialog,
    BaseMapSwitch, TreeMenu, FigureLegend, ServiceTree, VisualizationBottom, Map, VisualizationHeader},
  setup() {
    const mapStore = useMapStore();
    return{
      mapStore
    }
  }
}
</script>

<style scoped lang="scss">
#visualizationHome{
  width: 100%;
  height: 100%;
  background: #F5F5F5;
}
</style>