From 947787f717d250c619321ac310df5beef9c61d75 Mon Sep 17 00:00:00 2001
From: wzy-warehouse <18135009705@163.com>
Date: Tue, 21 Apr 2026 19:50:57 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E7=BB=84=E4=BB=B6=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=91=A8=E8=BE=B9=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84=EF=BC=88=E4=BD=86?=
 =?UTF-8?q?=E6=97=A0=E5=85=B7=E4=BD=93=E5=AE=9E=E7=8E=B0=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LoadingGeoserverLayer.vue                 |  2 +-
 .../LoadingPoints.vue                         |  8 +++---
 .../rain-earthquake/BasicComponent.vue        |  4 +--
 .../rain-earthquake/ControlShowComponent.vue  |  2 +-
 .../ControlShowDetailComponent.vue            | 16 +++++------
 .../rain-earthquake/FunctionComponent.vue     | 16 +++++++++++
 .../rain-earthquake/LeftButtonComponent.vue   | 27 ++++++++++---------
 .../rain-earthquake/RightButtonComponent.vue  | 25 ++++++++---------
 .../{ => basic}/HiddenPointComponent.vue      | 16 +++++------
 .../{ => basic}/RiskPointComponent.vue        | 16 +++++------
 .../DangerousSourceComponent.vue              | 16 +++++------
 .../EmergencyShelterComponent.vue             | 16 +++++------
 .../FireStationComponent.vue                  | 16 +++++------
 .../{ => detail-panels}/HospitalComponent.vue | 16 +++++------
 .../PopulationGridComponent.vue               |  4 +--
 .../StorePointsComponent.vue                  | 16 +++++------
 .../WaterPipeComponent.vue                    |  4 +--
 .../function-child/AroundAnalysis.vue         | 24 +++++++++++++++++
 .../AroundAnalysisDetailComponent.vue         |  7 +++++
 .../around-analysis/ButtonComponent.vue       |  7 +++++
 .../around-analysis/SearchComponent.vue       |  8 ++++++
 .../earthquake/useEarthquakeDisasterChain.ts  |  4 +--
 .../{ => rain-earthquake}/useLayerControl.ts  |  2 +-
 src/hooks/rain-earthquake/useLeftHandle.ts    | 25 +++++++++++++++++
 .../{ => rain-earthquake}/useRightHandle.ts   |  6 +++--
 src/hooks/rainstorm/useRainDisasterChain.ts   |  9 +++----
 src/stores/useButtonSelectedIdStore.ts        | 27 +++++++++++++++++++
 src/stores/useStatusStore.ts                  | 15 +++++++++++
 src/views/home/rainstorm/RainstormView.vue    |  4 +++
 29 files changed, 247 insertions(+), 111 deletions(-)
 rename src/component/{rain-earthquake => common}/LoadingGeoserverLayer.vue (99%)
 rename src/component/{rain-earthquake => common}/LoadingPoints.vue (85%)
 create mode 100644 src/component/rain-earthquake/FunctionComponent.vue
 rename src/component/rain-earthquake/{ => basic}/HiddenPointComponent.vue (93%)
 rename src/component/rain-earthquake/{ => basic}/RiskPointComponent.vue (92%)
 rename src/component/rain-earthquake/{ => detail-panels}/DangerousSourceComponent.vue (92%)
 rename src/component/rain-earthquake/{ => detail-panels}/EmergencyShelterComponent.vue (92%)
 rename src/component/rain-earthquake/{ => detail-panels}/FireStationComponent.vue (92%)
 rename src/component/rain-earthquake/{ => detail-panels}/HospitalComponent.vue (92%)
 rename src/component/rain-earthquake/{ => detail-panels}/PopulationGridComponent.vue (84%)
 rename src/component/rain-earthquake/{ => detail-panels}/StorePointsComponent.vue (92%)
 rename src/component/rain-earthquake/{ => detail-panels}/WaterPipeComponent.vue (84%)
 create mode 100644 src/component/rain-earthquake/function-child/AroundAnalysis.vue
 create mode 100644 src/component/rain-earthquake/function-child/around-analysis/AroundAnalysisDetailComponent.vue
 create mode 100644 src/component/rain-earthquake/function-child/around-analysis/ButtonComponent.vue
 create mode 100644 src/component/rain-earthquake/function-child/around-analysis/SearchComponent.vue
 rename src/hooks/{ => rain-earthquake}/useLayerControl.ts (96%)
 create mode 100644 src/hooks/rain-earthquake/useLeftHandle.ts
 rename src/hooks/{ => rain-earthquake}/useRightHandle.ts (72%)
 create mode 100644 src/stores/useButtonSelectedIdStore.ts

