实时地图

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -5,7 +5,7 @@
     :style="{
       height: heightVal + 'px',
       cursor: isDrag ? 'pointer' : 'default',
-      scale: isSizeRaio,
+      scale: isSizeRadio,
       transformOrigin: '0 0'
     }"
   >
@@ -17,7 +17,7 @@
       ref="draggableElement"
     >
       <div class="indexpage-container-box">
-        <img :src="imgUrl" alt="" class="indexpage-container-box-img" />
+        <img :src="imgUrl" class="indexpage-container-box-img" />
 
         <div class="indexpage-container-box-point">
           <!-- 连线 -->
@@ -27,11 +27,27 @@
                 <template v-for="(item, index) in lineList" :key="index">
                   <!-- 定义箭头 -->
                   <defs>
-                    <marker id="forward-arrow" viewBox="0 0 10 10" refX="10" refY="5" orient="auto">
+                    <marker
+                      id="forward-arrow"
+                      viewBox="0 0 10 10"
+                      refX="10"
+                      refY="5"
+                      orient="auto"
+                      markerWidth="2"
+                      markerHeight="2"
+                    >
                       <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
                     </marker>
                     <!-- 反向箭头 -->
-                    <marker id="backward-arrow" viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
+                    <marker
+                      id="backward-arrow"
+                      viewBox="0 0 10 10"
+                      refX="0"
+                      refY="5"
+                      orient="auto"
+                      markerWidth="2"
+                      markerHeight="2"
+                    >
                       <path d="M 10 0 L 0 5 L 10 10 z" fill="black" />
                     </marker>
                   </defs>
@@ -42,7 +58,7 @@
                       :x2="Number(item.endPointX) * radio"
                       :y2="Number(item.endPointY) * radio"
                       :stroke="item.isSelect ? '#f48924' : '#00329F'"
-                      :stroke-width="5 * radio"
+                      :stroke-width="4 * radio"
                       :marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''"
                       marker-end="url(#single-arrow)"
                       @click="handleChooseRoute(item, index)"
@@ -51,7 +67,7 @@
                       :d="getLineMidArrowPath(item)"
                       stroke="none"
                       fill="black"
-                      stroke-width="4"
+                      :stroke-width="4 * radio"
                       :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
                       :marker-end="
                         item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
@@ -62,7 +78,7 @@
                     <path
                       :d="getCurvePath(item)"
                       :stroke="item.isSelect ? '#f48924' : '#00329F'"
-                      :stroke-width="5 * radio"
+                      :stroke-width="4 * radio"
                       fill="none"
                       :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
                       :marker-end="
@@ -97,7 +113,6 @@
           >
             <img
               src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
-              alt=""
               style="width: 100%; height: 100%"
             />
           </div>
@@ -107,209 +122,93 @@
             :key="index"
             :style="{
               left:
-                (item.locationX - item.locationWide / 2 / nowObject.showYamlJson.resolution / 100) *
+                (Number(item.locationX) - Number(item.locationWidePx) / 2) * Number(radio) + 'px',
-                  radio +
-                'px',
               top:
-                (item.locationY - item.locationDeep / 2 / nowObject.showYamlJson.resolution / 100) *
+                (Number(item.locationY) - Number(item.locationDeepPx) / 2) * Number(radio) + 'px',
-                  radio +
+              width: Number(item.locationWidePx) * Number(radio) + 'px',
-                'px'
+              height: Number(item.locationDeepPx) * Number(radio) + 'px'
             }"
           >
-            <!-- 库位点 -->
+            <!-- 1 路径点 -->
-            <div
+            <el-tooltip class="box-item" effect="dark" :content="item.sortNum + ''" placement="top">
-              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%; vertical-align: top">
-                <el-popover placement="top-start" trigger="hover" width="auto">
-                  <template #reference>
-                    <img
-                      :src="item.imgUrl"
-                      alt=""
-                      :style="{
-                        width:
-                          (item.showData.locationWide / nowObject.showYamlJson.resolution / 100) *
-                            radio +
-                          'px',
-                        height:
-                          (item.showData.locationDeep / nowObject.showYamlJson.resolution / 100) *
-                            radio +
-                          'px',
-                        verticalAlign: 'top'
-                      }"
-                      @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: 150 * radio + 'px',
-                height: 150 * 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: 150 * radio + 'px',
-                height: 150 * 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
+                v-if="item.type === 1"
                 :style="{
-                  width: 10 * radio + 'px',
+                  width: Number(item.locationWidePx) * Number(radio) + 'px',
-                  height: 10 * radio + 'px',
+                  height: Number(item.locationDeepPx) * Number(radio) + 'px',
-                  background: '#000',
+                  backgroundColor: '#000',
                   borderRadius: '50%'
                 }"
               >
               </div>
             </el-tooltip>
