From 4ed118ed7402480d7ca66cc1dcf8491eccfff94f Mon Sep 17 00:00:00 2001
From: fangjiakai <450850793@qq.com>
Date: Tue, 10 Jun 2025 18:04:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(request):=20=E9=87=8D=E6=9E=84=20axios=20?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E5=B9=B6=E6=B7=BB=E5=8A=A0=E6=96=B0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建独立的 request 实例，避免全局 axios 默认配置冲突
- 添加文件上传下载功能
- 新增 get、post 方法的 loading 控制
-优化请求拦截器，统一处理 Token 和 loading
- 重构响应拦截器，统一处理登录失效和请求错误
---
 index.html                                    |   2 +
 src/App.vue                                   |   8 +-
 src/assets/css/common.scss                    | 247 ++++++-----
 src/assets/css/element.scss                   |  77 ++++
 src/assets/js/data_dictionary.js              |  52 +++
 src/components/layout_cascader/index.vue      |  84 ++++
 src/components/map/index.vue                  |  71 +++
 src/components/map/map.vue                    | 131 ++++++
 src/components/pagination/index.vue           |  37 ++
 src/components/search/index.vue               |  62 +++
 .../search_collapse_button/index.vue          |  42 ++
 src/components/table/index.vue                | 196 +++++++++
 src/hooks/useListData.js                      | 160 +++++++
 src/hooks/useSearchCollapse.js                |  13 +
 src/main.js                                   |   1 +
 src/request/axios.js                          |  40 +-
 src/request/data_dictionary.js                |  21 +
 src/request/kangzai.js                        |  91 ++++
 src/request/schedule_job.js                   |  47 ++
 src/request/system_management.js              |  27 ++
 src/request/user_management.js                |  28 ++
 src/router/index.js                           | 105 ++++-
 .../emergency_storage/components/add.vue      | 200 +++++++++
 src/views/emergency_storage/index.vue         | 167 +++++++
 .../geological_disaster/components/add.vue    | 353 +++++++++++++++
 src/views/geological_disaster/index.vue       | 199 +++++++++
 .../mountain_flood_info/components/add.vue    | 412 ++++++++++++++++++
 src/views/mountain_flood_info/index.vue       | 163 +++++++
 src/views/reservoir_info/components/add.vue   | 212 +++++++++
 src/views/reservoir_info/index.vue            | 161 +++++++
 src/views/river/components/add.vue            | 153 +++++++
 src/views/river/index.vue                     | 141 ++++++
 .../river_risk_village/components/add.vue     | 136 ++++++
 src/views/river/river_risk_village/index.vue  | 157 +++++++
 .../river/river_section/components/add.vue    | 176 ++++++++
 src/views/river/river_section/index.vue       | 140 ++++++
 .../data_dictionary/components/add.vue        | 141 ++++++
 .../data_dictionary/index.vue                 | 130 ++++++
 .../urban_flood_point/components/add.vue      | 213 +++++++++
 src/views/urban_flood_point/index.vue         | 168 +++++++
 40 files changed, 4844 insertions(+), 120 deletions(-)
 create mode 100644 src/assets/css/element.scss
 create mode 100644 src/assets/js/data_dictionary.js
 create mode 100644 src/components/layout_cascader/index.vue
 create mode 100644 src/components/map/index.vue
 create mode 100644 src/components/map/map.vue
 create mode 100644 src/components/pagination/index.vue
 create mode 100644 src/components/search/index.vue
 create mode 100644 src/components/search_collapse_button/index.vue
 create mode 100644 src/components/table/index.vue
 create mode 100644 src/hooks/useListData.js
 create mode 100644 src/hooks/useSearchCollapse.js
 create mode 100644 src/request/data_dictionary.js
 create mode 100644 src/request/kangzai.js
 create mode 100644 src/request/schedule_job.js
 create mode 100644 src/request/system_management.js
 create mode 100644 src/request/user_management.js
 create mode 100644 src/views/emergency_storage/components/add.vue
 create mode 100644 src/views/emergency_storage/index.vue
 create mode 100644 src/views/geological_disaster/components/add.vue
 create mode 100644 src/views/geological_disaster/index.vue
 create mode 100644 src/views/mountain_flood_info/components/add.vue
 create mode 100644 src/views/mountain_flood_info/index.vue
 create mode 100644 src/views/reservoir_info/components/add.vue
 create mode 100644 src/views/reservoir_info/index.vue
 create mode 100644 src/views/river/components/add.vue
 create mode 100644 src/views/river/index.vue
 create mode 100644 src/views/river/river_risk_village/components/add.vue
 create mode 100644 src/views/river/river_risk_village/index.vue
 create mode 100644 src/views/river/river_section/components/add.vue
 create mode 100644 src/views/river/river_section/index.vue
 create mode 100644 src/views/system_management/data_dictionary/components/add.vue
 create mode 100644 src/views/system_management/data_dictionary/index.vue
 create mode 100644 src/views/urban_flood_point/components/add.vue
 create mode 100644 src/views/urban_flood_point/index.vue

diff --git a/index.html b/index.html
index 821973f..de8c172 100644
--- a/index.html
+++ b/index.html
@@ -15,5 +15,7 @@
     <script type="text/javascript" src="/cesium91/CesiumUnminified/Cesium.js"></script>
     <script type="text/javascript" src="/cesium91/CustomCesiumSDK.js"></script>
     <link href="/cesium91/CesiumUnminified/Widgets/widgets.css" rel="stylesheet"/>
+    <script type="text/javascript"
+            src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index 865e9b3..1d69374 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,9 @@
 <template>
   <suspense>
     <template #default>
-      <router-view />
+      <el-config-provider :locale="zhCn">
+        <router-view />
+      </el-config-provider>
     </template>
     <template #fallback>
       <div>加载中...</div>
@@ -9,6 +11,8 @@
   </suspense>
 </template>
 
-<script setup></script>
+<script setup>
+import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+</script>
 
 <style lang="scss" scoped></style>
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index ca8fccb..b0ad356 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -17,102 +17,6 @@
   }
 }
 
