diff --git a/src/assets/images/openIcon.png b/src/assets/images/openIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..067f6795f6a8cc7a6f0da6cbc126a4784d7ed9e3
Binary files /dev/null and b/src/assets/images/openIcon.png differ
diff --git a/src/assets/images/packUpIcon.png b/src/assets/images/packUpIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..57dce329f10dc11d1b773a32c26a0f87fe06807a
Binary files /dev/null and b/src/assets/images/packUpIcon.png differ
diff --git a/src/pages/GlobalModalServices/modals/ConstructionWaste/components/DistributionChart/index.less b/src/pages/GlobalModalServices/modals/ConstructionWaste/components/DistributionChart/index.less
index 9e22cb9b7ad45de6e81b7e2afc91358373d1e8ca..2105035f3bea8ada62faef20025fc0ef7bf28c0c 100644
--- a/src/pages/GlobalModalServices/modals/ConstructionWaste/components/DistributionChart/index.less
+++ b/src/pages/GlobalModalServices/modals/ConstructionWaste/components/DistributionChart/index.less
@@ -34,7 +34,7 @@
       }
 
       .ant-tabs-tab-active .ant-tabs-tab-btn {
-        color: #CBEDFF;
+        color: rgb(255, 255, 255) !important;
       }
 
       .ant-tabs-ink-bar {
diff --git a/src/pages/GlobalModalServices/modals/ConstructionWaste/components/StatisticsChart/index.tsx b/src/pages/GlobalModalServices/modals/ConstructionWaste/components/StatisticsChart/index.tsx
index bfa68dac18fab628d88282de1edefa47d2ddf098..faf568f9a9e6681157cae8e629b1ba4f38da1a7a 100644
--- a/src/pages/GlobalModalServices/modals/ConstructionWaste/components/StatisticsChart/index.tsx
+++ b/src/pages/GlobalModalServices/modals/ConstructionWaste/components/StatisticsChart/index.tsx
@@ -83,7 +83,12 @@ const StatisticsChart: React.FC<StatisticsChartProps> = ({ searchTime }) => {
         percentage: ((gclj / total) * 100).toFixed(2),
         color: '#77E67B',
       },
-      { name: '拆除垃圾', value: cclj,  percentage: ((cclj / total) * 100).toFixed(2), color: '#00FFB3' },
+      {
+        name: '拆除垃圾',
+        value: cclj,
+        percentage: (((cclj / total)) * 100).toFixed(2),
+        color: '#00FFB3',
+      },
     ];
   }, [charData, total]);
 
