feat(tailings_reservoir):增加地图弹窗

2025-06-13 10:29:24 +08:00 · 2025-06-13 10:29:24 +08:00 · 834f7d9f1d
parent 901c77bff3
commit 834f7d9f1d
20 changed files with 880 additions and 15 deletions
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@ -33,7 +33,12 @@
      :show-overflow-tooltip="false"
    />
    <template v-if="showIndex">
-      <el-table-column v-if="showPagination" label="序号" width="60">
+      <el-table-column
+        v-if="showPagination"
+        label="序号"
+        width="60"
+        :fixed="indexFixed"
+      >
        <template #default="{ $index }">
          {{ serialNumber(pagination, $index) }}
        </template>
@ -43,6 +48,7 @@
        label="序号"
        width="60"
        type="index"
+        :fixed="indexFixed"
      />
    </template>
    <slot></slot>
@ -149,6 +155,10 @@ const props = defineProps({
    type: Boolean,
    default: true,
  },
+  indexFixed: {
+    type: Boolean,
+    default: false,
+  },
 });
 const pagination = defineModel("pagination", {
  type: Object,
--- a/src/request/kangzai.js
+++ b/src/request/kangzai.js
@ -81,7 +81,7 @@ export const setRiverRiskVillageUpdate = (params) =>
 /*
 * 河流县区段信息 BusRiverSectionsEntity
 */
-export const setRiverSectionsListPage = (params) =>
+export const getRiverSectionsListPage = (params) =>
  post("/busRiverSections/listPage", params);
 export const setRiverSectionsDelete = (params) =>
  post("/busRiverSections/delete", params);
@ -90,10 +90,22 @@ export const setRiverSectionsAdd = (params) =>
 export const setRiverSectionsUpdate = (params) =>
  post("/busRiverSections/update", params);

+/*
+ * 河流经村庄信息 BusRiverSectionsEntity
+ */
+export const getRiverSectionsStreetListPage = (params) =>
+  post("/busRiverSectionsStreet/listPage", params);
+export const setRiverSectionsStreetDelete = (params) =>
+  post("/busRiverSectionsStreet/delete", params);
+export const setRiverSectionsStreetAdd = (params) =>
+  post("/busRiverSectionsStreet/save", params);
+export const setRiverSectionsStreetUpdate = (params) =>
+  post("/busRiverSectionsStreet/update", params);
+
 /*
 * 尾矿库BusTailingsReservoirEntity
 */
-export const setTailingsReservoirListPage = (params) =>
+export const getTailingsReservoirListPage = (params) =>
  post("/busTailingsReservoir/listPage", params);
 export const setTailingsReservoirDelete = (params) =>
  post("/busTailingsReservoir/delete", params);
--- a/src/router/index.js
+++ b/src/router/index.js
@ -87,6 +87,19 @@ const routes = [
            },
            component: () => import("@/views/river/river_section/index"),
          },
+          {
+            path: "/river/river_section_street",
+            name: "/river/river_section_street",
+            meta: {
+              title: "河道流经村庄",
+              breadcrumb: true,
+              isMenu: false,
+              isSubMenu: true,
+              isBack: true,
+              activeMenu: "/river",
+            },
+            component: () => import("@/views/river/river_section_street/index"),
+          },
          {
            path: "/reservoir_info",
            name: "/reservoir_info",
--- a/src/views/map/components/bottom_utils.vue
+++ b/src/views/map/components/bottom_utils.vue
@ -26,7 +26,7 @@ import {
  getGeologicalDisasterPage,
  getMountainFloodVillagePage,
  getReservoirBasicPage,
-  setTailingsReservoirListPage,
+  getTailingsReservoirListPage,
 } from "@/request/kangzai.js";
 import dayjs from "dayjs";
 import { useUserStore } from "@/pinia/user.js";
@ -95,7 +95,7 @@ const fnMapRemoveElement = () => {
 const fnMapAddElement = () => {
  if (currentActiveName.value === "河流") fnAddRiver();
  if (currentActiveName.value === "尾矿库")
-    fnAddPoint(setTailingsReservoirListPage, "name");
+    fnAddPoint(getTailingsReservoirListPage, "name");
  if (currentActiveName.value === "水库")
    fnAddPoint(getReservoirBasicPage, "reservoirName");
  if (currentActiveName.value === "地质灾害点")
--- a/src/views/map/components/dialog.vue
+++ b/src/views/map/components/dialog.vue
@ -0,0 +1,109 @@
+<template>
+  <div class="map_bi_dialog">
+    <el-dialog
+      :model-value="data.visible"
+      :title="data.subLabel"
+      :width="data.dialog_width || '1200px'"
+      @close="fnClose"
+    >
+      <el-scrollbar max-height="80vh">
+        <reservoir v-if="data.type === 'reservoir'" />
+        <mountainFloodVillage v-if="data.type === 'mountain_flood_village'" />
+        <tailingsReservoir v-if="data.type === 'tailings_reservoir'" />
+      </el-scrollbar>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import reservoir from "./dialog/reservoir.vue";
+import mountainFloodVillage from "./dialog/mountain_flood_village.vue";
+import tailingsReservoir from "./dialog/tailings_reservoir.vue";
+
+const data = defineModel("data", { type: Object });
+const fnClose = () => {
+  data.value = { visible: false };
+};
+</script>
+
+<style scoped lang="scss">
+.map_bi_dialog {
+  :deep {
+    .el-dialog {
+      border: 1px solid rgba(64, 156, 255, 0.3);
+      border-radius: 10px;
+
+      .el-dialog__header {
+        border-bottom: 2px solid #316b8b;
+      }
+
+      .title {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+      }
+
+      .table {
+        width: 100%;
+        border-collapse: collapse;
+
+        tr {
+          td {
+            border: 1px solid rgba(234, 234, 234, 0.51);
+            padding: 8px;
+
+            &.label {
+              text-align: center;
+              width: 150px;
+            }
+
+            img.ml-10 {
+              &:first-child {
+                margin-left: 0;
+              }
+            }
+          }
+        }
+      }
+
+      img {
+        width: 100px;
+        height: 100px;
+
+        &.horizontal {
+          width: 200px;
+          height: 97px;
+        }
+
+        &.small {
+          width: 50px;
+          height: 50px;
+        }
+      }
+    }
+
+    --el-bg-color: rgba(2, 30, 81, 0.85);
+    --el-border-color: rgba(16, 87, 216, 0.5);
+    --el-border-color-lighter: rgba(64, 156, 255, 0.3);
+    --el-fill-color-light: rgba(15, 52, 119, 0.5);
+    --el-fill-color-blank: rgba(15, 52, 119, 0.3);
+    --el-text-color-primary: #fff;
+    --el-text-color-regular: #fff;
+    --el-color-info: #fff;
+    --el-fill-color-lighter: rgba(15, 52, 119, 0.3);
+
+    .el-table th.el-table__cell {
+      --el-table-header-bg-color: rgba(15, 52, 119, 0.3);
+      color: #fff;
+    }
+
+    .el-table-v2 {
+      --el-text-color-secondary: #fff;
+
+      .el-table-v2__row {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/map/components/dialog/mountain_flood_village.vue
+++ b/src/views/map/components/dialog/mountain_flood_village.vue
@ -0,0 +1,93 @@
+<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="4"
+          />
+        </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"
+      :index-fixed="true"
+      @get-data="getData"
+    >
+      <el-table-column prop="villageName" label="村庄名称" fixed />
+      <el-table-column prop="areaName" label="属地" fixed />
+      <el-table-column prop="countyWarningOfficer" label="县级预警负责人" />
+      <el-table-column prop="countyWarningPhone" label="县级预警负责人电话" />
+      <el-table-column prop="countyOfficer" label="县级责任人" />
+      <el-table-column prop="countyOfficerPosition" label="县级责任人职务" />
+      <el-table-column prop="countyOfficerPhone" label="县级责任人电话" />
+
+      <el-table-column prop="townshipOfficer" label="乡级责任人" />
+      <el-table-column prop="townshipOfficerPosition" label="乡级责任人职务" />
+      <el-table-column prop="townshipOfficerPhone" label="乡级责任人电话" />
+
+      <el-table-column prop="villageOfficer" label="村级责任人" />
+      <el-table-column prop="villageOfficerPosition" label="村级责任人职务" />
+      <el-table-column prop="villageOfficerPhone" label="村级责任人电话" />
+
+      <el-table-column prop="monitorName" label="监测员姓名" />
+      <el-table-column prop="monitorPosition" label="监测员职务" />
+      <el-table-column prop="monitorPhone" label="监测员电话" />
+
+      <el-table-column prop="warningOfficerName" label="预警员姓名" />
+      <el-table-column prop="warningOfficerPosition" label="预警员职务" />
+      <el-table-column prop="warningOfficerPhone" label="预警员电话" />
+
+      <el-table-column prop="transferOfficerName" label="转移员姓名" />
+      <el-table-column prop="transferOfficerPosition" label="转移员职务" />
+      <el-table-column prop="transferOfficerPhone" label="转移员电话" />
+    </app-table>
+  </div>
+</template>
+
+<script setup>
+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 } from "@/request/kangzai.js";
+
+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: () => {},
+  }
+);
+</script>
+
+<style scoped></style>
--- a/src/views/map/components/dialog/reservoir.vue
+++ b/src/views/map/components/dialog/reservoir.vue
@ -0,0 +1,97 @@
+<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="当前库容（万立方米）" />
+    </app-table>
+
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+import AppTable from "@/components/table/index.vue";
+import AppSearch from "@/components/search/index.vue";
+import useListData from "@/hooks/useListData.js";
+import { getReservoirBasicPage } from "@/request/kangzai.js";
+
+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;
+      });
+    },
+  }
+);
+</script>
+
+<style scoped></style>
--- a/src/views/map/components/dialog/tailings_reservoir.vue
+++ b/src/views/map/components/dialog/tailings_reservoir.vue
@ -0,0 +1,120 @@
+<template>
+  <div>
+    <app-search v-model="searchForm" @submit="resetPagination">
+      <el-col :span="6">
+        <el-form-item label="尾矿库名称" prop="name">
+          <el-input v-model="searchForm.name" 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="4"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="6">
+        <el-form-item label="运行状态" prop="runningStatus">
+          <el-select
+            v-model="searchForm.runningStatus"
+            placeholder="请选择运行状态"
+          >
+            <el-option
+              v-for="item in runningStatusList"
+              :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="designGrade">
+          <el-select
+            v-model="searchForm.designGrade"
+            placeholder="请选择设计等别"
+          >
+            <el-option
+              v-for="item in designGradeList"
+              :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="name" label="尾矿库名称" />
+      <el-table-column prop="areaName" label="属地" />
+      <el-table-column prop="runningStatusLabel" label="运行状态" />
+      <el-table-column prop="designGradeLabel" label="设计等别" />
+      <el-table-column prop="currentGradeLabel" label="现状等别" />
+    </app-table>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { getDataDictionary } from "@/request/data_dictionary.js";
+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 { getTailingsReservoirListPage } from "@/request/kangzai.js";
+
+// 字典数据
+const runningStatusList = ref([]);
+const designGradeList = ref([]);
+const currentGradeList = ref([]);
+
+const fnGetDictData = async () => {
+  const [runningRes, designRes, currentRes] = await Promise.all([
+    getDataDictionary({ parentId: "b62cbaa90f9936bca50e48e8e853150a" }),
+    getDataDictionary({ parentId: "f32b9172ba95c27041c2289d03e6133f" }),
+    getDataDictionary({ parentId: "039bed1c0f108325bf800e4e4fe88b12" }),
+  ]);
+  runningStatusList.value = runningRes.dictionariesList || [];
+  designGradeList.value = designRes.dictionariesList || [];
+  currentGradeList.value = currentRes.dictionariesList || [];
+};
+fnGetDictData();
+
+const { list, pagination, searchForm, resetPagination, getData } = useListData(
+  getTailingsReservoirListPage,
+  {
+    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.runningStatusLabel =
+          runningStatusList.value.find(
+            (dict) => dict.bianma === item.runningStatus
+          )?.name || item.runningStatus;
+        item.designGradeLabel =
+          designGradeList.value.find((dict) => dict.bianma === item.designGrade)
+            ?.name || item.designGrade;
+        item.currentGradeLabel =
+          currentGradeList.value.find(
+            (dict) => dict.bianma === item.currentGrade
+          )?.name || item.currentGrade;
+      });
+    },
+  }
+);
+</script>
+
+<style scoped></style>
--- a/src/views/map/components/left_content.vue
+++ b/src/views/map/components/left_content.vue
@ -66,7 +66,10 @@
      </div>
    </div>
    <div class="block2">