+            <!-- 库位点 -->
+            <el-popover placement="top-start" trigger="hover" width="auto">
+              <template #reference>
+                <img
+                  v-if="item.showData && item.type == 2"
+                  :src="item.imgUrl"
+                  :style="nodeStyle(item, index)"
+                  @dblclick="storeClick(item)"
+                />
+              </template>
+              <div>
+                <div class="indexpage-popover-item">
+                  <div> 库位名： </div>
+                  <div>
+                    {{ item.showData?.locationNo || '' }}
+                  </div>
+                </div>
+                <div class="indexpage-popover-item">
+                  <div> 所属线库： </div>
+                  <div>
+                    {{ item.showData?.laneName || '' }}
+                  </div>
+                </div>
+                <div class="indexpage-popover-item">
+                  <div> 所属区域： </div>
+                  <div>
+                    {{ item.showData?.areaName || '' }}
+                  </div>
+                </div>
+              </div>
+            </el-popover>
+            <!-- 设备点 -->
+            <img
+              v-if="item.type == 3"
+              :src="
+                item.formattedData.mapImageUrl ||
+                'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
+              "
+              :style="nodeStyle(item, index)"
+            />
+            <!-- 停车点 -->
+            <img
+              v-if="item.type == 4"
+              :src="
+                item.formattedData.mapImageUrl ||
+                'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'
+              "
+              :style="nodeStyle(item, index)"
+            />
+            <!-- 路径点 -->
+            <img
+              v-if="item.type == 5"
+              :src="
+                item.formattedData.mapImageUrl ||
+                'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'
+              "
+              :style="nodeStyle(item, index)"
+            />
+            <!-- 等待点 -->
+            <img
+              v-if="item.type == 6"
+              :src="
+                item.formattedData.mapImageUrl ||
+                'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'
+              "
+              :style="nodeStyle(item, index)"
+            />
           </div>
         </div>
       </div>
@@ -321,7 +220,7 @@
       <div
         class="affix-container-left-box-item-box"
         :style="{
-          height: legendObj.legendShow ? '84px' : '0',
+          height: legendObj.legendShow ? '5.25rem' : '0',
           overflow: 'hidden',
           transition: 'all 0.3s ease-in-out'
         }"
@@ -330,14 +229,12 @@
           <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"
@@ -347,14 +244,12 @@
           <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"
@@ -368,7 +263,6 @@
         <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)',
@@ -383,13 +277,12 @@
   <div class="affix-container-right" v-if="!isAllBoard">
     <!-- 拖拽 -->
     <div class="affix-container-right-item" @click="changeIsDrag">
-      <img src="@/assets/imgs/indexPage/编组 12.png" alt="" style="width: 100%; height: 100%" />
+      <img src="@/assets/imgs/indexPage/编组 12.png" 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)"
       />
@@ -398,7 +291,6 @@
     <div class="affix-container-right-item">
       <img
         src="@/assets/imgs/indexPage/编组 15.png"
-        alt=""
         style="width: 100%; height: 100%"
         @click="changeSizeRaio(-0.2)"
       />
@@ -407,7 +299,6 @@
     <div class="affix-container-right-item">
       <img
         src="@/assets/imgs/indexPage/编组 22.png"
-        alt=""
         style="width: 100%; height: 100%"
         @click="toggleFullScreen"
       />
@@ -447,25 +338,32 @@ const nowObject = ref(null) // 地图当前对象 父组件传过来的
 const testCarList = ref([]) //小车数组
 const carWidth = ref(60)
 const carHeight = ref(32)
+
+const nodeStyle = (item, index) => {
+  return {
+    verticalAlign: 'top',
+    objectFit: 'cover',
+    width: Number(item.locationWidePx) * Number(radio.value) + 'px',
+    height: Number(item.locationDeepPx) * Number(radio.value) + 'px'
+  }
+}
+
 // 定义属性
 const props = defineProps({
   // 当前选中的链接
   isAllBoard: propTypes.bool.def(false)
 })
 const convertActualToBrowser = (pointX, pointY) => {
-  const y1 =
+  let resolution = Number(nowObject.value.showYamlJson.resolution)
-    Number(nowObject.value.showYamlJson.origin[1]) +
+  let origin = nowObject.value.showYamlJson.origin
-    Number(nowObject.value.showYamlJson.height) * Number(nowObject.value.showYamlJson.resolution)
+
-  let x = Math.max(Number(pointX) - Number(nowObject.value.showYamlJson.origin[0]), 0)
+  const y1 = Number(origin[1]) + Number(nowObject.value.showYamlJson.height) * resolution
+  let x = Math.max(Number(pointX) - Number(origin[0]), 0)
   let y = Math.max(y1 - Number(pointY), 0)
 
   return {
-    x:
+    x: x / resolution - carWidth.value / resolution / 100 / 2,
-      x / nowObject.value.showYamlJson.resolution -
+    y: y / resolution - carHeight.value / resolution / 100 / 2
-      carWidth.value / nowObject.value.showYamlJson.resolution / 100 / 2,
-    y:
-      y / nowObject.value.showYamlJson.resolution -
-      carHeight.value / nowObject.value.showYamlJson.resolution / 100 / 2
   }
 }
 //是否可以拖拽
