添加文件管理基础组件和路由

.env.development

@@ -1,5 +1,3 @@
-NEW_FILE_CODE
-
 # 后端地址
 VITE_BACKEND_BASE_URL=http://localhost:8081
 
@@ -7,10 +5,10 @@ VITE_BACKEND_BASE_URL=http://localhost:8081
 START_PORT=81
 
 # geoserver地址
-VITE_GEOSERVER_BASE_URL=http://47.92.216.173:4019/geoserver/xian
+VITE_GEOSERVER_BASE_URL=http://47.92.216.173:4020/geoserver/xian
 
 # WebSocket地址
 VITE_WEBSOCKET_URL=http://localhost:8081/websocket
 
 # 文件地址
-VITE_FILE_URL=http://localhost:8083
+VITE_FILE_URL=http://localhost:8083

.env.production

@@ -1,5 +1,3 @@
-NEW_FILE_CODE
-
 # 后端地址
 VITE_BACKEND_BASE_URL=http://localhost:8080
 
@@ -13,4 +11,4 @@ VITE_GEOSERVER_BASE_URL=http://10.22.245.246/geoserver/xian
 VITE_WEBSOCKET_URL=http://localhost:8080/websocket
 
 # 文件地址
-VITE_FILE_URL=http://localhost:8083
+VITE_FILE_URL=http://localhost:8083

.gitignore

@@ -26,3 +26,5 @@ dist-ssr
 auto-imports.d.ts
 components.d.ts
 pnpm-lock.yaml
+/package-lock.json
+/pnpm-workspace.yaml

README.md

@@ -1,5 +1,6 @@
 # xian_vue_new
 西安项目前端
+
 # xian_vue_new
 
 ## 开发工具说明

src/api/api.ts

@@ -55,6 +55,9 @@ 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';
+import type { RainPredictRequest } from '@/types/rainstorm/RainPredictRequest';
 
 /**
  * API接口统一导出对象
@@ -84,12 +87,14 @@ export const $api = {
     /**
      * 根据id获取隐患点详情
      * @param id - 隐患点id
+     * @param simulationId - 模拟id
      * @returns 隐患点详情
      */
     getPointDetailById: (
-      id: number
+      id: number,
+      simulationId: number
     ): Promise<ApiResponse<XianHiddenDangerSpots>> =>
-      getHiddenDangerPointDetailById(id),
+      getHiddenDangerPointDetailById(id, simulationId),
   },
 
   // 风险点信息
@@ -104,10 +109,14 @@ export const $api = {
     /**
      * 根据id获取风险点详情
      * @param id - 风险点id
+     * @param simulationId - 模拟id
      * @returns 风险点详情
      */
-    getPointDetailById: (id: number): Promise<ApiResponse<XianRiskSpots>> =>
-      getRiskPointDetailById(id),
+    getPointDetailById: (
+      id: number,
+      simulationId: number
+    ): Promise<ApiResponse<XianRiskSpots>> =>
+      getRiskPointDetailById(id, simulationId),
   },
 
   // 医院信息
@@ -277,4 +286,16 @@ export const $api = {
     ): Promise<ApiResponse<XianSubwayStations>> =>
       getSubwayStationsPointDetailById(id),
   },
+
+  // 暴雨推演
+  rainfall: {
+    /**
+     * 进行模型推演
+     * @param req 请求体
+     * @returns 推演点的概率
+     */
+    modelDeduction: (
+      req: RainPredictRequest
+    ): Promise<ApiResponse<RainPredictResponse>> => rainfallModelDeduction(req),
+  },
 };

src/api/hidden-danger-spots.ts

@@ -1,25 +1,33 @@
-import type { ApiResponse } from "@/types/ApiResponse"
-import type { XianHiddenDangerSpots } from "@/types/base/XianHiddenDangerSpots"
-import httpInstance from "@/utils/request/http"
+import type { ApiResponse } from '@/types/ApiResponse';
+import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+import httpInstance from '@/utils/request/http';
 
 /**
  * 获取隐患点基础数据
  * @param disasterType - 灾害类型（landslide, debris_flow, water_logging, flash_flood）
  * @returns 隐患点数据数组
  */
-export const getBasePoints = (disasterType: string): Promise<ApiResponse<XianHiddenDangerSpots[]>> => {
-    return httpInstance.get('/hidden-danger-spots/base-points', {
-        params: {
-            disasterType
-        }
-    })
-}
+export const getBasePoints = (
+  disasterType: string
+): Promise<ApiResponse<XianHiddenDangerSpots[]>> => {
+  return httpInstance.get('/hidden-danger-spots/base-points', {
+    params: {
+      disasterType,
+    },
+  });
+};
 
 /**
  * 根据id获取隐患点详情
  * @param id - 隐患点id
+ * @param simulationId - 模拟id
  * @returns 隐患点详情
  */
-export const getPointDetailById = (id: number): Promise<ApiResponse<XianHiddenDangerSpots>> => {
-    return httpInstance.get(`/hidden-danger-spots/point-detail/${id}`)
-}
+export const getPointDetailById = (
+  id: number,
+  simulationId: number
+): Promise<ApiResponse<XianHiddenDangerSpots>> => {
+  return httpInstance.get(
+    `/hidden-danger-spots/point-detail/${id}/${simulationId}`
+  );
+};

src/api/rainfall.ts

@@ -0,0 +1,15 @@
+import type { ApiResponse } from '@/types/ApiResponse';
+import type { RainPredictRequest } from '@/types/rainstorm/RainPredictRequest';
+import type { RainPredictResponse } from '@/types/rainstorm/RainPredictResponse';
+import httpInstance from '@/utils/request/http';
+
+/**
+ * 进行模型推演
+ * @param req 请求体
+ * @returns 推演点的概率
+ */
+export const modelDeduction = (
+  req: RainPredictRequest
+): Promise<ApiResponse<RainPredictResponse>> => {
+  return httpInstance.post('/algorithm-api/rainfall/predict', req);
+};

src/api/risk-spots.ts

@@ -1,20 +1,24 @@
-import type { ApiResponse } from "@/types/ApiResponse"
-import type { XianRiskSpots } from "@/types/base/XianRiskSpots"
-import httpInstance from "@/utils/request/http"
+import type { ApiResponse } from '@/types/ApiResponse';
+import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
+import httpInstance from '@/utils/request/http';
 
 /**
  * 获取风险点基础数据
  * @returns 风险点数据数组
  */
 export const getBasePoints = (): Promise<ApiResponse<XianRiskSpots[]>> => {
-    return httpInstance.get('/risk-spots/base-points')
-}
+  return httpInstance.get('/risk-spots/base-points');
+};
 
 /**
  * 根据id获取风险点详情
  * @param id - 风险点id
+ * @param simulationId - 模拟id
  * @returns 风险点详情
  */
-export const getPointDetailById = (id: number): Promise<ApiResponse<XianRiskSpots>> => {
-    return httpInstance.get(`/risk-spots/point-detail/${id}`)
-}
+export const getPointDetailById = (
+  id: number,
+  simulationId: number
+): Promise<ApiResponse<XianRiskSpots>> => {
+  return httpInstance.get(`/risk-spots/point-detail/${id}/${simulationId}`);
+};

src/assets/index.ts

@@ -2,6 +2,7 @@
 
 // 图标
 export { default as landslideIcon } from '@/assets/images/icon/landslide.png';
+export { default as collapseIcon } from '@/assets/images/icon/collapse.png';
 export { default as waterLoggingIcon } from '@/assets/images/icon/waterlogging.png';
 export { default as debrisFlowIcon } from '@/assets/images/icon/debris-flow.png';
 export { default as flashFloodIcon } from '@/assets/images/icon/flash-flood.png';

src/component/common/InformationBox.vue

@@ -16,7 +16,11 @@
     </header>
     <div class="content">
       <table class="table">
-        <tr v-for="(tableData, index) in tableDatas" :key="index">
+        <tr
+          v-for="(tableData, index) in tableDatas"
+          :key="index"
+          :style="tableData.styles || {}"
+        >
           <td class="label">{{ tableData.title }}</td>
           <td>{{ tableData.content }}</td>
         </tr>