-      <app-title title="水库信息" />
+      <app-title
+        title="水库信息"
+        @dblclick="doubleClick(showReservoirStatisticsDialog)"
+      />
      <div class="content">
        <div id="main1" />
      </div>
@ -113,6 +116,8 @@ import * as echarts from "echarts";
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 import { getRiverPage } from "@/request/kangzai.js";
 import { getReservoirStatistics } from "@/request/map.js";
+import doubleClick from "@/views/map/js/doubleClick.js";
+import { showReservoirStatisticsDialog } from "@/views/map/js/mittKey.js";

 const riverList = ref([]);
 let myChart1 = null;
--- a/src/views/map/components/right_content.vue
+++ b/src/views/map/components/right_content.vue
@ -1,13 +1,19 @@
 <template>
  <div>
    <div class="block1">
-      <app-title title="山洪灾害行政村" />
+      <app-title
+        title="山洪灾害行政村"
+        @dblclick="doubleClick(showMountainFloodVillageDialog)"
+      />
      <div class="content">
        <div id="main2" />
      </div>
    </div>
    <div class="block2">
-      <app-title title="尾矿库" />
+      <app-title
+        title="尾矿库"
+        @dblclick="doubleClick(showTailingsReservoirDialog)"
+      />
      <div class="content">
        <div id="main3" />
      </div>
