From 009dc83476f07953b4d47a28f6dc7d28514e2f29 Mon Sep 17 00:00:00 2001 From: wzy-warehouse <18135009705@163.com> Date: Thu, 7 May 2026 13:08:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9hooks=E4=B8=ADstore=E7=9A=84?= =?UTF-8?q?=E8=B0=83=E7=94=A8=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../earthquake/useEarthquakeDisasterChain.ts | 12 +++-- src/hooks/map/useMap.ts | 52 +++++++++---------- src/hooks/rain-earthquake/useLayerControl.ts | 50 +++++++++--------- src/hooks/rain-earthquake/useLeftHandle.ts | 11 ++-- src/hooks/rain-earthquake/useRightHandle.ts | 22 ++++---- src/hooks/rainstorm/useRainDisasterChain.ts | 19 +++---- src/hooks/rainstorm/useRainstormDeduction.ts | 9 ++-- 7 files changed, 94 insertions(+), 81 deletions(-) diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts index a5823d1..4b0b834 100644 --- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts +++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts @@ -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 [ // 灾害隐患点类别 diff --git a/src/hooks/map/useMap.ts b/src/hooks/map/useMap.ts index ffd66f7..522b0cc 100644 --- a/src/hooks/map/useMap.ts +++ b/src/hooks/map/useMap.ts @@ -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(); } }); }; diff --git a/src/hooks/rain-earthquake/useLayerControl.ts b/src/hooks/rain-earthquake/useLayerControl.ts index b977920..b5da6ea 100644 --- a/src/hooks/rain-earthquake/useLayerControl.ts +++ b/src/hooks/rain-earthquake/useLayerControl.ts @@ -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 { diff --git a/src/hooks/rain-earthquake/useLeftHandle.ts b/src/hooks/rain-earthquake/useLeftHandle.ts index 8fae864..a4b695b 100644 --- a/src/hooks/rain-earthquake/useLeftHandle.ts +++ b/src/hooks/rain-earthquake/useLeftHandle.ts @@ -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 { diff --git a/src/hooks/rain-earthquake/useRightHandle.ts b/src/hooks/rain-earthquake/useRightHandle.ts index a29b8f1..6c58dcf 100644 --- a/src/hooks/rain-earthquake/useRightHandle.ts +++ b/src/hooks/rain-earthquake/useRightHandle.ts @@ -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; }; /** diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts index 3de0410..48de261 100644 --- a/src/hooks/rainstorm/useRainDisasterChain.ts +++ b/src/hooks/rainstorm/useRainDisasterChain.ts @@ -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 [ // 灾害隐患点类别 diff --git a/src/hooks/rainstorm/useRainstormDeduction.ts b/src/hooks/rainstorm/useRainstormDeduction.ts index 845db70..a90a4ae 100644 --- a/src/hooks/rainstorm/useRainstormDeduction.ts +++ b/src/hooks/rainstorm/useRainstormDeduction.ts @@ -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: [ {