@@ -33,6 +37,7 @@
     title: string;
     data: Record<string, string>;
     field: Record<string, string>;
+    style?: Record<string, Record<string, string>>;
     offsetX: number;
     offsetY: number;
   }>();
@@ -43,7 +48,8 @@
   const newOffsetX = ref(props.offsetX);
   const newOffsetY = ref(props.offsetY);
 
-  const tableDatas: Ref<{ title: string; content: string }[]> = ref([]);
+  const tableDatas: Ref<{ title: string; content: string; styles?: Record<string, string> }[]> =
+    ref([]);
 
   onMounted(() => {
     // 判断是否超出屏幕，超出就重新定位
@@ -58,10 +64,14 @@
     Object.entries(props.data).forEach(([key, value]) => {
       // 判断key是不是存在field中，存在就添加到表格数据，不存在则不添加
       if (Object.hasOwn(props.field, key) && value) {
-        tableDatas.value.push({
+        const rowData: { title: string; content: string; styles?: Record<string, string> } = {
           title: props.field[key],
           content: value,
-        });
+        };
+        if (props.style && Object.hasOwn(props.style, key)) {
+          rowData.styles = props.style[key];
+        }
+        tableDatas.value.push(rowData);
       }
     });
   });

src/component/file-management/SearchComponent.vue

@@ -0,0 +1,9 @@
+<template>
+    <div></div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped>
+
+</style>

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/BasicComponent.vue

@@ -14,6 +14,14 @@
         "
       />
 
+      <!-- 崩塌隐患点 -->
+      <CollapseComponent
+        v-if="
+          statusStore.appLoadingCompleted &&
+          statusStore.poiLayers.showCollapseHiddenPoint.loading
+        "
+      />
+
       <!-- 泥石流隐患点 -->
       <DebrisFlowComponent
         v-if="
@@ -57,6 +65,14 @@
         "
       />
 
+      <!-- 崩塌隐患点 -->
+      <CollapseComponent
+        v-if="
+          statusStore.appLoadingCompleted &&
+          statusStore.poiLayers.showCollapseHiddenPoint.loading
+        "
+      />
+
       <!-- 泥石流隐患点 -->
       <DebrisFlowComponent
         v-if="
@@ -81,10 +97,11 @@
   import { DisasterType } from '@/types/common/DisasterType.ts';
   import RiskPointComponent from '@/component/rain-earthquake/basic/RiskPointComponent.vue';
   import LandslideComponent from '@/component/rain-earthquake/basic/LandslideComponent.vue';
+  import CollapseComponent from '@/component/rain-earthquake/basic/CollapseComponent.vue';
   import DebrisFlowComponent from '@/component/rain-earthquake/basic/DebrisFlowComponent.vue';
   import WaterLoggingComponent from '@/component/rain-earthquake/basic/WaterLoggingComponent.vue';
   import FlashFloodComponent from '@/component/rain-earthquake/basic/FlashFloodComponent.vue';
-  import RainfallGridComponent from '@/component/rain-earthquake/detail-panels/RainfallGridComponent.vue';
+  import RainfallGridComponent from '@/component/rain/RainfallAutomaticSimulationComponent.vue';
   import { useStatusStore } from '@/stores/useStatusStore';
 
   const statusStore = useStatusStore();

src/component/rain-earthquake/basic/CollapseComponent.vue

@@ -0,0 +1,132 @@
+<!-- 崩塌隐患点组件 -->
+<template>
+  <div>
+    <!-- 加载崩塌隐患点 -->
+    <LoadingPoints
+      v-if="statusStore.appLoadingCompleted && collapsePoints.length > 0"
+      :base-points="collapsePoints"
+      :get-disaster-icon="getDisasterIcon"
+      :prefix="config.prefix.collapseHiddenPointId"
+      :is-default="true"
+      :loading-resource-field="LoadingResource.COLLAPSE_HIDDEN_POINT"
+    />
+
+    <!-- 显示信息框 -->
+    <InformationBox
+      :data="collapsePointDetail as Record<string, any>"
+      :field="field"
+      :style="style"
+      v-if="loadingInformationStore.collapseHiddenPoint.loading"
+      :title="informationBoxTitle"
+      :offset-x="offsetX"
+      :offset-y="offsetY"
+      :key="loadingInformationStore.collapseHiddenPoint.id"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { $api } from '@/api/api.ts';
+  import type { Point } from '@/types/base/Point.ts';
+  import LoadingPoints from '@/component/common/LoadingPoints.vue';
+  import config from '@/config/config.json';
+  import InformationBox from '@/component/common/InformationBox.vue';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
+  import {
+    PointType,
+    HiddenDangerPointTypeMap,
+  } from '@/types/common/DisasterType.ts';
+  import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
+
+  const collapsePoints = ref<Point[]>([]);
+
+  const statusStore = useStatusStore();
+  const loadingInformationStore = useLoadingInformationStore();
+  const loadingResourceStore = useLoadingResourceStore();
+  const simulationIdStore = useSimulationIdStore();
+
+  const { field, style, getDisasterIcon } = useHiddenPoint();
+
+  // 信息框相关配置
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const collapsePointDetail = ref<Point>();
+  const informationBoxTitle = ref('');
+
+  // 加载崩塌隐患点数据
+  $api.hiddenDangerSpots
+    .getBasePoints(HiddenDangerPointTypeMap[PointType.COLLAPSE])
+    .then((res) => {
+      collapsePoints.value = res.data;
+    });
+
+  // 监听id变化
+  watch(
+    () => loadingInformationStore.collapseHiddenPoint.id,
+    async (newId: number) => {
+      if (newId === -1) {
+        return;
+      }
+      // 获取崩塌隐患点数据
+      const clickObject = loadingInformationStore.clickObject;
+
+      if (!clickObject || !clickObject.primitive) {
+        console.warn('点击对象或图元不存在');
+        return;
+      }
+
+      const res = await $api.hiddenDangerSpots.getPointDetailById(
+        loadingInformationStore.collapseHiddenPoint.id,
+        simulationIdStore.status ? simulationIdStore.id : -1
+      );
+
+      // 更新数据
+      collapsePointDetail.value = res.data;
+      informationBoxTitle.value = res.data.disasterName || '崩塌隐患点信息';
+
+      try {
+        // 将坐标转换为偏移量
+        const screenPos = CesiumUtilsSingleton.convertScreenPosition(
+          clickObject.primitive.position
+        );
+        offsetX.value = screenPos.x;
+        offsetY.value = screenPos.y;
+
+        // 显示新的信息框
+        loadingInformationStore.collapseHiddenPoint.loading = true;
+      } catch (error) {
+        throw new Error(`坐标转换失败:${error}`);
+      }
+    }
+  );
+
+  // 监听显示隐藏
+  watch(
+    () => statusStore.poiLayers.showCollapseHiddenPoint.show,
+    (newValue: boolean) => {
+      if (newValue) {
+        // 显示崩塌隐患点
+        CesiumUtilsSingleton.batchShowPrimitives(
+          loadingResourceStore.getLoadingResource(
+            LoadingResource.COLLAPSE_HIDDEN_POINT
+          ).ids
+        );
+      } else {
+        // 隐藏崩塌隐患点
+        CesiumUtilsSingleton.batchHidePrimitives(
+          loadingResourceStore.getLoadingResource(
+            LoadingResource.COLLAPSE_HIDDEN_POINT
+          ).ids
+        );
+      }
+    }
+  );
+</script>
+
+<style scoped></style>

src/component/rain-earthquake/basic/DebrisFlowComponent.vue

@@ -15,6 +15,7 @@
     <InformationBox
       :data="debrisFlowPointDetail as Record<string, any>"
       :field="field"
+      :style="style"
       v-if="loadingInformationStore.debrisFlowHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -41,14 +42,16 @@
     PointType,
     HiddenDangerPointTypeMap,
   } from '@/types/common/DisasterType.ts';
