diff --git a/src/views/pictureOnMap/LayerControl.vue b/src/views/pictureOnMap/LayerControl.vue
index 5b61150..634846e 100644
--- a/src/views/pictureOnMap/LayerControl.vue
+++ b/src/views/pictureOnMap/LayerControl.vue
@@ -26,7 +26,15 @@
         </el-tree>
       </div>
       <div class="reset" @click="reset">恢复默认</div>
-
+      <div class="GWlegend">
+    <div class="legend-title">{{legendList.pipeNetworkFilling.title}}</div>
+    <div class="flex flex-align-center flex-wrap" >
+    <div class="legend-item flex flex-align-center " style="width:50%;" v-for="item in legendList.pipeNetworkFilling.data" :key="item.name">
+      <div class="icon"  :style="{background:item.color}"></div>
+      <div class="name">{{ item.name }}</div>
+    </div>
+    </div>
+  </div>
     </div>
   </div>
 </template>
@@ -244,7 +252,20 @@
     ],
   },
 ]);
+  const legendList={
+  pipeNetworkFilling:{
+    title:'管网充满度(%)',
+    data:[
+      { name: "0-60", color: "rgba(52,176,0,1)" },
+      { name: "60-70", color: "rgba(254,203,0,1)" },
+      { name: "70-90", color: "rgba(223,1,0,1)" },
+      { name: ">90", color: "rgba(142,14,11,1)" },
+    ],
+  },
 
+
+
+}
 const allData = reactive({
   showControlBox: false, //控制图层控制是否展示和隐藏
 });
@@ -591,4 +612,25 @@
   font-size: 14px;
   color: #63cdff;
 }
+ .GWlegend{
+    box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.35);
+    border-radius: 4px;
+    padding:10px;
+    overflow: hidden;
+     .legend-title{
+    line-height:30px;
+    font-size: 16px;
+    text-align: center;
+  }
+  .legend-item{
+    height:30px;
+    font-size: 14px;
+  }
+  .icon{
+    width:12px;
+    height:12px;
+    margin-right: 5px;
+    
+  }
+  }
 </style>