From 1636ad586d4dbc47102cd14eeea956ba0f61b734 Mon Sep 17 00:00:00 2001
From: wzy-warehouse <18135009705@163.com>
Date: Wed, 6 May 2026 18:02:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E4=BE=8B=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rain-earthquake/LeftLegendComponent.vue   | 45 ++++++-----
 src/hooks/rain-earthquake/useLayerControl.ts  | 79 +++++++++----------
 src/hooks/rain-earthquake/useRightHandle.ts   | 72 ++++++++---------
 src/stores/useLeftLegendStore.ts              | 16 ++--
 src/stores/useStatusStore.ts                  |  8 +-
 5 files changed, 115 insertions(+), 105 deletions(-)

diff --git a/src/component/rain-earthquake/LeftLegendComponent.vue b/src/component/rain-earthquake/LeftLegendComponent.vue
index 331e6a2..2c8731d 100644
--- a/src/component/rain-earthquake/LeftLegendComponent.vue
+++ b/src/component/rain-earthquake/LeftLegendComponent.vue
@@ -2,22 +2,31 @@
 <template>
   <div
     class="legend-container"
-    v-show="useStatusStore().uiComponents.leftLegend.show"
+    v-show="
+      useStatusStore().uiComponents.leftLegend.show &&
+      Object.keys(useLeftLegendStore().legendListInfo).length > 0
+    "
   >
-    <div class="legend-title">
-      {{ useLeftLegendStore().legendListInfo.title }}
-    </div>
     <div
-      class="legend-item"
-      v-for="(item, index) in useLeftLegendStore().legendListInfo.list"
-      :key="index"
+      class="legend-box"
+      v-for="key in Object.keys(useLeftLegendStore().legendListInfo)"
+      :key="key"
     >
+      <div class="legend-title">
+        {{ useLeftLegendStore().legendListInfo[key].title }}
+      </div>
       <div
-        class="legend-color"
-        :style="{ 'background-color': `${item.color}` }"
-      ></div>
-      <div class="legend-text">
-        <span class="legend-text-title">{{ item.label }}</span>
+        class="legend-item"
+        v-for="(item, index) in useLeftLegendStore().legendListInfo[key].list"
+        :key="index"
+      >
+        <div
+          class="legend-color"
+          :style="{ 'background-color': `${item.color}` }"
+        ></div>
+        <div class="legend-text">
+          <span class="legend-text-title">{{ item.label }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -35,14 +44,10 @@
     left: 20px;
     z-index: 1000;
     padding: 6px;
-    position: absolute;
-    bottom: 10px;
-    left: 15px;
     border-radius: 2px;
-    z-index: 1000;
     display: flex;
-    flex-direction: column;
-    width: 240px;
+    gap: 30px;
+    min-width: 240px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     color: white;
@@ -51,6 +56,10 @@
     border: 1px solid rgb(0, 225, 255);
   }
 