+  import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
 
   const debrisFlowPoints = ref<Point[]>([]);
 
   const statusStore = useStatusStore();
   const loadingInformationStore = useLoadingInformationStore();
   const loadingResourceStore = useLoadingResourceStore();
+  const simulationIdStore = useSimulationIdStore();
 
-  const { field, getDisasterIcon } = useHiddenPoint();
+  const { field, style, getDisasterIcon } = useHiddenPoint();
 
   // 信息框相关配置
   const offsetX = ref(0);
@@ -79,7 +82,8 @@
       }
 
       const res = await $api.hiddenDangerSpots.getPointDetailById(
-        loadingInformationStore.debrisFlowHiddenPoint.id
+        loadingInformationStore.debrisFlowHiddenPoint.id,
+        simulationIdStore.status ? simulationIdStore.id : -1
       );
 
       // 更新数据

src/component/rain-earthquake/basic/FlashFloodComponent.vue

@@ -15,6 +15,7 @@
     <InformationBox
       :data="flashFloodPointDetail as Record<string, any>"
       :field="field"
+      :style="style"
       v-if="loadingInformationStore.flashFloodHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -41,14 +42,16 @@
     PointType,
     HiddenDangerPointTypeMap,
   } from '@/types/common/DisasterType.ts';
+  import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
 
   const flashFloodPoints = ref<Point[]>([]);
 
   const statusStore = useStatusStore();
   const loadingInformationStore = useLoadingInformationStore();
   const loadingResourceStore = useLoadingResourceStore();
+  const simulationIdStore = useSimulationIdStore();
 
-  const { field, getDisasterIcon } = useHiddenPoint();
+  const { field, style, getDisasterIcon } = useHiddenPoint();
 
   // 信息框相关配置
   const offsetX = ref(0);
@@ -79,7 +82,8 @@
       }
 
       const res = await $api.hiddenDangerSpots.getPointDetailById(
-        loadingInformationStore.flashFloodHiddenPoint.id
+        loadingInformationStore.flashFloodHiddenPoint.id,
+        simulationIdStore.status ? simulationIdStore.id : -1
       );
 
       // 更新数据

src/component/rain-earthquake/basic/LandslideComponent.vue

@@ -15,6 +15,7 @@
     <InformationBox
       :data="landslidePointDetail as Record<string, any>"
       :field="field"
+      :style="style"
       v-if="loadingInformationStore.landslideHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -41,14 +42,16 @@
     PointType,
     HiddenDangerPointTypeMap,
   } from '@/types/common/DisasterType.ts';
+  import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
 
   const landslidePoints = ref<Point[]>([]);
 
   const statusStore = useStatusStore();
   const loadingInformationStore = useLoadingInformationStore();
   const loadingResourceStore = useLoadingResourceStore();
+  const simulationIdStore = useSimulationIdStore();
 
-  const { field, getDisasterIcon } = useHiddenPoint();
+  const { field, style, getDisasterIcon } = useHiddenPoint();
 
   // 信息框相关配置
   const offsetX = ref(0);
@@ -79,7 +82,8 @@
       }
 
       const res = await $api.hiddenDangerSpots.getPointDetailById(
-        loadingInformationStore.landslideHiddenPoint.id
+        loadingInformationStore.landslideHiddenPoint.id,
+        simulationIdStore.status ? simulationIdStore.id : -1
       );
 
       // 更新数据

src/component/rain-earthquake/basic/RiskPointComponent.vue

@@ -15,6 +15,7 @@
     <InformationBox
       :data="riskPointDetail as Record<string, any>"
       :field="field"
+      :style="style"
       v-if="loadingInformationStore.riskPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -37,12 +38,14 @@
   import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint.ts';
   import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
   import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
+  import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
 
   const riskPoints = ref<Point[]>([]);
 
   const statusStore = useStatusStore();
   const loadingInformationStore = useLoadingInformationStore();
   const loadingResourceStore = useLoadingResourceStore();
+  const simulationIdStore = useSimulationIdStore();
 
   // 信息框相关配置
   const offsetX = ref(0);
@@ -50,7 +53,7 @@
   const riskPointDetail = ref<Point>();
 
   // 获取钩子函数
-  const { informationBoxTitle, field, getDisasterIcon } = useRiskPoint();
+  const { informationBoxTitle, field, style, getDisasterIcon } = useRiskPoint();
 
   $api.riskSpots.getBasePoints().then((res) => {
     riskPoints.value = res.data;
@@ -72,7 +75,8 @@
       }
 
       const res = await $api.riskSpots.getPointDetailById(
-        loadingInformationStore.riskPoint.id
+        loadingInformationStore.riskPoint.id,
+        simulationIdStore.status ? simulationIdStore.id : -1
       );
 
       // 更新数据
@@ -100,15 +104,13 @@
     (newValue: boolean) => {
       if (newValue) {
         CesiumUtilsSingleton.batchShowPrimitives(
-          loadingResourceStore.getLoadingResource(
-            LoadingResource.RISK_POINT
-          ).ids
+          loadingResourceStore.getLoadingResource(LoadingResource.RISK_POINT)
+            .ids
         );
       } else {
         CesiumUtilsSingleton.batchHidePrimitives(
-          loadingResourceStore.getLoadingResource(
-            LoadingResource.RISK_POINT
-          ).ids
+          loadingResourceStore.getLoadingResource(LoadingResource.RISK_POINT)
+            .ids
         );
       }
     }

src/component/rain-earthquake/basic/WaterLoggingComponent.vue

@@ -3,9 +3,7 @@
   <div>
     <!-- 加载内涝隐患点 -->
     <LoadingPoints
-      v-if="
-        statusStore.appLoadingCompleted && waterLoggingPoints.length > 0
-      "
+      v-if="statusStore.appLoadingCompleted && waterLoggingPoints.length > 0"
       :base-points="waterLoggingPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.waterLoggingHiddenPointId"
@@ -17,6 +15,7 @@
     <InformationBox
       :data="waterLoggingPointDetail as Record<string, any>"
       :field="field"
+      :style="style"
       v-if="loadingInformationStore.waterLoggingHiddenPoint.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"
@@ -43,14 +42,16 @@
     PointType,
     HiddenDangerPointTypeMap,
   } from '@/types/common/DisasterType.ts';
+  import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
 
   const waterLoggingPoints = ref<Point[]>([]);
 
   const statusStore = useStatusStore();
   const loadingInformationStore = useLoadingInformationStore();
   const loadingResourceStore = useLoadingResourceStore();
+  const simulationIdStore = useSimulationIdStore();
 
-  const { field, getDisasterIcon } = useHiddenPoint();
+  const { field, style, getDisasterIcon } = useHiddenPoint();
 
   // 信息框相关配置
   const offsetX = ref(0);
@@ -81,7 +82,8 @@
       }
 
       const res = await $api.hiddenDangerSpots.getPointDetailById(
-        loadingInformationStore.waterLoggingHiddenPoint.id
+        loadingInformationStore.waterLoggingHiddenPoint.id,
+        simulationIdStore.status ? simulationIdStore.id : -1
       );
 
       // 更新数据

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

@@ -15,6 +15,7 @@
     <InformationBox
       :data="storePointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.bridge.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"

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

@@ -15,6 +15,7 @@
     <InformationBox
       :data="dangerousSourcePointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.dangerousSource.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"

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

@@ -15,6 +15,7 @@
     <InformationBox
       :data="emergencyShelterPointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.emergencyShelter.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"

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

@@ -15,6 +15,7 @@
     <InformationBox
       :data="fireStationPointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.fireStation.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"

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

@@ -15,6 +15,7 @@
     <InformationBox
       :data="hospitalPointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.hospital.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"

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

@@ -15,6 +15,7 @@
     <InformationBox
       :data="reservoirDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.reservoir.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"

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

@@ -15,6 +15,7 @@
     <InformationBox
       :data="schoolDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.school.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"

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

@@ -15,6 +15,7 @@
     <InformationBox
       :data="storePointDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.storePoints.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"

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