diff --git a/src/component/rain-earthquake/LoadingGeoserverLayer.vue b/src/component/common/LoadingGeoserverLayer.vue
similarity index 99%
rename from src/component/rain-earthquake/LoadingGeoserverLayer.vue
rename to src/component/common/LoadingGeoserverLayer.vue
index df513f1..c112a56 100644
--- a/src/component/rain-earthquake/LoadingGeoserverLayer.vue
+++ b/src/component/common/LoadingGeoserverLayer.vue
@@ -4,7 +4,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
   import type { ImageryLayer } from 'cesium';
   import { onMounted } from 'vue';
 
diff --git a/src/component/rain-earthquake/LoadingPoints.vue b/src/component/common/LoadingPoints.vue
similarity index 85%
rename from src/component/rain-earthquake/LoadingPoints.vue
rename to src/component/common/LoadingPoints.vue
index bee6517..b4a69b1 100644
--- a/src/component/rain-earthquake/LoadingPoints.vue
+++ b/src/component/common/LoadingPoints.vue
@@ -5,10 +5,10 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue';
-  import { usePointsHandle } from '@/hooks/usePointsHandle';
-  import type { Point } from '@/types/base/Point';
-  import type { LoadingResource } from '@/types/common/LoadingResourceType';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { usePointsHandle } from '@/hooks/usePointsHandle.ts';
+  import type { Point } from '@/types/base/Point.ts';
+  import type { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   // 属性
   const props = defineProps<{
diff --git a/src/component/rain-earthquake/BasicComponent.vue b/src/component/rain-earthquake/BasicComponent.vue
index 2113cde..6d4940b 100644
--- a/src/component/rain-earthquake/BasicComponent.vue
+++ b/src/component/rain-earthquake/BasicComponent.vue
@@ -26,8 +26,8 @@
 <script setup lang="ts">
   import MapComponent from '@/component/map/MapComponent.vue';
   import type { DisasterType } from '@/types/common/DisasterType.ts';
-  import HiddenPointComponent from './HiddenPointComponent.vue';
-  import RiskPointComponent from './RiskPointComponent.vue';
+  import HiddenPointComponent from '@/component/rain-earthquake/basic/HiddenPointComponent.vue';
+  import RiskPointComponent from '@/component/rain-earthquake/basic/RiskPointComponent.vue';
   import { useStatusStore } from '@/stores/useStatusStore';
 
   // 获取父组件传递德数据
diff --git a/src/component/rain-earthquake/ControlShowComponent.vue b/src/component/rain-earthquake/ControlShowComponent.vue
index 54b9537..16a74d8 100644
--- a/src/component/rain-earthquake/ControlShowComponent.vue
+++ b/src/component/rain-earthquake/ControlShowComponent.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
 
   defineProps<{
     constrolShowList: {
diff --git a/src/component/rain-earthquake/ControlShowDetailComponent.vue b/src/component/rain-earthquake/ControlShowDetailComponent.vue
index 57cab5c..ebd8793 100644
--- a/src/component/rain-earthquake/ControlShowDetailComponent.vue
+++ b/src/component/rain-earthquake/ControlShowDetailComponent.vue
@@ -57,14 +57,14 @@
 </template>
 
 <script lang="ts" setup>
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import HospitalComponent from './HospitalComponent.vue';
-  import DangerousSourceComponent from './DangerousSourceComponent.vue';
-  import EmergencyShelterComponent from './EmergencyShelterComponent.vue';
-  import FireStationComponent from './FireStationComponent.vue';
-  import StorePointsComponent from './StorePointsComponent.vue';
-  import PopulationGridComponent from './PopulationGridComponent.vue';
-  import WaterPipeComponent from './WaterPipeComponent.vue';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import HospitalComponent from './detail-panels/HospitalComponent.vue';
+  import DangerousSourceComponent from './detail-panels/DangerousSourceComponent.vue';
+  import EmergencyShelterComponent from './detail-panels/EmergencyShelterComponent.vue';
+  import FireStationComponent from './detail-panels/FireStationComponent.vue';
+  import StorePointsComponent from './detail-panels/StorePointsComponent.vue';
+  import PopulationGridComponent from './detail-panels/PopulationGridComponent.vue';
+  import WaterPipeComponent from './detail-panels/WaterPipeComponent.vue';
 </script>
 
 <style scoped lang="less"></style>
diff --git a/src/component/rain-earthquake/FunctionComponent.vue b/src/component/rain-earthquake/FunctionComponent.vue
new file mode 100644
index 0000000..b05a93c
--- /dev/null
+++ b/src/component/rain-earthquake/FunctionComponent.vue
@@ -0,0 +1,16 @@
+<template>
+  <!-- 周边分析组件 -->
+  <AroundAnalysis
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().functionStatus.aroundAnalysis.loading
+    "
+  />
+</template>
+
+<script lang="ts" setup>
+  import { useStatusStore } from '@/stores/useStatusStore';
+  import AroundAnalysis from './function-child/AroundAnalysis.vue';
+</script>
+
+<style scoped></style>
diff --git a/src/component/rain-earthquake/LeftButtonComponent.vue b/src/component/rain-earthquake/LeftButtonComponent.vue
index 2f23ea4..a431c61 100644
--- a/src/component/rain-earthquake/LeftButtonComponent.vue
+++ b/src/component/rain-earthquake/LeftButtonComponent.vue
@@ -10,7 +10,7 @@
         <button
           @click="handelButton(index, buttonItem.callback)"
           :style="{
-            'background-image': `url(${selectedButtonId == index ? leftOrangeButton : leftBlueButton})`,
+            'background-image': `url(${useButtonSelectedIdStore().leftButtonSelectedId == index ? leftOrangeButton : leftBlueButton})`,
           }"
         >
           {{ buttonItem.name }}
@@ -22,11 +22,8 @@
 
 <script setup lang="ts">
   import { leftBlueButton, leftOrangeButton } from '@/assets';
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import { ref, type Ref } from 'vue';
-
-  // 记录选中按钮id
-  const selectedButtonId: Ref<number> = ref(-1);
+  import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore.ts';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
 
   // 接收父组件传递的参数
   const props = defineProps<{
@@ -42,20 +39,24 @@
     index: number,
     callback: (...args: unknown[]) => unknown
   ) => {
-    if (index == selectedButtonId.value) {
-      selectedButtonId.value = -1;
+    // 取消选中
+    if (index == useButtonSelectedIdStore().leftButtonSelectedId) {
+      callback(false);
+      useButtonSelectedIdStore().leftButtonSelectedId = -1;
       return;
     } else if (
-      selectedButtonId.value != -1 &&
-      selectedButtonId.value != index
+      useButtonSelectedIdStore().leftButtonSelectedId != -1 &&
+      useButtonSelectedIdStore().leftButtonSelectedId != index
     ) {
+      console.error('当前按钮选中有误，请选择正确的按钮。');
       return;
     }
-    selectedButtonId.value = index;
-    callback();
+    useButtonSelectedIdStore().leftButtonSelectedId = index;
+    callback(true);
 
+    // 如果该按钮只执行一次，则取消选中
     if (props.buttonList[index].executeOnce) {
-      selectedButtonId.value = -1;
+      useButtonSelectedIdStore().leftButtonSelectedId = -1;
     }
   };
 </script>
diff --git a/src/component/rain-earthquake/RightButtonComponent.vue b/src/component/rain-earthquake/RightButtonComponent.vue
index f2605a5..798a1a0 100644
--- a/src/component/rain-earthquake/RightButtonComponent.vue
+++ b/src/component/rain-earthquake/RightButtonComponent.vue
@@ -1,11 +1,14 @@
 <template>
-  <div class="right-button-box">
+  <div
+    class="right-button-box"
+    v-show="useStatusStore().uiComponents.rightButton.show"
+  >
     <ul class="right-button-ul">
       <li v-for="(buttonItem, index) in buttonList" :key="index">
         <button
           @click="handelButton(index, buttonItem.callback)"
           :style="{
-            'background-image': `url(${selectedButtonId == index ? rightOrangeButton : rightBlueButton})`,
+            'background-image': `url(${useButtonSelectedIdStore().rightButtonSelectedId == index ? rightOrangeButton : rightBlueButton})`,
           }"
         >
           {{ buttonItem.name }}
@@ -17,10 +20,8 @@
 
 <script setup lang="ts">
   import { rightBlueButton, rightOrangeButton } from '@/assets';
-  import { ref, type Ref } from 'vue';
-
-  // 记录选中按钮id
-  const selectedButtonId: Ref<number> = ref(-1);
+  import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore.ts';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
 
   // 接收父组件传递的参数
   const props = defineProps<{
@@ -36,19 +37,19 @@
     index: number,
     callback: (...args: unknown[]) => unknown
   ) => {
-    if (index == selectedButtonId.value) {
-      selectedButtonId.value = -1;
+    if (index == useButtonSelectedIdStore().rightButtonSelectedId) {
+      useButtonSelectedIdStore().rightButtonSelectedId = -1;
       return;
     } else if (
-      selectedButtonId.value != -1 &&
-      selectedButtonId.value != index
+      useButtonSelectedIdStore().rightButtonSelectedId != -1 &&
+      useButtonSelectedIdStore().rightButtonSelectedId != index
     ) {
       return;
     }
-    selectedButtonId.value = index;
+    useButtonSelectedIdStore().rightButtonSelectedId = index;
     callback();
     if (props.buttonList[index].executeOnce) {
-      selectedButtonId.value = -1;
+      useButtonSelectedIdStore().rightButtonSelectedId = -1;
     }
   };
 </script>
diff --git a/src/component/rain-earthquake/HiddenPointComponent.vue b/src/component/rain-earthquake/basic/HiddenPointComponent.vue
similarity index 93%
rename from src/component/rain-earthquake/HiddenPointComponent.vue
rename to src/component/rain-earthquake/basic/HiddenPointComponent.vue
index 982de8b..504eb67 100644
--- a/src/component/rain-earthquake/HiddenPointComponent.vue
+++ b/src/component/rain-earthquake/basic/HiddenPointComponent.vue
@@ -28,16 +28,16 @@
   import { DisasterType } from '@/types/common/DisasterType.ts';
   import { ref, watch } from 'vue';
   import { $api } from '@/api/api.ts';
-  import type { Point } from '@/types/base/Point';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  import type { Point } from '@/types/base/Point.ts';
+  import LoadingPoints from '@/component/common/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint';
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   // 接收父组件传递的参数
   const props = defineProps<{
diff --git a/src/component/rain-earthquake/RiskPointComponent.vue b/src/component/rain-earthquake/basic/RiskPointComponent.vue
similarity index 92%
rename from src/component/rain-earthquake/RiskPointComponent.vue
rename to src/component/rain-earthquake/basic/RiskPointComponent.vue
index b6d043f..88f192b 100644
--- a/src/component/rain-earthquake/RiskPointComponent.vue
+++ b/src/component/rain-earthquake/basic/RiskPointComponent.vue
@@ -27,16 +27,16 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
   import { $api } from '@/api/api.ts';
-  import type { Point } from '@/types/base/Point';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  import type { Point } from '@/types/base/Point.ts';
+  import LoadingPoints from '@/component/common/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint.ts';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const riskPoints = ref<Point[]>([]);
 
diff --git a/src/component/rain-earthquake/DangerousSourceComponent.vue b/src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue
similarity index 92%
rename from src/component/rain-earthquake/DangerousSourceComponent.vue
rename to src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue
index e412421..3170cf0 100644
--- a/src/component/rain-earthquake/DangerousSourceComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue
@@ -29,16 +29,16 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
   import { $api } from '@/api/api.ts';
-  import type { Point } from '@/types/base/Point';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  import type { Point } from '@/types/base/Point.ts';
+  import LoadingPoints from '@/component/common/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
-  import { useDangerousSourcePoint } from '@/hooks/rain-earthquake/useDangerousSourcePoint';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useDangerousSourcePoint } from '@/hooks/rain-earthquake/useDangerousSourcePoint.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const dangerousSourcePoints = ref<Point[]>([]);
 
diff --git a/src/component/rain-earthquake/EmergencyShelterComponent.vue b/src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue
similarity index 92%
rename from src/component/rain-earthquake/EmergencyShelterComponent.vue
rename to src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue
index e1e182d..1a41356 100644
--- a/src/component/rain-earthquake/EmergencyShelterComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue
@@ -30,16 +30,16 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
   import { $api } from '@/api/api.ts';
-  import type { Point } from '@/types/base/Point';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  import type { Point } from '@/types/base/Point.ts';
+  import LoadingPoints from '@/component/common/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
-  import { useEmergencyShelterPoint } from '@/hooks/rain-earthquake/useEmergencyShelterPoint';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useEmergencyShelterPoint } from '@/hooks/rain-earthquake/useEmergencyShelterPoint.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const emergencyShelterPoints = ref<Point[]>([]);
 
diff --git a/src/component/rain-earthquake/FireStationComponent.vue b/src/component/rain-earthquake/detail-panels/FireStationComponent.vue
similarity index 92%
rename from src/component/rain-earthquake/FireStationComponent.vue
rename to src/component/rain-earthquake/detail-panels/FireStationComponent.vue
index 4430a4d..4bc1322 100644
--- a/src/component/rain-earthquake/FireStationComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/FireStationComponent.vue
@@ -29,16 +29,16 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
   import { $api } from '@/api/api.ts';
-  import type { Point } from '@/types/base/Point';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  import type { Point } from '@/types/base/Point.ts';
+  import LoadingPoints from '@/component/common/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
-  import { useFireStationPoint } from '@/hooks/rain-earthquake/useFireStationPoint';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useFireStationPoint } from '@/hooks/rain-earthquake/useFireStationPoint.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const fireStationPoints = ref<Point[]>([]);
 
diff --git a/src/component/rain-earthquake/HospitalComponent.vue b/src/component/rain-earthquake/detail-panels/HospitalComponent.vue
similarity index 92%
rename from src/component/rain-earthquake/HospitalComponent.vue
rename to src/component/rain-earthquake/detail-panels/HospitalComponent.vue
index d5e9b48..f0be71b 100644
--- a/src/component/rain-earthquake/HospitalComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/HospitalComponent.vue
@@ -27,16 +27,16 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
   import { $api } from '@/api/api.ts';
-  import type { Point } from '@/types/base/Point';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  import type { Point } from '@/types/base/Point.ts';
+  import LoadingPoints from '@/component/common/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
-  import { useHospitalPoint } from '@/hooks/rain-earthquake/useHospitalPoint';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useHospitalPoint } from '@/hooks/rain-earthquake/useHospitalPoint.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const hospitalPoints = ref<Point[]>([]);
 
diff --git a/src/component/rain-earthquake/PopulationGridComponent.vue b/src/component/rain-earthquake/detail-panels/PopulationGridComponent.vue
similarity index 84%
rename from src/component/rain-earthquake/PopulationGridComponent.vue
rename to src/component/rain-earthquake/detail-panels/PopulationGridComponent.vue
index 20d0538..1c538f9 100644
--- a/src/component/rain-earthquake/PopulationGridComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/PopulationGridComponent.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts" setup>
-  import { useStatusStore } from '@/stores/useStatusStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
   import type { ImageryLayer } from 'cesium';
   import { onMounted, watch } from 'vue';
-  import LoadingGeoserverLayer from './LoadingGeoserverLayer.vue';
+  import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
 
   // 保存图层引用
   let populationLayer: ImageryLayer | null = null;
diff --git a/src/component/rain-earthquake/StorePointsComponent.vue b/src/component/rain-earthquake/detail-panels/StorePointsComponent.vue
similarity index 92%
rename from src/component/rain-earthquake/StorePointsComponent.vue
rename to src/component/rain-earthquake/detail-panels/StorePointsComponent.vue
index 624180f..69546b9 100644
--- a/src/component/rain-earthquake/StorePointsComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/StorePointsComponent.vue
@@ -29,16 +29,16 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
   import { $api } from '@/api/api.ts';
-  import type { Point } from '@/types/base/Point';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  import type { Point } from '@/types/base/Point.ts';
+  import LoadingPoints from '@/component/common/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
-  import { useStorePointsPoint } from '@/hooks/rain-earthquake/useStorePointsPoint';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useStorePointsPoint } from '@/hooks/rain-earthquake/useStorePointsPoint.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const storePointsList = ref<Point[]>([]);
 
