diff --git a/public/api/sy-map-admin/water/regionTree.json b/public/api/sy-map-admin/water/regionTree.json
new file mode 100644
index 0000000..dfff05e
--- /dev/null
+++ b/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
+}
diff --git a/src/api/project/index.ts b/src/api/project/index.ts
index 1e1b8cd..0313230 100644
--- a/src/api/project/index.ts
+++ b/src/api/project/index.ts
@@ -1,33 +1,40 @@
-import axios from 'axios';
-import { request } from '../axios';
-const url = '/sy-map-admin';
+import axios from "axios";
+import { request } from "../axios";
+const url = "/sy-map-admin";
 
 export const getProjectList = async (params: any) => {
   const res = await request({
-    url: url + '/water/project.json',
-    method: 'get',
-    params
+    url: url + "/water/project.json",
+    method: "get",
+    params,
   });
   return res;
 };
 export const getLayerTree = async (params: any) => {
   return await request({
-    url: url + '/water/layerTree.json',
-    method: 'get',
-    params
+    url: url + "/water/layerTree.json",
+    method: "get",
+    params,
   });
 };
 // 默认视点
 export const getDefaultViewPoint = async () => {
   return await request({
-    url: url + '/water/defaultViewPoint.json',
-    method: 'get'
+    url: url + "/water/defaultViewPoint.json",
+    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,
-    method: 'get'
+    url: url + "/layer/style/" + id,
+    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: '',
-        name: ''
+        id: "",
+        name: "",
       },
       params: {
-        order: 'asc',
-        orderBy: 'pub_date'
-      }
-    }
+        order: "asc",
+        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",
   });
 }
diff --git a/src/components.d.ts b/src/components.d.ts
index 2c5962a..39e5112 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     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']
diff --git a/src/theme/select.scss b/src/theme/select.scss
index f93c712..0e28cc9 100644
--- a/src/theme/select.scss
+++ b/src/theme/select.scss
@@ -1,24 +1,25 @@
 .sy-select__popper.sy-popper {
-    border: 1px solid rgba(10, 204, 204, 0.32) !important;
-    box-shadow: none;
-    background: rgba(0, 37, 88, 0.6) !important;
+  border: 1px solid rgba(255, 255, 255, 0.8) !important;
+  box-shadow: none;
+  background: rgba(255, 255, 255, 0.8) !important;
 }
 .sy-select-dropdown__list {
-    background: rgba(0, 37, 88, 0.6);
-    box-shadow: none;
-    margin: 6px !important;
+  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; 
-    &:hover {
-       color: var(--sy-main-font-color);
-    }
+  background: transparent !important;
+  color: rgba(0, 0, 0, 0.9) !important;
+  &:hover {
+    color: var(--sy-main-font-color);
+  }
 }
 .sy-select {
-    height: 42px;
-    line-height: 42px;
+  height: 42px;
+  line-height: 42px;
 }
 .sy-select .sy-input__wrapper {
-    line-height: 42px;
-}
\ No newline at end of file
+  line-height: 42px;
+}
diff --git a/src/views/Main/DailyPatrolCard/index.vue b/src/views/Main/DailyPatrolCard/index.vue
index feda938..eb34415 100644
--- a/src/views/Main/DailyPatrolCard/index.vue
+++ b/src/views/Main/DailyPatrolCard/index.vue
@@ -14,10 +14,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import * as echarts from "echarts";
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts';
 defineOptions({
-  name: "DailyPatrolCard",
+  name: 'DailyPatrolCard'
 });
 let chart: echarts.ECharts | undefined;
 const chartRef = ref();