@@ -15,6 +15,7 @@
     <InformationBox
       :data="subwayStationDetail as Record<string, any>"
       :field="field"
+      :style="{}"
       v-if="loadingInformationStore.subwayStation.loading"
       :title="informationBoxTitle"
       :offset-x="offsetX"

src/component/rain/RainfallAutomaticSimulationComponent.vue

@@ -4,18 +4,23 @@
 </template>
 
 <script lang="ts" setup>
-  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 { $api } from '@/api/api.ts';
+  import { useRainstormDeduction } from '@/hooks/rainstorm/useRainstormDeduction.ts';
+  import { useSimulationIdStore } from '@/stores/useSimulationIdStore.ts';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { useStepStore } from '@/stores/useStepStore.ts';
+  import type { ApiResponse } from '@/types/ApiResponse.ts';
+  import type { RainfallGridResponse } from '@/types/rainstorm/RainfallGridResponse.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { WebSocketService } from '@/utils/request/websocket.ts';
+  import { Utils } from '@/utils/utils.ts';
   import { onMounted, onUnmounted, watch } from 'vue';
 
   let rainfallWsService: WebSocketService | null = null;
   const { triggerLayerShowStatus, addGridLayer } = useRainstormDeduction();
   const statusStore = useStatusStore();
   const stepStore = useStepStore();
