第四步:医院数据分类显示
This commit is contained in:
@@ -31,7 +31,7 @@
|
|||||||
<el-option
|
<el-option
|
||||||
v-for="(opt, index) in selectOptions"
|
v-for="(opt, index) in selectOptions"
|
||||||
:key="index"
|
:key="index"
|
||||||
:label="opt.value === PointType.RISK_AREA ? opt.label : `${opt.label}预警点`"
|
:label="opt.value === PointType.RISK_AREA || opt.value === InfrastructurePointType.HOSPITAL ? opt.label : `${opt.label}预警点`"
|
||||||
:value="opt.value"
|
:value="opt.value"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
@@ -88,6 +88,7 @@
|
|||||||
import { useStatusStore } from '@/stores/useStatusStore';
|
import { useStatusStore } from '@/stores/useStatusStore';
|
||||||
import type { Point } from '@/types/base/Point';
|
import type { Point } from '@/types/base/Point';
|
||||||
import { PointType } from '@/types/common/DisasterType';
|
import { PointType } from '@/types/common/DisasterType';
|
||||||
|
import { InfrastructurePointType } from '@/types/common/InfrastructurePointType';
|
||||||
import type { PaginationType } from '@/types/common/PaginationType';
|
import type { PaginationType } from '@/types/common/PaginationType';
|
||||||
import { ref, watch, computed, type Ref } from 'vue';
|
import { ref, watch, computed, type Ref } from 'vue';
|
||||||
|
|
||||||
@@ -95,7 +96,7 @@
|
|||||||
|
|
||||||
// 接收父组件的参数
|
// 接收父组件的参数
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
selectOptions: { label: string; value: PointType }[];
|
selectOptions: { label: string; value: PointType | InfrastructurePointType }[];
|
||||||
tableDataList: Point[];
|
tableDataList: Point[];
|
||||||
tableColumns: { title: string; key: string }[];
|
tableColumns: { title: string; key: string }[];
|
||||||
pageOption: PaginationType;
|
pageOption: PaginationType;
|
||||||
@@ -106,13 +107,13 @@
|
|||||||
const emits = defineEmits<{
|
const emits = defineEmits<{
|
||||||
(
|
(
|
||||||
e: 'changeConditions',
|
e: 'changeConditions',
|
||||||
value: { tableData: string; hiddenPoint: PointType }
|
value: { tableData: string; hiddenPoint: PointType | InfrastructurePointType }
|
||||||
): void;
|
): void;
|
||||||
(e: 'changeCurrentPage', value: number): void;
|
(e: 'changeCurrentPage', value: number): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
// 搜索条件
|
// 搜索条件
|
||||||
const conditions: Ref<{ tableData: string; hiddenPoint: PointType }> = ref({
|
const conditions: Ref<{ tableData: string; hiddenPoint: PointType | InfrastructurePointType }> = ref({
|
||||||
tableData: '',
|
tableData: '',
|
||||||
hiddenPoint: PointType.LANDSLIDE,
|
hiddenPoint: PointType.LANDSLIDE,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
|
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
|
||||||
import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
|
import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
|
||||||
|
import type { XianHospitals } from '@/types/base/XianHospitals';
|
||||||
import type { PaginationType } from '@/types/common/PaginationType';
|
import type { PaginationType } from '@/types/common/PaginationType';
|
||||||
import { PointType } from '@/types/common/DisasterType';
|
import { PointType } from '@/types/common/DisasterType';
|
||||||
|
import { InfrastructurePointType } from '@/types/common/InfrastructurePointType';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 灾害链表格数据选项
|
* 灾害链表格数据选项
|
||||||
*/
|
*/
|
||||||
export interface SelectOption {
|
export interface SelectOption {
|
||||||
value: PointType;
|
value: PointType | InfrastructurePointType;
|
||||||
label: string;
|
label: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -25,7 +27,7 @@ export interface TableColumn {
|
|||||||
*/
|
*/
|
||||||
export interface SearchConditions {
|
export interface SearchConditions {
|
||||||
tableData: string;
|
tableData: string;
|
||||||
hiddenPoint: PointType;
|
hiddenPoint: PointType | InfrastructurePointType;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -57,7 +59,7 @@ export const useDisasterChainTable = () => {
|
|||||||
/**
|
/**
|
||||||
* 表格数据
|
* 表格数据
|
||||||
*/
|
*/
|
||||||
const tableDatas = ref<(XianHiddenDangerSpots | XianRiskSpots)[]>([]);
|
const tableDatas = ref<(XianHiddenDangerSpots | XianRiskSpots | XianHospitals)[]>([]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 分页配置
|
* 分页配置
|
||||||
@@ -124,7 +126,7 @@ export const useDisasterChainTable = () => {
|
|||||||
* 设置表格数据
|
* 设置表格数据
|
||||||
* @param datas - 表格数据数组
|
* @param datas - 表格数据数组
|
||||||
*/
|
*/
|
||||||
const setTableDatas = (datas: (XianHiddenDangerSpots | XianRiskSpots)[]) => {
|
const setTableDatas = (datas: (XianHiddenDangerSpots | XianRiskSpots | XianHospitals)[]) => {
|
||||||
tableDatas.value = datas;
|
tableDatas.value = datas;
|
||||||
paginationConfig.value.total = datas.length;
|
paginationConfig.value.total = datas.length;
|
||||||
paginationConfig.value.totalPage = Math.ceil(datas.length / paginationConfig.value.pageSize);
|
paginationConfig.value.totalPage = Math.ceil(datas.length / paginationConfig.value.pageSize);
|
||||||
|
|||||||
@@ -44,8 +44,7 @@ export const usePointsHandle = () => {
|
|||||||
|
|
||||||
const id = `${prefix}${point.id}`;
|
const id = `${prefix}${point.id}`;
|
||||||
ids.push(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, risk_level: point.risk_level });
|
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, level: point.level });
|
||||||
|
|
||||||
options.push({
|
options.push({
|
||||||
id: id,
|
id: id,
|
||||||
type: 'billboard',
|
type: 'billboard',
|
||||||
|
|||||||
@@ -22,4 +22,6 @@ export interface Point {
|
|||||||
risk_grade?: string;
|
risk_grade?: string;
|
||||||
/** 风险区等级(风险点专用) */
|
/** 风险区等级(风险点专用) */
|
||||||
risk_level?: string;
|
risk_level?: string;
|
||||||
|
/** 医院等级(医院专用) */
|
||||||
|
level?: string;
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
/**
|
||||||
|
* 基础设施点类型枚举
|
||||||
|
*/
|
||||||
|
export enum InfrastructurePointType {
|
||||||
|
/** 医院 */
|
||||||
|
HOSPITAL = '医院',
|
||||||
|
/** 学校 */
|
||||||
|
SCHOOL = '学校',
|
||||||
|
/** 危险源 */
|
||||||
|
DANGEROUS_SOURCE = '危险源',
|
||||||
|
/** 避难所 */
|
||||||
|
REFUGEE_SHELTER = '避难所',
|
||||||
|
/** 消防站 */
|
||||||
|
FIRE_STATION = '消防站',
|
||||||
|
/** 储备点 */
|
||||||
|
STORE_POINTS = '储备点',
|
||||||
|
/** 桥梁 */
|
||||||
|
BRIDGE = '桥梁',
|
||||||
|
/** 水库 */
|
||||||
|
RESERVOIR = '水库',
|
||||||
|
/** 地铁站 */
|
||||||
|
SUBWAY = '地铁站',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 基础设施点类型映射(中文 -> 后端英文参数)
|
||||||
|
*/
|
||||||
|
export const InfrastructurePointTypeMap: Record<InfrastructurePointType, string> = {
|
||||||
|
[InfrastructurePointType.HOSPITAL]: 'hospital',
|
||||||
|
[InfrastructurePointType.SCHOOL]: 'school',
|
||||||
|
[InfrastructurePointType.DANGEROUS_SOURCE]: 'dangerous_source',
|
||||||
|
[InfrastructurePointType.REFUGEE_SHELTER]: 'refugee_shelter',
|
||||||
|
[InfrastructurePointType.FIRE_STATION]: 'fire_station',
|
||||||
|
[InfrastructurePointType.STORE_POINTS]: 'store_points',
|
||||||
|
[InfrastructurePointType.BRIDGE]: 'bridge',
|
||||||
|
[InfrastructurePointType.RESERVOIR]: 'reservoir',
|
||||||
|
[InfrastructurePointType.SUBWAY]: 'subway',
|
||||||
|
};
|
||||||
@@ -73,10 +73,12 @@
|
|||||||
import StepComponent from '@/component/rain-earthquake/StepComponent.vue';
|
import StepComponent from '@/component/rain-earthquake/StepComponent.vue';
|
||||||
import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
|
import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
|
||||||
import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
|
import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
|
||||||
|
import { InfrastructurePointType } from '@/types/common/InfrastructurePointType';
|
||||||
import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
|
import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
|
||||||
import type { PointResource } from '@/types/common/useAroundAnalysisType';
|
import type { PointResource } from '@/types/common/useAroundAnalysisType';
|
||||||
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
|
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
|
||||||
import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
|
import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
|
||||||
|
import type { XianHospitals } from '@/types/base/XianHospitals';
|
||||||
import {
|
import {
|
||||||
useDisasterChainTable,
|
useDisasterChainTable,
|
||||||
type SearchConditions,
|
type SearchConditions,
|
||||||
@@ -129,6 +131,7 @@
|
|||||||
{value: PointType.FLASH_FLOOD, label: '山洪'},
|
{value: PointType.FLASH_FLOOD, label: '山洪'},
|
||||||
{value: PointType.COLLAPSE, label: '崩塌'},
|
{value: PointType.COLLAPSE, label: '崩塌'},
|
||||||
{value: PointType.RISK_AREA, label: '风险区'},
|
{value: PointType.RISK_AREA, label: '风险区'},
|
||||||
|
{value: InfrastructurePointType.HOSPITAL, label: '医院'},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 设置表格列配置(默认显示隐患点的列)
|
// 设置表格列配置(默认显示隐患点的列)
|
||||||
@@ -154,6 +157,13 @@
|
|||||||
{title: '位置', key: 'position'},
|
{title: '位置', key: 'position'},
|
||||||
{title: '风险区等级', key: 'riskLevel'},
|
{title: '风险区等级', key: 'riskLevel'},
|
||||||
]);
|
]);
|
||||||
|
} else if (value.hiddenPoint === InfrastructurePointType.HOSPITAL) {
|
||||||
|
// 医院:只显示医院等级
|
||||||
|
setTableColumns([
|
||||||
|
{title: '名称', key: 'disasterName'},
|
||||||
|
{title: '位置', key: 'position'},
|
||||||
|
{title: '医院等级', key: 'level'},
|
||||||
|
]);
|
||||||
} else {
|
} else {
|
||||||
// 隐患点:显示规模等级和险情等级
|
// 隐患点:显示规模等级和险情等级
|
||||||
setTableColumns([
|
setTableColumns([
|
||||||
@@ -164,7 +174,6 @@
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
|
||||||
|
|
||||||
// 监听脉冲点变化和下拉选项变化,过滤并更新表格数据
|
// 监听脉冲点变化和下拉选项变化,过滤并更新表格数据
|
||||||
watch(
|
watch(
|
||||||
@@ -172,25 +181,34 @@
|
|||||||
() => aroundAnalysisState.pulsePoints.value,
|
() => aroundAnalysisState.pulsePoints.value,
|
||||||
() => conditions.value.hiddenPoint,
|
() => conditions.value.hiddenPoint,
|
||||||
],
|
],
|
||||||
([newPulsePoints, hiddenPointType]: [PointResource[], PointType]) => {
|
([newPulsePoints, hiddenPointType]: [PointResource[], PointType | InfrastructurePointType]) => {
|
||||||
console.log('=== 脉冲点变化 ===');
|
console.log('=== 脉冲点变化 ===');
|
||||||
console.log('newPulsePoints:', newPulsePoints);
|
console.log('newPulsePoints:', newPulsePoints);
|
||||||
console.log('newPulsePoints.length:', newPulsePoints?.length);
|
console.log('newPulsePoints.length:', newPulsePoints?.length);
|
||||||
console.log('hiddenPointType:', hiddenPointType);
|
console.log('hiddenPointType:', hiddenPointType);
|
||||||
|
|
||||||
if (newPulsePoints && newPulsePoints.length > 0) {
|
if (newPulsePoints && newPulsePoints.length > 0) {
|
||||||
// 根据选中的隐患点类型过滤
|
// 根据选中的类型过滤
|
||||||
const englishType = HiddenDangerPointTypeMap[hiddenPointType];
|
|
||||||
const filteredPoints = newPulsePoints.filter(point => {
|
const filteredPoints = newPulsePoints.filter(point => {
|
||||||
|
// 隐患点过滤
|
||||||
if (point.category === 'hidden-danger') {
|
if (point.category === 'hidden-danger') {
|
||||||
return point.originalType === englishType;
|
const englishType = HiddenDangerPointTypeMap[hiddenPointType as PointType];
|
||||||
|
return englishType ? point.originalType === englishType : false;
|
||||||
}
|
}
|
||||||
|
// 风险点过滤
|
||||||
if (
|
if (
|
||||||
hiddenPointType === PointType.RISK_AREA &&
|
hiddenPointType === PointType.RISK_AREA &&
|
||||||
point.category === 'risk-point'
|
point.category === 'risk-point'
|
||||||
) {
|
) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
// 医院过滤
|
||||||
|
if (
|
||||||
|
hiddenPointType === InfrastructurePointType.HOSPITAL &&
|
||||||
|
point.category === 'hospital'
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -213,6 +231,23 @@
|
|||||||
lon: point.lon,
|
lon: point.lon,
|
||||||
lat: point.lat,
|
lat: point.lat,
|
||||||
} as XianRiskSpots;
|
} 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 {
|
} else {
|
||||||
// 隐患点数据
|
// 隐患点数据
|
||||||
return {
|
return {
|
||||||
@@ -250,6 +285,7 @@
|
|||||||
},
|
},
|
||||||
{ immediate: true, deep: true }
|
{ immediate: true, deep: true }
|
||||||
);
|
);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
Reference in New Issue
Block a user