diff --git a/src/pages/GlobalModalServices/modals/LivingGarbage/PopoverCard/index.less b/src/pages/GlobalModalServices/modals/LivingGarbage/PopoverCard/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..c360ddbb27dbf37eae9ee496e9b5900374345054
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LivingGarbage/PopoverCard/index.less
@@ -0,0 +1,155 @@
+.container {
+  position: relative;
+  background: rgba(27, 124, 181, 0.2);
+  width: 382x;
+  height: 229px;
+  padding: 10px 10px;
+
+  .title {
+    font-size: 24px;
+    color: rgb(255, 255, 255);
+    font-family: DingTalk JinBuTi;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+
+    .cqiWarp {
+      display: flex;
+      align-items: center;
+
+      .cqi {
+        display: flex;
+        align-items: center;
+        font-size: 38px;
+        font-weight: 700;
+
+        .tag {
+          font-size: 14px;
+          margin-left: 10px;
+          margin-right: 10px;
+          padding: 0 5px;
+          border-radius: 5px;
+        }
+      }
+    }
+
+    .title {
+      font-size: 22px;
+      font-weight: 700;
+      color: #b3d6f7;
+      font-family: DingTalk JinBuTi;
+
+    }
+
+    .compare {
+      font-size: 18px;
+      display: flex;
+
+      .tips {
+        color: #fff;
+      }
+
+      .compareNum {
+        color: #57ef58;
+      }
+    }
+
+    .title_time {
+      color: rgb(217, 217, 217);
+      font-size: 18px;
+      font-weight: 400;
+    }
+  }
+
+
+  .fx {
+    display: flex;
+    margin-top: 30px;
+
+    .countWarp {
+      font-size: 16px;
+      color: rgb(255, 255, 255);
+      display: flex;
+      align-items: center;
+      width: 50%;
+
+      .count {
+        font-size: 24px;
+        background: linear-gradient(to bottom, rgb(170, 255, 246), rgb(37, 187, 255));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-weight: 700;
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .cardSection {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    .card {
+      width: 100px;
+      height: 76px;
+      border-radius: 14px;
+      cursor: pointer;
+      padding: 10px;
+
+      .name {
+        font-size: 18px;
+        color: #fff;
+        line-height: 1;
+        text-align: center;
+        margin-bottom: 10px;
+      }
+
+      .value {
+        font-size: 28px;
+        line-height: 1;
+        font-weight: 700;
+        font-family: D-DIN;
+        text-align: center;
+      }
+    }
+  }
+
+  .btnWarp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .checkBtn {
+      border-radius: 25px;
+      background: linear-gradient(180deg,
+          rgb(28, 192, 255),
+          rgb(82, 148, 255) 100%);
+      width: 106px;
+
+      color: rgb(255, 255, 255);
+
+      font-size: 18px;
+      text-align: center;
+      line-height: 40px;
+      margin-top: 32px;
+      cursor: pointer;
+    }
+  }
+
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/LivingGarbage/PopoverCard/index.tsx b/src/pages/GlobalModalServices/modals/LivingGarbage/PopoverCard/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d0bd26e7e8f9b7ec0c454bc192ec32c693d408c1
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/LivingGarbage/PopoverCard/index.tsx
@@ -0,0 +1,61 @@
+import { Descriptions } from 'antd';
+import React, { useMemo } from 'react';
+import styles from './index.less';
+interface PropsType {
+  data: DistrictAPI.RealtimeIndexDTO;
+}
+/** @name 气泡卡片 */
+const PopoverCard: React.FC<PropsType> = (props) => {
+  const { data } = props;
+  const items = useMemo(() => {
+    return [
+      {
+        key: '1',
+        label: '管理单位:',
+        children:data?.manageunitname,
+      },
+      {
+        key: '2',
+        label: '所在位置:',
+        children:data?.address,
+      },
+      {
+        key: '3',
+        label: '建设时间:',
+        children:data?.jcsscreatetime,
+      },
+      {
+        key: '4',
+        label: '处理能力(万吨):',
+        children:data?.czcln,
+      },
+    ];
+  }, [data]);
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{data?.czcmc || 'dadadadad'}</div>
+      <div>
+        <Descriptions
+          items={items}
+          column={1}
+          labelStyle={{
+            color: 'rgb(203, 237, 255)',
+          }}
+          contentStyle={{
+            color: '#fff',
+          }}
+        />
+      </div>
+
+      <img
+        src={require('@/assets/images/closeBtn.png')}
+        alt=""
+        className={styles.close}
+        style={{ width: 28, height: 28 }}
+        data-event-key="close"
+      />
+    </div>
+  );
+};
+
+export default PopoverCard;
diff --git a/src/pages/GlobalModalServices/modals/LivingGarbage/index.less b/src/pages/GlobalModalServices/modals/LivingGarbage/index.less
index f5a12b818ef70070f32ecb91b5238839c4fdf526..00dbf898302d2ced714e1bf6a97230c4640c0a78 100644
--- a/src/pages/GlobalModalServices/modals/LivingGarbage/index.less
+++ b/src/pages/GlobalModalServices/modals/LivingGarbage/index.less
@@ -1,8 +1,8 @@
 .container {
   display: flex;
   gap: 20px;
-//   padding: 0 20px 0 20px;
-//   padding: 20px;
+  //   padding: 0 20px 0 20px;
+  //   padding: 20px;
 
   .leftContent {
     width: 577px;
@@ -63,7 +63,7 @@
     }
 
     .disposalStatus {
-      height: 676px;
+      height: 865px;
       background: rgba(57, 122, 183, 0.2);
       border-radius: 20px;
       padding: 27px;
@@ -199,15 +199,15 @@
         }
 
         .listContent {
-          height: 370px;
+          height: 545px;
           overflow-y: auto;
-          
+
           .listItem {
             display: flex;
             align-items: center;
             margin-bottom: 15px;
             padding-left: 9px;
-  
+
             .name {
               color: rgb(228, 237, 255);
               font-family: 思源黑体;
@@ -215,13 +215,16 @@
               font-weight: 400;
               line-height: 29px;
               width: 200px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
             }
-  
+
             .progress {
               width: 165px;
               margin: 0 15px;
             }
-  
+
             .value {
               color: rgb(89, 238, 255);
               font-family: D-DIN;
@@ -248,8 +251,8 @@
       z-index: 1;
       padding: 15px;
       background: rgba(12, 60, 112, 0.7);
-      border-radius: 20px ;
-    //   backdrop-filter: blur(20px);
+      border-radius: 20px;
+      //   backdrop-filter: blur(20px);
 
       .mapTitle {
         position: absolute;
@@ -306,6 +309,42 @@
             line-height: 21px;
           }
         }
+
+        .treeTitle {
+          display: flex;
+          align-items: center;
+          width: 150px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+
+          img {
+            margin-right: 5px;
+            width: 19px;
+            height: 18px;
+
+          }
+        }
+
+        :global {
+          .ant-tree {
+            background-color: rgba(12, 60, 112, 0.135) !important;
+          }
+
+          .ant-tree .ant-tree-switcher {
+            display: none !important;
+          }
+
+          .ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner {
+            background-color: #48779d88 !important;
+            border: #99fdfa 1px solid !important;
+          }
+
+          .ant-tree-node-content-wrapper.ant-tree-node-selected,
+          .ant-tree-checkbox+span.ant-tree-node-selected {
+            background-color: rgba(12, 60, 112, 0.197) !important;
+          }
+        }
       }
 
       .collapseBtn {
@@ -324,31 +363,32 @@
         cursor: pointer;
         z-index: 3;
         transition: all 0.3s;
-        
+
         .btnText {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        
-            span {
-                color: rgb(179, 214, 247);
-                font-size: 18px;
-                font-weight: 400;
-                line-height: 24px;
-            }
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          span {
+            color: rgb(179, 214, 247);
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 24px;
+          }
         }
 
         .collapseIcon {
-            color: rgb(179, 214, 247);
-            font-size: 12px;
-            transition: all 0.3s;
+          color: rgb(179, 214, 247);
+          font-size: 12px;
+          transition: all 0.3s;
         }
 
         &.collapsed {
-            right: 0;
-            .collapseIcon {
-                transform: rotate(180deg);
-            }
+          right: 0;
+
+          .collapseIcon {
+            transform: rotate(180deg);
+          }
         }
       }
 
@@ -368,18 +408,18 @@
         background: rgba(12, 60, 112, 0.7);
         border-radius: 20px 0px 0px 20px;
         backdrop-filter: blur(20px);
-        
+
         &.collapsed {
           width: 0px;
-          
+
           .listContent {
             display: none;
           }
-          
+
           .listTitle {
             display: none;
           }
-          
+
           .collapseBtn {
             transform: rotate(180deg);
 
@@ -402,7 +442,7 @@
           align-items: center;
           padding: 0 16px;
           position: relative;
-        //   border-bottom: 1px solid rgba(67, 131, 182, 0.7);
+          //   border-bottom: 1px solid rgba(67, 131, 182, 0.7);
 
           .listTitle {
             color: #fff;
@@ -413,7 +453,7 @@
         }
 
         .listContent {
-        //   padding: 0 16px;
+          //   padding: 0 16px;
           height: calc(100% - 50px);
           overflow-y: auto;
 
@@ -427,11 +467,11 @@
             cursor: pointer;
             justify-content: space-between;
 
-            background: rgba(67, 177, 255, 0.37);
+            background: #113e73;
             border-radius: 18px;
-            
+
             &:hover {
-              background: rgba(37, 187, 255, 0.1);
+              background: #1f5e99;
             }
 
             .name {
@@ -457,8 +497,120 @@
               }
             }
           }
+
+          .itemWrap {
+
+            .item {
+              padding: 0 31px;
+              height: 60px;
+              display: flex;
+              align-items: center;
+              border-radius: 18px;
+              // padding: 10px 20px;
+              margin: 10px 20px;
+              cursor: pointer;
+              justify-content: space-between;
+
+
+
+
+              &:hover {
+                background: #1f5e99;
+              }
+
+              .name {
+                color: #E4EDFF;
+                font-size: 20px;
+                font-weight: 700;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex: 1;
+              }
+
+              .locationIcon {
+                width: 20px;
+                height: 20px;
+                cursor: pointer;
+                margin-left: 10px;
+                opacity: 0.8;
+                transition: opacity 0.3s;
+
+
+              }
+            }
+          }
+
+        }
+      }
+
+      .markWrap {
+        width: 130px;
+        height: 90px;
+        cursor: pointer;
+
+        .name {
+          width: 100%;
+          height: 40px;
+          background-color: rgb(30, 37, 84);
+          border-radius: 10px;
+          padding: 0 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+         line-height: 40px;
+        }
+
+        .iconWrap {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          margin-top: 10px;
+
+          img {
+            width: 40px;
+            height: 40px;
+          }
         }
       }
     }
   }
-} 
\ No newline at end of file
+}
+
+.window {
+  box-sizing: border-box;
+  border: 2px solid rgba(64, 146, 217, 0.95);
+  border-radius: 10px;
+  background: rgb(3, 85, 135);
+  width: 180px;
+
+  &::after {
+    position: absolute;
+    content: '';
+    /**三角形 */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: rgb(3, 85, 135) transparent transparent transparent;
+    bottom: -7px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999;
+  }
+
+  &::before {
+    position: absolute;
+    content: '';
+    /**三角形 */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: rgba(64, 146, 217, 0.95) transparent transparent transparent;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 998;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/LivingGarbage/index.tsx b/src/pages/GlobalModalServices/modals/LivingGarbage/index.tsx
index d56a3238f17df13d467bd09e2fc4a488f12b410a..8ae6b247b73f66da82075eabe524c8b69bb75093 100644
--- a/src/pages/GlobalModalServices/modals/LivingGarbage/index.tsx
+++ b/src/pages/GlobalModalServices/modals/LivingGarbage/index.tsx
@@ -1,120 +1,170 @@
-import { Progress } from 'antd';
-import ReactEcharts from 'echarts-for-react';
-import React, { useRef, useState } from 'react';
-import CooglMap from '@/components/CooglMap';
-import styles from './index.less';
 import livingGarbageIcon from '@/assets/images/livingGarbage.png';
-import livingGarbageMap1 from '@/assets/images/livingGarbageMap1.png';
-import livingGarbageMap2 from '@/assets/images/livingGarbageMap2.png';
-import { RightOutlined, EnvironmentOutlined } from '@ant-design/icons';
 import locationIcon from '@/assets/images/location.png';
+import openIcon from '@/assets/images/openIcon.png';
+import packUpIcon from '@/assets/images/packUpIcon.png';
+import CooglMap from '@/components/CooglMap';
+import services from '@/services';
+import { convertUnits } from '@/utils/ui';
+import { RightOutlined } from '@ant-design/icons';
+import { useRequest } from 'ahooks';
+import { Progress, Tree } from 'antd';
+import dayjs from 'dayjs';
+import React, { useMemo, useRef, useState } from 'react';
+import styles from './index.less';
+import PopoverCard from './PopoverCard';
 
 const LivingGarbage: React.FC = () => {
   const [isListVisible, setIsListVisible] = useState(true);
   const mapRef = useRef<any>();
+  const [expand, setExpand] = useState<number>();
+  const [areaSelectd, setAreaSelectd] = useState<any>(undefined);
+  const [checkedKeys, setCheckedKeys] = useState(['生活垃圾末端处置设施']);
+  let isUsingValue = true;
 
-  let isUsingValue = false;
-
-  // 地图配置
-//   const mapConfig = {
-//     center: [104.06, 30.67],
-//     zoom: 10,
-//     minZoom: 9,
-//     maxZoom: 18,
-//     pitch: 0,
-//   };
-
-  // 环形进度图配置
-  const getOption = () => ({
-    series: [{
-      type: 'gauge',
-      startAngle: 90,
-      endAngle: -270,
-      pointer: { show: false },
-      progress: {
-        show: true,
-        overlap: false,
-        roundCap: true,
-        clip: false,
-        itemStyle: {
-          color: '#52FF76'
-        }
+  const searchTime = {
+    startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
+    endTime: dayjs().endOf('month').format('YYYY-MM-DD'),
+  };
+
+  const { data: infoData } = useRequest(() =>
+    services.DataBase.getSjdzInfoData({
+      typeCode: 'zzcc-shlj-czzl',
+      params: {
+        ...searchTime,
       },
-      axisLine: {
-        lineStyle: {
-          width: 6,
-          color: [[1, 'rgba(191, 225, 255, 0.26)']]
-        }
+    }).then((res) => {
+      if (res.code === 200) {
+        return res?.data?.data?.records?.[0];
+      }
+      throw new Error('获取数据失败');
+    }),
+  );
+
+  const { data: burnData } = useRequest(() =>
+    services.DataBase.getSjdzInfoData({
+      typeCode: 'zzcc-shlj-gfscczl',
+      params: {
+        ...searchTime,
       },
-      splitLine: { show: false },
-      axisTick: { show: false },
-      axisLabel: { show: false },
-      data: [{ value: 78.56 }],
-      detail: { show: false }
-    }]
-  });
-
-  const disposalList = [
-    { name: isUsingValue ? '万兴环保发电二期' : '--', value: isUsingValue ? 22.33 : '--' },
-    { name: isUsingValue ? '九江环保发电厂' : '--', value: isUsingValue ? 22.33 : '--' },
-    { name: isUsingValue ? '祥福环保发电厂' : '--', value: isUsingValue ? 22.33 : '--' },
-    { name: isUsingValue ? '宝林环保发电厂' : '--', value: isUsingValue ? 22.33 : '--' },
-    { name: isUsingValue ? '隆丰环保发电厂' : '--', value: isUsingValue ? 22.33 : '--' },
-    { name: isUsingValue ? '邓双环保发电厂' : '--', value: isUsingValue ? 22.33 : '--' },
-    { name: isUsingValue ? '简阳发电厂' : '--', value: isUsingValue ? 22.33 : '--' },
-    { name: isUsingValue ? '万兴环保发电厂一期' : '--', value: isUsingValue ? 22.33 : '--' },
-    { name: isUsingValue ? '金堂环保发电厂' : '--', value: isUsingValue ? 22.33 : '--' },
-  ];
-
-  // 模拟管廊列表数据
-  const pipelineList = [
-    { name: isUsingValue ? '环保发电厂名称1' : '--', location: { x: 103.96, y: 30.658842 } },
-    { name: isUsingValue ? '环保发电厂名称1' : '--', location: { x: 103.96, y: 30.658842 } },
-    { name: isUsingValue ? '环保发电厂名称3' : '--', location: { x: 103.96, y: 30.658842 } },
-    { name: isUsingValue ? '填埋场1' : '--', location: { x: 103.96, y: 30.658842 } },
-    { name: isUsingValue ? '填埋场2' : '--', location: { x: 103.96, y: 30.658842 } },
-  ];
+    }).then((res) => {
+      if (res.code === 200) {
+        return res?.data?.data?.records;
+      }
+      throw new Error('获取数据失败');
+    }),
+  );
+
+  const { data: typeData } = useRequest(() =>
+    services.DataBase.getSjdzInfoData({
+      typeCode: 'zzcc-shlj-ljclslb',
+    }).then((res) => {
+      if (res.code === 200) {
+        return res?.data?.data?.records;
+      }
+      throw new Error('获取数据失败');
+    }),
+  );
+
+  const { data: pointData } = useRequest(() =>
+    services.DataBase.getSjdzInfoData({
+      typeCode: 'zzcc-shlj-ljcfylb',
+      params: {
+        pageNo: 0,
+        pageSize: 50,
+      },
+    }).then((res) => {
+      if (res.code === 200) {
+        return res?.data?.data?.records?.[0]?.list;
+      }
+      throw new Error('获取数据失败');
+    }),
+  );
+
+  const { runAsync: getDetails } = useRequest(
+    services.DataBase.getSjdzInfoData,
+    { manual: true },
+  );
+  const treeData = useMemo(() => {
+    setCheckedKeys(typeData?.map((item) => item?.czclx));
+    return [
+      {
+        title: '生活垃圾末端处置设施',
+        key: '生活垃圾末端处置设施',
+        children: typeData?.map((item) => ({
+          title: (
+            <div className={styles.treeTitle}>
+              <img
+                src={require('@/assets/images/livingGarbageMap2.png')}
+                alt=""
+              ></img>
+              {item?.czclx}
+            </div>
+          ),
+          key: item?.czclx,
+        })),
+      },
+    ];
+  }, [typeData]);
+
+  const leftList = useMemo(() => {
+    return typeData?.map((item) => ({
+      ...item,
+      children: pointData?.filter((it: any) => item?.czclx === it.czclx),
+    }));
+  }, [typeData, pointData]);
 
   // 定位功能
-  const handleLocation = (location: { x: number; y: number }) => {
-    mapRef.current?.setCenter([location.x, location.y]);
+  const handleLocation = async(location: { x: number; y: number }) => {
+    try {
+      const res = await getDetails({
+        typeCode: 'zzcc-shlj-ljcfylb',
+        params: {
+          czcid: location?.czcid,
+        },
+      });
+      mapRef?.current?.flyTo({
+        destination: {
+          x: Number(location?.longitude),
+          y: Number(location?.latitude),
+          z: 23961,
+        },
+        orientation:{
+          pitch: 20,
+        }
+      });
+      
+      setAreaSelectd(res?.data?.data?.records?.[0]?.list?.[0]);
+    } catch (error) {
+      console.log(error);
+    }
+   
   };
+  
 
   return (
     <div className={styles.container}>
       <div className={styles.leftContent}>
-        {/* 资源化利用率 */}
-        <div className={styles.utilizationRate}>
-          <div className={styles.title}>资源化利用率</div>
-          <div className={styles.date}>2024年12月</div>
-          <div className={styles.value}>{isUsingValue ? 78.56 : '--'}</div>
-          <span className={styles.unit}>%</span>
-          <div className={styles.chart}>
-            <ReactEcharts option={getOption()} style={{height: '55px', width: '55px'}} />
-          </div>
-        </div>
-
         {/* 生活垃圾处置情况 */}
         <div className={styles.disposalStatus}>
           <div className={styles.title}>生活垃圾处置情况</div>
-          <div className={styles.date}>2024年12月</div>
-          
+          <div className={styles.date}>{dayjs().format('YYYY年MM月')}</div>
+
           <div className={styles.totalDisposal}>
             <img src={livingGarbageIcon} alt="垃圾处理" />
             <span className={styles.label}>处置总量</span>
-            <span className={styles.value}>{isUsingValue ? 187.25 : '--'}</span>
+            <span className={styles.value}>{infoData?.total ?? '--'}</span>
             <span className={styles.unit}>万吨</span>
           </div>
 
           <div className={styles.subItems}>
             <div className={styles.item}>
               <div className={styles.label}>焚烧量</div>
-              <div className={styles.value}>{isUsingValue ? 17.25 : '--'}</div>
+              <div className={styles.value}>{infoData?.fsl ?? '--'}</div>
               <span className={styles.unit}>万吨</span>
             </div>
             <div className={styles.item}>
               <div className={styles.label}>填埋量</div>
-              <div className={styles.value}>{isUsingValue ? 156.21 : '--'}</div>
+              <div className={styles.value}>{infoData?.tml ?? '--'}</div>
               <span className={styles.unit}>万吨</span>
             </div>
           </div>
@@ -125,18 +175,26 @@ const LivingGarbage: React.FC = () => {
               <span className={styles.unit}>单位：万吨</span>
             </div>
             <div className={styles.listContent}>
-              {disposalList.map((item, index) => (
+              {burnData?.map((item: any, index: number) => (
                 <div key={index} className={styles.listItem}>
-                  <span className={styles.name}>{item.name}</span>
-                <Progress 
-                  size={{ height: 15 }}
-                  percent={Number(item.value)} 
-                  showInfo={false}
-                  trailColor="rgba(144, 205, 229, 0.22)"
-                  strokeColor={{ from: '#79FFD1', to: '#00B9FF' }}
-                  className={styles.progress}
-                />
-                <span className={styles.value}>{isUsingValue ? item.value : '--'}</span>
+                  <span className={styles.name} title={item?.name}>
+                    {item?.name}
+                  </span>
+                  <Progress
+                    size={{ height: 15 }}
+                    percent={
+                      (Number(convertUnits(item?.czl)?.num) /
+                        Number(infoData?.fsl)) *
+                      100
+                    }
+                    showInfo={false}
+                    trailColor="rgba(144, 205, 229, 0.22)"
+                    strokeColor={{ from: '#79FFD1', to: '#00B9FF' }}
+                    className={styles.progress}
+                  />
+                  <span className={styles.value}>
+                    {convertUnits(item?.czl)?.num}
+                  </span>
                 </div>
               ))}
             </div>
@@ -145,7 +203,10 @@ const LivingGarbage: React.FC = () => {
       </div>
 
       <div className={styles.rightContent}>
-        <div className={styles.mapContainer}>
+        <div
+          className={styles.mapContainer}
+          style={{ width: 1500, height: 900 }}
+        >
           <CooglMap.MapView
             ref={mapRef}
             // {...mapConfig}
@@ -153,55 +214,154 @@ const LivingGarbage: React.FC = () => {
             center={{ x: 103.96, y: 30.658842 }}
             mode="3D"
           >
+            {pointData
+              ?.filter((it) => checkedKeys?.includes(it.czclx))
+              ?.map((item) => {
+                return (
+                  <CooglMap.CustomOverlay
+                    position={[Number(item?.longitude), Number(item?.latitude)]}
+                    onClick={async () => {
+                      try {
+                        const res = await getDetails({
+                          typeCode: 'zzcc-shlj-ljcfylb',
+                          params: {
+                            czcid: item.czcid,
+                          },
+                        });
+                        console.log(res);
+                        
+                        setAreaSelectd(res?.data?.data?.records?.[0]?.list?.[0]);
+                      } catch (error) {
+                        console.log(error);
+                      }
+                    }}
+                  >
+                    <div className={styles.markWrap}>
+                      <div className={styles.name} title={item?.czcmc}>
+                        {item?.czcmc}
+                      </div>
+                      <div className={styles.iconWrap}>
+                        <img
+                          src={require('@/assets/images/livingGarbageMap2.png')}
+                          alt=""
+                        />
+                      </div>
+                    </div>
+                  </CooglMap.CustomOverlay>
+                );
+              })}
+
+            {areaSelectd && (
+              <CooglMap.CustomOverlay
+                position={[
+                  Number(areaSelectd.longitude),
+                  Number(areaSelectd.latitude),
+                ]}
+                offset={{
+                  top: -50,
+                }}
+                onClose={() => {
+                  setAreaSelectd(undefined);
+                }}
+              >
+                <div className={styles.window} style={{ width: 382 }}>
+                  <PopoverCard data={areaSelectd}></PopoverCard>
+                </div>
+              </CooglMap.CustomOverlay>
+            )}
+
             {/* 地图标题 - 移到地图内部 */}
             <div className={styles.mapTitle}>生活垃圾处置厂分布</div>
 
             <div className={styles.legend}>
               <div className={styles.legendTitle}>图层图例</div>
-              <div className={styles.legendItem}>
-                <img src={livingGarbageMap1} alt="环保发电厂" />
-                <span>环保发电厂</span>
-              </div>
-              <div className={styles.legendItem}>
-                <img src={livingGarbageMap2} alt="填埋场" />
-                <span>填埋场</span>
-              </div>
+
+              {typeData?.length ? (
+                <Tree
+                  checkable
+                  defaultExpandAll
+                  onCheck={(e: any) => {
+                    setCheckedKeys(e);
+                  }}
+                  checkedKeys={checkedKeys}
+                  treeData={treeData}
+                />
+              ) : null}
             </div>
 
-            {/* 右侧列表 */}            
-                {/* 收起按钮独立放置 */}
-            <div 
-                className={`${styles.collapseBtn} ${!isListVisible ? styles.collapsed : ''}`}
-                onClick={() => setIsListVisible(!isListVisible)}
+            {/* 右侧列表 */}
+            {/* 收起按钮独立放置 */}
+            <div
+              className={`${styles.collapseBtn} ${
+                !isListVisible ? styles.collapsed : ''
+              }`}
+              onClick={() => setIsListVisible(!isListVisible)}
             >
-                {isListVisible &&(
+              {isListVisible && (
                 <div className={styles.btnText}>
-                <span>收</span>
-                <span>起</span>
+                  <span>收</span>
+                  <span>起</span>
                 </div>
-                )}
-                <RightOutlined className={styles.collapseIcon} />
+              )}
+              <RightOutlined className={styles.collapseIcon} />
             </div>
 
-            <div className={`${styles.listContainer} ${!isListVisible ? styles.collapsed : ''}`}>
+            <div
+              className={`${styles.listContainer} ${
+                !isListVisible ? styles.collapsed : ''
+              }`}
+            >
               <div className={styles.listHeader}>
-                
                 <div className={styles.listTitle}>
                   <span>生活垃圾处置厂列表</span>
                 </div>
               </div>
+
               <div className={styles.listContent}>
-                {pipelineList.map((item, index) => (
-                  <div key={index} className={styles.listItem}>
-                    <span className={styles.name}>{item.name}</span>
-                    <img 
-                      src={locationIcon} 
-                      className={styles.locationIcon} 
-                      onClick={() => handleLocation(item.location)}
-                      alt="定位"
-                    />
-                  </div>
-                ))}
+                {leftList?.map((item, index) => {
+                  return (
+                    <div key={index}>
+                      <div
+                        className={styles.listItem}
+                        onClick={() => {
+                          if (expand === item?.czclx) {
+                            setExpand(undefined);
+                            return;
+                          }
+
+                          setExpand(item?.czclx);
+                        }}
+                      >
+                        <span className={styles.name}> {item?.czclx}{`(${item?.children?.length})`}</span>
+                        <img
+                          src={expand === item?.czclx ? packUpIcon : openIcon}
+                          className={styles.locationIcon}
+                          alt="定位"
+                        />
+                      </div>
+                      {expand === item?.czclx && (
+                        <div className={styles.itemWrap}>
+                          {item?.children?.map((it, index) => (
+                            <div
+                              key={index}
+                              className={styles.item}
+                              onClick={() => handleLocation(it)}
+                            >
+                              <span className={styles.name} title={it?.czcmz}>
+                                {it?.czcmc}
+                              </span>
+                              <img
+                                src={locationIcon}
+                                className={styles.locationIcon}
+                                alt="定位"
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
             </div>
           </CooglMap.MapView>
@@ -211,4 +371,4 @@ const LivingGarbage: React.FC = () => {
   );
 };
 
-export default LivingGarbage; 
\ No newline at end of file
+export default LivingGarbage;
diff --git a/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCard/index.less b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCard/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..3ef9edaf36ceebbdf78a0251be198c3adb38d4b2
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCard/index.less
@@ -0,0 +1,133 @@
+.container {
+  position: relative;
+  height: 278px;
+  width: 463px;
+  z-index: 1;
+
+  .bg {
+    content: '';
+    position: absolute;
+    inset: 0;
+    -webkit-backdrop-filter: blur(10px);
+    z-index: 0;
+    border-radius: 15px;
+    backdrop-filter: blur(10px);
+    background-color: rgba(27, 124, 181, 0.8);
+  }
+
+  .close {
+    position: absolute;
+    right: 10px;
+    z-index: 1;
+    top: 10px;
+  }
+
+  .topBox {
+    height: 116px;
+    border-radius: 15px 15px 0px 0px;
+    background: rgba(9, 195, 92, 0.8);
+    z-index: 1;
+    padding: 15px 18px;
+    position: relative;
+  }
+
+  .bottomBox {
+    height: 162px;
+    position: relative;
+    padding: 15px 18px;
+    font-size: 16px;
+    font-weight: 400;
+    z-index: 1;
+  }
+
+  .flex {
+    flex-direction: row;
+    display: flex;
+    align-items: center;
+  }
+
+  .leftBox_title {
+    color: rgb(255, 255, 255);
+    font-family: DingTalk JinBuTi;
+    font-size: 28px;
+  }
+
+  .leftBox_cqi {
+    color: rgb(255, 255, 255);
+
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  .leftBox_value {
+    font-family: D-DIN;
+    font-size: 38px;
+    margin-left: 13px;
+    margin-right: 8px;
+    line-height: 1;
+    color: rgb(255, 255, 255);
+  }
+
+  .leftBox_status {
+    color: rgb(217, 217, 217);
+    font-size: 16px;
+  }
+
+  .checkBtn {
+    border-radius: 25px;
+    background: linear-gradient(
+      180deg,
+      rgb(28, 192, 255),
+      rgb(82, 148, 255) 100%
+    );
+    width: 106px;
+
+    color: rgb(255, 255, 255);
+
+    font-size: 16px;
+    text-align: center;
+    line-height: 40px;
+
+    cursor: pointer;
+    // align-items: center;
+    margin: 0 auto;
+    margin-top: 10px;
+  }
+
+  .rightValue {
+    color: rgb(9, 195, 92);
+    font-family: D-DIN;
+    font-size: 28px;
+  }
+}
+
+.info {
+  flex-direction: row;
+  display: flex;
+  gap: 48px;
+}
+
+.item {
+}
+
+.value {
+  color: rgb(155, 255, 252);
+  font-family: D-DIN;
+  font-size: 34px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.infoFlex {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.status {
+  display: flex;
+  margin-left: 22px;
+  flex-direction: row;
+  align-items: center;
+}
diff --git a/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCard/index.tsx b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCard/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..62d2fcd6c2f547eb445eabc65d214b255af280d1
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCard/index.tsx
@@ -0,0 +1,80 @@
+import { getCqiStatusTexts } from '@/utils/ui';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import React from 'react';
+import styles from './index.less';
+
+interface PropsType {
+  data: DistrictAPI.RealtimeIndexDTO;
+}
+/** @name 气泡卡片 */
+const PopoverCard: React.FC<PropsType> = (props) => {
+  const { data } = props;
+  return (
+    <div className={styles.container}>
+      <div className={styles.bg}></div>
+      <div className={styles.topBox}>
+        <div className={styles.leftBox_title}>{data.objectName}</div>
+        <div className={styles.flex}>
+          <div className={styles.leftBox_cqi}>实时CQI</div>
+          <div className={styles.leftBox_value}>
+            {Number(data?.qualitySign)}
+          </div>
+          <div className={styles.leftBox_status}>
+            {getCqiStatusTexts(Number(data?.qualitySign))?.desc}
+          </div>
+          <div className={styles.status}>
+            <div>较5分钟前</div>
+            {data.status === 'up' ? (
+              <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
+            ) : (
+              <CaretDownOutlined style={{ color: 'rgb(255, 71, 71)' }} />
+            )}
+            <div
+              className={styles.rightValue}
+              style={{
+                color:
+                  data?.status === 'up'
+                    ? 'rgb(9, 195, 92)'
+                    : 'rgb(255, 71, 71)',
+              }}
+            >
+              {data?.diffValue ?? 0}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.bottomBox}>
+        <div className={styles.info}>
+          <div className={styles.item}>
+            <div className={styles.infoFlex}>
+              <div className={styles.value}>{data?.eventCount ?? 0}</div>
+              <div>件</div>
+            </div>
+            <div>当前问题总数</div>
+          </div>
+          <div>
+            <div className={styles.infoFlex}>
+              <div className={styles.value}>0</div>
+              <div>件</div>
+            </div>
+            <div>安全风险</div>
+          </div>
+        </div>
+
+        <div className={styles.checkBtn} data-event-key="detail">
+          查看详情
+        </div>
+      </div>
+
+      <div data-event-key="close" className={styles.close}>
+        <img
+          src={require('@/assets/images/closeBtn.png')}
+          alt=""
+          style={{ width: 28, height: 28 }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PopoverCard;
diff --git a/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardKnotty/index.less b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardKnotty/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..59cbabaa061a1a5d17b00ce310087e08d36c8e00
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardKnotty/index.less
@@ -0,0 +1,89 @@
+.container {
+  position: relative;
+  background: rgba(27, 124, 181, 0.2);
+  width: 453px;
+  height: 406px;
+padding: 10px 10px;
+  .title {
+    font-size: 24px;
+    color: rgb(255, 255, 255);
+    font-family: DingTalk JinBuTi;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+.imgWarp{
+  position: relative;
+  .img {
+    margin-top: 20px;
+    width: 100%;
+    height: 177px;
+    border-radius: 10px;
+  }
+  .tag {
+    position: absolute;
+    left:10px;
+    bottom: 10px;
+    display: inline-block;
+    width: 83px;
+    height: 24px;
+    border-radius: 12px;
+    background: linear-gradient(180deg,
+        rgba(26, 66, 110, 0),
+        rgb(122, 94, 111) 100%);
+    color: #ff7a7a;
+    text-align: center;
+    font-size: 16px;
+    line-height: 23px;
+    margin: 0 10px 0 20px;
+    background-size: 100% 100%;
+  }
+  .tag1{
+    position: absolute;
+    left:10px;
+    bottom: 10px;
+    display: inline-block;
+   padding: 0 5px;
+    height: 24px;
+    border-radius: 12px;
+    background:  rgba(26, 67, 110, 0.419);
+
+    text-align: center;
+    font-size: 16px;
+    line-height: 23px;
+    margin: 0 10px 0 20px;
+    background-size: 100% 100%;
+  }
+}
+ .btnWarp{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .checkBtn {
+    border-radius: 25px;
+    background: linear-gradient(180deg,
+        rgb(28, 192, 255),
+        rgb(82, 148, 255) 100%);
+    width: 106px;
+  
+    color: rgb(255, 255, 255);
+  
+    font-size: 18px;
+    text-align: center;
+    line-height: 40px;
+    margin-top: 20px;
+    cursor: pointer;
+  }
+ }
+
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardKnotty/index.tsx b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardKnotty/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f47b57b15d91993706b8ced4f02733257a4285f4
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardKnotty/index.tsx
@@ -0,0 +1,115 @@
+import blueBg from '@/assets/images/SecurityServiceOverview/right/blueBg.png';
+import orangeBg from '@/assets/images/SecurityServiceOverview/right/orangeBg.png';
+import redBg from '@/assets/images/SecurityServiceOverview/right/redBg.png';
+import yellowBg from '@/assets/images/SecurityServiceOverview/right/yellowBg.png';
+import LabelImgText from '@/components/LabelImgText';
+import { joinPictureHttp } from '@/utils/comm';
+import React, { CSSProperties } from 'react';
+import styles from './index.less';
+interface PropsType {
+  data: DistrictAPI.RealtimeIndexDTO;
+}
+/** @name 气泡卡片 */
+const PopoverCardKnotty: React.FC<PropsType> = (props) => {
+  const { data } = props;
+  const colorConfig: Record<
+    string,
+    {
+      color: CSSProperties['color'];
+      bg: string;
+      icon: string;
+    }
+  > = {
+    红色风险: {
+      //红色风险
+      color: '#FFBCBC',
+      bg: redBg,
+      icon: 'redIcon',
+    },
+    橙色风险: {
+      //橙色风险
+      color: '#FDDFCE',
+      bg: orangeBg,
+      icon: 'orangeIcon',
+    },
+    黄色风险: {
+      //黄色风险
+      color: '#FFE892',
+      bg: yellowBg,
+      icon: 'yellowIcon',
+    },
+    一般风险: {
+      //一般风险
+      color: '#BFE4FF',
+      bg: blueBg,
+      icon: 'blueIcon',
+    },
+  };
+  console.log(data);
+  const valueStyle = {
+    color: '#fff',
+    fontSize: 16,
+  };
+  const labelStyle = {
+    color: '#CBEDFF',
+    fontSize: 16,
+  };
+  return (
+    <div className={styles.container}>
+      <div className={styles.title} title={data?.standardEventTitle}>
+        {data?.standardEventTitle || '道路交通设施'}
+      </div>
+      <div className={styles.imgWarp}>
+        <img
+          src={
+            joinPictureHttp(data?.disposePicPath) ||
+            joinPictureHttp(
+              '/xindu/2024/12/13/191814240892473fb01eb4a444eb2470_2e779a59f7fd57c98dc957ef0479623.jpg',
+            )
+          }
+          alt=""
+          className={styles.img}
+        />
+        {/* <div
+          className={styles.tag}
+          style={{
+            backgroundImage: `url(${colorConfig[data?.risklevel]?.bg})`,
+            color: colorConfig[data?.risklevel]?.color,
+          }}
+        >
+          {data?.risklevel}
+        </div> */}
+        <div className={styles.tag1}>{data?.caseStatusText}</div>
+      </div>
+      <div style={{ marginTop: 20 }}>
+        <LabelImgText
+          label={'上报时间：'}
+          value={data?.reportTime || '2024-05-28 10:20:20'}
+          valueStyle={valueStyle}
+          labelStyle={labelStyle}
+        />
+        <LabelImgText
+          label={'发生位置：'}
+          value={data?.address || '锦江区牛市口街道办'}
+          valueStyle={valueStyle}
+          labelStyle={labelStyle}
+        />
+      </div>
+      <div className={styles.btnWarp}>
+        <div className={styles.checkBtn} data-event-key="detail">
+          查看详情
+        </div>
+      </div>
+
+      <img
+        src={require('@/assets/images/closeBtn.png')}
+        alt=""
+        className={styles.close}
+        style={{ width: 28, height: 28 }}
+        data-event-key="close"
+      />
+    </div>
+  );
+};
+
+export default PopoverCardKnotty;
diff --git a/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardWarn/index.less b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardWarn/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..81b84616e914ed5b4b93a9e1654cefa64948d936
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardWarn/index.less
@@ -0,0 +1,92 @@
+.container {
+  position: relative;
+  background: rgba(27, 124, 181, 0.2);
+  width: 453px;
+  height: 406px;
+  padding: 10px 10px;
+
+  .title {
+    font-size: 24px;
+    color: rgb(255, 255, 255);
+    font-family: DingTalk JinBuTi;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .imgWarp {
+    position: relative;
+
+    .img {
+      margin-top: 20px;
+      width: 100%;
+      height: 177px;
+      border-radius: 10px;
+    }
+
+    .tag {
+      position: absolute;
+      left: 10px;
+      bottom: 14px;
+      display: inline-block;
+      width: 83px;
+      height: 24px;
+      border-radius: 12px;
+     
+      text-align: center;
+      font-size: 16px;
+      line-height: 23px;
+      margin: 0 10px 0 20px;
+      background-size: 100% 100%;
+    }
+
+    .tag1 {
+      position: absolute;
+      left: 100px;
+      bottom: 10px;
+      display: inline-block;
+      width: 83px;
+      height: 24px;
+      border-radius: 12px;
+      background: rgba(26, 66, 110, 0.3);
+
+      text-align: center;
+      font-size: 16px;
+      line-height: 23px;
+      margin: 0 10px 0 20px;
+      background-size: 100% 100%;
+    }
+  }
+
+  .btnWarp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .checkBtn {
+      border-radius: 25px;
+      background: linear-gradient(180deg,
+          rgb(28, 192, 255),
+          rgb(82, 148, 255) 100%);
+      width: 106px;
+
+      color: rgb(255, 255, 255);
+
+      font-size: 18px;
+      text-align: center;
+      line-height: 40px;
+      margin-top: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardWarn/index.tsx b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardWarn/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c19a4f43c9adca906ff47a9a1f041b1d216af1c
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/DistrictMap/PopoverCardWarn/index.tsx
@@ -0,0 +1,70 @@
+import blueBg from '@/assets/images/SecurityServiceOverview/right/blueBg.png';
+import orangeBg from '@/assets/images/SecurityServiceOverview/right/orangeBg.png';
+import redBg from '@/assets/images/SecurityServiceOverview/right/redBg.png';
+import yellowBg from '@/assets/images/SecurityServiceOverview/right/yellowBg.png';
+import LabelImgText from '@/components/LabelImgText';
+import React, { CSSProperties } from 'react';
+import styles from './index.less';
+import { colorConfig } from '..';
+interface PropsType {
+  data: DistrictAPI.RealtimeIndexDTO;
+}
+/** @name 气泡卡片 */
+const PopoverCardWarn: React.FC<PropsType> = (props) => {
+  const { data } = props;
+ 
+  console.log(data);
+  const valueStyle = {
+    color: '#fff',
+    fontSize: 16,
+  };
+  const labelStyle = {
+    color: '#CBEDFF',
+    fontSize: 16,
+  };
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{data?.riskdescription}</div>
+      <div className={styles.imgWarp}>
+        <img src={data?.photosZWW} alt="" className={styles.img} />
+        <div className={styles.tag}>
+          <img
+            src={colorConfig[data?.risklevel!]?.tag}
+            alt=""
+            style={{ width: 83, height: 30,  }}
+          />
+        </div>
+        <div className={styles.tag1}>{data?.status}</div>
+      </div>
+      <div style={{ marginTop: 20 }}>
+        <LabelImgText
+          label={'预警时间：'}
+          value={data?.risktime}
+          valueStyle={valueStyle}
+          labelStyle={labelStyle}
+        />
+        <LabelImgText
+          label={'预警地点：'}
+          value={data?.region_name}
+          valueStyle={valueStyle}
+          labelStyle={labelStyle}
+        />
+      </div>
+      <div className={styles.btnWarp}>
+        <div className={styles.checkBtn} data-event-key="detail">
+          查看详情
+        </div>
+      </div>
+
+      <img
+        src={require('@/assets/images/closeBtn.png')}
+        alt=""
+        className={styles.close}
+        style={{ width: 28, height: 28 }}
+        data-event-key="close"
+      />
+    </div>
+  );
+};
+
+export default PopoverCardWarn;
diff --git a/src/pages/NewHome/MapCantainer/DistrictMap/index.less b/src/pages/NewHome/MapCantainer/DistrictMap/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..81725b186fe989a1a9e41fa0af653943e9b96d5d
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/DistrictMap/index.less
@@ -0,0 +1,284 @@
+.container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+}
+
+.districtName {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 12px 30px;
+  border-radius: 20px 0px 20px 0px;
+  background: rgba(23, 125, 186, 0.9);
+  color: rgb(255, 255, 255);
+  font-family: DingTalk JinBuTi;
+  font-size: 30px;
+  line-height: 1;
+}
+
+.statusBar {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  // width: 625px;
+}
+
+.leftWarp {
+  position: absolute;
+  left: 20px;
+  top: 100px;
+  width: 222px;
+  height: 433px;
+
+  border-radius: 20px;
+  padding: 16px 25px;
+
+  .menuBg {
+    background: rgba(12, 60, 112, 0.7);
+    border-radius: 20px;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+    background: rgba(12, 60, 112, 0.7);
+    position: absolute;
+    inset: 0;
+    z-index: 100;
+  }
+
+  .warnWarp {
+    .warnItem {
+      width: 100%;
+      height: 70px;
+      border-radius: 6px;
+      padding: 0 24px 0 70px;
+      color: var(--color);
+      margin-bottom: 20px;
+      position: relative;
+
+      .icon {
+        width: 100px;
+        position: absolute;
+        top: -25px;
+        left: -24px;
+      }
+
+      .title {
+        font-size: 18px;
+        font-family: DingTalk JinBuTi;
+      }
+
+      .address {
+        width: 110px;
+        font-size: 14px;
+      }
+
+      .time {
+        font-size: 14px;
+        width: 70px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .eventWarp {
+    position: relative;
+    z-index: 1000;
+
+    .title {
+      color: rgb(228, 237, 255);
+      text-align: center;
+      font-size: 24px;
+      font-family: DingTalk JinBuTi;
+    }
+
+    .listWarp {
+      margin-top: 20px;
+      height: 340px;
+      overflow: auto;
+
+      .items {
+        width: 167px;
+        height: 97px;
+        border-radius: 10px;
+        background-color: #48779d;
+        position: relative;
+        margin-bottom: 20px;
+
+        .img {
+          width: 167px;
+          height: 97px;
+          border-radius: 10px;
+          object-fit: cover;
+        }
+
+        .bottomWarp {
+          position: absolute;
+          bottom: 0;
+          height: 32px;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: rgba(0, 0, 0, 0.5);
+          font-size: 18px;
+          border-radius: 0px 0px 10px 10px;
+        }
+
+        .time {
+          position: absolute;
+          top: 10px;
+          right: 10px;
+          height: 32px;
+          background-color: rgba(0, 0, 0, 0.5);
+          border-radius: 10px;
+          height: 28px;
+          padding: 0 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+
+    .otherWarp {
+      display: flex;
+      justify-content: center;
+
+      .other {
+        width: 60px;
+        height: 27px;
+        border-radius: 20px;
+        background-color: rgba(22, 134, 255, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+
+.mark {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.mapController {
+  position: absolute;
+  right: 30px;
+  bottom: 30px;
+
+  z-index: 100;
+
+  > div {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+
+    background: rgb(0, 71, 113);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    cursor: pointer;
+    color: #a8cde8;
+    margin-top: 10px;
+  }
+}
+
+.indexMarker {
+  width: 44px;
+  height: 44px;
+  box-sizing: border-box;
+  border: 3px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+  background: var(--bg-color);
+  border-radius: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: D-DIN;
+  color: var(--color);
+}
+
+.window {
+  box-sizing: border-box;
+  border: 2px solid rgba(64, 146, 217, 0.95);
+  border-radius: 10px;
+  background: rgb(3, 85, 135);
+  width: 460px;
+
+  &::after {
+    position: absolute;
+    content: '';
+    /**三角形 */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: rgb(3, 85, 135) transparent transparent transparent;
+    bottom: -7px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999;
+  }
+}
+.window1 {
+  box-sizing: border-box;
+
+  &::after {
+    position: absolute;
+    content: '';
+    /**三角形 */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: rgb(3, 85, 135) transparent transparent transparent;
+    bottom: -7px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999;
+  }
+}
+.modalTitle {
+  .title {
+    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(181, 229, 255));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-family: DingTalk JinBuTi;
+    font-size: 30px;
+    margin-left: -10px;
+  }
+
+  .tag {
+    display: inline-block;
+    width: 83px;
+    height: 24px;
+    border-radius: 12px;
+    background: linear-gradient(
+      180deg,
+      rgba(26, 66, 110, 0),
+      rgb(122, 94, 111) 100%
+    );
+    color: #ff7a7a;
+    text-align: center;
+    font-size: 16px;
+    line-height: 23px;
+    margin: 0 10px 0 20px;
+    background-size: 100% 100%;
+  }
+
+  .type {
+    font-size: 16px;
+    color: #bccee9;
+  }
+}
diff --git a/src/pages/NewHome/MapCantainer/DistrictMap/index.tsx b/src/pages/NewHome/MapCantainer/DistrictMap/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f8bd0a44e13e92a24fe7c6f8b279d8da77adfd63
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/DistrictMap/index.tsx
@@ -0,0 +1,379 @@
+import blueBg from '@/assets/images/SecurityServiceOverview/right/blueBg.png';
+import orangeBg from '@/assets/images/SecurityServiceOverview/right/orangeBg.png';
+import redBg from '@/assets/images/SecurityServiceOverview/right/redBg.png';
+import yellowBg from '@/assets/images/SecurityServiceOverview/right/yellowBg.png';
+import risk1 from '@/assets/images/urbanSituation/risk1.svg';
+import risk2 from '@/assets/images/urbanSituation/risk2.svg';
+import risk3 from '@/assets/images/urbanSituation/risk3.svg';
+import risk4 from '@/assets/images/urbanSituation/risk4.svg';
+
+import CooglMap from '@/components/CooglMap';
+import Modal from '@/components/HncyModal';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
+import services from '@/services';
+import { smoothScrollTo } from '@/utils';
+import BMapService from '@/utils/mapService';
+import { getColorByIndex } from '@/utils/ui';
+import { IMG_URL } from '@/utils/variables';
+import { useModel, useRequest } from '@umijs/max';
+import { Flex } from 'antd';
+import dayjs from 'dayjs';
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+
+import Apps from '../components/Apps';
+import LeftTab from '../components/LeftTab';
+import RiskIssue from '../RiskIssue';
+import styles from './index.less';
+import PopoverCard from './PopoverCard';
+import BaseInfo from '@/pages/SecurityServiceOverview/components/BaseInfo';
+export const colorConfig: Record<
+  string,
+  {
+    color: CSSProperties['color'];
+    bg: string;
+    icon: string;
+    bigIcon: string;
+    tag: string;
+  }
+> = {
+  红色预警: {
+    //红色风险
+    color: '#FFBCBC',
+    bg: redBg,
+    icon: risk1,
+    bigIcon: 'redIcon',
+    tag: require('@/assets/images/SecurityServiceOverview/dtyjtag1.png'),
+  },
+  橙色预警: {
+    //橙色风险
+    color: '#FDDFCE',
+    bg: orangeBg,
+    icon: risk2,
+    bigIcon: 'orangeIcon',
+    tag: require('@/assets/images/SecurityServiceOverview/dtyjtag2.png'),
+  },
+  黄色预警: {
+    //黄色风险
+    color: '#FFE892',
+    bg: yellowBg,
+    icon: risk3,
+    bigIcon: 'yellowIcon',
+    tag: require('@/assets/images/SecurityServiceOverview/dtyjtag3.png'),
+  },
+  一般预警: {
+    //一般风险
+    color: '#BFE4FF',
+    bg: blueBg,
+    icon: risk4,
+    bigIcon: 'blueIcon',
+    tag: require('@/assets/images/SecurityServiceOverview/dtyjtag4.png'),
+  },
+};
+/** 地图 */
+const DistrictMap: React.FC = () => {
+  const { initialState } = useModel('@@initialState');
+  const { areaId } = initialState;
+  const { dispatch } = useGlobalModalServices();
+  const [playingStatus, setPlayingStatus] = useState(true);
+  //区域选择
+  const [selected, setSelected] = useState<any>();
+
+  const [checkedKeys, setCheckedKeys] = useState([
+    // '安全风险',
+    // '红色预警',
+    // '橙色预警',
+    // '黄色预警',
+    // '一般预警',
+    '城市问题',
+    '其他问题',
+    '突出问题',
+  ]);
+  const MapRef = useRef<any>();
+
+  const eventHtmlRef = useRef<HTMLDivElement>(null);
+  const { indexs } = useModel('regionalIndex', (store) => ({
+    indexs: store.indexs,
+  }));
+
+  // 预警事件详情弹窗
+  const [detailModalOpt, setDetailModalOpt] = useState<any>({
+    open: false,
+    title: '',
+    eventId: '',
+  });
+
+  const [leftTabKey, setLeftTabKey] = useState('1');
+  const [data, setData] = useState<any[]>([]);
+  const [eventData, setEventData] = useState<any[]>([]);
+
+  useEffect(() => {
+    services.Physicalsign.getObjectPolygon({
+      physicalSignType: 1,
+      objectHierarchy: 1,
+      // objectId: '510107',
+    }).then((res) => {
+      setData(res.data);
+    });
+
+    //最新事件
+    services.CityProblemApi.getUpToDateEvent({
+      page: 1,
+      count: 10,
+    }).then((res: any) => {
+      console.log('getUpToDateEvent', res);
+      if (res.code === 200) {
+        setEventData(res.data?.items);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    let intervalId!: NodeJS.Timeout;
+    if (!eventHtmlRef.current) {
+      return;
+    }
+    const viewBoxH = eventHtmlRef.current?.clientHeight;
+    const childrenMaxH = (eventHtmlRef.current?.firstChild as HTMLImageElement)
+      ?.clientHeight;
+
+    // 进度条速度
+    const speed = 15;
+    if (playingStatus) {
+      // 开始计时任务
+      intervalId = setInterval(() => {
+        if (!eventHtmlRef.current) {
+          clearInterval(intervalId);
+        }
+
+        if (
+          (eventHtmlRef.current as HTMLDivElement)?.scrollHeight - viewBoxH <=
+          (eventHtmlRef.current as HTMLDivElement)?.scrollTop
+        ) {
+          eventHtmlRef.current?.scrollTo({ top: 0, behavior: 'instant' });
+          return;
+        }
+
+        smoothScrollTo(eventHtmlRef.current as HTMLDivElement, 300, speed);
+      }, 300);
+    } else {
+      // 清除定时器
+      clearInterval(intervalId);
+    }
+    // 在组件卸载时清除定时器
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [playingStatus]);
+
+  const { data: signData } = useRequest(() =>
+    services.districtController.getListIndexInstance({
+      physicalSignType: '1',
+      indexType: '1',
+      indexId: '',
+      objectId: areaId,
+      indexHierarchy: '1',
+      objectHierarchy: '1',
+    }),
+  );
+
+  /** 标题渲染 */
+  const titleRender = () => {
+    return (
+      <Flex align="center" className={styles.modalTitle}>
+        <div className={styles.title}>{detailModalOpt?.riskdescription}</div>
+        <img
+          src={colorConfig[detailModalOpt?.riskLevelName!]?.tag}
+          alt=""
+          style={{ width: 136, height: 30, marginLeft: 36, marginRight: 13 }}
+        />
+
+        <span className={styles.type}>
+          {detailModalOpt?.industry_name_dl}-{detailModalOpt?.name}
+        </span>
+      </Flex>
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <CooglMap.MapView
+        zoom={8}
+        ref={MapRef}
+        center={{ x: 103.96, y: 30.658842 }}
+      >
+        {leftTabKey === '1' ? (
+          <>
+            {/**区域 */}
+            {data?.map((item, index) => {
+              return item?.multiPoints?.map((it: any, idx: number) => {
+                return (
+                  <CooglMap.Polygon
+                    fillColor={getColorByIndex(Number(item.qualitySign))!}
+                    key={idx}
+                    strokeColor="#fff"
+                    points={it}
+                    strokeWidth={2}
+                    fillOpacity={0.2}
+                  ></CooglMap.Polygon>
+                );
+              });
+            })}
+            {data?.map((item, index) => {
+              const point = [Number(item.centerX), Number(item.centerY)];
+
+              return (
+                <CooglMap.CustomOverlay
+                  key={index}
+                  position={point}
+                  onSet={() => {
+                    const obj = signData?.find(
+                      (signItem: any) => item.objectId === signItem?.objectId,
+                    );
+                    setSelected({
+                      ...item,
+                      eventCount: obj?.eventCount,
+                      diffValue: obj?.diffValue,
+                      desc: obj?.desc,
+                    });
+                  }}
+                >
+                  <div
+                    data-event-key="set"
+                    className={styles.indexMarker}
+                    style={
+                      BMapService.getMakerCSS(
+                        Number(item.qualitySign),
+                      ) as CSSProperties
+                    }
+                  >
+                    {Number(item.qualitySign)}
+                  </div>
+                </CooglMap.CustomOverlay>
+              );
+            })}
+            {selected && (
+              <CooglMap.CustomOverlay
+                position={[Number(selected.centerX), Number(selected.centerY)]}
+                offset={{
+                  top: -50,
+                }}
+                onClose={(e) => {
+                  setSelected(undefined);
+                }}
+                onDetail={(e) => {
+                  dispatch.push('districtIndex', {
+                    title: selected?.objectName + '运行情况',
+                    props: {
+                      data: selected,
+                      indexs: indexs,
+                    },
+                  });
+                }}
+              >
+                <div className={styles.window1}>
+                  <PopoverCard data={selected}></PopoverCard>
+                </div>
+              </CooglMap.CustomOverlay>
+            )}
+          </>
+        ) : (
+          <RiskIssue
+            checkedKeys={checkedKeys}
+            // setModalOpt={setModalOpt}
+            setDetailModalOpt={setDetailModalOpt}
+          />
+        )}
+      </CooglMap.MapView>
+
+      <div className={styles.statusBar}>
+        <LeftTab
+          leftTabKey={leftTabKey}
+          checkedKeys={checkedKeys}
+          setLeftTabKey={setLeftTabKey}
+          setCheckedKeys={setCheckedKeys}
+        />
+        <Apps></Apps>
+      </div>
+      <div className={styles.leftWarp}>
+        <div className={styles.menuBg}></div>
+
+        <div className={styles.eventWarp}>
+          <div className={styles.title}>最新事件</div>
+          <div
+            className={styles.listWarp}
+            ref={eventHtmlRef}
+            onMouseMove={() => {
+              setPlayingStatus(false);
+            }}
+            onMouseLeave={() => {
+              setPlayingStatus(true);
+            }}
+          >
+            {eventData?.map((item, index) => {
+              return (
+                <div
+                  key={'event_' + item?.eventId}
+                  className={styles.items}
+                  onClick={() => {
+                    dispatch.push('EventDetail', {
+                      title: '事件详情',
+                      w: 'fit-content',
+                      props: {
+                        eventId: item?.eventId,
+                      },
+                    });
+                  }}
+                >
+                  <img
+                    src={IMG_URL + item?.disposePicPath}
+                    alt=""
+                    className={styles.img}
+                  />
+                  <div className={styles.bottomWarp}>{item?.mainTypeName}</div>
+                  <div className={styles.time}>
+                    {dayjs(item?.reportTime).format('YYYY-MM-DD')}
+                  </div>
+                  {/* <div className={styles.time}>{item?.reportTime}分钟前</div> */}
+                </div>
+              );
+            })}
+          </div>
+          {/* <div className={styles.otherWarp}>
+            <div className={styles.other}>更多</div>
+          </div> */}
+        </div>
+      </div>
+      {/* 风险事件详情 */}
+      <Modal
+        open={detailModalOpt?.open}
+        titleRender={titleRender}
+        onCancel={() => {
+          setDetailModalOpt({
+            open: false,
+            title: '事件详情',
+            eventId: '',
+          });
+        }}
+        width={2650}
+        height={900}
+      >
+        {detailModalOpt?.open && (
+          <BaseInfo
+            eventId={detailModalOpt?.eventId}
+            detail={detailModalOpt}
+            onChangeOpt={(val) => {
+              setDetailModalOpt({
+                ...detailModalOpt,
+                position: val?.region_name,
+
+                riskLevelName: val?.risklevel,
+              });
+            }}
+          />
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default DistrictMap;
diff --git a/src/pages/NewHome/MapCantainer/EmphasisAreaMap/PopoverCardArea/index.less b/src/pages/NewHome/MapCantainer/EmphasisAreaMap/PopoverCardArea/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..0a48a14479fe26b6be2d176c912fb05cc9d184d6
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/EmphasisAreaMap/PopoverCardArea/index.less
@@ -0,0 +1,155 @@
+.container {
+  position: relative;
+  background: rgba(27, 124, 181, 0.2);
+  width: 553px;
+  height: 406px;
+  padding: 10px 10px;
+
+  .title {
+    font-size: 24px;
+    color: rgb(255, 255, 255);
+    font-family: DingTalk JinBuTi;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+
+    .cqiWarp {
+      display: flex;
+      align-items: center;
+
+      .cqi {
+        display: flex;
+        align-items: center;
+        font-size: 38px;
+        font-weight: 700;
+
+        .tag {
+          font-size: 14px;
+          margin-left: 10px;
+          margin-right: 10px;
+          padding: 0 5px;
+          border-radius: 5px;
+        }
+      }
+    }
+
+    .title {
+      font-size: 22px;
+      font-weight: 700;
+      color: #b3d6f7;
+      font-family: DingTalk JinBuTi;
+
+    }
+
+    .compare {
+      font-size: 18px;
+      display: flex;
+
+      .tips {
+        color: #fff;
+      }
+
+      .compareNum {
+        color: #57ef58;
+      }
+    }
+
+    .title_time {
+      color: rgb(217, 217, 217);
+      font-size: 18px;
+      font-weight: 400;
+    }
+  }
+
+
+  .fx {
+    display: flex;
+    margin-top: 30px;
+
+    .countWarp {
+      font-size: 16px;
+      color: rgb(255, 255, 255);
+      display: flex;
+      align-items: center;
+      width: 50%;
+
+      .count {
+        font-size: 24px;
+        background: linear-gradient(to bottom, rgb(170, 255, 246), rgb(37, 187, 255));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-weight: 700;
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .cardSection {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    .card {
+      width: 100px;
+      height: 76px;
+      border-radius: 14px;
+      cursor: pointer;
+      padding: 10px;
+
+      .name {
+        font-size: 18px;
+        color: #fff;
+        line-height: 1;
+        text-align: center;
+        margin-bottom: 10px;
+      }
+
+      .value {
+        font-size: 28px;
+        line-height: 1;
+        font-weight: 700;
+        font-family: D-DIN;
+        text-align: center;
+      }
+    }
+  }
+
+  .btnWarp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .checkBtn {
+      border-radius: 25px;
+      background: linear-gradient(180deg,
+          rgb(28, 192, 255),
+          rgb(82, 148, 255) 100%);
+      width: 106px;
+
+      color: rgb(255, 255, 255);
+
+      font-size: 18px;
+      text-align: center;
+      line-height: 40px;
+      margin-top: 32px;
+      cursor: pointer;
+    }
+  }
+
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/MapCantainer/EmphasisAreaMap/PopoverCardArea/index.tsx b/src/pages/NewHome/MapCantainer/EmphasisAreaMap/PopoverCardArea/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bd5cca1aee7634c8c832e81993c1c4afdf033abd
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/EmphasisAreaMap/PopoverCardArea/index.tsx
@@ -0,0 +1,176 @@
+import { cqiDisplay, getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import React, { useMemo } from 'react';
+import styles from './index.less';
+interface PropsType {
+  data: DistrictAPI.RealtimeIndexDTO;
+}
+/** @name 气泡卡片 */
+const PopoverCardArea: React.FC<PropsType> = (props) => {
+  const { data } = props;
+
+  const valueStyle = {
+    color: '#fff',
+    fontSize: 16,
+  };
+  const labelStyle = {
+    color: '#CBEDFF',
+    fontSize: 16,
+  };
+  const cards = useMemo(() => {
+    console.log(data?.currentIndex?.indexs);
+
+    return [
+      {
+        name: '安全',
+        value:
+          data?.currentIndex?.indexs?.find((item: any) => item.name === '安全')
+            ?.value ?? 0,
+        ...getCqiStatusStyle(
+          data?.currentIndex?.indexs?.find((item: any) => item.name === '安全')
+            ?.value,
+        ),
+      },
+      {
+        name: '整洁',
+        value:
+          data?.currentIndex?.indexs?.find((item: any) => item.name === '整洁')
+            ?.value ?? 0,
+        ...getCqiStatusStyle(
+          data?.currentIndex?.indexs?.find((item: any) => item.name === '整洁')
+            ?.value,
+        ),
+      },
+      {
+        name: '有序',
+        value:
+          data?.currentIndex?.indexs?.find((item: any) => item.name === '有序')
+            ?.value ?? 0,
+        ...getCqiStatusStyle(
+          data?.currentIndex?.indexs?.find((item: any) => item.name === '有序')
+            ?.value,
+        ),
+      },
+      {
+        name: '便民',
+        value:
+          data?.currentIndex?.indexs?.find((item: any) => item.name === '便民')
+            ?.value ?? 0,
+        ...getCqiStatusStyle(
+          data?.currentIndex?.indexs?.find((item: any) => item.name === '便民')
+            ?.value,
+        ),
+      },
+      {
+        name: '美观',
+        value: '--',
+        id: data?.currentIndex?.indexs?.find(
+          (item: any) => item.name === '美观',
+        )?.id,
+        color: '#57EF58',
+        background: 'rgba(39, 211, 134, 0.2)',
+        // value:
+        //   data?.currentIndex?.indexs?.find((item: any) => item.name === '美观')
+        //     ?.value ?? 0,
+        // ...getCqiStatusStyle(
+        //   data?.currentIndex?.indexs?.find((item: any) => item.name === '美观')
+        //     ?.value,
+        // ),
+      },
+    ];
+  }, [data]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{data?.objectName}</div>
+      <div className={styles.header}>
+        <div className={styles.cqiWarp}>
+          <div
+            className={styles.cqi}
+            style={{ color: getCqiStatusStyle(data?.currentIndex?.cqi)?.color }}
+          >
+            {data?.currentIndex?.cqi}
+            <span
+              className={styles.tag}
+              style={{
+                background: getCqiStatusStyle(data?.currentIndex?.cqi)
+                  ?.background,
+              }}
+            >
+              {getCqiStatusTexts(data?.currentIndex?.cqi)?.text}
+            </span>
+          </div>
+        </div>
+
+        <div className={styles.compare}>
+          <span className={styles.tips}>
+            较{dayjs().diff(data?.indexTime, 'h')}小时前
+          </span>
+          <div style={{ display: 'flex' }}>
+            {data?.status === 'up' ? (
+              <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
+            ) : (
+              <CaretDownOutlined style={{ color: 'rgb(255, 71, 71)' }} />
+            )}
+            <div
+              className={styles.rightValue}
+              style={{
+                color:
+                  data?.status === 'up'
+                    ? 'rgb(9, 195, 92)'
+                    : 'rgb(255, 71, 71)',
+              }}
+            >
+              {data?.diffValue}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div> {getCqiStatusTexts(data?.currentIndex?.cqi)?.desc}</div>
+
+      <div className={styles.cardSection}>
+        {cards.map((item, index) => (
+          <div
+            key={index}
+            className={styles.card}
+            style={{ background: item.background }}
+          >
+            <div className={styles.name}>{item.name}</div>
+            <div className={styles.value} style={{ color: item.color }}>
+              {cqiDisplay(item.value)}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className={styles.fx}>
+        <div className={styles.countWarp}>
+          <span>安全风险</span>
+          <div className={styles.count}>--</div>
+          {/* <span>个</span> */}
+        </div>
+        <div className={styles.countWarp}>
+          <span>城市问题</span>
+          <div className={styles.count}>{data?.issueCount}</div>
+          <span>个</span>
+        </div>
+      </div>
+      <div className={styles.btnWarp}>
+        <div className={styles.checkBtn} data-event-key="detail">
+          查看详情
+        </div>
+      </div>
+
+      <img
+        src={require('@/assets/images/closeBtn.png')}
+        alt=""
+        className={styles.close}
+        style={{ width: 28, height: 28 }}
+        data-event-key="close"
+      />
+    </div>
+  );
+};
+
+export default PopoverCardArea;
diff --git a/src/pages/NewHome/MapCantainer/EmphasisAreaMap/index.less b/src/pages/NewHome/MapCantainer/EmphasisAreaMap/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..2caad4dc78d8bf39265f7c3a875880c059748d49
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/EmphasisAreaMap/index.less
@@ -0,0 +1,252 @@
+.container {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  border-radius: 20px;
+
+  > img {
+    cursor: pointer;
+  }
+
+  > img:nth-of-type(1) {
+    position: absolute;
+    left: 700px;
+    top: 200px;
+  }
+
+  > img:nth-of-type(2) {
+    position: absolute;
+    left: 1100px;
+    top: 340px;
+  }
+}
+
+.mapController {
+  position: absolute;
+  right: 30px;
+  bottom: 30px;
+  z-index: 1001;
+
+  > div {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+
+    background: rgb(0, 71, 113);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    cursor: pointer;
+    color: #a8cde8;
+    margin-top: 10px;
+  }
+}
+
+.statusBar {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 20px 20px;
+  z-index: 997;
+  border-radius: 10px;
+  color: rgb(203, 227, 240);
+  font-size: 16px;
+}
+
+.mark {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.leftList {
+  width: 352px;
+  height: 605px;
+  z-index: 997;
+  // box-sizing: content-box;
+
+  position: absolute;
+  left: 10px;
+  top: 100px;
+  // overflow: auto;
+
+  .bg {
+    position: absolute;
+    inset: 0;
+    border-radius: 20px;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    background: rgba(12, 60, 112, 0.7);
+  }
+
+  .listContent {
+    position: relative;
+    padding: 16px 25px;
+  }
+}
+
+.listTitle {
+  color: rgb(179, 214, 247);
+  font-family: DingTalk JinBuTi;
+  font-size: 22px;
+  font-weight: 400;
+  margin-bottom: 10px;
+}
+
+.listItem {
+  height: 60px;
+  padding: 0 24px;
+  color: rgb(228, 237, 255);
+  font-family: D-DIN;
+  font-size: 20px;
+  border-radius: 18px;
+  margin-bottom: 10px;
+  cursor: pointer;
+
+  background: rgba(67, 177, 255, 0.13);
+}
+
+.childWrap {
+  margin-top: 5px;
+  margin-bottom: 10px;
+  border-radius: 18px;
+  background: rgba(67, 177, 255, 0.13);
+
+  .childItem {
+    border-radius: 18px;
+
+    height: 60px;
+    padding: 0 24px;
+
+    > :first-child {
+      color: rgb(228, 237, 255);
+      font-family: D-DIN;
+      font-size: 20px;
+    }
+
+    > :last-child {
+      font-family: D-DIN;
+      font-size: 28px;
+      font-weight: 700;
+    }
+
+    &:hover {
+      background: rgba(67, 177, 255, 0.37);
+    }
+  }
+}
+
+.indexMarker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+  pointer-events: none;
+}
+
+.markerIcon {
+  width: 22px;
+  height: 22px;
+  box-sizing: border-box;
+  border: 4px solid rgb(87, 239, 88);
+  background: rgba(87, 239, 88, 0.1);
+  border-radius: 50%;
+  border-color: var(--b-color);
+}
+
+.markerContent {
+  background-color: rgba(33, 50, 88, 0.9);
+  border-radius: 10px;
+
+  font-weight: 700;
+  white-space: nowrap;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  padding: 4px 15px;
+  cursor: pointer;
+
+  > span {
+    font-size: 28px;
+    font-family: D-DIN;
+    margin-left: 12px;
+    color: var(--b-color);
+  }
+}
+
+.modalTitle {
+  .title {
+    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(181, 229, 255));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-family: DingTalk JinBuTi;
+    font-size: 30px;
+    margin-left: -10px;
+  }
+
+  .tag {
+    display: inline-block;
+    width: 83px;
+    height: 24px;
+    border-radius: 12px;
+    background: linear-gradient(
+      180deg,
+      rgba(26, 66, 110, 0),
+      rgb(122, 94, 111) 100%
+    );
+    color: #ff7a7a;
+    text-align: center;
+    font-size: 16px;
+    line-height: 23px;
+    margin: 0 10px 0 20px;
+    background-size: 100% 100%;
+  }
+
+  .type {
+    font-size: 16px;
+    color: #bccee9;
+  }
+}
+
+.window {
+  box-sizing: border-box;
+  border: 2px solid rgba(64, 146, 217, 0.95);
+  border-radius: 10px;
+  background: rgb(3, 85, 135);
+  width: 460px;
+
+  &::after {
+    position: absolute;
+    content: '';
+    /**三角形 */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: rgb(3, 85, 135) transparent transparent transparent;
+    bottom: -7px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999;
+  }
+
+  &::before {
+    position: absolute;
+    content: '';
+    /**三角形 */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: rgba(64, 146, 217, 0.95) transparent transparent transparent;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 998;
+  }
+}
diff --git a/src/pages/NewHome/MapCantainer/EmphasisAreaMap/index.tsx b/src/pages/NewHome/MapCantainer/EmphasisAreaMap/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..951c45e963ab6d4fba8605fcbf35068559475df9
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/EmphasisAreaMap/index.tsx
@@ -0,0 +1,363 @@
+import CooglMap from '@/components/CooglMap';
+import Modal from '@/components/HncyModal';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
+import services from '@/services';
+import { cqiDisplay, getColorByIndex, getCqiStatusStyle } from '@/utils/ui';
+import { Flex, Space } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+
+import Apps from '../components/Apps';
+import LeftTab from '../components/LeftTab';
+import { colorConfig } from '../DistrictMap';
+import RiskIssue from '../RiskIssue';
+import styles from './index.less';
+import PopoverCardArea from './PopoverCardArea';
+import BaseInfo from '@/pages/SecurityServiceOverview/components/BaseInfo';
+const EmphasisAreaMap: React.FC = () => {
+  const [checkedKeys, setCheckedKeys] = useState([
+    '城市问题',
+    '其他问题',
+    '突出问题',
+  ]);
+
+  //区域切换
+  const [center, setCenter] = useState<any>();
+
+  //区域
+  const [areaSelectd, setAreaSelectd] = useState<any>();
+
+  const [expand, setExpand] = useState<number>();
+  const ref = useRef(0);
+  const { dispatch } = useGlobalModalServices();
+
+  const MapRef = useRef<any>();
+  const [leftTabKey, setLeftTabKey] = useState('1');
+
+  // 事件详情弹窗
+  const [detailModalOpt, setDetailModalOpt] = useState<any>({
+    open: false,
+    title: '',
+    eventId: '',
+  });
+  const [areaList, setAreaList] = useState<any>([]);
+  const [allAreaMapData, setAllAreaMapData] = useState<any>([]);
+
+  /**
+   * @description 设置地图视野
+   */
+  const setViewport = () => {
+    // const map = MapRef.current?.map as BMapGL.Map;
+    // if (map) {
+    //   map.setViewport([p1, p2]);
+    // }
+  };
+
+  // /** @description 移动视角到能显示全部覆盖物 */
+  // useEffect(() => {
+  //   setViewport();
+  // }, [MapRef.current]);
+
+  // 重点区域列表
+  const getImportantAreaList = async () => {
+    const params = {
+      physicalSignType: 1,
+      objectHierarchy: 19,
+    };
+    const res = await services.Physicalsign.getGroupObjectPhysicalSignIndex(
+      params,
+    );
+
+    if (res.code === 200) {
+      setAreaList(res.data);
+    }
+  };
+
+  useEffect(() => {
+    getImportantAreaList();
+  }, []);
+
+  const getObjectPolygon = async () => {
+    const params = {
+      physicalSignType: 1,
+      objectHierarchy: 19,
+    };
+    const res = await services.Physicalsign.getObjectPolygon(params);
+    if (res.code === 200 && res.data?.length) {
+      setAllAreaMapData(res.data);
+    }
+  };
+
+  useEffect(() => {
+    getObjectPolygon();
+  }, []);
+
+  /** 标题渲染 */
+  const titleRender = () => {
+    return (
+      <Flex align="center" className={styles.modalTitle}>
+        <div className={styles.title}>{detailModalOpt?.eventType}</div>
+        <span
+          className={styles.tag}
+          style={{
+            backgroundImage: `url(${
+              colorConfig[detailModalOpt?.riskLevelName]?.bg
+            })`,
+            color: colorConfig[detailModalOpt?.riskLevelName]?.color,
+          }}
+        >
+          {detailModalOpt?.riskLevelName}
+        </span>
+        <span className={styles.type}>{detailModalOpt?.position}</span>
+      </Flex>
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <CooglMap.MapView
+        zoom={8}
+        ref={MapRef}
+        center={{ x: 103.96, y: 30.658842 }}
+      >
+        {leftTabKey === '1' ? (
+          <>
+            {allAreaMapData?.map((item: any) => (
+              <CooglMap.CustomOverlay
+                position={[item?.centerX, item?.centerY]}
+                onClick={async () => {
+                  try {
+                    const params = {
+                      physicalSignType: '1', // 1实况指数  3周期指数
+                      indexType: '1', // 指数体系类型 0:内评价 1:外评价
+                      indexHierarchy: '1,2', // 指数层级，从1开始，多个用,逗号隔开
+                      objectId: item?.objectId, // 区域网格id
+                      indexId: '', // 指数id
+                    };
+                    const res =
+                      await services.Physicalsign.getComparisonIndexInstance(
+                        params,
+                      );
+
+                    const res1 =
+                      await services.Physicalsign.getTotalCountForKeyAreas({
+                        keyAreaId: item?.objectId,
+                        eventStatus: '处置中',
+                      });
+
+                    setAreaSelectd({
+                      ...res?.data,
+                      centerX: item?.centerX,
+                      centerY: item?.centerY,
+                      objectName: item?.objectName,
+                      issueCount: res1?.data,
+                    });
+                  } catch (error) {
+                    console.log(error);
+                  }
+                }}
+                key={item.objectId}
+              >
+                <div className={styles.indexMarker}>
+                  <div className={styles.markerContent}>
+                    {item?.objectName}
+                    <span style={{ color: getColorByIndex(item?.qualitySign) }}>
+                      {cqiDisplay(item?.qualitySign)}
+                    </span>
+                  </div>
+                  <div
+                    className={styles.markerIcon}
+                    style={{
+                      borderColor: getColorByIndex(item?.qualitySign),
+                    }}
+                  ></div>
+                </div>
+              </CooglMap.CustomOverlay>
+            ))}
+            {areaSelectd && (
+              <CooglMap.CustomOverlay
+                position={[
+                  Number(areaSelectd.centerX),
+                  Number(areaSelectd.centerY),
+                ]}
+                offset={{
+                  top: -50,
+                }}
+                onDetail={(e) => {
+                  console.log('areaSelectd', areaSelectd);
+                  dispatch.push('KeyAreaDetail', {
+                    title: areaSelectd.objectName,
+                    props: {
+                      objectId: areaSelectd?.currentIndex?.objectId,
+                      cqi: areaSelectd?.currentIndex?.cqi,
+                    },
+                  });
+                }}
+                onClose={(e) => {
+                  setAreaSelectd(undefined);
+                  // console.log('close', e);
+                }}
+              >
+                <div className={styles.window} style={{ width: 555 }}>
+                  <PopoverCardArea data={areaSelectd}></PopoverCardArea>
+                </div>
+              </CooglMap.CustomOverlay>
+            )}
+            {allAreaMapData && (
+              <>
+                {center?.multiPoints?.map((item: any, index: number) => {
+                  return (
+                    <CooglMap.Polygon
+                      key={index}
+                      fillColor={getColorByIndex(Number(center?.qualitySign))!}
+                      strokeColor="#fff"
+                      points={item}
+                      strokeWidth={2}
+                      fillOpacity={0.2}
+                    ></CooglMap.Polygon>
+                  );
+                })}
+              </>
+            )}
+          </>
+        ) : (
+          <RiskIssue
+            checkedKeys={checkedKeys}
+            // setModalOpt={setModalOpt}
+            setDetailModalOpt={setDetailModalOpt}
+          />
+        )}
+      </CooglMap.MapView>
+      <div className={styles.leftList}>
+        <div className={styles.bg}></div>
+        <div className={styles.listContent}>
+          <div className={styles.listTitle}>重点区域列表</div>
+          <div style={{ height: 520, overflow: 'auto' }}>
+            {areaList?.map((item: any, index: number) => {
+              return (
+                <div key={index}>
+                  <Flex
+                    className={styles.listItem}
+                    align="center"
+                    justify="space-between"
+                    onClick={() => {
+                      if (expand === index) {
+                        setExpand(undefined);
+                        return;
+                      }
+                      ref.current = index;
+
+                      setExpand(index);
+                    }}
+                  >
+                    <div>{item?.objGroup}</div>
+                    <Space>
+                      <div>{item?.objects?.length}</div>
+                      <div>个</div>
+                      {index === expand ? (
+                        <img
+                          src={require('@/assets/images/down.png')}
+                          alt=""
+                          style={{
+                            width: 22,
+                            height: 22,
+                            transform: 'rotate(180deg)',
+                          }}
+                        />
+                      ) : (
+                        <img
+                          src={require('@/assets/images/down.png')}
+                          alt=""
+                          style={{ width: 22, height: 22 }}
+                        />
+                      )}
+                    </Space>
+                  </Flex>
+                  {expand === index && (
+                    <div className={styles.childWrap}>
+                      {item?.objects.map((child: any, child_index: any) => {
+                        return (
+                          <Flex
+                            key={child_index}
+                            align="center"
+                            className={styles.childItem}
+                            justify="space-between"
+                            onClick={() => {
+                              const data = allAreaMapData?.find(
+                                (it) => it.objectId === child?.objectId,
+                              );
+                              console.log(data);
+
+                              MapRef?.current?.flyTo({
+                                destination: {
+                                  x: Number(data?.centerX),
+                                  y: Number(data?.centerY),
+                                  z: 23961,
+                                },
+                              });
+                              setLeftTabKey('1');
+                              setCenter(data);
+                            }}
+                          >
+                            <div>{child.objectName}</div>
+                            <div
+                              style={{
+                                color: getCqiStatusStyle(child.cqi)?.color,
+                              }}
+                            >
+                              {cqiDisplay(child.cqi)}
+                            </div>
+                          </Flex>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.statusBar}>
+        <LeftTab
+          leftTabKey={leftTabKey}
+          checkedKeys={checkedKeys}
+          setLeftTabKey={setLeftTabKey}
+          setCheckedKeys={setCheckedKeys}
+        />
+        <Apps></Apps>
+      </div>
+      {/* 事件详情 */}
+      <Modal
+        open={detailModalOpt?.open}
+        titleRender={titleRender}
+        onCancel={() => {
+          setDetailModalOpt({
+            open: false,
+            title: '事件详情',
+            eventId: '',
+          });
+        }}
+        width={2650}
+        height={900}
+      >
+        {detailModalOpt?.open && (
+          <BaseInfo
+            eventId={detailModalOpt?.eventId}
+            detail={detailModalOpt}
+            onChangeOpt={(val) => {
+              setDetailModalOpt({
+                ...detailModalOpt,
+                position: val?.position,
+                eventType: val?.event_type,
+                riskLevelName: val?.risklevel,
+              });
+            }}
+          />
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default EmphasisAreaMap;
diff --git a/src/pages/NewHome/MapCantainer/RiskIssue/index.less b/src/pages/NewHome/MapCantainer/RiskIssue/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..efed354df92ba89a2407b7d98aa9bcb2374b96af
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/RiskIssue/index.less
@@ -0,0 +1,74 @@
+.window {
+    box-sizing: border-box;
+    border: 2px solid rgba(64, 146, 217, 0.95);
+    border-radius: 10px;
+    background: rgb(3, 85, 135);
+    width: 460px;
+  
+    &::after {
+      position: absolute;
+      content: '';
+      /**三角形 */
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 10px 10px 0 10px;
+      border-color: rgb(3, 85, 135) transparent transparent transparent;
+      bottom: -7px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 999;
+    }
+  }
+  .window1 {
+    box-sizing: border-box;
+  
+    &::after {
+      position: absolute;
+      content: '';
+      /**三角形 */
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 10px 10px 0 10px;
+      border-color: rgb(3, 85, 135) transparent transparent transparent;
+      bottom: -7px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 999;
+    }
+  }
+  .modalTitle {
+    .title {
+      background: linear-gradient(180deg, rgb(255, 255, 255), rgb(181, 229, 255));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      font-family: DingTalk JinBuTi;
+      font-size: 30px;
+      margin-left: -10px;
+    }
+  
+    .tag {
+      display: inline-block;
+      width: 83px;
+      height: 24px;
+      border-radius: 12px;
+      background: linear-gradient(
+        180deg,
+        rgba(26, 66, 110, 0),
+        rgb(122, 94, 111) 100%
+      );
+      color: #ff7a7a;
+      text-align: center;
+      font-size: 16px;
+      line-height: 23px;
+      margin: 0 10px 0 20px;
+      background-size: 100% 100%;
+    }
+  
+    .type {
+      font-size: 16px;
+      color: #bccee9;
+    }
+  }
\ No newline at end of file
diff --git a/src/pages/NewHome/MapCantainer/RiskIssue/index.tsx b/src/pages/NewHome/MapCantainer/RiskIssue/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a210aa71acccd6b57c22776166b232c71159fb9e
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/RiskIssue/index.tsx
@@ -0,0 +1,163 @@
+import CooglMap from '@/components/CooglMap';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
+import services from '@/services';
+import { useRequest } from 'ahooks';
+import { memo, useEffect, useState } from 'react';
+import { colorConfig } from '../DistrictMap';
+import PopoverCardKnotty from '../DistrictMap/PopoverCardKnotty';
+import PopoverCardWarn from '../DistrictMap/PopoverCardWarn';
+import styles from './index.less';
+const RiskIssue = ({
+  checkedKeys,
+  setDetailModalOpt,
+}: // setModalOpt,
+{
+  checkedKeys: any[];
+  // setModalOpt: (val: any) => void;
+  setDetailModalOpt: (val: any) => void;
+}) => {
+  const { dispatch } = useGlobalModalServices();
+
+  const [eventData, setEventData] = useState<any[]>([]);
+  //风险
+  const [fxSelectd, setFxSelectd] = useState<any>();
+  //问题
+  const [kontSelectd, setKontSelectd] = useState<any>();
+
+  //预警点位
+  const { data: earlyData } = useRequest(() =>
+    services.DataBase.getSjdzInfoData({
+      typeCode: 'zzcc-aq-yjxx',
+      params: {
+        pageNo: 1,
+        pageSize: 10,
+      },
+    }),
+  );
+  console.log(earlyData);
+
+  useEffect(() => {
+    //最新事件
+    services.CityProblemApi.getUpToDateEvent({
+      page: 1,
+      count: 10,
+      // protrudeFlag: '1',
+    }).then((res: any) => {
+      console.log('getUpToDateEvent', res);
+      if (res.code === 200) {
+        setEventData(res.data?.items);
+      }
+    });
+  }, []);
+
+  return (
+    <>
+      {earlyData?.data?.data?.records
+        ?.filter((item: any) => checkedKeys?.includes(item?.risklevel))
+        ?.map((item: any, index: number) => {
+          const point = [Number(item?.longitude), Number(item?.latitude)];
+
+          return (
+            <CooglMap.CustomOverlay
+              key={index}
+              position={point}
+              onSet={async () => {
+                try {
+                  console.log(item);
+
+                  setFxSelectd(item);
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+            >
+              <img
+                data-event-key="set"
+                src={colorConfig[item?.risklevel]?.icon}
+                alt=""
+                style={{ width: 46, height: 46, zIndex: 999 }}
+              />
+            </CooglMap.CustomOverlay>
+          );
+        })}
+      {eventData
+        ?.filter((item) =>
+          checkedKeys?.includes(
+            item?.protrudeFlag == '2' ? '突出问题' : '其他问题',
+          ),
+        )
+        ?.map((item, index) => {
+          const point = [Number(item?.lon), Number(item?.lat)];
+          return (
+            <CooglMap.CustomOverlay
+              key={index}
+              position={point}
+              onWtDet={() => {
+                setKontSelectd(item);
+              }}
+            >
+              <img
+                data-event-key="wtDet"
+                src={
+                  item?.protrudeFlag == '2'
+                    ? require('@/assets/images/tuchuIc.png')
+                    : require('@/assets/images/wtIc.png')
+                }
+                alt=""
+                style={{ width: 46, height: 46, zIndex: 999 }}
+              />
+            </CooglMap.CustomOverlay>
+          );
+        })}
+      {/**预警popover */}
+      {fxSelectd && (
+        <CooglMap.CustomOverlay
+          position={[Number(fxSelectd?.longitude), Number(fxSelectd?.latitude)]}
+          offset={{
+            top: -50,
+          }}
+          onDetail={(e) => {
+            setDetailModalOpt({
+              open: true,
+              eventId: fxSelectd?.riskId,
+              ...fxSelectd,
+            });
+          }}
+          onClose={(e) => {
+            setFxSelectd(undefined);
+          }}
+        >
+          <div className={styles.window}>
+            <PopoverCardWarn data={fxSelectd}></PopoverCardWarn>
+          </div>
+        </CooglMap.CustomOverlay>
+      )}
+      {/**问题popover */}
+      {kontSelectd && (
+        <CooglMap.CustomOverlay
+          position={[Number(kontSelectd?.lon), Number(kontSelectd?.lat)]}
+          offset={{
+            top: -50,
+          }}
+          onDetail={(e) => {
+            dispatch.push('EventDetail', {
+              title: '事件详情',
+              w: 'fit-content',
+              props: {
+                eventId: kontSelectd?.eventId,
+              },
+            });
+          }}
+          onClose={(e) => {
+            setKontSelectd(undefined);
+          }}
+        >
+          <div className={styles.window}>
+            <PopoverCardKnotty data={kontSelectd}></PopoverCardKnotty>
+          </div>
+        </CooglMap.CustomOverlay>
+      )}
+    </>
+  );
+};
+export default memo(RiskIssue);
diff --git a/src/pages/NewHome/MapCantainer/components/Apps/index.less b/src/pages/NewHome/MapCantainer/components/Apps/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..fbbafa3eed87026d8df7381b5197e677e7a5e004
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/components/Apps/index.less
@@ -0,0 +1,26 @@
+.container {
+  position: relative;
+  width: 208px;
+  //   height: 202px;
+  margin-top: 25px;
+}
+
+.bg {
+  position: absolute;
+  inset: 0;
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  background: rgba(12, 60, 112, 0.7);
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+}
+
+.title {
+  color: rgb(188, 206, 233);
+  font-size: 18px;
+}
diff --git a/src/pages/NewHome/MapCantainer/components/Apps/index.tsx b/src/pages/NewHome/MapCantainer/components/Apps/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a590900006a35e22dc6e8dbd312b6582fde8da57
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/components/Apps/index.tsx
@@ -0,0 +1,51 @@
+import { Space } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+const Apps: React.FC = () => {
+  const apps = [
+    {
+      key: '2',
+      img: require('@/assets/images/aqyztTab.png'),
+      onclick: () => {
+        window.open(
+          `${window.location.origin}/cd-comprehensive/securityServiceOverview`,
+          '_blank',
+        );
+      },
+    },
+    // {
+    //   key: '3',
+    //   img: require('@/assets/images/youyanyizhangtu.png'),
+    //   onclick: () => {
+    //     window.open('https://10.1.174.34:13000');
+    //   },
+    // },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.bg}></div>
+      <div className={styles.content}>
+        <div className={styles.title}>应用场景</div>
+        <Space direction="vertical" size={20} style={{ marginTop: 10 }}>
+          {apps?.map((item) => {
+            return (
+              <img
+                src={item.img}
+                alt=""
+                key={item.key}
+                onClick={() => {
+                  item?.onclick();
+                }}
+                style={{ width: 175, height: 48, cursor: 'pointer' }}
+              />
+            );
+          })}
+        </Space>
+      </div>
+    </div>
+  );
+};
+
+export default Apps;
diff --git a/src/pages/NewHome/MapCantainer/components/LeftTab/index.less b/src/pages/NewHome/MapCantainer/components/LeftTab/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..7e9018923c6dde6cb87515324385c94f816fe688
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/components/LeftTab/index.less
@@ -0,0 +1,88 @@
+.container {
+  padding: 20px;
+  z-index: 997;
+  position: relative;
+  width: 208px;
+  border-radius: 10px;
+  color: rgb(203, 227, 240);
+  font-size: 16px;
+
+  .menuBg {
+    background: rgba(12, 60, 112, 0.7);
+    border-radius: 20px;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    background: rgba(12, 60, 112, 0.7);
+    position: absolute;
+    inset: 0;
+    z-index: 100;
+  }
+  .title {
+    color: rgb(188, 206, 233);
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+
+  .leftTab {
+    background: rgba(19, 145, 224, 0.464);
+    width: 175px;
+    height: 35px;
+    border-radius: 15px;
+    padding-left: 10px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    cursor: pointer;
+  }
+
+  .itemWarp {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .rowItem {
+    margin-top: 16px;
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .treeTitle {
+    display: flex;
+    align-items: center;
+
+    img {
+      margin-left: -10px;
+      margin-right: 5px;
+      width: 19px;
+      height: 18px;
+    }
+  }
+  .mark {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+  :global {
+    .ant-tree {
+      background-color: rgba(12, 60, 112, 0.135) !important;
+    }
+    .ant-tree .ant-tree-switcher {
+      display: none !important;
+    }
+
+    .ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner {
+      background-color: #48779d88 !important;
+      border: #99fdfa 1px solid !important;
+    }
+
+    .ant-tree-node-content-wrapper.ant-tree-node-selected,
+    .ant-tree-checkbox + span.ant-tree-node-selected {
+      background-color: rgba(12, 60, 112, 0.197) !important;
+    }
+  }
+}
diff --git a/src/pages/NewHome/MapCantainer/components/LeftTab/index.tsx b/src/pages/NewHome/MapCantainer/components/LeftTab/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3e7871154e4e176651498e4137185a685cd96730
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/components/LeftTab/index.tsx
@@ -0,0 +1,159 @@
+import risk1 from '@/assets/images/urbanSituation/risk1.svg';
+import risk2 from '@/assets/images/urbanSituation/risk2.svg';
+import risk3 from '@/assets/images/urbanSituation/risk3.svg';
+import risk4 from '@/assets/images/urbanSituation/risk4.svg';
+import { ConfigProvider, Tree } from 'antd';
+import { memo } from 'react';
+import styles from './index.less';
+const LeftTab = ({
+  leftTabKey,
+  checkedKeys,
+  setLeftTabKey,
+  setCheckedKeys,
+}: {
+  leftTabKey: string;
+  checkedKeys: any[];
+  setLeftTabKey: (val: any) => void;
+  setCheckedKeys: (val: any[]) => void;
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.menuBg}></div>
+      <div style={{ position: 'relative', zIndex: 1000 }}>
+        <div className={styles.title}>图层图例</div>
+        <div
+          className={styles.leftTab}
+          style={{ background: leftTabKey == '1' ? 'rgb(19, 146, 224)' : '' }}
+          onClick={() => setLeftTabKey('1')}
+        >
+          CQI
+        </div>
+
+        <div className={styles.itemWarp}>
+          <div className={styles.mark} style={{ backgroundColor: '#57EF58' }} />
+          <div>良好态 &gt;95</div>
+        </div>
+        <div className={styles.itemWarp}>
+          <div
+            className={styles.mark}
+            style={{ backgroundColor: 'rgb(68, 127, 240)' }}
+          />
+          <div>正常态 85-95</div>
+        </div>
+        <div className={styles.itemWarp}>
+          <div className={styles.mark} style={{ backgroundColor: '#FFA81A' }} />
+          <div>预警态 &lt;85</div>
+        </div>
+        <div className={styles.itemWarp}>
+          <div className={styles.mark} style={{ backgroundColor: '#F24F4F' }} />
+          <div>应急态</div>
+        </div>
+        <div
+          className={styles.leftTab}
+          style={{ background: leftTabKey == '2' ? 'rgb(19, 146, 224)' : '' }}
+          onClick={() => setLeftTabKey('2')}
+        >
+          风险预警与问题分布
+        </div>
+        {leftTabKey == '2' && (
+          <ConfigProvider
+            theme={{
+              token: {},
+              components: {
+                Tree: {
+                  directoryNodeSelectedBg: '#133c6d',
+                },
+              },
+            }}
+          >
+            <Tree
+              checkable
+              defaultExpandAll
+              onCheck={(e: any) => {
+                setCheckedKeys(e);
+              }}
+              checkedKeys={checkedKeys}
+              treeData={[
+                {
+                  title: '安全风险',
+                  key: '安全风险',
+                  disabled: true,
+                  children: [
+                    {
+                      title: (
+                        <div className={styles.treeTitle}>
+                          <img src={risk1} alt=""></img>红色风险
+                        </div>
+                      ),
+                      key: '红色预警',
+                      disabled: true,
+                    },
+                    {
+                      title: (
+                        <div className={styles.treeTitle}>
+                          <img src={risk2} alt=""></img>橙色风险
+                        </div>
+                      ),
+                      disabled: true,
+                      key: '橙色预警',
+                    },
+                    {
+                      title: (
+                        <div className={styles.treeTitle}>
+                          <img src={risk3} alt=""></img>黄色风险
+                        </div>
+                      ),
+                      disabled: true,
+                      key: '黄色预警',
+                    },
+                    {
+                      title: (
+                        <div className={styles.treeTitle}>
+                          <img src={risk4} alt=""></img>一般风险
+                        </div>
+                      ),
+                      disabled: true,
+                      key: '一般预警',
+                    },
+                  ],
+                },
+                {
+                  title: '城市问题',
+                  key: '城市问题',
+                  children: [
+                    {
+                      title: (
+                        <div className={styles.treeTitle}>
+                          <img
+                            src={require('@/assets/images/wtIc.png')}
+                            alt=""
+                          ></img>
+                          其他问题
+                        </div>
+                      ),
+                      key: '其他问题',
+                    },
+                    {
+                      title: (
+                        <div className={styles.treeTitle}>
+                          <img
+                            alt=""
+                            src={require('@/assets/images/tuchuIc.png')}
+                          ></img>
+                          突出问题
+                        </div>
+                      ),
+                      key: '突出问题',
+                    },
+                  ],
+                },
+              ]}
+            />
+          </ConfigProvider>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default memo(LeftTab);
diff --git a/src/pages/NewHome/MapCantainer/index.less b/src/pages/NewHome/MapCantainer/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..cf09ad65ef2e1812fc1a2fd05bce01f6658aad7a
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/index.less
@@ -0,0 +1,25 @@
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .topTabsWarp {
+    position: absolute;
+    top: 30px;
+    left: 10px;
+    z-index: 997;
+  }
+
+  .botTabWarp {
+    position: absolute;
+    bottom: 20px;
+    left: 34%;
+    display: flex;
+    justify-content: center;
+    z-index: 997;
+  }
+  .mapContent {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/src/pages/NewHome/MapCantainer/index.tsx b/src/pages/NewHome/MapCantainer/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a214e533ec9e906dc0cccf7813d6dd724c3d27f1
--- /dev/null
+++ b/src/pages/NewHome/MapCantainer/index.tsx
@@ -0,0 +1,37 @@
+import Tabs from '@/components/Tabs';
+import React, { useMemo, useState } from 'react';
+import DistrictMap from './DistrictMap';
+import EmphasisAreaMap from './EmphasisAreaMap';
+import styles from './index.less';
+const Map: Record<string, React.FC> = {
+  '1': DistrictMap,
+  '2': EmphasisAreaMap,
+};
+
+const MapContainer = () => {
+  const [topKey, setTopKey] = useState('1');
+
+  const renderMap = useMemo(() => {
+    const MapComponent = Map[topKey];
+    return <MapComponent />;
+  }, [topKey]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.topTabsWarp}>
+        <Tabs
+          defaultValue="1"
+          items={[
+            { key: '1', label: '区（市）县' },
+            { key: '2', label: '重点区域' },
+          ]}
+          onChange={(e) => {
+            setTopKey(e);
+          }}
+        />
+      </div>
+      <div className={styles.mapContent}>{renderMap}</div>
+    </div>
+  );
+};
+export default MapContainer;
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationV4/components/WasteDisposal/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationV4/components/WasteDisposal/index.tsx
index f60aa5560bc1f4ebff9bda36b62fbead45bdb3c7..5afdd8ba85d9bd6cdc2ac3c849c31fad6ea62d3e 100644
--- a/src/pages/NewHome/NewRightContent/IndustryOperationV4/components/WasteDisposal/index.tsx
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationV4/components/WasteDisposal/index.tsx
@@ -28,25 +28,36 @@ const WasteDisposal: React.FC = () => {
       throw new Error('获取数据失败');
     }),
   );
+  const { data: infoData } = useRequest(() =>
+    services.DataBase.getSjdzInfoData({
+      typeCode: 'zzcc-shlj-czzl',
+      params: {
+        startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
+        endTime: dayjs().endOf('month').format('YYYY-MM-DD'),
+      },
+    }).then((res) => {
+      if (res.code === 200) {
+        return res?.data?.data?.records?.[0];
+      }
+      throw new Error('获取数据失败');
+    }),
+  );
 
+  const { data: dumpTotal } = useRequest(() =>
+    services.DataBase.getSjdzInfoData({
+      typeCode: 'zzcc-jzlj-wgqddwh',
+      params: {
+        startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
+        endTime: dayjs().endOf('month').format('YYYY-MM-DD'),
+      },
+    }).then((res) => {
+      if (res.code === 200) {
+        console.log(res);
 
-  const { data: dumpTotal } = useRequest(
-    () =>
-      services.DataBase.getSjdzInfoData({
-        typeCode: 'zzcc-jzlj-wgqddwh',
-        params: {
-          startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
-          endTime: dayjs().endOf('month').format('YYYY-MM-DD'),
-        },
-      }).then((res) => {
-        if (res.code === 200) {
-          console.log(res);
-
-          return res?.data?.data?.records?.[0]?.total;
-        }
-        throw new Error('获取数据失败');
-      }),
-   
+        return res?.data?.data?.records?.[0]?.total;
+      }
+      throw new Error('获取数据失败');
+    }),
   );
   const commonValueStyle = {
     background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)',
@@ -104,17 +115,18 @@ const WasteDisposal: React.FC = () => {
           <img src={industry2_1} alt="" className={styles.bgImage} />
           <Flex gap={35}>
             <DescriptionItem
-              // value={14.05}
+               value={infoData?.total}
               name="本月处置总量"
               unit="万吨"
               valueStyle={commonValueStyle}
               labelStyle={commonLabelStyle}
               unitStyle={commonUnitStyle}
               decimals={2}
+              onClick={handleLivingGarbageClick}
               style={commonStyle}
             />
             <DescriptionItem
-              // value={56.82}
+               value={infoData?.fsl}
               name="本月焚烧量"
               unit="万吨"
               valueStyle={commonValueStyle}
@@ -122,9 +134,10 @@ const WasteDisposal: React.FC = () => {
               unitStyle={commonUnitStyle}
               decimals={2}
               style={commonStyle}
+              onClick={handleLivingGarbageClick}
             />
             <DescriptionItem
-              // value={56.82}
+                value={infoData?.tml}
               name="本月填埋量"
               unit="万吨"
               valueStyle={commonValueStyle}
@@ -158,6 +171,7 @@ const WasteDisposal: React.FC = () => {
               unitStyle={commonUnitStyle}
               decimals={2}
               style={commonStyle}
+              onClick={handleClick}
             />
             <DescriptionItem
               value={dumpTotal}
diff --git a/src/pages/OverviewHome/index.tsx b/src/pages/OverviewHome/index.tsx
index 23e41c72a75977187f9a149f618721c096bc044e..a27e8b462723124a08ee9298e70ef3384456f8dd 100644
--- a/src/pages/OverviewHome/index.tsx
+++ b/src/pages/OverviewHome/index.tsx
@@ -2,7 +2,7 @@ import Header from '@/layouts/Header';
 import React from 'react';
 import NewLeftSidebar from '../NewHome/NewLeftSidebar';
 import NewRightContent from '../NewHome/NewRightContent';
-import MapCantainer from '../SecurityServiceOverview/components/MapCantainer';
+import MapCantainer from '../NewHome/MapCantainer';
 import styles from './index.less';
 
 //左右位置零时跟换