diff --git a/.env.local b/.env.local
index c22b406f..a3752946 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://192.168.0.172:48080'
+VITE_BASE_URL='http://192.168.0.74:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
diff --git a/src/views/board/allBoard/index.vue b/src/views/board/allBoard/index.vue
index 93467fba..4ccaecd4 100644
--- a/src/views/board/allBoard/index.vue
+++ b/src/views/board/allBoard/index.vue
@@ -33,7 +33,9 @@
               <el-col :span="4">
                 <div class="top-item">
                   <div class="top-item-title"> 已取消 </div>
-                  <div class="top-item-num" style="color: #a6a6a6"> {{ data.cancelledNum || 0 }} </div>
+                  <div class="top-item-num" style="color: #a6a6a6">
+                    {{ data.cancelledNum || 0 }}
+                  </div>
                 </div>
               </el-col>
               <el-col :span="4">
@@ -77,7 +79,9 @@
               <el-col :span="4">
                 <div class="top-item">
                   <div class="top-item-title"> 离线 </div>
-                  <div class="top-item-num" style="color: #a6a6a6"> {{ data.statistics.offline || 0 }} </div>
+                  <div class="top-item-num" style="color: #a6a6a6">
+                    {{ data.statistics.offline || 0 }}
+                  </div>
                 </div>
               </el-col>
               <el-col :span="4">
@@ -92,105 +96,207 @@
       </el-col>
     </el-row>
   </div>
-  <!-- 底部列表和地图 -->
-  <div class="bottom-box" >
+  <!-- 下部分 -->
+  <div class="bottom-box">
     <el-row :gutter="10">
+      <!-- 左边 -->
       <el-col :span="6">
         <div class="bottom-box-item" v-if="data">
           <div class="bottom-box-item-table">
             <div class="bottom-box-item-title">
-            <div class="bottom-box-item-title-left"> 执行中 </div>
-            <div class="bottom-box-item-title-right" @click="toManyTask('执行中')"> 查看更多 </div>
-          </div>
-          <div>
-            <el-table :data="data.underway"  style="width: 100%">
-              <el-table-column prop="taskNo" label="任务编号" />
-              <el-table-column prop="skuNumber" label="车辆编号" />
-              <el-table-column prop="startTime" label="开始时间" :formatter="dateFormatter" />
-              <el-table-column prop="address" label="任务阶段" />
-            </el-table>
-          </div>
+              <div class="bottom-box-item-title-left"> 执行中 </div>
+              <div class="bottom-box-item-title-right" @click="toManyTask('执行中')">
+                查看更多
+              </div>
+            </div>
+            <div>
+              <el-table :data="data.underway" style="width: 100%">
+                <el-table-column prop="taskNo" label="任务编号" />
+                <el-table-column prop="skuNumber" label="车辆编号" />
+                <el-table-column prop="startTime" label="开始时间" :formatter="dateFormatter" />
+                <el-table-column prop="address" label="任务阶段" />
+              </el-table>
+            </div>
           </div>
         </div>
-        <div class="bottom-box-item" style="margin-top: 8px"  v-if="data">
+        <div class="bottom-box-item" style="margin-top: 8px" v-if="data">
           <div class="bottom-box-item-table">
             <div class="bottom-box-item-title">
-            <div class="bottom-box-item-title-left"> 待执行 </div>
-            <div class="bottom-box-item-title-right" @click="toManyTask('未开始')"> 查看更多 </div>
-          </div>
-          <div>
-            <el-table :data="data.pendingExecution"  style="width: 100%">
-              <el-table-column prop="taskNo" label="任务编号" />
-              <el-table-column prop="priorilty" label="优先级" />
-              <el-table-column prop="createTime" label="生成时间" :formatter="dateFormatter"  />
-            </el-table>
-          </div>
+              <div class="bottom-box-item-title-left"> 待执行 </div>
+              <div class="bottom-box-item-title-right" @click="toManyTask('未开始')">
+                查看更多
+              </div>
+            </div>
+            <div>
+              <el-table :data="data.pendingExecution" style="width: 100%">
+                <el-table-column prop="taskNo" label="任务编号" />
+                <el-table-column prop="priorilty" label="优先级" />
+                <el-table-column prop="createTime" label="生成时间" :formatter="dateFormatter" />
+              </el-table>
+            </div>
           </div>
         </div>
       </el-col>
