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

修改hooks中store的调用方式

Browse Source
This commit is contained in:
wzy-warehouse
2026-05-07 13:08:30 +08:00
parent 68715dea2b
commit 009dc83476
7 changed files with 94 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/earthquake/useEarthquakeDisasterChain.ts
+7 -5
View File
@@ -29,6 +29,11 @@ import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
* @returns
*/
export const useEarthquakeDisasterChain = () => {
const statusStore = useStatusStore();
const layerControl = useLayerControl();
const resourceStore = useLoadingResourceStore();
const rightHandle = useRightHandle();
// ================灾害链影响点列表================================
/**
* 搜索条件
@@ -165,12 +170,12 @@ export const useEarthquakeDisasterChain = () => {
},
{
name: '清除模拟',
callback: () => useRightHandle().resetScene(),
callback: () => rightHandle.resetScene(),
executeOnce: true,
},
{
name: '视角重置',
callback: () => useRightHandle().resetView(),
callback: () => rightHandle.resetView(),
executeOnce: true,
},
];
@@ -180,9 +185,6 @@ export const useEarthquakeDisasterChain = () => {
* 控制面板信息
*/
const getControlPanel = () => {
const statusStore = useStatusStore();
const layerControl = useLayerControl();
const resourceStore = useLoadingResourceStore();
return [
// 灾害隐患点类别
src/hooks/map/useMap.ts
+26 -26
View File
@@ -8,6 +8,7 @@ import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
* @returns 注册监听器和视角控制方法
*/
export const useMap = () => {
const loadingInfoStore = useLoadingInformationStore();
/**
* 注册全局点击监听器
*/
@@ -23,103 +24,102 @@ export const useMap = () => {
// 当id改变时候，重置状态
if (
useLoadingInformationStore().landslideHiddenPoint.id !== id &&
useLoadingInformationStore().debrisFlowHiddenPoint.id !== id &&
useLoadingInformationStore().waterLoggingHiddenPoint.id !== id &&
useLoadingInformationStore().flashFloodHiddenPoint.id !== id &&
useLoadingInformationStore().riskPoint.id !== id &&
useLoadingInformationStore().hospital.id !== id
loadingInfoStore.landslideHiddenPoint.id !== id &&
loadingInfoStore.debrisFlowHiddenPoint.id !== id &&
loadingInfoStore.waterLoggingHiddenPoint.id !== id &&
loadingInfoStore.flashFloodHiddenPoint.id !== id &&
loadingInfoStore.riskPoint.id !== id &&
loadingInfoStore.hospital.id !== id
) {
useLoadingInformationStore().resetStatue();
loadingInfoStore.resetStatue();
}
// 点击对象
useLoadingInformationStore().clickObject.id = pickedObject.id;
useLoadingInformationStore().clickObject.primitive =
pickedObject.primitive;
loadingInfoStore.clickObject.id = pickedObject.id;
loadingInfoStore.clickObject.primitive = pickedObject.primitive;
// 滑坡隐患点
if (pickedObject.id.startsWith(config.prefix.landslideHiddenPointId)) {
useLoadingInformationStore().landslideHiddenPoint.id = id;
loadingInfoStore.landslideHiddenPoint.id = id;
}
// 泥石流隐患点
else if (pickedObject.id.startsWith(config.prefix.debrisFlowHiddenPointId)) {
useLoadingInformationStore().debrisFlowHiddenPoint.id = id;
loadingInfoStore.debrisFlowHiddenPoint.id = id;
}
// 内涝隐患点
else if (pickedObject.id.startsWith(config.prefix.waterLoggingHiddenPointId)) {
useLoadingInformationStore().waterLoggingHiddenPoint.id = id;
loadingInfoStore.waterLoggingHiddenPoint.id = id;
}
// 山洪隐患点
else if (pickedObject.id.startsWith(config.prefix.flashFloodHiddenPointId)) {
useLoadingInformationStore().flashFloodHiddenPoint.id = id;
loadingInfoStore.flashFloodHiddenPoint.id = id;
}
// 风险点
else if (pickedObject.id.startsWith(config.prefix.riskPointId)) {
useLoadingInformationStore().riskPoint.id = id;
loadingInfoStore.riskPoint.id = id;
}
// 医院
else if (pickedObject.id.startsWith(config.prefix.hospitalPointId)) {
useLoadingInformationStore().hospital.id = id;
loadingInfoStore.hospital.id = id;
}
// 危险源
else if (
pickedObject.id.startsWith(config.prefix.dangerousSourcePointId)
) {
useLoadingInformationStore().dangerousSource.id = id;
loadingInfoStore.dangerousSource.id = id;
}
// 避难所
else if (
pickedObject.id.startsWith(config.prefix.emergencyShelterPointId)
) {
useLoadingInformationStore().emergencyShelter.id = id;
loadingInfoStore.emergencyShelter.id = id;
}
// 消防站
else if (pickedObject.id.startsWith(config.prefix.fireStationPointId)) {
useLoadingInformationStore().fireStation.id = id;
loadingInfoStore.fireStation.id = id;
}
// 物资储备点
else if (pickedObject.id.startsWith(config.prefix.storePointsPointId)) {
useLoadingInformationStore().storePoints.id = id;
loadingInfoStore.storePoints.id = id;
}
// 学校
else if (pickedObject.id.startsWith(config.prefix.schoolPointId)) {
useLoadingInformationStore().school.id = id;
loadingInfoStore.school.id = id;
}
// 桥梁
else if (pickedObject.id.startsWith(config.prefix.bridgePointId)) {
useLoadingInformationStore().bridge.id = id;
loadingInfoStore.bridge.id = id;
}
// 水库
else if (pickedObject.id.startsWith(config.prefix.reservoirPointId)) {
useLoadingInformationStore().reservoir.id = id;
loadingInfoStore.reservoir.id = id;
}
// 地铁站点
else if (pickedObject.id.startsWith(config.prefix.subwayStationPointId)) {
useLoadingInformationStore().subwayStation.id = id;
loadingInfoStore.subwayStation.id = id;
}
// 其他
else {
// 重置状态
useLoadingInformationStore().resetStatue();
loadingInfoStore.resetStatue();
}
} else {
// 重置状态
useLoadingInformationStore().resetStatue();
loadingInfoStore.resetStatue();
}
});
};
src/hooks/rain-earthquake/useLayerControl.ts
+26 -24
View File
@@ -5,12 +5,14 @@ import { useStatusStore } from '@/stores/useStatusStore.ts';
* 控制面板显示隐藏逻辑
*/
export const useLayerControl = () => {
const statusStore = useStatusStore();
const leftLegendStore = useLeftLegendStore();
/**
* 点击显示医院
*/
const clickHospital = () => {
// 加载状态为true
useStatusStore().poiLayers.showHospital.loading = true;
statusStore.poiLayers.showHospital.loading = true;
};
/**
@@ -18,7 +20,7 @@ export const useLayerControl = () => {
*/
const clickDangerousSource = () => {
// 加载状态为true
useStatusStore().poiLayers.showDangerSource.loading = true;
statusStore.poiLayers.showDangerSource.loading = true;
};
/**
@@ -26,7 +28,7 @@ export const useLayerControl = () => {
*/
const clickEmergencyShelter = () => {
// 加载状态为true
useStatusStore().poiLayers.showRefugeeShelter.loading = true;
statusStore.poiLayers.showRefugeeShelter.loading = true;
};
/**
@@ -34,7 +36,7 @@ export const useLayerControl = () => {
*/
const clickFireStation = () => {
// 加载状态为true
useStatusStore().poiLayers.showFireStation.loading = true;
statusStore.poiLayers.showFireStation.loading = true;
};
/**
@@ -42,7 +44,7 @@ export const useLayerControl = () => {
*/
const clickStorePoints = () => {
// 加载状态为true
useStatusStore().poiLayers.showReservePoint.loading = true;
statusStore.poiLayers.showReservePoint.loading = true;
};
/**
@@ -50,7 +52,7 @@ export const useLayerControl = () => {
*/
const clickSchool = () => {
// 加载状态为true
useStatusStore().poiLayers.showSchool.loading = true;
statusStore.poiLayers.showSchool.loading = true;
};
/**
@@ -58,11 +60,11 @@ export const useLayerControl = () => {
*/
const clickPopulationGrid = () => {
// 加载状态为true
useStatusStore().poiLayers.showPopulationGrid.loading = true;
statusStore.poiLayers.showPopulationGrid.loading = true;
if (useStatusStore().poiLayers.showPopulationGrid.show) {
if (statusStore.poiLayers.showPopulationGrid.show) {
// 添加图例
useLeftLegendStore().legendListInfo.population = {
leftLegendStore.legendListInfo.population = {
title: '人口密度图例',
list: [
{
@@ -101,7 +103,7 @@ export const useLayerControl = () => {
};
} else {
// 隐藏图例
delete useLeftLegendStore().legendListInfo.population;
delete leftLegendStore.legendListInfo.population;
}
};
@@ -109,96 +111,96 @@ export const useLayerControl = () => {
* 显示管网
*/
const clickWaterPipe = () => {
useStatusStore().infrastructureLayers.showNetworkSystem.loading = true;
statusStore.infrastructureLayers.showNetworkSystem.loading = true;
};
/**
* 显示交通道路
*/
const clickTrafficRoad = () => {
useStatusStore().infrastructureLayers.showTrafficRoad.loading = true;
statusStore.infrastructureLayers.showTrafficRoad.loading = true;
};
/**
* 显示高速
*/
const clickHighway = () => {
useStatusStore().infrastructureLayers.showHighway.loading = true;
statusStore.infrastructureLayers.showHighway.loading = true;
};
/**
* 显示国道
*/
const clickNationRoad = () => {
useStatusStore().infrastructureLayers.showMainRoad.loading = true;
statusStore.infrastructureLayers.showMainRoad.loading = true;
};
/**
* 显示桥梁
*/
const clickBridge = () => {
useStatusStore().infrastructureLayers.showBridge.loading = true;
statusStore.infrastructureLayers.showBridge.loading = true;
};
/**
* 显示水库
*/
const clickReservoir = () => {
useStatusStore().infrastructureLayers.showReservoir.loading = true;
statusStore.infrastructureLayers.showReservoir.loading = true;
};
/**
* 显示地铁站点
*/
const clickSubwayStation = () => {
useStatusStore().poiLayers.showSubwayStation.loading = true;
statusStore.poiLayers.showSubwayStation.loading = true;
};
/**
* 显示滑坡隐患点
*/
const clickLandslideHiddenPoint = () => {
useStatusStore().poiLayers.showLandslideHiddenPoint.loading = true;
statusStore.poiLayers.showLandslideHiddenPoint.loading = true;
};
/**
* 显示泥石流隐患点
*/
const clickDebrisFlowHiddenPoint = () => {
useStatusStore().poiLayers.showDebrisFlowHiddenPoint.loading = true;
statusStore.poiLayers.showDebrisFlowHiddenPoint.loading = true;
};
/**
* 显示内涝隐患点
*/
const clickWaterLoggingHiddenPoint = () => {
useStatusStore().poiLayers.showWaterLoggingHiddenPoint.loading = true;
statusStore.poiLayers.showWaterLoggingHiddenPoint.loading = true;
};
/**
* 显示山洪隐患点
*/
const clickFlashFloodHiddenPoint = () => {
useStatusStore().poiLayers.showFlashFloodHiddenPoint.loading = true;
statusStore.poiLayers.showFlashFloodHiddenPoint.loading = true;
};
/**
* 显示风险点
*/
const clickRiskPoint = () => {
useStatusStore().mapLayers.riskPointShow.loading = true;
statusStore.mapLayers.riskPointShow.loading = true;
};
/**
* 显示断裂带
*/
const clickFault = () => {
useStatusStore().mapLayers.faultShow.loading = true;
statusStore.mapLayers.faultShow.loading = true;
};
/**
* 显示降雨栅格
*/
const clickRainfallGrid = () => {
useStatusStore().weatherLayers.showRainfallGrid.loading = true;
statusStore.weatherLayers.showRainfallGrid.loading = true;
};
return {
src/hooks/rain-earthquake/useLeftHandle.ts
+6 -5
View File
@@ -1,22 +1,23 @@
import { useStatusStore } from '@/stores/useStatusStore';
export const useLeftHandle = () => {
const statusStore = useStatusStore();
/**
* 周边分析
*/
const clickAroundAnalysis = (status: unknown) => {
// 如果选中，隐藏右侧按钮，取消选中则显示右侧按钮
if (status as boolean) {
useStatusStore().uiComponents.rightButton.show = false;
statusStore.uiComponents.rightButton.show = false;
// 加载周边分析
useStatusStore().functionStatus.aroundAnalysis.loading = true;
useStatusStore().functionStatus.aroundAnalysis.show = true;
statusStore.functionStatus.aroundAnalysis.loading = true;
statusStore.functionStatus.aroundAnalysis.show = true;
} else {
useStatusStore().uiComponents.rightButton.show = true;
statusStore.uiComponents.rightButton.show = true;
// 隐藏周边分析
useStatusStore().functionStatus.aroundAnalysis.show = false;
statusStore.functionStatus.aroundAnalysis.show = false;
}
};
return {
src/hooks/rain-earthquake/useRightHandle.ts
+13 -9
View File
@@ -6,6 +6,10 @@ import { useScene } from '../useScene';
import { useRainstormDeduction } from '../rainstorm/useRainstormDeduction';
export const useRightHandle = () => {
const statusStore = useStatusStore();
const leftLegendStore = useLeftLegendStore();
const scene = useScene();
const rainstormDeduction = useRainstormDeduction();
/**
* 暴雨模拟
* @param status - 状态
@@ -13,23 +17,23 @@ export const useRightHandle = () => {
const rainstormSimulation = (status: unknown) => {
if (status as boolean) {
// 显示步骤
useRainstormDeduction().showStep();
rainstormDeduction.showStep();
// 开启暴雨模拟：显示降雨栅格图层
useStatusStore().weatherLayers.showRainfallGrid.loading = true;
useStatusStore().weatherLayers.showRainfallGrid.show = true;
statusStore.weatherLayers.showRainfallGrid.loading = true;
statusStore.weatherLayers.showRainfallGrid.show = true;
// 添加图例
useRainstormDeduction().addLegend();
rainstormDeduction.addLegend();
} else {
// 关闭暴雨模拟：隐藏降雨栅格图层
useStatusStore().weatherLayers.showRainfallGrid.show = false;
statusStore.weatherLayers.showRainfallGrid.show = false;
// 删除图例
delete useLeftLegendStore().legendListInfo.precipitation;
delete leftLegendStore.legendListInfo.precipitation;
// 隐藏步骤条
useStatusStore().uiComponents.stepBar.show = false;
statusStore.uiComponents.stepBar.show = false;
}
};
@@ -38,9 +42,9 @@ export const useRightHandle = () => {
*/
const resetScene = () => {
CesiumUtilsSingleton.clearAllResources('custom');
useScene().resetScene();
scene.resetScene();
// 隐藏加载
useStatusStore().appLoadingCompleted = true;
statusStore.appLoadingCompleted = true;
};
/**
src/hooks/rainstorm/useRainDisasterChain.ts
+10 -9
View File
@@ -31,8 +31,13 @@ import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
* @returns
*/
export const useRainDisasterChain = () => {
// 初始化暴雨模拟状态（因为右侧按钮默认选中）
const statusStore = useStatusStore();
const layerControl = useLayerControl();
const resourceStore = useLoadingResourceStore();
const rightHandle = useRightHandle();
const leftHandle = useLeftHandle();
// 初始化暴雨模拟状态（因为右侧按钮默认选中）
statusStore.weatherLayers.showRainfallGrid.loading = true;
statusStore.weatherLayers.showRainfallGrid.show = true;
@@ -106,7 +111,7 @@ export const useRainDisasterChain = () => {
const leftButtonInfo = [
{
name: '周边分析',
callback: useLeftHandle().clickAroundAnalysis,
callback: leftHandle.clickAroundAnalysis,
},
{
name: '关联分析',
@@ -171,8 +176,7 @@ export const useRainDisasterChain = () => {
const rightButtonInfo = [
{
name: '降雨推演',
callback: (status: unknown) =>
useRightHandle().rainstormSimulation(status),
callback: (status: unknown) => rightHandle.rainstormSimulation(status),
},
{
name: '暴雨触发',
@@ -194,12 +198,12 @@ export const useRainDisasterChain = () => {
},
{
name: '场景重置',
callback: () => useRightHandle().resetScene(),
callback: () => rightHandle.resetScene(),
executeOnce: true,
},
{
name: '视角重置',
callback: () => useRightHandle().resetView(),
callback: () => rightHandle.resetView(),
executeOnce: true,
},
];
@@ -212,9 +216,6 @@ export const useRainDisasterChain = () => {
* 控制面板信息
*/
const getControlPanel = () => {
const statusStore = useStatusStore();
const layerControl = useLayerControl();
const resourceStore = useLoadingResourceStore();
return [
// 灾害隐患点类别
src/hooks/rainstorm/useRainstormDeduction.ts
+6 -3
View File
@@ -3,19 +3,22 @@ import { useStatusStore } from '@/stores/useStatusStore';
import { useStepStore } from '@/stores/useStepStore';
export const useRainstormDeduction = () => {
const statusStore = useStatusStore();
const leftLegendStore = useLeftLegendStore();
const stepStore = useStepStore();
/**
* 显示步骤
*/
const showStep = () => {
useStatusStore().uiComponents.stepBar.show = true;
useStepStore().stepList = ['获取雨量', '模型计算', '灾害预警', '报告产出'];
statusStore.uiComponents.stepBar.show = true;
stepStore.stepList = ['获取雨量', '模型计算', '灾害预警', '报告产出'];
};
/**
* 添加图例
*/
const addLegend = () => {
useLeftLegendStore().legendListInfo.precipitation = {
leftLegendStore.legendListInfo.precipitation = {
title: '降雨量图例',
list: [
{