diff --git a/src/component/rain-earthquake/WaterPipeComponent.vue b/src/component/rain-earthquake/detail-panels/WaterPipeComponent.vue
similarity index 84%
rename from src/component/rain-earthquake/WaterPipeComponent.vue
rename to src/component/rain-earthquake/detail-panels/WaterPipeComponent.vue
index 6d34d4d..c15aba3 100644
--- a/src/component/rain-earthquake/WaterPipeComponent.vue
+++ b/src/component/rain-earthquake/detail-panels/WaterPipeComponent.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts" setup>
-  import { useStatusStore } from '@/stores/useStatusStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
   import type { ImageryLayer } from 'cesium';
   import { onMounted, watch } from 'vue';
-  import LoadingGeoserverLayer from './LoadingGeoserverLayer.vue';
+  import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
 
   // 保存图层引用
   let waterPipeLayer: ImageryLayer | null = null;
diff --git a/src/component/rain-earthquake/function-child/AroundAnalysis.vue b/src/component/rain-earthquake/function-child/AroundAnalysis.vue
new file mode 100644
index 0000000..f9d17de
--- /dev/null
+++ b/src/component/rain-earthquake/function-child/AroundAnalysis.vue
@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="around-analysis-box"
+    v-show="useStatusStore().functionStatus.aroundAnalysis.show"
+  >
+    <!-- 搜索组件 -->
+    <SearchComponent />
+
+    <!-- 按钮组件 -->
+    <ButtonComponent />
+
+    <!-- 具体功能组件 -->
+    <AroundAnalysisDetailComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useStatusStore } from '@/stores/useStatusStore';
+  import AroundAnalysisDetailComponent from './around-analysis/AroundAnalysisDetailComponent.vue';
+  import ButtonComponent from './around-analysis/ButtonComponent.vue';
+  import SearchComponent from './around-analysis/SearchComponent.vue';
+</script>
+
+<style scoped></style>
diff --git a/src/component/rain-earthquake/function-child/around-analysis/AroundAnalysisDetailComponent.vue b/src/component/rain-earthquake/function-child/around-analysis/AroundAnalysisDetailComponent.vue
new file mode 100644
index 0000000..3e93f3b
--- /dev/null
+++ b/src/component/rain-earthquake/function-child/around-analysis/AroundAnalysisDetailComponent.vue
@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped></style>
diff --git a/src/component/rain-earthquake/function-child/around-analysis/ButtonComponent.vue b/src/component/rain-earthquake/function-child/around-analysis/ButtonComponent.vue
new file mode 100644
index 0000000..3e93f3b
--- /dev/null
+++ b/src/component/rain-earthquake/function-child/around-analysis/ButtonComponent.vue
@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped></style>
diff --git a/src/component/rain-earthquake/function-child/around-analysis/SearchComponent.vue b/src/component/rain-earthquake/function-child/around-analysis/SearchComponent.vue
new file mode 100644
index 0000000..19c28a1
--- /dev/null
+++ b/src/component/rain-earthquake/function-child/around-analysis/SearchComponent.vue
@@ -0,0 +1,8 @@
+<!-- 搜索组件 -->
+<template>
+  <div></div>
+</template>
+
+<script lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts
index 7f97727..ad4bfe5 100644
--- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts
+++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts
@@ -3,9 +3,9 @@ import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
 import type { PaginationType } from '@/types/common/PaginationType';
 import { PointType } from '@/types/common/DisasterType';
 import { useStatusStore } from '@/stores/useStatusStore';