@@ -26,7 +26,7 @@ const handleResize = () => {
 };
 onMounted(() => {
   chart = echarts.init(chartRef.value);
-  const pieName = ["一般", "重大", "较大", "紧急"];
+  const pieName = ['一般', '重大', '较大', '紧急'];
   const pieValue = [545, 21, 300, 64];
   let count: any = 0;
 
@@ -34,26 +34,26 @@ onMounted(() => {
   for (var i = 0; i < pieName.length; i++) {
     pieData.push({
       name: pieName[i],
-      value: pieValue[i],
+      value: pieValue[i]
     });
     count += pieValue[i];
   }
   const legendStyle = {
-    type: "scroll",
+    type: 'scroll',
     // orient: 'vertical',
     // height: '95%',
-    width: "50%",
-    left: "50%",
-    textAlign: "left",
-    align: "left",
-    icon: "circle", //设置为圆，删除则为矩形
+    width: '50%',
+    left: '50%',
+    textAlign: 'left',
+    align: 'left',
+    icon: 'circle', //设置为圆，删除则为矩形
     itemWidth: 10,
     itemHeight: 10,
     itemGap: 44, // 44
     formatter: function (name: any) {
       for (var i = 0; i < pieName.length; i++) {
         if (name == pieData[i].name) {
-          return "{name|" + name + "}{rate|" + pieValue[i] + "}";
+          return '{name|' + name + '}{rate|' + pieValue[i] + '}';
         }
       }
     },
@@ -65,94 +65,106 @@ onMounted(() => {
           width: 60,
           height: 24,
           padding: [0, 0, 0, 5],
-          color: "rgba(0, 0, 0, 0.55)",
+          color: 'rgba(0, 0, 0, 0.55)'
         },
         rate: {
           fontSize: 18,
-          fontWeight: "bold",
-          fontFamily: "Microsoft YaHei",
+          fontWeight: 'bold',
+          fontFamily: 'Microsoft YaHei',
           height: 24,
           width: 30,
           padding: [60, 0, 0, -60],
-          color: "rgba(0, 0, 0, 0.9)",
-        },
-      },
-    },
+          color: 'rgba(0, 0, 0, 0.9)'
+        }
+      }
+    }
   };
   // Chart options
   const option = {
     tooltip: {
-      trigger: "item",
-      formatter: "{a} <br/>{b}: {c} ({d}%)",
+      trigger: 'item',
+      // formatter: '{a} <br/>{b}: {c} ({d}%)'
     },
-    title: {
-      text: count,
-      subtext: "待处理问题",
-      x: "10%",
-      y: "34%",
-      align: "center",
-      textStyle: {
-        color: "rgba(0, 0, 0, 0.9)",
-        fontSize: 32,
-        lineHeight: 32, // 39
-        fontWeight: "bold",
-        fontFamily: "DIN",
-      },
-      subtextStyle: {
-        color: "rgba(0, 0, 0, 0.6)",
-        fontSize: 14,
-        fontWeight: 500,
-        lineHeight: 2, // 24
-        padding: [-20, 0, 0, 0],
-        fontFamily: "PingFang SC",
-      },
-    },
-    color: ["#4293F4", "#FFDD77", "#FF9A23", "#F26161"],
+    color: ['#4293F4', '#FFDD77', '#FF9A23', '#F26161'],
     legend: [
       {
-        top: "15%",
+        top: '15%',
         // 显示前两个
         data: pieName.slice(0, 2),
-        ...legendStyle,
+        ...legendStyle
       },
       {
-        top: "55%",
+        top: '55%',
         // 显示前两个
         data: pieName.slice(2, 4),
-        ...legendStyle,
-      },
+        ...legendStyle
+      }
     ],
     series: [
       {
-        name: "问题类型",
-        type: "pie",
-        radius: ["75%", "95%"],
-        center: ["20%", "50%"],
+        // name: '问题类型',
+        type: 'pie',
+        radius: ['52%', '70%'],
+        center: ['20%', '50%'],
         avoidLabelOverlap: false,
         label: {
-          show: false,
+          show: false
         },
         emphasis: {
           label: {
-            show: false,
-          },
+            show: false
+          }
         },
         labelLine: {
-          show: false,
+          show: false
         },
-        data: pieData,
+        data: pieData
       },
