调整控制显示面板

src/component/rain-earthquake/ControlShowComponent.vue

@@ -4,18 +4,49 @@
     v-show="useStatusStore().uiComponents.controlPanel.show"
   >
     <div class="title-box">
-      <header>控制显示</header>
+      <header>图例与控制</header>
     </div>
 
     <div class="control-show-list">
-      <div v-for="(item, index) in constrolShowList" :key="index">
+      <!-- 按分类显示 -->
+      <div
+        v-for="(category, categoryIndex) in categorizedList"
+        :key="categoryIndex"
+        class="category-section"
+      >
+        <!-- 分类标题 -->
+        <div class="category-title">{{ category.title }}</div>
+        <!-- 分类下的项目 -->
+        <div
+          v-for="(item, index) in category.items"
+          :key="index"
+          class="control-item"
+        >
           <el-checkbox
             v-model="item.statusStore[item.statusKey].show"
-          :label="item.name"
             @change="
               changeStatus(item.statusStore[item.statusKey].show, item.callback)
             "
           />
+          <!-- 图例部分 -->
+          <div class="legend-content">
+            <!-- 支持图片链接 -->
+            <img
+              v-if="item.link"
+              :src="item.link"
+              :alt="item.name"
+              class="legend-item-img"
+            />
+            <!-- 支持HTML+CSS样式 -->
+            <div
+              v-else-if="item.html"
+              v-html="item.html"
+              class="legend-item-html"
+            ></div>
+          </div>
+          <!-- 描述文字 -->
+          <span class="item-description">{{ item.name }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -24,16 +55,41 @@
 <script lang="ts" setup>
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
   import { useStatusStore } from '@/stores/useStatusStore';
+  import { computed } from 'vue';
 
-  defineProps<{
+  const props = defineProps<{
     constrolShowList: {
       name: string;
       statusStore: Record<string, { show: boolean; loading: boolean }>;
       statusKey: string;
       callback: (...args: unknown[]) => unknown;
+      link?: string; // 图例图片链接
+      html?: string; // 图例HTML内容
+      category?: string; // 分类名称
     }[];
   }>();
 
+  // 按分类组织的数据
+  const categorizedList = computed(() => {
+    const categories: Record<
+      string,
+      { title: string; items: typeof props.constrolShowList }
+    > = {};
+
+    props.constrolShowList.forEach((item) => {
+      const categoryName = item.category || '其他';
+      if (!categories[categoryName]) {
+        categories[categoryName] = {
+          title: categoryName,
+          items: [],
+        };
+      }
+      categories[categoryName].items.push(item);
+    });
+
+    return Object.values(categories);
+  });
+
   // 状态改变执行
   const changeStatus = (
     status: boolean,
@@ -50,19 +106,20 @@
 <style scoped>
   .control-show-panel-box {
     position: absolute;
-    top: 75px;
+    bottom: 20px;
-    right: 0px;
+    right: 20px;
     border-radius: 2px;
     z-index: 1000;
-    width: 160px;
+    width: 200px;
     overflow: auto;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     color: white;
     border: 1px solid rgb(0, 225, 255);
+    max-height: 650px;
   }
   .title-box {
     font-weight: bold;
-    font-size: 12px;
+    font-size: 16px;
     background: linear-gradient(
       180deg,
       rgb(86, 204, 242) 0%,
@@ -76,12 +133,65 @@
     padding: 8px;
     display: flex;
     flex-direction: column;
-    font-size: 12px;
+    font-size: 14px;
     gap: 6px;
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+  .category-section {
+    margin-bottom: 8px;
+  }
+  .category-title {
+    font-weight: bold;
+    font-size: 14px;
+    color: #00e1ff;
+    padding: 4px 0;
+    margin-bottom: 4px;
+    border-bottom: 1px solid rgba(0, 225, 255, 0.3);
+  }
+  .control-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px 0;
+  }
+  .legend-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+  }
+  .legend-item-img {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    object-fit: contain;
+  }
+  .legend-item-html {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .legend-item-html :deep(*) {
+    width: 100%;
+    height: 100%;
+  }
+  .item-description {
+    flex: 1;
+    text-align: justify;
+    text-justify: inter-ideograph;
+    font-size: 14px;
+    line-height: 1.5;
+    letter-spacing: 0.5px;
+    word-break: break-all;
   }
   :deep(.el-checkbox) {
     height: auto;
     color: #fff;
+    margin-right: 0;
   }
   :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
     color: #fff;

src/component/rain-earthquake/LegendComponent.vue

@@ -1,163 +0,0 @@
-<!-- 图例组件 -->
-<template>
-  <!-- 控制按钮 -->
-  <div
-    class="control-box"
-    :style="{
-      bottom: `${useStatusStore().uiComponents.legendShow.show ? 248 : 25}px`,
-    }"
-  >
-    <el-button
-      @click="changeStatus"
-      circle
-      :title="`${useStatusStore().uiComponents.legendShow.show ? '关闭' : '打开'}图例`"
-      >{{
-        useStatusStore().uiComponents.legendShow.show ? '-' : '+'
-      }}</el-button
-    >
-  </div>
-  <div
-    class="legend-box"
-    v-show="useStatusStore().uiComponents.legendShow.show"
-  >
-    <div class="title-box">
-      <header>图例</header>
-    </div>
-    <div class="legend-list-box">
-      <el-row
-        v-for="(list, index1) in finalLegendList"
-        :key="index1"
-        class="legend-row"
-      >
-        <el-col
-          :span="24 / colsNum"
-          v-for="(item, index2) in list"
-          :key="`${index1}_${index2}`"
-        >
-          <div class="legend-item">
-            <!-- 支持图片链接 -->
-            <img v-if="item.link" :src="item.link" :alt="item.name" class="legend-item-img" />
-            <!-- 支持HTML+CSS样式 -->
-            <div v-else-if="item.html" v-html="item.html" class="legend-item-html"></div>
-            <span class="legend-item-text">{{ item.name }}</span>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { useStatusStore } from '@/stores/useStatusStore';
-  import { Utils } from '@/utils/utils';
-  import { onMounted, ref, type Ref } from 'vue';
-
-  // 接收父组件传递的属性
-  const props = defineProps<{
-    legendList: { name: string; link?: string; html?: string }[];
-    colsNum: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
-  }>();
-
-  // 处理后图例列表
-  const finalLegendList: Ref<{ name: string; link?: string; html?: string }[][]> = ref([]);
-
-  // 切换图例显示状态
-  const changeStatus = () => {
-    useStatusStore().uiComponents.legendShow.show =
-      !useStatusStore().uiComponents.legendShow.show;
-  };
-
-  onMounted(() => {
-    finalLegendList.value = Utils.chunkArray(props.legendList, props.colsNum);
-  });
-</script>
-
-<style scoped>
-  .legend-box {
-    position: absolute;
-    bottom: 20px;
-    right: 15px;
-    z-index: 1000;
-    width: 310px;
-    height: 265px;
-    overflow-y: auto;
-    box-shadow: inset 0px 0px 9px rgba(62, 136, 210, 1);
-    color: white;
-    font-family: Arial, sans-serif;
-    border: 1px solid rgba(0, 225, 255, 1);
-  }
-
-  .control-box {
-    position: absolute;
-    right: 30px;
-    z-index: 1001;
-  }
-
-  .title-box {
-    background: linear-gradient(
-      180deg,
-      rgba(86, 204, 242, 1) 0%,
-      rgba(47, 128, 237, 1) 100%
-    );
-    height: 25px;
-    padding: 10px;
-    text-align: center;
-    font-weight: bold;
-    flex-shrink: 0;
-  }
-
-  .legend-list-box {
-    background: rgba(14, 52, 98, 0.8);
-    padding: 10px;
-    height: calc(100% - 45px);
-    box-sizing: border-box;
-  }
-
-  .legend-row {
-    margin-bottom: 2px;
-  }
-
-  .legend-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 8px;
-    margin: 0;
-    min-height: 20px;
-    border-radius: 3px;
-    transition: background-color 0.2s ease;
-  }
-
-  .legend-item-img {
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-    object-fit: contain;
-    margin-right: 8px;
-  }
-
-  .legend-item-html {
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-    margin-right: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .legend-item-html :deep(*) {
-    width: 100%;
-    height: 100%;
-  }
-
-  .legend-item-text {
-    flex: 1;
-    text-align: justify;
-    text-justify: inter-ideograph;
-    font-size: 14px;
-    line-height: 1.5;
-    letter-spacing: 0.5px;
-    word-break: break-all;
-  }
-</style>

src/component/rain-earthquake/RightButtonComponent.vue

@@ -79,7 +79,7 @@
     width: 180px;
     position: absolute;
     top: 45px;
-    right: 200px;
+    right: 40px;
     z-index: 1000;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0);

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -88,30 +88,6 @@ export const useEarthquakeDisasterChain = () => {
     paginationConfig.value.currentPage = value;
   };
 
-  // ================图例================================
-  /**
-   * 图例数据
-   */
-  const legendList = [
-    // 隐患点
-    { name: '滑坡隐患点', link: landslideIcon },
-    { name: '泥石流隐患点', link: debrisFlowIcon },
-    { name: '风险区域', link: riskAreaIcon },
-    // 断裂带
-    { name: '断裂带', link: earthquakeLineIcon },
-    // 承灾体
-    { 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 },
-  ];
-
   // ================左侧按钮================================
   /**
    * 左侧按钮信息
@@ -205,107 +181,146 @@ export const useEarthquakeDisasterChain = () => {
     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.mapLayers,
         statusKey: 'riskPointShow' as const,
         callback: layerControl.clickRiskPoint,
+        link: riskAreaIcon,
+        category: '灾害隐患点',
       },
+      {
+        name: '显示断裂带',
+        statusStore: statusStore.mapLayers,
+        statusKey: 'faultShow' as const,
+        callback: layerControl.clickFault,
+        link: earthquakeLineIcon,
+        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: '基础设施',
       },
     ];
   };
@@ -316,7 +331,6 @@ export const useEarthquakeDisasterChain = () => {
     tableDatas,
     tableColumns,
     paginationConfig,
-    legendList,
     leftButtonInfo,
     rightButtonInfo,
     controlPanel: getControlPanel(),

src/hooks/rain-earthquake/useLayerControl.ts

@@ -142,8 +142,16 @@ export const useLayerControl = () => {
     useStatusStore().mapLayers.riskPointShow.loading = true;
   };
 
+  /**
+   * 显示断裂带
+   */
+  const clickFault = () => {
+    useStatusStore().mapLayers.faultShow.loading = true;
+  };
+
   return {
     clickRiskPoint,
+    clickFault,
     clickHospital,
     clickDangerousSource,
     clickEmergencyShelter,

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,

src/stores/useStatusStore.ts

@@ -19,11 +19,6 @@ export const useStatusStore = defineStore('status', () => {
    * UI 组件显示状态集合
    */
   const uiComponents = reactive({
-    /** 图例显示状态 */
-    legendShow: {
-      show: true,
-      loading: true,
-    },
     /** 灾情链影响点表格显示状态 */
     disasterChainPointShow: {
       show: false,
@@ -196,10 +191,6 @@ export const useStatusStore = defineStore('status', () => {
    */
   const resetScene = () => {
     // UI 组件显示状态重置
-    uiComponents.legendShow = {
-      show: true,
-      loading: true,
-    };
     uiComponents.disasterChainPointShow = {
       show: false,
       loading: true,

src/views/home/earthquake/EarthquakeView.vue

@@ -28,16 +28,6 @@
       @change-current-page="changeCurrentPage"
     />
 
-    <!-- 图例组件 -->
-    <LegendComponent
-      v-if="
-        useStatusStore().appLoadingCompleted &&
-        useStatusStore().uiComponents.legendShow.loading
-      "
-      :legend-list="legendList"
-      :cols-num="2"
-    />
-
     <!-- 左侧按钮组件 -->
     <LeftButtonComponent
       v-if="
@@ -71,7 +61,6 @@
   import ControlShowDetailComponent from '@/component/rain-earthquake/ControlShowDetailComponent.vue';
   import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.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';
   import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain';
   import { useStatusStore } from '@/stores/useStatusStore';
@@ -87,7 +76,6 @@
     tableDatas,
     tableColumns,
     paginationConfig,
-    legendList,
     leftButtonInfo,
     rightButtonInfo,
     controlPanel,

src/views/home/rainstorm/RainstormView.vue

@@ -20,16 +20,6 @@
       @change-current-page="changeCurrentPage"
     />
 
-    <!-- 图例组件 -->
-    <LegendComponent
-      v-if="
-        useStatusStore().appLoadingCompleted &&
-        useStatusStore().uiComponents.legendShow.loading
-      "
-      :legend-list="legendList"
-      :cols-num="2"
-    />
-
     <!-- 左侧按钮组件 -->
     <LeftButtonComponent
       v-if="
@@ -66,7 +56,6 @@
   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';
   import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
   import { useStatusStore } from '@/stores/useStatusStore';
@@ -80,7 +69,6 @@
     tableDatas,
     tableColumns,
     paginationConfig,
-    legendList,
     leftButtonInfo,
     rightButtonInfo,
     controlPanel,