From 8cce3a75f0d1c1280204485a1c26f6e069276773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B1=E4=BC=9F=E6=B4=8B?= <qiuweiyang@datametatech.com>
Date: Thu, 13 Mar 2025 16:26:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E5=B1=82=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/map/index.ts               |  65 +++++++++++---
 src/assets/card/no-data.png        | Bin 0 -> 4200 bytes
 src/components.d.ts                |   3 +
 src/theme/popover.scss             |  20 ++++-
 src/views/Main/MapSearch/index.vue | 136 ++++++++++++++++++++---------
 5 files changed, 166 insertions(+), 58 deletions(-)
 create mode 100644 src/assets/card/no-data.png

diff --git a/src/api/map/index.ts b/src/api/map/index.ts
index 57899c9..4ee0f43 100644
--- a/src/api/map/index.ts
+++ b/src/api/map/index.ts
@@ -1,27 +1,26 @@
-import { request } from '../axios';
-import axios from 'axios';
+import { request } from "../axios";
+import axios from "axios";
 
 // 获取场景列表
 export const getSceneListData = async (data: any) => {
   return request({
     url: `/map/scene/sceneList`,
-    method: 'post',
+    method: "post",
     data: {
       pageNum: 1,
       pageSize: 10,
       data: {
-        id: '',
-        name: data.name
+        id: "",
+        name: data.name,
       },
       params: {
-        order: 'asc',
-        orderBy: 'pub_date'
-      }
-    }
+        order: "asc",
+        orderBy: "pub_date",
+      },
+    },
   });
 };
 
-
 export const getLayerLegend = async (url: string) => {
   return axios.get(url);
 };
@@ -30,10 +29,48 @@ export const getLayerLegend = async (url: string) => {
 export const getLayerData = async (url: string, params: any) => {
   return request({
     url,
-    method: 'post',
+    method: "post",
     data: params,
     headers: {
-      'Content-Type': 'multipart/form-data'
-    }
+      "Content-Type": "multipart/form-data",
+    },
   });
-};
\ No newline at end of file
+};
+//从水库-水库点图层中，根据水库名称/水平编码，从geojson中查询水库列表
+export const getReservoirList = async (layerData: any, searchName: string) => {
+  const attributeFilter = searchName
+    ? `RES_NAME LIKE '%${searchName}%' OR RES_CODE LIKE '%${searchName}%'`
+    : "1=1";
+  //
+  const { url } = layerData;
+  let newUrl = decodeURI(url).split("maps/")[0].replace("map-", "data-");
+  const reg2 = /([^/]+)$/;
+  const decodeUrl: any = decodeURI(url);
+  const newLayerName: any = decodeUrl?.match?.(reg2)?.[1];
+  const l = newLayerName?.split("%40");
+  const datasourceName = `${l?.[1]}:${l?.[0]}`;
+  let queryUrl = `${newUrl}data/featureResults.geojson?returnContent=true`;
+  const result = await axios.post(
+    queryUrl,
+    JSON.stringify({
+      getFeatureMode: "SQL",
+      datasetNames: [datasourceName],
+      maxFeatures: 100,
+      queryParameter: {
+        attributeFilter: attributeFilter,
+      },
+    }),
+    {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+      },
+    }
+  );
+  if (result?.data?.features?.length > 0) {
+    return result.data;
+  }
+  return {
+    type: "FeatureCollection",
+    features: [],
+  };
+};
diff --git a/src/assets/card/no-data.png b/src/assets/card/no-data.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8cde2df124e3968c11b7b6fff53c0e71d9d96e7
GIT binary patch
literal 4200
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

literal 0
HcmV?d00001

diff --git a/src/components.d.ts b/src/components.d.ts
index d58ef46..d5d6e7e 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -28,4 +28,7 @@ declare module 'vue' {
     UploadImage: typeof import('./components/Upload/UploadImage.vue')['default']
     Video: typeof import('./components/Video/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
+  }
 }
diff --git a/src/theme/popover.scss b/src/theme/popover.scss
index ffb60ec..e6a3f4f 100644
--- a/src/theme/popover.scss
+++ b/src/theme/popover.scss
@@ -47,6 +47,7 @@
         flex-direction: column;
         gap: 4px;
         padding-bottom: 16px;
