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/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>