diff --git a/src/api/api/index.ts b/src/api/api/index.ts
index 14fc701..64bdb21 100644
--- a/src/api/api/index.ts
+++ b/src/api/api/index.ts
@@ -347,3 +347,13 @@
     method: 'post',
   })
 }
+// 获取区域点位信息
+export function getAreaPosition(id: any) {
+  return request({
+    url: '/api/carbon/area',
+    method: 'post',
+    data: {
+      params: [id],
+    },
+  })
+}

diff --git a/src/api/api/index.ts b/src/api/api/index.ts
index 14fc701..64bdb21 100644
--- a/src/api/api/index.ts
+++ b/src/api/api/index.ts
@@ -347,3 +347,13 @@
     method: 'post',
   })
 }
+// 获取区域点位信息
+export function getAreaPosition(id: any) {
+  return request({
+    url: '/api/carbon/area',
+    method: 'post',
+    data: {
+      params: [id],
+    },
+  })
+}
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 62cbbd3..cf07cce 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,8 @@
 import infoDetail from './infoWindow.vue'
 import infoDetail2 from './infoWindow2.vue'
 import infoDetailHot from './infoWindowHot.vue'
-import { electricityBranch, electricityNode, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
+import { getDictByCode } from '@/api/system/dict'
+import { electricityBranch, electricityNode, getAreaPosition, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
 const publicPath = import.meta.env.BASE_URL
 // 设置安全密钥
 window._AMapSecurityConfig = {
@@ -374,12 +375,69 @@
   //   }
   // })
 })
+const area = ref('')
+const areaList = ref([])
+// 获取分区列表
+const fetchAreaList = () => {
+  getDictByCode('ptn_type').then((res) => {
+    areaList.value = res.data
+  })
+}
+fetchAreaList()
+const areaMarkerList = ref()
+const polygons = ref()
+// 绘制区域
+const drawArea = (markerList: any, color: string) => {
+  const polygon = new AMap1.value.Polygon({
+    path: markerList,
+    fillColor: color,
+    strokeOpacity: 1,
+    fillOpacity: 0.5,
+    strokeColor: '#2b8cba',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+  })
+  polygons.value = polygon
+  map.value.add(polygon)
+}
+// 删除绘制
+const clearDraw = () => {
+  if (polygons.value) {
+    map.value.remove(polygons.value)
+    area.value = ''
+  }
+}
+// 监听分区变化
+watch(() => area.value, (newVal) => {
+  if (polygons.value) {
+    map.value.remove(polygons.value)
+  }
+  if (!newVal) {
+    return
+  }
+  getAreaPosition(newVal).then((res) => {
+    const color = {
+      1: '#2b8cbe',
+      2: '#ccebc5',
+      3: '#7bccc4',
+    }
+    areaMarkerList.value = res.data
+    if (res.data.length) {
+      areaMarkerList.value.push(res.data[0])
+      const data = areaMarkerList.value.map(item => ([Number(item.lng), Number(item.lat)]))
+      drawArea(data, color[newVal])
+    }
+  })
+})
 // 用电检测/用热监测 默认用电
 const flagType = ref(true)
 // 切换用电检测/用热监测
 const changeFlagType = () => {
   map.value.clearMap()
   map.value.setCenter([111.765785, 40.718114])
+  // 区域框展示
+  area.value = ''
   if (flagType.value) {
     useHot()
   }
@@ -396,6 +454,13 @@
   <info-detail ref="windowInfoRef" />
   <info-detail2 ref="windowInfoRef2" />
   <info-detail-hot ref="windowInfoHotRef" />
+  <div class="btns">
+    <el-radio-group v-model="area">
+      <el-radio-button v-for="item in areaList" :key="item.id" :label="item.value" @dblclick="clearDraw">
+        {{ item.name }}
+      </el-radio-button>
+    </el-radio-group>
+  </div>
 </template>
 
 <style scoped>
@@ -406,6 +471,12 @@
   margin: 0;
   font-family: "微软雅黑";
 }
+
+.btns {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+}
 </style>
 
 <style>