@@ -515,12 +413,12 @@ const getCurvePath = (curve) => {
   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 isSizeRadio = ref(1)
 const changeSizeRaio = (type) => {
-  if (type < 0 && isSizeRaio.value + type <= 0) {
+  if (type < 0 && isSizeRadio.value + type <= 0) {
     return
   }
-  isSizeRaio.value += type
+  isSizeRadio.value += type
 }
 //图层状态
 const legendObj = reactive({
@@ -626,33 +524,22 @@ const toggleFullScreen = () => {
 
 //库位双击
 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)
+  pointList.value = await MapApi.getPositionMapItemList({ positionMapId: positionMapId })
-  let data = await MapApi.getPositionMapItemList({ positionMapId: positionMapId })
+
-  // console.log(data)
+  pointList.value?.forEach((item) => {
-  if (data && data.length > 0) {
+    item.formattedData = item.dataJson ? JSON.parse(item.dataJson) : ''
-    data.forEach((item) => {
+    item.showData = item.dataJson ? JSON.parse(item.dataJson)[0] : null
-      // console.log(JSON.parse(item.dataJson))
+    item.imgUrl = formatTypeImg(item.type)
-      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)
-  pointList.value.forEach((item) => {
     if (item.type === 1) {
       item.locationDeep = 40
       item.locationWide = 40
@@ -672,10 +559,25 @@ const getPositionMapListFun = async (positionMapId) => {
       item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
       item.locationDeep = item.dataObj.locationDeep
       item.locationWide = item.dataObj.locationWide
-    } else if (item.type === 7) {
+    }
+    //要将实际的cm改成px
+    if (item.locationWide && item.locationDeep) {
+      let pxObj = cmConversionPx(item.locationWide, item.locationDeep)
+      item.locationWidePx = pxObj.pWidth
+      item.locationDeepPx = pxObj.pHeight
     }
   })
 }
+//将节点实际宽高cm转换成px
+const cmConversionPx = (cWidth, cHeight) => {
+  let pWidth = Number(cWidth) / Number(nowObject.value.showYamlJson.resolution) / 100
+  let pHeight = Number(cHeight) / Number(nowObject.value.showYamlJson.resolution) / 100
+  return {
+    pWidth,
+    pHeight
+  }
+}
+
 const draggableElement = ref(null)
 const resetPosition = () => {
   if (draggableElement.value) {
@@ -728,7 +630,7 @@ const calculateDistanceAndAngle = (point1, point2) => {
   }
 }
 
-const formatteTypeImg = (type) => {
+const formatTypeImg = (type) => {
   switch (type) {
     case 1:
       return ''
@@ -786,7 +688,7 @@ const linkWebSocket = (url) => {
               [
                 h(
                   'span',
-                  { style: 'color: rgba(255,255,255,0.88);font-size: 14px;' },
+                  { style: 'color: rgba(255,255,255,0.88);font-size: .875rem;' },
                   `${JSON.parse(jsonMsg.content)}`
                 ),
                 h(
@@ -794,7 +696,7 @@ const linkWebSocket = (url) => {
                   {
                     onClick: () => lookError(),
                     style:
-                      'color: rgba(255,255,255,0.88);font-size: 14px;cursor: pointer;text-decoration-line: underline;margin-left: 32px;'
+                      'color: rgba(255,255,255,0.88);font-size: .875rem;cursor: pointer;text-decoration-line: underline;margin-left: 2rem;'
                   },
                   '详情'
                 )
@@ -833,9 +735,8 @@ const getMapData = async (item) => {
   testCarList.value = []
   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}`
+  let websocketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`
-  // console.log(websoketUrl)
+  linkWebSocket(websocketUrl)
-  linkWebSocket(websoketUrl)
   getPositionMapListFun(nowObject.value.id)
   emit('transmitMapInfo', {
     id: item.id,
@@ -866,17 +767,14 @@ const computedRatio = () => {
       //这段代码之后会删掉 yaml会给原始宽高
       getImageSize(imgUrl.value)
         .then(({ width, height }) => {
-          // console.log("原始地图的宽高",JSON.parse(nowObject.value.yamlJson))
           if (testCarList.value.length) {
             testCarList.value.forEach((item) => {
-              console.log('dayin', item)
               item.originWidth = width
               item.originHeight = height
               item.origin = JSON.parse(nowObject.value.yamlJson).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
             })
-            // console.log('当前数据', testCarList.value)
           }
         })
         .catch((error) => {
@@ -901,10 +799,8 @@ const computedRatio = () => {
         }
       })
       getImageWidth(imgUrl.value, 'height').then((res) => {
-        // console.log('高', res)
         heightVal.value = res * radio.value
       })
-      // console.log(width)
     }
   })
 }
@@ -912,7 +808,6 @@ const computedRatio = () => {
 // 获取地图连线列表
 const getMapLineList = () => {
   MapApi.mapLineListGet({ positionMapId: nowObject.value.id }).then((res) => {
-    // console.log(res)
     lineList.value = res
   })
 }
@@ -1057,9 +952,9 @@ onUnmounted(() => {
 }
 .indexpage-container .affix-container-top {
   width: 100%;
-  height: 80px;
+  height: 5rem;
   background-color: #fff;
-  border-bottom: 1px solid #f5f5f5;
+  border-bottom: 0.0625rem solid #f5f5f5;
 }
 .indexpage-container-box-point {
   width: 100%;
@@ -1070,11 +965,12 @@ onUnmounted(() => {
   right: 0;
 }
 .indexpage-container-box-point-item {
+  box-sizing: border-box;
   position: absolute;
   cursor: pointer;
 }
 .scrollbar-flex-content {
-  padding: 2px 6px;
+  padding: 0.125rem 0.375rem;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -1084,11 +980,11 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 90px;
+  width: 5.625rem;
-  height: 30px;
+  height: 1.875rem;
-  margin: 10px 6px;
+  margin: 0.625rem 0.375rem;
   text-align: center;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   background: var(--el-color-primary-light-9);
   color: var(--el-color-primary);
   position: relative;
@@ -1109,14 +1005,15 @@ onUnmounted(() => {
   width: 100%;
   height: auto;
 }
-.indexpage-container-box-point-item-inner-popover-item {
+.indexpage-popover-item {
   display: flex;
   font-family:
     PingFangSC,
     PingFang SC;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #0d162a;
+  margin-bottom: 0.5rem;
 }
 .line-box {
   position: absolute;
@@ -1127,21 +1024,21 @@ onUnmounted(() => {
 }
 .affix-container-left {
   position: fixed;
-  bottom: 26px;
+  bottom: 1.625rem;
   z-index: 999;
 }
 .affix-container-left-box {
-  width: 144px;
+  width: 9rem;
 }
 .affix-container-left-box-item-box {
   width: 100%;
-  border-bottom: 1px solid #eeeeee;
+  border-bottom: 0.0625rem solid #eeeeee;
   background: #ffffff;
 }
 .affix-container-left-box-item {
   width: 100%;
-  padding: 0 18px;
+  padding: 0 1.125rem;
-  height: 42px;
+  height: 2.625rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1151,18 +1048,18 @@ onUnmounted(() => {
     PingFangSC,
     PingFang SC;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 0.875rem;
   color: rgba(0, 0, 0, 0.88);
 }
 .affix-container-left-box-item-img {
   cursor: pointer;
   flex-shrink: 0;
-  width: 20px;
+  width: 1.25rem;
-  height: 12px;
+  height: 0.75rem;
 }
 .affix-container-left-box-item-bottom {
   width: 100%;
-  height: 36px;
+  height: 2.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1172,8 +1069,8 @@ onUnmounted(() => {
 .affix-container-left-box-item-bottom-img {
   cursor: pointer;
   flex-shrink: 0;
-  width: 12px;
+  width: 0.75rem;
-  height: 7px;
+  height: 0.4375rem;
 }
 .affix-container-left-box-item-bottom-left {
   cursor: pointer;
@@ -1182,24 +1079,24 @@ onUnmounted(() => {
     PingFangSC,
     PingFang SC;
   font-weight: 400;
-  font-size: 16px;
+  font-size: 1rem;
   color: #98a4bf;
-  margin-right: 2px;
+  margin-right: 0.125rem;
 }
 .affix-container-right {
   position: fixed;
   z-index: 999;
-  right: 40px;
+  right: 2.5rem;
-  bottom: 20px;
+  bottom: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
 .affix-container-right-item {
-  width: 28px;
+  width: 1.75rem;
-  height: 28px;
+  height: 1.75rem;
   cursor: pointer;
   flex-shrink: 0;
-  margin-left: 8px;
+  margin-left: 0.5rem;
 }
 </style>

src/views/mapPage/realTimeMap/editMap.vue

@@ -333,7 +333,6 @@
             >
               <!-- 1 路径点 -->
               <el-tooltip
-                class="box-item"
                 effect="dark"
                 :content="item.sortNum || '节点未保存'"
                 placement="top"