Project Init

src/views/backend/enterprise/project/parking/parkingView.vue

@@ -5,10 +5,10 @@
       <el-button type="primary" @click="setSmaller">缩小</el-button>
       <el-button type="primary" @click="resetSize">复位</el-button>
     </div>
-    <div id="mapContainer" :style="{width:props.width,height:props.height}" @touchstart="moveOn" @touchmove="dragMove"
+    <div id="mapContainer2" :style="{width:props.width,height:props.height}" @touchstart="moveOn" @touchmove="dragMove"
          @mousedown="moveOn"
          @mouseup="moveOff" @mousemove="dragMove" @mouseleave="moveOff" @wheel.prevent="wheel">
-      <div id="labelMap" :style="mapStyle">
+      <div id="labelMap2" :style="mapStyle">
         <div :key="index" class="labelItem "
              :style="{left: (item.mapX-item.mapSize / 2)*width/item.mapInitWidth+'px',top:(item.mapY-item.mapSize / 2)*width/item.mapInitWidth+'px',backgroundColor:setMarkStyle(item)?.backGround,width:item.mapSize+'px',height:item.mapSize+'px',fontSize:item.mapSize/3+'px'}"
              v-for="(item,index) in props.value">
@@ -75,7 +75,7 @@ let mapStyle = computed(() => {
 let labelMap;
 
 onMounted(() => {
-  labelMap = document.getElementById("labelMap");
+  labelMap = document.getElementById("labelMap2");
   // setTimeout(()=>{
   //   setImgSize(props.imgUrl);
   // },100)
@@ -84,7 +84,7 @@ onMounted(() => {
 
 //根据容器宽度和原始图片长宽比例设置图层高度
 function setImgSize(url) {
-  const m = document.getElementById("mapContainer");
+  const m = document.getElementById("mapContainer2");
   let img = new Image();
   img.onload=function (){
     width.value = m.clientWidth;
@@ -189,13 +189,13 @@ function wheel(event) {
 </script>
 <style scoped lang="scss">
 
-#mapContainer {
+#mapContainer2 {
   overflow: hidden;
   border: #888888 1px solid;
   position: relative
 }
 
-#labelMap {
+#labelMap2 {
   position: absolute;
   background-size: 100% 100%;
   transition: transform 0.5s ease;