第一步：将列表数据全部显示

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -39,7 +39,7 @@
     <!-- 表格 -->
     <div class="table-box">
       <el-table
-        :data="tableDataList"
+        :data="paginatedData"
         border
         style="width: 100%"
         empty-text="暂无数据"
@@ -111,6 +111,13 @@
 
   // ==================== 计算属性 ====================
 
+  // 分页后的数据
+  const paginatedData = computed(() => {
+    const start = (props.pageOption.currentPage - 1) * props.pageOption.pageSize;
+    const end = start + props.pageOption.pageSize;
+    return props.tableDataList.slice(start, end);
+  });
+
   // 是否显示分页
   const showPagination = computed(() => props.pageOption.totalPage !== 0);
 
@@ -216,7 +223,10 @@
   :deep(.el-select__selected-item) {
     color: white;
   }
-
+  /* 减小表格行的上下间距 */
+  :deep(.el-table .el-table__cell) {
+    padding: 6px 0;
+  }
   :deep(.el-table--border th) {
     background: linear-gradient(
       180deg,
@@ -227,7 +237,7 @@
     border: 1px solid rgba(255, 255, 255, 0.3);
     padding: 10px 12px;
     text-align: center;
-    font-size: 14px;
+    font-size: 15px;
     font-weight: bold;
   }
   :deep(.el-table tr),
@@ -267,4 +277,19 @@
     cursor: pointer;
     transition: background-color 0.3s ease;
   }
+  /* 名称列样式：一行显示，超出隐藏 */
+  :deep(.el-table .el-table__row td:first-child .cell) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  
+  /* 鼠标悬浮时显示完整名称 */
+  :deep(.el-table .el-table__row td:first-child:hover .cell) {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    word-break: break-all;
+  }
 </style>

src/component/rain-earthquake/function-child/AroundAnalysis.vue

@@ -34,20 +34,16 @@
 </template>
 
 <script lang="ts" setup>
-import { provide } from 'vue';
+import { inject } from 'vue';
 import { useStatusStore } from '@/stores/useStatusStore';
-import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
 import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
 import ButtonComponent from './around-analysis/ButtonComponent.vue';
 import SearchComponent from './around-analysis/SearchComponent.vue';
 
 const statusStore = useStatusStore();
 
-// 在父组件中创建唯一的 Hook 实例
+// 通过 inject 获取父组件（RainstormView.vue）提供的实例
-const aroundAnalysisState = useAroundAnalysis();
+const aroundAnalysisState = inject<AroundAnalysisState>('aroundAnalysisState')!;
-
-// 通过 provide 共享给所有子组件
-provide<AroundAnalysisState>('aroundAnalysisState', aroundAnalysisState);
 </script>
 
 <style scoped>

src/hooks/useDisasterChainTable.ts

@@ -119,6 +119,17 @@ export const useDisasterChainTable = () => {
     tableColumns.value = columns;
   };
 
+  /**
+   * 设置表格数据
+   * @param datas - 表格数据数组
+   */
+  const setTableDatas = (datas: XianHiddenDangerSpots[]) => {
+    tableDatas.value = datas;
+    paginationConfig.value.total = datas.length;
+    paginationConfig.value.totalPage = Math.ceil(datas.length / paginationConfig.value.pageSize);
+    paginationConfig.value.currentPage = 1;
+  };
+
   // ==================== 返回 ====================
 
   return {
@@ -135,5 +146,6 @@ export const useDisasterChainTable = () => {
     changeCurrentPage,
     setSelectOptions,
     setTableColumns,
+    setTableDatas,
   };
 };

src/hooks/usePointsHandle.ts

