From a2189695ef6716f760d6c84aa5f793c15acd07a3 Mon Sep 17 00:00:00 2001 From: zxyroyy <1442470094@qq.com> Date: Fri, 26 Jun 2026 11:16:12 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=AD=A5=EF=BC=9A=E9=A3=8E?= =?UTF-8?q?=E9=99=A9=E7=82=B9=E5=88=86=E7=B1=BB=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisasterChainPointComponent.vue | 43 ++++++--- src/hooks/useDisasterChainTable.ts | 5 +- src/hooks/usePointsHandle.ts | 2 +- src/types/base/Point.ts | 2 + src/views/home/rainstorm/RainstormView.vue | 92 +++++++++++++------ 5 files changed, 101 insertions(+), 43 deletions(-) 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 @@ />
+ > + +
@@ -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);