Merge branch 'feature-v1.0.0' of ssh://gitlab.datameta.com:2224/project/water/data-board-2025 into feature-v1.0.0

public/api/sy-map-admin/water/regionTree.json

@@ -0,0 +1,372 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "code": "440000",
+      "parentCode": "0",
+      "name": "广东省",
+      "orderNum": 1,
+      "id": "d3ad5e5dbec83e9aabbd8b2ce704672a",
+      "url": "/geoserver/ows",
+      "serviceIndex": "shuyuan:xzqconfig_gd_sheng",
+      "field": "adcode",
+      "children": [
+        {
+          "code": "441900",
+          "parentCode": "440000",
+          "name": "东莞市",
+          "orderNum": 1,
+          "id": "c45f712c4e19998c9cf2de86a4e613cc",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "441800",
+          "parentCode": "440000",
+          "name": "清远市",
+          "orderNum": 1,
+          "id": "adb67f26d0a71067887ae7eceed5dc29",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "441700",
+          "parentCode": "440000",
+          "name": "阳江市",
+          "orderNum": 1,
+          "id": "e7031b69c7968313dfcda737b55f8145",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "441600",
+          "parentCode": "440000",
+          "name": "河源市",
+          "orderNum": 1,
+          "id": "73e70da62880174426ad0fa9aef41a8a",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "441500",
+          "parentCode": "440000",
+          "name": "汕尾市",
+          "orderNum": 1,
+          "id": "213b3eed7077e90ef956a66b0160e67b",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "441400",
+          "parentCode": "440000",
+          "name": "梅州市",
+          "orderNum": 1,
+          "id": "8754d3d581487a5cbfff23b257f6b485",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "441300",
+          "parentCode": "440000",
+          "name": "惠州市",
+          "orderNum": 1,
+          "id": "b785b55f1365872f3a569bd393df8f49",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "442000",
+          "parentCode": "440000",
+          "name": "中山市",
+          "orderNum": 1,
+          "id": "25d2e55dac65de1dde00e30ea0d4d8d9",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "441200",
+          "parentCode": "440000",
+          "name": "肇庆市",
+          "orderNum": 1,
+          "id": "ccb3b0f6b36da5e396c94c7646285f15",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "440900",
+          "parentCode": "440000",
+          "name": "茂名市",
+          "orderNum": 1,
+          "id": "3c8de8ff830a11d8fb3f595a8ffbe042",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "440800",
+          "parentCode": "440000",
+          "name": "湛江市",
+          "orderNum": 1,
+          "id": "19a316be41e20d38dc4c08112298f3ea",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "440700",
+          "parentCode": "440000",
+          "name": "江门市",
+          "orderNum": 1,
+          "id": "1c89b772da65045df5b31485628dad14",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "440600",
+          "parentCode": "440000",
+          "name": "佛山市",
+          "orderNum": 1,
+          "id": "ad2555b457fd807d72e82a2991d107c3",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "440500",
+          "parentCode": "440000",
+          "name": "汕头市",
+          "orderNum": 1,
+          "id": "b05a7b1d1ad376f10d10e2a0435a67c3",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "440400",
+          "parentCode": "440000",
+          "name": "珠海市",
+          "orderNum": 1,
+          "id": "4eef3fbbb0cd7638fa40b7fcc57b4b92",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "445200",
+          "parentCode": "440000",
+          "name": "揭阳市",
+          "orderNum": 1,
+          "id": "3dff46756700d3e3db2349891cb54493",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "440300",
+          "parentCode": "440000",
+          "name": "深圳市",
+          "orderNum": 1,
+          "id": "fb56831063f1051787a1e9e22e2e4234",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "445100",
+          "parentCode": "440000",
+          "name": "潮州市",
+          "orderNum": 1,
+          "id": "3e7e5a5fad638f89c0830435397dbadc",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "440200",
+          "parentCode": "440000",
+          "name": "韶关市",
+          "orderNum": 1,
+          "id": "c5a42e1868770edddd9ebf9f740b4300",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        },
+        {
+          "code": "440100",
+          "parentCode": "440000",
+          "name": "广州市",
+          "orderNum": 1,
+          "id": "29946f1b893b208c6124699a935c4612",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": [
+            {
+              "code": "440118",
+              "parentCode": "440100",
+              "name": "增城区",
+              "orderNum": 1,
+              "id": "ded8f077dabe4dc63c774ad58a5c2a10",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440117",
+              "parentCode": "440100",
+              "name": "从化区",
+              "orderNum": 1,
+              "id": "86c2e947c41b0638de835edde04c2c5d",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440115",
+              "parentCode": "440100",
+              "name": "南沙区",
+              "orderNum": 1,
+              "id": "36138ff7f7ebbc7f89cf0027606ec243",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440114",
+              "parentCode": "440100",
+              "name": "花都区",
+              "orderNum": 1,
+              "id": "1a857a710ae8629e200e9d120b450d3d",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440113",
+              "parentCode": "440100",
+              "name": "番禺区",
+              "orderNum": 1,
+              "id": "b7802e0cf9884629c539ae1ca82e001a",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440112",
+              "parentCode": "440100",
+              "name": "黄埔区",
+              "orderNum": 1,
+              "id": "0c26e7524f46b2e03af7e8de9e8454c0",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440111",
+              "parentCode": "440100",
+              "name": "白云区",
+              "orderNum": 1,
+              "id": "4eb36dfdc0c8f02b8e5069d0f546ecbd",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440106",
+              "parentCode": "440100",
+              "name": "天河区",
+              "orderNum": 1,
+              "id": "4068f7d91a3e4b8b0c54ae596a9657ff",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440105",
+              "parentCode": "440100",
+              "name": "海珠区",
+              "orderNum": 1,
+              "id": "39224ef8724828db2a397a387bdf61fc",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440104",
+              "parentCode": "440100",
+              "name": "越秀区",
+              "orderNum": 1,
+              "id": "159dccc4b1ae55111bd571a86634c16b",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            },
+            {
+              "code": "440103",
+              "parentCode": "440100",
+              "name": "荔湾区",
+              "orderNum": 1,
+              "id": "118759109037d200b15874736e708d71",
+              "url": "/geoserver/ows",
+              "serviceIndex": "shuyuan:xzqconfig_gz_qu",
+              "field": "adcode",
+              "children": []
+            }
+          ]
+        },
+        {
+          "code": "445300",
+          "parentCode": "440000",
+          "name": "云浮市",
+          "orderNum": 1,
+          "id": "9c2d0666c2dd18437fd4bba9d04c6ba5",
+          "url": "/geoserver/ows",
+          "serviceIndex": "shuyuan:xzqconfig_gd_shi",
+          "field": "adcode",
+          "children": []
+        }
+      ]
+    }
+  ],
+  "success": true
+}

