diff --git a/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png b/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png
new file mode 100644
index 0000000..4e747dc
--- /dev/null
+++ b/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png
Binary files differ

diff --git a/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png b/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png
new file mode 100644
index 0000000..4e747dc
--- /dev/null
+++ b/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 1a8b8fb..ca35a6d 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -28,7 +28,7 @@
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
 
-    <!-- 项目类型色块 -->
+    <!-- 项目建设-项目类型色块 -->
     <div :class="['projectPart', showPanel ? 'right80' : 'right520']" v-if="menuIndex == 2">
       <div class="part">
         <div class="color1"></div>
@@ -55,6 +55,7 @@
         管网及泵站
       </div>
     </div>
+    
 
     <!-- 项目分区建议 -->
     <el-dialog v-model="showProjectArea" title="项目分区建议" style="width: 850px" append-to-body>

diff --git a/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png b/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png
new file mode 100644
index 0000000..4e747dc
--- /dev/null
+++ b/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 1a8b8fb..ca35a6d 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -28,7 +28,7 @@
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
 
-    <!-- 项目类型色块 -->
+    <!-- 项目建设-项目类型色块 -->
     <div :class="['projectPart', showPanel ? 'right80' : 'right520']" v-if="menuIndex == 2">
       <div class="part">
         <div class="color1"></div>
@@ -55,6 +55,7 @@
         管网及泵站
       </div>
     </div>
+    
 
     <!-- 项目分区建议 -->
     <el-dialog v-model="showProjectArea" title="项目分区建议" style="width: 850px" append-to-body>
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index a3322ec..75930a1 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -8,7 +8,7 @@
     <div class="ConstrucClass">
       <div class="WaterList">
         <div class="DropdownBox">
-          <div class="analysis" @click="changeProject">
+          <div class="analysis">
             <img :src="xmfx" alt="" class="ICON_zp" />
             <span>项目分析</span>
           </div>
@@ -78,7 +78,10 @@
   { name: '金明品质提升示范片区', value: '3', lonlat: [114.285, 34.799] },
 ]);
 const projectFx = ref('1');
-const XmList = ref([{ name: '汴京路管网及道路海绵化改造', value: '1' }]);
+const XmList = ref([
+  { name: '汴京路管网及道路海绵化改造', projectNo: 'GW06', value: '0', lon: 114.378601, lat: 34.793947 },
+  { name: '金明池片区活化利用及业态提升项目', projectNo: 'XMBH20241218-00001', value: '1', lon: 114.296166, lat: 34.802046 },
+]);
 const dateRain = ref('');
 //海绵设施列表-汴京路
 const hmssList = ref([]);
@@ -218,11 +221,10 @@
 }
 
 // 典型项目点击
-function changeProject(val) {
-  bus.emit('checkProjectFX', { project: XmList.value[val] });
-
+function changeProject(index) {
+  // 地图移动过去
   newfiberMapbox.map.easeTo({
-    center: [114.378601, 34.793947],
+    center: [XmList.value[index].lon, XmList.value[index].lat],
     zoom: 15.2,
     pitch: 30,
   });

diff --git a/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png b/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png
new file mode 100644
index 0000000..4e747dc
--- /dev/null
+++ b/src/assets/newImgs/layerIcon/xiaChenShiLvDi.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 1a8b8fb..ca35a6d 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -28,7 +28,7 @@
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
 
-    <!-- 项目类型色块 -->
+    <!-- 项目建设-项目类型色块 -->
     <div :class="['projectPart', showPanel ? 'right80' : 'right520']" v-if="menuIndex == 2">
       <div class="part">
         <div class="color1"></div>
@@ -55,6 +55,7 @@
         管网及泵站
       </div>
     </div>
+    
 
     <!-- 项目分区建议 -->
     <el-dialog v-model="showProjectArea" title="项目分区建议" style="width: 850px" append-to-body>
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index a3322ec..75930a1 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -8,7 +8,7 @@
     <div class="ConstrucClass">
       <div class="WaterList">
         <div class="DropdownBox">
-          <div class="analysis" @click="changeProject">
+          <div class="analysis">
             <img :src="xmfx" alt="" class="ICON_zp" />
             <span>项目分析</span>
           </div>
@@ -78,7 +78,10 @@
   { name: '金明品质提升示范片区', value: '3', lonlat: [114.285, 34.799] },
 ]);
 const projectFx = ref('1');
-const XmList = ref([{ name: '汴京路管网及道路海绵化改造', value: '1' }]);
+const XmList = ref([
+  { name: '汴京路管网及道路海绵化改造', projectNo: 'GW06', value: '0', lon: 114.378601, lat: 34.793947 },
+  { name: '金明池片区活化利用及业态提升项目', projectNo: 'XMBH20241218-00001', value: '1', lon: 114.296166, lat: 34.802046 },
+]);
 const dateRain = ref('');
 //海绵设施列表-汴京路
 const hmssList = ref([]);
@@ -218,11 +221,10 @@
 }
 
 // 典型项目点击
