第三步：风险点分类显示

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -31,7 +31,7 @@
         <el-option
             v-for="(opt, index) in selectOptions"
             :key="index"
-          :label="`${opt.label}预警点`"
+            :label="opt.value === PointType.RISK_AREA ? opt.label : `${opt.label}预警点`"
             :value="opt.value"
         />
       </el-select>
@@ -51,7 +51,14 @@
             :label="
             index == 0 ? `${conditions.hiddenPoint}${row.title}` : row.title
           "
-        />
+        >
+          <template #default="scope" v-if="row.key === 'position'">
+            <div class="position-cell">
+              <div>{{ scope.row.lon?.toFixed(4) }},</div>
+              <div>{{ scope.row.lat?.toFixed(4) }}</div>
+            </div>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
 
@@ -293,4 +300,12 @@
     text-overflow: unset;
     word-break: break-all;
   }
+
+  /* 位置列样式：经纬度两行显示 */
+  .position-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.5;
+  }
 </style>

src/hooks/useDisasterChainTable.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue';
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
 import type { PaginationType } from '@/types/common/PaginationType';
 import { PointType } from '@/types/common/DisasterType';
 
@@ -56,7 +57,7 @@ export const useDisasterChainTable = () => {
   /**
    * 表格数据
    */
-  const tableDatas = ref<XianHiddenDangerSpots[]>([]);
+  const tableDatas = ref<(XianHiddenDangerSpots | XianRiskSpots)[]>([]);
 
   /**
    * 分页配置
@@ -123,7 +124,7 @@ export const useDisasterChainTable = () => {
    * 设置表格数据
    * @param datas - 表格数据数组
    */
-  const setTableDatas = (datas: XianHiddenDangerSpots[]) => {
+  const setTableDatas = (datas: (XianHiddenDangerSpots | XianRiskSpots)[]) => {
     tableDatas.value = datas;
     paginationConfig.value.total = datas.length;
     paginationConfig.value.totalPage = Math.ceil(datas.length / paginationConfig.value.pageSize);

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, scale_grade: point.scale_grade, risk_grade: point.risk_grade });
+        info.push({ id, name: point.name!, lon: point.lon, lat: point.lat, scale_grade: point.scale_grade, risk_grade: point.risk_grade, risk_level: point.risk_level });
 
         options.push({
           id: id,

src/types/base/Point.ts

@@ -20,4 +20,6 @@ export interface Point {
   scale_grade?: string;
   /** 险情等级（隐患点专用） */
   risk_grade?: string;
+  /** 风险区等级（风险点专用） */
+  risk_level?: string;
 }

src/views/home/rainstorm/RainstormView.vue

@@ -76,6 +76,7 @@
   import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
   import type { PointResource } from '@/types/common/useAroundAnalysisType';
   import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+  import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
   import {
     useDisasterChainTable,
     type SearchConditions,
@@ -127,9 +128,10 @@
       { value: PointType.WATER_LOGGING, label: '内涝' },
       { value: PointType.FLASH_FLOOD, label: '山洪' },
       { value: PointType.COLLAPSE, label: '崩塌' },
+      { value: PointType.RISK_AREA, label: '风险区' },
     ]);
 
-    // 设置表格列配置
+    // 设置表格列配置（默认显示隐患点的列）
     setTableColumns([
       { title: '名称', key: 'disasterName' },
       { title: '位置', key: 'position' },
@@ -143,6 +145,24 @@
      */
     changeConditions.value = (value: SearchConditions) => {
       setConditions(value);
+
+      // 根据选择的类型动态改变表格列
+      if (value.hiddenPoint === PointType.RISK_AREA) {
+        // 风险区：只显示风险区等级
+        setTableColumns([
+          { title: '名称', key: 'disasterName' },
+          { title: '位置', key: 'position' },
+          { title: '风险区等级', key: 'riskLevel' },
+        ]);
+      } else {
+        // 隐患点：显示规模等级和险情等级
+        setTableColumns([
+          { title: '名称', key: 'disasterName' },
+          { title: '位置', key: 'position' },
+          { title: '规模等级', key: 'scaleGrade' },
+          { title: '险情等级', key: 'riskGrade' },
+        ]);
+      }
     };
   });
 
@@ -174,9 +194,28 @@
           return false;
         });
 
-        // 将 PointResource 转换为 XianHiddenDangerSpots 格式
+        // 根据类型转换数据
-        const convertedData: XianHiddenDangerSpots[] = filteredPoints.map(
+        const convertedData = filteredPoints.map(point => {
-          point => ({
+          if (point.category === 'risk-point') {
+            // 风险点数据
+            return {
+              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)}`
+                      : '未知位置',
+              riskLevel: String(point.risk_level || '一般'),
+              lon: point.lon,
+              lat: point.lat,
+            } as XianRiskSpots;
+          } else {
+            // 隐患点数据
+            return {
               id:
                   typeof point.id === 'number'
                       ? point.id
@@ -197,8 +236,9 @@
               county: '',
               village: '',
               isDelete: 0,
-          })
+            } as XianHiddenDangerSpots;
-        );
+          }
+        });
 
         console.log('convertedData:', convertedData);
         setTableDatas(convertedData);