第三步：风险点分类显示

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -29,29 +29,36 @@
       />
       <el-select v-model="conditions.hiddenPoint" class="search-hidden-point">
         <el-option
-          v-for="(opt, index) in selectOptions"
-          :key="index"
-          :label="`${opt.label}预警点`"
-          :value="opt.value"
+            v-for="(opt, index) in selectOptions"
+            :key="index"
+            :label="opt.value === PointType.RISK_AREA ? opt.label : `${opt.label}预警点`"
+            :value="opt.value"
         />
       </el-select>
     </div>
     <!-- 表格 -->
     <div class="table-box">
       <el-table
-        :data="paginatedData"
-        border
-        style="width: 100%"
-        empty-text="暂无数据"
+          :data="paginatedData"
+          border
+          style="width: 100%"
+          empty-text="暂无数据"
       >
         <el-table-column
-          v-for="(row, index) in tableColumns"
-          :key="index"
-          :prop="row.key"
-          :label="
+            v-for="(row, index) in tableColumns"
+            :key="index"
+            :prop="row.key"
+            :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>
 
@@ -285,7 +292,7 @@
     text-overflow: ellipsis;
     cursor: pointer;
   }
-  
+
   /* 鼠标悬浮时显示完整名称 */
   :deep(.el-table .el-table__row td:first-child:hover .cell) {
     white-space: normal;
@@ -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>