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