gis/xian_vue_new
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

细化隐患点显示逻辑

Browse Source
This commit is contained in:
wzy-warehouse
2026-04-28 10:05:49 +08:00
parent 8170b3f162
commit 8dc3b6fe90
17 changed files with 794 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/api.ts
+110 -47
View File
@@ -1,25 +1,57 @@
import type { DisasterType } from '@/types/common/DisasterType.ts'
import { getSm2PublicKey } from './crypto'
import { getBasePoints as getHiddenDangerBasePoints, getPointDetailById as getHiddenDangerPointDetailById} from './hidden-danger-spots'
import { getBasePoints as getRiskBasePoints, getPointDetailById as getRiskPointDetailById} from './risk-spots'
import { getBasePoints as getHospitalsBasePoints, getPointDetailById as getHospitalsPointDetailById} from './hospitals'
import { getBasePoints as getDangerousSourceBasePoints, getPointDetailById as getDangerousSourcePointDetailById} from './dangerous-source'
import { getBasePoints as getEmergencyShelterBasePoints, getPointDetailById as getEmergencyShelterPointDetailById} from './emergency-shelter'
import { getBasePoints as getFirefighterBasePoints, getPointDetailById as getFirefighterPointDetailById} from './firefighter'
import { getBasePoints as getStorePointsBasePoints, getPointDetailById as getStorePointsPointDetailById} from './store-points'
import { getBasePoints as getSchoolsBasePoints, getPointDetailById as getSchoolsPointDetailById} from './schools'
import { getBasePoints as getBridgesBasePoints, getPointDetailById as getBridgesPointDetailById} from './bridges'
import { getBasePoints as getReservoirsBasePoints, getPointDetailById as getReservoirsPointDetailById} from './reservoirs'
import { getBasePoints as getSubwayStationsBasePoints, getPointDetailById as getSubwayStationsPointDetailById} from './subway-stations'
import type { ApiResponse } from '@/types/ApiResponse'
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'
import type { XianRiskSpots } from '@/types/base/XianRiskSpots'
import type { XianHospitals } from '@/types/base/XianHospitals'
import type { XianDangerousSource } from '@/types/base/XianDangerousSource'
import type { XianEmergencyShelter } from '@/types/base/XianEmergencyShelter'
import type { XianFirefighter } from '@/types/base/XianFirefighter'
import type { XianStorePoints } from '@/types/base/XianStorePoints'
import type { XianSchool } from '@/types/base/XianSchool'
import { getSm2PublicKey } from './crypto';
import {
getBasePoints as getHiddenDangerBasePoints,
getPointDetailById as getHiddenDangerPointDetailById,
} from './hidden-danger-spots';
import {
getBasePoints as getRiskBasePoints,
getPointDetailById as getRiskPointDetailById,
} from './risk-spots';
import {
getBasePoints as getHospitalsBasePoints,
getPointDetailById as getHospitalsPointDetailById,
} from './hospitals';
import {
getBasePoints as getDangerousSourceBasePoints,
getPointDetailById as getDangerousSourcePointDetailById,
} from './dangerous-source';
import {
getBasePoints as getEmergencyShelterBasePoints,
getPointDetailById as getEmergencyShelterPointDetailById,
} from './emergency-shelter';
import {
getBasePoints as getFirefighterBasePoints,
getPointDetailById as getFirefighterPointDetailById,
} from './firefighter';
import {
getBasePoints as getStorePointsBasePoints,
getPointDetailById as getStorePointsPointDetailById,
} from './store-points';
import {
getBasePoints as getSchoolsBasePoints,
getPointDetailById as getSchoolsPointDetailById,
} from './schools';
import {
getBasePoints as getBridgesBasePoints,
getPointDetailById as getBridgesPointDetailById,
} from './bridges';
import {
getBasePoints as getReservoirsBasePoints,
getPointDetailById as getReservoirsPointDetailById,
} from './reservoirs';
import {
getBasePoints as getSubwayStationsBasePoints,
getPointDetailById as getSubwayStationsPointDetailById,
} from './subway-stations';
import type { ApiResponse } from '@/types/ApiResponse';
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
import type { XianHospitals } from '@/types/base/XianHospitals';
import type { XianDangerousSource } from '@/types/base/XianDangerousSource';
import type { XianEmergencyShelter } from '@/types/base/XianEmergencyShelter';
import type { XianFirefighter } from '@/types/base/XianFirefighter';
import type { XianStorePoints } from '@/types/base/XianStorePoints';
import type { XianSchool } from '@/types/base/XianSchool';
import type { XianBridge } from '@/types/base/XianBridge.ts';
import type { XianReservoirList } from '@/types/base/XianReservoirList';
import type { XianSubwayStations } from '@/types/base/XianSubwayStations';
@@ -28,7 +60,6 @@ import type { XianSubwayStations } from '@/types/base/XianSubwayStations';
* API接口统一导出对象
*/
export const $api = {
// 加密模块
crypto: {
/**
@@ -42,17 +73,23 @@ export const $api = {
hiddenDangerSpots: {
/**
* 获取所有基础隐患点
* @param disasterType - 灾害类型
* @param disasterType - 灾害类型(landslide, debris_flow, water_logging, flash_flood)
* @returns 隐患点数据数组
*/
getBasePoints: (disasterType: DisasterType): Promise<ApiResponse<XianHiddenDangerSpots[]>> => getHiddenDangerBasePoints(disasterType),
getBasePoints: (
disasterType: string
): Promise<ApiResponse<XianHiddenDangerSpots[]>> =>
getHiddenDangerBasePoints(disasterType),
/**
* 根据id获取隐患点详情
* @param id - 隐患点id
* @returns 隐患点详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianHiddenDangerSpots>> => getHiddenDangerPointDetailById(id),
getPointDetailById: (
id: number
): Promise<ApiResponse<XianHiddenDangerSpots>> =>
getHiddenDangerPointDetailById(id),
},
// 风险点信息
@@ -61,14 +98,16 @@ export const $api = {
* 获取所有基础风险点
* @returns 风险点数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianRiskSpots[]>> => getRiskBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianRiskSpots[]>> =>
getRiskBasePoints(),
/**
* 根据id获取风险点详情
* @param id - 风险点id
* @returns 风险点详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianRiskSpots>> => getRiskPointDetailById(id),
getPointDetailById: (id: number): Promise<ApiResponse<XianRiskSpots>> =>
getRiskPointDetailById(id),
},
// 医院信息
@@ -77,14 +116,16 @@ export const $api = {
* 获取所有基础医院
* @returns 医院数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianHospitals[]>> => getHospitalsBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianHospitals[]>> =>
getHospitalsBasePoints(),
/**
* 根据id获取医院详情
* @param id - 医院id
* @returns 医院详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianHospitals>> => getHospitalsPointDetailById(id),
getPointDetailById: (id: number): Promise<ApiResponse<XianHospitals>> =>
getHospitalsPointDetailById(id),
},
// 危险源信息
@@ -93,14 +134,18 @@ export const $api = {
* 获取所有基础危险源
* @returns 危险源数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianDangerousSource[]>> => getDangerousSourceBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianDangerousSource[]>> =>
getDangerousSourceBasePoints(),
/**
* 根据id获取危险源详情
* @param id - 危险源id
* @returns 危险源详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianDangerousSource>> => getDangerousSourcePointDetailById(id),
getPointDetailById: (
id: number
): Promise<ApiResponse<XianDangerousSource>> =>
getDangerousSourcePointDetailById(id),
},
// 避难所信息
@@ -109,14 +154,18 @@ export const $api = {
* 获取所有基础避难所
* @returns 避难所数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianEmergencyShelter[]>> => getEmergencyShelterBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianEmergencyShelter[]>> =>
getEmergencyShelterBasePoints(),
/**
* 根据id获取避难所详情
* @param id - 避难所id
* @returns 避难所详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianEmergencyShelter>> => getEmergencyShelterPointDetailById(id),
getPointDetailById: (
id: number
): Promise<ApiResponse<XianEmergencyShelter>> =>
getEmergencyShelterPointDetailById(id),
},
// 消防站信息
@@ -125,14 +174,16 @@ export const $api = {
* 获取所有基础消防站
* @returns 消防站数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianFirefighter[]>> => getFirefighterBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianFirefighter[]>> =>
getFirefighterBasePoints(),
/**
* 根据id获取消防站详情
* @param id - 消防站id
* @returns 消防站详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianFirefighter>> => getFirefighterPointDetailById(id),
getPointDetailById: (id: number): Promise<ApiResponse<XianFirefighter>> =>
getFirefighterPointDetailById(id),
},
// 物资储备点信息
@@ -141,14 +192,16 @@ export const $api = {
* 获取所有基础物资储备点
* @returns 物资储备点数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianStorePoints[]>> => getStorePointsBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianStorePoints[]>> =>
getStorePointsBasePoints(),
/**
* 根据id获取物资储备点详情
* @param id - 物资储备点id
* @returns 物资储备点详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianStorePoints>> => getStorePointsPointDetailById(id),
getPointDetailById: (id: number): Promise<ApiResponse<XianStorePoints>> =>
getStorePointsPointDetailById(id),
},
// 学校信息
@@ -157,14 +210,16 @@ export const $api = {
* 获取所有基础学校
* @returns 学校数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianSchool[]>> => getSchoolsBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianSchool[]>> =>
getSchoolsBasePoints(),
/**
* 根据id获取学校详情
* @param id - 学校id
* @returns 学校详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianSchool>> => getSchoolsPointDetailById(id),
getPointDetailById: (id: number): Promise<ApiResponse<XianSchool>> =>
getSchoolsPointDetailById(id),
},
// 桥梁信息
@@ -173,14 +228,16 @@ export const $api = {
* 获取所有基础桥梁
* @returns 桥梁数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianBridge[]>> => getBridgesBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianBridge[]>> =>
getBridgesBasePoints(),
/**
* 根据id获取桥梁详情
* @param id - 桥梁id
* @returns 桥梁详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianBridge>> => getBridgesPointDetailById(id),
getPointDetailById: (id: number): Promise<ApiResponse<XianBridge>> =>
getBridgesPointDetailById(id),
},
// 水库信息
@@ -189,14 +246,16 @@ export const $api = {
* 获取所有基础水库
* @returns 水库数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianReservoirList[]>> => getReservoirsBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianReservoirList[]>> =>
getReservoirsBasePoints(),
/**
* 根据id获取水库详情
* @param id - 水库id
* @returns 水库详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianReservoirList>> => getReservoirsPointDetailById(id),
getPointDetailById: (id: number): Promise<ApiResponse<XianReservoirList>> =>
getReservoirsPointDetailById(id),
},
// 地铁站点信息
@@ -205,13 +264,17 @@ export const $api = {
* 获取所有基础地铁站点
* @returns 地铁站点数据数组
*/
getBasePoints: (): Promise<ApiResponse<XianSubwayStations[]>> => getSubwayStationsBasePoints(),
getBasePoints: (): Promise<ApiResponse<XianSubwayStations[]>> =>
getSubwayStationsBasePoints(),
/**
* 根据id获取地铁站点详情
* @param id - 地铁站点id
* @returns 地铁站点详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianSubwayStations>> => getSubwayStationsPointDetailById(id),
getPointDetailById: (
id: number
): Promise<ApiResponse<XianSubwayStations>> =>
getSubwayStationsPointDetailById(id),
},
}
};
src/api/hidden-danger-spots.ts
+2 -3
View File
@@ -1,14 +1,13 @@
import type { ApiResponse } from "@/types/ApiResponse"
import type { XianHiddenDangerSpots } from "@/types/base/XianHiddenDangerSpots"
import type { DisasterType } from "@/types/common/DisasterType.ts"
import httpInstance from "@/utils/request/http"
/**
* 获取隐患点基础数据
* @param disasterType - 灾害类型
* @param disasterType - 灾害类型（landslide, debris_flow, water_logging, flash_flood）
* @returns 隐患点数据数组
*/
export const getBasePoints = (disasterType: DisasterType): Promise<ApiResponse<XianHiddenDangerSpots[]>> => {
export const getBasePoints = (disasterType: string): Promise<ApiResponse<XianHiddenDangerSpots[]>> => {
return httpInstance.get('/hidden-danger-spots/base-points', {
params: {
disasterType
src/component/rain-earthquake/BasicComponent.vue
+58 -10
View File
@@ -4,14 +4,59 @@
<!-- 地图组件 -->
<MapComponent />
<!-- 隐患点组件 -->
<HiddenPointComponent
:disaster-type="props.disasterType"
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().mapLayers.hiddenDangerPointShow.loading
"
/>
<!-- 暴雨场景隐患点组件 -->
<template v-if="props.disasterType === DisasterType.RAINSTORM">
<!-- 滑坡隐患点 -->
<LandslideComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().poiLayers.showLandslideHiddenPoint.loading
"
/>
<!-- 泥石流隐患点 -->
<DebrisFlowComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().poiLayers.showDebrisFlowHiddenPoint.loading
"
/>
<!-- 内涝隐患点 -->
<WaterLoggingComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().poiLayers.showWaterLoggingHiddenPoint.loading
"
/>
<!-- 山洪隐患点 -->
<FlashFloodComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().poiLayers.showFlashFloodHiddenPoint.loading
"
/>
</template>
<!-- 地震场景隐患点组件 -->
<template v-else-if="props.disasterType === DisasterType.EARTHQUAKE">
<!-- 滑坡隐患点 -->
<LandslideComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().poiLayers.showLandslideHiddenPoint.loading
"
/>
<!-- 泥石流隐患点 -->
<DebrisFlowComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().poiLayers.showDebrisFlowHiddenPoint.loading
"
/>
</template>
<!-- 风险点组件 -->
<RiskPointComponent
@@ -25,9 +70,12 @@
<script setup lang="ts">
import MapComponent from '@/component/map/MapComponent.vue';
import type { DisasterType } from '@/types/common/DisasterType.ts';
import HiddenPointComponent from '@/component/rain-earthquake/basic/HiddenPointComponent.vue';
import { DisasterType } from '@/types/common/DisasterType.ts';
import RiskPointComponent from '@/component/rain-earthquake/basic/RiskPointComponent.vue';
import LandslideComponent from '@/component/rain-earthquake/basic/LandslideComponent.vue';
import DebrisFlowComponent from '@/component/rain-earthquake/basic/DebrisFlowComponent.vue';
import WaterLoggingComponent from '@/component/rain-earthquake/basic/WaterLoggingComponent.vue';
import FlashFloodComponent from '@/component/rain-earthquake/basic/FlashFloodComponent.vue';
import { useStatusStore } from '@/stores/useStatusStore';
// 获取父组件传递德数据
src/component/rain-earthquake/basic/DebrisFlowComponent.vue
+118
View File
@@ -0,0 +1,118 @@
<!-- 泥石流隐患点组件 -->
<template>
<div>
<!-- 加载泥石流隐患点 -->
<LoadingPoints
v-if="useStatusStore().appLoadingCompleted && debrisFlowPoints.length > 0"
:base-points="debrisFlowPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.debrisFlowHiddenPointId"
:is-default="false"
:loading-resource-field="LoadingResource.DEBRIS_FLOW_HIDDEN_POINT"
/>
<!-- 显示信息框 -->
<InformationBox
:data="debrisFlowPointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().debrisFlowHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().debrisFlowHiddenPoint.id"
/>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { $api } from '@/api/api.ts';
import type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/LoadingPoints.vue';
import config from '@/config/config.json';
import InformationBox from '@/component/common/InformationBox.vue';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
import { PointType, HiddenDangerPointTypeMap } from '@/types/common/DisasterType.ts';
const debrisFlowPoints = ref<Point[]>([]);
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const debrisFlowPointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 获取钩子函数
const { field, getDisasterIcon } = useHiddenPoint();
// 加载泥石流隐患点数据
$api.hiddenDangerSpots.getBasePoints(HiddenDangerPointTypeMap[PointType.DEBRIS_FLOW]).then((res) => {
debrisFlowPoints.value = res.data;
});
// 监听id变化
watch(
() => useLoadingInformationStore().debrisFlowHiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取泥石流隐患点数据
const clickObject = useLoadingInformationStore().clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
return;
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
useLoadingInformationStore().debrisFlowHiddenPoint.id
);
// 更新数据
debrisFlowPointDetail.value = res.data;
informationBoxTitle.value = res.data.disasterName || '泥石流隐患点信息';
try {
// 将坐标转换为偏移量
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
clickObject.primitive.position
);
offsetX.value = screenPos.x;
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().debrisFlowHiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
}
);
// 监听显示隐藏
watch(
() => useStatusStore().poiLayers.showDebrisFlowHiddenPoint.show,
(newValue: boolean) => {
if (newValue) {
// 显示泥石流隐患点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.DEBRIS_FLOW_HIDDEN_POINT)
.ids
);
} else {
// 隐藏泥石流隐患点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.DEBRIS_FLOW_HIDDEN_POINT)
.ids
);
}
}
);
</script>
<style scoped></style>
src/component/rain-earthquake/basic/HiddenPointComponent.vue → src/component/rain-earthquake/basic/FlashFloodComponent.vue
+34 -40
View File
@@ -1,73 +1,68 @@
<!-- 隐患点组件 -->
<!-- 山洪隐患点组件 -->
<template>
<div>
<!-- 加载基础隐患点 -->
<!-- 加载山洪隐患点 -->
<LoadingPoints
v-if="useStatusStore().appLoadingCompleted && baseHiddenPoints.length > 0"
:base-points="baseHiddenPoints"
v-if="useStatusStore().appLoadingCompleted && flashFloodPoints.length > 0"
:base-points="flashFloodPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.hiddenDangerPointId"
:is-default="true"
:loading-resource-field="LoadingResource.HIDDEN_DANGER_POINT"
:prefix="config.prefix.flashFloodHiddenPointId"
:is-default="false"
:loading-resource-field="LoadingResource.FLASH_FLOOD_HIDDEN_POINT"
/>
<!-- 显示信息框 -->
<InformationBox
:data="hiddenDangerPointDetail as Record<string, any>"
:data="flashFloodPointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().hiddenPoint.loading"
v-if="useLoadingInformationStore().flashFloodHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().hiddenPoint.id"
:key="useLoadingInformationStore().flashFloodHiddenPoint.id"
/>
</div>
</template>
<script setup lang="ts">
import { DisasterType } from '@/types/common/DisasterType.ts';
import { ref, watch } from 'vue';
import { $api } from '@/api/api.ts';
import type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/LoadingPoints.vue';
import config from '@/config/config.json';
import InformationBox from '@/component/common/InformationBox.vue';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
import { PointType, HiddenDangerPointTypeMap } from '@/types/common/DisasterType.ts';
// 接收父组件传递的参数
const props = defineProps<{
disasterType: DisasterType;
}>();
const flashFloodPoints = ref<Point[]>([]);
// 基本隐患点数据
const baseHiddenPoints = ref<Point[]>([]);
// 信息框相关字段
const informationBoxTitle = ref('');
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const hiddenDangerPointDetail = ref<Point>();
const flashFloodPointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 获取钩子函数
const { field, getDisasterIcon } = useHiddenPoint();
$api.hiddenDangerSpots.getBasePoints(props.disasterType).then((res) => {
baseHiddenPoints.value = res.data;
// 加载山洪隐患点数据
$api.hiddenDangerSpots.getBasePoints(HiddenDangerPointTypeMap[PointType.FLASH_FLOOD]).then((res) => {
flashFloodPoints.value = res.data;
});
// 监听id变化
watch(
() => useLoadingInformationStore().hiddenPoint.id,
() => useLoadingInformationStore().flashFloodHiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取隐患点数据
// 获取山洪隐患点数据
const clickObject = useLoadingInformationStore().clickObject;
if (!clickObject || !clickObject.primitive) {
@@ -76,12 +71,12 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
useLoadingInformationStore().hiddenPoint.id
useLoadingInformationStore().flashFloodHiddenPoint.id
);
// 更新数据
hiddenDangerPointDetail.value = res.data;
informationBoxTitle.value = res.data.disasterType + '隐患点';
flashFloodPointDetail.value = res.data;
informationBoxTitle.value = res.data.disasterName || '山洪隐患点信息';
try {
// 将坐标转换为偏移量
@@ -92,7 +87,7 @@
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().hiddenPoint.loading = true;
useLoadingInformationStore().flashFloodHiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
@@ -101,24 +96,23 @@
// 监听显示隐藏
watch(
() => useStatusStore().mapLayers.hiddenDangerPointShow.show,
() => useStatusStore().poiLayers.showFlashFloodHiddenPoint.show,
(newValue: boolean) => {
if (newValue) {
// 显示隐患点
// 显示山洪隐患点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(
LoadingResource.HIDDEN_DANGER_POINT
).ids
useLoadingResourceStore().getLoadingResource(LoadingResource.FLASH_FLOOD_HIDDEN_POINT)
.ids
);
} else {
// 隐藏隐患点
// 隐藏山洪隐患点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(
LoadingResource.HIDDEN_DANGER_POINT
).ids
useLoadingResourceStore().getLoadingResource(LoadingResource.FLASH_FLOOD_HIDDEN_POINT)
.ids
);
}
}
);
</script>
<style scoped></style>
src/component/rain-earthquake/basic/LandslideComponent.vue
+118
View File
@@ -0,0 +1,118 @@
<!-- 滑坡隐患点组件 -->
<template>
<div>
<!-- 加载滑坡隐患点 -->
<LoadingPoints
v-if="useStatusStore().appLoadingCompleted && landslidePoints.length > 0"
:base-points="landslidePoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.landslideHiddenPointId"
:is-default="false"
:loading-resource-field="LoadingResource.LANDSLIDE_HIDDEN_POINT"
/>
<!-- 显示信息框 -->
<InformationBox
:data="landslidePointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().landslideHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().landslideHiddenPoint.id"
/>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { $api } from '@/api/api.ts';
import type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/LoadingPoints.vue';
import config from '@/config/config.json';
import InformationBox from '@/component/common/InformationBox.vue';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
import { PointType, HiddenDangerPointTypeMap } from '@/types/common/DisasterType.ts';
const landslidePoints = ref<Point[]>([]);
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const landslidePointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 获取钩子函数
const { field, getDisasterIcon } = useHiddenPoint();
// 加载滑坡隐患点数据
$api.hiddenDangerSpots.getBasePoints(HiddenDangerPointTypeMap[PointType.LANDSLIDE]).then((res) => {
landslidePoints.value = res.data;
});
// 监听id变化
watch(
() => useLoadingInformationStore().landslideHiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取滑坡隐患点数据
const clickObject = useLoadingInformationStore().clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
return;
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
useLoadingInformationStore().landslideHiddenPoint.id
);
// 更新数据
landslidePointDetail.value = res.data;
informationBoxTitle.value = res.data.disasterName || '滑坡隐患点信息';
try {
// 将坐标转换为偏移量
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
clickObject.primitive.position
);
offsetX.value = screenPos.x;
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().landslideHiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
}
);
// 监听显示隐藏
watch(
() => useStatusStore().poiLayers.showLandslideHiddenPoint.show,
(newValue: boolean) => {
if (newValue) {
// 显示滑坡隐患点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.LANDSLIDE_HIDDEN_POINT)
.ids
);
} else {
// 隐藏滑坡隐患点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.LANDSLIDE_HIDDEN_POINT)
.ids
);
}
}
);
</script>
<style scoped></style>
src/component/rain-earthquake/basic/WaterLoggingComponent.vue
+118
View File
@@ -0,0 +1,118 @@
<!-- 内涝隐患点组件 -->
<template>
<div>
<!-- 加载内涝隐患点 -->
<LoadingPoints
v-if="useStatusStore().appLoadingCompleted && waterLoggingPoints.length > 0"
:base-points="waterLoggingPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.waterLoggingHiddenPointId"
:is-default="false"
:loading-resource-field="LoadingResource.WATER_LOGGING_HIDDEN_POINT"
/>
<!-- 显示信息框 -->
<InformationBox
:data="waterLoggingPointDetail as Record<string, any>"
:field="field"
v-if="useLoadingInformationStore().waterLoggingHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="useLoadingInformationStore().waterLoggingHiddenPoint.id"
/>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { $api } from '@/api/api.ts';
import type { Point } from '@/types/base/Point.ts';
import LoadingPoints from '@/component/common/LoadingPoints.vue';
import config from '@/config/config.json';
import InformationBox from '@/component/common/InformationBox.vue';
import { useStatusStore } from '@/stores/useStatusStore.ts';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
import { PointType, HiddenDangerPointTypeMap } from '@/types/common/DisasterType.ts';
const waterLoggingPoints = ref<Point[]>([]);
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const waterLoggingPointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 获取钩子函数
const { field, getDisasterIcon } = useHiddenPoint();
// 加载内涝隐患点数据
$api.hiddenDangerSpots.getBasePoints(HiddenDangerPointTypeMap[PointType.WATER_LOGGING]).then((res) => {
waterLoggingPoints.value = res.data;
});
// 监听id变化
watch(
() => useLoadingInformationStore().waterLoggingHiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取内涝隐患点数据
const clickObject = useLoadingInformationStore().clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
return;
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
useLoadingInformationStore().waterLoggingHiddenPoint.id
);
// 更新数据
waterLoggingPointDetail.value = res.data;
informationBoxTitle.value = res.data.disasterName || '内涝隐患点信息';
try {
// 将坐标转换为偏移量
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
clickObject.primitive.position
);
offsetX.value = screenPos.x;
offsetY.value = screenPos.y;
// 显示新的信息框
useLoadingInformationStore().waterLoggingHiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
}
);
// 监听显示隐藏
watch(
() => useStatusStore().poiLayers.showWaterLoggingHiddenPoint.show,
(newValue: boolean) => {
if (newValue) {
// 显示内涝隐患点
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.WATER_LOGGING_HIDDEN_POINT)
.ids
);
} else {
// 隐藏内涝隐患点
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.WATER_LOGGING_HIDDEN_POINT)
.ids
);
}
}
);
</script>
<style scoped></style>
src/config/config.json
+4 -1
View File
@@ -34,7 +34,10 @@
"min": 1000
},
"prefix": {
"hiddenDangerPointId": "hidden-danger-point-",
"landslideHiddenPointId": "landslide-hidden-point-",
"debrisFlowHiddenPointId": "debris-flow-hidden-point-",
"waterLoggingHiddenPointId": "water-logging-hidden-point-",
"flashFloodHiddenPointId": "flash-flood-hidden-point-",
"riskPointId": "risk-point-",
"hospitalPointId": "hospital-point-",
"dangerousSourcePointId": "dangerous-source-point-",
src/hooks/earthquake/useEarthquakeDisasterChain.ts
+15 -3
View File
@@ -178,10 +178,22 @@ export const useEarthquakeDisasterChain = () => {
return [
{
name: '显示隐患点',
name: '显示滑坡隐患点',
statusStore: statusStore.poiLayers,
statusKey: 'showLandslideHiddenPoint' as const,
callback: layerControl.clickLandslideHiddenPoint,
},
{
name: '显示泥石流隐患点',
statusStore: statusStore.poiLayers,
statusKey: 'showDebrisFlowHiddenPoint' as const,
callback: layerControl.clickDebrisFlowHiddenPoint,
},
{
name: '显示风险点',
statusStore: statusStore.mapLayers,
statusKey: 'hiddenDangerPointShow' as const,
callback: layerControl.clickHiddenDangerPoint,
statusKey: 'riskPointShow' as const,
callback: layerControl.clickRiskPoint,
},
{
name: '显示医院',
src/hooks/map/useMap.ts
+22 -4
View File
@@ -23,7 +23,10 @@ export const useMap = () => {
// 当id改变时候，重置状态
if (
useLoadingInformationStore().hiddenPoint.id !== id &&
useLoadingInformationStore().landslideHiddenPoint.id !== id &&
useLoadingInformationStore().debrisFlowHiddenPoint.id !== id &&
useLoadingInformationStore().waterLoggingHiddenPoint.id !== id &&
useLoadingInformationStore().flashFloodHiddenPoint.id !== id &&
useLoadingInformationStore().riskPoint.id !== id &&
useLoadingInformationStore().hospital.id !== id
) {
@@ -35,9 +38,24 @@ export const useMap = () => {
useLoadingInformationStore().clickObject.primitive =
pickedObject.primitive;
// 隐患点
if (pickedObject.id.startsWith(config.prefix.hiddenDangerPointId)) {
useLoadingInformationStore().hiddenPoint.id = id;
// 滑坡隐患点
if (pickedObject.id.startsWith(config.prefix.landslideHiddenPointId)) {
useLoadingInformationStore().landslideHiddenPoint.id = id;
}
// 泥石流隐患点
else if (pickedObject.id.startsWith(config.prefix.debrisFlowHiddenPointId)) {
useLoadingInformationStore().debrisFlowHiddenPoint.id = id;
}
// 内涝隐患点
else if (pickedObject.id.startsWith(config.prefix.waterLoggingHiddenPointId)) {
useLoadingInformationStore().waterLoggingHiddenPoint.id = id;
}
// 山洪隐患点
else if (pickedObject.id.startsWith(config.prefix.flashFloodHiddenPointId)) {
useLoadingInformationStore().flashFloodHiddenPoint.id = id;
}
// 风险点
src/hooks/rain-earthquake/useHiddenPoint.ts
+6 -1
View File
@@ -24,17 +24,22 @@ export const useHiddenPoint = () => {
/**
* 根据灾害类型获取对应图标
* @param disasterType - 灾害类型
* @param disasterType - 灾害类型（支持中英文）
* @returns 图标路径
*/
function getDisasterIcon(disasterType?: string): string {
// 支持英文和中文两种格式
switch (disasterType) {
case 'landslide':
case '滑坡':
return landslideIcon;
case 'debris_flow':
case '泥石流':
return debrisFlowIcon;
case 'water_logging':
case '内涝':
return waterLoggingIcon;
case 'flash_flood':
case '山洪':
return flashFloodIcon;
default:
src/hooks/rain-earthquake/useLayerControl.ts
+40 -10
View File
@@ -4,15 +4,6 @@ import { useStatusStore } from '@/stores/useStatusStore.ts';
* 控制面板显示隐藏逻辑
*/
export const useLayerControl = () => {
/**
* 点击显示隐藏隐患点
* @param status - 显示隐藏状态
*/
const clickHiddenDangerPoint = (status: unknown) => {
// 改变风险点显示状态
useStatusStore().mapLayers.riskPointShow.show = status as boolean;
};
/**
* 点击显示医院
*/
@@ -116,8 +107,43 @@ export const useLayerControl = () => {
useStatusStore().poiLayers.showSubwayStation.loading = true;
};
/**
* 显示滑坡隐患点
*/
const clickLandslideHiddenPoint = () => {
useStatusStore().poiLayers.showLandslideHiddenPoint.loading = true;
};
/**
* 显示泥石流隐患点
*/
const clickDebrisFlowHiddenPoint = () => {
useStatusStore().poiLayers.showDebrisFlowHiddenPoint.loading = true;
};
/**
* 显示内涝隐患点
*/
const clickWaterLoggingHiddenPoint = () => {
useStatusStore().poiLayers.showWaterLoggingHiddenPoint.loading = true;
};
/**
* 显示山洪隐患点
*/
const clickFlashFloodHiddenPoint = () => {
useStatusStore().poiLayers.showFlashFloodHiddenPoint.loading = true;
};
/**
* 显示风险点
*/
const clickRiskPoint = () => {
useStatusStore().mapLayers.riskPointShow.loading = true;
};
return {
clickHiddenDangerPoint,
clickRiskPoint,
clickHospital,
clickDangerousSource,
clickEmergencyShelter,
@@ -132,5 +158,9 @@ export const useLayerControl = () => {
clickBridge,
clickReservoir,
clickSubwayStation,
clickLandslideHiddenPoint,
clickDebrisFlowHiddenPoint,
clickWaterLoggingHiddenPoint,
clickFlashFloodHiddenPoint,
};
};
src/hooks/rainstorm/useRainDisasterChain.ts
+30
View File
@@ -206,6 +206,36 @@ export const useRainDisasterChain = () => {
const layerControl = useLayerControl();
return [
{
name: '显示滑坡隐患点',
statusStore: statusStore.poiLayers,
statusKey: 'showLandslideHiddenPoint' as const,
callback: layerControl.clickLandslideHiddenPoint,
},
{
name: '显示泥石流隐患点',
statusStore: statusStore.poiLayers,
statusKey: 'showDebrisFlowHiddenPoint' as const,
callback: layerControl.clickDebrisFlowHiddenPoint,
},
{
name: '显示内涝隐患点',
statusStore: statusStore.poiLayers,
statusKey: 'showWaterLoggingHiddenPoint' as const,
callback: layerControl.clickWaterLoggingHiddenPoint,
},
{
name: '显示山洪隐患点',
statusStore: statusStore.poiLayers,
statusKey: 'showFlashFloodHiddenPoint' as const,
callback: layerControl.clickFlashFloodHiddenPoint,
},
{
name: '显示风险点',
statusStore: statusStore.mapLayers,
statusKey: 'riskPointShow' as const,
callback: layerControl.clickRiskPoint,
},
{
name: '显示医院',
statusStore: statusStore.poiLayers,
src/stores/useLoadingInformation.ts
+52 -15
View File
@@ -18,16 +18,6 @@ export const useLoadingInformationStore = defineStore(
// ============================ 隐患点加载状态 ================================
/**
* 隐患点加载信息状态
*/
const hiddenPoint = reactive({
/** 加载状态 */
loading: false,
/** 隐患点ID */
id: -1,
});
// ============================ 风险点加载状态 ================================
/**
@@ -116,6 +106,38 @@ export const useLoadingInformationStore = defineStore(
id: -1,
});
// ============================== 滑坡隐患点状态 ================================
const landslideHiddenPoint = reactive({
/** 加载状态 */
loading: false,
/** 滑坡隐患点ID */
id: -1,
});
// ============================== 泥石流隐患点状态 ================================
const debrisFlowHiddenPoint = reactive({
/** 加载状态 */
loading: false,
/** 泥石流隐患点ID */
id: -1,
});
// ============================== 内涝隐患点状态 ================================
const waterLoggingHiddenPoint = reactive({
/** 加载状态 */
loading: false,
/** 内涝隐患点ID */
id: -1,
});
// ============================== 山洪隐患点状态 ================================
const flashFloodHiddenPoint = reactive({
/** 加载状态 */
loading: false,
/** 山洪隐患点ID */
id: -1,
});
/**
* 重置所有状态
*/
@@ -124,10 +146,6 @@ export const useLoadingInformationStore = defineStore(
clickObject.id = '';
clickObject.primitive = null;
// 隐患点状态重置
hiddenPoint.loading = false;
hiddenPoint.id = -1;
// 风险点状态重置
riskPoint.loading = false;
riskPoint.id = -1;
@@ -167,11 +185,26 @@ export const useLoadingInformationStore = defineStore(
// 地铁站点状态重置
subwayStation.loading = false;
subwayStation.id = -1;
// 滑坡隐患点状态重置
landslideHiddenPoint.loading = false;
landslideHiddenPoint.id = -1;
// 泥石流隐患点状态重置
debrisFlowHiddenPoint.loading = false;
debrisFlowHiddenPoint.id = -1;
// 内涝隐患点状态重置
waterLoggingHiddenPoint.loading = false;
waterLoggingHiddenPoint.id = -1;
// 山洪隐患点状态重置
flashFloodHiddenPoint.loading = false;
flashFloodHiddenPoint.id = -1;
};
return {
clickObject,
hiddenPoint,
riskPoint,
hospital,
dangerousSource,
@@ -182,6 +215,10 @@ export const useLoadingInformationStore = defineStore(
bridge,
reservoir,
subwayStation,
landslideHiddenPoint,
debrisFlowHiddenPoint,
waterLoggingHiddenPoint,
flashFloodHiddenPoint,
resetStatue,
};
src/stores/useStatusStore.ts
+36 -9
View File
@@ -54,11 +54,6 @@ export const useStatusStore = defineStore('status', () => {
show: true,
loading: true,
},
/** 隐患点显示状态 */
hiddenDangerPointShow: {
show: true,
loading: true,
},
/** 风险点显示状态 */
riskPointShow: {
show: true,
@@ -115,6 +110,26 @@ export const useStatusStore = defineStore('status', () => {
show: false,
loading: false,
},
/** 显示滑坡隐患点 */
showLandslideHiddenPoint: {
show: true,
loading: true,
},
/** 显示泥石流隐患点 */
showDebrisFlowHiddenPoint: {
show: true,
loading: true,
},
/** 显示内涝隐患点 */
showWaterLoggingHiddenPoint: {
show: true,
loading: true,
},
/** 显示山洪隐患点 */
showFlashFloodHiddenPoint: {
show: true,
loading: true,
},
});
/**
@@ -207,10 +222,6 @@ export const useStatusStore = defineStore('status', () => {
show: true,
loading: true,
};
mapLayers.hiddenDangerPointShow = {
show: true,
loading: true,
};
mapLayers.riskPointShow = {
show: true,
loading: true,
@@ -249,6 +260,22 @@ export const useStatusStore = defineStore('status', () => {
show: false,
loading: false,
};
poiLayers.showLandslideHiddenPoint = {
show: true,
loading: true,
};
poiLayers.showDebrisFlowHiddenPoint = {
show: true,
loading: true,
};
poiLayers.showWaterLoggingHiddenPoint = {
show: true,
loading: true,
};
poiLayers.showFlashFloodHiddenPoint = {
show: true,
loading: true,
};
// 基础设施图层显示状态重置
infrastructureLayers.showNetworkSystem = {
src/types/common/DisasterType.ts
+12 -1
View File
@@ -9,7 +9,7 @@ export enum DisasterType {
}
/**
* 点型枚举
* 点型枚举（用于UI显示）
*/
export enum PointType {
/** 滑坡 */
@@ -23,3 +23,14 @@ export enum PointType {
/** 风险区 */
RISK_AREA = '风险区',
}
/**
* 隐患点类型映射（中文 -> 后端英文参数）
*/
export const HiddenDangerPointTypeMap: Record<PointType, string> = {
[PointType.LANDSLIDE]: 'landslide',
[PointType.DEBRIS_FLOW]: 'debris_flow',
[PointType.WATER_LOGGING]: 'water_logging',
[PointType.FLASH_FLOOD]: 'flash_flood',
[PointType.RISK_AREA]: 'risk_area',
};
src/types/common/LoadingResourceType.ts
+19 -5
View File
@@ -1,9 +1,4 @@
export enum LoadingResource {
/**
* 隐患点
*/
HIDDEN_DANGER_POINT = 'HIDDEN_DANGER_POINT',
/**
* 风险点
*/
@@ -47,5 +42,24 @@ export enum LoadingResource {
*/
SUBWAY_STATION = 'SUBWAY_STATION',
/**
* 滑坡隐患点
*/
LANDSLIDE_HIDDEN_POINT = 'LANDSLIDE_HIDDEN_POINT',
/**
* 泥石流隐患点
*/
DEBRIS_FLOW_HIDDEN_POINT = 'DEBRIS_FLOW_HIDDEN_POINT',
/**
* 内涝隐患点
*/
WATER_LOGGING_HIDDEN_POINT = 'WATER_LOGGING_HIDDEN_POINT',
/**
* 山洪隐患点
*/
FLASH_FLOOD_HIDDEN_POINT = 'FLASH_FLOOD_HIDDEN_POINT',
}