第四步:医院数据分类显示
This commit is contained in:
@@ -73,10 +73,12 @@
|
||||
import StepComponent from '@/component/rain-earthquake/StepComponent.vue';
|
||||
import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
|
||||
import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
|
||||
import { InfrastructurePointType } from '@/types/common/InfrastructurePointType';
|
||||
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 type { XianHospitals } from '@/types/base/XianHospitals';
|
||||
import {
|
||||
useDisasterChainTable,
|
||||
type SearchConditions,
|
||||
@@ -123,20 +125,21 @@
|
||||
onBeforeMount(() => {
|
||||
// 设置下拉选项
|
||||
setSelectOptions([
|
||||
{ value: PointType.LANDSLIDE, label: '滑坡' },
|
||||
{ value: PointType.DEBRIS_FLOW, label: '泥石流' },
|
||||
{ value: PointType.WATER_LOGGING, label: '内涝' },
|
||||
{ value: PointType.FLASH_FLOOD, label: '山洪' },
|
||||
{ value: PointType.COLLAPSE, label: '崩塌' },
|
||||
{ value: PointType.RISK_AREA, label: '风险区' },
|
||||
{value: PointType.LANDSLIDE, label: '滑坡'},
|
||||
{value: PointType.DEBRIS_FLOW, label: '泥石流'},
|
||||
{value: PointType.WATER_LOGGING, label: '内涝'},
|
||||
{value: PointType.FLASH_FLOOD, label: '山洪'},
|
||||
{value: PointType.COLLAPSE, label: '崩塌'},
|
||||
{value: PointType.RISK_AREA, label: '风险区'},
|
||||
{value: InfrastructurePointType.HOSPITAL, label: '医院'},
|
||||
]);
|
||||
|
||||
// 设置表格列配置(默认显示隐患点的列)
|
||||
setTableColumns([
|
||||
{ title: '名称', key: 'disasterName' },
|
||||
{ title: '位置', key: 'position' },
|
||||
{ title: '规模等级', key: 'scaleGrade' },
|
||||
{ title: '险情等级', key: 'riskGrade' },
|
||||
{title: '名称', key: 'disasterName'},
|
||||
{title: '位置', key: 'position'},
|
||||
{title: '规模等级', key: 'scaleGrade'},
|
||||
{title: '险情等级', key: 'riskGrade'},
|
||||
]);
|
||||
|
||||
/**
|
||||
@@ -150,106 +153,139 @@
|
||||
if (value.hiddenPoint === PointType.RISK_AREA) {
|
||||
// 风险区:只显示风险区等级
|
||||
setTableColumns([
|
||||
{ title: '名称', key: 'disasterName' },
|
||||
{ title: '位置', key: 'position' },
|
||||
{ title: '风险区等级', key: 'riskLevel' },
|
||||
{title: '名称', key: 'disasterName'},
|
||||
{title: '位置', key: 'position'},
|
||||
{title: '风险区等级', key: 'riskLevel'},
|
||||
]);
|
||||
} else if (value.hiddenPoint === InfrastructurePointType.HOSPITAL) {
|
||||
// 医院:只显示医院等级
|
||||
setTableColumns([
|
||||
{title: '名称', key: 'disasterName'},
|
||||
{title: '位置', key: 'position'},
|
||||
{title: '医院等级', key: 'level'},
|
||||
]);
|
||||
} else {
|
||||
// 隐患点:显示规模等级和险情等级
|
||||
setTableColumns([
|
||||
{ title: '名称', key: 'disasterName' },
|
||||
{ title: '位置', key: 'position' },
|
||||
{ title: '规模等级', key: 'scaleGrade' },
|
||||
{ title: '险情等级', key: 'riskGrade' },
|
||||
{title: '名称', key: 'disasterName'},
|
||||
{title: '位置', key: 'position'},
|
||||
{title: '规模等级', key: 'scaleGrade'},
|
||||
{title: '险情等级', key: 'riskGrade'},
|
||||
]);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// 监听脉冲点变化和下拉选项变化,过滤并更新表格数据
|
||||
watch(
|
||||
[
|
||||
() => aroundAnalysisState.pulsePoints.value,
|
||||
() => conditions.value.hiddenPoint,
|
||||
],
|
||||
([newPulsePoints, hiddenPointType]: [PointResource[], PointType]) => {
|
||||
console.log('=== 脉冲点变化 ===');
|
||||
console.log('newPulsePoints:', newPulsePoints);
|
||||
console.log('newPulsePoints.length:', newPulsePoints?.length);
|
||||
console.log('hiddenPointType:', hiddenPointType);
|
||||
watch(
|
||||
[
|
||||
() => aroundAnalysisState.pulsePoints.value,
|
||||
() => conditions.value.hiddenPoint,
|
||||
],
|
||||
([newPulsePoints, hiddenPointType]: [PointResource[], PointType | InfrastructurePointType]) => {
|
||||
console.log('=== 脉冲点变化 ===');
|
||||
console.log('newPulsePoints:', newPulsePoints);
|
||||
console.log('newPulsePoints.length:', newPulsePoints?.length);
|
||||
console.log('hiddenPointType:', hiddenPointType);
|
||||
|
||||
if (newPulsePoints && newPulsePoints.length > 0) {
|
||||
// 根据选中的隐患点类型过滤
|
||||
const englishType = HiddenDangerPointTypeMap[hiddenPointType];
|
||||
const filteredPoints = newPulsePoints.filter(point => {
|
||||
if (point.category === 'hidden-danger') {
|
||||
return point.originalType === englishType;
|
||||
}
|
||||
if (
|
||||
hiddenPointType === PointType.RISK_AREA &&
|
||||
point.category === 'risk-point'
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
if (newPulsePoints && newPulsePoints.length > 0) {
|
||||
// 根据选中的类型过滤
|
||||
const filteredPoints = newPulsePoints.filter(point => {
|
||||
// 隐患点过滤
|
||||
if (point.category === 'hidden-danger') {
|
||||
const englishType = HiddenDangerPointTypeMap[hiddenPointType as PointType];
|
||||
return englishType ? point.originalType === englishType : false;
|
||||
}
|
||||
// 风险点过滤
|
||||
if (
|
||||
hiddenPointType === PointType.RISK_AREA &&
|
||||
point.category === 'risk-point'
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
// 医院过滤
|
||||
if (
|
||||
hiddenPointType === InfrastructurePointType.HOSPITAL &&
|
||||
point.category === 'hospital'
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// 根据类型转换数据
|
||||
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;
|
||||
// 根据类型转换数据
|
||||
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 if (point.category === 'hospital') {
|
||||
// 医院数据
|
||||
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)}`
|
||||
: '未知位置',
|
||||
level: String(point.level || '未知'),
|
||||
lon: point.lon,
|
||||
lat: point.lat,
|
||||
} as XianHospitals;
|
||||
} 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);
|
||||
} 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('清空表格数据');
|
||||
setTableDatas([]);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('convertedData:', convertedData);
|
||||
setTableDatas(convertedData);
|
||||
} else {
|
||||
// 如果没有脉冲点,则清空表格数据
|
||||
console.log('清空表格数据');
|
||||
setTableDatas([]);
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user