规整代码，同时保留功能

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -5,14 +5,15 @@ import { PointType } from '@/types/common/DisasterType';
 import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
 import config from '@/config/config.json';
 import { useStatusStore } from '@/stores/useStatusStore';
-import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+import { useLayerControl } from '../useLayerControl';
-import { LoadingResource } from '@/types/common/LoadingResourceType';
+import { debrisFlowIcon, landslideIcon, riskAreaIcon } from '@/assets';
 
 /**
- * 暴雨灾害链影响点列表钩子函数
+ * 暴雨灾害链
- * @returns 搜索条件、表格数据、分页配置及相关方法
+ * @returns
  */
 export const useEarthquakeDisasterChain = () => {
+  // ================灾害链影响点列表================================
   /**
    * 搜索条件
    */
@@ -74,6 +75,17 @@ export const useEarthquakeDisasterChain = () => {
     paginationConfig.value.currentPage = value;
   };
 
+  // ================图例================================
+  /**
+   * 图例数据
+   */
+  const legendList = [
+    { name: '滑坡隐患点', link: landslideIcon },
+    { name: '泥石流隐患点', link: debrisFlowIcon },
+    { name: '风险区域', link: riskAreaIcon },
+  ];
+
+  // ================左侧按钮================================
   /**
    * 左侧按钮信息
    */
@@ -128,6 +140,7 @@ export const useEarthquakeDisasterChain = () => {
     },
   ];
 
+  // ================右侧按钮================================
   /**
    * 右侧按钮信息
    */
@@ -162,41 +175,12 @@ export const useEarthquakeDisasterChain = () => {
     },
   ];
 