-// 生成1-50的margin和padding（正负）
-@for $i from 1 through 50 {
-  .m-#{$i} {
-    margin: #{$i}px;
-  }
-  .mt-#{$i} {
-    margin-top: #{$i}px;
-  }
-  .mr-#{$i} {
-    margin-right: #{$i}px;
-  }
-  .mb-#{$i} {
-    margin-bottom: #{$i}px;
-  }
-  .ml-#{$i} {
-    margin-left: #{$i}px;
-  }
-  .mtb-#{$i} {
-    margin-top: #{$i}px;
-    margin-bottom: #{$i}px;
-  }
-  .mlr-#{$i} {
-    margin-left: #{$i}px;
-    margin-right: #{$i}px;
-  }
-  .p-#{$i} {
-    padding: #{$i}px;
-  }
-  .pt-#{$i} {
-    padding-top: #{$i}px;
-  }
-  .pr-#{$i} {
-    padding-right: #{$i}px;
-  }
-  .pb-#{$i} {
-    padding-bottom: #{$i}px;
-  }
-  .pl-#{$i} {
-    padding-left: #{$i}px;
-  }
-  .ptb-#{$i} {
-    padding-top: #{$i}px;
-    padding-bottom: #{$i}px;
-  }
-  .plr-#{$i} {
-    padding-left: #{$i}px;
-    padding-right: #{$i}px;
-  }
-  .m--#{$i} {
-    margin: -#{$i}px;
-  }
-  .mt--#{$i} {
-    margin-top: -#{$i}px;
-  }
-  .mr--#{$i} {
-    margin-right: -#{$i}px;
-  }
-  .mb--#{$i} {
-    margin-bottom: -#{$i}px;
-  }
-  .ml--#{$i} {
-    margin-left: -#{$i}px;
-  }
-  .mtb--#{$i} {
-    margin-top: -#{$i}px;
-    margin-bottom: -#{$i}px;
-  }
-  .mlr--#{$i} {
-    margin-left: -#{$i}px;
-    margin-right: -#{$i}px;
-  }
-  .p--#{$i} {
-    padding: -#{$i}px;
-  }
-  .pt--#{$i} {
-    padding-top: -#{$i}px;
-  }
-  .pr--#{$i} {
-    padding-right: -#{$i}px;
-  }
-  .pb--#{$i} {
-    padding-bottom: -#{$i}px;
-  }
-  .pl--#{$i} {
-    padding-left: -#{$i}px;
-  }
-  .ptb--#{$i} {
-    padding-top: -#{$i}px;
-    padding-bottom: -#{$i}px;
-  }
-  .plr--#{$i} {
-    padding-left: -#{$i}px;
-    padding-right: -#{$i}px;
-  }
-}
-
 * {
   box-sizing: border-box;
   font-size: 14px;
@@ -145,13 +49,158 @@ a {
   color: var(--el-color-primary);
 }
 
+.end {
+  .el-form-item__content {
+    justify-content: end;
+  }
+}
+
+.p0.el-descriptions__content {
+  padding: 0 !important;
+}
+
+.p0 .el-descriptions tr {
+  .el-descriptions__label {
+    border-left: none !important;
+  }
+
+  .el-descriptions__content {
+    border-right: none !important;
+  }
+
+  &:first-child .el-descriptions__cell {
+    border-top: none !important;
+  }
+
+  &:last-child .el-descriptions__cell {
+    border-bottom: none !important;
+  }
+}
+
+.p20 {
+  padding: 20px;
+}
+
+.mt {
+  margin-top: 16px;
+}
+
+.ml {
+  margin-left: 10px;
+}
+
+.mr {
+  margin-right: 10px;
+}
+
+.mb {
+  margin-bottom: 10px;
+}
+
+.text-blue {
+  color: #0000ff;
+}
+
+.text-yellow {
+  color: #bebe05;
+}
+
+.text-orange {
+  color: #de9004;
+}
+
+.text-red {
+  color: #ff0000;
+}
+
+.text-green {
+  color: #0bb20c;
+}
+
+.tc {
+  text-align: center;
+}
+
+.tr {
+  text-align: right;
+}
+
+.tl {
+  text-align: left;
+}
+
+.dn {
+  display: none;
+}
+
+//.print_use {
+//  display: none;
+//}
+
 .viewer-zoom-in, .viewer-zoom-out, .viewer-one-to-one, .viewer-reset, .viewer-prev, .viewer-play, .viewer-next, .viewer-rotate-left, .viewer-rotate-right, .viewer-flip-horizontal, .viewer-flip-vertical, .viewer-fullscreen, .viewer-fullscreen-exit, .viewer-close {
   &::before {
     font-size: unset !important;
   }
 }
 
-.iframe{
-  position: relative;
-  border: none;
+.vue-pdf__wrapper-annotation-layer {
+  height: 0 !important;
+}
+
+.w-e-bar-divider {
+  display: none !important;
+}
+
+// 打印时去掉页眉页脚
+@page {
+  size: auto;
+  margin: 3mm;
+}
+
+@media print {
+  @page {
+    size:  auto;
+  }
+  body, html {   //如果vue最外层id，默认是#app。如果设置了height:100%;，那么#app也加
+    height: auto !important;
+  }
+
+  .print_use {
+    border-collapse: collapse;
+    width: 100%;
+    display: table;
+
+    td, th {
+      border: 1px solid #eaeaea;
+      padding: 8px;
+      line-height: 1.6;
+      text-align: center;
+      color: #000 !important;
+    }
+    tr {
+      color: #000 !important;
+    }
+  }
+
+  .print_no_use {
+    display: none;
+  }
+}
+
+
+
+.my_primary{
+ width: calc(100vw - 252px);
+  background: #ffffff;
+  padding: 10px;
+  position: fixed;
+  left: 231px;
+  bottom: 0;
+  box-shadow: 0 0 10px #cccccc;
+
+
+}
+
+.my_main{
+  padding-bottom: 50px;
 }
diff --git a/src/assets/css/element.scss b/src/assets/css/element.scss
new file mode 100644
index 0000000..056fb00
--- /dev/null
+++ b/src/assets/css/element.scss
@@ -0,0 +1,77 @@
+.el-select, .el-cascader, .el-date-editor.el-input, .el-date-editor.el-input__wrapper, .el-input__wrapper, .el-input-number {
+  width: 100% !important;
+}
+.el-pagination--small .el-select{
+  width: 100px !important;
+}
+.el-table .el-table__cell {
+  text-align: center !important;
+}
+
+.el-descriptions__label {
+  width: 200px;
+}
+
+.el-descriptions__content {
+  width: auto;
+}
+
+.el-divider__text {
+  font-size: 16px !important;
+  font-weight: 700 !important;
+}
+
+.el-form-item__label {
+  font-weight: 700;
+}
+
+.el-dialog {
+  --el-dialog-margin-top: 50px !important;
+
+  .el-dialog__header {
+    border-bottom: 1px solid #f1f1f1;
+  }
+
+  .el-dialog__body {
+    padding: 20px 0;
+  }
+
+  .el-dialog__footer {
+    border-top: 1px solid #f1f1f1;
+  }
+}
+
+.el-table {
+  * {
+    font-size: 12px;
+  }
+
+  th.el-table__cell {
+    --el-table-header-bg-color: rgb(245, 247, 250);
+    font-weight: bold;
+    color: rgb(0, 0, 0);
+  }
+
+  .el-table__cell {
+    padding: 8px 0 !important;
+  }
+}
+
+.el-page-header {
+  border-bottom: 1px solid #eaeaea;
+  padding: 0 20px 20px 20px;
+  margin: 0 -20px 20px -20px;
+
+  .el-page-header__content {
+    font-size: 17px;
+  }
+}
+
+.el-pagination .el-select{
+  width: 100px !important;
+}
+
+.el-scrollbar__wrap{
+  scroll-behavior: smooth;
+}
+
diff --git a/src/assets/js/data_dictionary.js b/src/assets/js/data_dictionary.js
new file mode 100644
index 0000000..56c04bd
--- /dev/null
+++ b/src/assets/js/data_dictionary.js
@@ -0,0 +1,52 @@
+import {
+  getDataDictionary,
+  getDataDictionaryTree,
+  getDepartmentTree,
+} from "@/request/data_dictionary";
+import { ref } from "vue";
+
+// 学历
+export const layoutFnGetDegree = async () => {
+  const resData = await getDataDictionary({
+    parentId: "ddce2eac1cf27e4b114231051ec9123b",
+  });
+  return ref(resData.dictionariesList);
+};
+// 评审模板类型
+export const layoutFnGetCheckTemplateType = async () => {
+  const resData = await getDataDictionary({
+    parentId: "918ff8ae621595c86ed95d2c77484e1c",
+  });
+  return ref(resData.dictionariesList);
+};
+// 评审周期
+export const layoutFnGetReviewCycle = async () => {
+  const resData = await getDataDictionary({
+    parentId: "4034603a5ae1042827340bc86fe26454",
+  });
+  return ref(resData.dictionariesList);
+};
+// 无法确定parentId的数据字典
+export const layoutFnGetDataDictionary = async (parentId) => {
+  const resData = await getDataDictionary({ parentId });
+  return ref(resData.dictionariesList);
+};
+// 部门
+export const layoutFnGetDepartmentTree = async (parentId) => {
+  const resData = await getDepartmentTree(parentId);
+  return ref(resData.deptTree);
+};
+// 企业类型
+export const fnGetEnterpriseTypeList = async () => {
+  const resData = await getDataDictionary({
+    parentId: "71eb9a7f6fb55afdb8f9b4bea9b3e368",
+  });
+  return ref(resData.dictionariesList);
+};
+// 企业类型
+export const fnGetHiddenTypeList = async () => {
+  const resData = await getDataDictionaryTree({
+    parentId: "e3af692a2137d4bcf90ec53f5590b176",
+  });
+  return ref(resData.dictionariesList);
+};
diff --git a/src/components/layout_cascader/index.vue b/src/components/layout_cascader/index.vue
new file mode 100644
index 0000000..9f4a423
--- /dev/null
+++ b/src/components/layout_cascader/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-cascader
+    ref="cascaderRef"
+    v-model="modelValue"
+    :props="administrativeDivisionProps"
+    @change="change"
+  />
+</template>
+
+<script setup>
+import { layoutFnGetDataDictionary } from "@/assets/js/data_dictionary.js";
+import { useVModels } from "@vueuse/core";
+import { ref } from "vue";
+
+defineOptions({
+  name: "LayoutCascader",
+});
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+    required: true,
+  },
+  name: {
+    type: Array,
+    default: () => [],
+  },
+  level: {
+    type: [Number, String],
+    default: 3,
+  },
+  checkStrictly: {
+    type: Boolean,
+    default: true,
+  },
+  dictionariesId: {
+    type: String,
+    default: "",
+  },
+  isPressLevelSetLeaf: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emits = defineEmits(["update:modelValue", "update:name"]);
+const { modelValue, name } = useVModels(props, emits);
+const cascaderRef = ref(null);
+const administrativeDivisionProps = {
+  lazy: true,
+  lazyLoad: async (node, resolve) => {
+    const resData = await layoutFnGetDataDictionary(
+      node.data.dictionariesId || props.dictionariesId
+    );
+    resolve(
+      resData.value.map((item) => {
+        return {
+          dictionariesId: item.dictionariesId,
+          bianma: item.bianma,
+          name: item.name,
+          leaf: props.isPressLevelSetLeaf
+            ? node.level >= props.level
+            : item.hasChildren === 0,
+        };
+      })
+    );
+  },
+  value: "bianma",
+  id: "dictionariesId",
+  label: "name",
+  children: "children",
+  checkStrictly: props.checkStrictly,
+};
+const change = () => {
+  name.value = getCheckedNodes()[0].pathLabels;
+};
+const getCheckedNodes = () => {
+  return cascaderRef.value.getCheckedNodes();
+};
+defineExpose({
+  getCheckedNodes,
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
new file mode 100644
index 0000000..fdf94de
--- /dev/null
+++ b/src/components/map/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <el-col :span="24">
+    <div style="display: flex">
+      <el-form-item
+        label="经度"
+        :prop="longitudeProps"
+        :rules="longitudeRules"
+        style="flex: 1"
+      >
+        <el-input :model-value="longitude" disabled />
+      </el-form-item>
+      <el-form-item
+        label="纬度"
+        :prop="latitudeProps"
+        :rules="latitudeRules"
+        style="flex: 1"
+      >
+        <el-input :model-value="latitude" disabled />
+      </el-form-item>
+      <el-form-item v-if="!disabled" label-width="10px">
+        <el-button class="ml-10" type="primary" @click="mapVisible = true">
+          点击定位
+        </el-button>
+      </el-form-item>
+    </div>
+  </el-col>
+  <app-map
+    v-model:visible="mapVisible"
+    v-model:longitude="longitude"
+    v-model:latitude="latitude"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import AppMap from "@/components/map/map.vue";
+
+defineProps({
+  longitudeProps: {
+    type: String,
+    default: "LONGITUDE",
+  },
+  latitudeProps: {
+    type: String,
+    default: "LATITUDE",
+  },
+  longitudeRules: {
+    type: Object,
+    default: () => ({}),
+  },
+  latitudeRules: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const longitude = defineModel("longitude", {
+  type: [String, Number],
+  required: true,
+});
+const latitude = defineModel("latitude", {
+  type: [String, Number],
+  required: true,
+});
+const mapVisible = ref(false);
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/map/map.vue b/src/components/map/map.vue
new file mode 100644
index 0000000..02a340d
--- /dev/null
+++ b/src/components/map/map.vue
@@ -0,0 +1,131 @@
+<template>
+  <el-dialog v-model="visible" title="编辑坐标">
+    <el-form label-position="right" label-width="100px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="关键字搜索">
+            <el-input v-model="localSearch" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label-width="10px">
+            <el-button type="primary" @click="fnLocalSearch">搜索</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="坐标">
+            <el-input disabled :model-value="currentLongitude || longitude" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label-width="10px">
+            <el-input disabled :model-value="currentLatitude || latitude" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div
+      v-loading="loading"
+      element-loading-text="地图正在加载中..."
+      element-loading-background="rgba(0, 0, 0, 0.5)"
+    >
+      <div id="map_container" style="width: 100%; height: 500px" />
+    </div>
+    <template #footer>
+      <el-button @click="fnClose">关闭</el-button>
+      <el-button type="primary" @click="fnConfirm"> 确定 </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from "vue";
+
+defineOptions({
+  name: "AppMap",
+});
+let mapInstance;
+const visible = defineModel("visible", { type: Boolean, required: true });
+const longitude = defineModel("longitude", {
+  type: [Number, String],
+  required: true,
+});
+const latitude = defineModel("latitude", {
+  type: [Number, String],
+  required: true,
+});
+const loading = ref(false);
+const currentLongitude = ref("");
+const currentLatitude = ref("");
+const localSearch = ref("");
+const emits = defineEmits(["submit"]);
+const fnMapInit = async () => {
+  loading.value = true;
+  await nextTick();
+  mapInstance = new window.BMapGL.Map("map_container");
+  mapInstance.centerAndZoom(
+    new window.BMapGL.Point(
+      longitude.value || "116.3972282409668",
+      latitude.value || "39.90960456049752"
+    ),
+    16
+  );
+  mapInstance.enableScrollWheelZoom(true);
+  loading.value = false;
+  if (longitude.value && latitude.value) {
+    const point = new window.BMapGL.Point(longitude.value, latitude.value);
+    const marker = new window.BMapGL.Marker(point);
+    mapInstance.addOverlay(marker);
+  }
+  mapInstance.addEventListener("click", function (event) {
+    mapInstance.clearOverlays();
+    const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
+    const marker = new window.BMapGL.Marker(point);
+    mapInstance.addOverlay(marker);
+    currentLatitude.value = event.latlng.lat;
+    currentLongitude.value = event.latlng.lng;
+  });
+};
+const fnLocalSearch = () => {
+  if (localSearch.value) {
+    const local = new window.BMapGL.LocalSearch(mapInstance, {
+      renderOptions: { map: mapInstance },
+    });
+    local.search(localSearch.value);
+  }
+};
+const fnClose = () => {
+  if (mapInstance) {
+    mapInstance.destroy();
+    mapInstance = null;
+  }
+  currentLatitude.value = "";
+  currentLongitude.value = "";
+  localSearch.value = "";
+  visible.value = false;
+};
+const fnConfirm = () => {
+  latitude.value = currentLatitude.value;
+  longitude.value = currentLongitude.value;
+  emits("submit", {
+    latitude: currentLatitude.value,
+    longitude: currentLongitude.value,
+  });
+  fnClose();
+};
+watch(
+  () => visible.value,
+  (val) => {
+    if (val && !mapInstance) {
+      fnMapInit();
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/pagination/index.vue b/src/components/pagination/index.vue
new file mode 100644
index 0000000..f79875e
--- /dev/null
+++ b/src/components/pagination/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <el-pagination
+    small
+    :current-page="pagination.currentPage || 1"
+    :page-size="pagination.pageSize || 10"
+    layout="total, sizes, prev, pager, next, jumper"
+    :total="pagination.total || 0"
+    @update:current-page="handleCurrentChange"
+    @update:page-size="handleSizeChange"
+  />
+</template>
+
+<script setup>
+defineOptions({
+  name: "AppPagination",
+});
+const emits = defineEmits(["get-data"]);
+const pagination = defineModel("pagination", { type: Object, required: true });
+const handleCurrentChange = (val) => {
+  pagination.value = {
+    currentPage: val,
+    pageSize: pagination.value.pageSize,
+    total: pagination.value.total,
+  };
+  emits("get-data");
+};
+const handleSizeChange = (val) => {
+  pagination.value = {
+    currentPage: 1,
+    pageSize: val,
+    total: pagination.value.total,
+  };
+  emits("get-data");
+};
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/search/index.vue b/src/components/search/index.vue
new file mode 100644
index 0000000..7a0d08c
--- /dev/null
+++ b/src/components/search/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <el-form
+    :model="modelValue"
+    :label-width="labelWidth"
+    @submit.prevent="emits('submit', 'search')"
+  >
+    <el-row :class="className">
+      <slot :collapse="collapse"></slot>
+      <el-col :span="showCollapseButton ? (collapse ? 6 : span) : span">
+        <el-form-item label-width="10px" class="end">
+          <el-button type="primary" native-type="submit"> 搜索 </el-button>
+          <el-button native-type="reset" @click="emits('submit', 'reset')">
+            重置
+          </el-button>
+          <app-search-collapse-button
+            v-if="showCollapseButton"
+            :change-search-collapse="changeSearchCollapse"
+            :collapse="collapse"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-if="slots.button" :span="24">
+        <el-form-item label-width="0">
+          <slot name="button"></slot>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup>
+import AppSearchCollapseButton from "@/components/search_collapse_button/index.vue";
+import useSearchCollapse from "@/hooks/useSearchCollapse.js";
+import { onMounted, ref, useSlots } from "vue";
+import { uniqueId } from "lodash-es";
+
+const slots = useSlots();
+const { collapse, changeSearchCollapse } = useSearchCollapse();
+defineOptions({
+  name: "AppSearch",
+});
+defineProps({
+  labelWidth: {
+    type: String,
+    default: "100px",
+  },
+});
+const className = ref(uniqueId("_"));
+const span = ref(6);
+const showCollapseButton = ref(false);
+const modelValue = defineModel({ type: Object, required: true });
+const emits = defineEmits(["submit"]);
+onMounted(() => {
+  const colEl = document.querySelectorAll(`.${className.value} .el-col`);
+  const colElLength = colEl.length;
+  const excludeLast = colElLength - (slots.button ? 2 : 1);
+  span.value = { 0: 24, 1: 18, 2: 12, 3: 6 }[excludeLast % 4];
+  showCollapseButton.value = excludeLast > 3;
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/search_collapse_button/index.vue b/src/components/search_collapse_button/index.vue
new file mode 100644
index 0000000..3b263fb
--- /dev/null
+++ b/src/components/search_collapse_button/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-button
+    v-if="collapse"
+    :icon="ArrowDown"
+    link
+    text
+    type="primary"
+    @click="changeSearchCollapse"
+  >
+    展开
+  </el-button>
+  <el-button
+    v-if="!collapse"
+    :icon="ArrowUp"
+    link
+    text
+    type="primary"
+    @click="changeSearchCollapse"
+  >
+    收起
+  </el-button>
+</template>
+
+<script setup>
+import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
+
+defineOptions({
+  name: "AppSearchCollapseButton",
+});
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true,
+  },
+  changeSearchCollapse: {
+    type: Function,
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
new file mode 100644
index 0000000..c3a32eb
--- /dev/null
+++ b/src/components/table/index.vue
@@ -0,0 +1,196 @@
+<template>
+  <el-table
+    ref="tableRef"
+    size="small"
+    :data="data"
+    :border="border"
+    :stripe="stripe"
+    :height="height"
+    :max-height="maxHeight"
+    :highlight-current-row="highlightCurrentRow"
+    :row-key="getRowKey"
+    :row-class-name="rowClassName"
+    :row-style="rowStyle"
+    :show-header="showHeader"
+    :show-summary="showSummary"
+    :summary-method="summaryMethod"
+    :span-method="spanMethod"
+    :default-expand-all="defaultExpandAll"
+    :tree-props="treeProps"
+    :header-cell-style="headerCellStyle"
+    :cell-style="cellStyle"
+    :show-overflow-tooltip="showOverflowTooltip"
+    style="width: 100%"
+    @row-click="rowClick"
+    @row-dblclick="rowDblclick"
+  >
+    <el-table-column
+      v-if="showSelection"
+      type="selection"
+      :selectable="selectable"
+      reserve-selection
+      width="60"
+      :show-overflow-tooltip="false"
+    />
+    <template v-if="showIndex">
+      <el-table-column v-if="showPagination" label="序号" width="60">
+        <template #default="{ $index }">
+          {{ serialNumber(pagination, $index) }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="!showPagination"
+        label="序号"
+        width="60"
+        type="index"
+      />
+    </template>
+    <slot></slot>
+  </el-table>
+  <div v-if="showPagination || slots.button" class="table_footer">
+    <div>
+      <slot name="button"></slot>
+    </div>
+    <app-pagination
+      v-if="showPagination"
+      v-model:pagination="pagination"
+      @get-data="emits('get-data')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useSlots, ref } from "vue";
+import AppPagination from "@/components/pagination/index.vue";
+import { serialNumber } from "@/assets/js/utils.js";
+
+const slots = useSlots();
+defineOptions({
+  name: "AppTable",
+});
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  showIndex: {
+    type: Boolean,
+    default: true,
+  },
+  showSelection: {
+    type: Boolean,
+    default: false,
+  },
+  stripe: {
+    type: Boolean,
+    default: true,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  highlightCurrentRow: {
+    type: Boolean,
+    default: false,
+  },
+  showSummary: {
+    type: Boolean,
+    default: false,
+  },
+  defaultExpandAll: {
+    type: Boolean,
+    default: false,
+  },
+  rowKey: {
+    type: [String, Function],
+  },
+  maxHeight: {
+    type: [String, Number],
+  },
+  height: {
+    type: [String, Number],
+  },
+  rowClassName: {
+    type: Function,
+  },
+  rowStyle: {
+    type: Function,
+  },
+  summaryMethod: {
+    type: Function,
+  },
+  spanMethod: {
+    type: Function,
+  },
+  selectable: {
+    type: Function,
+  },
+  treeProps: {
+    type: Object,
+    default: () => ({ hasChildren: "hasChildren", children: "children" }),
+  },
+  headerCellStyle: {
+    type: Object,
+    default: () => ({}),
+  },
+  cellStyle: {
+    type: [Object, Function],
+    default: () => ({}),
+  },
+  showOverflowTooltip: {
+    type: Boolean,
+    default: true,
+  },
+});
+const pagination = defineModel("pagination", {
+  type: Object,
+  default: () => ({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0,
+  }),
+});
+const emits = defineEmits(["get-data", "row-click", "row-dblclick"]);
+const tableRef = ref(null);
+const getRowKey = (row) => {
+  if (!props.rowKey) return;
+  if (typeof props.rowKey === "string") return row[props.rowKey];
+  else return props.rowKey(row);
+};
+const rowClick = (row, column, event) => {
+  emits("row-click", row, column, event);
+};
+const rowDblclick = (row, column, event) => {
+  emits("row-dblclick", row, column, event);
+};
+const getSelectionRows = () => {
+  return tableRef.value.getSelectionRows();
+};
+const clearSelection = () => {
+  return tableRef.value.clearSelection();
+};
+const toggleRowSelection = (value, selected = true) => {
+  tableRef.value.toggleRowSelection(value, selected);
+};
+defineExpose({
+  getSelectionRows,
+  clearSelection,
+  toggleRowSelection,
+});
+</script>
+
+<style lang="scss" scoped>
+.table_footer {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/hooks/useListData.js b/src/hooks/useListData.js
new file mode 100644
index 0000000..25aea2a
--- /dev/null
+++ b/src/hooks/useListData.js
@@ -0,0 +1,160 @@
+import { nextTick, ref } from "vue";
+import { getDataType } from "@/assets/js/utils.js";
+import {
+  getQueryCriteria,
+  setQueryCriteria,
+} from "@/hooks/useQueryCriteria.js";
+
+const verificationParameter = (api, options) => {
+  if (getDataType(api) !== "Function") throw new Error("api必须是一个函数");
+  if (getDataType(options) !== "Object")
+    throw new Error("options必须是一个对象");
+  if (options.immediate && getDataType(options.immediate) !== "Boolean")
+    throw new Error("options.immediate必须是一个布尔值");
+  if (options.usePagination && getDataType(options.usePagination) !== "Boolean")
+    throw new Error("options.usePagination必须是一个布尔值");
+  if (options.key && getDataType(options.key) !== "String")
+    throw new Error("options.key必须是一个字符串");
+  if (
+    options.callback &&
+    getDataType(options.callback) !== "Function" &&
+    getDataType(options.callback) !== "AsyncFunction"
+  )
+    throw new Error("options.callback必须是一个函数");
+  if (
+    options.beforeGetData &&
+    getDataType(options.beforeGetData) !== "Function" &&
+    getDataType(options.beforeGetData) !== "AsyncFunction"
+  )
+    throw new Error("options.beforeGetData必须是一个函数");
+  if (
+    options.defaultSearchForm &&
+    getDataType(options.defaultSearchForm) !== "Object"
+  )
+    throw new Error("options.defaultSearchForm必须是一个对象");
+  if (
+    options.clearSelection &&
+    getDataType(options.clearSelection) !== "Boolean"
+  )
+    throw new Error("options.clearSelection必须是一个布尔值");
+  if (
+    options.params &&
+    getDataType(options.params) !== "Object" &&
+    getDataType(options.params) !== "Function"
+  )
+    throw new Error("options.params必须是一个对象或者一个函数");
+  if (
+    options.isStorageQueryCriteria &&
+    getDataType(options.isStorageQueryCriteria) !== "Boolean"
+  )
+    throw new Error("options.isStorageQueryCriteria必须是一个布尔值");
+  if (
+    options.tabsActiveName &&
+    getDataType(options.tabsActiveName) !== "String"
+  )
+    throw new Error("options.tabsActiveName必须是一个字符串");
+};
+
+const getOptionParams = (params) => {
+  if (params) {
+    if (getDataType(params) === "Object") return params;
+    const paramsValue = params();
+    if (getDataType(paramsValue) !== "Object")
+      throw new Error("options.params为函数时必须存在返回值并且必须是一个对象");
+    else return paramsValue;
+  }
+};
+
+/**
+ * @param api {Function} 接口函数
+ * @param options {Object?: {callback, params, defaultSearchForm, immediate, usePagination, key, beforeGetData}} 配置项
+ * @param options.callback {Function?} 回调函数（返回值【第一个参数表格数据，第二个参数后台返回的所有数据】）
+ * @param options.beforeGetData {Function?} 调用请求之前（返回值【第一个参数searchForm搜索表单数据】）
+ * @param options.params {(Object | Function)?} 其它接口参数
+ * @param options.defaultSearchForm {Object?} searchForm默认值
+ * @param options.immediate {Boolean?} 是否立即执行接口函数（默认是）
+ * @param options.usePagination {Boolean?} 是否使用分页（默认是）
+ * @param options.clearSelection {Boolean?} 调用resetPagination时是否清空表格选择数据（默认是）
+ * @param options.key {String?} 返回的存放数组的key（默认list）
+ * @param options.isStorageQueryCriteria {Boolean?} 是否保存查询条件（默认是）
+ * @param options.tabsActiveName {String?} 存在tabs组件时，当前tabs的activeName，用于缓存查询条件
+ * @return {Object} 返回对象包含以下属性：list 表格数据，pagination 分页数据，searchForm 搜索表单数据，tableRef 表格实例，getData 获取数据函数，resetPagination 重置分页函数
+ */
+
+export default function useListData(api, options = {}) {
+  verificationParameter(api, options);
+  const immediate = options.immediate ?? true;
+  const usePagination = options.usePagination ?? true;
+  const key = options.key ?? "list";
+  const defaultSearchForm = options.defaultSearchForm ?? {};
+  const clearSelection = options.clearSelection ?? true;
+  const isStorageQueryCriteria = options.isStorageQueryCriteria ?? true;
+  const defaultPagination = { currentPage: 1, pageSize: 10, total: 0 };
+  const list = ref([]);
+  const queryCriteria = getQueryCriteria();
+  const pagination = ref(queryCriteria.pagination || defaultPagination);
+  const searchForm = ref(JSON.parse(JSON.stringify(defaultSearchForm)));
+  let beforeGetDataParams = {};
+  const tableRef = ref(null);
+  const getData = async (params = {}) => {
+    if (options.beforeGetData) {
+      beforeGetDataParams = JSON.parse(
+        JSON.stringify(queryCriteria.searchForm || searchForm.value)
+      );
+      options.beforeGetData(beforeGetDataParams);
+    }
+    const resData = await api({
+      ...(usePagination
+        ? {
+            curPage: pagination.value.currentPage,
+            limit: pagination.value.pageSize,
+          }
+        : {}),
+      ...searchForm.value,
+      ...beforeGetDataParams,
+      ...(queryCriteria.searchForm || {}),
+      ...(getOptionParams(options.params) || {}),
+      ...(getDataType(params) === "Object" ? params : {}),
+    });
+    if (usePagination) list.value = resData.page[key];
+    else list.value = resData[key];
+    if (usePagination) pagination.value.total = resData.page.totalCount;
+    options.callback && options.callback(list.value, resData);
+    !usePagination &&
+      clearSelection &&
+      tableRef.value &&
+      tableRef.value.clearSelection();
+    if (isStorageQueryCriteria) {
+      setQueryCriteria({
+        searchForm: {
+          ...(queryCriteria.searchForm || {}),
+          ...searchForm.value,
+        },
+        pagination: pagination.value,
+        tabsActiveName: options.tabsActiveName,
+      });
+      await nextTick();
+      searchForm.value = queryCriteria.searchForm || searchForm.value;
+    }
+  };
+  immediate && getData().then();
+  const resetPagination = async (params) => {
+    list.value = [];
+    pagination.value = defaultPagination;
+    await nextTick();
+    await getData(params);
+    clearSelection && tableRef.value && tableRef.value.clearSelection();
+    const cloneSearchForm = searchForm.value;
+    searchForm.value = {};
+    await nextTick();
+    searchForm.value = cloneSearchForm;
+  };
+  return {
+    list,
+    pagination,
+    searchForm,
+    tableRef,
+    getData: async (params) => await getData(params),
+    resetPagination: async (params) => await resetPagination(params),
+  };
+}
diff --git a/src/hooks/useSearchCollapse.js b/src/hooks/useSearchCollapse.js
new file mode 100644
index 0000000..6d1cbe3
--- /dev/null
+++ b/src/hooks/useSearchCollapse.js
@@ -0,0 +1,13 @@
+import { ref } from "vue";
+
+const useSearchCollapse = () => {
+  const collapse = ref(true);
+  const changeSearchCollapse = () => {
+    collapse.value = !collapse.value;
+  };
+  return {
+    collapse,
+    changeSearchCollapse,
+  };
+};
+export default useSearchCollapse;
diff --git a/src/main.js b/src/main.js
index fbb0a65..09be2f4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import "@/assets/css/common.scss";
 import "@/assets/css/transition.scss";
+import "@/assets/css/element.scss";
 import "dayjs/locale/zh-cn";
 import App from "./App";
 import pinia from "./pinia";
diff --git a/src/request/axios.js b/src/request/axios.js
index ef6ac83..9328253 100644
--- a/src/request/axios.js
+++ b/src/request/axios.js
@@ -4,7 +4,7 @@ import router from "../router";
 import pinia from "../pinia";
 import { useUserStore } from "@/pinia/user.js";
 import refreshToken from "@/assets/js/refreshToken.js";
-import { getBaseUrl } from "@/assets/js/utils.js";
+import { getDataType } from "@/assets/js/utils.js";
 
 let loading = null;
 let isTipTokenFailure = false;
@@ -20,10 +20,16 @@ function endLoading() {
   loading && loading.close();
 }
 
-axios.defaults.baseURL = getBaseUrl();
-axios.defaults.timeout = 1000 * 60 * 10;
+const request = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  timeout: 1000 * 60 * 10,
+  // headers: {
+  //     'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
+  // }
+});
+
 // axios.defaults.withCredentials = true;
-axios.interceptors.request.use(
+request.interceptors.request.use(
   async (config) => {
     const userStore = useUserStore(pinia);
     config.headers.Token = userStore.getToken;
@@ -38,13 +44,13 @@ axios.interceptors.request.use(
   (error) => Promise.reject(error)
 );
 
-axios.interceptors.response.use(
+request.interceptors.response.use(
   (config) => {
     if (config.config.method === "get" || config.config.method === "GET") {
       if (config.config.params.loading !== false) endLoading();
     }
     if (config.config.method === "post" || config.config.method === "POST") {
-      if (config.config.headers["Content-Type"] === "multipart/form-data") {
+      if (getDataType(config.config.data) === "FormData") {
         endLoading();
       } else {
         if (JSON.parse(config.config.data)?.loading !== false) endLoading();
@@ -53,7 +59,7 @@ axios.interceptors.response.use(
     if (config.data.code === 401) {
       if (!isTipTokenFailure) {
         isTipTokenFailure = true;
-        ElMessage.error("登录失效，请重新登录");
+        ElMessage.error("登录失效，请重新登陆");
         router.push("/login").then();
         isTipTokenFailure = false;
       }
@@ -76,10 +82,10 @@ axios.interceptors.response.use(
   }
 );
 
-export function post(url, params = {}) {
+export function post(url, params) {
   const userStore = useUserStore(pinia);
   return new Promise((resolve, reject) => {
-    axios
+    request
       .post(url, {
         corpinfoId: userStore.getUserInfo.corpinfoId,
         userId: userStore.getUserInfo.userId,
@@ -99,16 +105,14 @@ export function post(url, params = {}) {
   });
 }
 
-export function get(url, params = {}) {
+export function get(url, params) {
   const userStore = useUserStore(pinia);
   return new Promise((resolve, reject) => {
-    axios
+    request
       .get(url, {
-        params: {
-          corpinfoId: userStore.getUserInfo.corpinfoId,
-          userId: userStore.getUserInfo.userId,
-          ...params,
-        },
+        corpinfoId: userStore.getUserInfo.corpinfoId,
+        userId: userStore.getUserInfo.userId,
+        ...params,
       })
       .then((res) => {
         if (res.data.result === "success") {
@@ -124,9 +128,9 @@ export function get(url, params = {}) {
   });
 }
 
-export function upload(url, params = {}) {
+export function upload(url, params) {
   return new Promise((resolve, reject) => {
-    axios
+    request
       .post(url, params, {
         headers: {
           "Content-Type": "multipart/form-data",
diff --git a/src/request/data_dictionary.js b/src/request/data_dictionary.js
new file mode 100644
index 0000000..284f3c0
--- /dev/null
+++ b/src/request/data_dictionary.js
@@ -0,0 +1,21 @@
+import { post } from "./axios";
+
+// 获取部门
+export const getDepartmentTree = (parentId = "0") =>
+  post("/oa/department/getTree", {
+    loading: false,
+    parentId,
+  });
+// 获取数据字典
+export const getDataDictionary = (params) =>
+  post("/sys/dictionaries/list", {
+    loading: false,
+    ...params,
+  });
+// 获取数据字典树
+export const getDataDictionaryTree = (params) =>
+  post("/sys/dictionaries/listTree", {
+    loading: false,
+    ...params,
+  });
+  
\ No newline at end of file
diff --git a/src/request/kangzai.js b/src/request/kangzai.js
new file mode 100644
index 0000000..ae55ae5
--- /dev/null
+++ b/src/request/kangzai.js
@@ -0,0 +1,91 @@
+import { post } from "./axios";
+
+/*
+ * 应急储备库信息表
+ */
+export const getEmergencyStoragePage = (params) =>
+  post("/busEmergencyStorage/listPage", params); // 获取应急储备库信息表
+export const setEmergencyStorageDelete = (params) =>
+  post("/busEmergencyStorage/delete", params); // 获取应急储备库信息表
+export const setEmergencyStorageAdd = (params) =>
+  post("/busEmergencyStorage/save", params);
+export const setEmergencyStorageUpdate = (params) =>
+  post("/busEmergencyStorage/update", params);
+
+/*
+ * 山洪村信息
+ */
+export const getMountainFloodVillagePage = (params) =>
+  post("/busMountainFloodVillage/listPage", params); // 获取山洪村信息表
+export const setMountainFloodVillageDelete = (params) =>
+  post("/busMountainFloodVillage/delete", params);
+export const setMountainFloodVillageAdd = (params) =>
+  post("/busMountainFloodVillage/save", params);
+export const setMountainFloodVillageUpdate = (params) =>
+  post("/busMountainFloodVillage/update", params);
+
+/*
+ *城市防涝点
+ */
+export const getUrbanFloodPointPage = (params) =>
+  post("/busUrbanFloodPoint/listPage", params);
+export const setUrbanFloodPointDelete = (params) =>
+  post("/busUrbanFloodPoint/delete", params);
+export const setUrbanFloodPointAdd = (params) =>
+  post("/busUrbanFloodPoint/save", params);
+export const setUrbanFloodPointUpdate = (params) =>
+  post("/busUrbanFloodPoint/update", params);
+
+/*
+ *地质灾害点信息
+ */
+export const getGeologicalDisasterPage = (params) =>
+  post("/busGeologicalDisaster/listPage", params);
+export const setGeologicalDisasterDelete = (params) =>
+  post("/busGeologicalDisaster/delete", params);
+export const setGeologicalDisasterAdd = (params) =>
+  post("/busGeologicalDisaster/save", params);
+export const setGeologicalDisasterUpdate = (params) =>
+  post("/busGeologicalDisaster/update", params);
+
+/*
+ * 水库信息BusReservoirBasicEntity
+ */
+export const getReservoirBasicPage = (params) =>
+  post("/busReservoirBasic/listPage", params);
+export const setReservoirBasicDelete = (params) =>
+  post("/busReservoirBasic/delete", params);
+export const setReservoirBasicAdd = (params) =>
+  post("/busReservoirBasic/save", params);
+export const setReservoirBasicUpdate = (params) =>
+  post("/busReservoirBasic/update", params);
+
+/*
+ * 河流 BusRiverEntity
+ */
+export const getRiverPage = (params) => post("/busRiver/listPage", params);
+export const setRiverDelete = (params) => post("/busRiver/delete", params);
+export const setRiverAdd = (params) => post("/busRiver/save", params);
+export const setRiverUpdate = (params) => post("/busRiver/update", params);
+/*
+ * 河道行洪隐患区村庄清单 BusRiverRiskVillagesEntity
+ */
+export const getRiverRiskVillagePage = (params) =>
+  post("/busRiverRiskVillages/listPage", params);
+export const setRiverRiskVillageDelete = (params) =>
+  post("/busRiverRiskVillages/delete", params);
+export const setRiverRiskVillageAdd = (params) =>
+  post("/busRiverRiskVillages/save", params);
+export const setRiverRiskVillageUpdate = (params) =>
+  post("/busRiverRiskVillages/update", params);
+/*
+ * 河流县区段信息 BusRiverSectionsEntity
+ */
+export const setRiverSectionsListPage = (params) =>
+  post("/busRiverSections/listPage", params);
+  export const setRiverSectionsDelete = (params) =>
+  post("/busRiverSections/delete", params);
+  export const setRiverSectionsAdd = (params) =>
+  post("/busRiverSections/save", params);
+  export const setRiverSectionsUpdate = (params) =>
+    post("/busRiverSections/update", params);
diff --git a/src/request/schedule_job.js b/src/request/schedule_job.js
new file mode 100644
index 0000000..2aaf336
--- /dev/null
+++ b/src/request/schedule_job.js
@@ -0,0 +1,47 @@
+import { post } from "./axios";
+
+export const getScheduleJobList = (params) =>
+  post("/sys/schedule/list", {
+    loading: false,
+    ...params,
+  });
+export const getScheduleJobInfo = (params) =>
+  post("/sys/schedule/info", {
+    loading: false,
+    ...params,
+  });
+export const addScheduleJob = (params) =>
+  post("/sys/schedule/save", {
+    loading: false,
+    ...params,
+  });
+export const updateScheduleJob = (params) =>
+  post("/sys/schedule/update", {
+    loading: false,
+    ...params,
+  });
+export const deleteScheduleJob = (params) =>
+  post("/sys/schedule/delete", {
+    loading: false,
+    ...params,
+  });
+export const pauseScheduleJob = (params) =>
+  post("/sys/schedule/pause", {
+    loading: false,
+    ...params,
+  });
+export const resumeScheduleJob = (params) =>
+  post("/sys/schedule/resume", {
+    loading: false,
+    ...params,
+  });
+export const runScheduleJob = (params) =>
+  post("/sys/schedule/run", {
+    loading: false,
+    ...params,
+  });
+export const getPayCode = (params) =>
+  post("/pay/getPayCode", {
+    loading: false,
+    ...params,
+  });
diff --git a/src/request/system_management.js b/src/request/system_management.js
new file mode 100644
index 0000000..3cd31d1
--- /dev/null
+++ b/src/request/system_management.js
@@ -0,0 +1,27 @@
+import { post } from "@/request/axios";
+
+export const getRoleList = (params) => post("/sys/role/listPage", params); // 角色管理列表
+export const getRoleListAll = (params) => post("/sys/role/listAll", params); // 角色管理列表所有
+export const setRoleDelete = (params) => post("/sys/role/delete", params); // 角色管理删除
+export const setRoleAdd = (params) => post("/sys/role/save", params); // 角色管理添加
+export const setRoleEdit = (params) => post("/sys/role/update", params); // 角色管理修改
+export const getRoleView = (params) => post("/sys/role/info", params); // 角色管理查看
+export const getDataDictionaryList = (params) =>
+  post("/sys/dictionaries/listPage", params); // 数据字典列表
+export const setDataDictionaryDelete = (params) =>
+  post("/sys/dictionaries/delete", params); // 数据字典删除
+export const setDataDictionaryAdd = (params) =>
+  post("/sys/dictionaries/save", params); // 数据字典添加
+export const setDataDictionaryEdit = (params) =>
+  post("/sys/dictionaries/update", params); // 数据字典修改
+export const getDataDictionaryInfo = (params) =>
+  post("/sys/dictionaries/info", params); // 数据字典查看
+export const getDataDictionaryRepeat = (params) =>
+  post("/sys/dictionaries/findByBianma", params); // 数据字典验证编码是否重复
+export const getRouteList = (params) => post("/sys/menu/list", params); // 菜单管理列表
+export const getRouteView = (params) => post("/sys/menu/info", params); // 菜单管理查看
+export const setRouteAdd = (params) => post("/sys/menu/save", params); // 菜单管理添加
+export const setRouteEdit = (params) => post("/sys/menu/update", params); // 菜单管理修改
+export const setRouteDelete = (params) => post("/sys/menu/delete", params); // 菜单管理删除
+export const setRouteIcon = (params) => post("/sys/menu/icon", params); // 菜单管理修改图标
+export const getLogsListPage = (params) => post("/sys/log/list", params);
diff --git a/src/request/user_management.js b/src/request/user_management.js
new file mode 100644
index 0000000..42cb4f3
--- /dev/null
+++ b/src/request/user_management.js
@@ -0,0 +1,28 @@
+import { post, upload } from "@/request/axios";
+export const getDepartmentList = (params) =>
+  post("/oa/department/listPage", params); // 部门管理列表
+export const setDepartmentDelete = (params) =>
+  post("/oa/department/delete", params); // 部门管理删除
+export const setDepartmentAdd = (params) => post("/oa/department/save", params); // 部门管理添加
+export const setDepartmentEdit = (params) =>
+  post("/oa/department/update", params); // 部门管理修改
+export const getDepartmentView = (params) =>
+  post("/oa/department/info", params); // 部门管理查看
+export const getJobList = (params) => post("/oa/post/listPage", params); // 岗位管理列表
+export const getJobListAll = (params) => post("/oa/post/listAll", params); // 岗位管理列表所有
+export const setJobDelete = (params) => post("/oa/post/delete", params); // 岗位管理删除
+export const getJobView = (params) => post("/oa/post/info", params); // 岗位管理查看
+export const setJobAdd = (params) => post("/oa/post/save", params); // 岗位管理添加
+export const setJobEdit = (params) => post("/oa/post/update", params); // 岗位管理修改
+export const getUserList = (params) => post("/sys/user/list", params); // 用户管理列表
+export const getUserListAll = (params) => post("sys/user/listAll", params); // 用户管理列表所有
+export const setUserDelete = (params) => post("/sys/user/delete", params); // 用户管理删除
+export const setUserResetPassword = (params) =>
+  post("/sys/user/resetPassword", params); // 用户管理重置密码
+export const getUserView = (params) => post("/sys/user/getInfo", params); // 用户管理查看
+export const getUserUserNameRepeat = (params) =>
+  post("/sys/user/hasUser", params); // 用户管理用户名去重
+export const setUserAdd = (params) => upload("/sys/user/save", params); // 用户管理添加
+export const setUserEdit = (params) => upload("/sys/user/update", params); // 用户管理修改
+export const setUserExercisesImport = (params) =>
+  upload("/sys/user/readExcel", params); // 人员导入
diff --git a/src/router/index.js b/src/router/index.js
index 1ac4a95..15b2d43 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,7 +12,7 @@ const routes = [
   {
     path: "/",
     name: "app",
-    redirect: "/map",
+    redirect: "/login",
     meta: { isLogin: true },
     component: children,
     children: [
@@ -49,6 +49,109 @@ const routes = [
             meta: { title: "首页" },
             component: () => import("@/views/index/index"),
           },
+          {
+            path: "/river",
+            name: "/river",
+            meta: {
+              title: "河流信息",
+              breadcrumb: true,
+              isMenu: true,
+              isSubMenu: false,
+            },
+            component: () => import("@/views/river/index"),
+          },
+          {
+            path: "/river/risk_village",
+            name: "/river/risk_village",
+            meta: {
+              title: "河道行洪隐患区村庄",
+              breadcrumb: true,
+              isMenu: false,
+              isSubMenu: true,
+              isBack: true,
+              activeMenu: "/river",
+            },
+            component: () => import("@/views/river/river_risk_village/index"),
+          },
+          {
+            path: "/river/river_section",
+            name: "/river/river_section",
+            meta: {
+              title: "河道流经县区",
+              breadcrumb: true,
+              isMenu: false,
+              isSubMenu: true,
+              isBack: true,
+              activeMenu: "/river",
+            },
+            component: () => import("@/views/river/river_section/index"),
+          },
+          {
+            path: "/reservoir_info",
+            name: "/reservoir_info",
+            meta: {
+              title: "水库信息",
+              breadcrumb: true,
+              isMenu: true,
+              isSubMenu: false,
+            },
+            component: () => import("@/views/reservoir_info/index"),
+          },
+          {
+            path: "/geological_disaster",
+            name: "/geological_disaster",
+            meta: {
+              title: "地质灾害点信息",
+              breadcrumb: true,
+              isMenu: true,
+              isSubMenu: false,
+            },
+            component: () => import("@/views/geological_disaster/index"),
+          },
+          {
+            path: "/urban_flood_point",
+            name: "/urban_flood_point",
+            meta: {
+              title: "城市防涝点详情",
+              breadcrumb: true,
+              isMenu: true,
+              isSubMenu: false,
+            },
+            component: () => import("@/views/urban_flood_point/index"),
+          },
+          {
+            path: "/mountain_flood_info",
+            name: "/mountain_flood_info",
+            meta: {
+              title: "山洪灾害村",
+              breadcrumb: true,
+              isMenu: true,
+              isSubMenu: false,
+            },
+            component: () => import("@/views/mountain_flood_info/index"),
+          },
+          {
+            path: "/emergency_storage",
+            name: "/emergency_storage",
+            meta: {
+              title: "应急储备库信息",
+              breadcrumb: true,
+              isMenu: true,
+              isSubMenu: false,
+            },
+            component: () => import("@/views/emergency_storage/index"),
+          },
+          {
+            path: "/system_management/data_dictionary",
+            name: "/system_management/data_dictionary",
+            meta: {
+              title: "数据字典",
+              breadcrumb: true,
+              isMenu: true,
+              isSubMenu: false,
+            },
+            component: () => import("@/views/system_management/data_dictionary/index"),
+          },
         ],
       },
     ],
diff --git a/src/views/emergency_storage/components/add.vue b/src/views/emergency_storage/components/add.vue
new file mode 100644
index 0000000..cde5a54
--- /dev/null
+++ b/src/views/emergency_storage/components/add.vue
@@ -0,0 +1,200 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="100px"
+      style="margin-top: 20px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="应急库名称" prop="storageName">
+            <el-input
+              v-model="form.storageName"
+              placeholder="请输入应急库名称"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="属地" prop="area">
+            <layout-cascader
+              v-model="form.area"
+              v-model:name="form.areaName"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="false"
+              :level="4"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="应急库类型" prop="storageType">
+            <el-select
+              v-model="form.storageType"
+              placeholder="请选择应急库类型"
+              filterable
+            >
+              <el-option
+                v-for="item in storageTypeList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="管理单位" prop="managementUnit">
+            <el-input
+              v-model="form.managementUnit"
+              placeholder="请输入应急库名称"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <div style="display: flex">
+            <el-form-item label="经度" prop="longitude" style="flex: 1">
+              <el-input v-model="form.longitude" placeholder="请选择经度" />
+            </el-form-item>
+            <el-form-item label="纬度" prop="latitude" style="flex: 1">
+              <el-input v-model="form.latitude" placeholder="请选择纬度" />
+            </el-form-item>
+            <el-form-item label-width="10px">
+              <el-button
+                class="ml-10"
+                type="primary"
+                @click="fnSelectedPosition(form)"
+              >
+                点击定位
+              </el-button>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+
+    <app-map
+      v-model:visible="mapDialog.visible"
+      v-model:longitude="mapDialog.longitude"
+      v-model:latitude="mapDialog.latitude"
+      @submit="fnMapSubmit"
+    />
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import { ElMessage } from "element-plus";
+import { reactive, ref } from "vue";
+import { useVModels } from "@vueuse/core";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import AppMap from "@/components/map/map.vue";
+import {
+  setEmergencyStorageAdd,
+  setEmergencyStorageUpdate,
+} from "@/request/kangzai.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const { validate, formRef } = useFormValidate();
+const storageTypeList = ref([]);
+const fnGetStorageTypeList = async () => {
+  const resData = await getDataDictionary({
+    parentId: "j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y",
+  });
+  storageTypeList.value = resData.dictionariesList;
+};
+fnGetStorageTypeList();
+
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+const data = reactive({
+  rules: {
+    storageName: [
+      { required: true, message: "请输入应急库名称", trigger: "blur" },
+    ],
+    area: [{ required: true, message: "请输入应急库区域", trigger: "blur" }],
+    longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
+    latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+  },
+});
+
+const mapDialog = ref({
+  visible: false,
+  longitude: "",
+  latitude: "",
+});
+const fnSelectedPosition = ({ longitude, latitude }) => {
+  mapDialog.value.visible = true;
+  mapDialog.value.longitude = longitude;
+  mapDialog.value.latitude = latitude;
+};
+const fnMapSubmit = ({ longitude, latitude }) => {
+  form.value.longitude = longitude;
+  form.value.latitude = latitude;
+};
+const fnClose = () => {
+  visible.value = false;
+};
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    const form = props.form;
+    const param = {
+      ...form,
+      areaName: form.areaName.join("-"),
+      province: form.area[0],
+      city: form.area[1],
+      county: form.area[2],
+      village: form.area[3],
+      street: form.area[4],
+    };
+    delete param.area;
+    if (props.type === "add") {
+      await setEmergencyStorageAdd({
+        ...param,
+      });
+    }
+    if (props.type === "edit")
+      await setEmergencyStorageUpdate({
+        ...param,
+      });
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/emergency_storage/index.vue b/src/views/emergency_storage/index.vue
new file mode 100644
index 0000000..b1a3c10
--- /dev/null
+++ b/src/views/emergency_storage/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="应急库名称" prop="storageName">
+          <el-input
+            v-model="searchForm.storageName"
+            placeholder="请输入应急库名称"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="属地" prop="area">
+          <layout-cascader
+            v-model="searchForm.area"
+            :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+            :check-strictly="true"
+            :level="5"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="应急库类型" prop="storageType">
+          <el-select
+            v-model="searchForm.storageType"
+            placeholder="请选择矿山类别"
+            filterable
+          >
+            <el-option
+              v-for="item in storageTypeList"
+              :key="item.bianma"
+              :label="item.name"
+              :value="item.bianma"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </app-search>
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column prop="storageName" label="应急库名称" />
+      <el-table-column prop="areaName" label="属地" />
+      <el-table-column prop="storageTypeName" label="应急库类型" />
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')">
+            编辑
+          </el-button>
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnDelete(row.emergencyStorageId)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')">
+          新增
+        </el-button>
+      </template>
+    </app-table>
+
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :type="data.addOrEditDialog.type"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick } from "vue";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { debounce } from "throttle-debounce";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import {
+  getEmergencyStoragePage,
+  setEmergencyStorageDelete,
+} from "@/request/kangzai.js";
+import Add from "./components/add.vue";
+
+const storageTypeList = ref([]);
+const fnGetStorageTypeList = async () => {
+  const resData = await getDataDictionary({
+    parentId: "j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y",
+  });
+  storageTypeList.value = resData.dictionariesList;
+};
+fnGetStorageTypeList();
+
+const { list, pagination, searchForm, resetPagination, getData } = useListData(
+  getEmergencyStoragePage,
+  {
+    beforeGetData: (searchForm) => {
+      const area = searchForm.area || [];
+
+      searchForm.province = area[0];
+      searchForm.city = area[1];
+      searchForm.county = area[2];
+      searchForm.village = area[3];
+      searchForm.street = area[4];
+    },
+    callback: (list) => {
+      list.forEach((item) => {
+        item.storageTypeName = storageTypeList.value.filter((temp) => {
+          return temp.bianma === item.storageType;
+        })[0]?.name;
+      });
+    },
+  }
+);
+
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      storageName: "",
+      storageType: "",
+      area: [],
+      areaName: [],
+      managementUnit: "",
+      longitude: "",
+      latitude: "",
+    },
+  },
+});
+const fnDelete = debounce(
+  1000,
+  async (emergencyStorageId) => {
+    await ElMessageBox.confirm(`确定要删除吗？`, {
+      type: "warning",
+    });
+    await setEmergencyStorageDelete({ emergencyStorageId });
+    ElMessage.success("删除成功");
+    resetPagination();
+  },
+  { atBegin: true }
+);
+
+const fnAddOrEdit = async (row, type) => {
+  data.addOrEditDialog.visible = true;
+  await nextTick();
+  data.addOrEditDialog.form = {};
+  data.addOrEditDialog.type = type;
+  if (type === "edit") {
+    data.addOrEditDialog.form = row;
+    data.addOrEditDialog.form.area = [
+      row.province,
+      row.city,
+      row.county,
+      row.village,
+      row.street,
+    ];
+    data.addOrEditDialog.form.areaName = row.areaName.split("-");
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/geological_disaster/components/add.vue b/src/views/geological_disaster/components/add.vue
new file mode 100644
index 0000000..99cef14
--- /dev/null
+++ b/src/views/geological_disaster/components/add.vue
@@ -0,0 +1,353 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="100px"
+      style="margin-top: 20px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="灾害点名称" prop="disasterName">
+            <el-input
+              v-model="form.disasterName"
+              placeholder="请输入灾害点名称"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="属地" prop="area">
+            <layout-cascader
+              v-model="form.area"
+              v-model:name="form.areaName"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="false"
+              :level="4"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="地形地貌" prop="terrain">
+            <el-select v-model="form.terrain" placeholder="请选择地形地貌">
+              <el-option
+                v-for="item in terrainList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="灾害类型" prop="disasterType">
+            <el-select v-model="form.disasterType" placeholder="请选择灾害类型">
+              <el-option
+                v-for="item in disasterTypeList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="规模" prop="scale">
+            <el-select v-model="form.scale" placeholder="请选择规模">
+              <el-option
+                v-for="item in scaleList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="稳定性" prop="stability">
+            <el-select v-model="form.stability" placeholder="请选择稳定性">
+              <el-option
+                v-for="item in stabilityList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="户数" prop="households">
+            <el-input-number
+              v-model="form.households"
+              placeholder="请输入户数"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="人口数" prop="population">
+            <el-input-number
+              v-model="form.population"
+              placeholder="请输入人口数"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="险情等级" prop="dangerousSituation">
+            <el-select
+              v-model="form.dangerousSituation"
+              placeholder="请选择险情等级"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in dangerousSituationList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="勘察情况" prop="surveySituation">
+            <el-input
+              v-model="form.surveySituation"
+              placeholder="请输入勘察情况"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="治理情况" prop="governanceSituation">
+            <el-input
+              v-model="form.governanceSituation"
+              placeholder="请输入治理情况"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="搬迁情况" prop="relocationSituation">
+            <el-input
+              v-model="form.relocationSituation"
+              placeholder="请输入搬迁情况"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="风险等级" prop="riskLevel">
+            <el-select v-model="form.riskLevel" placeholder="请选择风险等级">
+              <el-option label="低风险" value="1" />
+              <el-option label="中风险" value="2" />
+              <el-option label="高风险" value="3" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="规模与形态描述" prop="scaleDescription">
+            <el-input
+              v-model="form.scaleDescription"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入规模与形态描述"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <div style="display: flex">
+            <el-form-item label="经度" prop="longitude" style="flex: 1">
+              <el-input v-model="form.longitude" placeholder="请选择经度" />
+            </el-form-item>
+            <el-form-item label="纬度" prop="latitude" style="flex: 1">
+              <el-input v-model="form.latitude" placeholder="请选择纬度" />
+            </el-form-item>
+            <el-form-item label-width="10px">
+              <el-button
+                class="ml-10"
+                type="primary"
+                @click="fnSelectedPosition"
+                >点击定位</el-button
+              >
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+
+    <app-map
+      v-model:visible="mapDialog.visible"
+      v-model:longitude="mapDialog.longitude"
+      v-model:latitude="mapDialog.latitude"
+      @submit="fnMapSubmit"
+    />
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import { ElMessage } from "element-plus";
+import { reactive, ref } from "vue";
+import { useVModels } from "@vueuse/core";
+import AppMap from "@/components/map/map.vue";
+import {
+  setGeologicalDisasterAdd,
+  setGeologicalDisasterUpdate,
+} from "@/request/kangzai.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const { validate, formRef } = useFormValidate();
+
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+
+// 字典数据
+const terrainList = ref([]);
+const disasterTypeList = ref([]);
+const scaleList = ref([]);
+const stabilityList = ref([]);
+const dangerousSituationList = ref([]);
+
+const fnGetDictData = async () => {
+  const [
+    terrainRes,
+    disasterTypeRes,
+    scaleRes,
+    stabilityRes,
+    dangerousSituationRes,
+  ] = await Promise.all([
+    getDataDictionary({ parentId: "b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q" }),
+    getDataDictionary({ parentId: "c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r" }),
+    getDataDictionary({ parentId: "7d3a1b2c8e4f5947a6b0c8d9e0f1a2b3" }),
+    getDataDictionary({ parentId: "a4f5c6d7e8291047b3a2b1c0d9e8f7a6" }),
+    getDataDictionary({ parentId: "c8e9f0a1b2c347d56e7f8a9b0c1d2e3f" }),
+  ]);
+  terrainList.value = terrainRes.dictionariesList;
+  disasterTypeList.value = disasterTypeRes.dictionariesList;
+  scaleList.value = scaleRes.dictionariesList;
+  stabilityList.value = stabilityRes.dictionariesList;
+  dangerousSituationList.value = dangerousSituationRes.dictionariesList;
+};
+fnGetDictData();
+
+const data = reactive({
+  rules: {
+    disasterName: [
+      { required: true, message: "请输入灾害点名称", trigger: "blur" },
+    ],
+    area: [{ required: true, message: "请选择区域", trigger: "blur" }],
+    disasterType: [
+      { required: true, message: "请选择灾害类型", trigger: "change" },
+    ],
+    scale: [{ required: true, message: "请选择规模", trigger: "change" }],
+    stability: [{ required: true, message: "请选择稳定性", trigger: "change" }],
+    households: [{ required: true, message: "请输入户数", trigger: "blur" }],
+    population: [{ required: true, message: "请输入人口数", trigger: "blur" }],
+    dangerousSituation: [
+      { required: true, message: "请选择险情等级", trigger: "change" },
+    ],
+    surveySituation: [
+      { required: true, message: "请选择勘察情况", trigger: "change" },
+    ],
+    governanceSituation: [
+      { required: true, message: "请选择治理情况", trigger: "change" },
+    ],
+    relocationSituation: [
+      { required: true, message: "请选择搬迁情况", trigger: "change" },
+    ],
+    riskLevel: [
+      { required: true, message: "请选择风险等级", trigger: "change" },
+    ],
+    longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
+    latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+  },
+});
+
+const mapDialog = ref({
+  visible: false,
+  longitude: "",
+  latitude: "",
+});
+const fnSelectedPosition = () => {
+  mapDialog.value.visible = true;
+  mapDialog.value.longitude = form.value.longitude;
+  mapDialog.value.latitude = form.value.latitude;
+};
+const fnMapSubmit = ({ longitude, latitude }) => {
+  form.value.longitude = longitude;
+  form.value.latitude = latitude;
+};
+
+const fnClose = () => {
+  visible.value = false;
+};
+
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    const param = {
+      ...form.value,
+      areaName: form.value.areaName.join("-"),
+      province: form.value.area[0],
+      city: form.value.area[1],
+      county: form.value.area[2],
+      village: form.value.area[3],
+      street: form.value.area[4],
+    };
+    delete param.area;
+
+    if (props.type === "add") {
+      await setGeologicalDisasterAdd(param);
+    } else if (props.type === "edit") {
+      await setGeologicalDisasterUpdate(param);
+    }
+
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/geological_disaster/index.vue b/src/views/geological_disaster/index.vue
new file mode 100644
index 0000000..27a641c
--- /dev/null
+++ b/src/views/geological_disaster/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="灾害点名称" prop="disasterName">
+          <el-input
+            v-model="searchForm.disasterName"
+            placeholder="请输入灾害点名称"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="属地" prop="area">
+          <layout-cascader
+            v-model="searchForm.area"
+            :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+            :check-strictly="true"
+            :level="5"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="地形地貌" prop="terrain">
+          <el-select v-model="searchForm.terrain" placeholder="请选择地形地貌">
+            <el-option
+              v-for="item in terrainList"
+              :key="item.bianma"
+              :label="item.name"
+              :value="item.bianma"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="灾害类型" prop="disasterType">
+          <el-select
+            v-model="searchForm.disasterType"
+            placeholder="请选择灾害类型"
+          >
+            <el-option
+              v-for="item in disasterTypeList"
+              :key="item.bianma"
+              :label="item.name"
+              :value="item.bianma"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </app-search>
+
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column prop="disasterName" label="灾害点名称" />
+      <el-table-column prop="areaName" label="属地" />
+      <el-table-column prop="terrainName" label="地形地貌" />
+      <el-table-column prop="disasterTypeName" label="灾害类型" />
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
+            >编辑</el-button
+          >
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnDelete(row.geologicalDisasterId)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')"
+          >新增</el-button
+        >
+      </template>
+    </app-table>
+
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :type="data.addOrEditDialog.type"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick } from "vue";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import {
+  getGeologicalDisasterPage,
+  setGeologicalDisasterDelete,
+} from "@/request/kangzai.js";
+import Add from "./components/add.vue";
+
+const terrainList = ref([]);
+const disasterTypeList = ref([]);
+
+const fnGetDictData = async () => {
+  const [terrainRes, disasterTypeRes] = await Promise.all([
+    getDataDictionary({ parentId: "b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q" }),
+    getDataDictionary({ parentId: "c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r" }),
+  ]);
+  terrainList.value = terrainRes.dictionariesList;
+  disasterTypeList.value = disasterTypeRes.dictionariesList;
+};
+fnGetDictData();
+
+const { list, pagination, searchForm, resetPagination, getData } = useListData(
+  getGeologicalDisasterPage,
+  {
+    beforeGetData: (searchForm) => {
+      const area = searchForm.area || [];
+      searchForm.province = area[0];
+      searchForm.city = area[1];
+      searchForm.county = area[2];
+      searchForm.village = area[3];
+      searchForm.street = area[4];
+    },
+    callback: (list) => {
+      list.forEach((item) => {
+        item.terrainName =
+          terrainList.value.find((dict) => dict.bianma === item.terrain)
+            ?.name || item.terrain;
+        item.disasterTypeName =
+          disasterTypeList.value.find(
+            (dict) => dict.bianma === item.disasterType
+          )?.name || item.disasterType;
+      });
+    },
+  }
+);
+
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      disasterName: "",
+      province: "",
+      city: "",
+      county: "",
+      village: "",
+      street: "",
+      area: [],
+      areaName: [],
+      terrain: "",
+      disasterType: "",
+      scaleDescription: "",
+      scale: "",
+      stability: "",
+      households: "",
+      population: "",
+      dangerousSituation: "",
+      surveySituation: "",
+      governanceSituation: "",
+      relocationSituation: "",
+      riskLevel: "",
+      longitude: "",
+      latitude: "",
+    },
+  },
+});
+
+const fnDelete = async (geologicalDisasterId) => {
+  await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+  await setGeologicalDisasterDelete({ geologicalDisasterId });
+  ElMessage.success("删除成功");
+  resetPagination();
+};
+
+const fnAddOrEdit = async (row, type) => {
+  data.addOrEditDialog.visible = true;
+  await nextTick();
+  data.addOrEditDialog.form = {};
+  data.addOrEditDialog.type = type;
+
+  if (type === "edit") {
+    data.addOrEditDialog.form = row;
+    data.addOrEditDialog.form.area = [
+      row.province,
+      row.city,
+      row.county,
+      row.village,
+      row.street,
+    ];
+    data.addOrEditDialog.form.areaName = row.areaName.split("-");
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/mountain_flood_info/components/add.vue b/src/views/mountain_flood_info/components/add.vue
new file mode 100644
index 0000000..db6b457
--- /dev/null
+++ b/src/views/mountain_flood_info/components/add.vue
@@ -0,0 +1,412 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="160px"
+      style="margin-top: 20px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="村庄名称" prop="villageName">
+            <el-input v-model="form.villageName" placeholder="请输入村庄名称" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="属地" prop="area">
+            <layout-cascader
+              v-model="form.area"
+              v-model:name="form.areaName"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="false"
+              :level="4"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="县级预警负责人" prop="countyWarningOfficer">
+            <el-input
+              v-model="form.countyWarningOfficer"
+              placeholder="请输入预警负责人"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="县级预警负责人电话" prop="countyWarningPhone">
+            <el-input
+              v-model="form.countyWarningPhone"
+              placeholder="请输入县级预警负责人电话"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="县级责任人" prop="countyOfficer">
+            <el-input
+              v-model="form.countyOfficer"
+              placeholder="请输入县级责任人"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="县级责任人职务" prop="countyOfficerPosition">
+            <el-input
+              v-model="form.countyOfficerPosition"
+              placeholder="请输入县级责任人职务"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="县级责任人电话" prop="countyOfficerPhone">
+            <el-input
+              v-model="form.countyOfficerPhone"
+              placeholder="请输入县级责任人电话"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="乡级责任人" prop="townshipOfficer">
+            <el-input
+              v-model="form.townshipOfficer"
+              placeholder="请输入乡级责任人姓名"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="乡级责任人职务" prop="townshipOfficerPosition">
+            <el-input
+              v-model="form.townshipOfficerPosition"
+              placeholder="请输入乡级责任人职务"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="乡级责任人电话" prop="townshipOfficerPhone">
+            <el-input
+              v-model="form.townshipOfficerPhone"
+              placeholder="请输入乡级责任人电话"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="村级责任人" prop="villageOfficer">
+            <el-input
+              v-model="form.villageOfficer"
+              placeholder="请输入村级责任人姓名"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="村级责任人职务" prop="villageOfficerPosition">
+            <el-input
+              v-model="form.villageOfficerPosition"
+              placeholder="请输入村级责任人职务"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="村级责任人电话" prop="villageOfficerPhone">
+            <el-input
+              v-model="form.villageOfficerPhone"
+              placeholder="请输入村级责任人电话"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="监测员姓名" prop="monitorName">
+            <el-input
+              v-model="form.monitorName"
+              placeholder="请输入监测员姓名"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="监测员职务" prop="monitorPosition">
+            <el-input
+              v-model="form.monitorPosition"
+              placeholder="请输入监测员职务"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="监测员电话" prop="monitorPhone">
+            <el-input
+              v-model="form.monitorPhone"
+              placeholder="请输入监测员电话"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="预警员姓名" prop="warningOfficerName">
+            <el-input
+              v-model="form.warningOfficerName"
+              placeholder="请输入请输入预警员姓名"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="预警员职务" prop="warningOfficerPosition">
+            <el-input
+              v-model="form.warningOfficerPosition"
+              placeholder="请输入预警员职务"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="请输入预警员电话" prop="warningOfficerPhone">
+            <el-input
+              v-model="form.warningOfficerPhone"
+              placeholder="请输入请输入预警员电话"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="转移员姓名" prop="transferOfficerName">
+            <el-input
+              v-model="form.transferOfficerName"
+              placeholder="请输入转移员姓名"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="转移员职务" prop="transferOfficerPosition">
+            <el-input
+              v-model="form.transferOfficerPosition"
+              placeholder="请输入转移员职务"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="转移员电话" prop="transferOfficerPhone">
+            <el-input
+              v-model="form.transferOfficerPhone"
+              placeholder="请输入转移员电话"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remarks">
+            <el-input
+              v-model="form.remarks"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入备注"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <div style="display: flex">
+            <el-form-item label="经度" prop="longitude" style="flex: 1">
+              <el-input v-model="form.longitude" placeholder="请选择经度" />
+            </el-form-item>
+            <el-form-item label="纬度" prop="latitude" style="flex: 1">
+              <el-input v-model="form.latitude" placeholder="请选择纬度" />
+            </el-form-item>
+            <el-form-item label-width="10px">
+              <el-button
+                class="ml-10"
+                type="primary"
+                @click="fnSelectedPosition(form)"
+                >点击定位</el-button
+              >
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+
+    <app-map
+      v-model:visible="mapDialog.visible"
+      v-model:longitude="mapDialog.longitude"
+      v-model:latitude="mapDialog.latitude"
+      @submit="fnMapSubmit"
+    />
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import { ElMessage } from "element-plus";
+import { reactive, ref } from "vue";
+import { useVModels } from "@vueuse/core";
+import AppMap from "@/components/map/map.vue";
+import {
+  setMountainFloodVillageAdd,
+  setMountainFloodVillageUpdate,
+} from "@/request/kangzai.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const { validate, formRef } = useFormValidate();
+
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+
+const data = reactive({
+  rules: {
+    villageName: [
+      { required: true, message: "请输入村庄名称", trigger: "blur" },
+    ],
+    area: [{ required: true, message: "请输入村庄区域", trigger: "blur" }],
+    countyWarningOfficer: [
+      { required: true, message: "请输入县级预警负责人", trigger: "blur" },
+    ],
+    countyWarningOfficerPhone: [
+      { required: true, message: "请输入县级预警负责人手机号", trigger: "blur" },
+    ],
+    countyOfficer: [
+      { required: true, message: "请输入县级责任人姓名", trigger: "blur" },
+    ],
+    countyOfficerPosition: [
+      { required: true, message: "请输入县级责任人职务", trigger: "blur" },
+    ],
+    countyOfficerPhone: [
+      { required: true, message: "请输入县级责任人电话", trigger: "blur" },
+    ],
+    townshipOfficer: [
+      { required: true, message: "请输入乡级责任人姓名", trigger: "blur" },
+    ],
+    townshipOfficerPosition: [
+      { required: true, message: "请输入乡级责任人职务", trigger: "blur" },
+    ],
+    townshipOfficerPhone: [
+      { required: true, message: "请输入乡级责任人电话", trigger: "blur" },
+    ],
+    villageOfficer: [
+      { required: true, message: "请输入村级责任人姓名", trigger: "blur" },
+    ],
+    villageOfficerPosition: [
+      { required: true, message: "请输入村级责任人职务", trigger: "blur" },
+    ],
+    villageOfficerPhone: [
+      { required: true, message: "请输入村级责任人电话", trigger: "blur" },
+    ],
+    monitorName: [
+      { required: true, message: "请输入监测员姓名", trigger: "blur" },
+    ],
+    monitorPosition: [
+      { required: true, message: "请输入监测员职务", trigger: "blur" },
+    ],
+    monitorPhone: [
+      { required: true, message: "请输入监测员电话", trigger: "blur" },
+    ],
+    warningOfficerName: [
+      { required: true, message: "请输入预警员姓名", trigger: "blur" },
+    ],
+    warningOfficerPosition: [
+      { required: true, message: "请输入预警员职务", trigger: "blur" },
+    ],
+    warningOfficerPhone: [
+      { required: true, message: "请输入预警员电话", trigger: "blur" },
+    ],
+    transferOfficerName: [
+      { required: true, message: "请输入转移员姓名", trigger: "blur" },
+    ],
+    transferOfficerPosition: [
+      { required: true, message: "请输入转移员职务", trigger: "blur" },
+    ],
+    transferOfficerPhone: [
+      { required: true, message: "请输入转移员电话", trigger: "blur" },
+    ],
+    longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
+    latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+  },
+});
+
+const mapDialog = ref({
+  visible: false,
+  longitude: "",
+  latitude: "",
+});
+const fnSelectedPosition = ({ longitude, latitude }) => {
+  mapDialog.value.visible = true;
+  mapDialog.value.longitude = longitude;
+  mapDialog.value.latitude = latitude;
+};
+const fnMapSubmit = ({ longitude, latitude }) => {
+  form.value.longitude = longitude;
+  form.value.latitude = latitude;
+};
+
+const fnClose = () => {
+  visible.value = false;
+};
+
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    const param = {
+      ...form.value,
+      areaName: form.value.areaName.join("-"),
+      province: form.value.area[0],
+      city: form.value.area[1],
+      county: form.value.area[2],
+      village: form.value.area[3],
+      street: form.value.area[4],
+    };
+    delete param.area;
+
+    if (props.type === "add") {
+      await setMountainFloodVillageAdd(param);
+    } else if (props.type === "edit") {
+      await setMountainFloodVillageUpdate(param);
+    }
+
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/mountain_flood_info/index.vue b/src/views/mountain_flood_info/index.vue
new file mode 100644
index 0000000..152b7e1
--- /dev/null
+++ b/src/views/mountain_flood_info/index.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="村庄名称" prop="villageName">
+          <el-input
+            v-model="searchForm.villageName"
+            placeholder="请输入村庄名称"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="属地" prop="area">
+          <layout-cascader
+            v-model="searchForm.area"
+            :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+            :check-strictly="true"
+            :level="5"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="预警负责人" prop="countyWarningOfficer">
+          <el-input
+            v-model="searchForm.countyWarningOfficer"
+            placeholder="请输入预警负责人"
+          />
+        </el-form-item>
+      </el-col>
+    </app-search>
+
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column prop="villageName" label="村庄名称" />
+      <el-table-column prop="areaName" label="属地" />
+      <el-table-column prop="countyWarningOfficer" label="县级预警负责人" />
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
+            >编辑</el-button
+          >
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnDelete(row.mountainFloodVillageId)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')"
+          >新增</el-button
+        >
+      </template>
+    </app-table>
+
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :type="data.addOrEditDialog.type"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { reactive, nextTick } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { debounce } from "throttle-debounce";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import {
+  getMountainFloodVillagePage,
+  setMountainFloodVillageDelete,
+} from "@/request/kangzai.js";
+import Add from "./components/add.vue";
+
+const { list, pagination, searchForm, resetPagination, getData } = useListData(
+  getMountainFloodVillagePage,
+  {
+    beforeGetData: (searchForm) => {
+      const area = searchForm.area || [];
+
+      searchForm.province = area[0];
+      searchForm.city = area[1];
+      searchForm.county = area[2];
+      searchForm.village = area[3];
+      searchForm.street = area[4];
+    },
+    callback: () => {},
+  }
+);
+
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      villageName: "",
+      province: "",
+      city: "",
+      county: "",
+      village: "",
+      street: "",
+      area: [],
+      areaName: [],
+      // 责任人信息
+      countyWarningOfficer: "",
+      countyWarningPhone: "",
+      countyOfficer: "",
+      countyOfficerPosition: "",
+      countyOfficerPhone: "",
+      townshipOfficer: "",
+      townshipOfficerPosition: "",
+      townshipOfficerPhone: "",
+      villageOfficer: "",
+      villageOfficerPosition: "",
+      villageOfficerPhone: "",
+      // 其他人员
+      monitorName: "",
+      monitorPosition: "",
+      monitorPhone: "",
+      remarks: "",
+      longitude: "",
+      latitude: "",
+    },
+  },
+});
+
+const fnDelete = debounce(
+  1000,
+  async (mountainFloodVillageId) => {
+    await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+    await setMountainFloodVillageDelete({ mountainFloodVillageId });
+    ElMessage.success("删除成功");
+    resetPagination();
+  },
+  { atBegin: true }
+);
+
+const fnAddOrEdit = async (row, type) => {
+  data.addOrEditDialog.visible = true;
+  await nextTick();
+  data.addOrEditDialog.form = {};
+  data.addOrEditDialog.type = type;
+
+  if (type === "edit") {
+    data.addOrEditDialog.form = row;
+    data.addOrEditDialog.form.area = [
+      row.province,
+      row.city,
+      row.county,
+      row.village,
+      row.street,
+    ];
+    data.addOrEditDialog.form.areaName = row.areaName.split("-");
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/reservoir_info/components/add.vue b/src/views/reservoir_info/components/add.vue
new file mode 100644
index 0000000..755bc22
--- /dev/null
+++ b/src/views/reservoir_info/components/add.vue
@@ -0,0 +1,212 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="200px"
+      style="margin-top: 20px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="水库名称" prop="reservoirName">
+            <el-input
+              v-model="form.reservoirName"
+              placeholder="请输入水库名称"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="水库类型" prop="reservoirType">
+            <el-select
+              v-model="form.reservoirType"
+              placeholder="请选择水库类型"
+            >
+              <el-option
+                v-for="item in reservoirTypeList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="水库等级" prop="reservoirLevel">
+            <el-select
+              v-model="form.reservoirLevel"
+              placeholder="请选择水库等级"
+            >
+              <el-option
+                v-for="item in reservoirLevelList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="极限库容（万立方米）" prop="maxCapacity">
+            <el-input v-model="form.maxCapacity" placeholder="请输入极限库容" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="当前库容（万立方米）" prop="currentCapacity">
+            <el-input
+              v-model="form.currentCapacity"
+              placeholder="请输入当前库容"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <div style="display: flex">
+            <el-form-item label="经度" prop="longitude" style="flex: 1">
+              <el-input v-model="form.longitude" placeholder="请选择经度" />
+            </el-form-item>
+            <el-form-item label="纬度" prop="latitude" style="flex: 1">
+              <el-input v-model="form.latitude" placeholder="请选择纬度" />
+            </el-form-item>
+            <el-form-item label-width="10px">
+              <el-button
+                class="ml-10"
+                type="primary"
+                @click="fnSelectedPosition"
+                >点击定位</el-button
+              >
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+
+    <app-map
+      v-model:visible="mapDialog.visible"
+      v-model:longitude="mapDialog.longitude"
+      v-model:latitude="mapDialog.latitude"
+      @submit="fnMapSubmit"
+    />
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import { ElMessage } from "element-plus";
+import { reactive, ref } from "vue";
+import { useVModels } from "@vueuse/core";
+import AppMap from "@/components/map/map.vue";
+import {
+  setReservoirBasicAdd,
+  setReservoirBasicUpdate,
+} from "@/request/kangzai.js";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const { validate, formRef } = useFormValidate();
+
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+
+// 字典数据
+const reservoirTypeList = ref([]);
+const reservoirLevelList = ref([]);
+
+const fnGetDictData = async () => {
+  const [typeRes, levelRes] = await Promise.all([
+    getDataDictionary({ parentId: "848f91ce29ee1f2d078bc6ec69d440df" }),
+    getDataDictionary({ parentId: "a8b7c6d5e4f3g2h1i0j9k8l7m6n5o4p" }),
+  ]);
+  reservoirTypeList.value = typeRes.dictionariesList;
+  reservoirLevelList.value = levelRes.dictionariesList;
+};
+fnGetDictData();
+
+const data = reactive({
+  rules: {
+    reservoirName: [
+      { required: true, message: "请输入水库名称", trigger: "blur" },
+    ],
+    reservoirType: [
+      { required: true, message: "请选择水库类型", trigger: "change" },
+    ],
+    reservoirLevel: [
+      { required: true, message: "请选择水库等级", trigger: "change" },
+    ],
+    longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
+    latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+  },
+});
+
+const mapDialog = ref({
+  visible: false,
+  longitude: "",
+  latitude: "",
+});
+const fnSelectedPosition = () => {
+  mapDialog.value.visible = true;
+  mapDialog.value.longitude = form.value.longitude;
+  mapDialog.value.latitude = form.value.latitude;
+};
+const fnMapSubmit = ({ longitude, latitude }) => {
+  form.value.longitude = longitude;
+  form.value.latitude = latitude;
+};
+
+const fnClose = () => {
+  visible.value = false;
+};
+
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    const param = {
+      ...form.value,
+    };
+
+    if (props.type === "add") {
+      await setReservoirBasicAdd(param);
+    } else if (props.type === "edit") {
+      await setReservoirBasicUpdate(param);
+    }
+
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/reservoir_info/index.vue b/src/views/reservoir_info/index.vue
new file mode 100644
index 0000000..6bbadfe
--- /dev/null
+++ b/src/views/reservoir_info/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="水库名称" prop="reservoirName">
+          <el-input
+            v-model="searchForm.reservoirName"
+            placeholder="请输入水库名称"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="水库类型" prop="reservoirType">
+          <el-select
+            v-model="searchForm.reservoirType"
+            placeholder="请选择水库类型"
+          >
+            <el-option
+              v-for="item in reservoirTypeList"
+              :key="item.bianma"
+              :label="item.name"
+              :value="item.bianma"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="水库等级" prop="reservoirLevel">
+          <el-select
+            v-model="searchForm.reservoirLevel"
+            placeholder="请选择水库等级"
+          >
+            <el-option
+              v-for="item in reservoirLevelList"
+              :key="item.bianma"
+              :label="item.name"
+              :value="item.bianma"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </app-search>
+
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column prop="reservoirName" label="水库名称" />
+      <el-table-column label="水库类型" prop="reservoirTypeLabel" />
+      <el-table-column label="水库等级" prop="reservoirLevelLabel" />
+      <el-table-column prop="maxCapacity" label="极限库容（万立方米）" />
+      <el-table-column prop="currentCapacity" label="当前库容（万立方米）" />
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
+            >编辑</el-button
+          >
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnDelete(row.reservoirBasicId)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')"
+          >新增</el-button
+        >
+      </template>
+    </app-table>
+
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :type="data.addOrEditDialog.type"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick } from "vue";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import {
+  getReservoirBasicPage,
+  setReservoirBasicDelete,
+} from "@/request/kangzai.js";
+import Add from "./components/add.vue";
+
+const reservoirTypeList = ref([]);
+const reservoirLevelList = ref([]);
+
+const fnGetDictData = async () => {
+  const [typeRes, levelRes] = await Promise.all([
+    getDataDictionary({ parentId: "848f91ce29ee1f2d078bc6ec69d440df" }),
+    getDataDictionary({ parentId: "a8b7c6d5e4f3g2h1i0j9k8l7m6n5o4p" }),
+  ]);
+  reservoirTypeList.value = typeRes.dictionariesList;
+  reservoirLevelList.value = levelRes.dictionariesList;
+};
+fnGetDictData();
+
+const { list, pagination, searchForm, resetPagination, getData } = useListData(
+  getReservoirBasicPage,
+  {
+    callback: (list) => {
+      list.forEach((item) => {
+        item.reservoirTypeLabel =
+          reservoirTypeList.value.find(
+            (dict) => dict.bianma === item.reservoirType
+          )?.name || item.reservoirType;
+        item.reservoirLevelLabel =
+          reservoirLevelList.value.find(
+            (dict) => dict.bianma === item.reservoirLevel
+          )?.name || item.reservoirLevel;
+      });
+    },
+  }
+);
+
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      reservoirName: "",
+      reservoirType: "",
+      reservoirLevel: "",
+      maxCapacity: "",
+      currentCapacity: "",
+      longitude: "",
+      latitude: "",
+    },
+  },
+});
+
+const fnDelete = async (reservoirBasicId) => {
+  await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+  await setReservoirBasicDelete({ reservoirBasicId });
+  ElMessage.success("删除成功");
+  resetPagination();
+};
+
+const fnAddOrEdit = async (row, type) => {
+  data.addOrEditDialog.visible = true;
+  await nextTick();
+  data.addOrEditDialog.form = {};
+  data.addOrEditDialog.type = type;
+
+  if (type === "edit") {
+    data.addOrEditDialog.form = row;
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/river/components/add.vue b/src/views/river/components/add.vue
new file mode 100644
index 0000000..34c9803
--- /dev/null
+++ b/src/views/river/components/add.vue
@@ -0,0 +1,153 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="200px"
+      style="margin-top: 20px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="河流名称" prop="riverName">
+            <el-input v-model="form.riverName" placeholder="请输入河流名称" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="全长(km)" prop="totalLength">
+            <el-input
+              v-model.number="form.totalLength"
+              placeholder="请输入全长(km)"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="流域面积(km²)" prop="basinArea">
+            <el-input
+              v-model.number="form.basinArea"
+              placeholder="请输入流域面积(km²)"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item
+            label="占全市国土面积百分比(%)"
+            prop="cityAreaPercentage"
+          >
+            <el-input
+              v-model.number="form.cityAreaPercentage"
+              placeholder="请输入百分比"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="我市境内河长(km)" prop="inCityRiverLength">
+            <el-input
+              v-model.number="form.inCityRiverLength"
+              placeholder="请输入境内河长(km)"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="我市境内流域面积(km²)" prop="inCityBasinArea">
+            <el-input
+              v-model.number="form.inCityBasinArea"
+              placeholder="请输入境内流域面积(km²)"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import { ElMessage } from "element-plus";
+import { reactive } from "vue";
+import { useVModels } from "@vueuse/core";
+import { setRiverAdd, setRiverUpdate } from "@/request/kangzai.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const { validate, formRef } = useFormValidate();
+
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+
+const data = reactive({
+  rules: {
+    riverName: [{ required: true, message: "请输入河流名称", trigger: "blur" }],
+    totalLength: [
+      { required: true, message: "请输入全长(km)", trigger: "blur" },
+    ],
+    basinArea: [
+      { required: true, message: "请输入流域面积(km²)", trigger: "blur" },
+    ],
+    cityAreaPercentage: [
+      { required: true, message: "请输入百分比(%)", trigger: "blur" },
+    ],
+    inCityRiverLength: [
+      { required: true, message: "请输入境内河长(km)", trigger: "blur" },
+    ],
+    inCityBasinArea: [
+      { required: true, message: "请输入境内流域面积(km²)", trigger: "blur" },
+    ],
+  },
+});
+
+const fnClose = () => {
+  visible.value = false;
+};
+
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    const param = { ...form.value };
+
+    if (props.type === "add") {
+      await setRiverAdd(param);
+    } else if (props.type === "edit") {
+      await setRiverUpdate(param);
+    }
+
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/river/index.vue b/src/views/river/index.vue
new file mode 100644
index 0000000..4088eed
--- /dev/null
+++ b/src/views/river/index.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="河流名称" prop="riverName">
+          <el-input
+            v-model="searchForm.riverName"
+            placeholder="请输入河流名称"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="全长(km)" prop="totalLength">
+          <el-input v-model="searchForm.totalLength" placeholder="请输入全长" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="流域面积(km²)" prop="basinArea">
+          <el-input
+            v-model="searchForm.basinArea"
+            placeholder="请输入流域面积"
+          />
+        </el-form-item>
+      </el-col>
+    </app-search>
+
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column prop="riverName" label="河流名称" />
+      <el-table-column prop="totalLength" label="全长(km)" />
+      <el-table-column prop="basinArea" label="流域面积(km²)" />
+      <el-table-column
+        prop="cityAreaPercentage"
+        label="占全市国土面积百分比(%)"
+      />
+      <el-table-column prop="inCityRiverLength" label="我市境内河长(km)" />
+      <el-table-column prop="inCityBasinArea" label="我市境内流域面积(km²)" />
+      <el-table-column prop="countyCount" label="流经区县数" />
+      <el-table-column prop="riskVillageCount" label="河道行洪隐患区村庄数" />
+      <el-table-column label="操作" width="120" :show-overflow-tooltip="false">
+        <template #default="{ row }">
+          <el-button
+            type="primary"
+            text
+            link
+            @click="
+              router.push({
+                path: '/river/risk_village',
+                query: { riverId: row.riverId },
+              })
+            "
+          >
+            查看隐患村
+          </el-button>
+          <el-button
+            type="primary"
+            text
+            link
+            @click="
+              router.push({
+                path: '/river/river_section',
+                query: { riverId: row.riverId },
+              })
+            "
+          >
+            查看流经县区
+          </el-button>
+          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
+            >编辑</el-button
+          >
+          <el-button type="primary" text link @click="fnDelete(row.riverId)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')"
+          >新增</el-button
+        >
+      </template>
+    </app-table>
+
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :type="data.addOrEditDialog.type"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { reactive, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import { getRiverPage, setRiverDelete } from "@/request/kangzai.js";
+import Add from "./components/add.vue";
+
+const router = useRouter();
+const { list, pagination, searchForm, resetPagination, getData } =
+  useListData(getRiverPage);
+
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      riverName: "",
+      totalLength: "",
+      basinArea: "",
+      cityAreaPercentage: "",
+      inCityRiverLength: "",
+      inCityBasinArea: "",
+    },
+  },
+});
+
+const fnDelete = async (riverId) => {
+  await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+  await setRiverDelete({ riverId });
+  ElMessage.success("删除成功");
+  resetPagination();
+};
+
+const fnAddOrEdit = async (row, type) => {
+  data.addOrEditDialog.visible = true;
+  await nextTick();
+  data.addOrEditDialog.form = {};
+  data.addOrEditDialog.type = type;
+
+  if (type === "edit") {
+    data.addOrEditDialog.form = row;
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/river/river_risk_village/components/add.vue b/src/views/river/river_risk_village/components/add.vue
new file mode 100644
index 0000000..938eec0
--- /dev/null
+++ b/src/views/river/river_risk_village/components/add.vue
@@ -0,0 +1,136 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="120px"
+      style="margin-top: 20px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="所属区县" prop="area">
+            <layout-cascader
+              v-model="form.area"
+              v-model:name="form.areaName"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="false"
+              :level="4"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="隐患等级" prop="riskLevel">
+            <el-select v-model="form.riskLevel" placeholder="请选择隐患等级">
+              <el-option label="低风险" value="1" />
+              <el-option label="中风险" value="2" />
+              <el-option label="高风险" value="3" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="隐患描述" prop="riskDescription">
+            <el-input
+              v-model="form.riskDescription"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入隐患描述"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import { ElMessage } from "element-plus";
+import { reactive } from "vue";
+import { useVModels } from "@vueuse/core";
+import {
+  setRiverRiskVillageAdd,
+  setRiverRiskVillageUpdate,
+} from "@/request/kangzai.js";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  riverId: {
+    type: [String, Number],
+    required: true,
+    default: "",
+  },
+});
+const { validate, formRef } = useFormValidate();
+
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+
+const data = reactive({
+  rules: {
+    area: [{ required: true, message: "请输入所属区县", trigger: "blur" }],
+  },
+});
+
+const fnClose = () => {
+  visible.value = false;
+};
+
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    const form = props.form;
+    const param = {
+      ...form,
+      riverId: props.riverId,
+      areaName: form.areaName.join("-"),
+      province: form.area[0],
+      city: form.area[1],
+      county: form.area[2],
+      village: form.area[3],
+      street: form.area[4],
+    };
+    delete param.area;
+    if (props.type === "add") {
+      await setRiverRiskVillageAdd(param);
+    } else if (props.type === "edit") {
+      await setRiverRiskVillageUpdate(param);
+    }
+
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/river/river_risk_village/index.vue b/src/views/river/river_risk_village/index.vue
new file mode 100644
index 0000000..4f75dbf
--- /dev/null
+++ b/src/views/river/river_risk_village/index.vue
@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="属地" prop="area">
+          <layout-cascader
+            v-model="searchForm.area"
+            v-model:name="searchForm.areaName"
+            :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+            :check-strictly="false"
+            :level="4"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="隐患等级" prop="riskLevel">
+          <el-select
+            v-model="searchForm.riskLevel"
+            placeholder="请选择隐患等级"
+          >
+            <el-option label="低风险" value="1" />
+            <el-option label="中风险" value="2" />
+            <el-option label="高风险" value="3" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </app-search>
+
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column prop="areaName" label="村庄名称" />
+      <el-table-column prop="riskLevelLabel" label="隐患等级" />
+      <el-table-column prop="riskDescription" label="隐患描述" />
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
+            >编辑</el-button
+          >
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnDelete(row.riverRiskVillagesId)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')"
+          >新增</el-button
+        >
+      </template>
+    </app-table>
+
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :type="data.addOrEditDialog.type"
+      :river-id="riverId"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import Add from "./components/add.vue";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import {
+  getRiverRiskVillagePage,
+  setRiverRiskVillageDelete,
+} from "@/request/kangzai.js";
+
+const route = useRoute();
+
+// 从路由获取 riverId
+const riverId = ref(route.query.riverId);
+
+if (!riverId.value) {
+  ElMessage.error("缺少关联河流ID");
+  // 可根据需要跳回河流列表
+}
+
+const riskLevelMap = {
+  1: "低风险",
+  2: "中风险",
+  3: "高风险",
+};
+
+const { list, pagination, searchForm, resetPagination, getData } = useListData(
+  getRiverRiskVillagePage,
+  {
+    defaultSearchForm: {
+      riverId: riverId.value,
+    },
+    beforeGetData: (searchForm) => {
+      const area = searchForm.area || [];
+
+      searchForm.province = area[0];
+      searchForm.city = area[1];
+      searchForm.county = area[2];
+      searchForm.village = area[3];
+      searchForm.street = area[4];
+    },
+    callback: (list) => {
+      list.forEach((item) => {
+        item.riskLevelLabel = riskLevelMap[item.riskLevel] || "未知";
+      });
+    },
+  }
+);
+
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      villageName: "",
+      area: [],
+      areaName: [],
+      riskLevel: "",
+      riskDescription: "",
+    },
+  },
+});
+
+const fnDelete = async (riverRiskVillagesId) => {
+  await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+  await setRiverRiskVillageDelete({ riverRiskVillagesId });
+  ElMessage.success("删除成功");
+  resetPagination();
+};
+
+const fnAddOrEdit = async (row, type) => {
+  data.addOrEditDialog.visible = true;
+  data.addOrEditDialog.type = type;
+
+  if (type === "edit") {
+    data.addOrEditDialog.form = { ...row };
+    data.addOrEditDialog.form.area = [
+      row.province,
+      row.city,
+      row.county,
+      row.village,
+      row.street,
+    ];
+    data.addOrEditDialog.form.areaName = row.areaName.split("-");
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/river/river_section/components/add.vue b/src/views/river/river_section/components/add.vue
new file mode 100644
index 0000000..360042a
--- /dev/null
+++ b/src/views/river/river_section/components/add.vue
@@ -0,0 +1,176 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="150px"
+      style="margin-top: 20px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="属地" prop="area">
+            <layout-cascader
+              v-model="form.area"
+              v-model:name="form.areaName"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="false"
+              :level="2"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="县区段长度(km)" prop="sectionLength">
+            <el-input
+              v-model.number="form.sectionLength"
+              placeholder="请输入县区段长度"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="最小河宽(m)" prop="riverWidthMin">
+            <el-input
+              v-model.number="form.riverWidthMin"
+              placeholder="请输入最小河宽"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="最大河宽(m)" prop="riverWidthMax">
+            <el-input
+              v-model.number="form.riverWidthMax"
+              placeholder="请输入最大河宽"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="平均河宽(m)" prop="riverWidthAvg">
+            <el-input
+              v-model.number="form.riverWidthAvg"
+              placeholder="请输入平均河宽"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="河段特征描述" prop="sectionDescription">
+            <el-input
+              v-model="form.sectionDescription"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入河段特征描述"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import { ElMessage } from "element-plus";
+import { reactive } from "vue";
+import { useVModels } from "@vueuse/core";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import {
+  setRiverSectionsAdd,
+  setRiverSectionsUpdate,
+} from "@/request/kangzai.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  riverId: {
+    type: [String, Number],
+    required: true,
+    default: "",
+  },
+});
+const { validate, formRef } = useFormValidate();
+
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+
+const data = reactive({
+  rules: {
+    area: [{ required: true, message: "请选择属地", trigger: "change" }],
+    sectionLength: [
+      { required: true, message: "请输入县区段长度", trigger: "blur" },
+    ],
+    riverWidthMin: [
+      { required: true, message: "请输入最小河宽", trigger: "blur" },
+    ],
+    riverWidthMax: [
+      { required: true, message: "请输入最大河宽", trigger: "blur" },
+    ],
+    riverWidthAvg: [
+      { required: true, message: "请输入平均河宽", trigger: "blur" },
+    ],
+    sectionDescription: [
+      { required: true, message: "请输入河段特征描述", trigger: "blur" },
+    ],
+  },
+});
+
+const fnClose = () => {
+  visible.value = false;
+};
+
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    const param = {
+      ...form.value,
+      riverId: props.riverId,
+      province: form.value.area[0],
+      city: form.value.area[1],
+      county: form.value.area[2],
+      areaName: form.value.areaName.join("-"),
+    };
+
+    delete param.area;
+
+    if (props.type === "add") {
+      await setRiverSectionsAdd(param);
+    } else if (props.type === "edit") {
+      await setRiverSectionsUpdate(param);
+    }
+
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/river/river_section/index.vue b/src/views/river/river_section/index.vue
new file mode 100644
index 0000000..2d8af72
--- /dev/null
+++ b/src/views/river/river_section/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="县区" prop="area">
+          <layout-cascader
+            v-model="searchForm.area"
+            :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+            :check-strictly="false"
+            :level="2"
+          />
+        </el-form-item>
+      </el-col>
+    </app-search>
+
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column prop="areaName" label="地区" />
+      <el-table-column prop="sectionLength" label="县区段长度(km)" />
+      <el-table-column prop="riverWidthMin" label="最小河宽(m)" />
+      <el-table-column prop="riverWidthMax" label="最大河宽(m)" />
+      <el-table-column prop="riverWidthAvg" label="平均河宽(m)" />
+      <el-table-column prop="sectionDescription" label="河段特征描述" />
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
+            >编辑</el-button
+          >
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnDelete(row.riverSectionsId)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')"
+          >新增</el-button
+        >
+      </template>
+    </app-table>
+
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :type="data.addOrEditDialog.type"
+      :river-id="riverId"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import Add from "./components/add.vue";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import {
+  setRiverSectionsDelete,
+  setRiverSectionsListPage,
+} from "@/request/kangzai.js";
+
+const route = useRoute();
+const riverId = ref(route.query.riverId);
+
+if (!riverId.value) {
+  ElMessage.error("缺少关联河流ID");
+}
+
+const { list, pagination, searchForm, resetPagination, getData } = useListData(
+  setRiverSectionsListPage,
+  {
+    defaultSearchForm: {
+      riverId: riverId.value,
+    },
+    beforeGetData: (searchForm) => {
+      const area = searchForm.area || [];
+
+      searchForm.province = area[0];
+      searchForm.city = area[1];
+      searchForm.county = area[2];
+    },
+  }
+);
+
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      province: "",
+      city: "",
+      county: "",
+      areaName: [],
+      sectionLength: "",
+      riverWidthMin: "",
+      riverWidthMax: "",
+      riverWidthAvg: "",
+      sectionDescription: "",
+    },
+  },
+});
+
+const fnDelete = async (riverSectionsId) => {
+  await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+  await setRiverSectionsDelete({ riverSectionsId });
+  ElMessage.success("删除成功");
+  resetPagination();
+};
+
+const fnAddOrEdit = async (row, type) => {
+  data.addOrEditDialog.visible = true;
+  data.addOrEditDialog.type = type;
+
+  if (type === "edit") {
+    data.addOrEditDialog.form = { ...row };
+    data.addOrEditDialog.form.area = [row.province, row.city, row.county];
+    data.addOrEditDialog.form.areaName = row.areaName.split("-");
+  } else {
+    data.addOrEditDialog.form = {
+      province: "",
+      city: "",
+      county: "",
+      areaName: [],
+      sectionLength: "",
+      riverWidthMin: "",
+      riverWidthMax: "",
+      riverWidthAvg: "",
+      sectionDescription: "",
+    };
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/system_management/data_dictionary/components/add.vue b/src/views/system_management/data_dictionary/components/add.vue
new file mode 100644
index 0000000..ae58407
--- /dev/null
+++ b/src/views/system_management/data_dictionary/components/add.vue
@@ -0,0 +1,141 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="100px"
+    >
+      <el-form-item label="上级菜单">
+        <el-tag>{{ parentName }}</el-tag>
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="编码" prop="bianma">
+        <el-input
+          v-model="form.bianma"
+          :disabled="type === 'edit'"
+          placeholder="请输入编码"
+        />
+      </el-form-item>
+      <el-form-item label="排序" prop="orderBy">
+        <el-input v-model.number="form.orderBy" placeholder="请输入排序" />
+      </el-form-item>
+      <el-form-item label="备注" prop="descr">
+        <el-input
+          v-model="form.descr"
+          :autosize="{ minRows: 1 }"
+          type="textarea"
+          placeholder="请输入备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  getDataDictionaryRepeat,
+  setDataDictionaryAdd,
+  setDataDictionaryEdit,
+} from "@/request/system_management.js";
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import { ElMessage } from "element-plus";
+import { reactive } from "vue";
+import { useVModels } from "@vueuse/core";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  parentName: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  parentId: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+const { validate, formRef } = useFormValidate();
+const data = reactive({
+  rules: {
+    name: [
+      { required: true, message: "字典名称不能为空", trigger: "change" },
+      { min: 2, max: 30, message: "长度在2到30个字符", trigger: "blur" },
+    ],
+    bianma: [
+      { required: true, message: "字典编码名称不能为空", trigger: "change" },
+      { min: 2, max: 30, message: "长度在2到30个字符", trigger: "blur" },
+    ],
+    orderBy: [
+      { required: true, message: "排序不能为空", trigger: ["change", "blur"] },
+      {
+        type: "number",
+        message: "排序必须为数字",
+        trigger: ["change", "blur"],
+      },
+    ],
+  },
+});
+const fnClose = () => {
+  formRef.value.resetFields();
+  visible.value = false;
+};
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    if (props.type === "add") {
+      const { dictionaries } = await getDataDictionaryRepeat({
+        bianma: form.value.bianma,
+      });
+      if (dictionaries) {
+        ElMessage.error("添加失败，编码重复");
+        return;
+      }
+      await setDataDictionaryAdd({
+        ...form.value,
+        parentId: props.parentId,
+        dictionariesId: undefined,
+      });
+    }
+    if (props.type === "edit")
+      await setDataDictionaryEdit({
+        ...form.value,
+      });
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/system_management/data_dictionary/index.vue b/src/views/system_management/data_dictionary/index.vue
new file mode 100644
index 0000000..e2a88fa
--- /dev/null
+++ b/src/views/system_management/data_dictionary/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column label="名称">
+        <template #default="{ row }">
+          <el-button
+            type="primary"
+            text
+            link
+            @click="
+              router.push({
+                path: '/system_management/data_dictionary',
+                query: {
+                  parentName: row.name,
+                  parentId: row.dictionariesId,
+                },
+              })
+            "
+          >
+            {{ row.name }} <el-icon><arrow-right /></el-icon>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="bianma" label="编码" />
+      <el-table-column prop="dictionariesId" label="ID" width="300" />
+      <el-table-column prop="orderBy" label="排序" width="50" />
+      <el-table-column label="操作" width="100">
+        <template #default="{ row }">
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnAddOrEdit(row.dictionariesId, 'edit')"
+          >
+            编辑
+          </el-button>
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnDelete(row.dictionariesId)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')">
+          新增
+        </el-button>
+        <el-button
+          v-if="parentId !== '0'"
+          :icon="ArrowLeft"
+          @click="router.back()"
+        >
+          返回
+        </el-button>
+      </template>
+    </app-table>
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :parent-name="parentName"
+      :parent-id="parentId"
+      :type="data.addOrEditDialog.type"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
+import { reactive, ref } from "vue";
+import { useRouter, onBeforeRouteUpdate, useRoute } from "vue-router";
+import {
+  setDataDictionaryDelete,
+  getDataDictionaryList,
+  getDataDictionaryInfo,
+} from "@/request/system_management.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Add from "./components/add.vue";
+import AppTable from "@/components/table/index.vue";
+import useListData from "@/hooks/useListData.js";
+
+const router = useRouter();
+const route = useRoute();
+const parentIdDefault = "0";
+const parentNameDefault = "（无）此项为顶级菜单";
+const parentId = ref(route.query.parentId || parentIdDefault);
+const parentName = ref(route.query.parentName || parentNameDefault);
+const { list, pagination, getData, resetPagination } = useListData(
+  getDataDictionaryList,
+  {
+    params: () => ({ parentId: parentId.value }),
+  }
+);
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      name: "",
+      bianma: "",
+      orderBy: "",
+      descr: "",
+    },
+  },
+});
+onBeforeRouteUpdate((to) => {
+  parentId.value = to.query.parentId || parentIdDefault;
+  parentName.value = to.query.parentName || parentNameDefault;
+  resetPagination();
+});
+const fnDelete = async (dictionariesId) => {
+  await ElMessageBox.confirm(`确定要删除吗？`, { type: "warning" });
+  await setDataDictionaryDelete({ dictionariesId });
+  ElMessage.success("删除成功");
+  resetPagination();
+};
+const fnAddOrEdit = async (dictionariesId, type) => {
+  data.addOrEditDialog.visible = true;
+  data.addOrEditDialog.type = type;
+  if (type === "edit") {
+    const resData = await getDataDictionaryInfo({ dictionariesId });
+    data.addOrEditDialog.form = resData.dictionaries;
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/urban_flood_point/components/add.vue b/src/views/urban_flood_point/components/add.vue
new file mode 100644
index 0000000..3b3f444
--- /dev/null
+++ b/src/views/urban_flood_point/components/add.vue
@@ -0,0 +1,213 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="type === 'edit' ? '修改' : '新增'"
+    :before-close="fnClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="data.rules"
+      label-width="100px"
+      style="margin-top: 20px"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="防涝点名称" prop="pointName">
+            <el-input v-model="form.pointName" placeholder="请输入防涝点名称" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="属地" prop="area">
+            <layout-cascader
+              v-model="form.area"
+              v-model:name="form.areaName"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="false"
+              :level="4"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="类型" prop="pointType">
+            <el-select v-model="form.pointType" placeholder="请选择类型">
+              <el-option
+                v-for="item in pointTypeList"
+                :key="item.bianma"
+                :label="item.name"
+                :value="item.bianma"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="当前水位" prop="currentWaterLevel">
+            <el-input
+              v-model="form.currentWaterLevel"
+              placeholder="请输入当前水位"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remarks">
+            <el-input
+              v-model="form.remarks"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入备注"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <div style="display: flex">
+            <el-form-item label="经度" prop="longitude" style="flex: 1">
+              <el-input
+                v-model="form.longitude"
+                placeholder="请选择经度"
+              />
+            </el-form-item>
+            <el-form-item label="纬度" prop="latitude" style="flex: 1">
+              <el-input
+                v-model="form.latitude"
+                placeholder="请选择纬度"
+              />
+            </el-form-item>
+            <el-form-item label-width="10px">
+              <el-button
+                class="ml-10"
+                type="primary"
+                @click="fnSelectedPosition"
+                >点击定位</el-button
+              >
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="fnClose">取 消</el-button>
+      <el-button type="primary" @click="fnSubmit">确 定</el-button>
+    </template>
+
+    <app-map
+      v-model:visible="mapDialog.visible"
+      v-model:longitude="mapDialog.longitude"
+      v-model:latitude="mapDialog.latitude"
+      @submit="fnMapSubmit"
+    />
+  </el-dialog>
+</template>
+
+<script setup>
+import { debounce } from "throttle-debounce";
+import useFormValidate from "@/hooks/useFormValidate.js";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import { ElMessage } from "element-plus";
+import { reactive, ref } from "vue";
+import { useVModels } from "@vueuse/core";
+import AppMap from "@/components/map/map.vue";
+import {
+  setUrbanFloodPointAdd,
+  setUrbanFloodPointUpdate,
+} from "@/request/kangzai.js";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  form: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const { validate, formRef } = useFormValidate();
+
+const emits = defineEmits(["update:visible", "update:form", "getData"]);
+const { visible, form } = useVModels(props, emits);
+
+const pointTypeList = ref([]);
+
+const fnGetPointTypeList = async () => {
+  const resData = await getDataDictionary({
+    parentId: "d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s", // 新字典ID
+  });
+  pointTypeList.value = resData.dictionariesList || [];
+};
+
+fnGetPointTypeList();
+
+const data = reactive({
+  rules: {
+    pointName: [
+      { required: true, message: "请输入防涝点名称", trigger: "blur" },
+    ],
+    area: [{ required: true, message: "请选择区域", trigger: "blur" }],
+    pointType: [{ required: true, message: "请选择类型", trigger: "change" }],
+    longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
+    latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+  },
+});
+
+const mapDialog = ref({
+  visible: false,
+  longitude: "",
+  latitude: "",
+});
+const fnSelectedPosition = () => {
+  mapDialog.value.visible = true;
+  mapDialog.value.longitude = form.value.longitude;
+  mapDialog.value.latitude = form.value.latitude;
+};
+const fnMapSubmit = ({ longitude, latitude }) => {
+  form.value.longitude = longitude;
+  form.value.latitude = latitude;
+};
+
+const fnClose = () => {
+  visible.value = false;
+};
+
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await validate();
+    const param = {
+      ...form.value,
+      areaName: form.value.areaName.join("-"),
+      province: form.value.area[0],
+      city: form.value.area[1],
+      county: form.value.area[2],
+      village: form.value.area[3],
+      street: form.value.area[4],
+    };
+    delete param.area;
+
+    if (props.type === "add") {
+      await setUrbanFloodPointAdd(param);
+    } else if (props.type === "edit") {
+      await setUrbanFloodPointUpdate(param);
+    }
+
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/urban_flood_point/index.vue b/src/views/urban_flood_point/index.vue
new file mode 100644
index 0000000..f6a4a9b
--- /dev/null
+++ b/src/views/urban_flood_point/index.vue
@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="防涝点名称" prop="pointName">
+          <el-input
+            v-model="searchForm.pointName"
+            placeholder="请输入防涝点名称"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="属地" prop="area">
+          <layout-cascader
+            v-model="searchForm.area"
+            :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+            :check-strictly="true"
+            :level="5"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="类型" prop="pointType">
+          <el-select v-model="searchForm.pointType" placeholder="请选择类型">
+            <el-option
+              v-for="item in pointTypeList"
+              :key="item.bianma"
+              :label="item.name"
+              :value="item.bianma"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </app-search>
+
+    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
+      <el-table-column prop="pointName" label="防涝点名称" />
+      <el-table-column prop="areaName" label="属地" />
+      <el-table-column label="类型" prop="pointTypeLabel" />
+      <el-table-column prop="currentWaterLevel" label="当前水位" />
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
+            >编辑</el-button
+          >
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnDelete(row.urbanFloodPointId)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+      <template #button>
+        <el-button type="primary" @click="fnAddOrEdit('', 'add')"
+          >新增</el-button
+        >
+      </template>
+    </app-table>
+
+    <add
+      v-model:form="data.addOrEditDialog.form"
+      v-model:visible="data.addOrEditDialog.visible"
+      :type="data.addOrEditDialog.type"
+      @get-data="resetPagination"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick } from "vue";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import {
+  getUrbanFloodPointPage,
+  setUrbanFloodPointDelete,
+} from "@/request/kangzai.js";
+import Add from "./components/add.vue";
+
+// 防涝点类型字典
+const pointTypeList = ref([]);
+const fnGetPointTypeList = async () => {
+  const resData = await getDataDictionary({
+    parentId: "d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s", // 新字典ID
+  });
+  pointTypeList.value = resData.dictionariesList || [];
+};
+fnGetPointTypeList();
+
+const { list, pagination, searchForm, resetPagination, getData } = useListData(
+  getUrbanFloodPointPage,
+  {
+    beforeGetData: (searchForm) => {
+      const area = searchForm.area || [];
+
+      searchForm.province = area[0];
+      searchForm.city = area[1];
+      searchForm.county = area[2];
+      searchForm.village = area[3];
+      searchForm.street = area[4];
+    },
+    callback: (list) => {
+      list.forEach((item) => {
+        item.pointTypeLabel =
+          pointTypeList.value.find((dict) => dict.bianma === item.pointType)
+            ?.name || item.pointType;
+      });
+    },
+  }
+);
+
+const data = reactive({
+  addOrEditDialog: {
+    visible: false,
+    type: "",
+    form: {
+      pointName: "",
+      province: "",
+      city: "",
+      county: "",
+      village: "",
+      street: "",
+      area: [],
+      areaName: [],
+      pointType: "",
+      currentWaterLevel: "",
+      longitude: "",
+      latitude: "",
+      remarks: "",
+    },
+  },
+});
+
+const fnDelete = async (urbanFloodPointId) => {
+  await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+  await setUrbanFloodPointDelete({ urbanFloodPointId });
+  ElMessage.success("删除成功");
+  resetPagination();
+};
+
+const fnAddOrEdit = async (row, type) => {
+  data.addOrEditDialog.visible = true;
+  await nextTick();
+  data.addOrEditDialog.form = {};
+  data.addOrEditDialog.type = type;
+
+  if (type === "edit") {
+    data.addOrEditDialog.form = row;
+    data.addOrEditDialog.form.area = [
+      row.province,
+      row.city,
+      row.county,
+      row.village,
+      row.street,
+    ];
+    data.addOrEditDialog.form.areaName = row.areaName.split("-");
+  }
+};
+</script>
+
+<style scoped></style>