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 16908f3..1265315 100644 --- a/.gitignore +++ b/.gitignore @@ -26,4 +26,5 @@ dist-ssr auto-imports.d.ts components.d.ts pnpm-lock.yaml -package-lock.json +/package-lock.json +/pnpm-workspace.yaml 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/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/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts index 48de261..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; - }; - // ================左侧按钮================================ /** * 左侧按钮信息 @@ -175,7 +108,7 @@ export const useRainDisasterChain = () => { */ const rightButtonInfo = [ { - name: '降雨推演', + name: '自动推演', callback: (status: unknown) => rightHandle.rainstormSimulation(status), }, { @@ -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/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/views/home/earthquake/EarthquakeView.vue b/src/views/home/earthquake/EarthquakeView.vue index fc78ba1..e25da63 100644 --- a/src/views/home/earthquake/EarthquakeView.vue +++ b/src/views/home/earthquake/EarthquakeView.vue @@ -9,16 +9,16 @@ { - console.log('条件改变'); - }, - { deep: true } - ); + const { + selectOptions, + tableColumns, + tableDatas, + paginationConfig, + changeConditions, + setConditions, + changeCurrentPage, + setSelectOptions, + setTableColumns, + } = useDisasterChainTable(); + + onBeforeMount(() => { + // 设置下拉选项 + setSelectOptions([ + { value: PointType.LANDSLIDE, label: '滑坡' }, + { value: PointType.DEBRIS_FLOW, label: '泥石流' }, + { value: PointType.RISK_AREA, label: '风险区' }, + ]); + + // 设置表格列配置 + 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 be2d0d9..35eeb2a 100644 --- a/src/views/home/rainstorm/RainstormView.vue +++ b/src/views/home/rainstorm/RainstormView.vue @@ -71,25 +71,59 @@ import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue'; import StepComponent from '@/component/rain-earthquake/StepComponent.vue'; import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain'; + import { + useDisasterChainTable, + type SearchConditions, + } from '@/hooks/useDisasterChainTable'; 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 { + selectOptions, + tableColumns, + tableDatas, + paginationConfig, + changeConditions, + setConditions, + changeCurrentPage, + setSelectOptions, + setTableColumns, + } = useDisasterChainTable(); + + onBeforeMount(() => { + // 设置下拉选项 + setSelectOptions([ + { value: PointType.LANDSLIDE, label: '滑坡' }, + { value: PointType.DEBRIS_FLOW, label: '泥石流' }, + { value: PointType.FLASH_FLOOD, label: '山洪' }, + { value: PointType.WATER_LOGGING, label: '内涝' }, + ]); + + // 设置表格列配置 + setTableColumns([ + { title: '名称', key: 'disasterName' }, + { title: '位置', key: 'position' }, + { title: '规模等级', key: 'scaleGrade' }, + { title: '险情等级', key: 'riskGrade' }, + ]); + + /** + * 条件改变执行 + * @param value + */ + changeConditions.value = (value: SearchConditions) => { + setConditions(value); + }; + });