-function changeProject(val) {
-  bus.emit('checkProjectFX', { project: XmList.value[val] });
-
+function changeProject(index) {
+  // 地图移动过去
   newfiberMapbox.map.easeTo({
-    center: [114.378601, 34.793947],
+    center: [XmList.value[index].lon, XmList.value[index].lat],
     zoom: 15.2,
     pitch: 30,
   });
diff --git a/src/views/sponeScreen/projectHM/index.vue b/src/views/sponeScreen/projectHM/index.vue
index 70ebe40..5367b3c 100644
--- a/src/views/sponeScreen/projectHM/index.vue
+++ b/src/views/sponeScreen/projectHM/index.vue
@@ -13,15 +13,29 @@
       <!--项目评估  -->
       <ProjectEvaluation></ProjectEvaluation>
     </div>
+
+    <!-- 典型项目CAD图例说明 -->
+    <div :class="['tuli_data_list', showPanel ? 'left20' : 'left480']">
+      <div class="tuli_title">图例说明</div>
+      <div class="tuli_content">
+        <div class="flex list flex-justcontent-start flex-align-center" v-for="(item, index) in tuLiList" :key="index">
+          <div class="img_icon flex" v-if="item.icon">
+            <img :src="getImageUrl(item.icon, 'newImgs/layerIcon')" />
+          </div>
+          <div v-else :class="item.iconName"></div>
+          <p class="title" :title="item.layerName">{{ item.layerName }}</p>
+        </div>
+      </div>
+    </div>
   </div>
 
   <!-- 项目详情 -->
-  <qipao v-if="visibleqipao" @closed="closed" :allDateList="allDate"></qipao>
+  <qipao v-if="visibleqipao" @closed="closed" :allDateList="allData"></qipao>
 </template>
 <script setup>
+import { getImageUrl } from '@/utils/ruoyi';
 import CaldarRain from '@/views/sponeScreen/waterFlood/rainCaldar.vue'; //降雨日历
 import ConstructionStatus from '@/views/sponeScreen/projectHM/ConstructionStatus.vue'; //建设状态
-import ProjectYype from '@/views/sponeScreen/projectHM/ProjectYype.vue'; //建设状态
 import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay.vue'; //项目展示
 import ProjectEvaluation from '@/views/sponeScreen/projectHM/ProjectEvaluation.vue'; //项目评估
 import qipao from '@/views/sponeScreen/projectHM/gongchenkanbani_comp/qipao.vue';
@@ -30,7 +44,19 @@
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
 const visibleqipao = ref(false);
-const allDate = ref({});
+const allData = ref({});
+//项目及设施图例
+const tuLiList = [
+  { icon: '', layerName: '红线范围', iconName: 'hongXianFanWei' },
+  { icon: '', layerName: '生态停车位（透水铺装）', iconName: 'shengTaiTingCheWei' },
+  { icon: '', layerName: '植草沟-CG', iconName: 'zhiCaoGou' },
+  { icon: '', layerName: '雨水花园-YH', iconName: 'yuShuiHuaYuan' },
+  { icon: '', layerName: '透水铺装', iconName: 'touShuiPuZhuang' },
+  { icon: '', layerName: '蓄水池', iconName: 'xuShuiChi' },
+  { icon: 'xiaChenShiLvDi.png', layerName: '下沉市绿地-AD', iconName: '' },
+  { icon: '', layerName: '非直排雨水管', iconName: 'feiZhiPaiYuShuiGuan' },
+  { icon: '', layerName: '直排雨水管', iconName: 'zhiPaiYuShuiGuan' },
+];
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -47,7 +73,7 @@
 );
 function qipaoDateMeth(v, isShow) {
   visibleqipao.value = false;
-  allDate.value = v;
+  allData.value = v;
   setTimeout(() => {
     if (isShow) {
       visibleqipao.value = true;
@@ -73,5 +99,131 @@
 <style lang="scss" scoped>
 .publicContainer {
   position: relative;
+  .left20 {
+    left: 20px;
+  }
+  .left480 {
+    left: 480px;
+  }
+  .tuli_data_list {
+    position: fixed;
+    width: auto;
+
+    bottom: 60px;
+    z-index: 99;
+    background: linear-gradient(0deg, rgba(11, 71, 113, 0.9) 0%, rgba(22, 83, 126, 0.8) 100%);
+    border-radius: 4px;
+    border: 1px solid #42a4ef;
+    transition: all 0.5s;
+    background-size: 100% 100%;
+
+    .tuli_title {
+      line-height: 40px;
+      text-align: center;
+      font-size: 16px;
+      color: #ffffff;
+    }
+
+    .tuli_content {
+      padding: 0 10px 10px 10px;
+      height: 100%;
+      overflow: auto;
+
+      .list {
+        width: 100%;
+        color: #dfdada;
+        font-size: 14px;
+        height: 30px;
+
+        .img_icon {
+          width: 35px;
+
+          img {
+            width: 100%;
+          }
+        }
+
+        .hongXianFanWei {
+          width: 35px;
+          height: 3px;
+          border: 3px dashed #e30013;
+        }
+
+        .shengTaiTingCheWei {
+          width: 35px;
+          height: 8px;
+          background-color: #514cff;
+        }
+
+        .zhiCaoGou {
+          width: 35px;
+          height: 8px;
+          background-color: #7cc961;
+        }
+
+        .yuShuiHuaYuan {
+          width: 35px;
+          height: 8px;
+          background-color: #ff4cff;
+        }
+
+        .touShuiPuZhuang {
+          width: 35px;
+          height: 8px;
+          background-color: #9b9b9b;
+        }
+
+        .xuShuiChi {
+          width: 35px;
+          height: 8px;
+          background-color: #fed65d;
+        }
+
+        .lvDi {
+          width: 35px;
+          height: 8px;
+          background-color: #2398d4;
+        }
+
+        .feiZhiPaiYuShuiGuan {
+          width: 35px;
+          height: 18px;
+          position: relative;
+
+          &::after {
+            position: absolute;
+            left: 50%;
+            margin-left: -9px;
+            content: '';
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background-color: #fd00fc;
+          }
+        }
+
+        .zhiPaiYuShuiGuan {
+          width: 35px;
+          height: 18px;
+          position: relative;
+
+          &::after {
+            position: absolute;
+            left: 50%;
+            margin-left: -9px;
+            content: '';
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background-color: #22cf3f;
+          }
+        }
+
+        .title {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
 }
 </style>