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

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<XianHiddenDangerSpots[]>([]);
-
-  /**
-   * 表头配置
-   */
-  const tableColumns = ref([
-    { title: '名称', key: 'disasterName' },
-    { title: '位置', key: 'position' },
-    { title: '规模等级', key: 'scaleGrade' },
-    { title: '险情等级', key: 'riskGrade' },
-  ]);
-
-  /**
-   * 分页配置
-   */
-  const paginationConfig = ref<PaginationType>({
-    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(),
   };
 };

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<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/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' },
+    ];
+  });
 </script>
 
 <style scoped></style>