@ -49,8 +55,14 @@ import {
  getMountainFloodVillageStatistics,
  getTailingsPondStatistics,
 } from "@/request/map.js";
+import doubleClick from "@/views/map/js/doubleClick.js";
+import {
+  showMountainFloodVillageDialog,
+  showTailingsReservoirDialog,
+} from "@/views/map/js/mittKey.js";

 const emergencyReserveWarehouseList = ref([]);
+
 let myChart2 = null;
 let myChart3 = null;
 onMounted(() => {
--- a/src/views/map/index.vue
+++ b/src/views/map/index.vue
@ -7,6 +7,7 @@
      <content />
    </div>
  </div>
+  <map-dialog v-model:data="dialog" />
  <div
    v-show="coverMaskVisible"
    class="coverMaskContainer"
@ -24,10 +25,17 @@ import Content from "./components/content.vue";
 import { mapMethodsInjectionKey } from "@/views/map/js/injectionKey.js";
 import { ElMessage } from "element-plus";
 import mitt from "@/assets/js/mitt.js";
-import { changeCoverMaskVisibleMittKey } from "@/views/map/js/mittKey.js";
+import {
+  changeCoverMaskVisibleMittKey,
+  showMountainFloodVillageDialog,
+  showReservoirStatisticsDialog,
+  showTailingsReservoirDialog,
+} from "@/views/map/js/mittKey.js";
+import MapDialog from "./components/dialog.vue";

 const mapMethods = ref(null); // cesium地图方法实例
 const coverMaskVisible = ref(false); // 是否显示透明遮罩，用于加载地图元素时阻止点击事件
+const dialog = ref({ visible: false });
 onMounted(async () => {
  autoFit.init({ dw: 1920, dh: 1080, el: "#contentContainer", resize: true });
  const initMap = new InitMap();
@ -38,6 +46,15 @@ onMounted(async () => {
    coverMaskVisible.value = data;
    if (!data) ElMessage.success("标注完成");
  });
+  mitt.on(showReservoirStatisticsDialog, () => {
+    dialog.value = { visible: true, type: "reservoir" };
+  });
+  mitt.on(showMountainFloodVillageDialog, () => {
+    dialog.value = { visible: true, type: "mountain_flood_village" };
+  });
+  mitt.on(showTailingsReservoirDialog, () => {
+    dialog.value = { visible: true, type: "tailings_reservoir" };
+  });
 });
 onBeforeUnmount(() => {
  mitt.off(changeCoverMaskVisibleMittKey);
--- a/src/views/map/js/doubleClick.js
+++ b/src/views/map/js/doubleClick.js
@ -0,0 +1,6 @@
+import mitt from "@/assets/js/mitt.js";
+const doubleClick = (mapMethods) => {
+  mitt.emit(mapMethods);
+};
+
+export default doubleClick;
--- a/src/views/map/js/mittKey.js
+++ b/src/views/map/js/mittKey.js
@ -1 +1,15 @@
 export const changeCoverMaskVisibleMittKey = Symbol("changeCoverMaskVisible");
+
+// 显示水库弹框
+export const showReservoirStatisticsDialog = Symbol(
+  "showReservoirStatisticsDialog"
+);
+
+// 显示山洪灾害行政村弹框
+export const showMountainFloodVillageDialog = Symbol(
+  "showMountainFloodVillageDialog"
+);
+// 显示尾矿库弹框
+export const showTailingsReservoirDialog = Symbol(
+  "showTailingsReservoirDialog"
+);
--- a/src/views/river/index.vue
+++ b/src/views/river/index.vue
@ -66,6 +66,19 @@
          >
            查看流经县区
          </el-button>
+          <el-button
+            type="primary"
+            text
+            link
+            @click="
+              router.push({
+                path: '/river/river_section_street',
+                query: { riverId: row.riverId },
+              })
+            "
+          >
+            查看流经村庄
+          </el-button>
          <el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
            >编辑</el-button
          >
--- a/src/views/river/river_risk_village/components/add.vue
+++ b/src/views/river/river_risk_village/components/add.vue
@ -44,6 +44,26 @@
            />
          </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>

@ -51,6 +71,13 @@
      <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>

@ -58,13 +85,14 @@
 import { debounce } from "throttle-debounce";
 import useFormValidate from "@/hooks/useFormValidate.js";
 import { ElMessage } from "element-plus";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import { useVModels } from "@vueuse/core";
 import {
  setRiverRiskVillageAdd,
  setRiverRiskVillageUpdate,
 } from "@/request/kangzai.js";
 import LayoutCascader from "@/components/layout_cascader/index.vue";
+import AppMap from "@/components/map/map.vue";

 const props = defineProps({
  visible: {
@ -98,7 +126,20 @@ const data = reactive({
    area: [{ 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;
 };
--- a/src/views/river/river_risk_village/index.vue
+++ b/src/views/river/river_risk_village/index.vue
@ -125,6 +125,8 @@ const data = reactive({
      areaName: [],
      riskLevel: "",
      riskDescription: "",
+      longitude: "",
+      latitude: "",
    },
  },
 });
--- a/src/views/river/river_section/index.vue
+++ b/src/views/river/river_section/index.vue
@ -62,7 +62,7 @@ import Add from "./components/add.vue";
 import LayoutCascader from "@/components/layout_cascader/index.vue";
 import {
  setRiverSectionsDelete,
-  setRiverSectionsListPage,
+  getRiverSectionsListPage,
 } from "@/request/kangzai.js";

 const route = useRoute();
@ -73,7 +73,7 @@ if (!riverId.value) {
 }

 const { list, pagination, searchForm, resetPagination, getData } = useListData(
-  setRiverSectionsListPage,
+  getRiverSectionsListPage,
  {
    defaultSearchForm: {
      riverId: riverId.value,
--- a/src/views/river/river_section_street/components/add.vue
+++ b/src/views/river/river_section_street/components/add.vue
@ -0,0 +1,158 @@
+<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="4"
+            />
+          </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 { ElMessage } from "element-plus";
+import { reactive, ref } from "vue";
+import { useVModels } from "@vueuse/core";
+import LayoutCascader from "@/components/layout_cascader/index.vue";
+import {
+  setRiverSectionsStreetAdd,
+  setRiverSectionsStreetUpdate,
+} from "@/request/kangzai.js";
+import AppMap from "@/components/map/map.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: "change" }],
+  },
+});
+
+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,
+      riverId: props.riverId,
+      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],
+      areaName: form.value.areaName.join("-"),
+    };
+
+    delete param.area;
+
+    if (props.type === "add") {
+      await setRiverSectionsStreetAdd(param);
+    } else if (props.type === "edit") {
+      await setRiverSectionsStreetUpdate(param);
+    }
+
+    ElMessage.success("操作成功");
+    fnClose();
+    emits("getData");
+  },
+  { atBegin: true }
+);
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/views/river/river_section_street/index.vue
+++ b/src/views/river/river_section_street/index.vue
@ -0,0 +1,143 @@
+<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="4"
+          />
+        </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 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.riverSectionsStreetId)"
+            >删除</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 {
+  getRiverSectionsStreetListPage,
+  setRiverSectionsStreetDelete,
+} 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(
+  getRiverSectionsStreetListPage,
+  {
+    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: "",
+      village: "",
+      street: "",
+      areaName: [],
+      sectionLength: "",
+      riverWidthMin: "",
+      riverWidthMax: "",
+      riverWidthAvg: "",
+      sectionDescription: "",
+      longitude: "",
+      latitude: "",
+    },
+  },
+});
+
+const fnDelete = async (riverSectionsStreetId) => {
+  await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
+  await setRiverSectionsStreetDelete({ riverSectionsStreetId });
+  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: "",
+      village: "",
+      street: "",
+      areaName: [],
+      sectionLength: "",
+      riverWidthMin: "",
+      riverWidthMax: "",
+      riverWidthAvg: "",
+      sectionDescription: "",
+      longitude: "",
+      latitude: "",
+    };
+  }
+};
+</script>
+
+<style scoped></style>
--- a/src/views/tailings_reservoir/index.vue
+++ b/src/views/tailings_reservoir/index.vue
@ -97,7 +97,7 @@ import AppSearch from "@/components/search/index.vue";
 import useListData from "@/hooks/useListData.js";
 import {
  setTailingsReservoirDelete,
-  setTailingsReservoirListPage,
+  getTailingsReservoirListPage,
 } from "@/request/kangzai.js";
 import Add from "./components/add.vue";

@ -119,7 +119,7 @@ const fnGetDictData = async () => {
 fnGetDictData();

 const { list, pagination, searchForm, resetPagination, getData } = useListData(
-  setTailingsReservoirListPage,
+  getTailingsReservoirListPage,
  {
    beforeGetData: (searchForm) => {
      const area = searchForm.area || [];