-import { useLayerControl } from '../useLayerControl';
+import { useLayerControl } from '../rain-earthquake/useLayerControl.ts';
 import { debrisFlowIcon, landslideIcon, riskAreaIcon } from '@/assets';
-import { useRightHandle } from '../useRightHandle';
+import { useRightHandle } from '../rain-earthquake/useRightHandle.ts';
 
 /**
  * 暴雨灾害链
diff --git a/src/hooks/useLayerControl.ts b/src/hooks/rain-earthquake/useLayerControl.ts
similarity index 96%
rename from src/hooks/useLayerControl.ts
rename to src/hooks/rain-earthquake/useLayerControl.ts
index 81c039e..86c78d1 100644
--- a/src/hooks/useLayerControl.ts
+++ b/src/hooks/rain-earthquake/useLayerControl.ts
@@ -1,4 +1,4 @@
-import { useStatusStore } from '@/stores/useStatusStore';
+import { useStatusStore } from '@/stores/useStatusStore.ts';
 
 /**
  * 控制面板显示隐藏逻辑
diff --git a/src/hooks/rain-earthquake/useLeftHandle.ts b/src/hooks/rain-earthquake/useLeftHandle.ts
new file mode 100644
index 0000000..8fae864
--- /dev/null
+++ b/src/hooks/rain-earthquake/useLeftHandle.ts
@@ -0,0 +1,25 @@
+import { useStatusStore } from '@/stores/useStatusStore';
+
+export const useLeftHandle = () => {
+  /**
+   * 周边分析
+   */
+  const clickAroundAnalysis = (status: unknown) => {
+    // 如果选中，隐藏右侧按钮，取消选中则显示右侧按钮
+    if (status as boolean) {
+      useStatusStore().uiComponents.rightButton.show = false;
+
+      // 加载周边分析
+      useStatusStore().functionStatus.aroundAnalysis.loading = true;
+      useStatusStore().functionStatus.aroundAnalysis.show = true;
+    } else {
+      useStatusStore().uiComponents.rightButton.show = true;
+
+      // 隐藏周边分析
+      useStatusStore().functionStatus.aroundAnalysis.show = false;
+    }
+  };
+  return {
+    clickAroundAnalysis,
+  };
+};
diff --git a/src/hooks/useRightHandle.ts b/src/hooks/rain-earthquake/useRightHandle.ts
similarity index 72%
rename from src/hooks/useRightHandle.ts
rename to src/hooks/rain-earthquake/useRightHandle.ts
index 861b2fa..38c9d74 100644
--- a/src/hooks/useRightHandle.ts
+++ b/src/hooks/rain-earthquake/useRightHandle.ts
@@ -1,6 +1,7 @@
-import { useStatusStore } from '@/stores/useStatusStore';
-import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+import { useStatusStore } from '@/stores/useStatusStore.ts';
+import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
 import config from '@/config/config.json';
