diff --git a/src/views/board/allBoard/index.vue b/src/views/board/allBoard/index.vue
index 80d39c74..cbddee6f 100644
--- a/src/views/board/allBoard/index.vue
+++ b/src/views/board/allBoard/index.vue
@@ -738,7 +738,7 @@ onBeforeUnmount(() => {
 .map-box-container {
   width: 100%;
   height: calc(100vh - 370px);
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: auto;
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: #888 #f1f1f1;
diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue
index ac840b69..4af67b17 100644
--- a/src/views/mapPage/realTimeMap/components/indexPage.vue
+++ b/src/views/mapPage/realTimeMap/components/indexPage.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="index-page" @wheel="handleWheel">
-    <div class="index-page-container" :class="!isFullScreen ? 'is-full-screen ' : ''">
+    <div class="index-page-container" ref="indexPageContainerRef">
       <div
-        class="affix-container"
-        id="indexpage-container"
+        class="map-container"
         :style="{
           cursor: isDrag ? 'pointer' : 'default',
           transformOrigin: '0 0',
           transform: `scale(${isSizeRadio})`,
           height: imgBgObj.height + 'px',
-          width: isFull ? '100%' : imgBgObj.width + 'px'
+          width: imgBgObj.width + 'px'
         }"
       >
         <div
@@ -20,70 +19,50 @@
           ref="draggableElement"
         >
           <div class="indexpage-container-box">
-            <img :src="imgBgObj.imgUrl" class="indexpage-container-box-img" />
-            <div class="indexpage-container-box-point">
-              <!-- 连线 -->
-              <div v-if="legendObj.driveLineShow">
-                <div class="line-box">
-                  <svg id="svg" :width="imgBgObj.width" :height="imgBgObj.height">
-                    <template v-for="(item, index) in state.mapRouteList" :key="index">
-                      <template v-if="item.method == 0">
-                        <!-- 直线 -->
-                        <line
-                          :x1="Number(item.startPointX) * radio"
-                          :y1="Number(item.startPointY) * radio"
-                          :x2="Number(item.endPointX) * radio"
-                          :y2="Number(item.endPointY) * radio"
-                          :stroke="item.isSelect ? '#f48924' : '#2d72d9'"
-                          :stroke-width="4 * radio"
-                        />
-                      </template>
-                      <!-- 曲线 -->
-                      <template v-else>
-                        <path
-                          :d="getCurvePath(item)"
-                          :stroke="item.isSelect ? '#f48924' : '#2d72d9'"
-                          :stroke-width="4 * radio"
-                          fill="none"
-                        />
-                      </template>
+            <img :src="imgBgObj.imgUrl" class="map-bg" />
+            <div class="point-information">
+              <div class="line-list" v-if="legendObj.driveLineShow">
+                <svg id="svg" :width="imgBgObj.width" :height="imgBgObj.height">
+                  <template v-for="(item, index) in state.mapRouteList" :key="index">
+                    <template v-if="item.method == 0">
+                      <!-- 直线 -->
+                      <line
+                        :x1="Number(item.startPointX) * radio"
+                        :y1="Number(item.startPointY) * radio"
+                        :x2="Number(item.endPointX) * radio"
+                        :y2="Number(item.endPointY) * radio"
+                        :stroke="item.isSelect ? '#f48924' : '#2d72d9'"
+                        :stroke-width="4 * radio"
+                      />
                     </template>
-                  </svg>
-                </div>
+                    <!-- 曲线 -->
+                    <template v-else>
+                      <path
+                        :d="getCurvePath(item)"
+                        :stroke="item.isSelect ? '#f48924' : '#2d72d9'"
+                        :stroke-width="4 * radio"
+                        fill="none"
+                      />
+                    </template>
+                  </template>
+                </svg>
               </div>
               <!-- 小车 -->
-
-              <div
-                v-for="(item, index) in testCarList"
-                :key="index"
-                @dblclick="carDbClick(item, index)"
-              >
+              <div v-for="(item, index) in testCarList" :key="item.macAddress">
                 <el-popover placement="bottom">
                   <template #reference>
                     <div
-                      class="indexpage-car-item"
+                      class="car-item"
                       v-if="legendObj.carShow"
-                      :style="{
-                        left: item.realX * radio + 'px',
-                        top: item.realY * radio + 'px',
-                        width: (carWidth / imgBgObj.resolution / 100) * radio + 'px',
-                        height: (carHeight / imgBgObj.resolution / 100) * radio + 'px',
-                        zIndex: 9999
-                      }"
+                      :style="item.style"
+                      @dblclick="carDbClick(item, index)"
                     >
                       <div style="font-size: 13px; color: #fff; z-index: 9999; background: #cb00c7">
                         {{ item.robotNo || '' }}
                       </div>
                       <img
                         src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
-                        :style="{
-                          position: 'absolute',
-                          top: 0,
-                          left: 0,
-                          width: '100%',
-                          height: '100%',
-                          transform: 'rotate(' + radianToDegree(item.data.pose2d.yaw) + 'deg)'
-                        }"
+                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
                       />
                     </div>
                   </template>
@@ -91,7 +70,7 @@
                 </el-popover>
               </div>
               <div
-                class="indexpage-container-box-point-item"
+                class="map-point-list"
                 v-for="(item, index) in state.allMapPointInfo"
                 :key="index"
                 :style="{
@@ -106,7 +85,7 @@
                 }"
               >
                 <!-- 1 路径点 -->
-                <el-tooltip class="box-item" effect="light" placement="top">
+                <el-tooltip effect="light" placement="top">
                   <template #content>
                     <div v-if="item.type === 2">
                       <div class="indexpage-popover-item">
@@ -256,59 +235,21 @@
           transition: 'all 0.3s ease-in-out'
         }"
       >
-        <div class="legend-item">
-          <div class="legend-item-left"> 行驶路线 </div>
+        <div class="legend-item" v-for="item in layerList" :key="item.type">
+          <div class="legend-item-left"> {{ item.name }} </div>
           <el-icon
             class="legend-item-img"
             size="20"
-            v-if="legendObj.driveLineShow"
-            @click="changDriveLineShow"
+            v-if="item.isShow"
+            @click="changDriveLineShow(item)"
             color="#1677FF"
             ><View
           /></el-icon>
           <el-icon
             class="legend-item-img"
             size="20"
-            v-if="!legendObj.driveLineShow"
-            @click="changDriveLineShow"
-            color="#444444"
-            ><Hide
-          /></el-icon>
-        </div>
-        <div class="legend-item">
-          <div class="legend-item-left"> 车辆 </div>
-          <el-icon
-            class="legend-item-img"
-            size="20"
-            v-if="legendObj.carShow"
-            @click="changCarShow"
-            color="#1677FF"
-            ><View
-          /></el-icon>
-          <el-icon
-            class="legend-item-img"
-            size="20"
-            v-if="!legendObj.carShow"
-            @click="changCarShow"
-            color="#444444"
-            ><Hide
-          /></el-icon>
-        </div>
-        <div class="legend-item">
-          <div class="legend-item-left"> 节点ID </div>
-          <el-icon
-            class="legend-item-img"
-            size="20"
-            v-if="legendObj.sortNumberShow"
-            @click="changeSortNumber"
-            color="#1677FF"
-            ><View
-          /></el-icon>
-          <el-icon
-            class="legend-item-img"
-            size="20"
-            v-if="!legendObj.sortNumberShow"
-            @click="changeSortNumber"
+            v-if="!item.isShow"
+            @click="changDriveLineShow(item)"
             color="#444444"
             ><Hide
           /></el-icon>
@@ -324,33 +265,17 @@
 
   <!-- 右下角的功能 -->
   <div class="affix-container-right" v-if="!isAllBoard">
-    <!-- 拖拽 -->
     <div class="item" @click="changeIsDrag">
-      <img src="@/assets/imgs/indexPage/编组 12.png" style="width: 100%; height: 100%" />
+      <img src="@/assets/imgs/indexPage/编组 12.png" />
     </div>
-    <!-- 放大 -->
     <div class="item">
-      <img
-        src="@/assets/imgs/indexPage/编组 14.png"
-        style="width: 100%; height: 100%"
-        @click="changeSizeRaio('add')"
-      />
+      <img src="@/assets/imgs/indexPage/编组 14.png" @click="changeSize('add')" />
     </div>
-    <!-- 缩小 -->
     <div class="item">