-      <el-col :span="12"> 2 </el-col>
-      <el-col :span="6"> 
-        <div class="bottom-box-item"  v-if="data">
-          <div class="bottom-box-item-table">
-            <div class="bottom-box-item-title">
-            <div class="bottom-box-item-title-left"> 异常信息 </div>
-            <div class="bottom-box-item-title-right"> 查看更多 </div>
-          </div>
-          <div>
-            <el-table :data="data.robotWarnMsgDOS"  style="width: 100%">
-              <el-table-column prop="robotNo" label="车辆编号" />
-              <el-table-column prop="warnMsg" label="异常信息" >
-                <template #default="scope">
-                  <div class="warn-msg">
-                     <div class="warn-msg-color" :style="{ backgroundColor: computedBackgroundColor(scope.row.warnLevel) }">
-
+      <!-- 实时地图 -->
+      <el-col :span="12">
+        <div style="margin-bottom: 10px">
+          <el-cascader
+            v-model="mapValue"
+            :options="list"
+            @change="handleChangeMap"
+            style="width: 160px"
+          />
+        </div>
+        <div style="width: 100%; padding-bottom: 120px" class="map-box-allBoard">
+          <indexPage ref="indexPageRef" />
+        </div>
+        <div
+          style="position: fixed; bottom: 20px"
+          :style="{ width: widthVal + 'px', left: leftVal + 'px' }"
+          v-if="data&&data.deviceStatusInfoVOS"
+        >
+          <div
+            ref="scrollContainer"
+            class="scroll-container"
+            @mousedown="startDrag"
+            @mousemove="onDrag"
+            @mouseup="endDrag"
+            @mouseleave="endDrag"
+          >
+            <div class="content">
+              <div v-for="(n, i) in data.deviceStatusInfoVOS" :key="i" class="item" :class="{ noBoarder: i === data.deviceStatusInfoVOS.length - 1 }">
+                <div class="scroll-container-item-left">
+                  <div class="scroll-container-item-left-title">{{ filterTypeFun(n.deviceType, typeList) }}</div>
+                  <div class="scroll-container-item-left-img">
+                    <img
+                      :src="n.defaultImage"
+                      alt=""
+                      object-fit="contain"
+                      style="width: 100%; height: 100%"
+                    />
+                  </div>
+                </div>
+                <div class="scroll-container-item-right">
+                  <div class="scroll-container-item-right-item">
+                     <div class="scroll-container-item-right-item-title">
+                         数量：
                      </div>
-                     <div class="warn-msg-text">
-                       {{ scope.row.warnMsg || '' }}
+                     <div class="scroll-container-item-right-item-num">
+                         {{ n.totalNum || 0 }}
                      </div>
                   </div>
-                </template>
-              </el-table-column>
-              <el-table-column prop="createTime" label="发生时间"  :formatter="dateFormatter"/>
-              
-            </el-table>
-          </div>
+                  <div class="scroll-container-item-right-item" style="margin-top: 3px;">
+                     <div class="scroll-container-item-right-item-title">
+                         正常数量：
+                     </div>
+                     <div class="scroll-container-item-right-item-num">
+                         {{ n.normalNum || 0 }}
+                     </div>
+                  </div>
+                  <div class="scroll-container-item-right-item" style="margin-top: 3px;">
+                     <div class="scroll-container-item-right-item-title">
+                         异常数量：
+                     </div>
+                     <div class="scroll-container-item-right-item-num" style="color: #c60606">
+                         {{ n.abnormalNum || 0 }}
+                     </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="bottom-box-item" style="margin-top: 8px"  v-if="data">
+      </el-col>
+      <!-- 右边 -->
+      <el-col :span="6">
+        <div class="bottom-box-item" v-if="data">
           <div class="bottom-box-item-table">
             <div class="bottom-box-item-title">
-            <div class="bottom-box-item-title-left"> 车辆信息 </div>
-            <div class="bottom-box-item-title-right"> 查看更多 </div>
+              <div class="bottom-box-item-title-left"> 异常信息 </div>
+              <div class="bottom-box-item-title-right" @click="toManyWarnMsg"> 查看更多 </div>
+            </div>
+            <div>
+              <el-table :data="data.robotWarnMsgDOS" style="width: 100%">
+                <el-table-column prop="robotNo" label="车辆编号" />
+                <el-table-column prop="warnMsg" label="异常信息">
+                  <template #default="scope">
+                    <div class="warn-msg">
+                      <div
+                        class="warn-msg-color"
+                        :style="{ backgroundColor: computedBackgroundColor(scope.row.warnLevel) }"
+                      >
+                      </div>
+                      <div class="warn-msg-text">
+                        {{ scope.row.warnMsg || '' }}
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="createTime" label="发生时间" :formatter="dateFormatter" />
+              </el-table>
+            </div>
           </div>
