feat(map): 优化地图组件功能和交互

- 新增河流选择功能，可单独渲染每条河流 - 添加县区搜索功能，支持按县区筛选灾害点等数据 - 优化地图组件样式，增加折叠菜单等功能 -重构部分代码，提高可维护性和可扩展性
2025-06-14 17:12:59 +08:00 · 2025-06-14 17:12:59 +08:00 · f30ad559fa
parent 834f7d9f1d
commit f30ad559fa
25 changed files with 18931 additions and 252 deletions
--- a/src/assets/images/map/collapse_menu.png
+++ b/src/assets/images/map/collapse_menu.png
--- a/src/assets/images/map/collapse_menu_bg.png
+++ b/src/assets/images/map/collapse_menu_bg.png
--- a/src/assets/images/map/riverbg.png
+++ b/src/assets/images/map/riverbg.png
--- a/src/main.js
+++ b/src/main.js
@ -13,6 +13,7 @@ import VueViewer from "v-viewer";
 import { install } from "@icon-park/vue-next/es/all";
 import "element-plus/es/components/loading/style/css";
 import "element-plus/es/components/message/style/css";
+import "element-plus/es/components/message-box/style/css";

 const app = createApp(App);
 install(app, "icon");
--- a/src/views/geological_disaster/index.vue
+++ b/src/views/geological_disaster/index.vue
@ -1,54 +1,59 @@
 <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="4"
-          />
-        </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"
+      <template #default="{ collapse }">
+        <el-col :span="6">
+          <el-form-item label="灾害点名称" prop="disasterName">
+            <el-input
+              v-model="searchForm.disasterName"
+              placeholder="请输入灾害点名称"
            />
-          </el-select>
-        </el-form-item>
-      </el-col>
+          </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-col :span="6">
+          <el-form-item label="属地" prop="area">
+            <layout-cascader
+              v-model="searchForm.area"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="true"
+              :level="4"
            />
-          </el-select>
-        </el-form-item>
-      </el-col>
+          </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 v-show="!collapse" :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>
+      </template>
    </app-search>

    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
--- a/src/views/map/components/bottom_utils.vue
+++ b/src/views/map/components/bottom_utils.vue
@ -1,20 +1,30 @@
 <template>
  <div class="bottom_utils">
-    <div class="items">
-      <div
-        v-for="(item, index) in bottomUtilsList"
-        :key="index"
-        :class="['item', { active: currentActiveName === item.name }]"
-        @click="
-          router.push({
-            name: 'map',
-            params: { name: item.name, type: item.type },
-          })
-        "
-      >
-        {{ item.name }}
+    <div class="content">
+      <div class="items">
+        <div
+          v-for="(item, index) in bottomUtilsList"
+          :key="index"
+          :class="['item', { active: currentActiveName === item.name }]"
+          @click="
+            router.push({
+              name: 'map',
+              params: { name: item.name, type: item.type },
+            })
+          "
+        >
+          {{ item.name }}
+        </div>
      </div>
    </div>
+    <select-river
+      :current-active-name="currentActiveName"
+      @select-river="fnAddRiver"
+    />
+    <select-county
+      :current-active-name="currentActiveName"
+      @search="fnAccordingToCondition"
+    />
  </div>
 </template>

