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

Merge remote-tracking branch 'origin/main' into zxy

Browse Source
This commit is contained in:
zxyroyy
2026-06-17 22:07:09 +08:00
parent bf0e8f2e26 3c87fcb2a9
commit a7af8bfa8a
45 changed files with 677 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+1 -1
View File
@@ -5,7 +5,7 @@ VITE_BACKEND_BASE_URL=http://localhost:8081
START_PORT=81
# geoserver地址
VITE_GEOSERVER_BASE_URL=http://47.92.216.173:4019/geoserver/xian
VITE_GEOSERVER_BASE_URL=http://47.92.216.173:4020/geoserver/xian
# WebSocket地址
VITE_WEBSOCKET_URL=http://localhost:8081/websocket
src/api/api.ts
+25 -4
View File
@@ -55,6 +55,9 @@ 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';
import { modelDeduction as rainfallModelDeduction } from './rainfall';
import type { RainPredictResponse } from '@/types/rainstorm/RainPredictResponse';
import type { RainPredictRequest } from '@/types/rainstorm/RainPredictRequest';
/**
* API接口统一导出对象
@@ -84,12 +87,14 @@ export const $api = {
/**
* 根据id获取隐患点详情
* @param id - 隐患点id
* @param simulationId - 模拟id
* @returns 隐患点详情
*/
getPointDetailById: (
id: number
id: number,
simulationId: number
): Promise<ApiResponse<XianHiddenDangerSpots>> =>
getHiddenDangerPointDetailById(id),
getHiddenDangerPointDetailById(id, simulationId),
},
// 风险点信息
@@ -104,10 +109,14 @@ export const $api = {
/**
* 根据id获取风险点详情
* @param id - 风险点id
* @param simulationId - 模拟id
* @returns 风险点详情
*/
getPointDetailById: (id: number): Promise<ApiResponse<XianRiskSpots>> =>
getRiskPointDetailById(id),
getPointDetailById: (
id: number,
simulationId: number
): Promise<ApiResponse<XianRiskSpots>> =>
getRiskPointDetailById(id, simulationId),
},
// 医院信息
@@ -277,4 +286,16 @@ export const $api = {
): Promise<ApiResponse<XianSubwayStations>> =>
getSubwayStationsPointDetailById(id),
},
// 暴雨推演
rainfall: {
/**
* 进行模型推演
* @param req 请求体
* @returns 推演点的概率
*/
modelDeduction: (
req: RainPredictRequest
): Promise<ApiResponse<RainPredictResponse>> => rainfallModelDeduction(req),
},
};
src/api/hidden-danger-spots.ts
+21 -13
View File
@@ -1,25 +1,33 @@
import type { ApiResponse } from "@/types/ApiResponse"
import type { XianHiddenDangerSpots } from "@/types/base/XianHiddenDangerSpots"
import httpInstance from "@/utils/request/http"
import type { ApiResponse } from '@/types/ApiResponse';
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
import httpInstance from '@/utils/request/http';
/**
* 获取隐患点基础数据
* @param disasterType - 灾害类型（landslide, debris_flow, water_logging, flash_flood）
* @returns 隐患点数据数组
*/
export const getBasePoints = (disasterType: string): Promise<ApiResponse<XianHiddenDangerSpots[]>> => {
return httpInstance.get('/hidden-danger-spots/base-points', {
params: {
disasterType
}
})
}
export const getBasePoints = (
disasterType: string
): Promise<ApiResponse<XianHiddenDangerSpots[]>> => {
return httpInstance.get('/hidden-danger-spots/base-points', {
params: {
disasterType,
},
});
};
/**
* 根据id获取隐患点详情
* @param id - 隐患点id
* @param simulationId - 模拟id
* @returns 隐患点详情
*/
export const getPointDetailById = (id: number): Promise<ApiResponse<XianHiddenDangerSpots>> => {
return httpInstance.get(`/hidden-danger-spots/point-detail/${id}`)
}
export const getPointDetailById = (
id: number,
simulationId: number
): Promise<ApiResponse<XianHiddenDangerSpots>> => {
return httpInstance.get(
`/hidden-danger-spots/point-detail/${id}/${simulationId}`
);
};
src/api/rainfall.ts
+15
View File
@@ -0,0 +1,15 @@
import type { ApiResponse } from '@/types/ApiResponse';
import type { RainPredictRequest } from '@/types/rainstorm/RainPredictRequest';
import type { RainPredictResponse } from '@/types/rainstorm/RainPredictResponse';
import httpInstance from '@/utils/request/http';
/**
* 进行模型推演
* @param req 请求体
* @returns 推演点的概率
*/
export const modelDeduction = (
req: RainPredictRequest
): Promise<ApiResponse<RainPredictResponse>> => {
return httpInstance.post('/algorithm-api/rainfall/predict', req);
};
src/api/risk-spots.ts
+12 -8
View File
@@ -1,20 +1,24 @@
import type { ApiResponse } from "@/types/ApiResponse"
import type { XianRiskSpots } from "@/types/base/XianRiskSpots"
import httpInstance from "@/utils/request/http"
import type { ApiResponse } from '@/types/ApiResponse';
import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
import httpInstance from '@/utils/request/http';
/**
* 获取风险点基础数据
* @returns 风险点数据数组
*/
export const getBasePoints = (): Promise<ApiResponse<XianRiskSpots[]>> => {
return httpInstance.get('/risk-spots/base-points')
}
return httpInstance.get('/risk-spots/base-points');
};
/**
* 根据id获取风险点详情
* @param id - 风险点id
* @param simulationId - 模拟id
* @returns 风险点详情
*/
export const getPointDetailById = (id: number): Promise<ApiResponse<XianRiskSpots>> => {
return httpInstance.get(`/risk-spots/point-detail/${id}`)
}
export const getPointDetailById = (
id: number,
simulationId: number
): Promise<ApiResponse<XianRiskSpots>> => {
return httpInstance.get(`/risk-spots/point-detail/${id}/${simulationId}`);
};
src/assets/images/icon/collapse.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

