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 class="right-panel-left">
      <div class="top">
        <MapSearch />
        <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>
  <ProjectOperation v-if="showWaterDialog" :data="waterData"></ProjectOperation>
</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 MapSearch from "./MapSearch/index.vue";
import ProjectOperation from "./ProjectOperation/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);
const showWaterDialog = ref(false);
const waterData = ref({});
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;
  });
  window.$bus.$on("open-water-dialog", (data: any) => {
    window.$bus.$emit("close-left-panel");
    window.$bus.$emit("close-right-panel");
    showWaterDialog.value = true;
    waterData.value = data;
  });
  window.$bus.$on("close-water-dialog", () => {
    window.$bus.$emit("open-left-panel");
    window.$bus.$emit("open-right-panel");
    showWaterDialog.value = false;
    waterData.value = {};
  });
});
onBeforeUnmount(() => {
  window.$bus.$all_off();
});
</script>

<style scoped lang="less">
.right-panel-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  .top {
    pointer-events: all;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .bottom {
    pointer-events: all;
  }
}
</style>