-      <img
-        src="@/assets/imgs/indexPage/编组 15.png"
-        style="width: 100%; height: 100%"
-        @click="changeSizeRaio('sub')"
-      />
+      <img src="@/assets/imgs/indexPage/编组 15.png" @click="changeSize('sub')" />
     </div>
-    <!-- 全屏 -->
     <div class="item">
-      <img
-        src="@/assets/imgs/indexPage/编组 22.png"
-        style="width: 100%; height: 100%"
-        @click="toggleFullScreen"
-      />
+      <img src="@/assets/imgs/indexPage/编组 22.png" @click="toggleFullScreen" />
     </div>
   </div>
   <storeDialog ref="storeDialogRef" @success="emitParent" />
@@ -378,6 +303,7 @@ import JSONBigInt from 'json-bigint'
 import { propTypes } from '@/utils/propTypes'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import dayjs from 'dayjs'
+import { throttle, debounce } from 'lodash-es'
 
 const message = useMessage() // 消息弹窗
 
@@ -492,9 +418,6 @@ const convertActualToBrowser = (pointX, pointY) => {
   }
 }
 
-//全屏
-const isFull = ref(false)
-
 //是否可以拖拽
 const isDrag = ref(false)
 const changeIsDrag = () => {
@@ -518,7 +441,7 @@ const getCurvePath = (curve) => {
 
 //放大缩小
 const isSizeRadio = ref(1)
-const changeSizeRaio = (type) => {
+const changeSize = (type) => {
   if (type == 'add') {
     if (isSizeRadio.value < 4) {
       isSizeRadio.value += 0.1
@@ -535,117 +458,59 @@ const changeSizeRaio = (type) => {
     }
   }
 }
-//图层状态
+
+// 图层显示切换相关
+const layerList = ref([
+  {
+    type: 1,
+    name: '行驶路线',
+    isShow: true
+  },
+  {
+    type: 2,
+    name: '车辆',
+    isShow: true
+  },
+  {
+    type: 3,
+    name: '节点ID',
+    isShow: true
+  }
+])
 const legendObj = reactive({
   driveLineShow: true,
   carShow: true,
   sortNumberShow: true,
   legendShow: true
 })
-// 车辆是否显示
-const changCarShow = () => {
-  legendObj.carShow = !legendObj.carShow
-}
-// 车辆行驶路线是否展示
-const changDriveLineShow = () => {
-  legendObj.driveLineShow = !legendObj.driveLineShow
-}
-//sortNumber 是否显示
-const changeSortNumber = () => {
-  legendObj.sortNumberShow = !legendObj.sortNumberShow
-}
-
-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()
+const changDriveLineShow = (item) => {
+  item.isShow = !item.isShow
+  if (item.type == 1) {
+    legendObj.driveLineShow = !legendObj.driveLineShow
+  } else if (item.type == 2) {
+    legendObj.carShow = !legendObj.carShow
+  } else if (item.type == 3) {
+    legendObj.sortNumberShow = !legendObj.sortNumberShow
   }
-  // 监听全屏状态变化事件
-  document.addEventListener('fullscreenchange', function () {
-    if (!document.fullscreenElement) {
-      // 在这里可以添加退出全屏后的逻辑
-      isDrag.value = false
-      isFull.value = false
-      radio.value = 1
-      resetPosition()
-    } else {
-      // 在这里可以添加进入全屏后的逻辑
-      isDrag.value = true
-      isFull.value = true
-      nextTick(() => {
-        let width = getElementWidthByClass('affix-container')
-        radio.value = width / imgBgObj.width
-      })
-    }
-  })
+}
 
-  // 监听旧版浏览器的全屏状态变化事件
-  document.addEventListener('mozfullscreenchange', function () {
-    if (!document.mozFullScreenElement) {
-      console.log('已退出全屏模式 (Firefox旧版)')
-      isDrag.value = false
-      resetPosition()
-    } else {
-      console.log('已进入全屏模式 (Firefox旧版)')
-      isDrag.value = true
+//全屏相关
+const indexPageContainerRef = ref()
+const isFullScreenDisplay = ref(false)
+const toggleFullScreen = () => {
+  if (!isFullScreenDisplay.value) {
+    indexPageContainerRef.value.requestFullscreen().catch((err) => {
+      console.error(`全屏错误: ${err.message}`)
+    })
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
     }
-  })
-
-  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 handleFullscreenChange = () => {
+  isFullScreenDisplay.value = !!document.indexPageContainerRef
 }
 
 //库位双击
@@ -673,84 +538,62 @@ const resetPosition = () => {
     resetDragPosition(draggableElement.value)
   }
 }
-// 计算直线中间箭头的路径
-const getLineMidArrowPath = (item) => {
-  const midX = ((Number(item.startPointX) + Number(item.endPointX)) / 2) * radio.value
-  const midY = ((Number(item.startPointY) + Number(item.endPointY)) / 2) * radio.value
-
-  let dx = item.endPointX * radio.value - item.startPointX * radio.value
-  let dy = item.endPointY * radio.value - item.startPointY * radio.value
-  let length = Math.sqrt(dx * dx + dy * dy)
-
-  if (length === 0) {
-    return `M ${midX} ${midY} L ${midX} ${midY}`
-  }
-
-  const unitDx = dx / length
-  const unitDy = dy / length
-
-  const arrowLength = 1
-  const startXArrow = midX - unitDx * arrowLength
-  const startYArrow = midY - unitDy * arrowLength
-  const endXArrow = midX
-  const endYArrow = midY
-
-  return `M ${startXArrow} ${startYArrow} L ${endXArrow} ${endYArrow}`
-}
-const calculateDistanceAndAngle = (point1, point2) => {
-  // 计算水平和垂直方向的差值
-  const dx = point2.left - point1.left
-  const dy = point2.top - point1.top
-
-  // 计算两点之间的长度（使用勾股定理）
-  const distance = Math.sqrt(dx * dx + dy * dy)
-
-  // 计算两点连线与水平轴正方向的夹角（弧度）
-  const angleInRadians = Math.atan2(dy, dx)
-
-  // 将弧度转换为角度
-  const angleInDegrees = angleInRadians * (180 / Math.PI)
-
-  return {
-    distance: distance,
-    angle: angleInDegrees,
-    left: point1.left,
-    top: point1.top
-  }
-}
 
+//websocket相关
 const replaceHttpWithWs = (str) => {
   return str.replace(/^http/, 'ws')
 }
-// 连接websocket
-const linkWebSocket = (url) => {
-  socketClient.value = new WebSocketClient(url)
-  if (socketClient.value) {
+
+// 优化轮询机制
+const robotListTimerRef = ref(null)
+const robotByFloorAndAreaList = ref([])
+
+const getRobotByFloorAndAreaList = async () => {
+  try {
+    const res = await MapApi.getRobotByFloorAndArea({
+      floor: imgBgObj.floor,
+      area: imgBgObj.area
+    })
+    robotByFloorAndAreaList.value = res
+    if (testCarList.value.length) {
+      // 使用 Set 优化查找性能
+      const onlineRobots = new Set(robotByFloorAndAreaList.value)
+      testCarList.value = testCarList.value.filter((item) =>
+        onlineRobots.has(item.data.pose2d.robotNo)
+      )
+    }
+  } catch (error) {
+    console.error('获取机器人列表失败:', error)
+  }
+}
+
+// 使用 ref 管理 WebSocket 连接
+const wsConnection = ref(null)
+
+// WebSocket 连接管理
+const initWebsocket = () => {
+  if (wsConnection.value) {
+    wsConnection.value.disconnect()
+  }
+
+  const websocketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${imgBgObj.floor}&area=${imgBgObj.area}`
+  wsConnection.value = new WebSocketClient(websocketUrl)
+
+  if (wsConnection.value) {
+    socketClient.value = wsConnection.value
     // 监听消息
     socketClient.value.onMessage((message) => {
-      //心跳信息不处理
       if (message == 'ping' || message == 'pong') return
       let jsonMsg = JSON.parse(message)
-      // 车辆信息
-      if (jsonMsg.type == 'map_push') {
-        let data = JSON.parse(jsonMsg.content)
-        // console.log(data, dayjs().format('HH:mm:ss SSS'))
-        let dataList = []
-        for (let key in data) {
-          dataList.push({
-            macAddress: key,
-            data: JSON.parse(data[key])
-          })
-        }
 
-        testCarList.value = mergeArraysWithoutDelete(testCarList.value, dataList)
-        testCarList.value.forEach((item) => {
-          item.originWidth = imgBgObj.width
-          item.originHeight = imgBgObj.height
-          item.origin = imgBgObj.origin
-          item.realX = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).x
-          item.realY = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).y
-          item.robotNo = item.data.pose2d.robotNo
+      if (jsonMsg.type == 'map_push') {
+        requestAnimationFrame(() => {
+          let data = JSON.parse(jsonMsg.content)
+          let dataList = Object.entries(data).map(([key, value]) => ({
+            macAddress: key,
+            data: JSON.parse(value)
+          }))
+          testCarList.value = throttledUpdateCarList(testCarList.value, dataList, imgBgObj)
         })
       }
       //告警信息
@@ -797,87 +640,52 @@ const linkWebSocket = (url) => {
   }
 }
 
-// 现在车辆的逻辑是这样  websoket map_push类型推送消息 每次推送新车 我就添加到车辆列表中 testCarList 不删除车辆
-// 每几秒轮询调用查看当前楼层区域的在线车辆 如果不存在 则再把testCarList 中的车辆删除
-const robotByFloorAndAreaList = ref([]) // 机器人列表
-const robotListTimerRef = ref(null) //轮询定时器
-const getRobotByFloorAndAreaList = () => {
-  MapApi.getRobotByFloorAndArea({ floor: imgBgObj.floor, area: imgBgObj.area }).then((res) => {
-    robotByFloorAndAreaList.value = res
-    if (testCarList.value.length) {
-      testCarList.value = filterArrayByRobotNo(testCarList.value, robotByFloorAndAreaList.value)
+const throttledUpdateCarList = throttle((currentList, newDataList, mapInfo) => {
+  return updateCarList(currentList, newDataList, mapInfo)
+}, 100) // 100ms 节流
+
+// 优化车辆数据合并逻辑
+const mergeArraysWithoutDelete = (arr1, arr2) => {
+  const macAddressMap = new Map(arr1.map((item) => [item.macAddress, item]))
+
+  arr2.forEach((item2) => {
+    const existingItem = macAddressMap.get(item2.macAddress)
+    if (existingItem) {
+      existingItem.data.pose2d = item2.data.pose2d
+    } else {
+      macAddressMap.set(item2.macAddress, item2)
     }
   })
-}
-robotListTimerRef.value = setInterval(getRobotByFloorAndAreaList, 5000)
 
-// 删掉不在线的车辆
-const filterArrayByRobotNo = (fullArray, idArray) => {
-  const idSet = new Set(idArray)
-  return fullArray.filter((item) => idSet.has(item.data.pose2d.robotNo))
+  return Array.from(macAddressMap.values())
 }
 
-//长时间情况下 有些车辆掉线 已经不在车辆列表里面 要剔除
-// const isItemVisible = (item) => {
-//   return robotByFloorAndAreaList.value.includes(item.data.pose2d.robotNo)
-// }
-
-const mergeCarArrays = (arr1, arr2) => {
-  const result = []
-  const macAddressSet = new Set()
-  // 先处理第一个数组中原本就有的元素，进行更新或保留
-  for (const item1 of arr1) {
-    const macAddress1 = item1.macAddress
-    macAddressSet.add(macAddress1)
-    let foundInSecond = false
-    for (const item2 of arr2) {
-      const macAddress2 = item2.macAddress
-      if (macAddress1 === macAddress2) {
-        foundInSecond = true
-        // 更新pose2d信息
-        item1.data.pose2d = item2.data.pose2d
-        result.push(item1)
-        break
-      }
-    }
-    if (!foundInSecond) {
-      // 如果没在第二个数组中找到，就不添加到结果中，相当于删除
-      continue
+// 优化车辆位置计算
+const processCarData = (car, mapInfo) => {
+  const browserPos = convertActualToBrowser(car.data.pose2d.x, car.data.pose2d.y)
+  return {
+    ...car,
+    originWidth: mapInfo.width,
+    originHeight: mapInfo.height,
+    origin: mapInfo.origin,
+    realX: browserPos.x,
+    realY: browserPos.y,
+    robotNo: car.data.pose2d.robotNo,
+    style: {
+      left: browserPos.x * radio.value + 'px',
+      top: browserPos.y * radio.value + 'px',
+      width: (carWidth.value / imgBgObj.resolution / 100) * radio.value + 'px',
+      height: (carHeight.value / imgBgObj.resolution / 100) * radio.value + 'px',
+      zIndex: 9999,
+      transform: `rotate(${-car.data.pose2d.yaw * (180 / Math.PI)}deg)`
     }
   }
-  // 再处理第二个数组中存在但第一个数组中不存在的元素，添加到结果中
-  for (const item2 of arr2) {
-    const macAddress2 = item2.macAddress
-    if (!macAddressSet.has(macAddress2)) {
-      result.push(item2)
-    }
-  }
-  return result
 }
-const mergeArraysWithoutDelete = (arr1, arr2) => {
-  // 复制第一个数组，避免修改原始数组
-  const result = [...arr1]
-  // 遍历第二个数组
-  for (const item2 of arr2) {
-    const macAddress2 = item2.macAddress
-    let found = false
-    // 遍历结果数组，查找是否存在相同 macAddress 的元素
-    for (let i = 0; i < result.length; i++) {
-      const item1 = result[i]
-      const macAddress1 = item1.macAddress
-      if (macAddress1 === macAddress2) {
-        // 若存在相同 macAddress 的元素，更新其 pose2d 信息
-        result[i].data.pose2d = item2.data.pose2d
-        found = true
-        break
-      }
-    }
-    // 若未找到相同 macAddress 的元素，将该元素添加到结果数组中
-    if (!found) {
-      result.push(item2)
-    }
-  }
-  return result
+
+// 更新车辆列表
+const updateCarList = (currentList, newDataList, mapInfo) => {
+  const updatedList = mergeArraysWithoutDelete(currentList, newDataList)
+  return updatedList.map((car) => processCarData(car, mapInfo))
 }
 
 const setIsSelect = (arr1, arr2) => {
@@ -895,18 +703,43 @@ const lookError = () => {
     path: '/carError'
   })
 }
-// 发送websocket消息
-const sendMessage = () => {
-  socketClient.value.send('Hello, WebSocket!')
-}
-// 断开连接
-const disconnect = () => {
-  socketClient.value.disconnect()
-}
+
 const emitParent = () => {
   getMapData(imgBgObj)
 }
 
+const computedRatio = () => {
+  nextTick(() => {
+    if (props.isFullScreen) {
+      let width = getElementWidthByClass('index-page-container')
+
+      testCarList.value.forEach((item) => {
+        item.originWidth = imgBgObj.width
+        item.originHeight = imgBgObj.height
+        item.origin = imgBgObj.origin
+        item.realX = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).x
+        item.realY = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).y
+      })
+
+      radio.value = width / imgBgObj.width
+      imgBgObj.width = imgBgObj.width * radio.value
+      imgBgObj.height = imgBgObj.height * radio.value
+    }
+  })
+}
+
+//偏航率斜率算旋转
+const radianToDegree = (radian) => {
+  const degree = radian * (180 / Math.PI)
+  return `${-degree}`
+}
+
+const radio = ref(1) //放大缩小的倍数
+const state = reactive({
+  mapRouteList: [],
+  allMapPointInfo: []
+})
+
 //获取扫描图  地图背景相关的信息
 const imgBgObj = reactive({
   imgUrl: '',
@@ -945,42 +778,6 @@ const getMapDownloadPng = async (mapInfo) => {
   await computedRatio()
   await getRobotByFloorAndAreaList()
 }
-const initWebsocket = () => {
-  let websocketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${imgBgObj.floor}&area=${imgBgObj.area}`
-  linkWebSocket(websocketUrl)
-}
-const computedRatio = () => {
-  nextTick(() => {
-    if (props.isFullScreen) {
-      let width = getElementWidthByClass('index-page-container')
-
-      testCarList.value.forEach((item) => {
-        item.originWidth = imgBgObj.width
-        item.originHeight = imgBgObj.height
-        item.origin = imgBgObj.origin
-        item.realX = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).x
-        item.realY = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).y
-      })
-
-      radio.value = width / imgBgObj.width
-      imgBgObj.width = imgBgObj.width * radio.value
-      imgBgObj.height = imgBgObj.height * radio.value
-    }
-  })
-}
-
-//偏航率斜率算旋转
-const radianToDegree = (radian) => {
-  const degree = radian * (180 / Math.PI)
-  return `${-degree}`
-}
-
-const state = reactive({
-  mapRouteList: [],
-  allMapPointInfo: []
-})
-const radio = ref(1) //放大缩小的倍数
-
 // 获取地图连线
 const getAllMapRoute = async () => {
   state.mapRouteList = await MapApi.getPositionMapLineByPositionMapId(imgBgObj.positionMapId)
@@ -1056,41 +853,6 @@ const handleWheel = (event) => {
   }
 }
 
-const convertToFrontendCoordinates = (origin, width, height, target) => {
-  // 提取原点的 x 和 y 坐标
-  const [originX, originY] = origin
-  // 提取目标点的 x 和 y 坐标
-  const [targetX, targetY] = target
-
-  // 计算目标点相对于原点在 x 方向上的偏移量
-  const offsetX = targetX - originX
-  // 计算目标点相对于原点在 y 方向上的偏移量
-  const offsetY = targetY - originY
-
-  // 计算前端页面中的 left 坐标
-  const left = offsetX
-  // 计算前端页面中的 top 坐标，需要考虑坐标系的转换
-  const top = height - offsetY
-
-  return {
-    top,
-    left,
-    origin
-  }
-}
-const getImageWidth = (imageUrl, name) => {
-  return new Promise((resolve, reject) => {
-    const img = new Image()
-    img.onload = function () {
-      resolve(img[name])
-    }
-    img.onerror = function () {
-      reject(new Error('图片加载失败'))
-    }
-    img.src = imageUrl
-  })
-}
-
 const getElementWidthByClass = (className) => {
   const element = document.querySelector(`.${className}`)
   if (element) {
@@ -1105,98 +867,145 @@ const carDbClick = (item, index) => {
 }
 
 defineExpose({ getMapData, computedRatio }) // 提供 open 方法，用于打开弹窗
-onMounted(() => {})
+
+onMounted(() => {
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+  document.addEventListener('mozfullscreenchange', handleFullscreenChange)
+  document.addEventListener('MSFullscreenChange', handleFullscreenChange)
+
+  // 设置轮询间隔
+  robotListTimerRef.value = setInterval(() => {
+    if (document.hidden) return // 页面不可见时暂停轮询
+    getRobotByFloorAndAreaList()
+  }, 5000)
+
+  // 监听页面可见性变化
+  document.addEventListener('visibilitychange', () => {
+    if (!document.hidden && robotListTimerRef.value === null) {
+      robotListTimerRef.value = setInterval(getRobotByFloorAndAreaList, 5000)
+    }
+  })
+})
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+  document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
+  document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
+})
 onBeforeUnmount(() => {
-  clearInterval(robotListTimerRef.value)
-  robotListTimerRef.value = null
+  if (robotListTimerRef.value) {
+    clearInterval(robotListTimerRef.value)
+    robotListTimerRef.value = null
+  }
+
+  if (wsConnection.value) {
+    wsConnection.value.disconnect()
+    wsConnection.value = null
+  }
+
+  // 清理其他引用
+  testCarList.value = []
+  robotByFloorAndAreaList.value = []
 })
 </script>
 
 <style lang="scss" scoped>
 .index-page {
   width: 100%;
-  .index-page-container {
-    width: 100%;
-    position: relative;
-  }
-
-  .is-full-screen {
-    height: calc(100vh - 120px);
-    overflow: auto;
-  }
-}
-
-.affix-container {
-  width: 100%;
-  position: relative;
-}
-.indexpage-container {
-  width: 100%;
-  position: relative;
-}
-.indexpage-container-active {
-  width: 100%;
-  position: relative;
-  cursor: grab;
-}
-.indexpage-container-active:active {
-  cursor: grabbing;
-}
-.indexpage-container .affix-container-top {
-  width: 100%;
-  height: 80px;
-  background-color: #fff;
-  border-bottom: 1px solid #f5f5f5;
-}
-.indexpage-container-box-point {
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-.indexpage-container-box-point-item {
+  height: 100%;
   box-sizing: border-box;
-  position: absolute;
-  cursor: pointer;
-}
-.scrollbar-flex-content {
-  padding: 2px 6px;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.scrollbar-demo-item {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 90px;
-  height: 30px;
-  margin: 10px 6px;
-  text-align: center;
-  border-radius: 4px;
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-  position: relative;
-}
-.scrollbar-demo-item {
-  cursor: pointer;
-  border: none;
+
+  .index-page-container {
+    position: relative;
+    width: 100%;
+
+    .map-container {
+      width: 100%;
+      position: relative;
+      transform-style: preserve-3d; /* 3D 变换优化 */
+      backface-visibility: hidden;
+      perspective: 1000;
+
+      .indexpage-container {
+        width: 100%;
+        position: relative;
+        transform: translateZ(0);
+        will-change: transform;
+      }
+
+      .indexpage-container-active {
+        width: 100%;
+        position: relative;
+        cursor: grab;
+        transform: translateZ(0);
+        will-change: transform;
+      }
+
+      .indexpage-container-active:active {
+        cursor: grabbing;
+      }
+
+      .indexpage-container-box {
+        width: 100%;
+        position: relative;
+
+        .map-bg {
+          width: 100%;
+          height: auto;
+        }
+      }
+
+      .point-information {
+        --radio: 1;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        transform: translateZ(0);
+
+        .line-list {
+          position: absolute;
+          transform: translateZ(0);
+          will-change: transform;
+        }
+      }
+
+      .car-item {
+        position: absolute;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        will-change: transform; /* 提示浏览器该元素会频繁变化 */
+        transform: translateZ(0); /* 强制GPU加速 */
+      }
+
+      .map-point-list {
+        position: absolute;
+        cursor: pointer;
+        transform: translateZ(0);
+        will-change: transform;
+
+        .sort-num {
+          position: absolute;
+          font-size: 13px;
+          user-select: none;
+          color: #000;
+        }
+        .sort-num-location {
+          position: absolute;
+          font-size: 13px;
+          user-select: none;
+          color: #000;
+        }
+      }
+    }
+  }
 }
 
-:focus-visible {
-  outline: none;
-}
-.indexpage-container-box {
-  width: 100%;
-  position: relative;
-}
-.indexpage-container-box-img {
-  width: 100%;
-  height: auto;
-}
 .indexpage-popover-item {
   display: flex;
   font-family:
@@ -1207,16 +1016,6 @@ onBeforeUnmount(() => {
   color: #0d162a;
   padding: 3px;
 }
-.line-box {
-  position: absolute;
-}
-.indexpage-car-item {
-  position: absolute;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 
 .affix-container-left {
   position: fixed;
@@ -1232,6 +1031,7 @@ onBeforeUnmount(() => {
     width: 100%;
     border-bottom: 1px solid #eeeeee;
     background: #ffffff;
+    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
     .legend-item {
       width: 100%;
@@ -1251,9 +1051,11 @@ onBeforeUnmount(() => {
     font-size: 14px;
     color: rgba(0, 0, 0, 0.88);
   }
+
   .legend-item-img {
     cursor: pointer;
   }
+
   .legend-item-bottom {
     width: 100%;
     height: 36px;
@@ -1263,6 +1065,7 @@ onBeforeUnmount(() => {
     cursor: pointer;
     background: #ffffff;
   }
+
   .legend-item-bottom-left {
     cursor: pointer;
     flex-shrink: 0;
@@ -1291,20 +1094,12 @@ onBeforeUnmount(() => {
     cursor: pointer;
     flex-shrink: 0;
     margin-left: 8px;
-  }
-}
 
-.sort-num {
-  position: absolute;
-  font-size: 13px;
-  user-select: none;
-  color: #000;
-}
-.sort-num-location {
-  position: absolute;
-  font-size: 13px;
-  user-select: none;
-  color: #000;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .popover-robot-no {
@@ -1313,4 +1108,37 @@ onBeforeUnmount(() => {
   color: #000;
   font-weight: 600;
 }
+
+/* 全屏模式下的样式 */
+.index-page-container:-webkit-full-screen {
+  width: 100vw;
+  height: 100vh;
+  background-color: white;
+  box-sizing: border-box;
+  overflow: auto; /* 允许滚动 */
+}
+
+.index-page-container:-moz-full-screen {
+  width: 100vw;
+  height: 100vh;
+  background-color: white;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.index-page-container:-ms-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  background-color: white;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.index-page-container:fullscreen {
+  width: 100vw;
+  height: 100vh;
+  background-color: white;
+  box-sizing: border-box;
+  overflow: auto;
+}
 </style>
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index 6b75cda9..c4484b09 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -2073,22 +2073,27 @@ const startFromPoint = (index, event) => {
   if (toolbarSwitchType.value === 'clickDrawRoute') {
     let list = state.allMapPointInfo
     const point = list[index]
-    if (point.id) {
-      state.startDrawPoint = point //开始点
+    if (point?.id) {
+      state.startDrawPoint = { ...point } //创建点位数据副本
       state.startDrawPointIndex = index
       state.isDrawing = true
-      event.preventDefault() // 防止默认行为
+      event.preventDefault()
     } else {
       message.warning('选择的节点未保存')
-      // 重置状态
-      state.startDrawPointIndex = -1 // 起始点的索引
-      state.startDrawPoint = null
-      state.isDrawing = false
-      state.currentDrawX = 0
-      state.currentDrawY = 0
+      resetDrawState()
     }
   }
 }
+
+// 重置绘制状态
+const resetDrawState = () => {
+  state.startDrawPointIndex = -1
+  state.startDrawPoint = null
+  state.isDrawing = false
+  state.currentDrawX = 0
+  state.currentDrawY = 0
+}
+
 //开始框选绘制
 const startDrawSelection = (event) => {
   if (
@@ -2146,6 +2151,71 @@ const updateDrawSelection = (event) => {
 }
 //结束框选绘制
 const endDrawSelection = (event) => {
+  if (toolbarSwitchType.value === 'clickDrawRoute') {
+    if (state.isDrawing) {
+      const endPointIndex = findClosestPoint(state.currentDrawX, state.currentDrawY)
+
+      if (endPointIndex !== null && endPointIndex !== state.startDrawPointIndex) {
+        let list = state.allMapPointInfo
+        const endPoint = list[endPointIndex]
+
+        if (!endPoint?.id) {
+          message.warning('选择的节点未保存')
+          resetDrawState()
+          return
+        }
+
+        // 检查路线是否重复
+        if (checkRouteDuplicate(state.startDrawPoint, endPoint, state.mapRouteList)) {
+          message.warning('此路线已存在')
+        } else {
+          // 创建新路线对象
+          const newRoute = {
+            isSelected: false,
+            startingPointId: state.startDrawPoint.id,
+            endPointId: endPoint.id,
+            startPointX: state.startDrawPoint.locationX,
+            startPointY: state.startDrawPoint.locationY,
+            endPointX: endPoint.locationX,
+            endPointY: endPoint.locationY,
+            actualStartPointX: state.startDrawPoint.actualLocationX,
+            actualStartPointY: state.startDrawPoint.actualLocationY,
+            actualEndPointX: endPoint.actualLocationX,
+            actualEndPointY: endPoint.actualLocationY,
+            actualBeginControlX: '',
+            actualBeginControlY: '',
+            actualEndControlX: '',
+            actualEndControlY: '',
+            beginControlX: 0,
+            beginControlY: 0,
+            endControlX: 0,
+            endControlY: 0,
+            expansionZoneFront: 0,
+            expansionZoneAfter: 0,
+            expansionZoneLeft: 0,
+            expansionZoneRight: 0,
+            method: 0,
+            direction: 2,
+            forwardSpeedLimit: 1.5,
+            reverseSpeedLimit: 0.4,
+            toward: 0,
+            beginWidth: state.startDrawPoint.locationWidePx,
+            beginHigh: state.startDrawPoint.locationDeepPx,
+            endWidth: endPoint.locationWidePx,
+            endHigh: endPoint.locationDeepPx,
+            startingSortNum: state.startDrawPoint.sortNum,
+            endPointSortNum: endPoint.sortNum
+          }
+
+          state.mapRouteList.push(newRoute)
+          addEditHistory()
+        }
+      }
+      resetDrawState()
+    }
+    event.preventDefault()
+    return
+  }
   if (
     toolbarSwitchType.value === 'createLineLibrary' ||
     toolbarSwitchType.value === 'createRegion' ||
@@ -2159,112 +2229,37 @@ const endDrawSelection = (event) => {
     event.preventDefault() // 阻止默认行为（避免选中图片或文本）
     return
   }
-  if (toolbarSwitchType.value === 'clickDrawRoute') {
-    if (state.isDrawing) {
-      // 找到最近的终点
-      const endPointIndex = findClosestPoint(state.currentDrawX, state.currentDrawY)
-
-      if (endPointIndex !== null && endPointIndex !== state.startDrawPointIndex) {
-        let list = state.allMapPointInfo
-        const endPoint = list[endPointIndex]
-
-        //先判断节点有没有保存
-        if (!endPoint.id) {
-          message.warning('选择的节点未保存')
-          // 重置状态
-          state.startDrawPointIndex = -1 // 起始点的索引
-          state.startDrawPoint = null
-          state.isDrawing = false
-          state.currentDrawX = 0
-          state.currentDrawY = 0
-          return
-        }
-
-        const newLine = {
-          startPointX: state.startDrawPoint.locationX,
-          startPointY: state.startDrawPoint.locationY,
-          endPointX: endPoint.locationX,
-          endPointY: endPoint.locationY
-        }
-        // 检查是否已存在相同的直线
-        const isDuplicate = state.mapRouteList.some(
-          (line) =>
-            (line.startPointX === newLine.startPointX &&
-              line.startPointY === newLine.startPointY &&
-              line.endPointX === newLine.endPointX &&
-              line.endPointY === newLine.endPointY) ||
-            (line.startPointX === newLine.endPointX &&
-              line.startPointY === newLine.endPointY &&
-              line.endPointX === newLine.startPointX &&
-              line.endPointY === newLine.startPointY)
-        )
-        if (isDuplicate) {
-          message.warning('此路线已存在')
-        } else {
-          // 保存当前直线
-          state.mapRouteList.push({
-            isSelected: false, //是否选中
-            startingPointId: state.startDrawPoint.id,
-            endPointId: endPoint.id,
-            startPointX: state.startDrawPoint.locationX, //开始点
-            startPointY: state.startDrawPoint.locationY, //开始点
-            endPointX: endPoint.locationX, //结束点
-            endPointY: endPoint.locationY, //结束点
-            actualStartPointX: state.startDrawPoint.actualLocationX, //实际开始点位x轴
-            actualStartPointY: state.startDrawPoint.actualLocationY, //实际开始点位y轴
-            actualEndPointX: endPoint.actualLocationX, //实际结束点位x轴
-            actualEndPointY: endPoint.actualLocationY, //实际结束点位y轴
-            actualBeginControlX: '', //实际开始控制点x轴
-            actualBeginControlY: '', //实际开始控制点y轴
-            actualEndControlX: '', //实际结束控制点x轴
-            actualEndControlY: '', //实际结束控制点y轴
-            beginControlX: 0, //开始控制点x轴
-            beginControlY: 0, //开始控制点y轴
-            endControlX: 0, //结束控制点x轴
-            endControlY: 0, //结束控制点y轴
-            expansionZoneFront: 0, //膨胀区域前
-            expansionZoneAfter: 0, //膨胀区域后
-            expansionZoneLeft: 0, //	膨胀区域左
-            expansionZoneRight: 0, //膨胀区域右
-            method: 0, //行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
-            direction: 2, //方向 1.单向 2.双向,
-            forwardSpeedLimit: 1.5, //正向限速
-            reverseSpeedLimit: 0.4, //	反向限速
-            toward: 0, //	车头朝向( 0:正正 1:正反 2:反正 3:反反)
-            beginWidth: state.startDrawPoint.locationWidePx, //起点宽
-            beginHigh: state.startDrawPoint.locationDeepPx, //	起点高
-            endWidth: endPoint.locationWidePx, //	终点宽
-            endHigh: endPoint.locationDeepPx, //	终点高
-            startingSortNum: state.startDrawPoint.sortNum,
-            endPointSortNum: endPoint.sortNum
-          })
-          addEditHistory()
-        }
-      }
-      // 重置状态
-      state.startDrawPointIndex = -1 // 起始点的索引
-      state.startDrawPoint = null
-      state.isDrawing = false
-      state.currentDrawX = 0
-      state.currentDrawY = 0
-    }
-    event.preventDefault() // 阻止默认行为（避免选中图片或文本）
-    return
-  }
 }
 // 找到最近的点
 const findClosestPoint = (x, y) => {
+  const list = state.allMapPointInfo
+  if (!Array.isArray(list) || list.length === 0) return null
+
+  const searchRadius = 100
   let minDistance = Infinity
   let closestIndex = null
-  let list = state.allMapPointInfo
-  list.forEach((point, index) => {
-    const distance = Math.sqrt((point.locationX - x) ** 2 + (point.locationY - y) ** 2)
-    if (distance < minDistance && distance < point.locationWide) {
-      // 10 是点的捕捉范围
+
+  // 使用空间分区优化：先进行粗略筛选
+  const potentialPoints = list.filter((point, index) => {
+    if (!point?.locationX || !point?.locationY) return false
+    const dx = Math.abs(point.locationX - x)
+    const dy = Math.abs(point.locationY - y)
+    return dx <= searchRadius && dy <= searchRadius
+  })
+
+  // 在筛选后的点中找最近的
+  potentialPoints.forEach((point, i) => {
+    const dx = point.locationX - x
+    const dy = point.locationY - y
+    const distance = Math.sqrt(dx * dx + dy * dy)
+    const captureRadius = point.locationWide || 10
+
+    if (distance < minDistance && distance < captureRadius) {
       minDistance = distance
-      closestIndex = index
+      closestIndex = list.findIndex((p) => p.id === point.id)
     }
   })
+
   return closestIndex
 }
 //点击区域
@@ -3565,6 +3560,17 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('keydown', handleKeyDown)
 })
+
+// 检查路线是否重复的函数
+const checkRouteDuplicate = (startPoint, endPoint, routeList) => {
+  if (!startPoint?.id || !endPoint?.id) return false
+
+  return routeList.some(
+    (route) =>
+      (route.startingPointId === startPoint.id && route.endPointId === endPoint.id) ||
+      (route.startingPointId === endPoint.id && route.endPointId === startPoint.id)
+  )
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/mapPage/realTimeMap/index.vue b/src/views/mapPage/realTimeMap/index.vue
index 5c35f8d6..29a06437 100644
--- a/src/views/mapPage/realTimeMap/index.vue
+++ b/src/views/mapPage/realTimeMap/index.vue
@@ -204,7 +204,10 @@ onMounted(() => {
   }
 
   .main-content {
+    box-sizing: border-box;
     margin-top: 62px;
+    height: calc(100vh - 120px) !important;
+    overflow: auto;
   }
 }
 </style>
diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue
index 184f0642..b264aa3a 100644
--- a/src/views/mapPage/realTimeMap/test.vue
+++ b/src/views/mapPage/realTimeMap/test.vue
@@ -1,474 +1,105 @@
 <template>
-  <div class="fence-container">
-    <div class="svg-container" ref="svgContainer">
-      <svg
-        ref="fenceSvg"
-        @click="handleSvgClick"
-        @mousedown="startPan"
-        @mousemove="handleMouseMove"
-        @mouseup="endPan"
-        @mouseleave="endPan"
-        @wheel="handleWheel"
-        :viewBox="viewBox"
-        preserveAspectRatio="none"
+  <div class="map-container">
+    <div
+      ref="fullscreenElement"
+      class="fullscreen-content"
+      :class="{ 'is-fullscreen': isFullscreen }"
+    >
+      <div
+        v-for="car in cars"
+        :key="car.id"
+        class="car"
+        :style="{ left: car.x + 'px', top: car.y + 'px' }"
       >
-        <!-- 网格背景 -->
-        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
-          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#eee" stroke-width="0.5" />
-        </pattern>
-        <rect width="100%" height="100%" fill="url(#grid)" />
-
-        <!-- 围栏多边形 -->
-        <polygon
-          v-if="fencePoints.length > 2"
-          :points="fencePointsString"
-          fill="rgba(231, 76, 60, 0.2)"
-          stroke="#e74c3c"
-          stroke-width="2"
-        />
-
-        <!-- 绘制中的线段 -->
-        <polyline
-          v-if="isDrawing && currentPoints.length > 0"
-          :points="currentPointsString"
-          fill="none"
-          stroke="#3498db"
-          stroke-width="2"
-        />
-
-        <!-- 顶点标记 -->
-        <circle
-          v-for="(point, index) in allPoints"
-          :key="index"
-          :cx="point.x"
-          :cy="point.y"
-          r="3"
-          fill="#3498db"
-          @mousedown.stop="startDrag(index, $event)"
-        />
-
-        <!-- 测试点 -->
-        <circle
-          v-if="testPoint"
-          :cx="testPoint.x"
-          :cy="testPoint.y"
-          r="5"
-          :fill="isInside ? '#2ecc71' : '#e74c3c'"
-        />
-
-        <!-- 坐标显示 -->
-        <text x="10" y="20" font-size="12" fill="#333" v-if="cursorPosition">
-          X: {{ cursorPosition.x.toFixed(1) }}, Y: {{ cursorPosition.y.toFixed(1) }}
-        </text>
-      </svg>
-    </div>
-    <div class="controls">
-      <div class="control-group">
-        <h3>绘制控制</h3>
-        <button @click="startDrawing">开始绘制</button>
-        <button @click="stopDrawing">结束绘制</button>
-        <button @click="clearDrawing">清空</button>
-        <button @click="checkRandomPoint">检测随机点</button>
-      </div>
-      <div class="control-group">
-        <h3>视图控制</h3>
-        <button @click="zoomIn">放大</button>
-        <button @click="zoomOut">缩小</button>
-        <button @click="resetView">重置视图</button>
-      </div>
-      <div class="control-group">
-        <h3>数据管理</h3>
-        <button @click="saveFence">保存围栏</button>
-        <button @click="loadFence">加载围栏</button>
+        <img src="@/assets/imgs/indexPage/chache-4备份 7@2x.png" alt="car" class="car-image" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 
-const svgContainer = ref(null)
-const fenceSvg = ref(null)
-const isDrawing = ref(false)
-const fencePoints = ref([])
-const currentPoints = ref([])
-const testPoint = ref(null)
-const isInside = ref(false)
-const draggingIndex = ref(null)
-const initialPos = ref(null)
-const viewBox = ref('0 0 1000 600')
-const svgSize = ref({ width: 1000, height: 600 })
-const isPanning = ref(false)
-const panStart = ref({ x: 0, y: 0 })
-const cursorPosition = ref(null)
+const fullscreenElement = ref(null)
+const isFullscreen = ref(false)
 
-// 计算属性
-const fencePointsString = computed(() => {
-  return fencePoints.value.map((p) => `${p.x},${p.y}`).join(' ')
-})
+// 创建20辆车的数据
+const cars = ref(
+  Array.from({ length: 20 }, (_, index) => ({
+    id: index + 1,
+    x: Math.random() * 800, // 初始x坐标
+    y: Math.random() * 600, // 初始y坐标
+    dx: (Math.random() - 0.5) * 6, // x方向速度
+    dy: (Math.random() - 0.5) * 6 // y方向速度
+  }))
+)
 
-const currentPointsString = computed(() => {
-  return currentPoints.value.map((p) => `${p.x},${p.y}`).join(' ')
-})
+// 更新车辆位置
+let updateInterval
+const updateCarPositions = () => {
+  cars.value = cars.value.map((car) => {
+    // 更新位置
+    let newX = car.x + car.dx
+    let newY = car.y + car.dy
 
-const allPoints = computed(() => {
-  return isDrawing.value ? [...fencePoints.value, ...currentPoints.value] : fencePoints.value
-})
+    // 边界检查
+    if (newX <= 0 || newX >= 1200) car.dx *= -1
+    if (newY <= 0 || newY >= 800) car.dy *= -1
 
-// 初始化
-onMounted(() => {
-  updateSvgSize()
-  window.addEventListener('resize', updateSvgSize)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateSvgSize)
-})
-
-function updateSvgSize() {
-  const container = svgContainer.value
-  svgSize.value = {
-    width: container.clientWidth,
-    height: container.clientHeight
-  }
-  fenceSvg.value.setAttribute('viewBox', viewBox.value)
-}
-
-// 绘制控制
-const startDrawing = () => {
-  fencePoints.value = []
-  currentPoints.value = []
-  isDrawing.value = true
-  testPoint.value = null
-}
-
-const stopDrawing = () => {
-  if (currentPoints.value.length > 0) {
-    fencePoints.value = [...fencePoints.value, ...currentPoints.value]
-    currentPoints.value = []
-  }
-
-  if (fencePoints.value.length > 2) {
-    // 确保多边形闭合
-    if (
-      fencePoints.value[0].x !== fencePoints.value[fencePoints.value.length - 1].x ||
-      fencePoints.value[0].y !== fencePoints.value[fencePoints.value.length - 1].y
-    ) {
-      fencePoints.value.push({ ...fencePoints.value[0] })
+    return {
+      ...car,
+      x: newX,
+      y: newY
     }
-  }
-
-  isDrawing.value = false
-}
-
-const clearDrawing = () => {
-  fencePoints.value = []
-  currentPoints.value = []
-  isDrawing.value = false
-  testPoint.value = null
-}
-
-const handleSvgClick = (e) => {
-  if (!isDrawing.value || isPanning.value) return
-
-  const svg = fenceSvg.value
-  const pt = svg.createSVGPoint()
-  pt.x = e.clientX
-  pt.y = e.clientY
-  const cursorPt = pt.matrixTransform(svg.getScreenCTM().inverse())
-
-  currentPoints.value.push({
-    x: cursorPt.x,
-    y: cursorPt.y
   })
 }
 
-// 点检测
-const checkRandomPoint = () => {
-  if (fencePoints.value.length < 3) {
-    alert('请先绘制电子围栏')
-    return
+onMounted(() => {
+  // 每100毫秒更新一次，即每秒10次
+  updateInterval = setInterval(updateCarPositions, 200)
+})
+
+onUnmounted(() => {
+  // 清除定时器
+  if (updateInterval) {
+    clearInterval(updateInterval)
   }
-
-  const [vbX, vbY, vbWidth, vbHeight] = viewBox.value.split(' ').map(Number)
-
-  testPoint.value = {
-    x: vbX + Math.random() * vbWidth,
-    y: vbY + Math.random() * vbHeight
-  }
-
-  isInside.value = pointInPolygon(testPoint.value, fencePoints.value)
-}
-
-function pointInPolygon(point, polygon) {
-  const x = point.x
-  const y = point.y
-  let inside = false
-
-  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    const xi = polygon[i].x
-    const yi = polygon[i].y
-    const xj = polygon[j].x
-    const yj = polygon[j].y
-
-    const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi
-    if (intersect) inside = !inside
-  }
-
-  return inside
-}
-
-// 顶点拖拽
-const startDrag = (index, e) => {
-  e.preventDefault()
-  draggingIndex.value = index
-
-  const svg = fenceSvg.value
-  const pt = svg.createSVGPoint()
-  pt.x = e.clientX
-  pt.y = e.clientY
-  const cursorPt = pt.matrixTransform(svg.getScreenCTM().inverse())
-
-  initialPos.value = {
-    x: cursorPt.x,
-    y: cursorPt.y,
-    index
-  }
-
-  document.addEventListener('mousemove', handleDrag)
-  document.addEventListener('mouseup', stopDrag)
-}
-
-const handleDrag = (e) => {
-  if (draggingIndex.value === null) return
-
-  const svg = fenceSvg.value
-  const pt = svg.createSVGPoint()
-  pt.x = e.clientX
-  pt.y = e.clientY
-  const cursorPt = pt.matrixTransform(svg.getScreenCTM().inverse())
-
-  const points =
-    isDrawing.value && draggingIndex.value >= fencePoints.value.length
-      ? currentPoints.value
-      : fencePoints.value
-
-  const actualIndex =
-    isDrawing.value && draggingIndex.value >= fencePoints.value.length
-      ? draggingIndex.value - fencePoints.value.length
-      : draggingIndex.value
-
-  points[actualIndex] = {
-    x: cursorPt.x,
-    y: cursorPt.y
-  }
-
-  // 如果是闭合点，同步第一个点
-  if (
-    !isDrawing.value &&
-    fencePoints.value.length > 0 &&
-    draggingIndex.value === fencePoints.value.length - 1
-  ) {
-    fencePoints.value[0] = { ...fencePoints.value[fencePoints.value.length - 1] }
-  }
-}
-
-const stopDrag = () => {
-  draggingIndex.value = null
-  initialPos.value = null
-  document.removeEventListener('mousemove', handleDrag)
-  document.removeEventListener('mouseup', stopDrag)
-}
-
-// 视图控制
-const handleWheel = (e) => {
-  e.preventDefault()
-  const delta = e.deltaY > 0 ? 0.9 : 1.1
-  zoomAt(e.clientX, e.clientY, delta)
-}
-
-function zoomAt(clientX, clientY, factor) {
-  const container = svgContainer.value
-  const rect = container.getBoundingClientRect()
-  const x = ((clientX - rect.left) / rect.width) * svgSize.value.width
-  const y = ((clientY - rect.top) / rect.height) * svgSize.value.height
-
-  const [vbX, vbY, vbWidth, vbHeight] = viewBox.value.split(' ').map(Number)
-
-  const newWidth = vbWidth * factor
-  const newHeight = vbHeight * factor
-  const newX = vbX + (x - vbX) * (1 - factor)
-  const newY = vbY + (y - vbY) * (1 - factor)
-
-  // 限制缩放范围
-  if (newWidth > svgSize.value.width * 10 || newWidth < svgSize.value.width / 10) return
-
-  viewBox.value = `${newX} ${newY} ${newWidth} ${newHeight}`
-  fenceSvg.value.setAttribute('viewBox', viewBox.value)
-}
-
-const zoomIn = () => {
-  const container = svgContainer.value
-  const rect = container.getBoundingClientRect()
-  zoomAt(rect.left + rect.width / 2, rect.top + rect.height / 2, 1.2)
-}
-
-const zoomOut = () => {
-  const container = svgContainer.value
-  const rect = container.getBoundingClientRect()
-  zoomAt(rect.left + rect.width / 2, rect.top + rect.height / 2, 0.8)
-}
-
-const resetView = () => {
-  viewBox.value = `0 0 ${svgSize.value.width} ${svgSize.value.height}`
-  fenceSvg.value.setAttribute('viewBox', viewBox.value)
-}
-
-const startPan = (e) => {
-  if (draggingIndex.value !== null) return
-  isPanning.value = true
-  panStart.value = {
-    x: e.clientX,
-    y: e.clientY
-  }
-  fenceSvg.value.style.cursor = 'grabbing'
-}
-
-const handlePan = (e) => {
-  if (!isPanning.value) return
-
-  const [vbX, vbY, vbWidth, vbHeight] = viewBox.value.split(' ').map(Number)
-  const dx = ((e.clientX - panStart.value.x) / svgSize.value.width) * vbWidth
-  const dy = ((e.clientY - panStart.value.y) / svgSize.value.height) * vbHeight
-
-  viewBox.value = `${vbX - dx} ${vbY - dy} ${vbWidth} ${vbHeight}`
-  fenceSvg.value.setAttribute('viewBox', viewBox.value)
-
-  panStart.value = {
-    x: e.clientX,
-    y: e.clientY
-  }
-}
-
-const endPan = () => {
-  isPanning.value = false
-  fenceSvg.value.style.cursor = 'crosshair'
-}
-
-// 坐标显示
-const handleMouseMove = (e) => {
-  const svg = fenceSvg.value
-  const pt = svg.createSVGPoint()
-  pt.x = e.clientX
-  pt.y = e.clientY
-  const cursorPt = pt.matrixTransform(svg.getScreenCTM().inverse())
-
-  cursorPosition.value = {
-    x: cursorPt.x,
-    y: cursorPt.y
-  }
-}
-
-// 数据持久化
-const saveFence = () => {
-  if (fencePoints.value.length < 3) {
-    alert('请先绘制有效的电子围栏')
-    return
-  }
-
-  const data = {
-    points: fencePoints.value,
-    viewBox: viewBox.value,
-    svgSize: svgSize.value
-  }
-
-  localStorage.setItem('fenceData', JSON.stringify(data))
-  alert('围栏已保存')
-}
-
-const loadFence = () => {
-  const data = localStorage.getItem('fenceData')
-  if (data) {
-    try {
-      const parsed = JSON.parse(data)
-      fencePoints.value = parsed.points
-      viewBox.value = parsed.viewBox || `0 0 ${svgSize.value.width} ${svgSize.value.height}`
-      svgSize.value = parsed.svgSize || { width: 1000, height: 600 }
-
-      fenceSvg.value.setAttribute('viewBox', viewBox.value)
-      alert('围栏已加载')
-    } catch (e) {
-      alert('加载围栏数据失败')
-    }
-  } else {
-    alert('没有找到保存的围栏数据')
-  }
-}
+})
 </script>
 
 <style scoped>
-.fence-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+.map-container {
+  position: relative;
 }
 
-.svg-container {
-  flex: 1;
+.fullscreen-content {
+  width: 1200px;
+  height: 800px;
+  background-color: #f0f0f0;
   position: relative;
-  border: 1px solid #ccc;
-  background: #f9f9f9;
   overflow: hidden;
 }
 
-svg {
+.car {
   position: absolute;
-  top: 0;
-  left: 0;
+  width: 32px;
+  height: 32px;
+  transform: translate(-50%, -50%);
+}
+
+.car-image {
   width: 100%;
   height: 100%;
-  cursor: crosshair;
+  object-fit: contain;
 }
 
-svg.panning {
-  cursor: grabbing;
-}
-
-.controls {
-  padding: 10px;
-  background: #f5f5f5;
-  display: flex;
-  gap: 20px;
-}
-
-.control-group {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.control-group h3 {
-  margin: 0 0 5px 0;
-  font-size: 14px;
-  color: #333;
-}
-
-button {
-  padding: 8px 12px;
-  background: #3498db;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-button:hover {
-  background: #2980b9;
-}
-
-circle {
-  cursor: move;
+/* 全屏模式下的样式 */
+.fullscreen-content:fullscreen,
+.fullscreen-content:-webkit-full-screen,
+.fullscreen-content:-moz-full-screen,
+.fullscreen-content:-ms-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  background-color: white;
 }
 </style>
diff --git a/src/views/mapPage/realTimeMap/webSocket.js b/src/views/mapPage/realTimeMap/webSocket.js
index 4a19fc0d..4887a69f 100644
--- a/src/views/mapPage/realTimeMap/webSocket.js
+++ b/src/views/mapPage/realTimeMap/webSocket.js
@@ -1,115 +1,117 @@
 // websocket.js
 class WebSocketClient {
-    constructor(url) {
-        this.currentUrl = url;
-        this.socket = null;
-        this.heartbeatInterval = null;
-        this.messageCallback = null;
-        this.reconnectTimer = null;
-        this.reconnectAttempts = 0;
-        this.MAX_RECONNECT_ATTEMPTS = 5;
-        this.RECONNECT_DELAY = 5000; // 5 秒
-        this.HEARTBEAT_INTERVAL = 30000; // 30 秒
-        this.URL_CHECK_INTERVAL = 5000; // 每 5 秒检查一次 URL
-        this.init();
-        this.startUrlCheck();
-    }
+  constructor(url) {
+    this.currentUrl = url
+    this.socket = null
+    this.heartbeatInterval = null
+    this.messageCallback = null
+    this.reconnectTimer = null
+    this.reconnectAttempts = 0
+    this.MAX_RECONNECT_ATTEMPTS = 5
+    this.RECONNECT_DELAY = 5000 // 5 秒
+    this.HEARTBEAT_INTERVAL = 30000 // 30 秒
+    this.URL_CHECK_INTERVAL = 5000 // 每 5 秒检查一次 URL
+    this.init()
+    this.startUrlCheck()
+  }
 
-    init() {
-        try {
-            console.log('尝试创建 WebSocket 连接:', this.currentUrl);
-            this.socket = new WebSocket(this.currentUrl);
+  init() {
+    try {
+      console.log('尝试创建 WebSocket 连接:', this.currentUrl)
+      this.socket = new WebSocket(this.currentUrl)
 
-            this.socket.onopen = () => {
-                console.log('WebSocket 连接已建立:', this.currentUrl);
-                this.startHeartbeat();
-                this.reconnectAttempts = 0;
-            };
+      this.socket.onopen = () => {
+        console.log('WebSocket 连接已建立:', this.currentUrl)
+        this.startHeartbeat()
+        this.reconnectAttempts = 0
+      }
 
-            this.socket.onmessage = (event) => {
-                if (this.messageCallback) {
-                    this.messageCallback(event.data);
-                }
-            };
-
-            this.socket.onclose = () => {
-                console.log('WebSocket 连接已关闭:', this.currentUrl);
-                this.stopHeartbeat();
-                this.reconnect();
-            };
-
-            this.socket.onerror = (error) => {
-                console.error('WebSocket 发生错误:', error);
-                this.socket.close();
-            };
-        } catch (error) {
-            console.error('创建 WebSocket 连接时出错:', error);
+      this.socket.onmessage = (event) => {
+        if (this.messageCallback) {
+          this.messageCallback(event.data)
         }
-    }
+      }
 
-    startHeartbeat() {
-        this.heartbeatInterval = setInterval(() => {
-            if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-                this.socket.send('ping');
-            }
-        }, this.HEARTBEAT_INTERVAL);
-    }
+      this.socket.onclose = () => {
+        console.log('WebSocket 连接已关闭:', this.currentUrl)
+        this.stopHeartbeat()
+        this.reconnect()
+      }
 
-    stopHeartbeat() {
-        if (this.heartbeatInterval) {
-            clearInterval(this.heartbeatInterval);
-            this.heartbeatInterval = null;
-        }
-    }
-
-    onMessage(callback) {
-        this.messageCallback = callback;
-    }
-
-    send(message) {
-        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-            this.socket.send(message);
-        } else {
-            console.error('WebSocket 连接未打开，无法发送消息');
-        }
-    }
-
-    disconnect() {
+      this.socket.onerror = (error) => {
+        console.log('WebSocket 发生错误:', error)
         if (this.socket) {
-            this.stopHeartbeat();
-            this.socket.close();
-            this.socket = null;
+          this.socket.close()
         }
+      }
+    } catch (error) {
+      console.log('创建 WebSocket 连接时出错:', error)
     }
+  }
 
-    reconnect() {
-        if (this.reconnectAttempts < this.MAX_RECONNECT_ATTEMPTS) {
-            this.reconnectTimer = setTimeout(() => {
-                console.log('尝试重新连接...', this.currentUrl);
-                this.reconnectAttempts++;
-                this.init();
-            }, this.RECONNECT_DELAY);
-        } else {
-            console.error('达到最大重连次数，停止重连');
-        }
-    }
+  startHeartbeat() {
+    this.heartbeatInterval = setInterval(() => {
+      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+        this.socket.send('ping')
+      }
+    }, this.HEARTBEAT_INTERVAL)
+  }
 
-    startUrlCheck() {
-        setInterval(() => {
-            const newUrl = this.getUpdatedUrl();
-            if (newUrl && newUrl!== this.currentUrl) {
-                this.disconnect();
-                this.currentUrl = newUrl;
-                this.init();
-            }
-        }, this.URL_CHECK_INTERVAL);
+  stopHeartbeat() {
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval)
+      this.heartbeatInterval = null
     }
+  }
 
-    // 这个方法需要根据实际情况重写，用于获取最新的 URL
-    getUpdatedUrl() {
-        // 这里只是示例，返回 null 表示没有更新的 URL
-        return null;
+  onMessage(callback) {
+    this.messageCallback = callback
+  }
+
+  send(message) {
+    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+      this.socket.send(message)
+    } else {
+      console.log('WebSocket 连接未打开，无法发送消息')
     }
+  }
+
+  disconnect() {
+    if (this.socket) {
+      this.stopHeartbeat()
+      this.socket.close()
+      this.socket = null
+    }
+  }
+
+  reconnect() {
+    if (this.reconnectAttempts < this.MAX_RECONNECT_ATTEMPTS) {
+      this.reconnectTimer = setTimeout(() => {
+        console.log('尝试重新连接...', this.currentUrl)
+        this.reconnectAttempts++
+        this.init()
+      }, this.RECONNECT_DELAY)
+    } else {
+      console.log('达到最大重连次数，停止重连')
+    }
+  }
+
+  startUrlCheck() {
+    setInterval(() => {
+      const newUrl = this.getUpdatedUrl()
+      if (newUrl && newUrl !== this.currentUrl) {
+        this.disconnect()
+        this.currentUrl = newUrl
+        this.init()
+      }
+    }, this.URL_CHECK_INTERVAL)
+  }
+
+  // 这个方法需要根据实际情况重写，用于获取最新的 URL
+  getUpdatedUrl() {
+    // 这里只是示例，返回 null 表示没有更新的 URL
+    return null
+  }
 }
 
-export default WebSocketClient;
\ No newline at end of file
+export default WebSocketClient