public/img/map/layer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><g><g><path d="M9.999699296875,9.385516708984376L17.591379296874997,6.222386708984375C18.104379296875,6.008626708984375,18.104379296875,5.250506708984375,17.591379296874997,5.036746708984375L9.999699296875,1.873626708984375L2.408007296875,5.036746708984375C1.894969796875,5.250506708984375,1.894970896875,6.008626708984375,2.408007296875,6.222386708984375L9.999699296875,9.385516708984376ZM9.999689296875,8.011006708984375L4.284089296875,5.629566708984375L9.999699296875,3.2481267089843753L15.715279296875,5.629566708984375L9.999689296875,8.011006708984375ZM1.873779296875,8.783306708984375L1.873779296875,10.317236708984375L10.000019296875,13.889926708984374L18.123779296875,10.318326708984374L18.123779296875,8.784396708984374L10.000019296875,12.356026708984375L1.873779296875,8.783306708984375ZM1.873779296875,13.024326708984376L1.873779296875,14.558226708984375L10.000139296875,18.130926708984376L18.123779296875,14.559426708984375L18.123779296875,13.025526708984374L10.000139296875,16.597026708984373L1.873779296875,13.024326708984376Z" fill-rule="evenodd" fill="#36B29E" fill-opacity="1"/></g></g></svg>

src/api/map/index.ts