@@ -44,7 +44,7 @@ export const usePointsHandle = () => {
 
         const id = `${prefix}${point.id}`;
         ids.push(id);
-        info.push({ id, name: point.name!, lon: point.lon, lat: point.lat });
+        info.push({ id, name: point.name!, lon: point.lon, lat: point.lat, scale_grade: point.scale_grade, risk_grade: point.risk_grade });
 
         options.push({
           id: id,

src/types/base/Point.ts

@@ -16,4 +16,8 @@ export interface Point {
   name?: string;
   /** 预测概率 */
   probability?: string;
+  /** 规模等级（隐患点专用） */
+  scale_grade?: string;
+  /** 险情等级（隐患点专用） */
+  risk_grade?: string;
 }

src/views/home/rainstorm/RainstormView.vue

@@ -71,13 +71,17 @@
   import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
   import StepComponent from '@/component/rain-earthquake/StepComponent.vue';
   import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
+  import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
+  import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
+  import type { PointResource } from '@/types/common/useAroundAnalysisType';
+  import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
   import {
     useDisasterChainTable,
     type SearchConditions,
   } from '@/hooks/useDisasterChainTable';
   import { useStatusStore } from '@/stores/useStatusStore';
   import { DisasterType, PointType } from '@/types/common/DisasterType.ts';
-  import { onBeforeMount } from 'vue';
+  import { onBeforeMount, watch, provide } from 'vue';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
@@ -87,6 +91,10 @@
 
   const statusStore = useStatusStore();
 
+  // 在父组件中创建 useAroundAnalysis 实例，并通过 provide 提供给子组件
+  const aroundAnalysisState = useAroundAnalysis();
+  provide<AroundAnalysisState>('aroundAnalysisState', aroundAnalysisState);
+
   const {
     selectOptions,
     tableColumns,
@@ -97,6 +105,7 @@
     changeCurrentPage,
     setSelectOptions,
     setTableColumns,
+    setTableDatas,
   } = useDisasterChainTable();
 
   onBeforeMount(() => {
@@ -104,8 +113,9 @@
     setSelectOptions([
       { value: PointType.LANDSLIDE, label: '滑坡' },
       { value: PointType.DEBRIS_FLOW, label: '泥石流' },
-      { value: PointType.FLASH_FLOOD, label: '山洪' },
       { value: PointType.WATER_LOGGING, label: '内涝' },
+      { value: PointType.FLASH_FLOOD, label: '山洪' },
+      { value: PointType.COLLAPSE, label: '崩塌' },
     ]);
 
     // 设置表格列配置
@@ -124,6 +134,46 @@
       setConditions(value);
     };
   });
+
+    // 监听脉冲点变化并更新表格数据
+  watch(
+    () => aroundAnalysisState.pulsePoints.value,
+    (newPulsePoints: PointResource[]) => {
+      console.log('=== 脉冲点变化 ===');
+      console.log('newPulsePoints:', newPulsePoints);
+      console.log('newPulsePoints.length:', newPulsePoints?.length);
+
+      if (newPulsePoints && newPulsePoints.length > 0) {
+        // 将 PointResource 转换为 XianHiddenDangerSpots 格式
+                const convertedData: XianHiddenDangerSpots[] = newPulsePoints.map(point => ({
+          id: typeof point.id === 'number' ? point.id : parseInt(String(point.id), 10),
+          name: point.value,
+          disasterName: point.value,
+          position: point.lon !== undefined && point.lat !== undefined
+            ? `${point.lon.toFixed(4)}, ${point.lat.toFixed(4)}`
+            : '未知位置',
+          scaleGrade: String(point.scale_grade || '未知'),
+          riskGrade: String(point.risk_grade || '一般'),
+          lon: point.lon,
+          lat: point.lat,
+          fieldCode: String(point.id),
+          province: '陕西省',
+          city: '西安市',
+          county: '',
+          village: '',
+          isDelete: 0,
+        }));
+
+        console.log('convertedData:', convertedData);
+        setTableDatas(convertedData);
+      } else {
+        // 如果没有脉冲点，则清空表格数据
+        console.log('清空表格数据');
+        setTableDatas([]);
+      }
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style scoped></style>