重构组件结构，添加周边分析组件结构（但无具体实现）

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';
 

src/component/common/LoadingPoints.vue

@@ -5,10 +5,10 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue';
-  import { usePointsHandle } from '@/hooks/usePointsHandle';
+  import { usePointsHandle } from '@/hooks/usePointsHandle.ts';
-  import type { Point } from '@/types/base/Point';
+  import type { Point } from '@/types/base/Point.ts';
-  import type { LoadingResource } from '@/types/common/LoadingResourceType';
+  import type { LoadingResource } from '@/types/common/LoadingResourceType.ts';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   // 属性
   const props = defineProps<{

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 HiddenPointComponent from '@/component/rain-earthquake/basic/HiddenPointComponent.vue';
-  import RiskPointComponent from './RiskPointComponent.vue';
+  import RiskPointComponent from '@/component/rain-earthquake/basic/RiskPointComponent.vue';
   import { useStatusStore } from '@/stores/useStatusStore';
 
   // 获取父组件传递德数据

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: {

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -57,14 +57,14 @@
 </template>
 
 <script lang="ts" setup>
-  import { useStatusStore } from '@/stores/useStatusStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
-  import HospitalComponent from './HospitalComponent.vue';
+  import HospitalComponent from './detail-panels/HospitalComponent.vue';
-  import DangerousSourceComponent from './DangerousSourceComponent.vue';
+  import DangerousSourceComponent from './detail-panels/DangerousSourceComponent.vue';
-  import EmergencyShelterComponent from './EmergencyShelterComponent.vue';
+  import EmergencyShelterComponent from './detail-panels/EmergencyShelterComponent.vue';
-  import FireStationComponent from './FireStationComponent.vue';
+  import FireStationComponent from './detail-panels/FireStationComponent.vue';
-  import StorePointsComponent from './StorePointsComponent.vue';
+  import StorePointsComponent from './detail-panels/StorePointsComponent.vue';
-  import PopulationGridComponent from './PopulationGridComponent.vue';
+  import PopulationGridComponent from './detail-panels/PopulationGridComponent.vue';
-  import WaterPipeComponent from './WaterPipeComponent.vue';
+  import WaterPipeComponent from './detail-panels/WaterPipeComponent.vue';
 </script>
 
 <style scoped lang="less"></style>

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>

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 { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore.ts';
-  import { ref, type Ref } from 'vue';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
-
-  // 记录选中按钮id
-  const selectedButtonId: Ref<number> = ref(-1);
 
   // 接收父组件传递的参数
   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 &&
+      useButtonSelectedIdStore().leftButtonSelectedId != -1 &&
-      selectedButtonId.value != index
+      useButtonSelectedIdStore().leftButtonSelectedId != index
     ) {
+      console.error('当前按钮选中有误，请选择正确的按钮。');
       return;
     }
-    selectedButtonId.value = index;
+    useButtonSelectedIdStore().leftButtonSelectedId = index;
-    callback();
+    callback(true);
 
+    // 如果该按钮只执行一次，则取消选中
     if (props.buttonList[index].executeOnce) {
-      selectedButtonId.value = -1;
+      useButtonSelectedIdStore().leftButtonSelectedId = -1;
     }
   };
 </script>

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';
+  import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore.ts';
-
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
-  // 记录选中按钮id
-  const selectedButtonId: Ref<number> = ref(-1);
 
   // 接收父组件传递的参数
   const props = defineProps<{
@@ -36,19 +37,19 @@
     index: number,
     callback: (...args: unknown[]) => unknown
   ) => {
-    if (index == selectedButtonId.value) {
+    if (index == useButtonSelectedIdStore().rightButtonSelectedId) {
-      selectedButtonId.value = -1;
+      useButtonSelectedIdStore().rightButtonSelectedId = -1;
       return;
     } else if (
-      selectedButtonId.value != -1 &&
+      useButtonSelectedIdStore().rightButtonSelectedId != -1 &&
-      selectedButtonId.value != index
+      useButtonSelectedIdStore().rightButtonSelectedId != index
     ) {
       return;
     }
-    selectedButtonId.value = index;
+    useButtonSelectedIdStore().rightButtonSelectedId = index;
     callback();
     if (props.buttonList[index].executeOnce) {
-      selectedButtonId.value = -1;
+      useButtonSelectedIdStore().rightButtonSelectedId = -1;
     }
   };
 </script>

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 type { Point } from '@/types/base/Point.ts';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  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 { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
-  import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint';
+  import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
-  import { useStatusStore } from '@/stores/useStatusStore';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   // 接收父组件传递的参数
   const props = defineProps<{

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 type { Point } from '@/types/base/Point.ts';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  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 { useStatusStore } from '@/stores/useStatusStore.ts';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
-  import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint';
+  import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint.ts';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const riskPoints = ref<Point[]>([]);
 

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 type { Point } from '@/types/base/Point.ts';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  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 { useStatusStore } from '@/stores/useStatusStore.ts';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
-  import { useDangerousSourcePoint } from '@/hooks/rain-earthquake/useDangerousSourcePoint';
+  import { useDangerousSourcePoint } from '@/hooks/rain-earthquake/useDangerousSourcePoint.ts';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const dangerousSourcePoints = ref<Point[]>([]);
 

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 type { Point } from '@/types/base/Point.ts';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  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 { useStatusStore } from '@/stores/useStatusStore.ts';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
-  import { useEmergencyShelterPoint } from '@/hooks/rain-earthquake/useEmergencyShelterPoint';
+  import { useEmergencyShelterPoint } from '@/hooks/rain-earthquake/useEmergencyShelterPoint.ts';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const emergencyShelterPoints = ref<Point[]>([]);
 

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 type { Point } from '@/types/base/Point.ts';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  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 { useStatusStore } from '@/stores/useStatusStore.ts';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
-  import { useFireStationPoint } from '@/hooks/rain-earthquake/useFireStationPoint';
+  import { useFireStationPoint } from '@/hooks/rain-earthquake/useFireStationPoint.ts';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const fireStationPoints = ref<Point[]>([]);
 

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 type { Point } from '@/types/base/Point.ts';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  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 { useStatusStore } from '@/stores/useStatusStore.ts';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
-  import { useHospitalPoint } from '@/hooks/rain-earthquake/useHospitalPoint';
+  import { useHospitalPoint } from '@/hooks/rain-earthquake/useHospitalPoint.ts';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const hospitalPoints = ref<Point[]>([]);
 

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;

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 type { Point } from '@/types/base/Point.ts';
-  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  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 { useStatusStore } from '@/stores/useStatusStore.ts';
-  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
-  import { LoadingResource } from '@/types/common/LoadingResourceType';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
-  import { useStorePointsPoint } from '@/hooks/rain-earthquake/useStorePointsPoint';
+  import { useStorePointsPoint } from '@/hooks/rain-earthquake/useStorePointsPoint.ts';
-  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 
   const storePointsList = ref<Point[]>([]);
 

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;

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>

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>

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>

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>

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';
 
 /**
  * 暴雨灾害链

src/hooks/rain-earthquake/useLayerControl.ts

@@ -1,4 +1,4 @@
-import { useStatusStore } from '@/stores/useStatusStore';
+import { useStatusStore } from '@/stores/useStatusStore.ts';
 
 /**
  * 控制面板显示隐藏逻辑

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,
+  };
+};

src/hooks/rain-earthquake/useRightHandle.ts

@@ -1,6 +1,7 @@
-import { useStatusStore } from '@/stores/useStatusStore';
+import { useStatusStore } from '@/stores/useStatusStore.ts';
-import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+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();
   };
 
   /**

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -10,8 +10,9 @@ import {
   riskAreaIcon,
   waterLoggingIcon,
 } from '@/assets';
-import { useLayerControl } from '../useLayerControl';
+import { useLayerControl } from '../rain-earthquake/useLayerControl.ts';
-import { useRightHandle } from '../useRightHandle';
+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: () => {
+      callback: useLeftHandle().clickAroundAnalysis,
-        console.log('周边分析');
-      },
     },
     {
       name: '关联分析',

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 };
+});

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,
   };

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';