+  // ================控制面板================================
   const controlPanel = ref([
     {
       name: '显示隐患点',
       selected: useStatusStore().mapLayers.hiddenDangerPointShow,
-      callback: (status: unknown) => {
+      callback: useLayerControl().clickHiddenDangerPoint,
-        if (status as boolean) {
-          // 显示隐患点
-          CesiumUtilsSingleton.batchShowPrimitives(
-            useLoadingResourceStore().getLoadingResource(
-              LoadingResource.HIDDEN_DANGER_POINT
-            )
-          );
-
-          // 显示风险点
-          CesiumUtilsSingleton.batchShowPrimitives(
-            useLoadingResourceStore().getLoadingResource(
-              LoadingResource.RISK_POINT
-            )
-          );
-        } else {
-          // 隐藏隐患点
-          CesiumUtilsSingleton.batchHidePrimitives(
-            useLoadingResourceStore().getLoadingResource(
-              LoadingResource.HIDDEN_DANGER_POINT
-            )
-          );
-
-          // 隐藏风险点
-          CesiumUtilsSingleton.batchHidePrimitives(
-            useLoadingResourceStore().getLoadingResource(
-              LoadingResource.RISK_POINT
-            )
-          );
-        }
-      },
     },
     {
       name: '显示医院',
@@ -305,6 +289,7 @@ export const useEarthquakeDisasterChain = () => {
     tableDatas,
     tableColumns,
     paginationConfig,
+    legendList,
     leftButtonInfo,
     rightButtonInfo,
     controlPanel,

src/hooks/earthquake/useEarthquakeLegend.ts

@@ -1,18 +0,0 @@
-import { debrisFlowIcon, landslideIcon, riskAreaIcon } from '@/assets';
-
-/**
- * 暴雨图例钩子函数
- * @returns 图例数据列表
- */
-export const useEarthquakeLegend = () => {
-  /**
-   * 图例数据
-   */
-  const legendList = [
-    { name: '滑坡隐患点', link: landslideIcon },
-    { name: '泥石流隐患点', link: debrisFlowIcon },
-    { name: '风险区域', link: riskAreaIcon },
-  ];
-
-  return { legendList };
-};

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -5,12 +5,20 @@ import { PointType } from '@/types/common/DisasterType';
 import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
 import config from '@/config/config.json';
 import { useStatusStore } from '@/stores/useStatusStore';
+import {
+  debrisFlowIcon,
+  flashFloodIcon,
+  landslideIcon,
+  riskAreaIcon,
+  waterLoggingIcon,
+} from '@/assets';
 
 /**
- * 暴雨灾害链影响点列表钩子函数
+ * 暴雨灾害链
- * @returns 搜索条件、表格数据、分页配置及相关方法
+ * @returns
  */
 export const useRainDisasterChain = () => {
+  // ================灾害链影响点列表================================
   /**
    * 搜索条件
    */
@@ -73,6 +81,19 @@ export const useRainDisasterChain = () => {
     paginationConfig.value.currentPage = value;
   };
 
+  // ================图例================================
+  /**
+   * 图例数据
+   */
+  const legendList = [
+    { name: '滑坡隐患点', link: landslideIcon },
+    { name: '泥石流隐患点', link: debrisFlowIcon },
+    { name: '山洪隐患点', link: flashFloodIcon },
+    { name: '内涝隐患点', link: waterLoggingIcon },
+    { name: '风险区域', link: riskAreaIcon },
+  ];
+
+  // ================左侧按钮================================
   /**
    * 左侧按钮信息
    */
@@ -139,6 +160,7 @@ export const useRainDisasterChain = () => {
     },
   ];
 
+  // ================右侧按钮================================
   /**
    * 右侧按钮信息
    */
@@ -185,6 +207,10 @@ export const useRainDisasterChain = () => {
     },
   ];
 
+  // ================控制面板================================
+  /**
+   * 控制面板信息
+   */
   const controlPanel = [
     {
       name: '显示医院',
@@ -293,6 +319,7 @@ export const useRainDisasterChain = () => {
     tableDatas,
     tableColumns,
     paginationConfig,
+    legendList,
     leftButtonInfo,
     rightButtonInfo,
     controlPanel,

src/hooks/rainstorm/useRainLegend.ts

@@ -1,26 +0,0 @@
-import {
-  debrisFlowIcon,
-  flashFloodIcon,
-  landslideIcon,
-  riskAreaIcon,
-  waterLoggingIcon,
-} from '@/assets';
-
-/**
- * 暴雨图例钩子函数
- * @returns 图例数据列表
- */
-export const useRainLegend = () => {
-  /**
-   * 图例数据
-   */
-  const legendList = [
-    { name: '滑坡隐患点', link: landslideIcon },
-    { name: '泥石流隐患点', link: debrisFlowIcon },
-    { name: '山洪隐患点', link: flashFloodIcon },
-    { name: '内涝隐患点', link: waterLoggingIcon },
-    { name: '风险区域', link: riskAreaIcon },
-  ];
-
-  return { legendList };
-};

src/hooks/useLayerControl.ts

@@ -0,0 +1,42 @@
+import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+import { LoadingResource } from '@/types/common/LoadingResourceType';
+import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+
+/**
+ * 控制面板显示隐藏逻辑
+ */
+export const useLayerControl = () => {
+  /**
+   * 点击显示隐藏隐患点
+   * @param status - 显示隐藏状态
+   */
+  const clickHiddenDangerPoint = (status: unknown) => {
+    if (status as boolean) {
+      // 显示隐患点
+      CesiumUtilsSingleton.batchShowPrimitives(
+        useLoadingResourceStore().getLoadingResource(
+          LoadingResource.HIDDEN_DANGER_POINT
+        )
+      );
+
+      // 显示风险点
+      CesiumUtilsSingleton.batchShowPrimitives(
+        useLoadingResourceStore().getLoadingResource(LoadingResource.RISK_POINT)
+      );
+    } else {
+      // 隐藏隐患点
+      CesiumUtilsSingleton.batchHidePrimitives(
+        useLoadingResourceStore().getLoadingResource(
+          LoadingResource.HIDDEN_DANGER_POINT
+        )
+      );
+
+      // 隐藏风险点
+      CesiumUtilsSingleton.batchHidePrimitives(
+        useLoadingResourceStore().getLoadingResource(LoadingResource.RISK_POINT)
+      );
+    }
+  };
+
+  return { clickHiddenDangerPoint };
+};

src/views/home/earthquake/EarthquakeView.vue

@@ -38,7 +38,6 @@
   import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
   import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
   import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain';
-  import { useEarthquakeLegend } from '@/hooks/earthquake/useEarthquakeLegend';
   import { DisasterType } from '@/types/common/DisasterType.ts';
   import { watch } from 'vue';
   import { useRoute } from 'vue-router';
@@ -51,6 +50,7 @@
     tableDatas,
     tableColumns,
     paginationConfig,
+    legendList,
     leftButtonInfo,
     rightButtonInfo,
     controlPanel,
@@ -58,8 +58,6 @@
     changeCurrentPage,
   } = useEarthquakeDisasterChain();
 
-  const { legendList } = useEarthquakeLegend();
-
   // 监听条件变化
   watch(
     conditions,

src/views/home/rainstorm/RainstormView.vue

@@ -38,7 +38,6 @@
   import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
   import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
   import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
-  import { useRainLegend } from '@/hooks/rainstorm/useRainLegend';
   import { DisasterType } from '@/types/common/DisasterType.ts';
   import { watch } from 'vue';
   import { useRoute } from 'vue-router';
@@ -51,6 +50,7 @@
     tableDatas,
     tableColumns,
     paginationConfig,
+    legendList,
     leftButtonInfo,
     rightButtonInfo,
     controlPanel,
@@ -58,8 +58,6 @@
     changeCurrentPage,
   } = useRainDisasterChain();
 
-  const { legendList } = useRainLegend();
-
   // 监听条件变化
   watch(
     conditions,