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>
  <!-- 水库详情弹窗 -->
  <Reservoir v-if="showReservoir" :data="reservoirData"></Reservoir>
  <!-- 堤防详情弹窗 -->
  <Dike v-if="showDike" :data="dikeData"></Dike>
  <!-- 水闸详情弹窗 -->
  <Sluice v-if="showSluice" :data="sluiceData"></Sluice>
</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 Reservoir from "./Reservoir/index.vue";
import Sluice from "./Sluice/index.vue";
import Dike from "./Dike/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 showReservoir = ref(false); // 水库详情弹窗
const reservoirData = ref({});
const showSluice = ref(false); // 水闸详情弹窗
const sluiceData = ref({});
const showDike = ref(false); // 堤防详情弹窗
const dikeData = 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-reservoir-dialog", (data: any) => {
    window.$bus.$emit("close-left-panel");
    window.$bus.$emit("close-right-panel");
    showReservoir.value = true;
    reservoirData.value = data;
  });
  window.$bus.$on("close-reservoir-dialog", () => {
    if (!showSluice.value && !showDike.value) {
      window.$bus.$emit("open-left-panel");
      window.$bus.$emit("open-right-panel");
    }
    showReservoir.value = false;
    reservoirData.value = {};
  });
  // 水闸详情弹窗
  window.$bus.$on("open-sluice-dialog", (data: any) => {
    window.$bus.$emit("close-left-panel");
    window.$bus.$emit("close-right-panel");
    showSluice.value = true;
    sluiceData.value = data;
  });
  window.$bus.$on("close-sluice-dialog", () => {
    if (!showReservoir.value && !showDike.value) {
      window.$bus.$emit("open-left-panel");
      window.$bus.$emit("open-right-panel");
    }
    showSluice.value = false;
    sluiceData.value = {};
  });
  // 堤防详情弹窗
  window.$bus.$on("open-dike-dialog", (data: any) => {
    window.$bus.$emit("close-left-panel");
    window.$bus.$emit("close-right-panel");
    showDike.value = true;
    dikeData.value = data;
  });
  window.$bus.$on("close-dike-dialog", () => {
    if (!showSluice.value && !showReservoir.value) {
      window.$bus.$emit("open-left-panel");
      window.$bus.$emit("open-right-panel");
    }
    showDike.value = false;
    dikeData.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>