From 08e6897d13324eb091306cad5a215ca3bfcd4934 Mon Sep 17 00:00:00 2001
From: wzy-warehouse <18135009705@163.com>
Date: Thu, 7 May 2026 10:39:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=99=8D=E9=9B=A8=E6=8E=A8?=
 =?UTF-8?q?=E6=BC=94=E6=AD=A5=E9=AA=A4=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rain-earthquake/StepComponent.vue         | 15 ++++--
 src/hooks/rain-earthquake/useRightHandle.ts   | 41 +++-----------
 src/hooks/rainstorm/useRainDisasterChain.ts   |  2 +-
 src/hooks/rainstorm/useRainstormDeduction.ts  | 54 +++++++++++++++++++
 4 files changed, 73 insertions(+), 39 deletions(-)
 create mode 100644 src/hooks/rainstorm/useRainstormDeduction.ts

diff --git a/src/component/rain-earthquake/StepComponent.vue b/src/component/rain-earthquake/StepComponent.vue
index 5762d5c..7b784a6 100644
--- a/src/component/rain-earthquake/StepComponent.vue
+++ b/src/component/rain-earthquake/StepComponent.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="step-box">
+  <div class="step-box" v-show="useStatusStore().uiComponents.stepBar.show">
     <el-steps
-      style="max-width: 100%"
+      style="width: 100%; background-color: #ffffff00"
       :active="useStepStore().currentStep"
       finish-status="success"
-      simple
-      v-if="useStepStore().stepList.length > 0"
+      process-status="success"
+      align-center
     >
       <el-step
         v-for="(item, index) in useStepStore().stepList"
@@ -17,13 +17,14 @@
 </template>
 
 <script lang="ts" setup>
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { useStepStore } from '@/stores/useStepStore';
 </script>
 
 <style scoped>
   .step-box {
     width: 100%;
-    height: 50px;
+    height: 65px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -33,4 +34,8 @@
     background-color: rgba(14, 52, 98, 0.8);
     z-index: 1000;
   }
+
+  :deep(.is-wait) {
+    color: #fff;
+  }
 </style>
diff --git a/src/hooks/rain-earthquake/useRightHandle.ts b/src/hooks/rain-earthquake/useRightHandle.ts
index 40bfe0d..a29b8f1 100644
--- a/src/hooks/rain-earthquake/useRightHandle.ts
+++ b/src/hooks/rain-earthquake/useRightHandle.ts
@@ -3,6 +3,7 @@ import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
 import config from '@/config/config.json';
 import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
 import { useScene } from '../useScene';
+import { useRainstormDeduction } from '../rainstorm/useRainstormDeduction';
 
 export const useRightHandle = () => {
   /**
@@ -11,50 +12,24 @@ export const useRightHandle = () => {
    */
   const rainstormSimulation = (status: unknown) => {
     if (status as boolean) {
+      // 显示步骤
+      useRainstormDeduction().showStep();
+
       // 开启暴雨模拟：显示降雨栅格图层
       useStatusStore().weatherLayers.showRainfallGrid.loading = true;
       useStatusStore().weatherLayers.showRainfallGrid.show = true;
 
       // 添加图例
-      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)',
-          },
-        ],
-      };
+      useRainstormDeduction().addLegend();
     } else {
       // 关闭暴雨模拟：隐藏降雨栅格图层
       useStatusStore().weatherLayers.showRainfallGrid.show = false;
 
       // 删除图例
       delete useLeftLegendStore().legendListInfo.precipitation;
+
+      // 隐藏步骤条
+      useStatusStore().uiComponents.stepBar.show = false;
     }
   };
 
diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts
index 23971a4..3de0410 100644
--- a/src/hooks/rainstorm/useRainDisasterChain.ts
+++ b/src/hooks/rainstorm/useRainDisasterChain.ts
@@ -170,7 +170,7 @@ export const useRainDisasterChain = () => {
    */
   const rightButtonInfo = [
     {
-      name: '暴雨推演',
+      name: '降雨推演',
       callback: (status: unknown) =>
         useRightHandle().rainstormSimulation(status),
     },
diff --git a/src/hooks/rainstorm/useRainstormDeduction.ts b/src/hooks/rainstorm/useRainstormDeduction.ts
new file mode 100644
index 0000000..845db70
--- /dev/null
+++ b/src/hooks/rainstorm/useRainstormDeduction.ts
@@ -0,0 +1,54 @@
+import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
+import { useStatusStore } from '@/stores/useStatusStore';
+import { useStepStore } from '@/stores/useStepStore';
+
+export const useRainstormDeduction = () => {
+  /**
+   * 显示步骤
+   */
+  const showStep = () => {
+    useStatusStore().uiComponents.stepBar.show = true;
+    useStepStore().stepList = ['获取雨量', '模型计算', '灾害预警', '报告产出'];
+  };
+
+  /**
+   * 添加图例
+   */
+  const addLegend = () => {
+    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.89)',
+        },
+        {
+          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)',
+        },
+      ],
+    };
+  };
+
+  return { showStep, addLegend };
+};