修改基础的一些配置

src/api/api.ts

@@ -1,4 +1,4 @@
-import type { DisasterType } from '@/types/common/DisasterType'
+import type { DisasterType } from '@/types/common/DisasterType.ts'
 import { getSm2PublicKey } from './crypto'
 import { getBasePoins as getHiddenDangerBasePoints, getPointDetailById as getHiddenDangerPointDetailById} from './hidden-danger-spots'
 import { getBasePoins as getRiskBasePoints, getPointDetailById as getRiskPointDetailById} from './risk-spots'

src/api/hidden-danger-spots.ts

@@ -1,6 +1,6 @@
 import type { ApiResponse } from "@/types/ApiResponse"
 import type { XianHiddenDangerSpots } from "@/types/base/XianHiddenDangerSpots"
-import type { DisasterType } from "@/types/common/DisasterType"
+import type { DisasterType } from "@/types/common/DisasterType.ts"
 import httpInstance from "@/utils/request/http"
 
 /**

src/component/rain-earthquake/BasicComponent.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
   import MapComponent from '@/component/map/MapComponent.vue';
-  import type { DisasterType } from '@/types/common/DisasterType';
+  import type { DisasterType } from '@/types/common/DisasterType.ts';
   import HiddenPointComponent from './HiddenPointComponent.vue';
   import RiskPointComponent from './RiskPointComponent.vue';
   import { useViewerStore } from '@/stores/useViewerStore';

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -74,13 +74,13 @@
 
 <script lang="ts" setup>
   import type { Point } from '@/types/base/Point';
-  import { HiddenPointType } from '@/types/common/DisasterType';
+  import { PointType } from '@/types/common/DisasterType';
   import type { PaginationType } from '@/types/common/PaginationType';
   import { ref, watch, computed, type Ref } from 'vue';
 
   // 接收父组件的参数
   const props = defineProps<{
-    selectOptions: { label: string; value: HiddenPointType }[];
+    selectOptions: { label: string; value: PointType }[];
     tableDataList: Point[];
     tableColumns: { title: string; key: string }[];
     pageOption: PaginationType;
@@ -90,7 +90,7 @@
   const emits = defineEmits<{
     (
       e: 'changeConditions',
-      value: { tableData: string; hiddenPoint: HiddenPointType }
+      value: { tableData: string; hiddenPoint: PointType }
     ): void;
     (e: 'changeCurrentPage', value: number): void;
   }>();
@@ -101,8 +101,10 @@
   const btnStatus: Ref<boolean> = ref(false);
 
   // 搜索条件
-  const conditions: Ref<{ tableData: string; hiddenPoint: HiddenPointType }> =
-    ref({ tableData: '', hiddenPoint: HiddenPointType.LANDSLIDE });
+  const conditions: Ref<{ tableData: string; hiddenPoint: PointType }> = ref({
+    tableData: '',
+    hiddenPoint: PointType.LANDSLIDE,
+  });
 
   // ==================== 计算属性 ====================
 

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-  import { DisasterType } from '@/types/common/DisasterType';
+  import { DisasterType } from '@/types/common/DisasterType.ts';
   import { ref, watch } from 'vue';
   import { $api } from '@/api/api.ts';
   import type { Point } from '@/types/base/Point';

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -0,0 +1,82 @@
+import { ref } from 'vue';
+import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+import type { PaginationType } from '@/types/common/PaginationType';
+import { PointType } from '@/types/common/DisasterType';
+
+/**
+ * 暴雨灾害链影响点列表钩子函数
+ * @returns 搜索条件、表格数据、分页配置及相关方法
+ */
+export const useEarthquakeDisasterChain = () => {
+  /**
+   * 搜索条件
+   */
+  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<XianHiddenDangerSpots[]>([]);
+
+  /**
+   * 表头配置
+   */
+  const tableColumns = [
+    { 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 - 新的搜索条件
+   */
+  function changeConditions(value: {
+    tableData: string;
+    hiddenPoint: PointType;
+  }): void {
+    conditions.value = value;
+  }
+
+  /**
+   * 修改页码
+   * @param value - 新的页码
+   */
+  function changeCurrentPage(value: number) {
+    paginationConfig.value.currentPage = value;
+  }
+
+  // 把所有需要用到的数据/方法 return 出去
+  return {
+    conditions,
+    selectOptions,
+    tableDatas,
+    tableColumns,
+    paginationConfig,
+    changeConditions,
+    changeCurrentPage,
+  };
+};

src/hooks/earthquake/useEarthquakeLegend.ts

@@ -0,0 +1,18 @@
+import { debrisFlowIcon, landslideIcon, riskAreaIcon } from '@/assets';
+
+/**
+ * 暴雨图例钩子函数
+ * @returns 图例数据列表
+ */
+export const useEarthquakeLegend = () => {
+  /**
+   * 图例数据
+   */
+  const legendList = [
+    { name: '滑坡隐患点', link: landslideIcon },
+    { name: '泥石流隐患点', link: debrisFlowIcon },
+    { name: '风险区域', link: riskAreaIcon },
+  ];
+
+  return { legendList };
+};

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -1,7 +1,7 @@
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
-import { HiddenPointType } from '@/types/common/DisasterType';
 import type { PaginationType } from '@/types/common/PaginationType';
+import { PointType } from '@/types/common/DisasterType';
 
 /**
  * 暴雨灾害链影响点列表钩子函数
@@ -13,17 +13,17 @@ export const useRainDisasterChain = () => {
    */
   const conditions = ref({
     tableData: '',
-    hiddenPoint: HiddenPointType.LANDSLIDE,
+    hiddenPoint: PointType.LANDSLIDE,
   });
 
   /**
    * 下拉选项
    */
   const selectOptions = [
-    { value: HiddenPointType.LANDSLIDE, label: '滑坡' },
-    { value: HiddenPointType.DEBRIS_FLOW, label: '泥石流' },
-    { value: HiddenPointType.FLASH_FLOOD, label: '山洪' },
-    { value: HiddenPointType.WATERLOGGING, label: '内涝' },
+    { value: PointType.LANDSLIDE, label: '滑坡' },
+    { value: PointType.DEBRIS_FLOW, label: '泥石流' },
+    { value: PointType.FLASH_FLOOD, label: '山洪' },
+    { value: PointType.WATER_LOGGING, label: '内涝' },
   ];
 
   /**
@@ -57,7 +57,7 @@ export const useRainDisasterChain = () => {
    */
   function changeConditions(value: {
     tableData: string;
-    hiddenPoint: HiddenPointType;
+    hiddenPoint: PointType;
   }): void {
     conditions.value = value;
   }
@@ -70,15 +70,6 @@ export const useRainDisasterChain = () => {
     paginationConfig.value.currentPage = value;
   }
 
-  // 监听条件变化
-  watch(
-    conditions,
-    () => {
-      console.log('条件改变');
-    },
-    { deep: true }
-  );
-
   // 把所有需要用到的数据/方法 return 出去
   return {
     conditions,

src/types/common/DisasterType.ts

@@ -9,15 +9,17 @@ export enum DisasterType {
 }
 
 /**
- * 隐患点类型枚举
+ * 点型枚举
  */
-export enum HiddenPointType {
+export enum PointType {
   /** 滑坡 */
   LANDSLIDE = '滑坡',
   /** 泥石流 */
   DEBRIS_FLOW = '泥石流',
   /** 内涝 */
-  WATERLOGGING = '内涝',
+  WATER_LOGGING = '内涝',
   /** 山洪 */
   FLASH_FLOOD = '山洪',
+  /** 风险区 */
+  RISK_AREA = '风险区',
 }

src/utils/utils.ts

@@ -1,6 +1,6 @@
 /**
  * 工具类集合
- * 包含防抖等通用工具函数（无显式any类型）
+ * 包含防抖等通用工具函数
  */
 export const Utils = {
   /**

src/views/home/earthquake/EarthquakeView.vue

@@ -4,15 +4,52 @@
       :disaster-type="DisasterType.EARTHQUAKE"
       :key="route.fullPath"
     />
+
+    <DisasterChainPointComponent
+      :select-options="selectOptions"
+      :table-data-list="tableDatas"
+      :table-columns="tableColumns"
+      :page-option="paginationConfig"
+      @change-conditions="changeConditions"
+      @change-current-page="changeCurrentPage"
+    />
+
+    <LegendComponent :legend-list="legendList" :cols-num="2" />
   </div>
 </template>
 
 <script setup lang="ts">
   import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
-  import { DisasterType } from '@/types/common/DisasterType';
+  import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
+  import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
+  import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain';
+  import { useEarthquakeLegend } from '@/hooks/earthquake/useEarthquakeLegend';
+  import { DisasterType } from '@/types/common/DisasterType.ts';
+  import { watch } from 'vue';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
+
+  const {
+    conditions,
+    selectOptions,
+    tableDatas,
+    tableColumns,
+    paginationConfig,
+    changeConditions,
+    changeCurrentPage,
+  } = useEarthquakeDisasterChain();
+
+  const { legendList } = useEarthquakeLegend();
+
+  // 监听条件变化
+  watch(
+    conditions,
+    () => {
+      console.log('条件改变');
+    },
+    { deep: true }
+  );
 </script>
 
 <style scoped></style>

src/views/home/rainstorm/RainstormView.vue

@@ -5,7 +5,6 @@
       :key="route.fullPath"
     />
 
-    <!-- 直接使用钩子返回的数据 -->
     <DisasterChainPointComponent
       :select-options="selectOptions"
       :table-data-list="tableDatas"
@@ -25,12 +24,14 @@
   import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
   import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
   import { useRainLegend } from '@/hooks/rainstorm/useRainLegend';
-  import { DisasterType } from '@/types/common/DisasterType';
+  import { DisasterType } from '@/types/common/DisasterType.ts';
+  import { watch } from 'vue';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
 
   const {
+    conditions,
     selectOptions,
     tableDatas,
     tableColumns,
@@ -40,6 +41,15 @@
   } = useRainDisasterChain();
 
   const { legendList } = useRainLegend();
+
+  // 监听条件变化
+  watch(
+    conditions,
+    () => {
+      console.log('条件改变');
+    },
+    { deep: true }
+  );
 </script>
 
 <style scoped></style>