+import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore';
 
 export const useRightHandle = () => {
   /**
@@ -9,6 +10,7 @@ export const useRightHandle = () => {
   const resetScene = () => {
     CesiumUtilsSingleton.clearAllResources('custom');
     useStatusStore().resetScene();
+    useButtonSelectedIdStore().resetId();
   };
 
   /**
diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts
index 5ec6688..8704802 100644
--- a/src/hooks/rainstorm/useRainDisasterChain.ts
+++ b/src/hooks/rainstorm/useRainDisasterChain.ts
@@ -10,8 +10,9 @@ import {
   riskAreaIcon,
   waterLoggingIcon,
 } from '@/assets';
-import { useLayerControl } from '../useLayerControl';
-import { useRightHandle } from '../useRightHandle';
+import { useLayerControl } from '../rain-earthquake/useLayerControl.ts';
+import { useRightHandle } from '../rain-earthquake/useRightHandle.ts';
+import { useLeftHandle } from '../rain-earthquake/useLeftHandle.ts';
 
 /**
  * 暴雨灾害链
@@ -100,9 +101,7 @@ export const useRainDisasterChain = () => {
   const leftButtonInfo = [
     {
       name: '周边分析',
-      callback: () => {
-        console.log('周边分析');
-      },
+      callback: useLeftHandle().clickAroundAnalysis,
     },
     {
       name: '关联分析',
diff --git a/src/stores/useButtonSelectedIdStore.ts b/src/stores/useButtonSelectedIdStore.ts
new file mode 100644
index 0000000..e53bceb
--- /dev/null
+++ b/src/stores/useButtonSelectedIdStore.ts
@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia';
+import { type Ref, ref } from 'vue';
+
+/**
+ * 选中按钮id记录
+ */
+export const useButtonSelectedIdStore = defineStore('buttonSelectedId', () => {
+  /**
+   * 左侧按钮选中id
+   */
+  const leftButtonSelectedId: Ref<number> = ref(-1);
+
+  /**
+   * 右侧按钮选中id
+   */
+  const rightButtonSelectedId: Ref<number> = ref(-1);
+
+  /**
+   * 重置id
+   */
+  const resetId = () => {
+    leftButtonSelectedId.value = -1;
+    rightButtonSelectedId.value = -1;
+  };
+
+  return { leftButtonSelectedId, rightButtonSelectedId, resetId };
+});
diff --git a/src/stores/useStatusStore.ts b/src/stores/useStatusStore.ts
index 7bd435c..badc1b6 100644
--- a/src/stores/useStatusStore.ts
+++ b/src/stores/useStatusStore.ts
@@ -153,6 +153,14 @@ export const useStatusStore = defineStore('status', () => {
     },
   });
 
