diff --git a/src/views/project/projectIndex/index.vue b/src/views/project/projectIndex/index.vue
index 5393948..87849dd 100644
--- a/src/views/project/projectIndex/index.vue
+++ b/src/views/project/projectIndex/index.vue
@@ -23,11 +23,19 @@
         </div>
         <!-- 管控分区图例 -->
         <div class="arealegendList">
-          <el-radio-group v-model="selectedArea" @change="changeAreaLegend">
+          <div class="part" v-for="item in gkfqLegendList" :key="item.layername" @click="changeAreaLegend(item)">
+            <p class="title">{{ item.name }}</p>
+            <div class="iconImg">
+              <el-icon v-if="item.isCheck" size="22">
+                <Check />
+              </el-icon>
+            </div>
+          </div>
+          <!-- <el-radio-group v-model="selectedArea" @change="changeAreaLegend">
             <el-radio :label="'GKFQ1'">管控分区一级</el-radio>
             <el-radio :label="'GKFQ2'">管控分区二级</el-radio>
             <el-radio :label="'GKFQ3'">管控分区三级</el-radio>
-          </el-radio-group>
+          </el-radio-group> -->
         </div>
       </div>
       <!--  暂不做切换事件，初设需要 -->
@@ -148,6 +156,23 @@
 const selectedRaster = ref([]);
 const rasterData = ref({});
 const PopupShow = ref(false);
+const gkfqLegendList = ref([
+  {
+    layername: 'GKFQ1',
+    name: '管控分区一级',
+    isCheck: false,
+  },
+  {
+    layername: 'GKFQ2',
+    name: '管控分区二级',
+    isCheck: false,
+  },
+  {
+    layername: 'GKFQ3',
+    name: '管控分区三级',
+    isCheck: false,
+  },
+]);
 const projectData = ref({
   xAxisData: [],
   seriesData: [
@@ -418,19 +443,39 @@
 let gkfqList = ['GKFQ1', 'GKFQ2', 'GKFQ3'];
 const changeAreaLegend = value => {
   closePopup();
-  selectedArea.value = value;
+  selectedArea.value = value.layername;
+  gkfqLegendList.value.map(i => {
+    if (value.layername == i.layername) {
+      i.isCheck = !i.isCheck;
+    } else {
+      i.isCheck = false;
+    }
+  });
   if (selectedArea.value == 'GKFQ1') {
-    kaifengPSFQarea.addPSFQ1(newfiberMapbox.map, 0, 24, 'visible');
-    kaifengPSFQarea.removePSFQ2(newfiberMapbox.map);
-    kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
+    if (value.isCheck) {
+      kaifengPSFQarea.addPSFQ1(newfiberMapbox.map, 0, 24, 'visible');
+      kaifengPSFQarea.removePSFQ2(newfiberMapbox.map);
+      kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
+    } else {
+      kaifengPSFQarea.removePSFQ1(newfiberMapbox.map);
+    }
   } else if (selectedArea.value == 'GKFQ2') {
-    kaifengPSFQarea.addPSFQ2(newfiberMapbox.map, 0, 24, 'visible');
-    kaifengPSFQarea.removePSFQ1(newfiberMapbox.map);
-    kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
+    if (value.isCheck) {
+      kaifengPSFQarea.addPSFQ2(newfiberMapbox.map, 0, 24, 'visible');
+      kaifengPSFQarea.removePSFQ1(newfiberMapbox.map);
+      kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
+      kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
+    } else {
+      kaifengPSFQarea.removePSFQ2(newfiberMapbox.map);
+    }
   } else {
-    kaifengPSFQarea.addPSFQ3(newfiberMapbox.map, 0, 'visible');
-    kaifengPSFQarea.removePSFQ1(newfiberMapbox.map);
-    kaifengPSFQarea.removePSFQ2(newfiberMapbox.map);
+    if (value.isCheck) {
+      kaifengPSFQarea.addPSFQ3(newfiberMapbox.map, 0, 'visible');
+      kaifengPSFQarea.removePSFQ1(newfiberMapbox.map);
+      kaifengPSFQarea.removePSFQ2(newfiberMapbox.map);
+    } else {
+      kaifengPSFQarea.removePSFQ3(newfiberMapbox.map);
+    }
   }
   // selectedRaster.value = gkfqList.filter(item => item == selectedArea.value);
   // let unselectedRaster = gkfqList.filter(item => item != selectedArea.value);
@@ -554,9 +599,8 @@
 onMounted(() => {
   getData();
   getProjectTypeList();
-  getHomePageInfoByTypes(1);
+  //getHomePageInfoByTypes(1);
   setTimeout(() => {
-    changeAreaLegend('GKFQ1');
     newfiberMapbox.map.on('click', function (e) {
       rasterLayerClick(e);
     });
@@ -639,20 +683,29 @@
     right: 25%;
     z-index: 110;
     padding: 10px;
-    .areaLegend_item {
-      .part {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        &:hover {
-          background: #08596a;
-        }
-        .title {
-          margin: 0px 5px 0px 5px;
-          font-size: 14px;
-        }
-        .legbox {
-          margin-right: 10px;
+    .part {
+      display: flex;
+      height: 40px;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background: #08596a;
+      }
+      .title {
+        margin-left: 5px;
+        font-size: 14px;
+        height: 30px;
+        line-height: 30px;
+        width: 125px;
+      }
+      .iconImg {
+        width: 20px;
+        height: 20px;
+        .el-icon {
+          font-weight: bold;
+          &.active {
+            color: #00ee6f;
+          }
         }
       }
     }