调整控制显示面板

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -91,30 +91,6 @@ export const useRainDisasterChain = () => {
     paginationConfig.value.currentPage = value;
   };
 
-  // ================图例================================
-  /**
-   * 图例数据
-   */
-  const legendList = [
-    // 隐患点
-    { name: '滑坡隐患点', link: landslideIcon },
-    { name: '泥石流隐患点', link: debrisFlowIcon },
-    { name: '山洪隐患点', link: flashFloodIcon },
-    { name: '内涝隐患点', link: waterLoggingIcon },
-    { name: '风险区域', link: riskAreaIcon },
-    // 承灾体
-    { name: '医院', link: hospitalIcon },
-    { name: '危险源', link: dangerousSourceIcon },
-    { name: '避难所', link: emergencyShelterIcon },
-    { name: '消防站', link: firefighterIcon },
-    { name: '储备点', link: storePointsIcon },
-    { name: '学校', link: schoolIcon },
-    { name: '地铁站', link: subwayIcon },
-    // 基础设施
-    { name: '桥梁', link: bridgeIcon },
-    { name: '水库', link: reservoirIcon },
-  ];
-
   // ================左侧按钮================================
   /**
    * 左侧按钮信息
@@ -234,119 +210,154 @@ export const useRainDisasterChain = () => {
     const layerControl = useLayerControl();
 
     return [
+      // 灾害隐患点类别
       {
         name: '显示滑坡隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showLandslideHiddenPoint' as const,
         callback: layerControl.clickLandslideHiddenPoint,
+        link: landslideIcon,
+        category: '灾害隐患点',
       },
       {
         name: '显示泥石流隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showDebrisFlowHiddenPoint' as const,
         callback: layerControl.clickDebrisFlowHiddenPoint,
+        link: debrisFlowIcon,
+        category: '灾害隐患点',
       },
       {
         name: '显示内涝隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showWaterLoggingHiddenPoint' as const,
         callback: layerControl.clickWaterLoggingHiddenPoint,
+        link: waterLoggingIcon,
+        category: '灾害隐患点',
       },
       {
         name: '显示山洪隐患点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showFlashFloodHiddenPoint' as const,
         callback: layerControl.clickFlashFloodHiddenPoint,
+        link: flashFloodIcon,
+        category: '灾害隐患点',
       },
       {
         name: '显示风险点',
         statusStore: statusStore.mapLayers,
         statusKey: 'riskPointShow' as const,
         callback: layerControl.clickRiskPoint,
+        link: riskAreaIcon,
+        category: '灾害隐患点',
       },
+      // 基础设施类别
       {
         name: '显示医院',
         statusStore: statusStore.poiLayers,
         statusKey: 'showHospital' as const,
         callback: layerControl.clickHospital,
+        link: hospitalIcon,
+        category: '基础设施',
       },
       {
         name: '显示危险源',
         statusStore: statusStore.poiLayers,
         statusKey: 'showDangerSource' as const,
         callback: layerControl.clickDangerousSource,
+        link: dangerousSourceIcon,
+        category: '基础设施',
       },
       {
         name: '显示避难所',
         statusStore: statusStore.poiLayers,
         statusKey: 'showRefugeeShelter' as const,
         callback: layerControl.clickEmergencyShelter,
+        link: emergencyShelterIcon,
+        category: '基础设施',
       },
       {
         name: '显示消防站',
         statusStore: statusStore.poiLayers,
         statusKey: 'showFireStation' as const,
         callback: layerControl.clickFireStation,
+        link: firefighterIcon,
+        category: '基础设施',
       },
       {
         name: '显示储备点',
         statusStore: statusStore.poiLayers,
         statusKey: 'showReservePoint' as const,
         callback: layerControl.clickStorePoints,
+        link: storePointsIcon,
+        category: '基础设施',
       },
       {
         name: '显示学校',
         statusStore: statusStore.poiLayers,
         statusKey: 'showSchool' as const,
         callback: layerControl.clickSchool,
+        link: schoolIcon,
+        category: '基础设施',
       },
       {
         name: '显示人口网格',
         statusStore: statusStore.poiLayers,
         statusKey: 'showPopulationGrid' as const,
         callback: layerControl.clickPopulationGrid,
+        category: '基础设施',
       },
       {
         name: '显示管网系统',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showNetworkSystem' as const,
         callback: layerControl.clickWaterPipe,
+        category: '基础设施',
       },
       {
         name: '显示交通道路',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showTrafficRoad' as const,
         callback: layerControl.clickTrafficRoad,
+        category: '基础设施',
       },
       {
         name: '显示桥梁',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showBridge' as const,
         callback: layerControl.clickBridge,
+        link: bridgeIcon,
+        category: '基础设施',
       },
       {
         name: '显示高速',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showHighway' as const,
         callback: layerControl.clickHighway,
+        category: '基础设施',
       },
       {
         name: '显示国道',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showMainRoad' as const,
         callback: layerControl.clickNationRoad,
+        category: '基础设施',
       },
       {
         name: '显示水库',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showReservoir' as const,
         callback: layerControl.clickReservoir,
+        link: reservoirIcon,
+        category: '基础设施',
       },
       {
         name: '显示地铁站',
         statusStore: statusStore.poiLayers,
         statusKey: 'showSubwayStation' as const,
         callback: layerControl.clickSubwayStation,
+        link: subwayIcon,
+        category: '基础设施',
       },
     ];
   };
@@ -366,7 +377,6 @@ export const useRainDisasterChain = () => {
     tableDatas,
     tableColumns,
     paginationConfig,
-    legendList,
     leftButtonInfo,
     rightButtonInfo,
     changeConditions,