-    ],
+      {
+        name: '待处理问题',
+        type: 'pie',
+        radius: ['0', '30%'],
+        center: ['20%', '50%'],
+        z: 0,
+        itemStyle: {
+          color: 'transparent',
+          borderWidth: 0,
+          borderColor: '#eee'
+        },
+        label: {
+          position: 'center',
+          formatter: function () {
+            return ['{total|' + count + '}', '{label|待处理问题}'].join('\n');
+          },
+          rich: {
+            total: {
+              color: '#000',
+              fontSize: 28,
+              fontWeight: 'bold',
+              fontFamily: 'DIN',
+              lineHeight: 34
+            },
+            label: {
+              color: 'rgba(0, 0, 0, 0.6)',
+              fontSize: 14,
+              lineHeight: 18,
+              fontFamily: 'Source Han Sans'
+            }
+          }
+        },
+        data: [{ value: 1, name: '', tooltip: { show: false} }]
+      }
+    ]
   };
 
   // Set options and render chart
   chart.setOption(option);
 
-  window.addEventListener("resize", handleResize);
+  window.addEventListener('resize', handleResize);
 });
 onBeforeUnmount(() => {
   chart?.dispose();
-  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('resize', handleResize);
 });
 </script>
 
@@ -182,7 +194,7 @@ onBeforeUnmount(() => {
       line-height: 22px;
       letter-spacing: 0px;
 
-      font-variation-settings: "opsz" auto;
+      font-variation-settings: 'opsz' auto;
       color: rgba(0, 0, 0, 0.55);
       span {
         font-family: DIN;
@@ -191,7 +203,7 @@ onBeforeUnmount(() => {
         line-height: 22px;
         letter-spacing: 0px;
 
-        font-variation-settings: "opsz" auto;
+        font-variation-settings: 'opsz' auto;
         color: #28ce8e;
       }
     }
diff --git a/src/views/Main/Map/components/LayerSwitch.vue b/src/views/Main/Map/components/LayerSwitch.vue
index 028a138..8078bf1 100644
--- a/src/views/Main/Map/components/LayerSwitch.vue
+++ b/src/views/Main/Map/components/LayerSwitch.vue
@@ -14,7 +14,7 @@
         <el-tooltip
           effect="dark"
           :content="is3DScene ? '三维模式' : '二维模式'"
-          placement="right"
+          placement="bottom"
         >
           <img
             class="icon"
@@ -37,7 +37,7 @@ defineOptions({
 });
 let is3DScene = ref(true);
 let showTreeBox = ref(false);
-const emits = defineEmits(["layerTreeChange"]);
+const emits = defineEmits(["layerTreeChange", "showChange"]);
 function handleChangeMode() {
   is3DScene.value = !is3DScene.value;
   const mapSceneType = !is3DScene.value ? 2 : 3;
@@ -69,14 +69,18 @@ function layerTreeChange() {
 .layer-switch {
   display: flex;
   width: 100%;
-  height: 37px;
+  height: 36px;
   align-items: center;
   justify-content: center;
   .btn {
-    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 12px;
+    cursor: pointer;
     .icon {
-      width: 17px;
-      height: 17px;
+      width: 16px;
+      height: 16px;
     }
   }
   .slider-line {
diff --git a/src/views/Main/Map/components/Legend.vue b/src/views/Main/Map/components/Legend.vue
index 591064a..51d4077 100644
--- a/src/views/Main/Map/components/Legend.vue
+++ b/src/views/Main/Map/components/Legend.vue
@@ -79,7 +79,8 @@ onMounted(() => {
   padding: 12px 0 12px 12px;
   overflow-y: auto;
   border-radius: 4px;
-  background-color: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
   overflow: hidden;
 }
 .legend-comp {
@@ -98,7 +99,7 @@ onMounted(() => {
   .icon {
     width: 20px;
     height: 20px;
-    margin-right: 4px;
+    margin-right: 10px;
   }
 }
 </style>
diff --git a/src/views/Main/MapSearch/index.vue b/src/views/Main/MapSearch/index.vue
new file mode 100644
index 0000000..bade74b
--- /dev/null
+++ b/src/views/Main/MapSearch/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="map-search">
+    <span class="map-search-icon">
+      <iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon>
+    </span>
+    <el-input
+      class="map-search-input"
+      placeholder="输入水库名称、水库编码"
+    ></el-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {} from "element-plus/";
+defineOptions({
+  name: "MapSearch",
+});
+</script>
+
+<style scoped lang="less">
+.map-search {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 36px;
+  border-radius: 4px;
+  overflow: hidden;
+  .map-search-icon {
+    background: #36b29e;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+  }
+
+  :deep(.map-search-input) {
+    width: 204px;
+    background: rgba(255, 255, 255, 0.8);
+    color: rgba(0, 0, 0, 0.9);
+    ::-webkit-input-placeholder {
+      color: rgba(0, 0, 0, 0.4);
+    }
+  }
+}
+</style>
diff --git a/src/views/Main/ProjectCountCard/index.vue b/src/views/Main/ProjectCountCard/index.vue
index ec91516..994e5e5 100644
--- a/src/views/Main/ProjectCountCard/index.vue
+++ b/src/views/Main/ProjectCountCard/index.vue
@@ -69,12 +69,13 @@ onMounted(() => {
             fontSize: 16,
             fontWeight: 400,
             height: 24,
+            width: 60,
             padding: [0, 0, 0, 5],
             color: 'rgba(0, 0, 0, 0.55)'
           },
           rate: {
             fontSize: 18,
-            fontWeight: 500,
+            fontWeight: 'bold',
             fontFamily: 'Microsoft YaHei',
             height: 24,
             padding: [48, 0, 0, -60],
@@ -82,7 +83,7 @@ onMounted(() => {
           },
           unit: {
             fontSize: 16,
-            fontWeight: 500,
+            fontWeight: 'bold',
             fontFamily: 'Microsoft YaHei',
             height: 24,
             padding: [48, 0, 0, 9],
@@ -160,7 +161,7 @@ onMounted(() => {
             }
           }
         },
-        data: [{ value: 1, name: '总数' }]
+        data: [{ value: 1, name: '总数', tooltip: { show: false} }]
       }
     ]
   };
diff --git a/src/views/Main/RiskInspectionCard/index.vue b/src/views/Main/RiskInspectionCard/index.vue
index 2897ba8..cdbb54b 100644
--- a/src/views/Main/RiskInspectionCard/index.vue
+++ b/src/views/Main/RiskInspectionCard/index.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import * as echarts from "echarts";
-import "echarts-liquidfill";
-import "echarts-liquidfill/src/liquidFill.js";
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts';
+import 'echarts-liquidfill';
+import 'echarts-liquidfill/src/liquidFill.js';
 defineOptions({
-  name: "RiskInspectionCard",
+  name: 'RiskInspectionCard'
 });
 const problemEchartRef = ref();
 const questEchartRef = ref();
@@ -33,144 +33,147 @@ const handleResize = () => {
 onMounted(() => {
   leftChart = echarts.init(problemEchartRef.value);
 
-  const color = ["#FFBC37", "#429BF4"];
+  const color = ['#FFBC37', '#429BF4'];
   const dataStyle = {
     normal: {
       label: {
-        show: false,
+        show: false
       },
       labelLine: {
-        show: false,
+        show: false
       },
       shadowBlur: 40,
       borderWidth: 10,
-      shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
-    },
+      shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+    }
   };
   const placeHolderStyle = {
     normal: {
-      color: "rgba(255, 255, 255, 0.4)",
+      color: 'rgba(255, 255, 255, 0.4)',
       label: {
-        show: false,
+        show: false
       },
       labelLine: {
-        show: false,
-      },
+        show: false
+      }
     },
     emphasis: {
-      color: "rgba(255, 255, 255, 0.4)",
+      color: 'rgba(255, 255, 255, 0.4)'
     },
     tooltip: {
-      show: false,
-    },
+      show: false
+    }
   };
-  const legendName = ["数量", "问题数"];
+  const legendName = ['数量', '问题数'];
   const pieValue = [98, 56];
   var pieData: any = [];
   for (var i = 0; i < legendName.length; i++) {
     pieData.push({
       name: legendName[i],
-      value: pieValue[i],
+      value: pieValue[i]
     });
   }
+  const leftCenterValue = ['50%', '37%']
 
   // Chart options for the left side (nested pie)
   const leftOption = {
     tooltip: {
-      trigger: "item",
-      formatter: "{b}: {c}",
+      trigger: 'item',
+      formatter: '{b}: {c}'
     },
-    color: ["#FFBC37", "#FFBC37"],
+    color: ['#FFBC37', '#FFBC37'],
     title: {
       text: pieValue[0],
-      subtext: "工程总数",
-      x: "center",
-      y: "20%",
+      subtext: '工程总数',
+      x: 'center',
+      y: '20%',
       textStyle: {
-        color: "rgba(0, 0, 0, 0.9)",
+        color: 'rgba(0, 0, 0, 0.9)',
         fontSize: 32,
         lineHeight: 32, // 39
-        fontWeight: "bold",
-        fontFamily: "DIN",
+        fontWeight: 'bold',
+        fontFamily: 'DIN'
       },
       subtextStyle: {
-        color: "rgba(0, 0, 0, 0.6)",
+        color: 'rgba(0, 0, 0, 0.6)',
         fontSize: 14,
         fontWeight: 500,
         lineHeight: 2, // 24
         padding: [-20, 0, 0, 0],
-        fontFamily: "PingFang SC",
-      },
+        fontFamily: 'PingFang SC'
+      }
     },
     legend: {
       show: true,
       // orient: 'vertical',
       // x: '50%',
-      icon: "circle",
-      top: "bottom",
-      itemGap: 10, // 16
+      icon: 'circle',
+      top: 'bottom',
+      itemGap: 16, // 16
       itemWidth: 8,
       itemHeight: 8,
-      width: "100%",
+      width: '100%',
       textStyle: {
         rich: {
           name: {
             fontSize: 14,
             height: 25,
+            width: 40,
             padding: [0, 8, 0, 5],
-            color: "rgba(0, 0, 0, 0.55)",
+            color: 'rgba(0, 0, 0, 0.55)'
           },
           rate: {
             fontSize: 16,
-            fontWeight: 500,
+            fontWeight: 'bold',
             height: 35,
-            color: "rgba(0, 0, 0, 0.9)",
-          },
-        },
+            padding: [50, 8, 0, -45],
+            color: 'rgba(0, 0, 0, 0.9)'
+          }
+        }
       },
       data: legendName,
       formatter: function (name: any) {
         for (var i = 0; i < legendName.length; i++) {
           if (name == pieData[i].name) {
-            return "{name|" + name + "}{rate|" + pieValue[i] + "}";
+            return '{name|' + name + '}{rate|' + pieValue[i] + '}';
           }
         }
-      },
+      }
     },
     series: [
       {
-        name: "数量",
-        type: "pie",
+        name: '数量',
+        type: 'pie',
         clockWise: false,
-        radius: ["74%", "82%"],
-        center: ["50%", "40%"],
+        radius: ['70%', '78%'],
+        center: leftCenterValue,
         itemStyle: dataStyle,
         hoverAnimation: false,
         label: {
-          borderRadius: "10",
+          borderRadius: '10'
         },
         color: color[0],
         data: [
           {
             // 灰色部分数据
             value: pieValue[1],
-            name: "",
+            name: '',
             tooltip: {
-              show: false,
+              show: false
             },
-            itemStyle: placeHolderStyle,
+            itemStyle: placeHolderStyle
           },
           {
             value: pieValue[0],
-            name: "数量",
-          },
-        ],
+            name: '数量'
+          }
+        ]
       },
       {
-        name: "问题数",
-        type: "pie",
-        radius: ["54%", "62%"],
-        center: ["50%", "40%"],
+        name: '问题数',
+        type: 'pie',
+        radius: ['56%', '64%'],
+        center: leftCenterValue,
         clockWise: false,
         itemStyle: dataStyle,
         hoverAnimation: false,
@@ -179,123 +182,207 @@ onMounted(() => {
           {
             // 灰色部分数据
             value: pieValue[0],
-            name: "",
+            name: '',
             tooltip: {
-              show: false,
+              show: false
             },
-            itemStyle: placeHolderStyle,
+            itemStyle: placeHolderStyle
           },
           {
             value: pieValue[1],
-            name: "问题数",
-          },
-        ],
-      },
-    ],
+            name: '问题数'
+          }
+        ]
+      }
+    ]
   };
 
   // Set options and render left chart
   leftChart.setOption(leftOption);
 
   rightChart = echarts.init(questEchartRef.value);
+  const li_qu_legend = ['任务数', '已完成'];
+  const taskNum = 98;
+  const accomplishNum = 30;
+  const li_qu_data = [
+    {
+      name: li_qu_legend[0],
+      value: taskNum
+    },
+    {
+      name: li_qu_legend[1],
+      value: accomplishNum
+    }
+  ];
+
+  // 占比率
+  const li_qu_count: any = accomplishNum / taskNum;
 
+  const titleStyle = {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: 'rgba(0, 0, 0, 0.9)',
+    textAlign: 'center',
+    textShadowBlur: '0',
+    textShadowOffsetX: 0,
+    textShadowOffsetY: 1
+  };
+  const centerValue = ['50%', '37%']
   // Chart options for the right side (liquidFill)
   const rightOption = {
+    title: [
+      {
+        text: (li_qu_count * 100).toFixed(1) + '%',
+        subtext: '占比：',
+        x: 'center',
+        y: 'center',
+        subtextStyle: {
+          color: 'rgba(0, 0, 0, 0.6)',
+          fontSize: 14,
+          fontWeight: 'bold',
+          align: 'center',
+          lineHeight: 16 // 20
+        },
+        left: '50%',
+        top: '25%',
+        textAlign: 'center',
+        textStyle: titleStyle
+      }
+    ],
+    legend: {
+      icon: 'circle',
+      bottom: '2%',
+      itemGap: 16,
+      itemWidth: 8,
+      itemHeight: 8,
+      itemStyle: {
+        borderWidth: 2, // 4
+        borderColor: '#3AFFDE'
+      },
+      textStyle: {
+        rich: {
+          name: {
+            fontSize: 14,
+            height: 25,
+            width: 40,
+            padding: [0, 8, 0, 5],
+            color: 'rgba(0, 0, 0, 0.55)'
+          },
+          rate: {
+            fontSize: 16,
+            fontWeight: 'bold',
+            height: 35,
+            padding: [50, 8, 0, -45],
+            color: 'rgba(0, 0, 0, 0.9)'
+          }
+        }
+      },
+      data: li_qu_legend,
+      formatter: function (name: any) {
+        for (var i = 0; i < li_qu_legend.length; i++) {
+          if (name == li_qu_data[i].name) {
+            return '{name|' + name + '}{rate|' + li_qu_data[i].value + '}';
+          }
+        }
+      }
+    },
     series: [
       {
-        type: "liquidFill",
-        radius: "30%",
+        type: 'liquidFill',
+        radius: '70%',
         z: 4,
-        center: ["50%", "50%"],
+        center: centerValue,
         amplitude: 5,
         data: [0.5],
         itemStyle: {
           normal: {
-            color: "#28CE8E",
+            color: '#28CE8E',
             label: {
-              show: false,
-            },
-          },
+              show: false
+            }
+          }
         },
         backgroundStyle: {
           borderWidth: 0,
-          color: "transparent",
+          color: 'transparent'
         },
         label: {
           normal: {
-            formatter: "",
-          },
+            formatter: ''
+          }
         },
         outline: {
-          show: true,
+          show: false,
           itemStyle: {
-            borderWidth: 0,
+            borderWidth: 0
           },
-          borderDistance: 0,
-        },
+          borderDistance: 0
+        }
       },
       {
-        name: legendName[0],
-        type: "pie",
+        name: li_qu_legend[0],
+        type: 'pie',
         z: 1,
-        radius: ["0%", "31%"],
-        center: ["50%", "50%"],
+        radius: ['0%', '72%'],
+        center: centerValue,
         hoverAnimation: false,
         itemStyle: {
           normal: {
             label: {
-              show: false,
-            },
-          },
+              show: false
+            }
+          }
         },
