修改暴雨地震灾害链影响点列表

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<SelectOption[]>([]);
+
+  /**
+   * 表格列配置
+   */
+  const tableColumns = ref<TableColumn[]>([]);
+
+  /**
+   * 搜索条件
+   */
+  const conditions = ref<SearchConditions>({
+    tableData: '',
+    hiddenPoint: PointType.LANDSLIDE,
+  });
+
+  /**
+   * 表格数据
+   */
+  const tableDatas = ref<XianHiddenDangerSpots[]>([]);
+
+  /**
+   * 分页配置
+   */
+  const paginationConfig = ref<PaginationType>({
+    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,
+  };
+};

src/stores/useDisasterChainTableStore.ts

@@ -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<XianHiddenDangerSpots[]>([]);
-
-    /**
-     * 表头配置
-     */
-    const tableColumns = ref();
-
-    /**
-     * 分页配置
-     */
-    const paginationConfig = ref<PaginationType>({
-      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,
-    };
-  }
-);

src/views/home/earthquake/EarthquakeView.vue

@@ -20,12 +20,12 @@
         statusStore.appLoadingCompleted &&
         statusStore.uiComponents.disasterChainPointShow.loading
       "
-      :select-options="disasterChainTableStore.selectOptions"
+      :select-options="selectOptions"
-      :table-data-list="disasterChainTableStore.tableDatas"
+      :table-data-list="tableDatas"
-      :table-columns="disasterChainTableStore.tableColumns"
+      :table-columns="tableColumns"
-      :page-option="disasterChainTableStore.paginationConfig"
+      :page-option="paginationConfig"
-      @change-conditions="disasterChainTableStore.changeConditions"
+      @change-conditions="changeConditions"
-      @change-current-page="disasterChainTableStore.changeCurrentPage"
+      @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);
+    };
   });
 </script>
 

src/views/home/rainstorm/RainstormView.vue

@@ -12,12 +12,12 @@
         statusStore.appLoadingCompleted &&
         statusStore.uiComponents.disasterChainPointShow.loading
       "
-      :select-options="disasterChainTableStore.selectOptions"
+      :select-options="selectOptions"
-      :table-data-list="disasterChainTableStore.tableDatas"
+      :table-data-list="tableDatas"
-      :table-columns="disasterChainTableStore.tableColumns"
+      :table-columns="tableColumns"
-      :page-option="disasterChainTableStore.paginationConfig"
+      :page-option="paginationConfig"
-      @change-conditions="disasterChainTableStore.changeConditions"
+      @change-conditions="changeConditions"
-      @change-current-page="disasterChainTableStore.changeCurrentPage"
+      @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);
+    };
   });
 </script>