+  // ============================ 地图功能显示状态 ================================
+  const functionStatus = reactive({
+    aroundAnalysis: {
+      show: false,
+      loading: false,
+    },
+  });
+
   /**
    * 恢复默认值
    */
@@ -262,6 +270,12 @@ export const useStatusStore = defineStore('status', () => {
       show: false,
       loading: false,
     };
+
+    // 功能显示状态重置
+    functionStatus.aroundAnalysis = {
+      show: false,
+      loading: false,
+    };
   };
 
   return {
@@ -270,6 +284,7 @@ export const useStatusStore = defineStore('status', () => {
     mapLayers,
     poiLayers,
     infrastructureLayers,
+    functionStatus,
     reset,
     resetScene,
   };
diff --git a/src/views/home/rainstorm/RainstormView.vue b/src/views/home/rainstorm/RainstormView.vue
index e6d4be1..71807d9 100644
--- a/src/views/home/rainstorm/RainstormView.vue
+++ b/src/views/home/rainstorm/RainstormView.vue
@@ -53,6 +53,9 @@
 
     <!-- 控制显示详情组件 -->
     <ControlShowDetailComponent />
+
+    <!-- 功能组件 -->
+    <FunctionComponent />
   </div>
 </template>
 
@@ -61,6 +64,7 @@
   import ControlShowComponent from '@/component/rain-earthquake/ControlShowComponent.vue';
   import ControlShowDetailComponent from '@/component/rain-earthquake/ControlShowDetailComponent.vue';
   import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
+  import FunctionComponent from '@/component/rain-earthquake/FunctionComponent.vue';
   import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
   import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
   import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';