diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts index a6adaa6..f504e18 100644 --- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts +++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts @@ -5,14 +5,15 @@ import { PointType } from '@/types/common/DisasterType'; import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils'; import config from '@/config/config.json'; import { useStatusStore } from '@/stores/useStatusStore'; -import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore'; -import { LoadingResource } from '@/types/common/LoadingResourceType'; +import { useLayerControl } from '../useLayerControl'; +import { debrisFlowIcon, landslideIcon, riskAreaIcon } from '@/assets'; /** - * 暴雨灾害链影响点列表钩子函数 - * @returns 搜索条件、表格数据、分页配置及相关方法 + * 暴雨灾害链 + * @returns */ export const useEarthquakeDisasterChain = () => { + // ================灾害链影响点列表================================ /** * 搜索条件 */ @@ -74,6 +75,17 @@ export const useEarthquakeDisasterChain = () => { paginationConfig.value.currentPage = value; }; + // ================图例================================ + /** + * 图例数据 + */ + const legendList = [ + { name: '滑坡隐患点', link: landslideIcon }, + { name: '泥石流隐患点', link: debrisFlowIcon }, + { name: '风险区域', link: riskAreaIcon }, + ]; + + // ================左侧按钮================================ /** * 左侧按钮信息 */ @@ -128,6 +140,7 @@ export const useEarthquakeDisasterChain = () => { }, ]; + // ================右侧按钮================================ /** * 右侧按钮信息 */ @@ -162,41 +175,12 @@ export const useEarthquakeDisasterChain = () => { }, ]; + // ================控制面板================================ const controlPanel = ref([ { name: '显示隐患点', selected: useStatusStore().mapLayers.hiddenDangerPointShow, - callback: (status: unknown) => { - if (status as boolean) { - // 显示隐患点 - CesiumUtilsSingleton.batchShowPrimitives( - useLoadingResourceStore().getLoadingResource( - LoadingResource.HIDDEN_DANGER_POINT - ) - ); - - // 显示风险点 - CesiumUtilsSingleton.batchShowPrimitives( - useLoadingResourceStore().getLoadingResource( - LoadingResource.RISK_POINT - ) - ); - } else { - // 隐藏隐患点 - CesiumUtilsSingleton.batchHidePrimitives( - useLoadingResourceStore().getLoadingResource( - LoadingResource.HIDDEN_DANGER_POINT - ) - ); - - // 隐藏风险点 - CesiumUtilsSingleton.batchHidePrimitives( - useLoadingResourceStore().getLoadingResource( - LoadingResource.RISK_POINT - ) - ); - } - }, + callback: useLayerControl().clickHiddenDangerPoint, }, { name: '显示医院', @@ -305,6 +289,7 @@ export const useEarthquakeDisasterChain = () => { tableDatas, tableColumns, paginationConfig, + legendList, leftButtonInfo, rightButtonInfo, controlPanel, diff --git a/src/hooks/earthquake/useEarthquakeLegend.ts b/src/hooks/earthquake/useEarthquakeLegend.ts deleted file mode 100644 index 88812a0..0000000 --- a/src/hooks/earthquake/useEarthquakeLegend.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { debrisFlowIcon, landslideIcon, riskAreaIcon } from '@/assets'; - -/** - * 暴雨图例钩子函数 - * @returns 图例数据列表 - */ -export const useEarthquakeLegend = () => { - /** - * 图例数据 - */ - const legendList = [ - { name: '滑坡隐患点', link: landslideIcon }, - { name: '泥石流隐患点', link: debrisFlowIcon }, - { name: '风险区域', link: riskAreaIcon }, - ]; - - return { legendList }; -}; diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts index 089ce4e..409eb5c 100644 --- a/src/hooks/rainstorm/useRainDisasterChain.ts +++ b/src/hooks/rainstorm/useRainDisasterChain.ts @@ -5,12 +5,20 @@ import { PointType } from '@/types/common/DisasterType'; import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils'; import config from '@/config/config.json'; import { useStatusStore } from '@/stores/useStatusStore'; +import { + debrisFlowIcon, + flashFloodIcon, + landslideIcon, + riskAreaIcon, + waterLoggingIcon, +} from '@/assets'; /** - * 暴雨灾害链影响点列表钩子函数 - * @returns 搜索条件、表格数据、分页配置及相关方法 + * 暴雨灾害链 + * @returns */ export const useRainDisasterChain = () => { + // ================灾害链影响点列表================================ /** * 搜索条件 */ @@ -73,6 +81,19 @@ export const useRainDisasterChain = () => { paginationConfig.value.currentPage = value; }; + // ================图例================================ + /** + * 图例数据 + */ + const legendList = [ + { name: '滑坡隐患点', link: landslideIcon }, + { name: '泥石流隐患点', link: debrisFlowIcon }, + { name: '山洪隐患点', link: flashFloodIcon }, + { name: '内涝隐患点', link: waterLoggingIcon }, + { name: '风险区域', link: riskAreaIcon }, + ]; + + // ================左侧按钮================================ /** * 左侧按钮信息 */ @@ -139,6 +160,7 @@ export const useRainDisasterChain = () => { }, ]; + // ================右侧按钮================================ /** * 右侧按钮信息 */ @@ -185,6 +207,10 @@ export const useRainDisasterChain = () => { }, ]; + // ================控制面板================================ + /** + * 控制面板信息 + */ const controlPanel = [ { name: '显示医院', @@ -293,6 +319,7 @@ export const useRainDisasterChain = () => { tableDatas, tableColumns, paginationConfig, + legendList, leftButtonInfo, rightButtonInfo, controlPanel, diff --git a/src/hooks/rainstorm/useRainLegend.ts b/src/hooks/rainstorm/useRainLegend.ts deleted file mode 100644 index 6230347..0000000 --- a/src/hooks/rainstorm/useRainLegend.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { - debrisFlowIcon, - flashFloodIcon, - landslideIcon, - riskAreaIcon, - waterLoggingIcon, -} from '@/assets'; - -/** - * 暴雨图例钩子函数 - * @returns 图例数据列表 - */ -export const useRainLegend = () => { - /** - * 图例数据 - */ - const legendList = [ - { name: '滑坡隐患点', link: landslideIcon }, - { name: '泥石流隐患点', link: debrisFlowIcon }, - { name: '山洪隐患点', link: flashFloodIcon }, - { name: '内涝隐患点', link: waterLoggingIcon }, - { name: '风险区域', link: riskAreaIcon }, - ]; - - return { legendList }; -}; diff --git a/src/hooks/useLayerControl.ts b/src/hooks/useLayerControl.ts new file mode 100644 index 0000000..ada716d --- /dev/null +++ b/src/hooks/useLayerControl.ts @@ -0,0 +1,42 @@ +import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore'; +import { LoadingResource } from '@/types/common/LoadingResourceType'; +import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils'; + +/** + * 控制面板显示隐藏逻辑 + */ +export const useLayerControl = () => { + /** + * 点击显示隐藏隐患点 + * @param status - 显示隐藏状态 + */ + const clickHiddenDangerPoint = (status: unknown) => { + if (status as boolean) { + // 显示隐患点 + CesiumUtilsSingleton.batchShowPrimitives( + useLoadingResourceStore().getLoadingResource( + LoadingResource.HIDDEN_DANGER_POINT + ) + ); + + // 显示风险点 + CesiumUtilsSingleton.batchShowPrimitives( + useLoadingResourceStore().getLoadingResource(LoadingResource.RISK_POINT) + ); + } else { + // 隐藏隐患点 + CesiumUtilsSingleton.batchHidePrimitives( + useLoadingResourceStore().getLoadingResource( + LoadingResource.HIDDEN_DANGER_POINT + ) + ); + + // 隐藏风险点 + CesiumUtilsSingleton.batchHidePrimitives( + useLoadingResourceStore().getLoadingResource(LoadingResource.RISK_POINT) + ); + } + }; + + return { clickHiddenDangerPoint }; +}; diff --git a/src/views/home/earthquake/EarthquakeView.vue b/src/views/home/earthquake/EarthquakeView.vue index aa1ceea..29c386c 100644 --- a/src/views/home/earthquake/EarthquakeView.vue +++ b/src/views/home/earthquake/EarthquakeView.vue @@ -38,7 +38,6 @@ import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue'; import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue'; import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain'; - import { useEarthquakeLegend } from '@/hooks/earthquake/useEarthquakeLegend'; import { DisasterType } from '@/types/common/DisasterType.ts'; import { watch } from 'vue'; import { useRoute } from 'vue-router'; @@ -51,6 +50,7 @@ tableDatas, tableColumns, paginationConfig, + legendList, leftButtonInfo, rightButtonInfo, controlPanel, @@ -58,8 +58,6 @@ changeCurrentPage, } = useEarthquakeDisasterChain(); - const { legendList } = useEarthquakeLegend(); - // 监听条件变化 watch( conditions, diff --git a/src/views/home/rainstorm/RainstormView.vue b/src/views/home/rainstorm/RainstormView.vue index 017056c..7822f87 100644 --- a/src/views/home/rainstorm/RainstormView.vue +++ b/src/views/home/rainstorm/RainstormView.vue @@ -38,7 +38,6 @@ import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue'; import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue'; import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain'; - import { useRainLegend } from '@/hooks/rainstorm/useRainLegend'; import { DisasterType } from '@/types/common/DisasterType.ts'; import { watch } from 'vue'; import { useRoute } from 'vue-router'; @@ -51,6 +50,7 @@ tableDatas, tableColumns, paginationConfig, + legendList, leftButtonInfo, rightButtonInfo, controlPanel, @@ -58,8 +58,6 @@ changeCurrentPage, } = useRainDisasterChain(); - const { legendList } = useRainLegend(); - // 监听条件变化 watch( conditions,