diff --git a/src/assets/imgs/indexPage/yanjing_xianshi_o.png b/src/assets/imgs/indexPage/yanjing_xianshi_o.png
new file mode 100644
index 00000000..ed7b7eec
Binary files /dev/null and b/src/assets/imgs/indexPage/yanjing_xianshi_o.png differ
diff --git a/src/assets/imgs/indexPage/yanjing_yincang_o.png b/src/assets/imgs/indexPage/yanjing_yincang_o.png
new file mode 100644
index 00000000..1c754799
Binary files /dev/null and b/src/assets/imgs/indexPage/yanjing_yincang_o.png differ
diff --git a/src/assets/imgs/indexPage/zhankai@2x.png b/src/assets/imgs/indexPage/zhankai@2x.png
new file mode 100644
index 00000000..a82c225b
Binary files /dev/null and b/src/assets/imgs/indexPage/zhankai@2x.png differ
diff --git a/src/assets/imgs/indexPage/编组 12.png b/src/assets/imgs/indexPage/编组 12.png
new file mode 100644
index 00000000..28378388
Binary files /dev/null and b/src/assets/imgs/indexPage/编组 12.png differ
diff --git a/src/assets/imgs/indexPage/编组 14.png b/src/assets/imgs/indexPage/编组 14.png
new file mode 100644
index 00000000..3992dd1e
Binary files /dev/null and b/src/assets/imgs/indexPage/编组 14.png differ
diff --git a/src/assets/imgs/indexPage/编组 15.png b/src/assets/imgs/indexPage/编组 15.png
new file mode 100644
index 00000000..4b4acd3f
Binary files /dev/null and b/src/assets/imgs/indexPage/编组 15.png differ
diff --git a/src/assets/imgs/indexPage/编组 22.png b/src/assets/imgs/indexPage/编组 22.png
new file mode 100644
index 00000000..90d0ff19
Binary files /dev/null and b/src/assets/imgs/indexPage/编组 22.png differ
diff --git a/src/utils/drag.ts b/src/utils/drag.ts
index c4765e7d..5c08d990 100644
--- a/src/utils/drag.ts
+++ b/src/utils/drag.ts
@@ -2,7 +2,7 @@
 export const vDrag = {
     mounted(el, binding) {
         const enableDrag = binding.value; // 获取指令绑定的值
-        if (!enableDrag) return; // 如果为 false，则不执行后续拖拽逻辑
+        // if (!enableDrag) return; // 如果为 false，则不执行后续拖拽逻辑
         el.style.position = 'absolute';
 
         // 记录元素的初始位置
@@ -39,8 +39,16 @@ export const vDrag = {
         // 保存初始位置，以便后续还原
         el.__vDragInitialTop = initialTop;
         el.__vDragInitialLeft = initialLeft;
+        if(!enableDrag){
+             // 如果之前启用，现在禁用，移除 mousedown 事件监听器
+             el.removeEventListener('mousedown', el.__vDragMousedown);
+             // 确保在禁用时停止正在进行的拖拽
+             document.removeEventListener('mousemove', el.__vDragMousemove);
+             document.removeEventListener('mouseup', el.__vDragMouseup);
+        }
     },
     updated(el, binding) {
+        console.log('会走这边吗');
         const enableDrag = binding.value;
         const prevEnableDrag = binding.oldValue;
 
@@ -65,6 +73,7 @@ export const vDrag = {
 
 // 定义一个还原位置的函数
 export const resetDragPosition = (el) => {
+    console.log(el);
     if (el.__vDragInitialTop!== undefined && el.__vDragInitialLeft!== undefined) {
         el.style.top = `${el.__vDragInitialTop}px`;
         el.style.left = `${el.__vDragInitialLeft}px`;
diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue
index 2284fce7..515674a2 100644
--- a/src/views/mapPage/realTimeMap/components/indexPage.vue
+++ b/src/views/mapPage/realTimeMap/components/indexPage.vue
@@ -1,35 +1,17 @@
 <template>
-  <div class="affix-container" :style="{ height: (heightVal*radio ) + 'px'}">
-    <!-- <el-affix target=".affix-container" :offset="80">
-      <span @click="resetPosition ">回到原点</span>
-      <div class="affix-container-top">
-        <el-scrollbar>
-          <div class="scrollbar-flex-content">
-            <el-dropdown
-              placement="bottom"
-              v-for="(item, index) in list"
-              :key="index"
-              style="border: none"
-            >
-              <div class="scrollbar-demo-item">
-                {{ item.floor }}
-              </div>
-              <template #dropdown v-if="item.children && item.children.length">
-                <el-dropdown-menu style="width: 100px">
-                  <el-dropdown-item
-                    v-for="(p, i) in item.children"
-                    :key="i"
-                    @click="getMapData(p)"
-                    >{{ p.area }}</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </div>
-        </el-scrollbar>
-      </div>
-    </el-affix> -->
-    <div class="indexpage-container" v-if="imgUrl" v-drag="true" :style="{scale:1,transformOrigin:'0 0'}"  ref="draggableElement">
+  <div
+    class="affix-container"
+    id="indexpage-container"
+    :style="{ height: heightVal * radio + 'px',cursor:isDrag ? 'pointer' : 'default',scale:isSizeRaio,transformOrigin: 'center center' }"
+  >
+  
+    <div
+      class="indexpage-container"
+      v-if="imgUrl"
+      v-drag="isDrag"
+      :style="{ scale: 1, transformOrigin: '0 0' }"
+      ref="draggableElement"
+    >
       <div class="indexpage-container-box">
         <img :src="imgUrl" alt="" class="indexpage-container-box-img" />
 
@@ -51,17 +33,23 @@
           >
           </div> -->
           <!-- 小车 -->
-          <div class="indexpage-car-item" 
-              v-for="(item, index) in testCarList" 
-              @dblclick="carDbClick(item,index)"
-              :key="index" 
-              :style="{
+          <div
+            class="indexpage-car-item"
+            v-for="(item, index) in testCarList"
+            @dblclick="carDbClick(item, index)"
+            :key="index"
+            :style="{
               left: item.realX * radio + 'px',
               top: item.realY * radio + 'px',
               width: 40 * radio + 'px',
-              height: 22 * radio + 'px',
-            }">
-            <img src="@/assets/imgs/indexPage/chache-4备份 7@2x.png" alt="" style="width: 100%; height: 100%" />
+              height: 22 * radio + 'px'
+            }"
+          >
+            <img
+              src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
+              alt=""
+              style="width: 100%; height: 100%"
+            />
           </div>
           <div
             class="indexpage-container-box-point-item"
@@ -135,20 +123,84 @@
       </div>
     </div>
   </div>
+    <!-- 左下角图例 -->
+    <div class="affix-container-left" :style="{ left: boxLeft + 'px' }">
+      <div class="affix-container-left-box">
+        <div class="affix-container-left-box-item-box" :style="{ height: legendObj.legendShow ? '84px' : '0', overflow: 'hidden',transition: 'all 0.3s ease-in-out'}">
+          <div class="affix-container-left-box-item">
+            <div class="affix-container-left-box-item-left"> 行驶路线 </div>
+            <img
+              src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
+              alt=""
+              class="affix-container-left-box-item-img"
+              v-if="legendObj.driveLineShow"
+              @click="changDriveLineShow"
+            />
+            <img src="@/assets/imgs/indexPage/yanjing_yincang_o.png" alt="" class="affix-container-left-box-item-img"  v-if="!legendObj.driveLineShow" @click="changDriveLineShow"/>
+          </div>
+          <div class="affix-container-left-box-item">
+            <div class="affix-container-left-box-item-left"> 车辆 </div>
+            <img
+              src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
+              alt=""
+              class="affix-container-left-box-item-img"
+              v-if="legendObj.carShow"
+               @click="changCarShow"
+            />
+            <img src="@/assets/imgs/indexPage/yanjing_yincang_o.png" alt="" class="affix-container-left-box-item-img" v-if="!legendObj.carShow" @click="changCarShow"/>
+          </div>
+        </div>
+        <div class="affix-container-left-box-item-bottom" @click="legendObj.legendShow = !legendObj.legendShow">
+           <div class="affix-container-left-box-item-bottom-left">
+               图例
+           </div>
+           <img src="@/assets/imgs/indexPage/zhankai@2x.png" alt="" class="affix-container-left-box-item-bottom-img" :style="{transform: legendObj.legendShow ? 'rotate(180deg)' : 'rotate(0deg)',transition: 'all 0.3s ease-in-out'}"/>
+         </div>
+      </div>
+    </div>
+
+    <!-- 右下角的功能 -->
+     <div  class="affix-container-right">
+       <!-- 拖拽 -->
+         <div class="affix-container-right-item" @click="changeIsDrag">
+            <img src="@/assets/imgs/indexPage/编组 12.png" alt="" style="width: 100%;height: 100%;" />
+         </div>
+         <!-- 放大 -->
+         <div class="affix-container-right-item">
+            <img src="@/assets/imgs/indexPage/编组 14.png" alt="" style="width: 100%;height: 100%;" @click="changeSizeRaio(0.2)"/>
+         </div>
+         <!-- 缩小 -->
+         <div class="affix-container-right-item">
+            <img src="@/assets/imgs/indexPage/编组 15.png" alt="" style="width: 100%;height: 100%;"  @click="changeSizeRaio(-0.2)"/>
+         </div>
+         <!-- 全屏 -->
+         <div class="affix-container-right-item">
+            <img src="@/assets/imgs/indexPage/编组 22.png" alt="" style="width: 100%;height: 100%;" @click="toggleFullScreen" />
+         </div>
+     </div>
   <storeDialog ref="storeDialogRef" @success="getList" />
-  <carDialog ref="carDialogRef"  />
+  <carDialog ref="carDialogRef" />
 </template>
 
 <script setup>
-import { ref, defineComponent, reactive, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import {
+  ref,
+  defineComponent,
+  reactive,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  onUnmounted,
+} from 'vue'
 import * as MapApi from '@/api/map/map'
 import WebSocketClient from '../webSocket.js'
 import storeDialog from './storeDialog.vue'
 import { color } from 'echarts'
-import {  resetDragPosition } from '@/utils/drag'
+import { resetDragPosition } from '@/utils/drag'
 import carDialog from './carDialog.vue'
+import { is } from 'bpmn-js/lib/util/ModelUtil'
 const imgUrl = ref('')
-const carDialogRef = ref(null)  
+const carDialogRef = ref(null)
 const socketClient = ref(null)
 
 const emit = defineEmits(['transmitMapId'])
@@ -157,7 +209,11 @@ const list = ref([])
 const nowObject = ref(null)
 const testCarList = ref([])
 const carPointListFun = () => {
-  let testJson = {"type":"map_push","content":"{\"d0:65:78:c4:af:cc\":\"{\\\"id\\\":1,\\\"macAddress\\\":\\\"d0:65:78:c4:af:cc\\\",\\\"robotModelNumber\\\":\\\"A-1\\\",\\\"pose2d\\\":{\\\"y\\\":\\\"1\\\",\\\"x\\\":\\\"2\\\",\\\"yaw\\\":\\\"30\\\",\\\"floor\\\":\\\"1\\\",\\\"area\\\":\\\"A区\\\",\\\"bat_soc\\\":\\\"40\\\"}}\"}"}
+  let testJson = {
+    type: 'map_push',
+    content:
+      '{"d0:65:78:c4:af:cc":"{\\"id\\":1,\\"macAddress\\":\\"d0:65:78:c4:af:cc\\",\\"robotModelNumber\\":\\"A-1\\",\\"pose2d\\":{\\"y\\":\\"1\\",\\"x\\":\\"2\\",\\"yaw\\":\\"30\\",\\"floor\\":\\"1\\",\\"area\\":\\"A区\\",\\"bat_soc\\":\\"40\\"}}"}'
+  }
   let data = JSON.parse(testJson.content)
   // console.log("============",data)
   let dataList = []
@@ -167,12 +223,125 @@ const carPointListFun = () => {
       data: JSON.parse(data[key])
     })
   }
-  console.log("=====",dataList)
+  console.log('=====', dataList)
   testCarList.value = dataList
 
   // let data2 = JSON.parse(data['d0:65:78:c4:af:cc'])
   // console.log(data2)
 }
+//是否可以拖拽
+const isDrag = ref(false)
+const changeIsDrag = () => {
+  nextTick(() => {
+     isDrag.value = !isDrag.value
+  console.log(isDrag.value)
+  if(!isDrag.value){
+    //还原位置
+    resetPosition()
+  }
+  })
+ 
+}
+
+//放大缩小
+const isSizeRaio = ref(1)
+const changeSizeRaio = (type) => {
+  if(type<0 && (isSizeRaio.value + type) <= 0){
+    return
+  }
+  isSizeRaio.value += type
+}
+//图例状态
+const legendObj = reactive({
+  driveLineShow:false,
+  carShow:false,
+  legendShow:true
+})
+// 车辆是否显示
+const changCarShow = () => {
+  legendObj.carShow = !legendObj.carShow
+}
+// 车辆行驶路线是否展示
+const changDriveLineShow = () => {
+  legendObj.driveLineShow = !legendObj.driveLineShow
+}
+const toggleFullScreen = () => {
+  var elem = document.getElementById("indexpage-container"); // 获取元素
+  if (!document.fullscreenElement) { // 检查是否已经是全屏模式
+    if (elem.requestFullscreen) { // 支持requestFullscreen API的标准方式
+      elem.requestFullscreen().catch(err => {
+        alert(`无法进入全屏模式: ${err.message}`); // 处理错误情况
+      });
+    } else if (elem.mozRequestFullScreen) { // 旧版Firefox的API名称（已废弃）
+      elem.mozRequestFullScreen();
+    } else if (elem.webkitRequestFullscreen) { // WebKit/Safari/Chrome的API名称（已废弃）
+      elem.webkitRequestFullscreen();
+    } else if (elem.msRequestFullscreen) { // IE/Edge的API名称（已废弃）
+      elem.msRequestFullscreen();
+    }
+    isDrag.value = true
+  } else { // 退出全屏模式
+    if (document.exitFullscreen) { // 标准API退出全屏模式
+      document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) { // 旧版Firefox的API名称（已废弃）
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) { // WebKit/Safari/Chrome的API名称（已废弃）
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) { // IE/Edge的API名称（已废弃）
+      document.msExitFullscreen();
+    }
+    console.log('退出全屏')
+    isDrag.value = false
+    resetPosition()
+  }
+  // 监听全屏状态变化事件
+  document.addEventListener('fullscreenchange', function () {
+            if (!document.fullscreenElement) {
+                console.log('已退出全屏模式');
+                // 在这里可以添加退出全屏后的逻辑
+                isDrag.value = false
+                resetPosition()
+            } else {
+                console.log('已进入全屏模式');
+                // 在这里可以添加进入全屏后的逻辑
+                isDrag.value = true
+            }
+        });
+
+        // 监听旧版浏览器的全屏状态变化事件
+        document.addEventListener('mozfullscreenchange', function () {
+            if (!document.mozFullScreenElement) {
+                console.log('已退出全屏模式 (Firefox旧版)');
+                isDrag.value = false
+                resetPosition()
+            } else {
+                console.log('已进入全屏模式 (Firefox旧版)');
+                isDrag.value = true
+            }
+        });
+
+        document.addEventListener('webkitfullscreenchange', function () {
+            if (!document.webkitFullscreenElement) {
+                console.log('已退出全屏模式 (WebKit旧版)');
+                isDrag.value = false
+                resetPosition()
+            } else {
+                console.log('已进入全屏模式 (WebKit旧版)');
+                isDrag.value = true
+            }
+        });
+
+        document.addEventListener('msfullscreenchange', function () {
+            if (!document.msFullscreenElement) {
+                console.log('已退出全屏模式 (IE/Edge旧版)');
+                isDrag.value = false
+                resetPosition()
+            } else {
+                console.log('已进入全屏模式 (IE/Edge旧版)');
+                isDrag.value = true
+            }
+          });
+}
 //获取地图区域
 const getList = async () => {
   let data = await MapApi.getPositionMapGetMap()
@@ -185,15 +354,15 @@ const getList = async () => {
       children: data[key]
     })
   }
-  if(mapList.length){
-     mapList.forEach(item => {
-        if(item.children.length){
-          item.children.forEach(child => {
-            child.label = child.area
-            child.value = child.id
-          })
-        }
-     })
+  if (mapList.length) {
+    mapList.forEach((item) => {
+      if (item.children.length) {
+        item.children.forEach((child) => {
+          child.label = child.area
+          child.value = child.id
+        })
+      }
+    })
   }
 
   list.value = mapList
@@ -252,10 +421,10 @@ const getPositionMapListFun = async (positionMapId) => {
 }
 const draggableElement = ref(null)
 const resetPosition = () => {
-    if (draggableElement.value) {
-        resetDragPosition(draggableElement.value);
-    }
-};
+  if (draggableElement.value) {
+    resetDragPosition(draggableElement.value)
+  }
+}
 const calculateDistanceAndAngle = (point1, point2) => {
   // 计算水平和垂直方向的差值
   const dx = point2.left - point1.left
@@ -319,7 +488,7 @@ const disconnect = () => {
 }
 //获取扫描图
 const getMapData = async (item) => {
-  console.log("============",item)
+  // console.log("============",item)
   nowObject.value = JSON.parse(JSON.stringify(item))
   let websoketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`
   console.log(websoketUrl)
@@ -343,28 +512,33 @@ const radio = ref(1)
 const computedRatio = () => {
   nextTick(() => {
     if (imgUrl.value) {
-
-    //这段代码之后会删掉 yaml会给原始宽高
-    getImageSize(imgUrl.value)
-  .then(({ width, height }) => {
-    // console.log("原始地图的宽高",JSON.parse(nowObject.value.yamlJson))
-    if(testCarList.value.length){
-          testCarList.value.forEach((item) => {
-            item.originWidth = width
-            item.originHeight = height
-            item.origin = JSON.parse(nowObject.value.yamlJson).origin
-            item.realX = convertToFrontendCoordinates(item.origin, width, height, [item.data.pose2d.x, item.data.pose2d.y]).left
-            item.realY = convertToFrontendCoordinates(item.origin, width, height, [item.data.pose2d.x, item.data.pose2d.y]).top
-          })
-         console.log("当前数据",testCarList.value)
-        }
-    })
-  .catch((error) => {
-        console.error(error.message);
-    });
+      //这段代码之后会删掉 yaml会给原始宽高
+      getImageSize(imgUrl.value)
+        .then(({ width, height }) => {
+          // console.log("原始地图的宽高",JSON.parse(nowObject.value.yamlJson))
+          if (testCarList.value.length) {
+            testCarList.value.forEach((item) => {
+              item.originWidth = width
+              item.originHeight = height
+              item.origin = JSON.parse(nowObject.value.yamlJson).origin
+              item.realX = convertToFrontendCoordinates(item.origin, width, height, [
+                item.data.pose2d.x,
+                item.data.pose2d.y
+              ]).left
+              item.realY = convertToFrontendCoordinates(item.origin, width, height, [
+                item.data.pose2d.x,
+                item.data.pose2d.y
+              ]).top
+            })
+            console.log('当前数据', testCarList.value)
+          }
+        })
+        .catch((error) => {
+          console.error(error.message)
+        })
 
       let width = getElementWidthByClass('indexpage-container')
-      getImageWidth(imgUrl.value,'width').then((res) => {
+      getImageWidth(imgUrl.value, 'width').then((res) => {
         // console.log(res)
         let ratioVal = width / res
         radio.value = ratioVal
@@ -374,15 +548,14 @@ const computedRatio = () => {
             item.radio = radio.value
           })
         }
-        if(testCarList.value.length){
+        if (testCarList.value.length) {
           testCarList.value.forEach((item) => {
             item.radio = radio.value
-
           })
         }
       })
-      getImageWidth(imgUrl.value,'height').then((res) => {
-        console.log("高",res)
+      getImageWidth(imgUrl.value, 'height').then((res) => {
+        console.log('高', res)
         heightVal.value = res
       })
       // console.log(width)
@@ -390,45 +563,45 @@ const computedRatio = () => {
   })
 }
 
-const  getImageSize = (url) =>{
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.src = url;
-        // 图片加载成功时触发
-        img.onload = () => {
-            const width = img.width;
-            const height = img.height;
-            resolve({ width, height });
-        };
-        // 图片加载失败时触发
-        img.onerror = () => {
-            reject(new Error(`Failed to load image from URL 获取图片尺寸失败: ${url}`));
-        };
-    });
+const getImageSize = (url) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.src = url
+    // 图片加载成功时触发
+    img.onload = () => {
+      const width = img.width
+      const height = img.height
+      resolve({ width, height })
+    }
+    // 图片加载失败时触发
+    img.onerror = () => {
+      reject(new Error(`Failed to load image from URL 获取图片尺寸失败: ${url}`))
+    }
+  })
 }
 const convertToFrontendCoordinates = (origin, width, height, target) => {
-    // 提取原点的 x 和 y 坐标
-    const [originX, originY] = origin;
-    // 提取目标点的 x 和 y 坐标
-    const [targetX, targetY] = target;
+  // 提取原点的 x 和 y 坐标
+  const [originX, originY] = origin
+  // 提取目标点的 x 和 y 坐标
+  const [targetX, targetY] = target
 
-    // 计算目标点相对于原点在 x 方向上的偏移量
-    const offsetX = targetX - originX;
-    // 计算目标点相对于原点在 y 方向上的偏移量
-    const offsetY = targetY - originY;
+  // 计算目标点相对于原点在 x 方向上的偏移量
+  const offsetX = targetX - originX
+  // 计算目标点相对于原点在 y 方向上的偏移量
+  const offsetY = targetY - originY
 
-    // 计算前端页面中的 left 坐标
-    const left = offsetX;
-    // 计算前端页面中的 top 坐标，需要考虑坐标系的转换
-    const top = height - offsetY;
+  // 计算前端页面中的 left 坐标
+  const left = offsetX
+  // 计算前端页面中的 top 坐标，需要考虑坐标系的转换
+  const top = height - offsetY
 
-    return {
-        top,
-        left,
-        origin
-    };
+  return {
+    top,
+    left,
+    origin
+  }
 }
-const getImageWidth = (imageUrl,name) => {
+const getImageWidth = (imageUrl, name) => {
   return new Promise((resolve, reject) => {
     const img = new Image()
     img.onload = function () {
@@ -451,19 +624,62 @@ const getElementWidthByClass = (className) => {
   return null
 }
 //小车双击
-const carDbClick = (item,index) => {
+const carDbClick = (item, index) => {
   console.log(item)
   carDialogRef.value.open(JSON.parse(JSON.stringify(item)))
 }
+const boxLeft = ref(0)
+//获取元素距离左边的距离
+const getLeftPx = () => {
+  let indexpageContainer = document.getElementById('indexpage-container')
+  console.log('距离左边的距离', indexpageContainer.getBoundingClientRect().left)
+  boxLeft.value = indexpageContainer.getBoundingClientRect().left + 6
+}
+// 封装监听元素宽度变化的方法
+const observeWidthChange = (id, callback) => {
+  const targetElement = document.getElementById(id)
+  if (!targetElement) {
+    console.error(`未找到 ID 为 ${id} 的元素`)
+    return
+  }
+
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const newWidth = entry.contentRect.width
+      callback(newWidth)
+    }
+  })
+
+  resizeObserver.observe(targetElement)
+
+  return () => {
+    resizeObserver.disconnect()
+  }
+}
+
+let stopObserving
 defineExpose({ getMapData }) // 提供 open 方法，用于打开弹窗
 onMounted(() => {
   carPointListFun()
   // getList()
   window.addEventListener('resize', computedRatio)
+  stopObserving = observeWidthChange('indexpage-container', (newWidth) => {
+    // 在这里执行宽度变化时的自定义操作
+    // console.log(`元素宽度已变为: ${newWidth}px`);
+    // 你可以添加更多的操作，比如更新组件的状态等
+    getLeftPx()
+    computedRatio()
+  })
 })
 onBeforeUnmount(() => {
   window.removeEventListener('resize', computedRatio)
 })
+// 组件卸载时停止监听
+onUnmounted(() => {
+  if (stopObserving) {
+    stopObserving()
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -471,7 +687,7 @@ onBeforeUnmount(() => {
   width: 100%;
   position: relative;
   overflow: hidden;
-  background: rgba(0,0,0,0.8);
+  background: rgba(0, 0, 0, 0.8);
 }
 .indexpage-container {
   width: 100%;
@@ -547,4 +763,84 @@ onBeforeUnmount(() => {
   position: absolute;
   cursor: pointer;
 }
+.affix-container-left {
+  position: fixed;
+  bottom: 26px;
+  z-index: 999;
+  // overflow: hidden;
+}
+.affix-container-left-box {
+  width: 144px;
+  // height: 120px;
+  // background: #ffffff;
+}
+.affix-container-left-box-item-box {
+  width: 100%;
+  border-bottom: 1px solid #eeeeee;
+  background: #ffffff;
+}
+.affix-container-left-box-item {
+  width: 100%;
+  padding: 0 18px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.affix-container-left-box-item-left {
+  font-family:
+    PingFangSC,
+    PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+}
+.affix-container-left-box-item-img {
+  cursor: pointer;
+  flex-shrink: 0;
+  width: 20px;
+  height: 12px;
+}
+.affix-container-left-box-item-bottom {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: #ffffff;
+}
+.affix-container-left-box-item-bottom-img {
+  cursor: pointer;
+  flex-shrink: 0;
+  width: 12px;
+  height: 7px;
+}
+.affix-container-left-box-item-bottom-left {
+  cursor: pointer;
+  flex-shrink: 0;
+  font-family:
+    PingFangSC,
+    PingFang SC;
+  font-weight: 400;
+  font-size: 16px;
+  color: #98a4bf;
+  margin-right: 2px;
+}
+.affix-container-right{
+  position: fixed;
+  z-index: 999;
+  right: 40px;
+  bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.affix-container-right-item{
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: 8px;
+}
 </style>
diff --git a/src/views/mapPage/realTimeMap/index.vue b/src/views/mapPage/realTimeMap/index.vue
index 40180ae2..9f7bb877 100644
--- a/src/views/mapPage/realTimeMap/index.vue
+++ b/src/views/mapPage/realTimeMap/index.vue
@@ -42,6 +42,7 @@ const downAgv = async () => {
   const data = await MapApi.agvDownload()
   download.zip(data, `agv-${new Date().getTime()}.zip`)
 }
+// 筛选出对应的区域对象
 const findChildrenByValues = (tree, values) => {
   if (!tree || tree.length === 0) {
     return null