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

1 month ago · 9fb2b8d2f2
12 changed files with 794 additions and 223 deletions
--- a/public/api/sy-map-admin/water/regionTree.json
+++ 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
+}
--- 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",
  });
 }
--- 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']
--- 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;
-}
+  line-height: 42px;
+}
--- 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;
      }
    }
--- 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 {
--- 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>
--- a/src/views/Main/MapSearch/index.vue
+++ 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>
--- 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} }]
      }
    ]
  };
--- 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>

--- 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>
--- 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">