+  .legend-box:not(:last-child) {
+    border-right: 1px solid rgb(0, 225, 255);
+  }
+
   .legend-title {
     font-weight: bold;
     font-size: 16px;
diff --git a/src/hooks/rain-earthquake/useLayerControl.ts b/src/hooks/rain-earthquake/useLayerControl.ts
index ae68a20..b977920 100644
--- a/src/hooks/rain-earthquake/useLayerControl.ts
+++ b/src/hooks/rain-earthquake/useLayerControl.ts
@@ -61,48 +61,47 @@ export const useLayerControl = () => {
     useStatusStore().poiLayers.showPopulationGrid.loading = true;
 
     if (useStatusStore().poiLayers.showPopulationGrid.show) {
-      // 显示图例
-      useStatusStore().uiComponents.leftLegend.loading = true;
-      useStatusStore().uiComponents.leftLegend.show = true;
-
-      useLeftLegendStore().legendListInfo.title = '人口密度图例';
-      useLeftLegendStore().legendListInfo.list = [
-        {
-          label: 'Min-0 < 100',
-          color: '#b1fe02',
-        },
-        {
-          label: '100 ≤ X < 500',
-          color: '#6bf700',
-        },
-        {
-          label: '500 ≤ X < 1000',
-          color: '#fcf600',
-        },
-        {
-          label: '1000 ≤ X < 2000',
-          color: '#fecb02',
-        },
-        {
-          label: '2000 ≤ X < 4000',
-          color: '#fc9e00',
-        },
-        {
-          label: '4000 ≤ X < 8000',
-          color: '#fe7004',
-        },
-        {
-          label: '8000 ≤ X < 10000',
-          color: '#fb3f02',
-        },
-        {
-          label: '10000 ≤ X < Max',
-          color: '#ff0000',
-        },
-      ];
+      // 添加图例
+      useLeftLegendStore().legendListInfo.population = {
+        title: '人口密度图例',
+        list: [
+          {
+            label: 'Min-0 < 100',
+            color: '#b1fe02',
+          },
+          {
+            label: '100 ≤ X < 500',
+            color: '#6bf700',
+          },
+          {
+            label: '500 ≤ X < 1000',
+            color: '#fcf600',
+          },
+          {
+            label: '1000 ≤ X < 2000',
+            color: '#fecb02',
+          },
+          {
+            label: '2000 ≤ X < 4000',
+            color: '#fc9e00',
+          },
+          {
+            label: '4000 ≤ X < 8000',
+            color: '#fe7004',
+          },
+          {
+            label: '8000 ≤ X < 10000',
+            color: '#fb3f02',
+          },
+          {
+            label: '10000 ≤ X < Max',
+            color: '#ff0000',
+          },
+        ],
+      };
     } else {
       // 隐藏图例
-      useStatusStore().uiComponents.leftLegend.show = false;
+      delete useLeftLegendStore().legendListInfo.population;
     }
   };
 
diff --git a/src/hooks/rain-earthquake/useRightHandle.ts b/src/hooks/rain-earthquake/useRightHandle.ts
index bb712ed..301c84a 100644
--- a/src/hooks/rain-earthquake/useRightHandle.ts
+++ b/src/hooks/rain-earthquake/useRightHandle.ts
@@ -15,46 +15,46 @@ export const useRightHandle = () => {
       useStatusStore().weatherLayers.showRainfallGrid.loading = true;
       useStatusStore().weatherLayers.showRainfallGrid.show = true;
 
-      // 显示图例
-      useStatusStore().uiComponents.leftLegend.loading = true;
-      useStatusStore().uiComponents.leftLegend.show = true;
-      useLeftLegendStore().legendListInfo.title = '降雨量图例';
-      useLeftLegendStore().legendListInfo.list = [
-        {
-          label: '无雨/微雨; <0.1mm/12h',
-          color: 'rgba(200,200,200,0)',
-        },
-        {
-          label: '小雨；<5mm/12h',
-          color: 'rgba(0,0,255,0.4)',
-        },
-        {
-          label: '中雨； <15mm/12h',
-          color: 'rgba(0,255,255,0.5)',
-        },
-        {
-          label: '大雨； <30mm/12h',
-          color: 'rgba(0,255,0,0.6)',
-        },
-        {
-          label: '暴雨； <70mm/12h',
-          color: 'rgba(255,255,0,0.7)',
-        },
-        {
-          label: '大暴雨； <140mm/12h',
-          color: 'rgba(255,165,0,0.8)',
-        },
-        {
-          label: '特大暴雨； >140mm/12h',
-          color: 'rgba(255,0,0,0.9)',
-        },
-      ];
+      // 添加图例
+      useLeftLegendStore().legendListInfo.precipitation = {
+        title: '降雨量图例',
+        list: [
+          {
+            label: '无雨/微雨; <0.1mm/12h',
+            color: 'rgba(200,200,200,0)',
+          },
+          {
+            label: '小雨；<5mm/12h',
+            color: 'rgba(0,0,255,0.4)',
+          },
+          {
+            label: '中雨； <15mm/12h',
+            color: 'rgba(0,255,255,0.5)',
+          },
+          {
+            label: '大雨； <30mm/12h',
+            color: 'rgba(0,255,0,0.6)',
+          },
+          {
+            label: '暴雨； <70mm/12h',
+            color: 'rgba(255,255,0,0.7)',
+          },
+          {
+            label: '大暴雨； <140mm/12h',
+            color: 'rgba(255,165,0,0.8)',
+          },
+          {
+            label: '特大暴雨； >140mm/12h',
+            color: 'rgba(255,0,0,0.9)',
+          },
+        ],
+      };
     } else {
       // 关闭暴雨模拟：隐藏降雨栅格图层
       useStatusStore().weatherLayers.showRainfallGrid.show = false;
 
-      // 隐藏图例
-      useStatusStore().uiComponents.leftLegend.show = false;
+      // 删除图例
+      delete useLeftLegendStore().legendListInfo.precipitation;
     }
   };
 
diff --git a/src/stores/useLeftLegendStore.ts b/src/stores/useLeftLegendStore.ts
index e32035f..4833ce8 100644
--- a/src/stores/useLeftLegendStore.ts
+++ b/src/stores/useLeftLegendStore.ts
@@ -5,12 +5,14 @@ import { ref, type Ref } from 'vue';
  * 左侧图例信息
  */
 export const useLeftLegendStore = defineStore('leftLegend', () => {
-  const legendListInfo: Ref<{
-    title: string;
-    list: { label: string; color: string }[];
-  }> = ref({
-    title: '',
-    list: [],
-  });
+  const legendListInfo: Ref<
+    Record<
+      string,
+      {
+        title: string;
+        list: { label: string; color: string }[];
+      }
+    >
+  > = ref({});
   return { legendListInfo };
 });
diff --git a/src/stores/useStatusStore.ts b/src/stores/useStatusStore.ts
index 395f226..acdc685 100644
--- a/src/stores/useStatusStore.ts
+++ b/src/stores/useStatusStore.ts
@@ -29,8 +29,8 @@ export const useStatusStore = defineStore('status', () => {
       loading: true,
     },
     leftLegend: {
-      show: false,
-      loading: false,
+      show: true,
+      loading: true,
     },
     rightButton: {
       show: true,
@@ -215,8 +215,8 @@ export const useStatusStore = defineStore('status', () => {
       loading: true,
     };
     uiComponents.leftLegend = {
-      show: false,
-      loading: false,
+      show: true,
+      loading: true,
     };
     uiComponents.rightButton = {
       show: true,