feat: 面板控制

src/views/Main/index.vue

@@ -1,6 +1,6 @@
 <template>
   <LeftPanel>
-    <Drawer style="width: 458px">
+    <Drawer style="width: 458px" v-if="showLeftDrawer">
       <ProjectCountCard />
       <MonitoringCard />
       <InspectionCard />
@@ -12,11 +12,11 @@
       <div class="top"></div>
       <div class="bottom"></div>
     </div>
-    <Drawer style="width: 460px">
+    <Drawer style="width: 460px" v-if="showRightDrawer">
       <SafetyOverviewCard />
     </Drawer>
   </RightPanel>
-  <BottomPanel></BottomPanel>
+  <BottomPanel v-if="showBottomPanel"></BottomPanel>
   <Map></Map>
 </template>
 
@@ -32,9 +32,37 @@ import SafetyOverviewCard from "./SafetyOverviewCard/index.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);
+
+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>

src/views/RegionSelect/index.vue

@@ -38,6 +38,19 @@ defineOptions({
     /* 文字&图标/Font Wh1 */
     color: rgba(255, 255, 255, 0.9);
   }
-  background: rgba(255, 255, 255, 0.8);
+
+  :deep(.sy-region-select) {
+    width: 194px;
+    background: rgba(255, 255, 255, 0.8);
+    color: rgba(0, 0, 0, 0.9);
+    .sy-input--small .sy-input__wrapper {
+      .sy-select__caret {
+        color: rgba(0, 0, 0, 0.9);
+      }
+    }
+    ::-webkit-input-placeholder {
+      color: rgba(0, 0, 0, 0.9);
+    }
+  }
 }
 </style>