@ -31,10 +41,12 @@ import {
 import dayjs from "dayjs";
 import { useUserStore } from "@/pinia/user.js";
 import { mapMethodsInjectionKey } from "../js/injectionKey.js";
-import island from "../json/bridge/island.json";
 import mitt from "@/assets/js/mitt.js";
 import { changeCoverMaskVisibleMittKey } from "@/views/map/js/mittKey.js";
 import { BD09ToWGS84 } from "@/views/map/js/utils.js";
+import SelectRiver from "./select_river.vue";
+import SelectCounty from "./selevt_county.vue";
+import { reservoir } from "../js/json.js";

 const userStore = useUserStore();
 const router = useRouter();
@ -70,13 +82,13 @@ onBeforeRouteUpdate((to) => {
  fnMapRemoveElement();
  currentActiveName.value = to.params.name;
  currentActiveType.value = to.params.type;
-  fnMapAddElement();
+  fnMapAddPoint();
 });
 onMounted(() => {
  userStore.setToken("ba4cff95a300b9da9f1f8fa001c79082");
  userStore.setTokenTime(dayjs().format("YYYY-MM-DD HH:mm:ss"));
  nextTick(() => {
-    fnMapAddElement();
+    fnMapAddPoint();
  });
 });
 onBeforeUnmount(() => {
@ -84,32 +96,43 @@ onBeforeUnmount(() => {
  userStore.setTokenTime("");
 });
 const fnMapRemoveElement = () => {
-  if (currentActiveName.value !== "河流")
-    mapMethods.value.removePoint(currentActiveType.value);
-  else {
-    mapMethods.value.removeRiver();
-    mapMethods.value.removeBridge();
-    mapMethods.value.removeHalo();
-  }
+  mapMethods.value.removePoint(currentActiveType.value);
+  mapMethods.value.removeRiver();
+  mapMethods.value.removeBridge();
+  mapMethods.value.removeHalo();
 };
-const fnMapAddElement = () => {
-  if (currentActiveName.value === "河流") fnAddRiver();
+const fnMapAddPoint = (params = {}) => {
  if (currentActiveName.value === "尾矿库")
-    fnAddPoint(getTailingsReservoirListPage, "name");
-  if (currentActiveName.value === "水库")
-    fnAddPoint(getReservoirBasicPage, "reservoirName");
+    fnAddPoint(getTailingsReservoirListPage, "name", params);
+  if (currentActiveName.value === "水库") {
+    (async () => {
+      await fnAddPoint(getReservoirBasicPage, "reservoirName", params);
+      await fnAddRiver({
+        name: "水库",
+        river: reservoir,
+      });
+    })();
+  }
  if (currentActiveName.value === "地质灾害点")
-    fnAddPoint(getGeologicalDisasterPage, "disasterName");
+    fnAddPoint(getGeologicalDisasterPage, "disasterName", params);
  if (currentActiveName.value === "应急储备库")
-    fnAddPoint(getEmergencyStoragePage, "storageName");
+    fnAddPoint(getEmergencyStoragePage, "storageName", params);
  if (currentActiveName.value === "山洪灾害村")
-    fnAddPoint(getMountainFloodVillagePage, "villageName");
+    fnAddPoint(getMountainFloodVillagePage, "villageName", params);
 };
-const fnAddPoint = async (api, nameKey) => {
+const fnAccordingToCondition = (params) => {
+  mapMethods.value.removePoint(currentActiveType.value);
+  fnMapAddPoint(params);
+};
+const fnAddPoint = async (api, nameKey, params = {}) => {
  mitt.emit(changeCoverMaskVisibleMittKey, true);
  const {
    page: { list },
-  } = await api({ curPage: 1, limit: 1000 });
+  } = await api({
+    curPage: 1,
+    limit: 1000,
+    ...params,
+  });
  list.forEach((item) => {
    item.name = item[nameKey];
    item.dialogWidth = bottomUtilsList.find(
@ -125,27 +148,49 @@ const fnAddPoint = async (api, nameKey) => {
  await mapMethods.value.addPoint(currentActiveType.value, list);
  mitt.emit(changeCoverMaskVisibleMittKey, false);
 };
-const fnAddRiver = async () => {
+const fnAddRiver = async ({
+  name,
+  river,
+  bridge,
+  enterSeaOutlet,
+  floodDischargeOutletRed,
+  floodDischargeOutletYellow,
+}) => {
  mitt.emit(changeCoverMaskVisibleMittKey, true);
-  const riverModules = import.meta.glob("../json/river/*.json");
-  const bridgeModules = import.meta.glob([
-    "../json/bridge/*.json",
-    "!../json/bridge/island.json",
-  ]);
-  for (const path in riverModules) {
-    const { river } = await riverModules[path]();
-    for (let i = 0; i < river.length; i++) {
-      await mapMethods.value.addRiver(river[i].position);
-    }
+  for (let i = 0; i < river.length; i++) {
+    await mapMethods.value.addRiver(river[i].position, name);
+    await mapMethods.value.addHalo(river[i].position, name);
  }
-  for (const path in bridgeModules) {
-    const { bridge } = await bridgeModules[path]();
+  if (bridge) {
    for (let i = 0; i < bridge.length; i++) {
-      await mapMethods.value.addBridge(bridge[i].position);
+      await mapMethods.value.addBridge(bridge[i].position, name);
    }
  }
-  for (let i = 0; i < island.island.length; i++) {
-    await mapMethods.value.addBridge(island.island[i].position);
+  if (enterSeaOutlet) {
+    for (let i = 0; i < enterSeaOutlet.length; i++) {
+      await mapMethods.value.addEnterSeaOutlet(
+        enterSeaOutlet[i].position,
+        name
+      );
+    }
+  }
+  if (floodDischargeOutletRed) {
+    for (let i = 0; i < floodDischargeOutletRed.length; i++) {
+      await mapMethods.value.addFloodDischargeOutlet(
+        floodDischargeOutletRed[i].position,
+        "red",
+        name
+      );
+    }
+  }
+  if (floodDischargeOutletYellow) {
+    for (let i = 0; i < floodDischargeOutletYellow.length; i++) {
+      await mapMethods.value.addFloodDischargeOutlet(
+        floodDischargeOutletYellow[i].position,
+        "yellow",
+        name
+      );
+    }
  }
  mitt.emit(changeCoverMaskVisibleMittKey, false);
 };
@ -155,33 +200,38 @@ const fnAddRiver = async () => {
 .bottom_utils {
  position: absolute;
  bottom: 0;
-  left: 500px;
-  right: 500px;
-  background-image: url("/src/assets/images/map/buttombg.png");
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  padding: 10px 20px 5px 20px;
+  left: 480px;
+  right: 480px;

-  .items {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  .content {
+    background-image: url("/src/assets/images/map/buttombg.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    padding: 10px 20px 5px 20px;
+    margin-left: 20px;
+    margin-right: 20px;

-    .item {
-      width: 122px;
-      height: 46px;
-      line-height: 40px;
-      text-align: center;
-      cursor: pointer;
-      background-image: url("/src/assets/images/map/listbg1.png");
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      color: #fff;
-      font-weight: bold;
-      font-size: 16px;
+    .items {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;

-      &.active {
-        background-image: url("/src/assets/images/map/listbg2.png");
+      .item {
+        width: 122px;
+        height: 46px;
+        line-height: 40px;
+        text-align: center;
+        cursor: pointer;
+        background-image: url("/src/assets/images/map/listbg1.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        color: #fff;
+        font-weight: bold;
+        font-size: 16px;
+
+        &.active {
+          background-image: url("/src/assets/images/map/listbg2.png");
+        }
      }
    }
  }
--- a/src/views/map/components/content.vue
+++ b/src/views/map/components/content.vue
@ -4,16 +4,46 @@
      enter-active-class="animate__animated animate__fadeInLeft"
      leave-active-class="animate__animated animate__fadeOutLeft"
    >
-      <div v-if="animationKey !== 0" :key="animationKey" class="left_content">
-        <left-content />
+      <div
+        v-if="leftAnimationKey !== 0"
+        :key="leftAnimationKey"
+        class="left_content"
+      >
+        <template v-if="!leftCollapse">
+          <left-content />
+        </template>
+        <div
+          :class="[
+            'collapse_menu collapse_menu_left',
+            { active: leftCollapse },
+          ]"
+          @click="fnChangeLeftCollapse"
+        >
+          <img src="/src/assets/images/map/collapse_menu.png" alt="" />
+        </div>
      </div>
    </transition>
    <transition
      enter-active-class="animate__animated animate__fadeInRight"
      leave-active-class="animate__animated animate__fadeOutRight"
    >
-      <div v-if="animationKey !== 0" :key="animationKey" class="right_content">
-        <right-content />
+      <div
+        v-if="rightAnimationKey !== 0"
+        :key="rightAnimationKey"
+        class="right_content"
+      >
+        <template v-if="!rightCollapse">
+          <right-content />
+        </template>
+        <div
+          :class="[
+            'collapse_menu collapse_menu_right',
+            { active: rightCollapse },
+          ]"
+          @click="fnChangeRightCollapse"
+        >
+          <img src="/src/assets/images/map/collapse_menu.png" alt="" />
+        </div>
      </div>
    </transition>
  </div>
@ -24,10 +54,22 @@ import { onMounted, ref } from "vue";
 import LeftContent from "./left_content.vue";
 import RightContent from "./right_content.vue";

-const animationKey = ref(0);
+const leftAnimationKey = ref(0);
+const rightAnimationKey = ref(0);
+const leftCollapse = ref(false);
+const rightCollapse = ref(false);
 onMounted(() => {
-  animationKey.value = Math.random();
+  leftAnimationKey.value = Math.random();
+  rightAnimationKey.value = Math.random();
 });
+const fnChangeLeftCollapse = () => {
+  leftAnimationKey.value = Math.random();
+  leftCollapse.value = !leftCollapse.value;
+};
+const fnChangeRightCollapse = () => {
+  rightAnimationKey.value = Math.random();
+  rightCollapse.value = !rightCollapse.value;
+};
 </script>

 <style scoped lang="scss">
@ -57,4 +99,50 @@ onMounted(() => {
  padding-right: 15px;
  padding-bottom: 15px;
 }
+
+.collapse_menu {
+  width: 30px;
+  height: 89px;
+  position: absolute;
+  top: 50%;
+  background-image: url("/src/assets/images/map/collapse_menu_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+
+  &.collapse_menu_left {
+    left: 480px;
+    transform: translateY(-50%);
+
+    &.active {
+      left: 0;
+    }
+  }
+
+  &.collapse_menu_right {
+    right: 480px;
+    transform: translateY(-50%) rotate(180deg);
+
+    &.active {
+      right: 0;
+    }
+  }
+
+  &.active {
+    top: 50vh;
+
+    img {
+      transform: translate(-50%, -50%) rotate(180deg);
+    }
+  }
+
+  img {
+    width: 10px;
+    height: 17px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(0);
+  }
+}
 </style>
--- a/src/views/map/components/dialog.vue
+++ b/src/views/map/components/dialog.vue
@ -92,9 +92,21 @@ const fnClose = () => {
    --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 {
+      --el-bg-color: rgba(2, 30, 81, 1);
+      --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, 1);
+      --el-fill-color-blank: rgba(15, 52, 119, 1);
+      --el-text-color-primary: #fff;
+      --el-text-color-regular: #fff;
+      --el-color-info: #fff;
+      --el-fill-color-lighter: rgba(15, 52, 119, 1);
+
+      th.el-table__cell {
+        --el-table-header-bg-color: rgba(15, 52, 119, 1);
+        color: #fff;
+      }
    }

    .el-table-v2 {
--- a/src/views/map/components/dialog/tailings_reservoir.vue
+++ b/src/views/map/components/dialog/tailings_reservoir.vue
@ -1,54 +1,59 @@
 <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"
+      <template #default="{ collapse }">
+        <el-col :span="6">
+          <el-form-item label="尾矿库名称" prop="name">
+            <el-input
+              v-model="searchForm.name"
+              placeholder="请输入尾矿库名称"
            />
-          </el-select>
-        </el-form-item>
-      </el-col>
+          </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-col :span="6">
+          <el-form-item label="属地" prop="area">
+            <layout-cascader
+              v-model="searchForm.area"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="true"
+              :level="4"
            />
-          </el-select>
-        </el-form-item>
-      </el-col>
+          </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 v-show="!collapse" :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>
+      </template>
    </app-search>

    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
--- a/src/views/map/components/select_river.vue
+++ b/src/views/map/components/select_river.vue
@ -0,0 +1,174 @@
+<template>
+  <transition
+    enter-active-class="animate__animated animate__fadeInUp"
+    leave-active-class="animate__animated animate__fadeOutDown"
+  >
+    <div v-if="currentActiveName === '河流'" class="river_items">
+      <div
+        v-for="(item, index) in riverList"
+        :key="index"
+        :class="['item', { active: currentActiveRiver.includes(item.name) }]"
+        @click="fnChangeRenderRiver(item)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import {
+  daiheBridge,
+  daiheEnterSeaOutlet,
+  daiheRiver,
+  luanheBridge,
+  luanheEnterSeaOutlet,
+  luanheRiver,
+  qinglongheBridge,
+  qinglongheRiver,
+  shiheBridge,
+  shiheEnterSeaOutlet,
+  shiheRiver,
+  tangheBridge,
+  tangheEnterSeaOutlet,
+  tangheRiver,
+  yangheBridge,
+  yangheEnterSeaOutlet,
+  yangheRedFloodDischargeOutlet,
+  yangheRiver,
+  yangheYellowFloodDischargeOutlet,
+  yinmaheBridge,
+  yinmaheEnterSeaOutlet,
+  yinmaheRiver,
+} from "@/views/map/js/json.js";
+import { inject, ref } from "vue";
+import { mapMethodsInjectionKey } from "@/views/map/js/injectionKey.js";
+import { onBeforeRouteUpdate } from "vue-router";
+
+defineProps({
+  currentActiveName: {
+    type: String,
+    required: true,
+  },
+});
+const emits = defineEmits(["select-river"]);
+const mapMethods = inject(mapMethodsInjectionKey);
+const riverList = [
+  {
+    name: "戴河",
+    id: "582bffe290782142fce108bb5f4ba084",
+    river: daiheRiver,
+    bridge: daiheBridge,
+    enterSeaOutlet: daiheEnterSeaOutlet,
+  },
+  {
+    name: "滦河",
+    id: "27d6363694174ff291079c43c25c233e",
+    river: luanheRiver,
+    bridge: luanheBridge,
+    enterSeaOutlet: luanheEnterSeaOutlet,
+  },
+  {
+    name: "青龙河",
+    id: "64a98ff8d921ccf0acf0b5874f06e506",
+    river: qinglongheRiver,
+    bridge: qinglongheBridge,
+  },
+  {
+    name: "石河",
+    id: "8a7f1699db01719db6119203244bf9b5",
+    river: shiheRiver,
+    bridge: shiheBridge,
+    enterSeaOutlet: shiheEnterSeaOutlet,
+  },
+  {
+    name: "汤河",
+    id: "d9a52514a5f70d35bcd0c39069a4416a",
+    river: tangheRiver,
+    bridge: tangheBridge,
+    enterSeaOutlet: tangheEnterSeaOutlet,
+  },
+  {
+    name: "洋河",
+    id: "ebb495ba3cdcf93e9f4b90d219cd643e",
+    river: yangheRiver,
+    bridge: yangheBridge,
+    enterSeaOutlet: yangheEnterSeaOutlet,
+    floodDischargeOutletRed: yangheRedFloodDischargeOutlet,
+    floodDischargeOutletYellow: yangheYellowFloodDischargeOutlet,
+  },
+  {
+    name: "饮马河",
+    id: "a73859137adcd8b628534da6d85e4bf2",
+    river: yinmaheRiver,
+    bridge: yinmaheBridge,
+    enterSeaOutlet: yinmaheEnterSeaOutlet,
+  },
+];
+const currentActiveRiver = ref([]);
+onBeforeRouteUpdate(() => {
+  currentActiveRiver.value = [];
+});
+const fnChangeRenderRiver = ({
+  name,
+  river,
+  bridge,
+  enterSeaOutlet,
+  floodDischargeOutletRed,
+  floodDischargeOutletYellow,
+}) => {
+  if (!currentActiveRiver.value.includes(name)) {
+    currentActiveRiver.value.push(name);
+    emits("select-river", {
+      name,
+      river,
+      bridge,
+      enterSeaOutlet,
+      floodDischargeOutletRed,
+      floodDischargeOutletYellow,
+    });
+  } else {
+    currentActiveRiver.value = currentActiveRiver.value.filter(
+      (item) => item !== name
+    );
+    mapMethods.value.removeRiver(name);
+    mapMethods.value.removeBridge(name);
+    mapMethods.value.removeHalo(name);
+    mapMethods.value.removeEnterSeaOutlet(name);
+    mapMethods.value.removeFloodDischargeOutlet(name);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.river_items {
+  position: absolute;
+  top: -300px;
+  left: 0;
+  margin-left: 20px;
+  color: #fff;
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 9, 100, 0.7),
+    rgba(1, 35, 145, 0.7)
+  );
+  padding: 5px;
+  border: 1px solid rgba(22, 124, 228, 0.67);
+
+  .item {
+    width: 97px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    margin-top: 5px;
+    cursor: pointer;
+
+    &.active,
+    &:hover {
+      background-image: url("/src/assets/images/map/riverbg.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>
--- a/src/views/map/components/selevt_county.vue
+++ b/src/views/map/components/selevt_county.vue
@ -0,0 +1,119 @@
+<template>
+  <transition
+    enter-active-class="animate__animated animate__fadeInUp"
+    leave-active-class="animate__animated animate__fadeOutDown"
+  >
+    <div
+      v-if="
+        currentActiveName !== '河流' &&
+        currentActiveName !== '降雨量' &&
+        currentActiveName !== '水库'
+      "
+      class="search"
+    >
+      <el-select v-model="value" filterable popper-class="select_county">
+        <el-option
+          v-for="item in list"
+          :key="item.bianma"
+          :value="item.bianma"
+          :label="item.name"
+        />
+      </el-select>
+      <el-button class="search_btn" @click="fnSearch">搜索</el-button>
+      <el-button class="reset_btn" @click="fnReset">重置</el-button>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+
+defineProps({
+  currentActiveName: {
+    type: String,
+    required: true,
+  },
+});
+const emits = defineEmits("search");
+const value = ref("");
+const list = [
+  { name: "抚宁区", bianma: "130306000" },
+  { name: "山海关区", bianma: "130303000" },
+  { name: "青龙满族自治县", bianma: "130321000" },
+  { name: "昌黎县", bianma: "130322000" },
+  { name: "北戴河区", bianma: "130304000" },
+  { name: "北戴河新区", bianma: "130372000" },
+  { name: "卢龙县", bianma: "130324000" },
+  { name: "秦皇岛市经济技术开发区", bianma: "130371000" },
+  { name: "海港区", bianma: "130302000" },
+];
+onBeforeRouteUpdate(() => {
+  value.value = "";
+});
+const fnSearch = () => {
+  emits("search", {
+    city: "130300000",
+    county: value.value,
+    province: "130000000",
+    area: ["130000000", "130300000", value.value],
+  });
+};
+const fnReset = () => {
+  value.value = "";
+  emits("search", {
+    city: "130300000",
+    county: value.value,
+    province: "130000000",
+    area: ["130000000", "130300000", value.value],
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.search {
+  position: fixed;
+  top: 80px;
+  left: 480px;
+  margin-left: 20px;
+  display: flex;
+  gap: 10px;
+  background-image: linear-gradient(
+    to right,
+    rgb(31 62 129 / 57%) 0%,
+    rgb(17 93 255 / 40%) 50%,
+    rgb(31 62 129 / 57%) 100%
+  );
+  padding: 10px;
+  width: 400px;
+
+  .search_btn {
+    background-color: #1563e3;
+    color: #fff;
+    border-color: #1563e3;
+  }
+
+  .reset_btn {
+    background-color: #558be5;
+    color: #fff;
+    border-color: #558be5;
+  }
+
+  :deep {
+    --el-fill-color-blank: rgba(2, 30, 81, 0.85);
+    --el-border-color: rgba(2, 30, 81, 0.85);
+    --el-text-color-placeholder: #fff;
+    --el-text-color-regular: #fff;
+  }
+}
+</style>
+
+<style lang="scss" plain>
+.select_county {
+  --el-bg-color-overlay: rgba(2, 30, 81, 0.85);
+  --el-border-color-light: rgba(2, 30, 81, 0.85);
+  --el-fill-color-light: rgba(16, 87, 216, 0.5);
+  --el-text-color-regular: #fff;
+  --el-text-color-secondary: #fff;
+}
+</style>
--- a/src/views/map/js/json.js
+++ b/src/views/map/js/json.js
@ -0,0 +1,51 @@
+import { island } from "../json/bridge/island.json";
+import { bridge as daiheBridge } from "../json/bridge/daihe.json";
+import { bridge as luanheBridge } from "../json/bridge/luanhe.json";
+import { bridge as qinglongheBridge } from "../json/bridge/qinglonghe.json";
+import { bridge as shiheBridge } from "../json/bridge/shihe.json";
+import { bridge as tangheBridge } from "../json/bridge/tanghe.json";
+import { bridge as yangheBridge } from "../json/bridge/yanghe.json";
+import { bridge as yinmaheBridge } from "../json/bridge/yinmahe.json";
+import { river as daiheRiver } from "../json/river/daihe.json";
+import { river as luanheRiver } from "../json/river/luanhe.json";
+import { river as qinglongheRiver } from "../json/river/qinglonghe.json";
+import { river as shiheRiver } from "../json/river/shihe.json";
+import { river as tangheRiver } from "../json/river/tanghe.json";
+import { river as yangheRiver } from "../json/river/yanghe.json";
+import { river as yinmaheRiver } from "../json/river/yinmahe.json";
+import { enterSeaOutlet as luanheEnterSeaOutlet } from "../json/enterSeaOutlet/luanhe.json";
+import { enterSeaOutlet as daiheEnterSeaOutlet } from "../json/enterSeaOutlet/daihe.json";
+import { enterSeaOutlet as shiheEnterSeaOutlet } from "../json/enterSeaOutlet/shihe.json";
+import { enterSeaOutlet as tangheEnterSeaOutlet } from "../json/enterSeaOutlet/tanghe.json";
+import { enterSeaOutlet as yangheEnterSeaOutlet } from "../json/enterSeaOutlet/yanghe.json";
+import { enterSeaOutlet as yinmaheEnterSeaOutlet } from "../json/enterSeaOutlet/yinmahe.json";
+import { redFloodDischargeOutlet as yangheRedFloodDischargeOutlet } from "../json/floodDischargeOutlet/yanghe_red.json";
+import { yellowFloodDischargeOutlet as yangheYellowFloodDischargeOutlet } from "../json/floodDischargeOutlet/yanghe_yellow.json";
+import { reservoir } from "../json/reservoir/reservoir.json";
+
+export {
+  island,
+  daiheBridge,
+  luanheBridge,
+  qinglongheBridge,
+  shiheBridge,
+  tangheBridge,
+  yangheBridge,
+  yinmaheBridge,
+  daiheRiver,
+  luanheRiver,
+  qinglongheRiver,
+  shiheRiver,
+  tangheRiver,
+  yangheRiver,
+  yinmaheRiver,
+  luanheEnterSeaOutlet,
+  daiheEnterSeaOutlet,
+  shiheEnterSeaOutlet,
+  tangheEnterSeaOutlet,
+  yangheEnterSeaOutlet,
+  yinmaheEnterSeaOutlet,
+  yangheRedFloodDischargeOutlet,
+  yangheYellowFloodDischargeOutlet,
+  reservoir,
+};
--- a/src/views/map/js/mapMethods.js
+++ b/src/views/map/js/mapMethods.js
@ -14,6 +14,8 @@ export default class MapMethods {
  #riverPrimitive = [];
  #bridgePrimitive = [];
  #haloPrimitive = [];
+  #floodDischargeOutletPrimitive = [];
+  #enterSeaOutletPrimitive = [];

  #defineCenterPoint = {
    longitude: 119.44598691730745,
@ -55,7 +57,7 @@ export default class MapMethods {
    });
  };

-  addRiver = (positions) => {
+  addRiver = (positions, name) => {
    return new Promise((resolve) => {
      const riverPrimitive = this.#viewer.scene.primitives.add(
        new Cesium.Primitive({
@ -90,20 +92,68 @@ export default class MapMethods {
          }),
        })
      );
-      this.#riverPrimitive.push(riverPrimitive);
+      this.#riverPrimitive.push({ name, riverPrimitive });
      let isRendered = false;
      this.#viewer.scene.postRender.addEventListener(async () => {
        if (!isRendered) {
          isRendered = true;
-          await this.#addHalo(positions);
          resolve(riverPrimitive);
        }
      });
    });
  };

-  addBridge = (positions) => {
+  removeRiver = (name) => {
+    for (let i = 0; i < this.#riverPrimitive.length; i++) {
+      const item = this.#riverPrimitive[i];
+      if (name) {
+        if (item.name === name) {
+          this.#viewer.scene.primitives.remove(item.riverPrimitive);
+        }
+      } else {
+        this.#viewer.scene.primitives.remove(item.riverPrimitive);
+      }
+    }
+    if (name) {
+      this.#riverPrimitive = this.#riverPrimitive.filter(
+        (item) => item.name !== name
+      );
+    } else {
+      this.#riverPrimitive = [];
+    }
+  };
+
+  addBridge = (positions, name) => {
    return new Promise((resolve) => {
+      const material = new Cesium.Material({
+        fabric: {
+          type: "NeonBridge",
+          uniforms: {
+            baseColor: new Cesium.Color(0.2902, 0.2902, 0.2902, 1),
+            glowColor: new Cesium.Color(0.0, 1.0, 1.0, 1),
+            u_time: 0,
+            frequency: 10.0,
+            speed: 2.0,
+            amplitude: 0.3,
+          },
+          source: `
+          czm_material czm_getMaterial(czm_materialInput materialInput)
+          {
+            czm_material material = czm_getDefaultMaterial(materialInput);
+            vec2 st = materialInput.st;
+
+            float wave = sin(st.s * frequency - u_time * speed) * amplitude;
+
+            float pulse = smoothstep(0.2, 0.0, abs(wave) - 0.1);
+
+            material.alpha = baseColor.a + pulse * 0.5;
+            material.diffuse = mix(baseColor.rgb, glowColor.rgb, pulse);
+            return material;
+          }
+        `,
+        },
+      });
+
      const bridgePrimitive = this.#viewer.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: new Cesium.GeometryInstance({
@ -112,22 +162,31 @@ export default class MapMethods {
                Cesium.Cartesian3.fromDegreesArray(positions)
              ),
              height: 1,
+              extrudedHeight: 0,
              vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
            }),
          }),
          appearance: new Cesium.EllipsoidSurfaceAppearance({
-            material: new Cesium.Material({
-              fabric: {
-                type: "Color",
-                uniforms: {
-                  color: new Cesium.Color(0.2902, 0.2902, 0.2902, 1),
-                },
-              },
-            }),
+            material,
+            aboveGround: true,
          }),
        })
      );
-      this.#bridgePrimitive.push(bridgePrimitive);
+
+      this.#bridgePrimitive.push({ name, bridgePrimitive });
+
+      let animationTime = 0;
+      const animate = () => {
+        if (bridgePrimitive.isDestroyed()) return;
+
+        animationTime += 0.03;
+        material.uniforms.u_time = animationTime;
+
+        requestAnimationFrame(animate);
+      };
+
+      animate();
+
      let isRendered = false;
      this.#viewer.scene.postRender.addEventListener(() => {
        if (!isRendered) {
@ -138,7 +197,27 @@ export default class MapMethods {
    });
  };

-  #addHalo = async (positions) => {
+  removeBridge = (name) => {
+    for (let i = 0; i < this.#bridgePrimitive.length; i++) {
+      const item = this.#bridgePrimitive[i];
+      if (name) {
+        if (item.name === name) {
+          this.#viewer.scene.primitives.remove(item.bridgePrimitive);
+        }
+      } else {
+        this.#viewer.scene.primitives.remove(item.bridgePrimitive);
+      }
+    }
+    if (name) {
+      this.#bridgePrimitive = this.#bridgePrimitive.filter(
+        (item) => item.name !== name
+      );
+    } else {
+      this.#bridgePrimitive = [];
+    }
+  };
+
+  addHalo = async (positions, name) => {
    return new Promise((resolve) => {
      const haloPrimitive = this.#viewer.scene.primitives.add(
        new Cesium.Primitive({
@ -160,7 +239,7 @@ export default class MapMethods {
          }),
        })
      );
-      this.#haloPrimitive.push(haloPrimitive);
+      this.#haloPrimitive.push({ name, haloPrimitive });
      let isRendered = false;
      this.#viewer.scene.postRender.addEventListener(async () => {
        if (!isRendered) {
@ -171,28 +250,206 @@ export default class MapMethods {
    });
  };

-  removeRiver = () => {
-    for (let i = 0; i < this.#riverPrimitive.length; i++) {
-      const riverPrimitive = this.#riverPrimitive[i];
-      this.#viewer.scene.primitives.remove(riverPrimitive);
-    }
-    this.#riverPrimitive = [];
-  };
-
-  removeBridge = () => {
-    for (let i = 0; i < this.#bridgePrimitive.length; i++) {
-      const bridgePrimitive = this.#bridgePrimitive[i];
-      this.#viewer.scene.primitives.remove(bridgePrimitive);
-    }
-    this.#bridgePrimitive = [];
-  };
-
-  removeHalo = () => {
+  removeHalo = (name) => {
    for (let i = 0; i < this.#haloPrimitive.length; i++) {
-      const haloPrimitive = this.#haloPrimitive[i];
-      this.#viewer.scene.primitives.remove(haloPrimitive);
+      const item = this.#haloPrimitive[i];
+      if (name) {
+        if (item.name === name) {
+          this.#viewer.scene.primitives.remove(item.haloPrimitive);
+        }
+      } else {
+        this.#viewer.scene.primitives.remove(item.haloPrimitive);
+      }
+    }
+    if (name) {
+      this.#haloPrimitive = this.#haloPrimitive.filter(
+        (item) => item.name !== name
+      );
+    } else {
+      this.#haloPrimitive = [];
+    }
+  };
+
+  addFloodDischargeOutlet = (positions, type, name) => {
+    return new Promise((resolve) => {
+      const colorMap = {
+        red: new Cesium.Color(0xf1 / 255.0, 0x26 / 255.0, 0x3e / 255.0, 1),
+        yellow: new Cesium.Color(0xe8 / 255.0, 0xb9 / 255.0, 0x0d / 255.0, 0.5),
+      };
+      const baseColor = colorMap[type] || colorMap.red;
+
+      const material = new Cesium.Material({
+        fabric: {
+          type: "Pulse",
+          uniforms: {
+            color: baseColor,
+            u_time: 0.0,
+          },
+          source: `
+          czm_material czm_getMaterial(czm_materialInput materialInput)
+          {
+            czm_material material = czm_getDefaultMaterial(materialInput);
+
+            vec2 st = materialInput.st;
+            vec2 center = vec2(0.5);
+            float dist = distance(st, center);
+
+            float pulse = sin(dist * 3.0 - u_time * 2.0);
+            float alphaFactor = clamp(pulse, 0.4, 1.0);
+
+            float finalAlpha = color.a * alphaFactor;
+
+            material.alpha = finalAlpha;
+            material.diffuse = color.rgb;
+
+            return material;
+          }`,
+        },
+      });
+
+      const floodDischargeOutletPrimitive = this.#viewer.scene.primitives.add(
+        new Cesium.Primitive({
+          geometryInstances: new Cesium.GeometryInstance({
+            geometry: new Cesium.PolygonGeometry({
+              polygonHierarchy: new Cesium.PolygonHierarchy(
+                Cesium.Cartesian3.fromDegreesArray(positions)
+              ),
+              height: 0,
+            }),
+          }),
+          appearance: new Cesium.EllipsoidSurfaceAppearance({
+            material,
+            aboveGround: true,
+          }),
+        })
+      );
+
+      this.#floodDischargeOutletPrimitive.push({
+        name,
+        floodDischargeOutletPrimitive,
+      });
+
+      let animationTime = 0;
+      const animate = () => {
+        if (floodDischargeOutletPrimitive.isDestroyed()) return;
+
+        animationTime += 0.03;
+        floodDischargeOutletPrimitive.appearance.material.uniforms.u_time =
+          animationTime;
+
+        requestAnimationFrame(animate);
+      };
+
+      animate();
+
+      let isRendered = false;
+      this.#viewer.scene.postRender.addEventListener(() => {
+        if (!isRendered) {
+          isRendered = true;
+          resolve(floodDischargeOutletPrimitive);
+        }
+      });
+    });
+  };
+
+  removeFloodDischargeOutlet = (name) => {
+    for (let i = 0; i < this.#floodDischargeOutletPrimitive.length; i++) {
+      const item = this.#floodDischargeOutletPrimitive[i];
+      if (name) {
+        if (item.name === name) {
+          this.#viewer.scene.primitives.remove(
+            item.floodDischargeOutletPrimitive
+          );
+        }
+      } else {
+        this.#viewer.scene.primitives.remove(
+          item.floodDischargeOutletPrimitive
+        );
+      }
+    }
+    if (name) {
+      this.#floodDischargeOutletPrimitive =
+        this.#floodDischargeOutletPrimitive.filter(
+          (item) => item.name !== name
+        );
+    } else {
+      this.#floodDischargeOutletPrimitive = [];
+    }
+  };
+
+  addEnterSeaOutlet = (positions, name) => {
+    return new Promise((resolve) => {
+      const material = new Cesium.Material({
+        fabric: {
+          type: "Gradient",
+          uniforms: {
+            color1: new Cesium.Color(0.0, 0.7, 1.0, 1),
+            color2: new Cesium.Color(0.0, 0.7, 1.0, 0),
+          },
+          source: `
+          czm_material czm_getMaterial(czm_materialInput materialInput)
+          {
+            czm_material material = czm_getDefaultMaterial(materialInput);
+            vec2 st = materialInput.st;
+            float distToCenter = distance(st, vec2(0.5, 0.5));
+            float alphaFactor = 1.0 - distToCenter * 2.0;
+            alphaFactor = clamp(alphaFactor, 0.0, 1.0);
+
+            material.alpha = mix(color2.a, color1.a, alphaFactor);
+            material.diffuse = mix(color2.rgb, color1.rgb, alphaFactor);
+
+            return material;
+          }`,
+        },
+      });
+
+      const enterSeaOutletPrimitive = this.#viewer.scene.primitives.add(
+        new Cesium.Primitive({
+          geometryInstances: new Cesium.GeometryInstance({
+            geometry: new Cesium.PolygonGeometry({
+              polygonHierarchy: new Cesium.PolygonHierarchy(
+                Cesium.Cartesian3.fromDegreesArray(positions)
+              ),
+              height: 0,
+              vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+            }),
+          }),
+          appearance: new Cesium.EllipsoidSurfaceAppearance({
+            material,
+          }),
+        })
+      );
+
+      this.#enterSeaOutletPrimitive.push({ name, enterSeaOutletPrimitive });
+
+      let isRendered = false;
+      this.#viewer.scene.postRender.addEventListener(() => {
+        if (!isRendered) {
+          isRendered = true;
+          resolve(enterSeaOutletPrimitive);
+        }
+      });
+    });
+  };
+
+  removeEnterSeaOutlet = (name) => {
+    for (let i = 0; i < this.#enterSeaOutletPrimitive.length; i++) {
+      const item = this.#enterSeaOutletPrimitive[i];
+      if (name) {
+        if (item.name === name) {
+          this.#viewer.scene.primitives.remove(item.enterSeaOutletPrimitive);
+        }
+      } else {
+        this.#viewer.scene.primitives.remove(item.enterSeaOutletPrimitive);
+      }
+    }
+    if (name) {
+      this.#enterSeaOutletPrimitive = this.#enterSeaOutletPrimitive.filter(
+        (item) => item.name !== name
+      );
+    } else {
+      this.#enterSeaOutletPrimitive = [];
    }
-    this.#haloPrimitive = [];
  };

  addPoint = async (type, point) => {
--- a/src/views/map/json/bridge/yanghe.json
+++ b/src/views/map/json/bridge/yanghe.json
@ -2587,6 +2587,318 @@
        119.20535123590632,
        39.97050770340578
      ]
+    },
+    {
+      "position":[
+        119.06660047698337,
+        40.003720612993106,
+        119.06669616277154,
+        40.0037437402621,
+        119.0670023600757,
+        40.00294481310877,
+        119.066895740141,
+        40.00291327629782,
+        119.0666032107888,
+        40.00373112524625
+      ]
+    },
+    {
+      "position":[
+        119.05472695597014,
+        40.006884152119135,
+        119.05472695597014,
+        40.006884152119135,
+        119.05472695597014,
+        40.006884152119135,
+        119.05472695597014,
+        40.006884152119135,
+        119.05472695597014,
+        40.006884152119135,
+        119.05472695597014,
+        40.006884152119135,
+        119.05472695597014,
+        40.006884152119135,
+        119.05390571910563,
+        40.006950803750364,
+        119.05390571910563,
+        40.006950803750364,
+        119.05390571910563,
+        40.006950803750364,
+        119.05390571910563,
+        40.006950803750364,
+        119.05390571910563,
+        40.006950803750364,
+        119.05390571910563,
+        40.006950803750364,
+        119.05390571910563,
+        40.006950803750364,
+        119.05390095657869,
+        40.00701912183315,
+        119.05390095657869,
+        40.00701912183315,
+        119.05390095657869,
+        40.00701912183315,
+        119.05390095657869,
+        40.00701912183315,
+        119.05390095657869,
+        40.00701912183315,
+        119.05390095657869,
+        40.00701912183315,
+        119.05390095657869,
+        40.00701912183315,
+        119.05472219421817,
+        40.00693580734121,
+        119.05472219421817,
+        40.00693580734121,
+        119.05472219421817,
+        40.00693580734121,
+        119.05472219421817,
+        40.00693580734121,
+        119.05472219421817,
+        40.00693580734121,
+        119.05472219421817,
+        40.00693580734121,
+        119.05472219421817,
+        40.00693580734121,
+        119.05472219399746,
+        40.00689081727072,
+        119.05472219399746,
+        40.00689081727072,
+        119.05472219399746,
+        40.00689081727072,
+        119.05472219399746,
+        40.00689081727072,
+        119.05472219399746,
+        40.00689081727072,
+        119.05472219399746,
+        40.00689081727072,
+        119.05472219399746,
+        40.00689081727072
+      ]
+    },
+    {
+      "position":[
+        119.0481144264933,
+        40.00154035555465,
+        119.04815036976588,
+        40.001576834880645,
+        119.048508483837,
+        40.001368512822076,
+        119.04848093677074,
+        40.00133143845168,
+        119.04811823153696,
+        40.00154505669269
+      ]
+    },
+    {
+      "position":[
+        119.04044402680903,
+        39.9878559946739,
+        119.04049715999048,
+        39.98783555937326,
+        119.04044048508872,
+        39.98762575663795,
+        119.04035724341672,
+        39.98763665535904,
+        119.04044756898158,
+        39.98786008174405
+      ]
+    },
+    {
+      "position":[
+        119.03242284271863,
+        39.98452978474548,
+        119.03246249827016,
+        39.98448275673887,
+        119.03295488356578,
+        39.98473060865626,
+        119.03292018519043,
+        39.984803057506596,
+        119.03242945192146,
+        39.98452851373815
+      ]
+    },
+    {
+      "position":[
+        119.03591750790888,
+        39.98271144768695,
+        119.03589295582367,
+        39.98267721441285,
+        119.03594512940298,
+        39.98267013174808,
+        119.03598963011716,
+        39.98271026728832,
+        119.03592057700972,
+        39.982711447660655
+      ]
+    },
+    {
+      "position":[
+        119.03257553568496,
+        39.97956110479971,
+        119.03256501666793,
+        39.979523340137604,
+        119.03282448788525,
+        39.979461298328864,
+        119.03282448796904,
+        39.97950985288372,
+        119.03258254842311,
+        39.97956110481661
+      ]
+    },
+    {
+      "position":[
+        119.03534911160682,
+        39.97050230227821,
+        119.03533935534428,
+        39.970456010474194,
+        119.03552960798488,
+        39.97044099734475,
+        119.0355426165868,
+        39.97048603801368,
+        119.03534423335194,
+        39.97049604660087
+      ]
+    },
+    {
+      "position":[
+        119.0386688809513,
+        39.96537917000038,
+        119.03871446875175,
+        39.96537137498567,
+        119.03864862091544,
+        39.96517454677518,
+        119.03860556581883,
+        39.96519403452908,
+        119.03867647890655,
+        39.96538111882499
+      ]
+    },
+    {
+      "position":[
+        119.11325126026945,
+        40.006144031888134,
+        119.11329196417208,
+        40.006123909740865,
+        119.11306228164251,
+        40.00574690918686,
+        119.11301866933854,
+        40.00576814965383,
+        119.1132556258267,
+        40.00614154065206
+      ]
+    },
+    {
+      "position":[
+        119.10040826351278,
+        40.003510744863284,
+        119.10029366319723,
+        40.00404117041016,
+        119.10035308653872,
+        40.00406728368555,
+        119.10048041984334,
+        40.003546650398015,
+        119.10040401904938,
+        40.003514009025636
+      ]
+    },
+    {
+      "position":[
+        119.08803634339216,
+        39.998364767055214,
+        119.08809920132434,
+        39.99837250230188,
+        119.08822240829454,
+        39.99766668723755,
+        119.08817715125855,
+        39.99765121714063,
+        119.08804891499157,
+        39.99836670085324
+      ]
+    },
+    {
+      "position":[
+        119.08069682670332,
+        40.00287349213371,
+        119.08069682636429,
+        40.00281094300879,
+        119.0798542918863,
+        40.00277565839231,
+        119.07984819861468,
+        40.00283334086437,
+        119.08069697678687,
+        40.00287504033604
+      ]
+    },
+    {
+      "position":[
+        119.14482137644363,
+        40.00782668369225,
+        119.14486864516486,
+        40.00786303124187,
+        119.14533184166577,
+        40.007194219676315,
+        119.14523730631697,
+        40.00716514290916,
+        119.14483082949147,
+        40.007812144341095
+      ]
+    },
+    {
+      "position":[
+        119.13991636037817,
+        40.00604046636534,
+        119.13999125154514,
+        40.006058896147756,
+        119.14051249667868,
+        40.00520884300087,
+        119.14043461099583,
+        40.00515125117468,
+        119.1399253472464,
+        40.00604968113203
+      ]
+    },
+    {
+      "position":[
+        119.12930887750092,
+        39.9994554089684,
+        119.12937572007444,
+        39.999489679559325,
+        119.12960594467648,
+        39.999072710963084,
+        119.12953910237162,
+        39.99903844064274,
+        119.12928659704298,
+        39.99947254479636
+      ]
+    },
+    {
+      "position":[
+        119.12274667790672,
+        40.000885001631,
+        119.12276036516421,
+        40.00085943773818,
+        119.122338018875,
+        40.00073913538719,
+        119.12233215268253,
+        40.00076319552639,
+        119.12274667789272,
+        40.00088650539783
+      ]
+    },
+    {
+      "position":[
+        119.1154210678341,
+        40.00491284969307,
+        119.1155041992271,
+        40.004912850178265,
+        119.11556175724397,
+        40.00431289627488,
+        119.11546583724339,
+        40.004312895686915,
+        119.11541467284778,
+        40.00493743796856
+      ]
    }
  ]
 }
--- a/src/views/map/json/enterSeaOutlet/daihe.json
+++ b/src/views/map/json/enterSeaOutlet/daihe.json
@ -0,0 +1,66 @@
+{
+  "enterSeaOutlet": [
+    {
+      "position":[
+        119.44003819045065,
+        39.80098700105416,
+        119.44167545833766,
+        39.80075405712748,
+        119.44262919965776,
+        39.80054561917755,
+        119.44353524694675,
+        39.80025134789575,
+        119.44388493979278,
+        39.79987125468601,
+        119.44445712038399,
+        39.79814244130211,
+        119.44450479136508,
+        39.79768877652024,
+        119.44477499294958,
+        39.79708796568186,
+        119.44490213349408,
+        39.79647489321045,
+        119.44585582659133,
+        39.795886305461025,
+        119.4467300687984,
+        39.79587399974901,
+        119.44756723121552,
+        39.79589443507752,
+        119.44831432277311,
+        39.79605378169464,
+        119.44864814890161,
+        39.796335768274275,
+        119.44893430792422,
+        39.79682619856661,
+        119.44906151666424,
+        39.797316639373605,
+        119.44898210553197,
+        39.79805231764167,
+        119.44847354641308,
+        39.79922942078187,
+        119.44825102952822,
+        39.799523700717266,
+        119.44764701054793,
+        39.79986704486697,
+        119.44728141423344,
+        39.80001419621254,
+        119.44596207292581,
+        39.800357562170994,
+        119.44473812214765,
+        39.80105647683784,
+        119.44402280990985,
+        39.80124040755449,
+        119.44332339898794,
+        39.801706336137364,
+        119.44248090952493,
+        39.80187799830216,
+        119.44174968916444,
+        39.801988349732866,
+        119.44101846625975,
+        39.8020986970054,
+        119.44057337241802,
+        39.80218452110741
+      ]
+    }
+  ]
+}
--- a/src/views/map/json/enterSeaOutlet/luanhe.json
+++ b/src/views/map/json/enterSeaOutlet/luanhe.json
@ -0,0 +1,50 @@
+{
+ "enterSeaOutlet": [
+   {
+     "position":[
+       119.29092975092081,
+       39.43054567601241,
+       119.29791880903863,
+       39.43123340384057,
+       119.30099615416296,
+       39.43184005877618,
+       119.30349979618666,
+       39.43216353798082,
+       119.30621231391336,
+       39.43365997866204,
+       119.30751675534839,
+       39.43588460599928,
+       119.30929069761844,
+       39.43762382596999,
+       119.3115341527209,
+       39.4388776058419,
+       119.31549892417043,
+       39.438917625760155,
+       119.31695943559895,
+       39.43831066274909,
+       119.31982804835165,
+       39.43657082702594,
+       119.32060986126311,
+       39.4348312955778,
+       119.32050482535429,
+       39.43309193166051,
+       119.32050428362106,
+       39.431676168456946,
+       119.31893856717461,
+       39.42949215284422,
+       119.31752959234048,
+       39.42763172587427,
+       119.30970551852444,
+       39.42593397804469,
+       119.30637330230572,
+       39.426474973922616,
+       119.30235736317944,
+       39.426717879862096,
+       119.29677677578037,
+       39.42683929628583,
+       119.29187430854503,
+       39.42546389500164
+     ]
+   }
+ ]
+}
--- a/src/views/map/json/enterSeaOutlet/shihe.json
+++ b/src/views/map/json/enterSeaOutlet/shihe.json
@ -0,0 +1,104 @@
+{
+  "enterSeaOutlet": [
+    {
+      "position":[
+        119.76851588480083,
+        39.95533571630966,
+        119.7683876192619,
+        39.95424997802715,
+        119.76835555018893,
+        39.95358373061466,
+        119.7683234763828,
+        39.95212785580946,
+        119.76803490936892,
+        39.95084470968323,
+        119.76806696778199,
+        39.949857671258364,
+        119.7680990251545,
+        39.94877192538934,
+        119.76809902205495,
+        39.9479082601126,
+        119.76774635487105,
+        39.94697056179907,
+        119.7675540043698,
+        39.94581076753282,
+        119.76710516705269,
+        39.945070455584684,
+        119.76681663160271,
+        39.94465094170068,
+        119.76732606959959,
+        39.943932575656675,
+        119.76912141465638,
+        39.94304417108137,
+        119.77187852872129,
+        39.942402462709374,
+        119.77518073855946,
+        39.94296985306562,
+        119.77688013022846,
+        39.944894578953694,
+        119.77793854167784,
+        39.948151875394096,
+        119.77646536449387,
+        39.95051974461538,
+        119.77540746196438,
+        39.95121067539956,
+        119.77209319613077,
+        39.95337150718087,
+        119.77135173164012,
+        39.95448495690238,
+        119.7704861568653,
+        39.955767928127806
+      ]
+    },
+    {
+      "position":[
+        119.78221682610989,
+        39.959606903108394,
+        119.78276203662068,
+        39.95832344997503,
+        119.78324309514248,
+        39.95733617161187,
+        119.78343272284411,
+        39.957062167928584,
+        119.78417015175984,
+        39.955606315188135,
+        119.78417012502835,
+        39.954718003351985,
+        119.78407390851656,
+        39.95373098901822,
+        119.78365706124315,
+        39.952176437043484,
+        119.78388147284898,
+        39.95121407940485,
+        119.78452267616795,
+        39.9502517036662,
+        119.78580509293917,
+        39.94943734864344,
+        119.78628601143981,
+        39.94948668084062,
+        119.78776082277184,
+        39.94941257357446,
+        119.78942810493959,
+        39.95044885988357,
+        119.79055033299478,
+        39.95109035031618,
+        119.79228185230704,
+        39.952249955026815,
+        119.79282706291693,
+        39.95323693122095,
+        119.79266691212291,
+        39.954421380558884,
+        119.7921540383922,
+        39.955507154411286,
+        119.78784723170291,
+        39.958698600015204,
+        119.78710978676854,
+        39.95894536981238,
+        119.78605173932094,
+        39.95990769591995,
+        119.78585938607691,
+        39.960524557548695
+      ]
+    }
+  ]
+}
--- a/src/views/map/json/enterSeaOutlet/tanghe.json
+++ b/src/views/map/json/enterSeaOutlet/tanghe.json
@ -0,0 +1,66 @@
+{
+  "enterSeaOutlet": [
+    {
+      "position":[
+        119.57166734727471,
+        39.9016332361296,
+        119.57200716348602,
+        39.89970339334971,
+        119.57243187259532,
+        39.89855857417844,
+        119.57277162953638,
+        39.89764271614531,
+        119.57311137912879,
+        39.896563307184344,
+        119.57400317168063,
+        39.89509137971016,
+        119.57468260760882,
+        39.89368485434895,
+        119.57447028109573,
+        39.892114767260125,
+        119.57379086225404,
+        39.89103531102717,
+        119.57332375998357,
+        39.88970399458432,
+        119.57328158962775,
+        39.88967253208639,
+        119.57315439958636,
+        39.88731879954707,
+        119.57345150379841,
+        39.88620732143131,
+        119.57400319196148,
+        39.88548813683138,
+        119.5755308363495,
+        39.88446292582384,
+        119.5754884034919,
+        39.88443023484346,
+        119.57811927380195,
+        39.884103333297425,
+        119.58015606743224,
+        39.88393983590924,
+        119.58121693576035,
+        39.88456091677711,
+        119.58295682175905,
+        39.88580306494107,
+        119.58380569310768,
+        39.88769904565463,
+        119.58389078568017,
+        39.889921964823884,
+        119.58299983924454,
+        39.89247183513241,
+        119.58232092088183,
+        39.89364870916778,
+        119.57896833367452,
+        39.89668900145266,
+        119.57735558170528,
+        39.897604352683075,
+        119.57595499169499,
+        39.89858507282205,
+        119.57468165326675,
+        39.90041576211731,
+        119.57489381467674,
+        39.902230779011035
+      ]
+    }
+  ]
+}
--- a/src/views/map/json/enterSeaOutlet/yanghe.json
+++ b/src/views/map/json/enterSeaOutlet/yanghe.json
@ -0,0 +1,66 @@
+{
+  "enterSeaOutlet": [
+    {
+      "position":[
+        119.4133349552286,
+        39.77756376040957,
+        119.41397224238365,
+        39.777183805853596,
+        119.41459503584198,
+        39.77690442713945,
+        119.41536265688305,
+        39.7766026951225,
+        119.41588405580089,
+        39.7763903622422,
+        119.4161013038088,
+        39.77620037958136,
+        119.41609238242162,
+        39.776166865898844,
+        119.41593315243279,
+        39.77558605264693,
+        119.4157449740499,
+        39.77523979919966,
+        119.41567260009626,
+        39.77473717465513,
+        119.41551337704895,
+        39.77421221172557,
+        119.41544100797651,
+        39.77343035333794,
+        119.41546996239353,
+        39.77278252829345,
+        119.41580288441516,
+        39.771855465758996,
+        119.41696083853067,
+        39.77074968104508,
+        119.41877014183268,
+        39.77044806719237,
+        119.42047815536543,
+        39.77064905667183,
+        119.42152036650072,
+        39.771051111813115,
+        119.42228759672716,
+        39.77176592569821,
+        119.42236008747552,
+        39.77308393828356,
+        119.42166536669197,
+        39.774234443436946,
+        119.42105744499689,
+        39.77485996626752,
+        119.41945072606975,
+        39.77594346821717,
+        119.41849536828919,
+        39.77670302119295,
+        119.41755460645356,
+        39.77760914627655,
+        119.41671446290005,
+        39.77793328290207,
+        119.4160626239657,
+        39.778380357629636,
+        119.41571497326805,
+        39.778995081722755,
+        119.41561357393255,
+        39.779173910754075
+      ]
+    }
+  ]
+}
--- a/src/views/map/json/enterSeaOutlet/yinmahe.json
+++ b/src/views/map/json/enterSeaOutlet/yinmahe.json
@ -0,0 +1,60 @@
+{
+  "enterSeaOutlet": [
+    {
+      "position":[
+        119.32673901460187,
+        39.67873666627517,
+        119.3284957083062,
+        39.678869146131234,
+        119.32929550060777,
+        39.67894641137052,
+        119.32955257970735,
+        39.67885812833861,
+        119.32966684014872,
+        39.6786815565991,
+        119.32999533048682,
+        39.678405664888444,
+        119.3303381014835,
+        39.67798630753301,
+        119.33090937496489,
+        39.677500735583024,
+        119.33188052512718,
+        39.67689376457619,
+        119.33313730563422,
+        39.67677235514517,
+        119.3334943518268,
+        39.67692685016877,
+        119.33442268909164,
+        39.67747861993237,
+        119.33469406623813,
+        39.6778869390097,
+        119.33490835381846,
+        39.67888016235383,
+        119.33490837599771,
+        39.67924434763291,
+        119.33453706282953,
+        39.67970786704819,
+        119.33436568523986,
+        39.67990651832964,
+        119.33329451513045,
+        39.68011622203645,
+        119.33266609208184,
+        39.680171409976936,
+        119.33148065723184,
+        39.68034799308303,
+        119.33040947629948,
+        39.680458351187454,
+        119.32927930781757,
+        39.6802113902618,
+        119.32862231851806,
+        39.67993547418503,
+        119.32796531943461,
+        39.67988027780743,
+        119.327179776783,
+        39.67979196559977,
+        119.32677987216185,
+        39.679637445667936
+      ]
+    }
+  ]
+}
--- a/src/views/map/json/floodDischargeOutlet/yanghe_red.json
+++ b/src/views/map/json/floodDischargeOutlet/yanghe_red.json
--- a/src/views/map/json/floodDischargeOutlet/yanghe_yellow.json
+++ b/src/views/map/json/floodDischargeOutlet/yanghe_yellow.json
--- a/src/views/map/json/reservoir/reservoir.json
+++ b/src/views/map/json/reservoir/reservoir.json
--- a/src/views/map/json/river/yanghe.json
+++ b/src/views/map/json/river/yanghe.json
--- a/src/views/tailings_reservoir/index.vue
+++ b/src/views/tailings_reservoir/index.vue
@ -1,54 +1,59 @@
 <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"
+      <template #default="{ collapse }">
+        <el-col :span="6">
+          <el-form-item label="尾矿库名称" prop="name">
+            <el-input
+              v-model="searchForm.name"
+              placeholder="请输入尾矿库名称"
            />
-          </el-select>
-        </el-form-item>
-      </el-col>
+          </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-col :span="6">
+          <el-form-item label="属地" prop="area">
+            <layout-cascader
+              v-model="searchForm.area"
+              :dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
+              :check-strictly="true"
+              :level="4"
            />
-          </el-select>
-        </el-form-item>
-      </el-col>
+          </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 v-show="!collapse" :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>
+      </template>
    </app-search>

    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">