@@ -25,3 +25,15 @@ export const getSceneListData = async (data: any) => {
 export const getLayerLegend = async (url: string) => {
   return axios.get(url);
 };
+
+// 获取图形的
+export const getLayerData = async (url: string, params: any) => {
+  return request({
+    url,
+    method: 'post',
+    data: params,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+};

src/api/project/index.ts

@@ -1,33 +1,40 @@
-import axios from 'axios';
+import axios from "axios";
-import { request } from '../axios';
+import { request } from "../axios";
-const url = '/sy-map-admin';
+const url = "/sy-map-admin";
 
 export const getProjectList = async (params: any) => {
   const res = await request({
-    url: url + '/water/project.json',
+    url: url + "/water/project.json",
-    method: 'get',
+    method: "get",
-    params
+    params,
   });
   return res;
 };
 export const getLayerTree = async (params: any) => {
   return await request({
-    url: url + '/water/layerTree.json',
+    url: url + "/water/layerTree.json",
-    method: 'get',
+    method: "get",
-    params
+    params,
   });
 };
 // 默认视点
 export const getDefaultViewPoint = async () => {
   return await request({
-    url: url + '/water/defaultViewPoint.json',
+    url: url + "/water/defaultViewPoint.json",
-    method: 'get'
+    method: "get",
+  });
+};
+// 行政区划树
+export const getRegionTree = async () => {
+  return await request({
+    url: url + "/water/regionTree.json",
+    method: "get",
   });
 };
 export const getLayerStyle = async (id: string) => {
   return await request({
-    url: url + '/layer/style/' + id,
+    url: url + "/layer/style/" + id,
-    method: 'get'
+    method: "get",
   });
 };
 
@@ -35,26 +42,26 @@ export const getLayerStyle = async (id: string) => {
 export const getFirstScene = async () => {
   return request({
     url: `/map/scene/sceneList`,
-    method: 'post',
+    method: "post",
     data: {
       pageNum: 1,
       pageSize: 1,
       data: {
-        id: '',
+        id: "",
-        name: ''
+        name: "",
       },
       params: {
-        order: 'asc',
+        order: "asc",
-        orderBy: 'pub_date'
+        orderBy: "pub_date",
-      }
+      },
-    }
+    },
   });
 };
 
 export const getLayerData = async (sceneId: string) => {
   return request({
     url: `/map/scene/getLayerTree/${sceneId}`,
-    method: 'get'
+    method: "get",
   });
 };
 
@@ -68,10 +75,13 @@ export const getLayerLegend = async (url: string) => {
  * @param code 图层的查询编码
  * @returns
  */
-export const identifyLayerInfo = async (type: string | number, code: string | number) => {
+export const identifyLayerInfo = async (
+  type: string | number,
+  code: string | number
+) => {
   return request({
     url: `/run/api/object/info/${type}/${code}`,
-    method: 'get'
+    method: "get",
   });
 };
 
@@ -79,6 +89,6 @@ export const identifyLayerInfo = async (type: string | number, code: string | nu
 export function getSceneConfig(sceneId: string | number) {
   return request({
     url: `/map/scene/config/findConfigBySceneId/${sceneId}`,
-    method: 'get'
+    method: "get",
   });
 }

src/components.d.ts

@@ -12,9 +12,12 @@ declare module 'vue' {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     Form: typeof import('./components/Form/index.vue')['default']
     InputNumber: typeof import('./components/Input/input-number.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/hooks/web/useProject.tsx

@@ -1,5 +1,14 @@
+import { reactive } from 'vue';
 import * as SyCim from 'sy-cesium-sdk';
 import { LayerTypeEnum } from '@/enums/projectEnum';
+import { queryLayersByPos } from "@/utils/mapUtils";
+import axios from 'axios';
+import { throttle } from "lodash-es";
+const clustering = reactive({
+  enabled: true,
+  pixelRange: 200,
+  minimumClusterSize: 5,
+});
 // import { getLayerStyle } from '@/api/project';
 const createXyzLayer = (data: any) =>
   new SyCim.XyzLayer(data.id, {
@@ -95,6 +104,47 @@ const layerActions: Record<string, any> = {
     // }
     new SyCim.SuperMapRestLayer(data.id, { url: data.url, k: data.serviceToken })
 };
+
+export const getFeatures: any = (data: any, filter: '1=1') => {
+  return new Promise(async (resolve, reject) => {
+    const { url, serviceToken } = data;
+    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`;
+    let params: any = {
+      getFeatureMode: 'SQL',
+      datasetNames: [datasourceName],
+      maxFeatures: 100000000,
+      queryParameter: {
+        attributeFilter: filter
+      }
+    };
+    if (serviceToken) {
+      params.k = serviceToken;
+    }
+    const result = await axios.post(
+      queryUrl,
+      JSON.stringify(params),
+      {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+        }
+      }
+    );
+    if (result?.data?.features?.length > 0) {
+      resolve(result.data);
+    } else {
+      resolve({
+        type: "FeatureCollection",
+        features: []
+      });
+    }
+  });
+};
 const defaultZoomToLayer = (data: any) => {
   const { mapParam } = data;
   if (!mapParam?.tileCenter) return;
@@ -215,7 +265,7 @@ const baseLayerActions: Record<string, any> = {
 
 export function useLayer() {
   const addLayer = async (layerData: any) => {
-    const { layerType, url, id } = layerData;
+    const { layerType, url, id, isNeedCluster } = layerData;
     let action = null;
     // 超图 S3M图层
     if (layerType === '080100') {
@@ -237,7 +287,50 @@ export function useLayer() {
       return;
     }
     if (!layerType || !(action = layerActions[layerType as string])) return;
-    const layer: any = await action(layerData);
+    let layer: any = await action(layerData);
+    if (isNeedCluster === '1' && layerData.nameCn === "水库点") {
+      let baseUrl = import.meta.env.VITE_BASE_URL;
+      const data = await getFeatures(layerData);
+      if (data?.features?.[0]?.geometry?.type === 'Point') {
+        let layerConfig = {};
+        switch (layerData.nameCn) {
+          case "水库点":
+            layerConfig = {
+              isUniqueRender: true,
+              field: "ENG_SCAL",
+              fieldOptions: [
+                { name: "1.0", attr: "image", value: "reservoir_big.png" },
+                { name: "2.0", attr: "image", value: "reservoir_big.png" },
+                { name: "3.0", attr: "image", value: "reservoir_normal.png" },
+                { name: "4.0", attr: "image", value: "reservoir_small.png" },
+                { name: "5.0", attr: "image", value: "reservoir_small.png" },
+              ],
+              image: "map-title-o.png",
+            };
+            break;
+        }
+        layer = new SyCim.ClusterWfsLayer(layerData.id, {
+          data,
+          symbol: {
+            type: "billboardP",
+            imageProxy: `${baseUrl}/img/map/`, // 图片代理
+            style: {
+              clampToGround: false,
+              image: "reservoir_small.png",
+              ...layerConfig,
+            },
+          },
+          clustering: {
+            enabled: clustering.enabled,
+            pixelRange: clustering.pixelRange,
+            minimumClusterSize: clustering.minimumClusterSize,
+            clusterEvent: undefined,
+            clusterColors: undefined, // 聚合点颜色
+            getImage: undefined, // 获取聚合图片的函数
+          },
+        });
+      }
+    }
     layer && window.viewer.addLayer(layer);
     if (['013000'].includes(layerType)) {
       // 3d tiles
@@ -273,10 +366,21 @@ export function useLayer() {
     const { layerType } = data;
     zoomToLayerActions[layerType as string]?.(data);
   };
+  const viewerClick = throttle((e) => {
+    console.log(e);
+  }, 500);
+  const addViewerMouseClick = () => {
+    window.viewer?.on(SyCim.MouseEventType.MOUSE_MOVE, viewerClick);
+  };
+  const removeViewerMouseClick = () => {
+    window.viewer?.off(SyCim.MouseEventType.MOUSE_MOVE, viewerClick);
+  };
   return {
     addLayer,
     removeLayer,
-    zoomToLayer
+    zoomToLayer,
+    addViewerMouseClick,
+    removeViewerMouseClick
   };
 }
 

src/store/modules/project.ts

@@ -71,6 +71,21 @@ function filterTreeData(data: any[]) {
       .filter(Boolean)
   );
 }
+function getLayerByName(data: any[], name: string) {
+  let layer = null;
+  const fn = (data: any[], name: string) => {
+    for (const item of data) {
+      if (item.nameCn === name) {
+        layer = item;
+        return;
+      } else if (item.children && item.children.length >= 0) {
+        fn(item.children, name);
+      }
+    }
+  };
+  fn(data, name);
+  return layer;
+}
 const { addLayer, removeLayer } = useLayer();
 
 export const useProjectStore = defineStore("project", {
@@ -185,6 +200,9 @@ export const useProjectStore = defineStore("project", {
         this.selectedLayers = _nodeTemp.filter((key) => !nodes.includes(key));
       }
     },
+    getLayerByName(name: string) {
+      return getLayerByName(this.layerData, name);
+    },
     async fetchFirstScene() {
       const rData = await getFirstScene();
       if (rData.code === 200) {

src/theme/index.scss

@@ -13,6 +13,7 @@
 @use "./tabs.scss" as *;
 @use "./step.scss" as *;
 @use "./upload.scss" as *;
+@use "./popover.scss" as *;
 
 body {
   font-family: 思源黑体;
@@ -53,7 +54,11 @@ code {
   align-items: center;
   padding: 3px 0px 3px 16px;
   border-left: 4px solid #59b295;
-  background: linear-gradient(90deg, rgba(134, 191, 105, 0.8) 0%, rgba(57, 147, 191, 0.1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(134, 191, 105, 0.8) 0%,
+    rgba(57, 147, 191, 0.1) 100%
+  );
 
   font-family: PingFang SC;
   font-size: 16px;

src/theme/popover.scss

@@ -0,0 +1,122 @@
+.sy-popover.sy-popper.map-search-popper {
+  padding: 0px;
+  .map-search-result {
+    .map-search-result-title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 12px 16px;
+      border-width: 0px 0px 1px 0px;
+      border-style: solid;
+      border-color: rgba(0, 0, 0, 0.1);
+
+      font-family: Source Han Sans;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 22px;
+      letter-spacing: 0em;
+
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      /* 文字&图标/Font Gy2 */
+      color: rgba(0, 0, 0, 0.6);
+      span {
+        padding: 0px 4px;
+        font-family: Source Han Sans;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        letter-spacing: 0em;
+
+        font-variation-settings: "opsz" auto;
+        font-feature-settings: "kern" on;
+        /* ShuYuan/SY_6 Normal */
+        color: #3a89fe;
+      }
+    }
+    .map-search-result-list {
+      height: 426px;
+      padding: 16px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+
+      .map-search-result-list-item {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding-bottom: 16px;
+        .title {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 4px;
+          .name {
+            font-family: Source Han Sans;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 22px;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            /* 文字&图标/Font Gy1 */
+            color: rgba(0, 0, 0, 0.9);
+          }
+          .tag {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 1px 12px;
+            width: 48px;
+            height: 20px;
+            border-radius: 2px;
+
+            box-sizing: border-box;
+            /* ShuYuan/SY_6 Normal */
+            border: 1px solid #3a89fe;
+
+            font-family: Source Han Sans;
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 18px;
+            letter-spacing: 0em;
+
+            font-variation-settings: "opsz" auto;
+            font-feature-settings: "kern" on;
+            /* ShuYuan/SY_6 Normal */
+            color: #3a89fe;
+          }
+        }
+        .item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 4px;
+          font-family: Source Han Sans;
+          font-size: 12px;
+          font-weight: normal;
+          line-height: 18px;
+          letter-spacing: 0em;
+
+          font-variation-settings: "opsz" auto;
+          font-feature-settings: "kern" on;
+          /* 文字&图标/Font Gy2 */
+          color: rgba(0, 0, 0, 0.6);
+          i {
+            background: #36b29e;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+        }
+        &:not(:last-child) {
+          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
+  }
+}

src/theme/select.scss

@@ -1,16 +1,17 @@
 .sy-select__popper.sy-popper {
-    border: 1px solid rgba(10, 204, 204, 0.32) !important;
+  border: 1px solid rgba(255, 255, 255, 0.8) !important;
   box-shadow: none;
-    background: rgba(0, 37, 88, 0.6) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
 }
 .sy-select-dropdown__list {
-    background: rgba(0, 37, 88, 0.6);
+  background: rgba(255, 255, 255, 0.8);
   box-shadow: none;
   margin: 6px !important;
+  backdrop-filter: blur(10px);
 }
 .sy-select-dropdown__item {
   background: transparent !important;
-    color: rgba(255, 255, 255, 0.7) !important; 
+  color: rgba(0, 0, 0, 0.9) !important;
   &:hover {
     color: var(--sy-main-font-color);
   }

src/views/BottomPanel/index.vue

@@ -1,15 +1,48 @@
 <template>
   <div class="bottom-panel">
-    <div class="tool-item active">水库</div>
+    <!-- <div class="tool-item active">水库</div>
     <div class="tool-item">水闸</div>
-    <div class="tool-item">堤防</div>
+    <div class="tool-item">堤防</div> -->
+    <div
+      v-for="(item, index) in layerData"
+      :class="['tool-item', { active: selectedKeys.includes(item.id) }]"
+      @click="handleChangeLayer(item)"
+    >
+      {{ item.nameCn }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from "vue";
+import { useProjectStore } from "@/store/modules/project";
+const projectStore = useProjectStore();
+
 defineOptions({
   name: "bottom-panel",
 });
+const activeLayers = ref([]);
+const listName = ref(["水库点", "堤防", "水闸"]);
+const layerData: any = computed(() => {
+  const list = [];
+  listName.value.forEach((item, index) => {
+    const layer = projectStore.getLayerByName(item);
+    if (layer) {
+      list.push(layer);
+    }
+  });
+  return list;
+});
+const selectedKeys = computed(() => projectStore.selectedLayerKeys);
+function handleChangeLayer(item: any) {
+  if (activeLayers.value.includes(item.id)) {
+    activeLayers.value = activeLayers.value.filter((id: any) => id !== item.id);
+    projectStore.setLayerVisibility(item.id, false);
+  } else {
+    activeLayers.value.push(item.id);
+    projectStore.setLayerVisibility(item.id, true);
+  }
+}
 </script>
 
 <style scoped lang="less">

src/views/Main/Map/components/LayerTree.vue

@@ -37,13 +37,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, nextTick } from "vue";
+import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from "vue";
 import SyDialog from "@/components/Dialog/index.vue";
 import { useProjectStore } from "@/store/modules/project";
 import { useLayer } from "@/hooks/web/useProject";
 import { flattenTree } from "@/utils/index";
 import Tree from "@/components/Tree/index.vue";
-const { zoomToLayer } = useLayer();
+const { zoomToLayer, addViewerMouseClick, removeViewerMouseClick } = useLayer();
 
 const projectStore = useProjectStore();
 defineOptions({
@@ -116,4 +116,12 @@ watch(
     }
   },
 );
+
+onMounted(() => {
+  addViewerMouseClick();
+});
+
+onBeforeUnmount(() => {
+  removeViewerMouseClick();
+});
 </script>

src/views/Main/MapSearch/index.vue

@@ -3,18 +3,63 @@
     <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
+              class="map-search-result-list-item"
+              v-for="(item, index) in searchResultList"
+              :key="index"
+            >
+              <div class="title">
+                <span class="name">{{ item.name }}</span>
+                <span class="tag">{{ item.level }}级</span>
+              </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>
+        </div>
+      </template>
+    </el-popover>
   </div>
 </template>
 
 <script setup lang="ts">
-import {} from "element-plus/";
+import { ref } from "vue";
 defineOptions({
   name: "MapSearch",
 });
+const searchValue = ref("");
+const searchResultList = ref(
+  new Array(10).fill({
+    name: "白头岗水库",
+    level: 1,
+    code: "12300000000000",
+    address: "广州市增城区新塘县",
+    type: "xxx",
+  })
+);
+const changeInputValue = (value: string) => {};
 </script>
 
 <style scoped lang="less">

src/views/Main/SafetyOverviewCard/index.vue

@@ -3,7 +3,10 @@
     <div class="sy-water-cart-title">
       安全监查情况
       <el-select class="sy-water-cart-title-select" size="small">
-        <el-option label="近7日" value="1"></el-option>
+        <el-option label="今日" value="1"></el-option>
+        <el-option label="近7日" value="2"></el-option>
+        <el-option label="近30日" value="3"></el-option>
+        <el-option label="近一年" value="4"></el-option>
       </el-select>
     </div>
     <SafetyAppraise />

src/views/RegionSelect/index.vue

@@ -1,16 +1,43 @@
 <template>
   <div class="region-select">
     <span class="title">行政区划</span>
-    <el-select size="small" class="sy-region-select">
+    <el-tree-select
-      <el-option label="广东省" value="1"></el-option>
+      v-model="regionValue"
-    </el-select>
+      :data="regionTree"
+      filterable
+      style="width: 194px"
+      size="small"
+      class="sy-region-select"
+      check-strictly
+      render-after-expand
+      :props="treeSelectProps"
+      node-key="id"
+      @change="changeRegion"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { getAreasData } from "@/api/safety";
+import { onMounted, ref } from "vue";
 defineOptions({
   name: "RegionSelect",
 });
+const regionValue = ref("");
+const regionTree = ref([]);
+const treeSelectProps = {
+  label: "name",
+  children: "children",
+};
+const changeRegion = (val: any) => {
+  console.log("🚀 ~ changeRegion ~ val:", val);
+  // regionValue.value = val;
+};
+onMounted(() => {
+  getAreasData().then((res: any) => {
+    regionTree.value = res ?? [];
+  });
+});
 </script>
 
 <style scoped lang="less">