src/assets/index.ts
+1
View File
@@ -2,6 +2,7 @@
// 图标
export { default as landslideIcon } from '@/assets/images/icon/landslide.png';
export { default as collapseIcon } from '@/assets/images/icon/collapse.png';
export { default as waterLoggingIcon } from '@/assets/images/icon/waterlogging.png';
export { default as debrisFlowIcon } from '@/assets/images/icon/debris-flow.png';
export { default as flashFloodIcon } from '@/assets/images/icon/flash-flood.png';
src/component/common/InformationBox.vue
+14 -4
View File
@@ -16,7 +16,11 @@
</header>
<div class="content">
<table class="table">
<tr v-for="(tableData, index) in tableDatas" :key="index">
<tr
v-for="(tableData, index) in tableDatas"
:key="index"
:style="tableData.styles || {}"
>
<td class="label">{{ tableData.title }}</td>
<td>{{ tableData.content }}</td>
</tr>
@@ -33,6 +37,7 @@
title: string;
data: Record<string, string>;
field: Record<string, string>;
style?: Record<string, Record<string, string>>;
offsetX: number;
offsetY: number;
}>();
@@ -43,7 +48,8 @@
const newOffsetX = ref(props.offsetX);
const newOffsetY = ref(props.offsetY);
const tableDatas: Ref<{ title: string; content: string }[]> = ref([]);
const tableDatas: Ref<{ title: string; content: string; styles?: Record<string, string> }[]> =
ref([]);
onMounted(() => {
// 判断是否超出屏幕，超出就重新定位
@@ -58,10 +64,14 @@
Object.entries(props.data).forEach(([key, value]) => {
// 判断key是不是存在field中，存在就添加到表格数据，不存在则不添加
if (Object.hasOwn(props.field, key) && value) {
tableDatas.value.push({
const rowData: { title: string; content: string; styles?: Record<string, string> } = {
title: props.field[key],
content: value,
});
};
if (props.style && Object.hasOwn(props.style, key)) {
rowData.styles = props.style[key];
}
tableDatas.value.push(rowData);
}
});
});
src/component/map/AdministrativeDivision.vue
+3 -1
View File
@@ -40,7 +40,9 @@
polygonStyle: {
fill: true,
fillColor: areasColor[index].withAlpha(areaTransparency),
outline: false,
outline: true,
outlineColor: Color.WHITE,
outlineWidth: 3,
},
},
}));
src/component/rain-earthquake/BasicComponent.vue
+17
View File
@@ -14,6 +14,14 @@
"
/>
<!-- 崩塌隐患点 -->
<CollapseComponent
v-if="
statusStore.appLoadingCompleted &&
statusStore.poiLayers.showCollapseHiddenPoint.loading
"
/>
<!-- 泥石流隐患点 -->
<DebrisFlowComponent
v-if="
@@ -57,6 +65,14 @@
"
/>
<!-- 崩塌隐患点 -->
<CollapseComponent
v-if="
statusStore.appLoadingCompleted &&
statusStore.poiLayers.showCollapseHiddenPoint.loading
"
/>
<!-- 泥石流隐患点 -->
<DebrisFlowComponent
v-if="
@@ -81,6 +97,7 @@
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 CollapseComponent from '@/component/rain-earthquake/basic/CollapseComponent.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';
src/component/rain-earthquake/basic/CollapseComponent.vue
+132
View File
@@ -0,0 +1,132 @@
<!-- 崩塌隐患点组件 -->
<template>
<div>
<!-- 加载崩塌隐患点 -->
<LoadingPoints
v-if="statusStore.appLoadingCompleted && collapsePoints.length > 0"
:base-points="collapsePoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.collapseHiddenPointId"
:is-default="true"
:loading-resource-field="LoadingResource.COLLAPSE_HIDDEN_POINT"
/>
<!-- 显示信息框 -->
<InformationBox
:data="collapsePointDetail as Record<string, any>"
:field="field"
:style="style"
v-if="loadingInformationStore.collapseHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
:offset-y="offsetY"
:key="loadingInformationStore.collapseHiddenPoint.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';
import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
const collapsePoints = ref<Point[]>([]);
const statusStore = useStatusStore();
const loadingInformationStore = useLoadingInformationStore();
const loadingResourceStore = useLoadingResourceStore();
const simulationIdStore = useSimulationIdStore();
const { field, style, getDisasterIcon } = useHiddenPoint();
// 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const collapsePointDetail = ref<Point>();
const informationBoxTitle = ref('');
// 加载崩塌隐患点数据
$api.hiddenDangerSpots
.getBasePoints(HiddenDangerPointTypeMap[PointType.COLLAPSE])
.then((res) => {
collapsePoints.value = res.data;
});
// 监听id变化
watch(
() => loadingInformationStore.collapseHiddenPoint.id,
async (newId: number) => {
if (newId === -1) {
return;
}
// 获取崩塌隐患点数据
const clickObject = loadingInformationStore.clickObject;
if (!clickObject || !clickObject.primitive) {
console.warn('点击对象或图元不存在');
return;
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
loadingInformationStore.collapseHiddenPoint.id,
simulationIdStore.status ? simulationIdStore.id : -1
);
// 更新数据
collapsePointDetail.value = res.data;
informationBoxTitle.value = res.data.disasterName || '崩塌隐患点信息';
try {
// 将坐标转换为偏移量
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
clickObject.primitive.position
);
offsetX.value = screenPos.x;
offsetY.value = screenPos.y;
// 显示新的信息框
loadingInformationStore.collapseHiddenPoint.loading = true;
} catch (error) {
throw new Error(`坐标转换失败:${error}`);
}
}
);
// 监听显示隐藏
watch(
() => statusStore.poiLayers.showCollapseHiddenPoint.show,
(newValue: boolean) => {
if (newValue) {
// 显示崩塌隐患点
CesiumUtilsSingleton.batchShowPrimitives(
loadingResourceStore.getLoadingResource(
LoadingResource.COLLAPSE_HIDDEN_POINT
).ids
);
} else {
// 隐藏崩塌隐患点
CesiumUtilsSingleton.batchHidePrimitives(
loadingResourceStore.getLoadingResource(
LoadingResource.COLLAPSE_HIDDEN_POINT
).ids
);
}
}
);
</script>
<style scoped></style>
src/component/rain-earthquake/basic/DebrisFlowComponent.vue
+6 -2
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="debrisFlowPointDetail as Record<string, any>"
:field="field"
:style="style"
v-if="loadingInformationStore.debrisFlowHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
@@ -41,14 +42,16 @@
PointType,
HiddenDangerPointTypeMap,
} from '@/types/common/DisasterType.ts';
import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
const debrisFlowPoints = ref<Point[]>([]);
const statusStore = useStatusStore();
const loadingInformationStore = useLoadingInformationStore();
const loadingResourceStore = useLoadingResourceStore();
const simulationIdStore = useSimulationIdStore();
const { field, getDisasterIcon } = useHiddenPoint();
const { field, style, getDisasterIcon } = useHiddenPoint();
// 信息框相关配置
const offsetX = ref(0);
@@ -79,7 +82,8 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
loadingInformationStore.debrisFlowHiddenPoint.id
loadingInformationStore.debrisFlowHiddenPoint.id,
simulationIdStore.status ? simulationIdStore.id : -1
);
// 更新数据
src/component/rain-earthquake/basic/FlashFloodComponent.vue
+6 -2
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="flashFloodPointDetail as Record<string, any>"
:field="field"
:style="style"
v-if="loadingInformationStore.flashFloodHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
@@ -41,14 +42,16 @@
PointType,
HiddenDangerPointTypeMap,
} from '@/types/common/DisasterType.ts';
import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
const flashFloodPoints = ref<Point[]>([]);
const statusStore = useStatusStore();
const loadingInformationStore = useLoadingInformationStore();
const loadingResourceStore = useLoadingResourceStore();
const simulationIdStore = useSimulationIdStore();
const { field, getDisasterIcon } = useHiddenPoint();
const { field, style, getDisasterIcon } = useHiddenPoint();
// 信息框相关配置
const offsetX = ref(0);
@@ -79,7 +82,8 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
loadingInformationStore.flashFloodHiddenPoint.id
loadingInformationStore.flashFloodHiddenPoint.id,
simulationIdStore.status ? simulationIdStore.id : -1
);
// 更新数据
src/component/rain-earthquake/basic/LandslideComponent.vue
+6 -2
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="landslidePointDetail as Record<string, any>"
:field="field"
:style="style"
v-if="loadingInformationStore.landslideHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
@@ -41,14 +42,16 @@
PointType,
HiddenDangerPointTypeMap,
} from '@/types/common/DisasterType.ts';
import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
const landslidePoints = ref<Point[]>([]);
const statusStore = useStatusStore();
const loadingInformationStore = useLoadingInformationStore();
const loadingResourceStore = useLoadingResourceStore();
const simulationIdStore = useSimulationIdStore();
const { field, getDisasterIcon } = useHiddenPoint();
const { field, style, getDisasterIcon } = useHiddenPoint();
// 信息框相关配置
const offsetX = ref(0);
@@ -79,7 +82,8 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
loadingInformationStore.landslideHiddenPoint.id
loadingInformationStore.landslideHiddenPoint.id,
simulationIdStore.status ? simulationIdStore.id : -1
);
// 更新数据
src/component/rain-earthquake/basic/RiskPointComponent.vue
+10 -8
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="riskPointDetail as Record<string, any>"
:field="field"
:style="style"
v-if="loadingInformationStore.riskPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
@@ -37,12 +38,14 @@
import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint.ts';
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
const riskPoints = ref<Point[]>([]);
const statusStore = useStatusStore();
const loadingInformationStore = useLoadingInformationStore();
const loadingResourceStore = useLoadingResourceStore();
const simulationIdStore = useSimulationIdStore();
// 信息框相关配置
const offsetX = ref(0);
@@ -50,7 +53,7 @@
const riskPointDetail = ref<Point>();
// 获取钩子函数
const { informationBoxTitle, field, getDisasterIcon } = useRiskPoint();
const { informationBoxTitle, field, style, getDisasterIcon } = useRiskPoint();
$api.riskSpots.getBasePoints().then((res) => {
riskPoints.value = res.data;
@@ -72,7 +75,8 @@
}
const res = await $api.riskSpots.getPointDetailById(
loadingInformationStore.riskPoint.id
loadingInformationStore.riskPoint.id,
simulationIdStore.status ? simulationIdStore.id : -1
);
// 更新数据
@@ -100,15 +104,13 @@
(newValue: boolean) => {
if (newValue) {
CesiumUtilsSingleton.batchShowPrimitives(
loadingResourceStore.getLoadingResource(
LoadingResource.RISK_POINT
).ids
loadingResourceStore.getLoadingResource(LoadingResource.RISK_POINT)
.ids
);
} else {
CesiumUtilsSingleton.batchHidePrimitives(
loadingResourceStore.getLoadingResource(
LoadingResource.RISK_POINT
).ids
loadingResourceStore.getLoadingResource(LoadingResource.RISK_POINT)
.ids
);
}
}
src/component/rain-earthquake/basic/WaterLoggingComponent.vue
+7 -5
View File
@@ -3,9 +3,7 @@
<div>
<!-- 加载内涝隐患点 -->
<LoadingPoints
v-if="
statusStore.appLoadingCompleted && waterLoggingPoints.length > 0
"
v-if="statusStore.appLoadingCompleted && waterLoggingPoints.length > 0"
:base-points="waterLoggingPoints"
:get-disaster-icon="getDisasterIcon"
:prefix="config.prefix.waterLoggingHiddenPointId"
@@ -17,6 +15,7 @@
<InformationBox
:data="waterLoggingPointDetail as Record<string, any>"
:field="field"
:style="style"
v-if="loadingInformationStore.waterLoggingHiddenPoint.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
@@ -43,14 +42,16 @@
PointType,
HiddenDangerPointTypeMap,
} from '@/types/common/DisasterType.ts';
import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
const waterLoggingPoints = ref<Point[]>([]);
const statusStore = useStatusStore();
const loadingInformationStore = useLoadingInformationStore();
const loadingResourceStore = useLoadingResourceStore();
const simulationIdStore = useSimulationIdStore();
const { field, getDisasterIcon } = useHiddenPoint();
const { field, style, getDisasterIcon } = useHiddenPoint();
// 信息框相关配置
const offsetX = ref(0);
@@ -81,7 +82,8 @@
}
const res = await $api.hiddenDangerSpots.getPointDetailById(
loadingInformationStore.waterLoggingHiddenPoint.id
loadingInformationStore.waterLoggingHiddenPoint.id,
simulationIdStore.status ? simulationIdStore.id : -1
);
// 更新数据
src/component/rain-earthquake/detail-panels/BridgeComponent.vue
+1
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="storePointDetail as Record<string, any>"
:field="field"
:style="{}"
v-if="loadingInformationStore.bridge.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
src/component/rain-earthquake/detail-panels/DangerousSourceComponent.vue
+1
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="dangerousSourcePointDetail as Record<string, any>"
:field="field"
:style="{}"
v-if="loadingInformationStore.dangerousSource.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
src/component/rain-earthquake/detail-panels/EmergencyShelterComponent.vue
+1
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="emergencyShelterPointDetail as Record<string, any>"
:field="field"
:style="{}"
v-if="loadingInformationStore.emergencyShelter.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
src/component/rain-earthquake/detail-panels/FireStationComponent.vue
+1
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="fireStationPointDetail as Record<string, any>"
:field="field"
:style="{}"
v-if="loadingInformationStore.fireStation.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
src/component/rain-earthquake/detail-panels/HospitalComponent.vue
+1
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="hospitalPointDetail as Record<string, any>"
:field="field"
:style="{}"
v-if="loadingInformationStore.hospital.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
src/component/rain-earthquake/detail-panels/RainfallGridComponent.vue
+27
View File
@@ -4,18 +4,23 @@
</template>
<script lang="ts" setup>
import { $api } from '@/api/api';
import { useRainstormDeduction } from '@/hooks/rainstorm/useRainstormDeduction';
import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
import { useStatusStore } from '@/stores/useStatusStore';
import { useStepStore } from '@/stores/useStepStore';
import type { ApiResponse } from '@/types/ApiResponse';
import type { RainfallGridResponse } from '@/types/rainstorm/RainfallGridResponse';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import { WebSocketService } from '@/utils/request/websocket';
import { Utils } from '@/utils/utils';
import { onMounted, onUnmounted, watch } from 'vue';
let rainfallWsService: WebSocketService | null = null;
const { triggerLayerShowStatus, addGridLayer } = useRainstormDeduction();
const statusStore = useStatusStore();
const stepStore = useStepStore();
const simulationIdStore = useSimulationIdStore();
// 请求降雨栅格数据
const requestRainfallData = () => {
@@ -38,11 +43,33 @@
'/topic/rainfall/grid/messages',
(response) => {
if (response.code === 200 && response.data) {
// 设置步骤为第一步
stepStore.currentStep = 0;
// 显示图层
addGridLayer(response.data);
// 推进到下一步
stepStore.nextStep();
// 进行模型计算
$api.rainfall
.modelDeduction({
disaster_name: `${Utils.formatDate('YYYYMMDDHHmmss')}暴雨自动推演`,
operation_type: '暴雨灾害链自动推演',
})
.then((res) => {
// 进行预警
CesiumUtilsSingleton.addPulseEffect(res.data.list);
// 设置事件id
simulationIdStore.setId(res.data.record_id);
// 推进到下一步
stepStore.nextStep();
// 产出报告
console.log(res);
});
} else {
console.warn('响应错误:', response.message);
}
src/component/rain-earthquake/detail-panels/ReservoirComponent.vue
+1
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="reservoirDetail as Record<string, any>"
:field="field"
:style="{}"
v-if="loadingInformationStore.reservoir.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
src/component/rain-earthquake/detail-panels/SchoolComponent.vue
+1
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="schoolDetail as Record<string, any>"
:field="field"
:style="{}"
v-if="loadingInformationStore.school.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
src/component/rain-earthquake/detail-panels/StorePointsComponent.vue
+1
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="storePointDetail as Record<string, any>"
:field="field"
:style="{}"
v-if="loadingInformationStore.storePoints.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
src/component/rain-earthquake/detail-panels/SubwayStationComponent.vue
+1
View File
@@ -15,6 +15,7 @@
<InformationBox
:data="subwayStationDetail as Record<string, any>"
:field="field"
:style="{}"
v-if="loadingInformationStore.subwayStation.loading"
:title="informationBoxTitle"
:offset-x="offsetX"
src/config/config.json
+1
View File
@@ -35,6 +35,7 @@
},
"prefix": {
"landslideHiddenPointId": "landslide-hidden-point-",
"collapseHiddenPointId": "collapse-hidden-point-",
"debrisFlowHiddenPointId": "debris-flow-hidden-point-",
"waterLoggingHiddenPointId": "water-logging-hidden-point-",
"flashFloodHiddenPointId": "flash-flood-hidden-point-",
src/hooks/earthquake/useEarthquakeDisasterChain.ts
+13
View File
@@ -4,6 +4,7 @@ import { useLayerControl } from '../rain-earthquake/useLayerControl.ts';
import {
debrisFlowIcon,
landslideIcon,
collapseIcon,
riskAreaIcon,
earthquakeLineIcon,
hospitalIcon,
@@ -146,6 +147,18 @@ export const useEarthquakeDisasterChain = () => {
LoadingResource.DEBRIS_FLOW_HIDDEN_POINT
),
},
{
name: '崩塌隐患点',
statusStore: statusStore.poiLayers,
statusKey: 'showCollapseHiddenPoint' as const,
callback: layerControl.clickCollapseHiddenPoint,
link: collapseIcon,
category: ControlPanelCategory.DISASTER_HAZARD,
count: () =>
resourceStore.getResourceCount(
LoadingResource.COLLAPSE_HIDDEN_POINT
),
},
{
name: '风险点',
statusStore: statusStore.mapLayers,
src/hooks/map/useMap.ts
+6
View File
@@ -25,6 +25,7 @@ export const useMap = () => {
// 当id改变时候，重置状态
if (
loadingInfoStore.landslideHiddenPoint.id !== id &&
loadingInfoStore.collapseHiddenPoint.id !== id &&
loadingInfoStore.debrisFlowHiddenPoint.id !== id &&
loadingInfoStore.waterLoggingHiddenPoint.id !== id &&
loadingInfoStore.flashFloodHiddenPoint.id !== id &&
@@ -43,6 +44,11 @@ export const useMap = () => {
loadingInfoStore.landslideHiddenPoint.id = id;
}
// 崩塌隐患点
else if (pickedObject.id.startsWith(config.prefix.collapseHiddenPointId)) {
loadingInfoStore.collapseHiddenPoint.id = id;
}
// 泥石流隐患点
else if (pickedObject.id.startsWith(config.prefix.debrisFlowHiddenPointId)) {
loadingInfoStore.debrisFlowHiddenPoint.id = id;
src/hooks/rain-earthquake/useHiddenPoint.ts
+13 -1
View File
@@ -1,4 +1,5 @@
import {
collapseIcon,
debrisFlowIcon,
flashFloodIcon,
landslideIcon,
@@ -14,6 +15,7 @@ export const useHiddenPoint = () => {
* 字段映射配置
*/
const field = {
probability: '预测概率',
fieldCode: '野外编号',
disasterName: '灾害点名称',
position: '位置',
@@ -22,6 +24,13 @@ export const useHiddenPoint = () => {
riskGrade: '风险等级',
};
/**
* 样式
*/
const style = {
probability: { background: '#888888' },
};
/**
* 根据灾害类型获取对应图标
* @param disasterType - 灾害类型（支持中英文）
@@ -33,6 +42,9 @@ export const useHiddenPoint = () => {
case 'landslide':
case '滑坡':
return landslideIcon;
case 'collapse':
case '崩塌':
return collapseIcon;
case 'debris_flow':
case '泥石流':
return debrisFlowIcon;
@@ -47,5 +59,5 @@ export const useHiddenPoint = () => {
}
}
return { field, getDisasterIcon };
return { field, style, getDisasterIcon };
};
src/hooks/rain-earthquake/useLayerControl.ts
+8
View File
@@ -161,6 +161,13 @@ export const useLayerControl = () => {
statusStore.poiLayers.showLandslideHiddenPoint.loading = true;
};
/**
* 显示崩塌隐患点
*/
const clickCollapseHiddenPoint = () => {
statusStore.poiLayers.showCollapseHiddenPoint.loading = true;
};
/**
* 显示泥石流隐患点
*/
@@ -221,6 +228,7 @@ export const useLayerControl = () => {
clickReservoir,
clickSubwayStation,
clickLandslideHiddenPoint,
clickCollapseHiddenPoint,
clickDebrisFlowHiddenPoint,
clickWaterLoggingHiddenPoint,
clickFlashFloodHiddenPoint,
src/hooks/rain-earthquake/useRightHandle.ts
+15
View File
@@ -4,12 +4,15 @@ import config from '@/config/config.json';
import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
import { useScene } from '../useScene';
import { useRainstormDeduction } from '../rainstorm/useRainstormDeduction';
import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
export const useRightHandle = () => {
const statusStore = useStatusStore();
const leftLegendStore = useLeftLegendStore();
const scene = useScene();
const rainstormDeduction = useRainstormDeduction();
const simulationIdStore = useSimulationIdStore();
/**
* 暴雨模拟
* @param status - 状态
@@ -25,6 +28,12 @@ export const useRightHandle = () => {
// 添加图例
rainstormDeduction.addLegend();
// 如果有脉冲，显示脉冲
CesiumUtilsSingleton.showPulseEffects();
// 模拟id状态为true
simulationIdStore.status = true;
} else {
// 关闭暴雨模拟：隐藏降雨栅格图层
statusStore.weatherLayers.showRainfallGrid.show = false;
@@ -34,6 +43,12 @@ export const useRightHandle = () => {
// 隐藏步骤条
statusStore.uiComponents.stepBar.show = false;
// 隐藏脉冲
CesiumUtilsSingleton.hidePulseEffects();
// 模拟id状态为false
simulationIdStore.status = false;
}
};
src/hooks/rain-earthquake/useRiskPoint.ts
+9 -1
View File
@@ -14,6 +14,7 @@ export const useRiskPoint = () => {
* 字段映射配置
*/
const field = {
probability: '预测概率',
riskName: '风险区名称',
unitCode: '统一编号',
housing: '住房（间）',
@@ -27,6 +28,13 @@ export const useRiskPoint = () => {
lat: '纬度',
};
/**
* 样式
*/
const style = {
probability: { background: '#888888' },
};
/**
* 获取风险点图标
* @returns 图标路径
@@ -35,5 +43,5 @@ export const useRiskPoint = () => {
return riskAreaIcon;
}
return { informationBoxTitle, field, getDisasterIcon };
return { informationBoxTitle, field, style, getDisasterIcon };
};
src/hooks/rainstorm/useRainDisasterChain.ts
+13
View File
@@ -4,6 +4,7 @@ import {
debrisFlowIcon,
flashFloodIcon,
landslideIcon,
collapseIcon,
riskAreaIcon,
waterLoggingIcon,
hospitalIcon,
@@ -199,6 +200,18 @@ export const useRainDisasterChain = () => {
LoadingResource.FLASH_FLOOD_HIDDEN_POINT
),
},
{
name: '崩塌隐患点',
statusStore: statusStore.poiLayers,
statusKey: 'showCollapseHiddenPoint' as const,
callback: layerControl.clickCollapseHiddenPoint,
link: collapseIcon,
category: ControlPanelCategory.DISASTER_HAZARD,
count: () =>
resourceStore.getResourceCount(
LoadingResource.COLLAPSE_HIDDEN_POINT
),
},
{
name: '风险点',
statusStore: statusStore.mapLayers,
src/hooks/useScene.ts
+5
View File
@@ -1,6 +1,7 @@
import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore';
import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
import { useSimulationIdStore } from '@/stores/useSimulationIdStore';
import { useStatusStore } from '@/stores/useStatusStore';
export const useScene = () => {
@@ -8,6 +9,7 @@ export const useScene = () => {
const loadingInformationStore = useLoadingInformationStore();
const leftLegendStore = useLeftLegendStore();
const buttonSelectedIdStore = useButtonSelectedIdStore();
const simulationIdStore = useSimulationIdStore();
// 重置场景
const resetScene = () => {
@@ -22,6 +24,9 @@ export const useScene = () => {
// 重置左侧图例
leftLegendStore.resetLegendListInfo();
// 重置模拟id
simulationIdStore.resetSimulationId();
};
return { resetScene };
src/stores/useLoadingInformation.ts
+13
View File
@@ -114,6 +114,14 @@ export const useLoadingInformationStore = defineStore(
id: -1,
});
// ============================== 崩塌隐患点状态 ================================
const collapseHiddenPoint = reactive({
/** 加载状态 */
loading: false,
/** 崩塌隐患点ID */
id: -1,
});
// ============================== 泥石流隐患点状态 ================================
const debrisFlowHiddenPoint = reactive({
/** 加载状态 */
@@ -190,6 +198,10 @@ export const useLoadingInformationStore = defineStore(
landslideHiddenPoint.loading = false;
landslideHiddenPoint.id = -1;
// 崩塌隐患点状态重置
collapseHiddenPoint.loading = false;
collapseHiddenPoint.id = -1;
// 泥石流隐患点状态重置
debrisFlowHiddenPoint.loading = false;
debrisFlowHiddenPoint.id = -1;
@@ -216,6 +228,7 @@ export const useLoadingInformationStore = defineStore(
reservoir,
subwayStation,
landslideHiddenPoint,
collapseHiddenPoint,
debrisFlowHiddenPoint,
waterLoggingHiddenPoint,
flashFloodHiddenPoint,
src/stores/useSimulationIdStore.ts
+28
View File
@@ -0,0 +1,28 @@
import { defineStore } from 'pinia';
import { type Ref, ref } from 'vue';
/**
* 模拟暴雨、地震灾害链id
*/
export const useSimulationIdStore = defineStore('simulationId', () => {
const status: Ref<boolean> = ref(false);
const id: Ref<number> = ref(-1);
/**
* 重置模拟id
*/
const resetSimulationId = () => {
status.value = false;
id.value = -1;
};
/**
* 设置id
*/
const setId = (value: number) => {
status.value = true;
id.value = value;
};
return { id, status, resetSimulationId, setId };
});
src/stores/useStatusStore.ts
+9
View File
@@ -118,6 +118,11 @@ export const useStatusStore = defineStore('status', () => {
show: true,
loading: true,
},
/** 显示崩塌隐患点 */
showCollapseHiddenPoint: {
show: true,
loading: true,
},
/** 显示泥石流隐患点 */
showDebrisFlowHiddenPoint: {
show: true,
@@ -283,6 +288,10 @@ export const useStatusStore = defineStore('status', () => {
show: true,
loading: true,
};
poiLayers.showCollapseHiddenPoint = {
show: true,
loading: true,
};
poiLayers.showDebrisFlowHiddenPoint = {
show: true,
loading: true,
src/types/base/Point.ts
+2
View File
@@ -14,4 +14,6 @@ export interface Point {
disasterType?: string;
/** 名称 */
name?: string;
/** 预测概率 */
probability?: string;
}
src/types/common/DisasterType.ts
+3
View File
@@ -14,6 +14,8 @@ export enum DisasterType {
export enum PointType {
/** 滑坡 */
LANDSLIDE = '滑坡',
/** 崩塌 */
COLLAPSE = '崩塌',
/** 泥石流 */
DEBRIS_FLOW = '泥石流',
/** 内涝 */
@@ -29,6 +31,7 @@ export enum PointType {
*/
export const HiddenDangerPointTypeMap: Record<PointType, string> = {
[PointType.LANDSLIDE]: 'landslide',
[PointType.COLLAPSE]: 'collapse',
[PointType.DEBRIS_FLOW]: 'debris_flow',
[PointType.WATER_LOGGING]: 'water_logging',
[PointType.FLASH_FLOOD]: 'flash_flood',
src/types/common/LoadingResourceType.ts
+5
View File
@@ -47,6 +47,11 @@ export enum LoadingResource {
*/
LANDSLIDE_HIDDEN_POINT = 'LANDSLIDE_HIDDEN_POINT',
/**
* 崩塌隐患点
*/
COLLAPSE_HIDDEN_POINT = 'COLLAPSE_HIDDEN_POINT',
/**
* 泥石流隐患点
*/
src/types/common/WarningList.ts
+8
View File
@@ -0,0 +1,8 @@
/**
* 预警列表
*/
export interface WarningList {
probability: number;
lon: number;
lat: number;
}
src/types/rainstorm/RainPredictRequest.ts
+19
View File
@@ -0,0 +1,19 @@
/**
* 降雨预测请求值
*/
export interface RainPredictRequest {
/** 灾害名称 */
disaster_name: string;
/** id列表 */
point_ids?: number[];
/** 行政区划代码 */
region_code?: string;
/** 累计降雨量 */
rainfall?: number;
/** 持续时间 */
duration?: number;
/** 发生时间 */
occurred_time?: string;
/** 操作类型 */
operation_type?: string;
}
src/types/rainstorm/RainPredictResponse.ts
+6
View File
@@ -0,0 +1,6 @@
import type { WarningList } from '../common/WarningList';
export interface RainPredictResponse {
record_id: number;
list: Record<string, WarningList>;
}
src/utils/cesium/CesiumUtils.ts
+189 -4
View File
@@ -20,6 +20,12 @@ import {
SceneTransforms,
Rectangle,
Color,
JulianDate,
CallbackProperty,
ConstantProperty,
HeightReference,
VerticalOrigin,
HorizontalOrigin,
} from 'cesium';
import { CesiumViewerManager } from './CesiumViewerManager';
import { EntityManager } from './EntityManager';
@@ -29,6 +35,7 @@ import { GeoJsonManager, type ClearType } from './GeoJsonManager';
import { CameraController } from './CameraController';
import config from '@/config/config.json';
import type { ClickObject } from '@/types/cesium/ClickObject';
import type { WarningList } from '@/types/common/WarningList';
// 导出 ClearType 类型
export type { ClearType };
@@ -48,6 +55,12 @@ export class CesiumUtils {
// 颜色缓存
#colorCache = new Map<string, Color>();
// 脉冲相关状态
#pulseMap: Record<string, { pulseId: string; probability: number }> = {};
#maxPulseRadius = 30;
#pulseDuration = 5;
#pulseCircleImage: string | null = null;
constructor() {
this.#viewerManager = new CesiumViewerManager();
}
@@ -496,10 +509,11 @@ export class CesiumUtils {
clickLayer(callback: (pickedObject: ClickObject) => void) {
const handler = new ScreenSpaceEventHandler(this.getViewer()?.scene.canvas);
handler.setInputAction((clickEvent: { position: Cartesian2 }) => {
// 在点击位置进行拾取
const pickedObject = CesiumUtilsSingleton.getViewer()?.scene.pick(
clickEvent.position
);
const viewer = CesiumUtilsSingleton.getViewer();
if (!viewer) return;
const pickedList = viewer.scene.drillPick(clickEvent.position);
// 跳过脉冲实体，取第一个非脉冲实体
const pickedObject = pickedList.find((p) => !p.id?.properties?.pulseKey);
callback(pickedObject);
}, ScreenSpaceEventType.LEFT_CLICK);
}
@@ -539,6 +553,7 @@ export class CesiumUtils {
this.clearAllPrimitives(clearType);
this.clearAllLayers(clearType);
this.clearAllGeoJsonLayers(clearType);
this.removeAllPulses();
}
// ===================== getter 和 setter函数 =====================
@@ -613,6 +628,85 @@ export class CesiumUtils {
return color;
}
/**
* 添加脉冲效果
* @param list 点列表
* @returns
*/
addPulseEffect(list: Record<string, WarningList>) {
const viewer = this.getViewer();
if (!viewer) return;
// 移除已有脉冲
this.removeAllPulses();
// 生成圆形贴图
if (!this.#pulseCircleImage) {
this.#pulseCircleImage = this.#createCircleImage(this.#maxPulseRadius);
}
for (const [disasterType, warning] of Object.entries(list)) {
const { lon, lat, probability } = warning;
// 根据概率确定颜色
let color: Color;
if (probability >= 0.7) {
color = Color.RED;
} else if (probability >= 0.5) {
color = Color.YELLOW;
} else {
continue;
}
const key = `${disasterType}_${lon}_${lat}`;
const pulseId = `PULSE_${key}_${Date.now()}`;
this.#createPulseCircle(pulseId, key, lon, lat, color);
this.#pulseMap[key] = { pulseId, probability };
}
}
/**
* 移除所有脉冲实体
*/
removeAllPulses(): void {
for (const key of Object.keys(this.#pulseMap)) {
this.#deletePulseEntity(key);
}
}
/**
* 隐藏所有脉冲效果
*/
hidePulseEffects(): void {
const viewer = this.getViewer();
if (!viewer) return;
for (const key of Object.keys(this.#pulseMap)) {
const entry = this.#pulseMap[key];
const entity = viewer.entities.getById(entry.pulseId);
if (entity && entity.billboard) {
entity.billboard.show = new ConstantProperty(false);
}
}
}
/**
* 显示所有脉冲效果
*/
showPulseEffects(): void {
const viewer = this.getViewer();
if (!viewer) return;
for (const key of Object.keys(this.#pulseMap)) {
const entry = this.#pulseMap[key];
const entity = viewer.entities.getById(entry.pulseId);
if (entity && entity.billboard) {
entity.billboard.show = new ConstantProperty(true);
}
}
}
// ===================== 私有方法 =====================
/**
@@ -625,6 +719,97 @@ export class CesiumUtils {
throw new Error(`${managerName} 未初始化，请先调用 initCesiumViewer()`);
}
}
/**
* 生成脉冲圆形贴图
*/
#createCircleImage(maxRadius: number): string {
const canvas = document.createElement('canvas');
canvas.width = maxRadius * 2;
canvas.height = maxRadius * 2;
const ctx = canvas.getContext('2d')!;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(maxRadius, maxRadius, maxRadius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = 'rgba(255,255,255,0.7)';
ctx.fill();
return canvas.toDataURL('image/png');
}
/**
* 创建脉冲实体
* @param pulseId - 脉冲实体 ID
* @param lon - 经度
* @param lat - 纬度
* @param color - 颜色
*/
#createPulseCircle(
pulseId: string,
key: string,
lon: number,
lat: number,
color: Color
): void {
const viewer = this.getViewer();
if (!viewer || !this.#pulseCircleImage) return;
const startTime = JulianDate.now();
const maxRadius = this.#maxPulseRadius;
const duration = this.#pulseDuration;
viewer.entities.add({
id: pulseId,
position: Cartesian3.fromDegrees(lon, lat),
properties: { pulseKey: key },
billboard: {
image: this.#pulseCircleImage,
width: new CallbackProperty((time) => {
const elapsed =
JulianDate.secondsDifference(time, startTime) % duration;
const progress = elapsed / duration;
return maxRadius * 2 * Math.abs(Math.sin(progress * Math.PI));
}, false),
height: new CallbackProperty((time) => {
const elapsed =
JulianDate.secondsDifference(time, startTime) % duration;
const progress = elapsed / duration;
return maxRadius * 2 * Math.abs(Math.sin(progress * Math.PI));
}, false),
color: new CallbackProperty((time) => {
const elapsed =
JulianDate.secondsDifference(time, startTime) % duration;
const progress = elapsed / duration;
const alpha = 0.7 * (1 - progress);
return color.withAlpha(alpha);
}, false),
heightReference: HeightReference.CLAMP_TO_GROUND,
verticalOrigin: VerticalOrigin.CENTER,
horizontalOrigin: HorizontalOrigin.CENTER,
eyeOffset: new Cartesian3(0.0, 0.0, -10.0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
}
/**
* 删除单个脉冲实体
* @param key - 脉冲映射 key
*/
#deletePulseEntity(key: string): void {
const viewer = this.getViewer();
if (!viewer) return;
const entry = this.#pulseMap[key];
if (!entry) return;
const entity = viewer.entities.getById(entry.pulseId);
if (entity) {
viewer.entities.remove(entity);
}
delete this.#pulseMap[key];
}
}
/**