+        cursor: pointer;
         .title {
           display: flex;
           justify-content: space-between;
@@ -70,7 +71,6 @@
             justify-content: center;
             align-items: center;
             padding: 1px 12px;
-            width: 48px;
             height: 20px;
             border-radius: 2px;
 
@@ -106,6 +106,10 @@
           font-feature-settings: "kern" on;
           /* 文字&图标/Font Gy2 */
           color: rgba(0, 0, 0, 0.6);
+          max-width: 240px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
           i {
             background: #36b29e;
             width: 8px;
@@ -117,6 +121,20 @@
           border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         }
       }
+      &.no-data {
+        align-items: center;
+        justify-content: center;
+
+        font-family: Source Han Sans;
+        font-size: 12px;
+        font-weight: 350;
+        line-height: 18px;
+        letter-spacing: 0em;
+
+        font-variation-settings: "opsz" auto;
+        /* 文字&图标/Font Gy2 */
+        color: rgba(0, 0, 0, 0.6);
+      }
     }
   }
 }
diff --git a/src/views/Main/MapSearch/index.vue b/src/views/Main/MapSearch/index.vue
index 06b2791..b522340 100644
--- a/src/views/Main/MapSearch/index.vue
+++ b/src/views/Main/MapSearch/index.vue
@@ -3,63 +3,113 @@
     <span class="map-search-icon">
       <iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon>
     </span>
-    <el-popover
-      placement="bottom"
-      :width="280"
-      trigger="click"
-      popper-class="map-search-popper"
-    >
-      <template #reference>
-        <el-input
-          class="map-search-input"
-          placeholder="输入水库名称、水库编码"
-          v-model="searchValue"
-          @change="changeInputValue"
-        ></el-input>
-      </template>
-      <template #default>
-        <div class="map-search-result">
-          <div class="map-search-result-title">
-            共搜索到<span>{{ searchResultList.length }}</span
-            >条结果
-          </div>
-          <div class="map-search-result-list">
+    <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>
             <div
-              class="map-search-result-list-item"
-              v-for="(item, index) in searchResultList"
-              :key="index"
+              v-if="searchResultList.length > 0"
+              class="map-search-result-list"
             >
-              <div class="title">
-                <span class="name">{{ item.name }}</span>
-                <span class="tag">{{ item.level }}级</span>
+              <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>
-              <div class="item"><i></i>工程代码：{{ item.code }}</div>
-              <div class="item"><i></i>工程类型：{{ item.type }}</div>
-              <div class="item"><i></i>工程地址：{{ item.address }}</div>
+            </div>
+            <div v-else class="map-search-result-list no-data">
+              <img src="@/assets/card/no-data.png" />
+              <span>暂无结果</span>
             </div>
           </div>
-        </div>
-      </template>
-    </el-popover>
+        </template>
+      </el-popover>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+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",
 });
+const Cesium = SyCim.Cesium;
+const projectStore = useProjectStore();
+const popoverVisible = ref(false);
+const showPopover = () => {
+  popoverVisible.value = true;
+};
+const onClickOutside = () => {
+  popoverVisible.value = false;
+};
 const searchValue = ref("");
-const searchResultList = ref(
-  new Array(10).fill({
-    name: "白头岗水库",
-    level: 1,
-    code: "12300000000000",
-    address: "广州市增城区新塘县",
-    type: "xxx",
-  })
+const searchResultList = ref<any[]>([]);
+const layerData = computed(() =>
+  projectStore.selectedLayers.find((f: any) => f.nameCn === "水库点")
 );
-const changeInputValue = (value: string) => {};
+const changeInputValue = async (value: string) => {
+  const searchStr = (value ?? "").trim();
+  if (!layerData.value) return;
+  if (!searchStr) {
+    searchResultList.value = [];
+    return;
+  }
+  showPopover();
+  const data = await getReservoirList(layerData.value, searchStr);
+  searchResultList.value = data?.features ?? [];
+};
+const flyTo = (item: any) => {
+  const coordinates = item?.geometry?.coordinates;
+  if (!coordinates) return;
+  const center = SyCim.Parse.parsePosition(
+    `${coordinates[0]},${coordinates[1]},10`
+  ).toCartesian3();
+  const boundingSphere = new Cesium.BoundingSphere(center, 100);
+  viewer.camera.flyToBoundingSphere(boundingSphere, {
+    offset: new Cesium.HeadingPitchRange(
+      viewer.camera.heading,
+      viewer.camera.pitch,
+      500
+    ),
+    duration: 2,
+  });
+};
 </script>
 
 <style scoped lang="less">