diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts index 0d83299..ed1cacf 100644 --- a/src/hooks/rainstorm/useRainDisasterChain.ts +++ b/src/hooks/rainstorm/useRainDisasterChain.ts @@ -1,7 +1,3 @@ -import { ref, watch } from 'vue'; -import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'; -import type { PaginationType } from '@/types/common/PaginationType'; -import { PointType } from '@/types/common/DisasterType'; import { ControlPanelCategory } from '@/types/common/ControlPanelCategory'; import { useStatusStore } from '@/stores/useStatusStore'; import { @@ -41,69 +37,6 @@ export const useRainDisasterChain = () => { statusStore.weatherLayers.showRainfallGrid.loading = true; statusStore.weatherLayers.showRainfallGrid.show = true; - // ================灾害链影响点列表================================ - /** - * 搜索条件 - */ - const conditions = ref({ - tableData: '', - hiddenPoint: PointType.LANDSLIDE, - }); - - /** - * 下拉选项 - */ - const selectOptions = ref([ - { value: PointType.LANDSLIDE, label: '滑坡' }, - { value: PointType.DEBRIS_FLOW, label: '泥石流' }, - { value: PointType.FLASH_FLOOD, label: '山洪' }, - { value: PointType.WATER_LOGGING, label: '内涝' }, - ]); - - /** - * 表格数据 - */ - const tableDatas = ref([]); - - /** - * 表头配置 - */ - const tableColumns = ref([ - { title: '名称', key: 'disasterName' }, - { title: '位置', key: 'position' }, - { title: '规模等级', key: 'scaleGrade' }, - { title: '险情等级', key: 'riskGrade' }, - ]); - - /** - * 分页配置 - */ - const paginationConfig = ref({ - currentPage: 1, - pageSize: 10, - total: 10, - totalPage: 1, - }); - - /** - * 修改搜索条件 - * @param value - 新的搜索条件 - */ - const changeConditions = (value: { - tableData: string; - hiddenPoint: PointType; - }): void => { - conditions.value = value; - }; - - /** - * 修改页码 - * @param value - 新的页码 - */ - const changeCurrentPage = (value: number) => { - paginationConfig.value.currentPage = value; - }; - // ================左侧按钮================================ /** * 左侧按钮信息 @@ -216,7 +149,6 @@ export const useRainDisasterChain = () => { * 控制面板信息 */ const getControlPanel = () => { - return [ // 灾害隐患点类别 { @@ -402,25 +334,9 @@ export const useRainDisasterChain = () => { ]; }; - // 监听条件变化 - watch( - conditions, - () => { - console.log('条件改变'); - }, - { deep: true } - ); - return { - conditions, - selectOptions, - tableDatas, - tableColumns, - paginationConfig, leftButtonInfo, rightButtonInfo, - changeConditions, - changeCurrentPage, controlPanel: getControlPanel(), }; }; diff --git a/src/stores/useDisasterChainTableStore.ts b/src/stores/useDisasterChainTableStore.ts new file mode 100644 index 0000000..3551663 --- /dev/null +++ b/src/stores/useDisasterChainTableStore.ts @@ -0,0 +1,75 @@ +import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'; +import { PointType } from '@/types/common/DisasterType'; +import type { PaginationType } from '@/types/common/PaginationType'; +import { defineStore } from 'pinia'; +import { ref } from 'vue'; + +/** + * 灾害链影响点列表 + */ +export const useDisasterChainTableStore = defineStore( + 'disasterChainTable', + () => { + // ================灾害链影响点列表================================ + /** + * 搜索条件 + */ + const conditions = ref({ + tableData: '', + hiddenPoint: PointType.LANDSLIDE, + }); + /** + * 下拉选项 + */ + const selectOptions = ref(); + + /** + * 表格数据 + */ + const tableDatas = ref([]); + + /** + * 表头配置 + */ + const tableColumns = ref(); + + /** + * 分页配置 + */ + const paginationConfig = ref({ + currentPage: 1, + pageSize: 10, + total: 0, + totalPage: 0, + }); + + /** + * 修改搜索条件 + * @param value - 新的搜索条件 + */ + const changeConditions = (value: { + tableData: string; + hiddenPoint: PointType; + }): void => { + conditions.value = value; + }; + + /** + * 修改页码 + * @param value - 新的页码 + */ + const changeCurrentPage = (value: number) => { + paginationConfig.value.currentPage = value; + }; + + return { + conditions, + selectOptions, + tableDatas, + tableColumns, + paginationConfig, + changeConditions, + changeCurrentPage, + }; + } +); diff --git a/src/views/home/rainstorm/RainstormView.vue b/src/views/home/rainstorm/RainstormView.vue index be2d0d9..5146166 100644 --- a/src/views/home/rainstorm/RainstormView.vue +++ b/src/views/home/rainstorm/RainstormView.vue @@ -12,12 +12,12 @@ statusStore.appLoadingCompleted && statusStore.uiComponents.disasterChainPointShow.loading " - :select-options="selectOptions" - :table-data-list="tableDatas" - :table-columns="tableColumns" - :page-option="paginationConfig" - @change-conditions="changeConditions" - @change-current-page="changeCurrentPage" + :select-options="disasterChainTableStore.selectOptions" + :table-data-list="disasterChainTableStore.tableDatas" + :table-columns="disasterChainTableStore.tableColumns" + :page-option="disasterChainTableStore.paginationConfig" + @change-conditions="disasterChainTableStore.changeConditions" + @change-current-page="disasterChainTableStore.changeCurrentPage" /> @@ -71,25 +71,37 @@ import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue'; import StepComponent from '@/component/rain-earthquake/StepComponent.vue'; import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain'; + import { useDisasterChainTableStore } from '@/stores/useDisasterChainTableStore'; import { useStatusStore } from '@/stores/useStatusStore'; - import { DisasterType } from '@/types/common/DisasterType.ts'; + import { DisasterType, PointType } from '@/types/common/DisasterType.ts'; + import { onBeforeMount } from 'vue'; import { useRoute } from 'vue-router'; const route = useRoute(); - const { - selectOptions, - tableDatas, - tableColumns, - paginationConfig, - leftButtonInfo, - rightButtonInfo, - controlPanel, - changeConditions, - changeCurrentPage, - } = useRainDisasterChain(); + const { leftButtonInfo, rightButtonInfo, controlPanel } = + useRainDisasterChain(); const statusStore = useStatusStore(); + + const disasterChainTableStore = useDisasterChainTableStore(); + + onBeforeMount(() => { + // 设置相关数据 + disasterChainTableStore.selectOptions = [ + { value: PointType.LANDSLIDE, label: '滑坡' }, + { value: PointType.DEBRIS_FLOW, label: '泥石流' }, + { value: PointType.FLASH_FLOOD, label: '山洪' }, + { value: PointType.WATER_LOGGING, label: '内涝' }, + ]; + + disasterChainTableStore.tableColumns = [ + { title: '名称', key: 'disasterName' }, + { title: '位置', key: 'position' }, + { title: '规模等级', key: 'scaleGrade' }, + { title: '险情等级', key: 'riskGrade' }, + ]; + });