From 2b772a937cea33b519ec9fb8635286bfc8230c14 Mon Sep 17 00:00:00 2001 From: wzy-warehouse <18135009705@163.com> Date: Fri, 12 Jun 2026 11:20:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9A=B4=E9=9B=A8=E5=9C=B0?= =?UTF-8?q?=E9=9C=87=E7=81=BE=E5=AE=B3=E9=93=BE=E5=BD=B1=E5=93=8D=E7=82=B9?= =?UTF-8?q?=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useDisasterChainTable.ts | 139 +++++++++++++++++++ src/stores/useDisasterChainTableStore.ts | 75 ---------- src/views/home/earthquake/EarthquakeView.vue | 48 +++++-- src/views/home/rainstorm/RainstormView.vue | 48 +++++-- 4 files changed, 209 insertions(+), 101 deletions(-) create mode 100644 src/hooks/useDisasterChainTable.ts delete mode 100644 src/stores/useDisasterChainTableStore.ts diff --git a/src/hooks/useDisasterChainTable.ts b/src/hooks/useDisasterChainTable.ts new file mode 100644 index 0000000..0185aa4 --- /dev/null +++ b/src/hooks/useDisasterChainTable.ts @@ -0,0 +1,139 @@ +import { ref } from 'vue'; +import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'; +import type { PaginationType } from '@/types/common/PaginationType'; +import { PointType } from '@/types/common/DisasterType'; + +/** + * 灾害链表格数据选项 + */ +export interface SelectOption { + value: PointType; + label: string; +} + +/** + * 表格列配置 + */ +export interface TableColumn { + title: string; + key: string; +} + +/** + * 搜索条件 + */ +export interface SearchConditions { + tableData: string; + hiddenPoint: PointType; +} + +/** + * 灾害链表格 + * 负责管理灾害链影响点列表的数据获取、搜索和分页 + * @returns 表格相关的状态和方法 + */ +export const useDisasterChainTable = () => { + // ==================== 状态 ==================== + + /** + * 下拉选项配置 + */ + const selectOptions = ref([]); + + /** + * 表格列配置 + */ + const tableColumns = ref([]); + + /** + * 搜索条件 + */ + const conditions = ref({ + tableData: '', + hiddenPoint: PointType.LANDSLIDE, + }); + + /** + * 表格数据 + */ + const tableDatas = ref([]); + + /** + * 分页配置 + */ + const paginationConfig = ref({ + currentPage: 1, + pageSize: 10, + total: 0, + totalPage: 0, + }); + + /** + * 加载状态 + */ + const loading = ref(false); + + /** + * 修改搜索条件 + * @param value - 新的搜索条件 + */ + const changeConditions = ref((value: SearchConditions): void => { + conditions.value = value; + }); + + /** + * 修改页码 + * @param value - 新的页码 + */ + const changeCurrentPage = (value: number) => { + paginationConfig.value.currentPage = value; + }; + + /** + * 设置条件 + * @param newConditions 新的条件 + */ + const setConditions = (newConditions: SearchConditions) => { + conditions.value = newConditions; + }; + + /** + * 获取条件 + * @returns + */ + const getConditions = () => conditions.value; + + /** + * 设置下拉选项 + * @param options - 下拉选项数组 + */ + const setSelectOptions = (options: SelectOption[]) => { + selectOptions.value = options; + }; + + /** + * 设置表格列配置 + * @param columns - 表格列配置数组 + */ + const setTableColumns = (columns: TableColumn[]) => { + tableColumns.value = columns; + }; + + // ==================== 返回 ==================== + + return { + // 状态 + selectOptions, + tableColumns, + conditions, + tableDatas, + paginationConfig, + loading, + changeConditions, + setConditions, + getConditions, + changeCurrentPage, + setSelectOptions, + setTableColumns, + }; +}; diff --git a/src/stores/useDisasterChainTableStore.ts b/src/stores/useDisasterChainTableStore.ts deleted file mode 100644 index 3551663..0000000 --- a/src/stores/useDisasterChainTableStore.ts +++ /dev/null @@ -1,75 +0,0 @@ -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/earthquake/EarthquakeView.vue b/src/views/home/earthquake/EarthquakeView.vue index 47890f9..e25da63 100644 --- a/src/views/home/earthquake/EarthquakeView.vue +++ b/src/views/home/earthquake/EarthquakeView.vue @@ -20,12 +20,12 @@ statusStore.appLoadingCompleted && statusStore.uiComponents.disasterChainPointShow.loading " - :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" + :select-options="selectOptions" + :table-data-list="tableDatas" + :table-columns="tableColumns" + :page-option="paginationConfig" + @change-conditions="changeConditions" + @change-current-page="changeCurrentPage" /> @@ -63,7 +63,10 @@ import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue'; import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue'; import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain'; - import { useDisasterChainTableStore } from '@/stores/useDisasterChainTableStore'; + import { + useDisasterChainTable, + type SearchConditions, + } from '@/hooks/useDisasterChainTable'; import { useStatusStore } from '@/stores/useStatusStore'; import { DisasterType, PointType } from '@/types/common/DisasterType.ts'; import { onBeforeMount } from 'vue'; @@ -76,22 +79,41 @@ const statusStore = useStatusStore(); - const disasterChainTableStore = useDisasterChainTableStore(); + const { + selectOptions, + tableColumns, + tableDatas, + paginationConfig, + changeConditions, + setConditions, + changeCurrentPage, + setSelectOptions, + setTableColumns, + } = useDisasterChainTable(); onBeforeMount(() => { - // 设置相关数据 - disasterChainTableStore.selectOptions = [ + // 设置下拉选项 + setSelectOptions([ { value: PointType.LANDSLIDE, label: '滑坡' }, { value: PointType.DEBRIS_FLOW, label: '泥石流' }, { value: PointType.RISK_AREA, label: '风险区' }, - ]; + ]); - disasterChainTableStore.tableColumns = [ + // 设置表格列配置 + setTableColumns([ { title: '名称', key: 'disasterName' }, { title: '位置', key: 'position' }, { title: '规模等级', key: 'scaleGrade' }, { title: '险情等级', key: 'riskGrade' }, - ]; + ]); + + /** + * 条件改变执行 + * @param value + */ + changeConditions.value = (value: SearchConditions) => { + setConditions(value); + }; }); diff --git a/src/views/home/rainstorm/RainstormView.vue b/src/views/home/rainstorm/RainstormView.vue index 5146166..35eeb2a 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="disasterChainTableStore.selectOptions" - :table-data-list="disasterChainTableStore.tableDatas" - :table-columns="disasterChainTableStore.tableColumns" - :page-option="disasterChainTableStore.paginationConfig" - @change-conditions="disasterChainTableStore.changeConditions" - @change-current-page="disasterChainTableStore.changeCurrentPage" + :select-options="selectOptions" + :table-data-list="tableDatas" + :table-columns="tableColumns" + :page-option="paginationConfig" + @change-conditions="changeConditions" + @change-current-page="changeCurrentPage" /> @@ -71,7 +71,10 @@ 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 { + useDisasterChainTable, + type SearchConditions, + } from '@/hooks/useDisasterChainTable'; import { useStatusStore } from '@/stores/useStatusStore'; import { DisasterType, PointType } from '@/types/common/DisasterType.ts'; import { onBeforeMount } from 'vue'; @@ -84,23 +87,42 @@ const statusStore = useStatusStore(); - const disasterChainTableStore = useDisasterChainTableStore(); + const { + selectOptions, + tableColumns, + tableDatas, + paginationConfig, + changeConditions, + setConditions, + changeCurrentPage, + setSelectOptions, + setTableColumns, + } = useDisasterChainTable(); onBeforeMount(() => { - // 设置相关数据 - disasterChainTableStore.selectOptions = [ + // 设置下拉选项 + setSelectOptions([ { value: PointType.LANDSLIDE, label: '滑坡' }, { value: PointType.DEBRIS_FLOW, label: '泥石流' }, { value: PointType.FLASH_FLOOD, label: '山洪' }, { value: PointType.WATER_LOGGING, label: '内涝' }, - ]; + ]); - disasterChainTableStore.tableColumns = [ + // 设置表格列配置 + setTableColumns([ { title: '名称', key: 'disasterName' }, { title: '位置', key: 'position' }, { title: '规模等级', key: 'scaleGrade' }, { title: '险情等级', key: 'riskGrade' }, - ]; + ]); + + /** + * 条件改变执行 + * @param value + */ + changeConditions.value = (value: SearchConditions) => { + setConditions(value); + }; });