From d61e1edc20c16a68b00a217acfbc0955d972c68f Mon Sep 17 00:00:00 2001 From: zhoubj <2647555799@qq.com> Date: Sat, 23 May 2026 16:30:09 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +--- .env.production | 4 +--- .gitignore | 2 ++ 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/.env.development b/.env.development index 522525f..2a08ab2 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,3 @@ -NEW_FILE_CODE - # 后端地址 VITE_BACKEND_BASE_URL=http://localhost:8081 @@ -13,4 +11,4 @@ VITE_GEOSERVER_BASE_URL=http://47.92.216.173:4019/geoserver/xian VITE_WEBSOCKET_URL=http://localhost:8081/websocket # 文件地址 -VITE_FILE_URL=http://localhost:8083 \ No newline at end of file +VITE_FILE_URL=http://localhost:8083 diff --git a/.env.production b/.env.production index 7248402..857fd68 100644 --- a/.env.production +++ b/.env.production @@ -1,5 +1,3 @@ -NEW_FILE_CODE - # 后端地址 VITE_BACKEND_BASE_URL=http://localhost:8080 @@ -13,4 +11,4 @@ VITE_GEOSERVER_BASE_URL=http://10.22.245.246/geoserver/xian VITE_WEBSOCKET_URL=http://localhost:8080/websocket # 文件地址 -VITE_FILE_URL=http://localhost:8083 \ No newline at end of file +VITE_FILE_URL=http://localhost:8083 diff --git a/.gitignore b/.gitignore index 86f2c24..1265315 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,5 @@ dist-ssr auto-imports.d.ts components.d.ts pnpm-lock.yaml +/package-lock.json +/pnpm-workspace.yaml From fed824272f3a5195540345fba66013d39736bd25 Mon Sep 17 00:00:00 2001 From: wzy-warehouse <18135009705@163.com> Date: Wed, 3 Jun 2026 15:27:51 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E7=AE=80=E5=8D=95=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/json/{LanTIan.json => LanTian.json} | 0 src/hooks/rainstorm/useRainDisasterChain.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/assets/json/{LanTIan.json => LanTian.json} (100%) diff --git a/src/assets/json/LanTIan.json b/src/assets/json/LanTian.json similarity index 100% rename from src/assets/json/LanTIan.json rename to src/assets/json/LanTian.json diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts index 48de261..0d83299 100644 --- a/src/hooks/rainstorm/useRainDisasterChain.ts +++ b/src/hooks/rainstorm/useRainDisasterChain.ts @@ -175,7 +175,7 @@ export const useRainDisasterChain = () => { */ const rightButtonInfo = [ { - name: '降雨推演', + name: '自动推演', callback: (status: unknown) => rightHandle.rainstormSimulation(status), }, { From c5615345c8c9309c1f3b6f792cddfa6cf1214858 Mon Sep 17 00:00:00 2001 From: wzy-warehouse <18135009705@163.com> Date: Fri, 12 Jun 2026 10:39:27 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9A=B4=E9=9B=A8?= =?UTF-8?q?=E7=81=BE=E5=AE=B3=E9=93=BE=E4=B8=AD=E7=81=BE=E5=AE=B3=E9=93=BE?= =?UTF-8?q?=E5=BD=B1=E5=93=8D=E7=82=B9=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/rainstorm/useRainDisasterChain.ts | 84 --------------------- src/stores/useDisasterChainTableStore.ts | 75 ++++++++++++++++++ src/views/home/rainstorm/RainstormView.vue | 48 +++++++----- 3 files changed, 105 insertions(+), 102 deletions(-) create mode 100644 src/stores/useDisasterChainTableStore.ts 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' }, + ]; + }); From 1ca5ed016fded25c0efef7b11f366088bfd15688 Mon Sep 17 00:00:00 2001 From: wzy-warehouse <18135009705@163.com> Date: Fri, 12 Jun 2026 10:42:54 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9C=B0=E9=9C=87?= =?UTF-8?q?=E7=81=BE=E5=AE=B3=E9=93=BE=E5=BD=B1=E5=93=8D=E7=82=B9=E5=88=97?= =?UTF-8?q?=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../earthquake/useEarthquakeDisasterChain.ts | 75 +------------------ src/views/home/earthquake/EarthquakeView.vue | 64 ++++++++-------- 2 files changed, 33 insertions(+), 106 deletions(-) diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts index 4b0b834..933ed0b 100644 --- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts +++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts @@ -1,7 +1,3 @@ -import { ref } 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 { useLayerControl } from '../rain-earthquake/useLayerControl.ts'; @@ -25,7 +21,7 @@ import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts'; import { LoadingResource } from '@/types/common/LoadingResourceType.ts'; /** - * 暴雨灾害链 + * 地震灾害链 * @returns */ export const useEarthquakeDisasterChain = () => { @@ -34,68 +30,6 @@ export const useEarthquakeDisasterChain = () => { const resourceStore = useLoadingResourceStore(); const rightHandle = useRightHandle(); - // ================灾害链影响点列表================================ - /** - * 搜索条件 - */ - const conditions = ref({ - tableData: '', - hiddenPoint: PointType.LANDSLIDE, - }); - - /** - * 下拉选项 - */ - const selectOptions = [ - { value: PointType.LANDSLIDE, label: '滑坡' }, - { value: PointType.DEBRIS_FLOW, label: '泥石流' }, - { value: PointType.RISK_AREA, label: '风险区' }, - ]; - - /** - * 表格数据 - */ - const tableDatas = ref([]); - - /** - * 表头配置 - */ - const tableColumns = [ - { 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; - }; - // ================左侧按钮================================ /** * 左侧按钮信息 @@ -356,15 +290,8 @@ export const useEarthquakeDisasterChain = () => { }; return { - conditions, - selectOptions, - tableDatas, - tableColumns, - paginationConfig, leftButtonInfo, rightButtonInfo, controlPanel: getControlPanel(), - changeConditions, - changeCurrentPage, }; }; diff --git a/src/views/home/earthquake/EarthquakeView.vue b/src/views/home/earthquake/EarthquakeView.vue index fc78ba1..47890f9 100644 --- a/src/views/home/earthquake/EarthquakeView.vue +++ b/src/views/home/earthquake/EarthquakeView.vue @@ -9,23 +9,23 @@ @@ -63,36 +63,36 @@ 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 { useStatusStore } from '@/stores/useStatusStore'; - import { DisasterType } from '@/types/common/DisasterType.ts'; - import { watch } from 'vue'; + import { DisasterType, PointType } from '@/types/common/DisasterType.ts'; + import { onBeforeMount } from 'vue'; import { useRoute } from 'vue-router'; const route = useRoute(); - const { - conditions, - selectOptions, - tableDatas, - tableColumns, - paginationConfig, - leftButtonInfo, - rightButtonInfo, - controlPanel, - changeConditions, - changeCurrentPage, - } = useEarthquakeDisasterChain(); + const { leftButtonInfo, rightButtonInfo, controlPanel } = + useEarthquakeDisasterChain(); const statusStore = useStatusStore(); - // 监听条件变化 - watch( - conditions, - () => { - console.log('条件改变'); - }, - { deep: true } - ); + const disasterChainTableStore = useDisasterChainTableStore(); + + onBeforeMount(() => { + // 设置相关数据 + disasterChainTableStore.selectOptions = [ + { value: PointType.LANDSLIDE, label: '滑坡' }, + { value: PointType.DEBRIS_FLOW, label: '泥石流' }, + { value: PointType.RISK_AREA, label: '风险区' }, + ]; + + disasterChainTableStore.tableColumns = [ + { title: '名称', key: 'disasterName' }, + { title: '位置', key: 'position' }, + { title: '规模等级', key: 'scaleGrade' }, + { title: '险情等级', key: 'riskGrade' }, + ]; + }); 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 5/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9A=B4=E9=9B=A8?= =?UTF-8?q?=E5=9C=B0=E9=9C=87=E7=81=BE=E5=AE=B3=E9=93=BE=E5=BD=B1=E5=93=8D?= =?UTF-8?q?=E7=82=B9=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); + }; });