diff --git a/src/component/rain-earthquake/DisasterChainPointComponent.vue b/src/component/rain-earthquake/DisasterChainPointComponent.vue
index f202a2e..d242e6c 100644
--- a/src/component/rain-earthquake/DisasterChainPointComponent.vue
+++ b/src/component/rain-earthquake/DisasterChainPointComponent.vue
@@ -29,29 +29,36 @@
/>
+ >
+
+
+
{{ scope.row.lon?.toFixed(4) }},
+
{{ scope.row.lat?.toFixed(4) }}
+
+
+
@@ -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;
+ }
diff --git a/src/hooks/useDisasterChainTable.ts b/src/hooks/useDisasterChainTable.ts
index da59ea4..d872716 100644
--- a/src/hooks/useDisasterChainTable.ts
+++ b/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([]);
+ 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);
diff --git a/src/hooks/usePointsHandle.ts b/src/hooks/usePointsHandle.ts
index bd448e5..6727eb8 100644
--- a/src/hooks/usePointsHandle.ts
+++ b/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,
diff --git a/src/types/base/Point.ts b/src/types/base/Point.ts
index 7ec1326..9e47006 100644
--- a/src/types/base/Point.ts
+++ b/src/types/base/Point.ts
@@ -20,4 +20,6 @@ export interface Point {
scale_grade?: string;
/** 险情等级(隐患点专用) */
risk_grade?: string;
+ /** 风险区等级(风险点专用) */
+ risk_level?: string;
}
diff --git a/src/views/home/rainstorm/RainstormView.vue b/src/views/home/rainstorm/RainstormView.vue
index d769d3f..0bb1a96 100644
--- a/src/views/home/rainstorm/RainstormView.vue
+++ b/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,31 +194,51 @@
return false;
});
- // 将 PointResource 转换为 XianHiddenDangerSpots 格式
- const convertedData: XianHiddenDangerSpots[] = filteredPoints.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,
- })
- );
+ // 根据类型转换数据
+ const convertedData = filteredPoints.map(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
+ : 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,
+ } as XianHiddenDangerSpots;
+ }
+ });
console.log('convertedData:', convertedData);
setTableDatas(convertedData);