sy-water-data-board-ui/src/views/Main/index.vue

<template>
  <LeftPanel>
    <Drawer style="width: 458px" v-if="showLeftDrawer">
      <ProjectCountCard />
      <MonitoringCard />
      <InspectionCard />
    </Drawer>
    <RegionSelect />
  </LeftPanel>
  <RightPanel>
    <div>
      <div class="top">
        <MapLayerSwitch @showChange="layerTreeChange"></MapLayerSwitch>
      </div>
      <div class="bottom">
        <MapLegend></MapLegend>
        <LayerTree :showDialog="showLayerTree" />
      </div>
    </div>
    <Drawer style="width: 460px" v-if="showRightDrawer">
      <SafetyOverviewCard />
    </Drawer>
  </RightPanel>
  <BottomPanel v-if="showBottomPanel"></BottomPanel>
  <Map></Map>
</template>

<script setup lang="ts">
import LeftPanel from "../LeftPanel/index.vue";
import RightPanel from "../RightPanel/index.vue";
import BottomPanel from "../BottomPanel/index.vue";
import Drawer from "../Drawer/index.vue";
import ProjectCountCard from "./ProjectCountCard/index.vue";
import MonitoringCard from "./MonitoringCard/index.vue";
import InspectionCard from "./InspectionCard/index.vue";
import SafetyOverviewCard from "./SafetyOverviewCard/index.vue";
import MapLegend from "./Map/components/Legend.vue";
import MapLayerSwitch from "./Map/components/LayerSwitch.vue";
import LayerTree from "./Map/components/LayerTree.vue";
import Map from "./Map/index.vue";
import RegionSelect from "../RegionSelect/index.vue";
import { onBeforeUnmount, onMounted, ref } from "vue";
defineOptions({
  name: "main",
});
const showLeftDrawer = ref(true);
const showRightDrawer = ref(true);
const showBottomPanel = ref(true);
const showLayerTree = ref(false);
function layerTreeChange(val: boolean) {
  showLayerTree.value = val;
}

onMounted(() => {
  window.$bus.$on("open-left-panel", () => {
    showLeftDrawer.value = true;
  });
  window.$bus.$on("close-left-panel", () => {
    showLeftDrawer.value = false;
  });
  window.$bus.$on("open-right-panel", () => {
    showRightDrawer.value = true;
  });
  window.$bus.$on("close-right-panel", () => {
    showRightDrawer.value = false;
  });
  window.$bus.$on("open-bottom-panel", () => {
    showBottomPanel.value = true;
  });
  window.$bus.$on("close-bottom-panel", () => {
    showBottomPanel.value = false;
  });
});
onBeforeUnmount(() => {
  window.$bus.$all_off();
});
</script>

<style scoped></style>