暴雨灾害链模型推演计算

src/api/api.ts

@@ -55,6 +55,8 @@ import type { XianSchool } from '@/types/base/XianSchool';
 import type { XianBridge } from '@/types/base/XianBridge.ts';
 import type { XianReservoirList } from '@/types/base/XianReservoirList';
 import type { XianSubwayStations } from '@/types/base/XianSubwayStations';
+import { modelDeduction as rainfallModelDeduction } from './rainfall';
+import type { RainPredictResponse } from '@/types/rainstorm/RainPredictResponse';
 
 /**
  * API接口统一导出对象
@@ -277,4 +279,17 @@ export const $api = {
     ): Promise<ApiResponse<XianSubwayStations>> =>
       getSubwayStationsPointDetailById(id),
   },
+
+  // 暴雨推演
+  rainfall: {
+    /**
+     * 进行模型推演
+     * @param disasterName 灾害名称
+     * @returns 推演点的概率
+     */
+    modelDeduction: (
+      disasterName: string
+    ): Promise<ApiResponse<RainPredictResponse>> =>
+      rainfallModelDeduction(disasterName),
+  },
 };

src/api/rainfall.ts

@@ -0,0 +1,16 @@
+import type { ApiResponse } from '@/types/ApiResponse';
+import type { RainPredictResponse } from '@/types/rainstorm/RainPredictResponse';
+import httpInstance from '@/utils/request/http';
+
+/**
+ * 进行模型推演
+ * @param disasterName 灾害名称
+ * @returns 推演点的概率
+ */
+export const modelDeduction = (
+  disasterName: string
+): Promise<ApiResponse<RainPredictResponse[]>> => {
+  return httpInstance.post('/algorithm-api/rainfall/predict', {
+    disaster_name: disasterName,
+  });
+};

src/component/map/AdministrativeDivision.vue

@@ -40,7 +40,9 @@
         polygonStyle: {
           fill: true,
           fillColor: areasColor[index].withAlpha(areaTransparency),
-          outline: false,
+          outline: true,
+          outlineColor: Color.WHITE,
+          outlineWidth: 3,
         },
       },
     }));

src/component/rain-earthquake/detail-panels/RainfallGridComponent.vue

@@ -4,12 +4,14 @@
 </template>
 
 <script lang="ts" setup>
+  import { $api } from '@/api/api';
   import { useRainstormDeduction } from '@/hooks/rainstorm/useRainstormDeduction';
   import { useStatusStore } from '@/stores/useStatusStore';
   import { useStepStore } from '@/stores/useStepStore';
   import type { ApiResponse } from '@/types/ApiResponse';
   import type { RainfallGridResponse } from '@/types/rainstorm/RainfallGridResponse';
   import { WebSocketService } from '@/utils/request/websocket';
+  import { Utils } from '@/utils/utils';
   import { onMounted, onUnmounted, watch } from 'vue';
 
   let rainfallWsService: WebSocketService | null = null;
@@ -38,11 +40,26 @@
         '/topic/rainfall/grid/messages',
         (response) => {
           if (response.code === 200 && response.data) {
+            // 设置步骤为第一步
+            stepStore.currentStep = 0;
+
             // 显示图层
             addGridLayer(response.data);
 
             // 推进到下一步
             stepStore.nextStep();
+
+            // 进行模型计算
+            $api.rainfall
+              .modelDeduction(
+                `${Utils.formatDate('YYYYMMDDHHmmss')}暴雨自动推演`
+              )
+              .then((res) => {
+                // 推进到下一步
+                stepStore.nextStep();
+
+                // 报告产出
+              });
           } else {
             console.warn('响应错误:', response.message);
           }

src/types/rainstorm/RainPredictResponse.ts

@@ -0,0 +1,6 @@
+export interface RainPredictResponse {
+  id: number;
+  type: string;
+  probability: number;
+  level: string;
+}