+        color: ['#fff'],
         data: [
           {
             value: 1,
             itemStyle: {
               normal: {
-                color: "rgba(255, 255, 255, 1)",
-              },
-            },
-          },
-        ],
+                color: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          }
+        ]
       },
       {
-        name: legendName[1],
-        type: "pie",
+        name: li_qu_legend[1],
+        type: 'pie',
         z: 1,
-        radius: ["0%", "31%"],
-        center: ["50%", "50%"],
+        radius: ['0%', '72%'],
+        center: centerValue,
         hoverAnimation: false,
         itemStyle: {
           normal: {
             label: {
-              show: false,
-            },
-          },
+              show: false
+            }
+          }
         },
+        color: ['#fff'],
         data: [
           {
             value: 0,
             itemStyle: {
               normal: {
-                color: "rgba(255, 255, 255, 1)",
-              },
-            },
-          },
-        ],
-      },
-    ],
+                color: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          }
+        ]
+      }
+    ]
   };
 
   // Set options and render right chart
   rightChart.setOption(rightOption);
 
-  window.addEventListener("resize", handleResize);
+  window.addEventListener('resize', handleResize);
 });
 onBeforeUnmount(() => {
   leftChart?.dispose();
   rightChart?.dispose();
-  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('resize', handleResize);
 });
 </script>
 