-          <div>
-            <el-table :data="data.robotElectricityLevelVOS"  style="width: 100%">
-              <el-table-column prop="robotNo" label="车辆编号" />
-              <el-table-column prop="doLock" label="车辆状态" >
-                <template #default="scope">
-                   <span>{{ scope.row.doLock === 0 ? '正常' : '锁定' }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="batSoc" label="电量百分比" >
-                <template #default="scope">
-                   <div v-if="scope.row.batSoc === null">—</div>
-                    <div class="battery-box-all" >
+        </div>
+        <div class="bottom-box-item" style="margin-top: 8px" v-if="data">
+          <div class="bottom-box-item-table">
+            <div class="bottom-box-item-title">
+              <div class="bottom-box-item-title-left"> 车辆信息 </div>
+              <div class="bottom-box-item-title-right" @click="goCarBord"> 查看更多 </div>
+            </div>
+            <div>
+              <el-table :data="data.robotElectricityLevelVOS" style="width: 100%">
+                <el-table-column prop="robotNo" label="车辆编号" />
+                <el-table-column prop="doLock" label="车辆状态">
+                  <template #default="scope">
+                    <span>{{ scope.row.doLock === 0 ? '正常' : '锁定' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="batSoc" label="电量百分比">
+                  <template #default="scope">
+                    <div v-if="scope.row.batSoc === null">—</div>
+                    <div class="battery-box-all">
                       <div class="battery-box" v-if="scope.row.batSoc !== null">
-                       <img src="@/assets/imgs/allBoard/dianlianggreen.png" alt="" class="battery-box-img" v-if="scope.row.batSoc >=40"/>
-                       <img src="@/assets/imgs/allBoard/dianliangyellow.png" alt="" class="battery-box-img" v-if="(scope.row.batSoc < 40) && (scope.row.batSoc >=20)"/>
-                       <img src="@/assets/imgs/allBoard/dianliangred.png" alt="" class="battery-box-img" v-if="scope.row.batSoc < 20"/>
-                       <div class="battery-box-inner">
-                         <div class="battery-box-inner-inner " :class="scope.row.batSoc >=40 ? 'green-bg' : scope.row.batSoc < 40 && scope.row.batSoc >=20 ? 'yellow-bg' : 'red-bg'" :style="{width: scope.row.batSoc+'%'}">
-
-                         </div>
-                       </div>
+                        <img
+                          src="@/assets/imgs/allBoard/dianlianggreen.png"
+                          alt=""
+                          class="battery-box-img"
+                          v-if="scope.row.batSoc >= 40"
+                        />
+                        <img
+                          src="@/assets/imgs/allBoard/dianliangyellow.png"
+                          alt=""
+                          class="battery-box-img"
+                          v-if="scope.row.batSoc < 40 && scope.row.batSoc >= 20"
+                        />
+                        <img
+                          src="@/assets/imgs/allBoard/dianliangred.png"
+                          alt=""
+                          class="battery-box-img"
+                          v-if="scope.row.batSoc < 20"
+                        />
+                        <div class="battery-box-inner">
+                          <div
+                            class="battery-box-inner-inner"
+                            :class="
+                              scope.row.batSoc >= 40
+                                ? 'green-bg'
+                                : scope.row.batSoc < 40 && scope.row.batSoc >= 20
+                                  ? 'yellow-bg'
+                                  : 'red-bg'
+                            "
+                            :style="{ width: scope.row.batSoc + '%' }"
+                          >
+                          </div>
+                        </div>
+                      </div>
+                      <span class="battery-box-text" v-if="scope.row.batSoc !== null"
+                        >{{ scope.row.batSoc || 0 }}%</span
+                      >
                     </div>
-                    <span class="battery-box-text" v-if="scope.row.batSoc !== null">{{scope.row.batSoc || 0}}%</span>
-                    </div>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
           </div>
         </div>
       </el-col>
@@ -201,18 +307,30 @@
 <script setup>
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import { dateFormatter } from '@/utils/formatTime'
-import  * as ChartsApi from '@/api/boardCharts'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as ChartsApi from '@/api/boardCharts'
+import { DICT_TYPE, getIntDictOptions,getDictOptions } from '@/utils/dict'
+import indexPage from './indexPage.vue'
+import * as MapApi from '@/api/map/map'
 const router = useRouter() // 路由对象
+const indexPageRef = ref(null)
+const typeList = ref([])
 defineOptions({ name: 'BoardAllBoard' })
 const data = ref(null)
 //获取数据
-const getAllData =  async () => {
-   let datas = await ChartsApi.bulletinBoardGet()
-   console.log(datas)
-   data.value = datas
+const getAllData = async () => {
+  let datas = await ChartsApi.bulletinBoardGet()
+  console.log(datas)
+  data.value = datas
+}
+const widthVal = ref(0)
+const leftVal = ref(0)
+const getWidth = (val) => {
+  widthVal.value = val
+  console.log(widthVal.value)
+}
+const getLeftPx = (val) => {
+  leftVal.value = val
 }
-
 //返回异常颜色
 const computedBackgroundColor = (warnLevel) => {
   switch (warnLevel) {
@@ -229,6 +347,7 @@ const computedBackgroundColor = (warnLevel) => {
   }
 }
 
+//前往更多任务
 const toManyTask = (type) => {
   // console.log(getIntDictOptions(DICT_TYPE.ROBOT_TASK_STATUS))
   // return
@@ -240,8 +359,185 @@ const toManyTask = (type) => {
   })
 }
 
+//前往异常信息
+const toManyWarnMsg = () => {
+  router.push({
+    path: '/carError'
+  })
+}
+// 前往车辆看板
+const goCarBord = () => {
+  router.push({
+    path: '/board/carBoard',
+    
+  })
+}
+const list = ref([])  // 地图区域列表
+const mapValue = ref([]) //选中的区域绑定的数组值
+const mapInfo = ref(null) //选中的区域
+//获取地图区域
+const getList = async () => {
+  let data = await MapApi.getPositionMapGetMap()
+  let mapList = []
+  for (let key in data) {
+    mapList.push({
+      floor: key,
+      label: key + '层',
+      value: key,
+      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
+        })
+      }
+    })
+  }
+
+  list.value = mapList
+  console.log(list.value, data)
+  if (mapValue.value.length) {
+    handleChangeMap(mapValue.value)
+  } else {
+    mapValue.value = [list.value[0].value, list.value[0].children[0].value]
+    mapInfo.value = list.value[0].children[0]
+      ? JSON.parse(JSON.stringify(list.value[0].children[0]))
+      : {
+          mapId: '',
+          floor: '',
+          area: ''
+        }
+    indexPageRef.value.getMapData(mapInfo.value)
+  }
+}
+//切换地图选择
+const handleChangeMap = async (e) => {
+  mapInfo.value = findChildrenByValues(list.value, e)
+    ? findChildrenByValues(list.value, e)
+    : {
+        mapId: '',
+        floor: '',
+        area: ''
+      }
+  console.log(mapInfo.value)
+  indexPageRef.value.getMapData(mapInfo.value)
+}
+// 筛选出对应的区域对象
+const findChildrenByValues = (tree, values) => {
+  if (!tree || tree.length === 0) {
+    return null
+  }
+  function traverse(node) {
+    if (node.children) {
+      for (let child of node.children) {
+        if (values.includes(child.value)) {
+          return child
+        }
+        let result = traverse(child)
+        if (result) {
+          return result
+        }
+      }
+    }
+    return null
+  }
+
+  for (let root of tree) {
+    if (values.includes(root.value)) {
+      if (root.children) {
+        for (let child of root.children) {
+          if (values.includes(child.value)) {
+            return child
+          }
+          let result = traverse(child)
+          if (result) {
+            return result
+          }
+        }
+      }
+    }
+    let result = traverse(root)
+    if (result) {
+      return result
+    }
+  }
+  return null
+}
+const scrollContainer = ref(null)
+let isDragging = false
+let startX = 0
+let scrollLeft = 0
+
+const startDrag = (e) => {
+  isDragging = true
+  const rect = scrollContainer.value.getBoundingClientRect()
+  startX = e.clientX - rect.left
+  scrollLeft = scrollContainer.value.scrollLeft
+  scrollContainer.value.style.cursor = 'grabbing'
+}
+
+const onDrag = (e) => {
+  if (!isDragging) return
+  const rect = scrollContainer.value.getBoundingClientRect()
+  const mouseX = e.clientX - rect.left
+  const dragDistance = (mouseX - startX) * 2.5 // 速度系数
+  scrollContainer.value.scrollLeft = scrollLeft - dragDistance
+}
+
+const endDrag = () => {
+  isDragging = false
+  scrollContainer.value.style.cursor = 'grab'
+}
+const getElementWidthByClass = (className) => {
+  const element = document.querySelector(`.${className}`)
+  if (element) {
+    // return window.getComputedStyle(element).width
+    const widthWithUnit = window.getComputedStyle(element).width
+    return widthWithUnit.slice(0, -2)
+  }
+  return null
+}
+const getLeft = () => {
+  let indexpageContainer = document.getElementsByClassName('map-box-allBoard')[0]
+  // console.log('距离左边的距离', indexpageContainer.getBoundingClientRect().left)
+  leftVal.value = indexpageContainer.getBoundingClientRect().left
+}
+const getWidthPx = () => {
+  let width = getElementWidthByClass('map-box-allBoard')
+    // console.log("pppppppppppppp",width)
+    widthVal.value = width
+}
+const getLeftWidth = () => {
+  nextTick(() => {
+    getWidthPx()
+    getLeft()
+  })
+}
+//根据type和列表返回对应中文
+const filterTypeFun = (type, list) => {
+	if (list.length) {
+		let obj = list.find(item => {
+			return item.value == type
+		})
+		return obj == undefined ? type : obj.label
+	} else {
+		return type
+	}
+}
 onMounted(() => {
+  typeList.value = getDictOptions(DICT_TYPE.DEVICE_TYPE)
   getAllData()
+  getList()
+  getLeftWidth()
+  window.addEventListener('resize', getLeftWidth)
+  
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', getLeftWidth)
 })
 </script>
 
@@ -304,58 +600,57 @@ onMounted(() => {
   color: #1677ff;
   cursor: pointer;
 }
-.bottom-box-item-table{
+.bottom-box-item-table {
   width: 100%;
 }
-.battery-box{
+.battery-box {
   width: 22px;
   height: 11px;
   position: relative;
- 
 }
-.battery-box-img{
+.battery-box-img {
   width: 100%;
   height: 100%;
   vertical-align: top;
 }
-.battery-box-inner{
+.battery-box-inner {
   width: 17px;
   height: 8px;
   position: absolute;
-  left:  50%;
+  left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
 }
-.battery-box-inner-inner{
+.battery-box-inner-inner {
   height: 100%;
-  
 }
-.green-bg{
-  background: #52C41A;
+.green-bg {
+  background: #52c41a;
 }
-.yellow-bg{
-  background: #F1CD0B;
+.yellow-bg {
+  background: #f1cd0b;
 }
-.red-bg{
-  background: #C60606;
+.red-bg {
+  background: #c60606;
 }
-.battery-box-text{
-  font-family: PingFangSC, PingFang SC;
-font-weight: 400;
-font-size: 12px;
-color: #0D162A;
-margin-left: 3px;
+.battery-box-text {
+  font-family:
+    PingFangSC,
+    PingFang SC;
+  font-weight: 400;
+  font-size: 12px;
+  color: #0d162a;
+  margin-left: 3px;
 }
-.battery-box-all{
+.battery-box-all {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 }
-.warn-msg{
+.warn-msg {
   display: flex;
-  
 }
-.warn-msg-color{
+.warn-msg-color {
   width: 8px;
   height: 8px;
   flex-shrink: 0;
@@ -363,13 +658,99 @@ margin-left: 3px;
   margin-right: 4px;
   margin-top: 4px;
 }
-.warn-msg-text{
+.warn-msg-text {
   flex: 1;
+  font-family:
+    PingFangSC,
+    PingFang SC;
+  font-weight: 400;
+  font-size: 12px;
+  color: #0d162a;
+  margin-top: -3px;
+}
+/* 容器样式 */
+.scroll-container {
+  width: 100%;
+  height: 104px;
+  overflow: hidden;
+  position: relative;
+  cursor: grab;
+  user-select: none;
+  background: #fff;
+  margin-top: 10px;
+}
+
+/* 隐藏滚动条 */
+.scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* 内容布局 */
+.content {
+  display: inline-flex;
+  height: 100%;
+  padding: 20px 0;
+  white-space: nowrap;
+}
+
+/* 单个项目样式 */
+.item {
+  display: inline-flex;
+  align-items: center;
+
+  padding: 17px 30px;
+  background: #fff;
+  transition: transform 0.2s;
+  border-right: 2px solid #e9e9e9;
+}
+
+/* .item:hover {
+  transform: translateY(-3px);
+} */
+
+/* 拖拽时状态 */
+.scroll-container:active {
+  cursor: grabbing;
+}
+.scroll-container-item-left-title {
+  font-family:
+    PingFangSC,
+    PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #0d162a;
+  margin-bottom: 14px;
+  flex-shrink: 0;
+}
+.scroll-container-item-left-img {
+  width: 40px;
+  height: 40px;
+  vertical-align: top;
+  flex-shrink: 0;
+}
+.scroll-container-item-right {
+  flex-shrink: 0;
+  margin-left: 16px;
+}
+.noBoarder{
+  border-right: none;
+}
+.scroll-container-item-right-item{
+  display: flex;
+  flex-shrink: 0;
+}
+.scroll-container-item-right-item-title{
   font-family: PingFangSC, PingFang SC;
 font-weight: 400;
 font-size: 12px;
 color: #0D162A;
-margin-top: -3px;
-
+flex-shrink: 0;
+}
+.scroll-container-item-right-item-num{
+  font-family: PingFangSC, PingFang SC;
+font-weight: 400;
+font-size: 12px;
+color: #0D162A;
+flex-shrink: 0;
 }
 </style>
diff --git a/src/views/board/allBoard/indexPage.vue b/src/views/board/allBoard/indexPage.vue
new file mode 100644
index 00000000..31b988e8
--- /dev/null
+++ b/src/views/board/allBoard/indexPage.vue
@@ -0,0 +1,1055 @@
+<template>
+  <div
+    class="affix-container"
+    id="indexpage-container"
+    :style="{
+      height: heightVal * radio + 'px',
+      cursor: isDrag ? 'pointer' : 'default',
+      scale: isSizeRaio,
+      transformOrigin: '0 0'
+    }"
+  >
+    <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" />
+
+        <div class="indexpage-container-box-point">
+          <!-- 连线 -->
+          <div v-if="legendObj.driveLineShow">
+            <div class="line-box" v-for="(item, index) in lineList" :key="index">
+              <svg id="svg" :width="widthVal" :height="heightVal">
+                <template v-if="item.method == 0">
+                  <line
+                    :x1="(Number(item.startPointX) + Number(item.beginWidth) / 2) * radio"
+                    :y1="(Number(item.startPointY) + Number(item.beginHigh) / 2) * radio"
+                    :x2="(Number(item.endPointX) + Number(item.endWidth) / 2) * radio"
+                    :y2="(Number(item.endPointY) + Number(item.endHigh) / 2) * radio"
+                    stroke="#00329F"
+                    :stroke-width="5*radio"
+                  />
+                </template>
+                <template v-else>
+                  <path :d="getCurvePath(item)" :stroke="'#00329F'" :stroke-width="5*radio" fill="none" />
+                </template>
+              </svg>
+            </div>
+          </div>
+          <!-- 小车 -->
+          <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: legendObj.carShow ? 40 * radio + 'px' : '0',
+              height: legendObj.carShow ? 22 * radio + 'px' : '0'
+            }"
+          >
+            <img
+              src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
+              alt=""
+              style="width: 100%; height: 100%"
+            />
+          </div>
+          <div
+            class="indexpage-container-box-point-item"
+            v-for="(item, index) in pointList"
+            :key="index"
+            :style="{ left: item.locationX * radio + 'px', top: item.locationY * radio + 'px' }"
+          >
+            <!-- 库位点 -->
+            <div
+              class="indexpage-container-box-point-item-inner"
+              v-if="item.showData"
+              :style="{
+                width:
+                  (item.showData.locationWide / nowObject.showYamlJson.resolution / 100) * radio +
+                  'px',
+                height:
+                  (item.showData.locationDeep / nowObject.showYamlJson.resolution / 100) * radio +
+                  'px'
+              }"
+            >
+              <!-- 库位 2-->
+              <div v-if="item.type == 2" style="width: 100%; height: 100%">
+                <el-popover placement="top-start" trigger="hover" width="auto">
+                  <template #reference>
+                    <img
+                      :src="item.imgUrl"
+                      alt=""
+                      style="width: 100%; height: 100%"
+                      @dblclick="storeClick(item)"
+                    />
+                  </template>
+                  <div class="indexpage-container-box-point-item-inner-popover">
+                    <div
+                      class="indexpage-container-box-point-item-inner-popover-item"
+                      style="margin-bottom: 8px"
+                    >
+                      <div class="indexpage-container-box-point-item-inner-popover-name">
+                        库位名：
+                      </div>
+                      <div class="indexpage-container-box-point-item-inner-popover-value">
+                        {{ item.showData.locationNo || '' }}
+                      </div>
+                    </div>
+                    <div
+                      class="indexpage-container-box-point-item-inner-popover-item"
+                      style="margin-bottom: 8px"
+                    >
+                      <div class="indexpage-container-box-point-item-inner-popover-name">
+                        所属线库：
+                      </div>
+                      <div class="indexpage-container-box-point-item-inner-popover-value">
+                        {{ item.showData.laneName || '' }}
+                      </div>
+                    </div>
+                    <div
+                      class="indexpage-container-box-point-item-inner-popover-item"
+                      style="margin-bottom: 8px"
+                    >
+                      <div class="indexpage-container-box-point-item-inner-popover-name">
+                        所属区域：
+                      </div>
+                      <div class="indexpage-container-box-point-item-inner-popover-value">
+                        {{ item.showData.areaName || '' }}
+                      </div>
+                    </div>
+                  </div>
+                </el-popover>
+              </div>
+              <!-- 设备点 -->
+              <div v-if="item.type == 3">
+                <img
+                  :src="item.formattedData.mapImageUrl"
+                  alt=""
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </div>
+            <!-- 设备点 -->
+            <div
+              class="indexpage-container-box-point-item-inner"
+              v-if="item.type == 3"
+              :style="{
+                width:
+                  (item.formattedData.locationWide / nowObject.showYamlJson.resolution / 100) *
+                    radio +
+                  'px',
+                height:
+                  (item.formattedData.locationDeep / nowObject.showYamlJson.resolution / 100) *
+                    radio +
+                  'px'
+              }"
+            >
+              <div>
+                <img
+                  :src="
+                    item.formattedData.mapImageUrl
+                      ? item.formattedData.mapImageUrl
+                      : 'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
+                  "
+                  alt=""
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </div>
+            <!-- 停车点 -->
+            <div
+              class="indexpage-container-box-point-item-inner"
+              v-if="item.type == 4"
+              :style="{
+                width:
+                  (item.formattedData.locationWide / nowObject.showYamlJson.resolution / 100) *
+                    radio +
+                  'px',
+                height:
+                  (item.formattedData.locationDeep / nowObject.showYamlJson.resolution / 100) *
+                    radio +
+                  'px'
+              }"
+            >
+              <div>
+                <img
+                  :src="
+                    item.formattedData.mapImageUrl
+                      ? item.formattedData.mapImageUrl
+                      : 'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'
+                  "
+                  alt=""
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </div>
+            <!-- 路径点 -->
+            <div
+              class="indexpage-container-box-point-item-inner"
+              v-if="item.type == 5"
+              :style="{
+                width: 40 * radio + 'px',
+                height: 40 * radio + 'px'
+              }"
+            >
+              <div>
+                <img
+                  :src="
+                    item.formattedData.mapImageUrl
+                      ? item.formattedData.mapImageUrl
+                      : 'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'
+                  "
+                  alt=""
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </div>
+            <!-- 等待点 -->
+            <div
+              class="indexpage-container-box-point-item-inner"
+              v-if="item.type == 6"
+              :style="{
+                width: 40 * radio + 'px',
+                height: 40 * radio + 'px'
+              }"
+            >
+              <div>
+                <img
+                  :src="
+                    item.formattedData.mapImageUrl
+                      ? item.formattedData.mapImageUrl
+                      : 'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'
+                  "
+                  alt=""
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </div>
+            <!-- 普通点 -->
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              :content="item.sortNum"
+              placement="top"
+              v-if="item.type == 1"
+            >
+              <div :style="{ width: 10 * radio + 'px', height: 10 * radio + 'px', background: '#1890ff'}">
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 左下角图例 -->
+  <div class="affix-container-left" :style="{ left: boxLeft + 'px' }" v-if="false">
+    <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" v-if="false">
+    <!-- 拖拽 -->
+    <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" />
+</template>
+
+<script setup>
+import {
+  ref,
+  defineComponent,
+  reactive,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  onUnmounted
+} from 'vue'
+import * as MapApi from '@/api/map/map'
+import WebSocketClient from '@/views/mapPage/realTimeMap/webSocket.js'
+import storeDialog from '@/views/mapPage/realTimeMap/components/storeDialog.vue'
+import { color } from 'echarts'
+import { resetDragPosition } from '@/utils/drag'
+import carDialog from '@/views/mapPage/realTimeMap/components/carDialog.vue'
+
+const imgUrl = ref('')
+const carDialogRef = ref(null)
+const socketClient = ref(null)
+
+const emit = defineEmits(['transmitMapId','getWidth','getLeftPx'])
+const storeDialogRef = ref(null)
+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 data = JSON.parse(testJson.content)
+  // console.log("============",data)
+  let dataList = []
+  for (let key in data) {
+    dataList.push({
+      macAddress: key,
+      data: JSON.parse(data[key])
+    })
+  }
+  // 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 getCurvePath = (curve) => {
+  let startPointX = (Number(curve.startPointX) + Number(curve.beginWidth) / 2) * radio.value
+  let startPointY = (Number(curve.startPointY) + Number(curve.beginHigh) / 2) * radio.value
+  let endPointX = (Number(curve.endPointX) + Number(curve.endWidth) / 2) * radio.value
+  let endPointY = (Number(curve.endPointY) + Number(curve.endHigh) / 2) * radio.value
+
+  return `M ${startPointX} ${startPointY} C ${curve.beginControlX * radio.value} ${curve.beginControlY * radio.value}, ${curve.endControlX * radio.value} ${curve.endControlY * radio.value}, ${endPointX} ${endPointY}`
+}
+//放大缩小
+const isSizeRaio = ref(1)
+const changeSizeRaio = (type) => {
+  if (type < 0 && isSizeRaio.value + type <= 0) {
+    return
+  }
+  isSizeRaio.value += type
+}
+//图例状态
+const legendObj = reactive({
+  driveLineShow: true,
+  carShow: true,
+  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()
+  let mapList = []
+  for (let key in data) {
+    mapList.push({
+      floor: key,
+      label: key + '层',
+      value: key,
+      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
+        })
+      }
+    })
+  }
+
+  list.value = mapList
+  // console.log(list.value, data)
+  //默认取第一个
+  if (data[1][0]) {
+    getMapData(data[1][0])
+  }
+}
+//库位双击
+const storeClick = async (item) => {
+  // console.log(item)
+  let storeData = await MapApi.houseLocationGetByMapItemId({
+    mapId: item.positionMapId,
+    mapItemId: item.id
+  })
+  // console.log(storeData)
+  storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
+}
+const lineList = ref([])
+const pointList = ref([])
+const getPositionMapListFun = async (positionMapId) => {
+  // console.log(positionMapId)
+  let data = await MapApi.getPositionMapItemList({ positionMapId: positionMapId })
+  // console.log(data)
+  if (data && data.length > 0) {
+    data.forEach((item) => {
+      // console.log(JSON.parse(item.dataJson))
+      item.formattedData = item.dataJson ? JSON.parse(item.dataJson) : ''
+      item.showData = item.dataJson ? JSON.parse(item.dataJson)[0] : null
+      item.imgUrl = formatteTypeImg(item.type)
+    })
+  }
+  // console.log(data)
+  pointList.value = data
+
+  // console.log(pointList.value)
+  // let lineStyle = calculateDistanceAndAngle(
+  //   {
+  //     left: pointList.value[0].locationX,
+  //     top: pointList.value[0].locationY
+  //   },
+  //   {
+  //     left: pointList.value[1].locationX,
+  //     top: pointList.value[1].locationY
+  //   }
+  // )
+  // console.log(lineStyle)
+  // lineList.value = [
+  //   {
+  //     ...lineStyle,
+  //     color: '#1677ff',
+  //     height: 2
+  //   }
+  // ]
+}
+const draggableElement = ref(null)
+const resetPosition = () => {
+  if (draggableElement.value) {
+    resetDragPosition(draggableElement.value)
+  }
+}
+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
+  }
+}
+
+const formatteTypeImg = (type) => {
+  switch (type) {
+    case 1:
+      return ''
+    case 2:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png'
+    case 3:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
+    case 4:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'
+    case 5:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'
+    case 6:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'
+    default:
+      return ''
+  }
+}
+const replaceHttpWithWs = (str) => {
+  return str.replace(/^http/, 'ws')
+}
+// 连接websocket
+const linkWebSocket = (url) => {
+  socketClient.value = new WebSocketClient(url)
+  if (socketClient.value) {
+    // 监听消息
+    socketClient.value.onMessage((message) => {
+      console.log('收到消息:', message)
+      if (message.type == 'map_push') {
+        let data = JSON.parse(testJson.content)
+        // console.log("============",data)
+        let dataList = []
+        for (let key in data) {
+          dataList.push({
+            macAddress: key,
+            data: JSON.parse(data[key])
+          })
+        }
+        // console.log('=====', dataList)
+        testCarList.value = dataList
+      }
+    })
+  }
+}
+// 发送websocket消息
+const sendMessage = () => {
+  socketClient.value.send('Hello, WebSocket!')
+}
+// 断开连接
+const disconnect = () => {
+  socketClient.value.disconnect()
+}
+//获取扫描图
+const getMapData = async (item) => {
+  console.log('============', JSON.parse(item.yamlJson))
+  nowObject.value = JSON.parse(JSON.stringify(item))
+  nowObject.value.showYamlJson = JSON.parse(item.yamlJson)
+  let websoketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`
+  // console.log(websoketUrl)
+  linkWebSocket(websoketUrl)
+  getPositionMapListFun(nowObject.value.id)
+  emit('transmitMapInfo', {
+    id: item.id,
+    floor: item.floor,
+    area: item.area
+  })
+  let data = await MapApi.getPositionMapdDwnloadPngBase64({
+    floor: item.floor,
+    area: item.area
+  })
+  imgUrl.value = data
+  computedRatio()
+  getMapLineList()
+}
+const heightVal = ref(0)
+const widthVal = ref(0)
+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)
+        })
+
+      let width = getElementWidthByClass('indexpage-container')
+      emit('getWidth',width)
+      getImageWidth(imgUrl.value, 'width').then((res) => {
+        // console.log(res)
+        let ratioVal = width / res
+        radio.value = ratioVal
+        widthVal.value = res
+        
+        if (pointList.value.length) {
+          pointList.value.forEach((item) => {
+            item.radio = radio.value
+          })
+        }
+        if (testCarList.value.length) {
+          testCarList.value.forEach((item) => {
+            item.radio = radio.value
+          })
+        }
+      })
+      getImageWidth(imgUrl.value, 'height').then((res) => {
+        // console.log('高', res)
+        heightVal.value = res
+      })
+      // console.log(width)
+    }
+  })
+}
+
+const getMapLineList = () => {
+  MapApi.mapLineListGet({ positionMapId: nowObject.value.id }).then((res) => {
+    // console.log(res)
+    lineList.value = res
+  })
+}
+
+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 方向上的偏移量
+  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) {
+    // return window.getComputedStyle(element).width
+    const widthWithUnit = window.getComputedStyle(element).width
+    return widthWithUnit.slice(0, -2)
+  }
+  return null
+}
+//小车双击
+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
+  emit('getLeftPx', indexpageContainer.getBoundingClientRect().left)
+}
+// 封装监听元素宽度变化的方法
+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>
+.affix-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.8);
+}
+.indexpage-container {
+  width: 100%;
+  position: relative;
+}
+.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 {
+  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;
+}
+
+:focus-visible {
+  outline: none;
+}
+.indexpage-container-box {
+  width: 100%;
+  position: relative;
+}
+.indexpage-container-box-img {
+  width: 100%;
+  height: auto;
+}
+.indexpage-container-box-point-item-inner-popover-item {
+  display: flex;
+  font-family:
+    PingFangSC,
+    PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #0d162a;
+}
+.line-box {
+  position: absolute;
+}
+.indexpage-car-item {
+  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/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue
index 8444b0fd..b6e6be64 100644
--- a/src/views/mapPage/realTimeMap/components/indexPage.vue
+++ b/src/views/mapPage/realTimeMap/components/indexPage.vue
@@ -10,7 +10,7 @@
     }"
   >
     <div
-      class="indexpage-container"
+      :class="isDrag ? 'indexpage-container-active' : 'indexpage-container'"
       v-if="imgUrl"
       v-drag="isDrag"
       :style="{ scale: 1, transformOrigin: '0 0' }"
@@ -31,11 +31,11 @@
                     :x2="(Number(item.endPointX) + Number(item.endWidth) / 2) * radio"
                     :y2="(Number(item.endPointY) + Number(item.endHigh) / 2) * radio"
                     stroke="#00329F"
-                    stroke-width="5"
+                    :stroke-width="5*radio"
                   />
                 </template>
                 <template v-else>
-                  <path :d="getCurvePath(item)" :stroke="'#00329F'" stroke-width="5" fill="none" />
+                  <path :d="getCurvePath(item)" :stroke="'#00329F'" :stroke-width="5*radio" fill="none" />
                 </template>
               </svg>
             </div>
@@ -239,8 +239,8 @@
               placement="top"
               v-if="item.type == 1"
             >
-              <div style="width: 10px; height: 10px; border-radius: 50%; background: #1890ff">
-              </div>
+            <div :style="{ width: 10 * radio + 'px', height: 10 * radio + 'px', background: '#1890ff'}">
+            </div>
             </el-tooltip>
           </div>
         </div>
@@ -899,6 +899,14 @@ onUnmounted(() => {
   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;