+  const simulationIdStore = useSimulationIdStore();
 
   // 请求降雨栅格数据
   const requestRainfallData = () => {
@@ -38,11 +43,33 @@
         '/topic/rainfall/grid/messages',
         (response) => {
           if (response.code === 200 && response.data) {
+            // 设置步骤为第一步
+            stepStore.currentStep = 0;
+
             // 显示图层
             addGridLayer(response.data);
 
             // 推进到下一步
             stepStore.nextStep();
+
+            // 进行模型计算
+            $api.rainfall
+              .modelDeduction({
+                disaster_name: `${Utils.formatDate('YYYYMMDDHHmmss')}暴雨自动推演`,
+                operation_type: '暴雨灾害链自动推演',
+              })
+              .then((res) => {
+                // 进行预警
+                CesiumUtilsSingleton.addPulseEffect(res.data.list);
+                // 设置事件id
+                simulationIdStore.setId(res.data.record_id);
+
+                // 推进到下一步
+                stepStore.nextStep();
+
+                // 产出报告
+                console.log(res);
+              });
           } else {
             console.warn('响应错误:', response.message);
           }

src/config/config.json

@@ -35,6 +35,7 @@
   },
   "prefix": {
     "landslideHiddenPointId": "landslide-hidden-point-",
+    "collapseHiddenPointId": "collapse-hidden-point-",
     "debrisFlowHiddenPointId": "debris-flow-hidden-point-",
     "waterLoggingHiddenPointId": "water-logging-hidden-point-",
     "flashFloodHiddenPointId": "flash-flood-hidden-point-",

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -1,13 +1,10 @@
-import { ref } from 'vue';
-import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
-import type { PaginationType } from '@/types/common/PaginationType';
-import { PointType } from '@/types/common/DisasterType';
 import { ControlPanelCategory } from '@/types/common/ControlPanelCategory';
 import { useStatusStore } from '@/stores/useStatusStore';
 import { useLayerControl } from '../rain-earthquake/useLayerControl.ts';
 import {
   debrisFlowIcon,
   landslideIcon,
+  collapseIcon,
   riskAreaIcon,
   earthquakeLineIcon,
   hospitalIcon,
@@ -25,7 +22,7 @@ import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
 import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
 
 /**
- * 暴雨灾害链
+ * 地震灾害链
  * @returns
  */
 export const useEarthquakeDisasterChain = () => {
@@ -34,68 +31,6 @@ export const useEarthquakeDisasterChain = () => {
   const resourceStore = useLoadingResourceStore();
   const rightHandle = useRightHandle();
 
-  // ================灾害链影响点列表================================
-  /**
-   * 搜索条件
-   */
-  const conditions = ref({
-    tableData: '',
-    hiddenPoint: PointType.LANDSLIDE,
-  });
-
-  /**
-   * 下拉选项
-   */
-  const selectOptions = [
-    { value: PointType.LANDSLIDE, label: '滑坡' },
-    { value: PointType.DEBRIS_FLOW, label: '泥石流' },
-    { value: PointType.RISK_AREA, label: '风险区' },
-  ];
-
-  /**
-   * 表格数据
-   */
-  const tableDatas = ref<XianHiddenDangerSpots[]>([]);
-
-  /**
-   * 表头配置
-   */
-  const tableColumns = [
-    { title: '名称', key: 'disasterName' },
-    { title: '位置', key: 'position' },
-    { title: '规模等级', key: 'scaleGrade' },
-    { title: '险情等级', key: 'riskGrade' },
-  ];
-
-  /**
-   * 分页配置
-   */
-  const paginationConfig = ref<PaginationType>({
-    currentPage: 1,
-    pageSize: 10,
-    total: 10,
-    totalPage: 1,
-  });
-
-  /**
-   * 修改搜索条件
-   * @param value - 新的搜索条件
-   */
-  const changeConditions = (value: {
-    tableData: string;
-    hiddenPoint: PointType;
-  }): void => {
-    conditions.value = value;
-  };
-
-  /**
-   * 修改页码
-   * @param value - 新的页码
-   */
-  const changeCurrentPage = (value: number) => {
-    paginationConfig.value.currentPage = value;
-  };
-
   // ================左侧按钮================================
   /**
    * 左侧按钮信息
@@ -212,6 +147,18 @@ export const useEarthquakeDisasterChain = () => {
             LoadingResource.DEBRIS_FLOW_HIDDEN_POINT
           ),
       },
+      {
+        name: '崩塌隐患点',
+        statusStore: statusStore.poiLayers,
+        statusKey: 'showCollapseHiddenPoint' as const,
+        callback: layerControl.clickCollapseHiddenPoint,
+        link: collapseIcon,
+        category: ControlPanelCategory.DISASTER_HAZARD,
+        count: () =>
+          resourceStore.getResourceCount(
+            LoadingResource.COLLAPSE_HIDDEN_POINT
+          ),
+      },
       {
         name: '风险点',
         statusStore: statusStore.mapLayers,
@@ -356,15 +303,8 @@ export const useEarthquakeDisasterChain = () => {
   };
 
   return {
-    conditions,
-    selectOptions,
-    tableDatas,
-    tableColumns,
-    paginationConfig,
     leftButtonInfo,
     rightButtonInfo,
     controlPanel: getControlPanel(),
-    changeConditions,
-    changeCurrentPage,
   };
 };

src/hooks/map/useMap.ts

@@ -25,6 +25,7 @@ export const useMap = () => {
         // 当id改变时候，重置状态
         if (
           loadingInfoStore.landslideHiddenPoint.id !== id &&
+          loadingInfoStore.collapseHiddenPoint.id !== id &&
           loadingInfoStore.debrisFlowHiddenPoint.id !== id &&
           loadingInfoStore.waterLoggingHiddenPoint.id !== id &&
           loadingInfoStore.flashFloodHiddenPoint.id !== id &&
@@ -43,6 +44,11 @@ export const useMap = () => {
           loadingInfoStore.landslideHiddenPoint.id = id;
         }
 
+        // 崩塌隐患点
+        else if (pickedObject.id.startsWith(config.prefix.collapseHiddenPointId)) {
+          loadingInfoStore.collapseHiddenPoint.id = id;
+        }
+
         // 泥石流隐患点
         else if (pickedObject.id.startsWith(config.prefix.debrisFlowHiddenPointId)) {
           loadingInfoStore.debrisFlowHiddenPoint.id = id;

src/hooks/rain-earthquake/useHiddenPoint.ts

@@ -1,4 +1,5 @@
 import {
+  collapseIcon,
   debrisFlowIcon,
   flashFloodIcon,
   landslideIcon,
@@ -14,6 +15,7 @@ export const useHiddenPoint = () => {
    * 字段映射配置
    */
   const field = {
+    probability: '预测概率',
     fieldCode: '野外编号',
     disasterName: '灾害点名称',
     position: '位置',
@@ -22,6 +24,13 @@ export const useHiddenPoint = () => {
     riskGrade: '风险等级',
   };
 
+  /**
+   * 样式
+   */
+  const style = {
+    probability: { background: '#888888' },
+  };
+
   /**
    * 根据灾害类型获取对应图标
    * @param disasterType - 灾害类型（支持中英文）
@@ -33,6 +42,9 @@ export const useHiddenPoint = () => {
       case 'landslide':
       case '滑坡':
         return landslideIcon;
+      case 'collapse':
+      case '崩塌':
+        return collapseIcon;
       case 'debris_flow':
       case '泥石流':
         return debrisFlowIcon;
@@ -47,5 +59,5 @@ export const useHiddenPoint = () => {
     }
   }
 
-  return { field, getDisasterIcon };
+  return { field, style, getDisasterIcon };
 };

src/hooks/rain-earthquake/useLayerControl.ts

@@ -161,6 +161,13 @@ export const useLayerControl = () => {
     statusStore.poiLayers.showLandslideHiddenPoint.loading = true;
   };
 
+  /**
+   * 显示崩塌隐患点
+   */
+  const clickCollapseHiddenPoint = () => {
+    statusStore.poiLayers.showCollapseHiddenPoint.loading = true;
+  };
+
   /**
    * 显示泥石流隐患点
    */
@@ -221,6 +228,7 @@ export const useLayerControl = () => {
     clickReservoir,
     clickSubwayStation,
     clickLandslideHiddenPoint,
+    clickCollapseHiddenPoint,
     clickDebrisFlowHiddenPoint,
     clickWaterLoggingHiddenPoint,
     clickFlashFloodHiddenPoint,

src/hooks/rain-earthquake/useRightHandle.ts

@@ -4,12 +4,15 @@ import config from '@/config/config.json';
 import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
 import { useScene } from '../useScene';
 import { useRainstormDeduction } from '../rainstorm/useRainstormDeduction';
+import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
 
 export const useRightHandle = () => {
   const statusStore = useStatusStore();
   const leftLegendStore = useLeftLegendStore();
   const scene = useScene();
   const rainstormDeduction = useRainstormDeduction();
+  const simulationIdStore = useSimulationIdStore();
+
   /**
    * 暴雨模拟
    * @param status - 状态
@@ -25,6 +28,12 @@ export const useRightHandle = () => {
 
       // 添加图例
       rainstormDeduction.addLegend();
+
+      // 如果有脉冲，显示脉冲
+      CesiumUtilsSingleton.showPulseEffects();
+
+      // 模拟id状态为true
+      simulationIdStore.status = true;
     } else {
       // 关闭暴雨模拟：隐藏降雨栅格图层
       statusStore.weatherLayers.showRainfallGrid.show = false;
@@ -34,6 +43,12 @@ export const useRightHandle = () => {
 
       // 隐藏步骤条
       statusStore.uiComponents.stepBar.show = false;
+
+      // 隐藏脉冲
+      CesiumUtilsSingleton.hidePulseEffects();
+
+      // 模拟id状态为false
+      simulationIdStore.status = false;
     }
   };
 

src/hooks/rain-earthquake/useRiskPoint.ts

@@ -14,6 +14,7 @@ export const useRiskPoint = () => {
    * 字段映射配置
    */
   const field = {
+    probability: '预测概率',
     riskName: '风险区名称',
     unitCode: '统一编号',
     housing: '住房（间）',
@@ -27,6 +28,13 @@ export const useRiskPoint = () => {
     lat: '纬度',
   };
 
+  /**
+   * 样式
+   */
+  const style = {
+    probability: { background: '#888888' },
+  };
+
   /**
    * 获取风险点图标
    * @returns 图标路径
@@ -35,5 +43,5 @@ export const useRiskPoint = () => {
     return riskAreaIcon;
   }
 
-  return { informationBoxTitle, field, getDisasterIcon };
+  return { informationBoxTitle, field, style, getDisasterIcon };
 };

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -1,13 +1,10 @@
-import { ref, watch } from 'vue';
-import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
-import type { PaginationType } from '@/types/common/PaginationType';
-import { PointType } from '@/types/common/DisasterType';
 import { ControlPanelCategory } from '@/types/common/ControlPanelCategory';
 import { useStatusStore } from '@/stores/useStatusStore';
 import {
   debrisFlowIcon,
   flashFloodIcon,
   landslideIcon,
+  collapseIcon,
   riskAreaIcon,
   waterLoggingIcon,
   hospitalIcon,
@@ -41,69 +38,6 @@ export const useRainDisasterChain = () => {
   statusStore.weatherLayers.showRainfallGrid.loading = true;
   statusStore.weatherLayers.showRainfallGrid.show = true;
 
-  // ================灾害链影响点列表================================
-  /**
-   * 搜索条件
-   */
-  const conditions = ref({
-    tableData: '',
-    hiddenPoint: PointType.LANDSLIDE,
-  });
-
-  /**
-   * 下拉选项
-   */
-  const selectOptions = ref([
-    { value: PointType.LANDSLIDE, label: '滑坡' },
-    { value: PointType.DEBRIS_FLOW, label: '泥石流' },
-    { value: PointType.FLASH_FLOOD, label: '山洪' },
-    { value: PointType.WATER_LOGGING, label: '内涝' },
-  ]);
-
-  /**
-   * 表格数据
-   */
-  const tableDatas = ref<XianHiddenDangerSpots[]>([]);
-
-  /**
-   * 表头配置
-   */
-  const tableColumns = ref([
-    { title: '名称', key: 'disasterName' },
-    { title: '位置', key: 'position' },
-    { title: '规模等级', key: 'scaleGrade' },
-    { title: '险情等级', key: 'riskGrade' },
-  ]);
-
-  /**
-   * 分页配置
-   */
-  const paginationConfig = ref<PaginationType>({
-    currentPage: 1,
-    pageSize: 10,
-    total: 10,
-    totalPage: 1,
-  });
-
-  /**
-   * 修改搜索条件
-   * @param value - 新的搜索条件
-   */
-  const changeConditions = (value: {
-    tableData: string;
-    hiddenPoint: PointType;
-  }): void => {
-    conditions.value = value;
-  };
-
-  /**
-   * 修改页码
-   * @param value - 新的页码
-   */
-  const changeCurrentPage = (value: number) => {
-    paginationConfig.value.currentPage = value;
-  };
-
   // ================左侧按钮================================
   /**
    * 左侧按钮信息
@@ -175,7 +109,7 @@ export const useRainDisasterChain = () => {
    */
   const rightButtonInfo = [
     {
-      name: '降雨推演',
+      name: '自动推演',
       callback: (status: unknown) => rightHandle.rainstormSimulation(status),
     },
     {
@@ -216,7 +150,6 @@ export const useRainDisasterChain = () => {
    * 控制面板信息
    */
   const getControlPanel = () => {
-
     return [
       // 灾害隐患点类别
       {
@@ -267,6 +200,18 @@ export const useRainDisasterChain = () => {
             LoadingResource.FLASH_FLOOD_HIDDEN_POINT
           ),
       },
+      {
+        name: '崩塌隐患点',
+        statusStore: statusStore.poiLayers,
+        statusKey: 'showCollapseHiddenPoint' as const,
+        callback: layerControl.clickCollapseHiddenPoint,
+        link: collapseIcon,
+        category: ControlPanelCategory.DISASTER_HAZARD,
+        count: () =>
+          resourceStore.getResourceCount(
+            LoadingResource.COLLAPSE_HIDDEN_POINT
+          ),
+      },
       {
         name: '风险点',
         statusStore: statusStore.mapLayers,
@@ -402,25 +347,9 @@ export const useRainDisasterChain = () => {
     ];
   };
 
-  // 监听条件变化
-  watch(
-    conditions,
-    () => {
-      console.log('条件改变');
-    },
-    { deep: true }
-  );
-
   return {
-    conditions,
-    selectOptions,
-    tableDatas,
-    tableColumns,
-    paginationConfig,
     leftButtonInfo,
     rightButtonInfo,
-    changeConditions,
-    changeCurrentPage,
     controlPanel: getControlPanel(),
   };
 };

src/hooks/useDisasterChainTable.ts

@@ -0,0 +1,139 @@
+import { ref } from 'vue';
+import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+import type { PaginationType } from '@/types/common/PaginationType';
+import { PointType } from '@/types/common/DisasterType';
+
+/**
+ * 灾害链表格数据选项
+ */
+export interface SelectOption {
+  value: PointType;
+  label: string;
+}
+
+/**
+ * 表格列配置
+ */
+export interface TableColumn {
+  title: string;
+  key: string;
+}
+
+/**
+ * 搜索条件
+ */
+export interface SearchConditions {
+  tableData: string;
+  hiddenPoint: PointType;
+}
+
+/**
+ * 灾害链表格
+ * 负责管理灾害链影响点列表的数据获取、搜索和分页
+ * @returns 表格相关的状态和方法
+ */
+export const useDisasterChainTable = () => {
+  // ==================== 状态 ====================
+
+  /**
+   * 下拉选项配置
+   */
+  const selectOptions = ref<SelectOption[]>([]);
+
+  /**
+   * 表格列配置
+   */
+  const tableColumns = ref<TableColumn[]>([]);
+
+  /**
+   * 搜索条件
+   */
+  const conditions = ref<SearchConditions>({
+    tableData: '',
+    hiddenPoint: PointType.LANDSLIDE,
+  });
+
+  /**
+   * 表格数据
+   */
+  const tableDatas = ref<XianHiddenDangerSpots[]>([]);
+
+  /**
+   * 分页配置
+   */
+  const paginationConfig = ref<PaginationType>({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0,
+    totalPage: 0,
+  });
+
+  /**
+   * 加载状态
+   */
+  const loading = ref(false);
+
+  /**
+   * 修改搜索条件
+   * @param value - 新的搜索条件
+   */
+  const changeConditions = ref((value: SearchConditions): void => {
+    conditions.value = value;
+  });
+
+  /**
+   * 修改页码
+   * @param value - 新的页码
+   */
+  const changeCurrentPage = (value: number) => {
+    paginationConfig.value.currentPage = value;
+  };
+
+  /**
+   * 设置条件
+   * @param newConditions 新的条件
+   */
+  const setConditions = (newConditions: SearchConditions) => {
+    conditions.value = newConditions;
+  };
+
+  /**
+   * 获取条件
+   * @returns
+   */
+  const getConditions = () => conditions.value;
+
+  /**
+   * 设置下拉选项
+   * @param options - 下拉选项数组
+   */
+  const setSelectOptions = (options: SelectOption[]) => {
+    selectOptions.value = options;
+  };
+
+  /**
+   * 设置表格列配置
+   * @param columns - 表格列配置数组
+   */
+  const setTableColumns = (columns: TableColumn[]) => {
+    tableColumns.value = columns;
+  };
+
+  // ==================== 返回 ====================
+
+  return {
+    // 状态
+    selectOptions,
+    tableColumns,
+    conditions,
+    tableDatas,
+    paginationConfig,
+    loading,
+    changeConditions,
+    setConditions,
+    getConditions,
+    changeCurrentPage,
+    setSelectOptions,
+    setTableColumns,
+  };
+};

src/hooks/useIndex.ts

@@ -16,7 +16,7 @@ export const useIndex = () => {
     { title: '多灾种灾害链分析', name: 'index', query: { identification: 3 } },
     { title: '灾害链情景推演', name: 'index', query: { identification: 4 } },
     { title: '数据管理', name: 'dataManagement', query: { identification: 5 } },
-    { title: '文件管理', name: 'index', query: { identification: 6 } },
+    { title: '文件管理', name: 'fileManagement', query: { identification: 6 } },
   ];
 
   /**

src/hooks/useScene.ts

@@ -1,6 +1,7 @@
 import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore';
 import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
 import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
 import { useStatusStore } from '@/stores/useStatusStore';
 
 export const useScene = () => {
@@ -8,6 +9,7 @@ export const useScene = () => {
   const loadingInformationStore = useLoadingInformationStore();
   const leftLegendStore = useLeftLegendStore();
   const buttonSelectedIdStore = useButtonSelectedIdStore();
+  const simulationIdStore = useSimulationIdStore();
 
   // 重置场景
   const resetScene = () => {
@@ -22,6 +24,9 @@ export const useScene = () => {
 
     // 重置左侧图例
     leftLegendStore.resetLegendListInfo();
+
+    // 重置模拟id
+    simulationIdStore.resetSimulationId();
   };
 
   return { resetScene };

src/router/index.ts

@@ -25,6 +25,12 @@ const router = createRouter({
           component: () =>
             import('@/views/home/data-management/DataManagementView.vue'),
         },
+        {
+          path: 'file-management',
+          name: 'fileManagement',
+          component: () =>
+            import('@/views/home/file-management/FileManagementView.vue'),
+        },
       ],
     },
   ],

src/stores/useLoadingInformation.ts

@@ -114,6 +114,14 @@ export const useLoadingInformationStore = defineStore(
       id: -1,
     });
 
+    // ============================== 崩塌隐患点状态 ================================
+    const collapseHiddenPoint = reactive({
+      /** 加载状态 */
+      loading: false,
+      /** 崩塌隐患点ID */
+      id: -1,
+    });
+
     // ============================== 泥石流隐患点状态 ================================
     const debrisFlowHiddenPoint = reactive({
       /** 加载状态 */
@@ -190,6 +198,10 @@ export const useLoadingInformationStore = defineStore(
       landslideHiddenPoint.loading = false;
       landslideHiddenPoint.id = -1;
 
+      // 崩塌隐患点状态重置
+      collapseHiddenPoint.loading = false;
+      collapseHiddenPoint.id = -1;
+
       // 泥石流隐患点状态重置
       debrisFlowHiddenPoint.loading = false;
       debrisFlowHiddenPoint.id = -1;
@@ -216,6 +228,7 @@ export const useLoadingInformationStore = defineStore(
       reservoir,
       subwayStation,
       landslideHiddenPoint,
+      collapseHiddenPoint,
       debrisFlowHiddenPoint,
       waterLoggingHiddenPoint,
       flashFloodHiddenPoint,

src/stores/useSimulationIdStore.ts

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia';
+import { type Ref, ref } from 'vue';
+
+/**
+ * 模拟暴雨、地震灾害链id
+ */
+export const useSimulationIdStore = defineStore('simulationId', () => {
+  const status: Ref<boolean> = ref(false);
+  const id: Ref<number> = ref(-1);
+
+  /**
+   * 重置模拟id
+   */
+  const resetSimulationId = () => {
+    status.value = false;
+    id.value = -1;
+  };
+
+  /**
+   * 设置id
+   */
+  const setId = (value: number) => {
+    status.value = true;
+    id.value = value;
+  };
+
+  return { id, status, resetSimulationId, setId };
+});

src/stores/useStatusStore.ts

@@ -118,6 +118,11 @@ export const useStatusStore = defineStore('status', () => {
       show: true,
       loading: true,
     },
+    /** 显示崩塌隐患点 */
+    showCollapseHiddenPoint: {
+      show: true,
+      loading: true,
+    },
     /** 显示泥石流隐患点 */
     showDebrisFlowHiddenPoint: {
       show: true,
@@ -278,6 +283,10 @@ export const useStatusStore = defineStore('status', () => {
       show: true,
       loading: true,
     };
+    poiLayers.showCollapseHiddenPoint = {
+      show: true,
+      loading: true,
+    };
     poiLayers.showDebrisFlowHiddenPoint = {
       show: true,
       loading: true,

src/types/base/Point.ts

@@ -14,4 +14,6 @@ export interface Point {
   disasterType?: string;
   /** 名称 */
   name?: string;
+  /** 预测概率 */
+  probability?: string;
 }

src/types/common/DisasterType.ts

@@ -14,6 +14,8 @@ export enum DisasterType {
 export enum PointType {
   /** 滑坡 */
   LANDSLIDE = '滑坡',
+  /** 崩塌 */
+  COLLAPSE = '崩塌',
   /** 泥石流 */
   DEBRIS_FLOW = '泥石流',
   /** 内涝 */
@@ -29,6 +31,7 @@ export enum PointType {
  */
 export const HiddenDangerPointTypeMap: Record<PointType, string> = {
   [PointType.LANDSLIDE]: 'landslide',
+  [PointType.COLLAPSE]: 'collapse',
   [PointType.DEBRIS_FLOW]: 'debris_flow',
   [PointType.WATER_LOGGING]: 'water_logging',
   [PointType.FLASH_FLOOD]: 'flash_flood',

src/types/common/LoadingResourceType.ts

@@ -47,6 +47,11 @@ export enum LoadingResource {
    */
   LANDSLIDE_HIDDEN_POINT = 'LANDSLIDE_HIDDEN_POINT',
 
+  /**
+   * 崩塌隐患点
+   */
+  COLLAPSE_HIDDEN_POINT = 'COLLAPSE_HIDDEN_POINT',
+
   /**
    * 泥石流隐患点
    */

src/types/common/WarningList.ts

@@ -0,0 +1,8 @@
+/**
+ * 预警列表
+ */
+export interface WarningList {
+  probability: number;
+  lon: number;
+  lat: number;
+}

src/types/rainstorm/RainPredictRequest.ts

@@ -0,0 +1,19 @@
+/**
+ * 降雨预测请求值
+ */
+export interface RainPredictRequest {
+  /** 灾害名称 */
+  disaster_name: string;
+  /** id列表 */
+  point_ids?: number[];
+  /** 行政区划代码 */
+  region_code?: string;
+  /** 累计降雨量 */
+  rainfall?: number;
+  /** 持续时间 */
+  duration?: number;
+  /** 发生时间 */
+  occurred_time?: string;
+  /** 操作类型 */
+  operation_type?: string;
+}

src/types/rainstorm/RainPredictResponse.ts

@@ -0,0 +1,6 @@
+import type { WarningList } from '../common/WarningList';
+
+export interface RainPredictResponse {
+  record_id: number;
+  list: Record<string, WarningList>;
+}

src/utils/cesium/CesiumUtils.ts

@@ -20,6 +20,12 @@ import {
   SceneTransforms,
   Rectangle,
   Color,
+  JulianDate,
+  CallbackProperty,
+  ConstantProperty,
+  HeightReference,
+  VerticalOrigin,
+  HorizontalOrigin,
 } from 'cesium';
 import { CesiumViewerManager } from './CesiumViewerManager';
 import { EntityManager } from './EntityManager';
@@ -29,6 +35,7 @@ import { GeoJsonManager, type ClearType } from './GeoJsonManager';
 import { CameraController } from './CameraController';
 import config from '@/config/config.json';
 import type { ClickObject } from '@/types/cesium/ClickObject';
+import type { WarningList } from '@/types/common/WarningList';
 
 // 导出 ClearType 类型
 export type { ClearType };
@@ -48,6 +55,12 @@ export class CesiumUtils {
   // 颜色缓存
   #colorCache = new Map<string, Color>();
 
+  // 脉冲相关状态
+  #pulseMap: Record<string, { pulseId: string; probability: number }> = {};
+  #maxPulseRadius = 30;
+  #pulseDuration = 5;
+  #pulseCircleImage: string | null = null;
+
   constructor() {
     this.#viewerManager = new CesiumViewerManager();
   }
@@ -496,10 +509,11 @@ export class CesiumUtils {
   clickLayer(callback: (pickedObject: ClickObject) => void) {
     const handler = new ScreenSpaceEventHandler(this.getViewer()?.scene.canvas);
     handler.setInputAction((clickEvent: { position: Cartesian2 }) => {
-      // 在点击位置进行拾取
-      const pickedObject = CesiumUtilsSingleton.getViewer()?.scene.pick(
-        clickEvent.position
-      );
+      const viewer = CesiumUtilsSingleton.getViewer();
+      if (!viewer) return;
+      const pickedList = viewer.scene.drillPick(clickEvent.position);
+      // 跳过脉冲实体，取第一个非脉冲实体
+      const pickedObject = pickedList.find((p) => !p.id?.properties?.pulseKey);
       callback(pickedObject);
     }, ScreenSpaceEventType.LEFT_CLICK);
   }
@@ -539,6 +553,7 @@ export class CesiumUtils {
     this.clearAllPrimitives(clearType);
     this.clearAllLayers(clearType);
     this.clearAllGeoJsonLayers(clearType);
+    this.removeAllPulses();
   }
 
   // ===================== getter 和 setter函数 =====================
@@ -613,6 +628,85 @@ export class CesiumUtils {
     return color;
   }
 
+  /**
+   * 添加脉冲效果
+   * @param list 点列表
+   * @returns
+   */
+  addPulseEffect(list: Record<string, WarningList>) {
+    const viewer = this.getViewer();
+    if (!viewer) return;
+
+    // 移除已有脉冲
+    this.removeAllPulses();
+
+    // 生成圆形贴图
+    if (!this.#pulseCircleImage) {
+      this.#pulseCircleImage = this.#createCircleImage(this.#maxPulseRadius);
+    }
+
+    for (const [disasterType, warning] of Object.entries(list)) {
+      const { lon, lat, probability } = warning;
+
+      // 根据概率确定颜色
+      let color: Color;
+      if (probability >= 0.7) {
+        color = Color.RED;
+      } else if (probability >= 0.5) {
+        color = Color.YELLOW;
+      } else {
+        continue;
+      }
+
+      const key = `${disasterType}_${lon}_${lat}`;
+      const pulseId = `PULSE_${key}_${Date.now()}`;
+
+      this.#createPulseCircle(pulseId, key, lon, lat, color);
+      this.#pulseMap[key] = { pulseId, probability };
+    }
+  }
+
+  /**
+   * 移除所有脉冲实体
+   */
+  removeAllPulses(): void {
+    for (const key of Object.keys(this.#pulseMap)) {
+      this.#deletePulseEntity(key);
+    }
+  }
+
+  /**
+   * 隐藏所有脉冲效果
+   */
+  hidePulseEffects(): void {
+    const viewer = this.getViewer();
+    if (!viewer) return;
+
+    for (const key of Object.keys(this.#pulseMap)) {
+      const entry = this.#pulseMap[key];
+      const entity = viewer.entities.getById(entry.pulseId);
+      if (entity && entity.billboard) {
+        entity.billboard.show = new ConstantProperty(false);
+      }
+    }
+  }
+
+  /**
+   * 显示所有脉冲效果
+   */
+  showPulseEffects(): void {
+    const viewer = this.getViewer();
+    if (!viewer) return;
+
+    for (const key of Object.keys(this.#pulseMap)) {
+      const entry = this.#pulseMap[key];
+      const entity = viewer.entities.getById(entry.pulseId);
+      if (entity && entity.billboard) {
+        entity.billboard.show = new ConstantProperty(true);
+      }
+    }
+  }
+
   // ===================== 私有方法 =====================
 
   /**
@@ -625,6 +719,97 @@ export class CesiumUtils {
       throw new Error(`${managerName} 未初始化，请先调用 initCesiumViewer()`);
     }
   }
+
+  /**
+   * 生成脉冲圆形贴图
+   */
+  #createCircleImage(maxRadius: number): string {
+    const canvas = document.createElement('canvas');
+    canvas.width = maxRadius * 2;
+    canvas.height = maxRadius * 2;
+    const ctx = canvas.getContext('2d')!;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(maxRadius, maxRadius, maxRadius, 0, Math.PI * 2, false);
+    ctx.closePath();
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.fill();
+    return canvas.toDataURL('image/png');
+  }
+
+  /**
+   * 创建脉冲实体
+   * @param pulseId - 脉冲实体 ID
+   * @param lon - 经度
+   * @param lat - 纬度
+   * @param color - 颜色
+   */
+  #createPulseCircle(
+    pulseId: string,
+    key: string,
+    lon: number,
+    lat: number,
+    color: Color
+  ): void {
+    const viewer = this.getViewer();
+    if (!viewer || !this.#pulseCircleImage) return;
+
+    const startTime = JulianDate.now();
+    const maxRadius = this.#maxPulseRadius;
+    const duration = this.#pulseDuration;
+
+    viewer.entities.add({
+      id: pulseId,
+      position: Cartesian3.fromDegrees(lon, lat),
+      properties: { pulseKey: key },
+      billboard: {
+        image: this.#pulseCircleImage,
+        width: new CallbackProperty((time) => {
+          const elapsed =
+            JulianDate.secondsDifference(time, startTime) % duration;
+          const progress = elapsed / duration;
+          return maxRadius * 2 * Math.abs(Math.sin(progress * Math.PI));
+        }, false),
+        height: new CallbackProperty((time) => {
+          const elapsed =
+            JulianDate.secondsDifference(time, startTime) % duration;
+          const progress = elapsed / duration;
+          return maxRadius * 2 * Math.abs(Math.sin(progress * Math.PI));
+        }, false),
+        color: new CallbackProperty((time) => {
+          const elapsed =
+            JulianDate.secondsDifference(time, startTime) % duration;
+          const progress = elapsed / duration;
+          const alpha = 0.7 * (1 - progress);
+          return color.withAlpha(alpha);
+        }, false),
+        heightReference: HeightReference.CLAMP_TO_GROUND,
+        verticalOrigin: VerticalOrigin.CENTER,
+        horizontalOrigin: HorizontalOrigin.CENTER,
+        eyeOffset: new Cartesian3(0.0, 0.0, -10.0),
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+      },
+    });
+  }
+
+  /**
+   * 删除单个脉冲实体
+   * @param key - 脉冲映射 key
+   */
+  #deletePulseEntity(key: string): void {
+    const viewer = this.getViewer();
+    if (!viewer) return;
+
+    const entry = this.#pulseMap[key];
+    if (!entry) return;
+
+    const entity = viewer.entities.getById(entry.pulseId);
+    if (entity) {
+      viewer.entities.remove(entity);
+    }
+    delete this.#pulseMap[key];
+  }
 }
 
 /**

src/views/home/earthquake/EarthquakeView.vue

@@ -9,16 +9,16 @@
     <!-- 断裂带 -->
     <FaultComponent
       v-if="
-        useStatusStore().appLoadingCompleted &&
-        useStatusStore().mapLayers.faultShow.loading
+        statusStore.appLoadingCompleted &&
+        statusStore.mapLayers.faultShow.loading
       "
     />
 
     <!-- 灾害链影响列表组件 -->
     <DisasterChainPointComponent
       v-if="
-        useStatusStore().appLoadingCompleted &&
-        useStatusStore().uiComponents.disasterChainPointShow.loading
+        statusStore.appLoadingCompleted &&
+        statusStore.uiComponents.disasterChainPointShow.loading
       "
       :select-options="selectOptions"
       :table-data-list="tableDatas"
@@ -63,36 +63,58 @@
   import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
   import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
   import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain';
+  import {
+    useDisasterChainTable,
+    type SearchConditions,
+  } from '@/hooks/useDisasterChainTable';
   import { useStatusStore } from '@/stores/useStatusStore';
-  import { DisasterType } from '@/types/common/DisasterType.ts';
-  import { watch } from 'vue';
+  import { DisasterType, PointType } from '@/types/common/DisasterType.ts';
+  import { onBeforeMount } from 'vue';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
 
-  const {
-    conditions,
-    selectOptions,
-    tableDatas,
-    tableColumns,
-    paginationConfig,
-    leftButtonInfo,
-    rightButtonInfo,
-    controlPanel,
-    changeConditions,
-    changeCurrentPage,
-  } = useEarthquakeDisasterChain();
+  const { leftButtonInfo, rightButtonInfo, controlPanel } =
+    useEarthquakeDisasterChain();
 
   const statusStore = useStatusStore();
 
-  // 监听条件变化
-  watch(
-    conditions,
-    () => {
-      console.log('条件改变');
-    },
-    { deep: true }
-  );
+  const {
+    selectOptions,
+    tableColumns,
+    tableDatas,
+    paginationConfig,
+    changeConditions,
+    setConditions,
+    changeCurrentPage,
+    setSelectOptions,
+    setTableColumns,
+  } = useDisasterChainTable();
+
+  onBeforeMount(() => {
+    // 设置下拉选项
+    setSelectOptions([
+      { value: PointType.LANDSLIDE, label: '滑坡' },
+      { value: PointType.DEBRIS_FLOW, label: '泥石流' },
+      { value: PointType.RISK_AREA, label: '风险区' },
+    ]);
+
+    // 设置表格列配置
+    setTableColumns([
+      { title: '名称', key: 'disasterName' },
+      { title: '位置', key: 'position' },
+      { title: '规模等级', key: 'scaleGrade' },
+      { title: '险情等级', key: 'riskGrade' },
+    ]);
+
+    /**
+     * 条件改变执行
+     * @param value
+     */
+    changeConditions.value = (value: SearchConditions) => {
+      setConditions(value);
+    };
+  });
 </script>
 
 <style scoped></style>

src/views/home/file-management/FileManagementView.vue

@@ -0,0 +1,19 @@
+<!-- 文件管理 -->
+<template>
+  <!-- 搜索组件 -->
+   <SearchComponent />
+</template>
+
+<script setup lang="ts">
+import SearchComponent from '@/component/file-management/SearchComponent.vue';
+import { useStatusStore } from '@/stores/useStatusStore';
+
+const statusStore = useStatusStore()
+
+// 加载完成
+statusStore.appLoadingCompleted = true;
+</script>
+
+<style scoped>
+
+</style>

src/views/home/rainstorm/RainstormView.vue

@@ -71,25 +71,59 @@
   import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
   import StepComponent from '@/component/rain-earthquake/StepComponent.vue';
   import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
+  import {
+    useDisasterChainTable,
+    type SearchConditions,
+  } from '@/hooks/useDisasterChainTable';
   import { useStatusStore } from '@/stores/useStatusStore';
-  import { DisasterType } from '@/types/common/DisasterType.ts';
+  import { DisasterType, PointType } from '@/types/common/DisasterType.ts';
+  import { onBeforeMount } from 'vue';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
 
-  const {
-    selectOptions,
-    tableDatas,
-    tableColumns,
-    paginationConfig,
-    leftButtonInfo,
-    rightButtonInfo,
-    controlPanel,
-    changeConditions,
-    changeCurrentPage,
-  } = useRainDisasterChain();
+  const { leftButtonInfo, rightButtonInfo, controlPanel } =
+    useRainDisasterChain();
 
   const statusStore = useStatusStore();
+
+  const {
+    selectOptions,
+    tableColumns,
+    tableDatas,
+    paginationConfig,
+    changeConditions,
+    setConditions,
+    changeCurrentPage,
+    setSelectOptions,
+    setTableColumns,
+  } = useDisasterChainTable();
+
+  onBeforeMount(() => {
+    // 设置下拉选项
+    setSelectOptions([
+      { value: PointType.LANDSLIDE, label: '滑坡' },
+      { value: PointType.DEBRIS_FLOW, label: '泥石流' },
+      { value: PointType.FLASH_FLOOD, label: '山洪' },
+      { value: PointType.WATER_LOGGING, label: '内涝' },
+    ]);
+
+    // 设置表格列配置
+    setTableColumns([
+      { title: '名称', key: 'disasterName' },
+      { title: '位置', key: 'position' },
+      { title: '规模等级', key: 'scaleGrade' },
+      { title: '险情等级', key: 'riskGrade' },
+    ]);
+
+    /**
+     * 条件改变执行
+     * @param value
+     */
+    changeConditions.value = (value: SearchConditions) => {
+      setConditions(value);
+    };
+  });
 </script>
 
 <style scoped></style>