diff --git a/src/views/Main/index.vue b/src/views/Main/index.vue
index 4c603e4..806e961 100644
--- a/src/views/Main/index.vue
+++ b/src/views/Main/index.vue
@@ -10,6 +10,7 @@
   <RightPanel>
     <div class="right-panel-left">
       <div class="top">
+        <MapSearch />
         <MapLayerSwitch @showChange="layerTreeChange"></MapLayerSwitch>
       </div>
       <div class="bottom">
@@ -39,6 +40,7 @@ import MapLayerSwitch from "./Map/components/LayerSwitch.vue";
 import LayerTree from "./Map/components/LayerTree.vue";
 import Map from "./Map/index.vue";
 import RegionSelect from "../RegionSelect/index.vue";
+import MapSearch from "./MapSearch/index.vue";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 defineOptions({
   name: "main",
@@ -82,5 +84,12 @@ onBeforeUnmount(() => {
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
+  .top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+  }
 }
 </style>
diff --git a/src/views/RegionSelect/index.vue b/src/views/RegionSelect/index.vue
index 5ae329a..e70322e 100644
--- a/src/views/RegionSelect/index.vue
+++ b/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-option label="广东省" value="1"></el-option>
-    </el-select>
+    <el-tree-select
+      v-model="regionValue"
+      :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">