fix: 控制区异常

src/views/Drawer/index.vue

@@ -21,5 +21,6 @@ defineOptions({
   align-items: center;
   padding: 24px;
   gap: 16px;
+  pointer-events: all;
 }
 </style>

src/views/LeftPanel/index.vue

@@ -21,5 +21,6 @@ defineOptions({
   display: flex;
   flex-direction: row;
   gap: 12px;
+  pointer-events: none;
 }
 </style>

src/views/Main/MapSearch/index.vue

@@ -3,60 +3,59 @@
     <span class="map-search-icon">
       <iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon>
     </span>
-    <div v-click-outside="onClickOutside">
-      <el-popover
-        placement="bottom"
-        :width="280"
-        :visible="popoverVisible"
-        popper-class="map-search-popper"
-      >
-        <template #reference>
-          <el-input
-            class="map-search-input"
-            placeholder="输入水库名称、水库编码"
-            v-model="searchValue"
-            @input="changeInputValue"
-          ></el-input>
-        </template>
-        <template #default>
-          <div class="map-search-result">
-            <div class="map-search-result-title">
-              共搜索到<span>{{ searchResultList.length }}</span
-              >条结果
-            </div>
+
+    <el-popover
+      placement="bottom"
+      :width="280"
+      :visible="popoverVisible"
+      popper-class="map-search-popper"
+    >
+      <template #reference>
+        <el-input
+          class="map-search-input"
+          placeholder="输入水库名称、水库编码"
+          v-model="searchValue"
+          @input="changeInputValue"
+        ></el-input>
+      </template>
+      <template #default>
+        <div class="map-search-result">
+          <div class="map-search-result-title">
+            共搜索到<span>{{ searchResultList.length }}</span
+            >条结果
+          </div>
+          <div
+            v-if="searchResultList.length > 0"
+            class="map-search-result-list"
+          >
             <div
-              v-if="searchResultList.length > 0"
-              class="map-search-result-list"
+              class="map-search-result-list-item"
+              v-for="(item, index) in searchResultList"
+              :key="index"
+              @click.stop="flyTo(item)"
             >
-              <div
-                class="map-search-result-list-item"
-                v-for="(item, index) in searchResultList"
-                :key="index"
-                @click.stop="flyTo(item)"
-              >
-                <div class="title">
-                  <span class="name">{{ item?.properties?.RES_NAME }}</span>
-                  <span class="tag">{{ item?.properties?.ENG_SCAL }}级</span>
-                </div>
-                <div class="item">
-                  <i></i>工程代码：{{ item?.properties?.RES_CODE }}
-                </div>
-                <div class="item">
-                  <i></i>工程类型：{{ item?.properties?.RES_TYPE }}
-                </div>
-                <div class="item">
-                  <i></i>工程地址：{{ item?.properties?.RES_LOC }}
-                </div>
+              <div class="title">
+                <span class="name">{{ item?.properties?.RES_NAME }}</span>
+                <span class="tag">{{ item?.properties?.ENG_SCAL }}级</span>
+              </div>
+              <div class="item">
+                <i></i>工程代码：{{ item?.properties?.RES_CODE }}
+              </div>
+              <div class="item">
+                <i></i>工程类型：{{ item?.properties?.RES_TYPE }}
+              </div>
+              <div class="item">
+                <i></i>工程地址：{{ item?.properties?.RES_LOC }}
               </div>
-            </div>
-            <div v-else class="map-search-result-list no-data">
-              <img src="@/assets/card/no-data.png" />
-              <span>暂无结果</span>
             </div>
           </div>
-        </template>
-      </el-popover>
-    </div>
+          <div v-else class="map-search-result-list no-data">
+            <img src="@/assets/card/no-data.png" />
+            <span>暂无结果</span>
+          </div>
+        </div>
+      </template>
+    </el-popover>
   </div>
 </template>
 
@@ -64,7 +63,6 @@
 import { ref, computed } from "vue";
 import { getReservoirList } from "@/api/map";
 import { useProjectStore } from "@/store/modules/project";
-import { ClickOutside as vClickOutside } from "element-plus";
 import * as SyCim from "sy-cesium-sdk";
 defineOptions({
   name: "MapSearch",
@@ -72,12 +70,24 @@ defineOptions({
 const Cesium = SyCim.Cesium;
 const projectStore = useProjectStore();
 const popoverVisible = ref(false);
+const hidePopover = (e: any) => {
+  if (e?.target?.className?.includes("map-search-result-title")) {
+    return;
+  }
+  popoverVisible.value = false;
+};
+const addEventListener = () => {
+  removeEventListener();
+  document.addEventListener("click", hidePopover, false);
+};
+const removeEventListener = () => {
+  document.removeEventListener("click", hidePopover);
+};
 const showPopover = () => {
   popoverVisible.value = true;
+  addEventListener();
 };
-const onClickOutside = () => {
-  popoverVisible.value = false;
-};
+
 const searchValue = ref("");
 const searchResultList = ref<any[]>([]);
 const layerData = computed(() =>
@@ -97,6 +107,7 @@ const changeInputValue = async (value: string) => {
 const flyTo = (item: any) => {
   const coordinates = item?.geometry?.coordinates;
   if (!coordinates) return;
+  popoverVisible.value = false;
   const center = SyCim.Parse.parsePosition(
     `${coordinates[0]},${coordinates[1]},10`
   ).toCartesian3();

src/views/Main/index.vue

@@ -100,12 +100,17 @@ onBeforeUnmount(() => {
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
+  pointer-events: none;
   .top {
+    pointer-events: all;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
   }
+  .bottom {
+    pointer-events: all;
+  }
 }
 </style>

src/views/RegionSelect/index.vue

@@ -48,6 +48,7 @@ onMounted(() => {
   height: 32px;
   border-radius: 4px;
   overflow: hidden;
+  pointer-events: all;
   .title {
     background: #36b29e;
     height: 100%;

src/views/RightPanel/index.vue

@@ -21,5 +21,6 @@ defineOptions({
   display: flex;
   flex-direction: row;
   gap: 12px;
+  pointer-events: none;
 }
 </style>