From 15b0d2e994632fc594462f8b63bcf8e523b0fe8e Mon Sep 17 00:00:00 2001
From: wzy-warehouse <18135009705@163.com>
Date: Mon, 13 Apr 2026 19:27:32 +0800
Subject: [PATCH] =?UTF-8?q?=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

---
 components.d.ts                               |   7 +
 src/component/map/MapComponent.vue            |   1 -
 .../DisasterChainPointComponent.vue           | 264 ++++++++++++++++++
 src/types/common/DisasterType.ts              |   8 +
 src/types/common/PaginationType.ts            |   6 +
 src/views/home/rainstorm/RainstormView.vue    |  97 ++++++-
 6 files changed, 381 insertions(+), 2 deletions(-)
 create mode 100644 src/component/rain-earthquake/DisasterChainPointComponent.vue
 create mode 100644 src/types/common/PaginationType.ts

diff --git a/components.d.ts b/components.d.ts
index 65dc19f..5eddf62 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -14,9 +14,16 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
+  export interface GlobalDirectives {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }
diff --git a/src/component/map/MapComponent.vue b/src/component/map/MapComponent.vue
index 1128b32..4623df9 100644
--- a/src/component/map/MapComponent.vue
+++ b/src/component/map/MapComponent.vue
@@ -42,7 +42,6 @@
 
     // 注册全局点击监听器
     CesiumUtilsSingleton.clickLayer((pickedObject: ClickObject) => {
-      console.log('点击对象：', pickedObject);
       if (
         pickedObject &&
         pickedObject.id &&
diff --git a/src/component/rain-earthquake/DisasterChainPointComponent.vue b/src/component/rain-earthquake/DisasterChainPointComponent.vue
new file mode 100644
index 0000000..7011a85
--- /dev/null
+++ b/src/component/rain-earthquake/DisasterChainPointComponent.vue
@@ -0,0 +1,264 @@
+<!-- 灾害链影响点列表 -->
+<template>
+  <!-- 控制按钮 -->
+  <div class="control-box">
+    <el-button
+      type="primary"
+      @click="changeStatus"
+      circle
+      :title="`${btnStatus ? '关闭' : '打开'}灾害链影响点列表`"
+      >{{ btnStatus ? '-' : '+' }}</el-button
+    >
+  </div>
+  <div class="disaster-list-box" v-show="btnStatus">
+    <header class="table-title">
+      <span>灾害链影响点列表</span>
+    </header>
+
+    <!-- 搜索 -->
+    <div class="search-box">
+      <el-input
+        v-model="conditions.tableData"
+        placeholder="搜索表格数据..."
+        class="search-data"
+      />
+      <el-select v-model="conditions.hiddenPoint" class="search-hidden-point">
+        <el-option
+          v-for="(opt, index) in selectOptions"
+          :key="index"
+          :label="`${opt.label}预警点`"
+          :value="opt.value"
+        />
+      </el-select>
+    </div>
+    <!-- 表格 -->
+    <div class="table-box">
+      <el-table
+        :data="tableDataList"
+        border
+        style="width: 100%"
+        empty-text="暂无数据"
+      >
+        <el-table-column
+          v-for="(row, index) in tableColumns"
+          :key="index"
+          :prop="row.key"
+          :label="
+            index == 0 ? `${conditions.hiddenPoint}${row.title}` : row.title
+          "
+        />
+      </el-table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination-controls" v-if="showPagination">
+      <button
+        @click="prevPage"
+        :disabled="isPrevDisabled"
+        :class="{ disabled: pageOption.currentPage <= 1 }"
+      >
+        上一页
+      </button>
+      <span>{{ pageOption.currentPage }} / {{ pageOption.totalPage }}</span>
+      <button
+        @click="nextPage"
+        :disabled="isNextDisabled"
+        :class="{ disabled: isNextDisabled }"
+      >
+        下一页
+      </button>
+      <span class="total-items">共 {{ pageOption.total }} 条</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { Point } from '@/types/base/Point';
+  import { HiddenPointType } 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 }[];
+    tableDataList: Point[];
+    tableColumns: { title: string; key: string }[];
+    pageOption: PaginationType;
+  }>();
+
+  // 接收父组件方法
+  const emits = defineEmits<{
+    (
+      e: 'changeConditions',
+      value: { tableData: string; hiddenPoint: HiddenPointType }
+    ): void;
+    (e: 'changeCurrentPage', value: number): void;
+  }>();
+
+  // ==================== 状态管理 ====================
+
+  // 按钮状态
+  const btnStatus: Ref<boolean> = ref(false);
+
+  // 搜索条件
+  const conditions: Ref<{ tableData: string; hiddenPoint: HiddenPointType }> =
+    ref({ tableData: '', hiddenPoint: HiddenPointType.LANDSLIDE });
+
+  // ==================== 计算属性 ====================
+
+  // 是否显示分页
+  const showPagination = computed(() => props.pageOption.totalPage !== 0);
+
+  // 上一页是否禁用
+  const isPrevDisabled = computed(() => props.pageOption.currentPage <= 1);
+
+  // 下一页是否禁用
+  const isNextDisabled = computed(
+    () => props.pageOption.currentPage >= props.pageOption.totalPage
+  );
+
+  // ==================== 事件处理 ====================
+
+  // 切换面板显示状态
+  const changeStatus = () => {
+    btnStatus.value = !btnStatus.value;
+  };
+
+  // 上一页
+  const prevPage = () => {
+    if (!isPrevDisabled.value) {
+      emits('changeCurrentPage', props.pageOption.currentPage - 1);
+    }
+  };
+
+  // 下一页
+  const nextPage = () => {
+    if (!isNextDisabled.value) {
+      emits('changeCurrentPage', props.pageOption.currentPage + 1);
+    }
+  };
+
+  // ==================== 监听器 ====================
+
+  // 监听搜索条件变化
+  watch(
+    conditions,
+    () => {
+      emits('changeConditions', conditions.value);
+    },
+    { deep: true }
+  );
+</script>
+
+<style scoped>
+  .control-box {
+    position: absolute;
+    top: 75px;
+    left: 30px;
+    z-index: 1001;
+  }
+  .disaster-list-box {
+    position: absolute;
+    top: 65px;
+    left: 20px;
+    background: rgba(14, 52, 98, 0.8);
+    color: white;
+    padding: 15px;
+    border-radius: 2px;
+    z-index: 1000;
+    width: 550px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    font-size: 14px;
+    border: 1px solid rgba(0, 225, 255, 0.5);
+  }
+  .table-title {
+    font-weight: bold;
+    margin-bottom: 15px;
+    font-size: 16px;
+    text-align: center;
+    margin-top: 0;
+    padding-top: 0px;
+    color: white;
+  }
+  .search-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    gap: 10px;
+  }
+  .search-data {
+    width: 75%;
+  }
+  .search-hidden-point {
+    width: 25%;
+  }
+  .search-data,
+  .search-hidden-point {
+    background: rgba(15, 61, 118, 0.6);
+    border-radius: 4px;
+    border: 1px solid rgb(0, 225, 255);
+    box-sizing: border-box;
+    color: white;
+  }
+
+  :deep(.el-input__wrapper),
+  :deep(.el-select__wrapper) {
+    background: transparent;
+  }
+  :deep(.el-input__inner),
+  :deep(.el-select__selected-item) {
+    color: white;
+  }
+
+  :deep(.el-table--border th) {
+    background: linear-gradient(
+      180deg,
+      rgb(86, 204, 242) 0%,
+      rgb(47, 128, 237) 100%
+    );
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 10px 12px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  :deep(.el-table tr),
+  :deep(.el-table td) {
+    background-color: rgba(15, 61, 118, 0.6);
+    color: white;
+    font-size: 14px;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .el-table {
+    --el-table-row-hover-bg-color: transparent;
+  }
+
+  .pagination-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 15px;
+    gap: 10px;
+  }
+  .pagination-controls button:disabled {
+    background-color: #373e52;
+    cursor: not-allowed;
+  }
+  .pagination-controls span {
+    font-size: 14px;
+    font-weight: bold;
+    color: white;
+  }
+  .pagination-controls button {
+    background-color: #3c86ff;
+    color: white;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+</style>
diff --git a/src/types/common/DisasterType.ts b/src/types/common/DisasterType.ts
index 3ea6033..3c5ef06 100644
--- a/src/types/common/DisasterType.ts
+++ b/src/types/common/DisasterType.ts
@@ -2,3 +2,11 @@ export enum DisasterType {
   RAINSTORM = 'rainstorm',
   EARTHQUAKE = 'earthquake',
 }
+
+// 隐患点类型
+export enum HiddenPointType {
+  LANDSLIDE = '滑坡',
+  DEBRIS_FLOW = '泥石流',
+  WATERLOGGING = '内涝',
+  FLASH_FLOOD = '山洪',
+}
diff --git a/src/types/common/PaginationType.ts b/src/types/common/PaginationType.ts
new file mode 100644
index 0000000..5d83960
--- /dev/null
+++ b/src/types/common/PaginationType.ts
@@ -0,0 +1,6 @@
+export interface PaginationType {
+  currentPage: number;
+  pageSize: number;
+  total: number;
+  totalPage: number;
+}
diff --git a/src/views/home/rainstorm/RainstormView.vue b/src/views/home/rainstorm/RainstormView.vue
index fc8d4f1..c814727 100644
--- a/src/views/home/rainstorm/RainstormView.vue
+++ b/src/views/home/rainstorm/RainstormView.vue
@@ -1,18 +1,113 @@
 <template>
   <div>
+    <!-- 基本组件 -->
     <BasicComponent
       :disaster-type="DisasterType.RAINSTORM"
       :key="route.fullPath"
     />
+
+    <!-- 灾害链影像点列表 -->
+    <DisasterChainPointComponent
+      :select-options="selectOptions"
+      :table-data-list="tableDatas"
+      :table-columns="tableColumns"
+      :page-option="paginationConfig"
+      @change-conditions="changeConditions"
+      @change-current-page="changeCurrentPage"
+    />
   </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 type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+  import { DisasterType, HiddenPointType } from '@/types/common/DisasterType';
+  import type { PaginationType } from '@/types/common/PaginationType';
+  import { ref, watch, type Ref } from 'vue';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
 </script>
 
+<script lang="ts">
+  // 灾害链影像点列表数据
+  // 搜索条件
+  const conditions: Ref<{ tableData: string; hiddenPoint: HiddenPointType }> =
+    ref({ tableData: '', hiddenPoint: HiddenPointType.LANDSLIDE });
+
+  // 下拉列表
+  const selectOptions = [
+    {
+      value: HiddenPointType.LANDSLIDE,
+      label: '滑坡',
+    },
+    {
+      value: HiddenPointType.DEBRIS_FLOW,
+      label: '泥石流',
+    },
+    {
+      value: HiddenPointType.FLASH_FLOOD,
+      label: '山洪',
+    },
+    {
+      value: HiddenPointType.WATERLOGGING,
+      label: '内涝',
+    },
+  ];
+
+  // 表格数据
+  const tableDatas: Ref<XianHiddenDangerSpots[]> = ref([]);
+
+  // 表头标签
+  const tableColumns = [
+    {
+      title: `名称`,
+      key: 'disasterName',
+    },
+    {
+      title: '位置',
+      key: 'position',
+    },
+    {
+      title: '规模等级',
+      key: 'scaleGrade',
+    },
+    {
+      title: '险情等级',
+      key: 'riskGrade',
+    },
+  ];
+
+  // 分页配置
+  const paginationConfig: Ref<PaginationType> = ref({
+    currentPage: 1,
+    pageSize: 10,
+    total: 10,
+    totalPage: 1,
+  });
+
+  // 修改条件
+  function changeConditions(value: {
+    tableData: string;
+    hiddenPoint: HiddenPointType;
+  }) {
+    conditions.value = value;
+  }
+
+  // 修改当前页码
+  function changeCurrentPage(value: number) {
+    paginationConfig.value.currentPage = value;
+  }
+
+  // 条件改变时候触发
+  watch(
+    () => conditions,
+    () => {
+      console.log('条件改变');
+    },
+    { deep: true }
+  );
+</script>
+
 <style scoped></style>