Project Init

src/views/backend/enterprise/project/building/index.vue

@@ -41,7 +41,7 @@ const baTable = new baTableClass(
             {type: 'selection', align: 'center', operator: false},
             {label: '所在区县', prop: 'districtName', align: 'left', operator: 'LIKE'},
             {label: '小区名称', prop: 'communityName', align: 'left', operator: 'LIKE'},
-            {label: '楼号', prop: 'buildingNumber', align: 'center', operator: false},
+            {label: '楼号', prop: 'buildingNumber', align: 'center', operator:  'LIKE'},
             { label: "现有车位", prop: "carportCount", align: "center",width:"100", operator: false },
             { label: "剩余车位", prop: "carportReminderCount", align: "center",width:"100", operator: false },
             { label: "现有车库", prop: "garageCount", align: "center",width:"100", operator: false },

src/views/backend/enterprise/project/community/index.vue

@@ -40,7 +40,7 @@ const baTable = new baTableClass(
         column: [
             { type: "selection", align: "center", operator: false },
             { label: "小区名称", prop: "communityName", align: "left", operator: "LIKE" },
-            { label: "所在区县", prop: "districtName", align: "center", operator: false },
+            { label: "所在区县", prop: "districtName", align: "center", operator: "LIKE" },
             { label: "现有车位", prop: "carportCount", align: "center",width:"100", operator: false },
             { label: "剩余车位", prop: "carportReminderCount", align: "center",width:"100", operator: false },
             { label: "现有车库", prop: "garageCount", align: "center",width:"100", operator: false },

src/views/backend/enterprise/project/map/index.vue

@@ -69,7 +69,7 @@ const baTable = new newBaTable(
             {type: 'selection', align: 'center', operator: false},
             {label: '所在区县', prop: 'districtName', align: 'left', operator: 'LIKE'},
             {label: '小区名称', prop: 'communityName', align: 'left', operator: 'LIKE'},
-            {label: '关联楼号', prop: 'buildingName', align: 'left', operator: false},
+            {label: '关联楼号', prop: 'buildingName', align: 'left', operator: "LIKE"},
             {label: '创建人', prop: 'creatorName', align: 'center', width: '120', operator: false},
             {label: '创建时间', prop: 'createTime', align: 'center', width: '180', operator: false},
             {

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

@@ -59,8 +59,11 @@ defineExpose({
 let data = ref({});
 
 function open(event) {
-  data.value = Object.assign({}, event);
-  data.value.mapUrl = data.value.mapUrl ? JSON.parse(data.value.mapUrl)[0] : "";
+  let e = Object.assign({}, event);
+  e.mapUrl = e.mapUrl ? JSON.parse(e.mapUrl)[0] : "";
+  data.value = e
+
+  console.log(data.value.mapUrl );
   showDialog.value = true;
 }
 

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

@@ -80,7 +80,7 @@
     </el-table>
 
     <editDialog ref="editDialogRef" @close="getData"></editDialog>
-    <parkingMap ref="parkingMapRef"></parkingMap>
+    <parkingMark ref="parkingMapRef"></parkingMark>
     <detailDialog ref="detailDialogRef"></detailDialog>
 
   </div>
@@ -93,7 +93,7 @@ import request from "/@/api/request";
 import { building_list, community_list, district_list, parking } from "/@/api/controllerUrls";
 import { onMounted, ref } from "vue";
 import editDialog from "./editDialog.vue"
-import parkingMap from "./parkingMap.vue"
+import parkingMark from "./markDialog.vue"
 import detailDialog from "./detailDialog.vue"
 
 

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

@@ -10,7 +10,7 @@
          @mouseup="moveOff" @mousemove="dragMove" @mouseleave="moveOff" @dblclick="dbClick" @wheel.prevent="wheel">
       <div id="labelMap" :style="mapStyle">
         <div :key="index" class="labelItem "
-             :style="{left: item.mapX+'px',top:item.mapY+'px',backgroundColor:setMarkStyle(item)?.backGround,width:item.mapSize+'px',height:item.mapSize+'px',fontSize:item.mapSize/3+'px'}"
+             :style="{left: item.mapX*width/item.mapInitWidth+'px',top:item.mapY*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 mapData" @dblclick="dbClickItem(item)">
           <span :style="{color:setMarkStyle(item)?.color}">{{ setMarkStyle(item)?.label }}</span>
         </div>
@@ -95,20 +95,26 @@ let labelMap;
 
 onMounted(() => {
   labelMap = document.getElementById("labelMap");
+  setTimeout(()=>{
+    setImgSize(props.imgUrl);
+  },100)
+
 });
 
 
 //根据容器宽度和原始图片长宽比例设置图层高度
-function setImgSize() {
+function setImgSize(url) {
   const m = document.getElementById("mapContainer");
   let img = new Image();
-  img.src = props.imgUrl;
-  width.value = m.clientWidth;
-  height.value = m.clientWidth * (img.height / img.width);
+  img.onload=function (){
+    width.value = m.clientWidth;
+    height.value = m.clientWidth * (img.naturalHeight / img.naturalWidth);
+  }
+  img.src = url;
 }
 
-watch(() => props.imgUrl, () => {
-  setImgSize();
+watch(() => props.imgUrl, (newValue) => {
+  setImgSize(newValue);
 });
 
 let unMapData = computed(() => {

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

@@ -10,7 +10,7 @@
          @mouseup="moveOff" @mousemove="dragMove" @mouseleave="moveOff" @wheel.prevent="wheel">
       <div id="labelMap" :style="mapStyle">
         <div :key="index" class="labelItem "
-             :style="{left: item.mapX+'px',top:item.mapY+'px',backgroundColor:setMarkStyle(item)?.backGround,width:item.mapSize+'px',height:item.mapSize+'px',fontSize:item.mapSize/3+'px'}"
+             :style="{left: item.mapX*width/item.mapInitWidth+'px',top:item.mapY*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">
           <span :style="{color:setMarkStyle(item)?.color}">{{ setMarkStyle(item)?.label }}</span>
         </div>
@@ -73,30 +73,29 @@ let labelMap;
 
 onMounted(() => {
   labelMap = document.getElementById("labelMap");
-  setImgSize();
+  setTimeout(()=>{
+    setImgSize(props.imgUrl);
+  },100)
 });
 
 
 //根据容器宽度和原始图片长宽比例设置图层高度
-function setImgSize() {
+function setImgSize(url) {
   const m = document.getElementById("mapContainer");
   let img = new Image();
-  img.src = props.imgUrl;
-  setTimeout(()=>{
-    console.log(img);
+  img.onload=function (){
     width.value = m.clientWidth;
-    height.value = m.clientWidth * (img.height / img.width);
-  },0)
-
+    height.value = m.clientWidth * (img.naturalHeight / img.naturalWidth);
+  }
+  img.src = url;
 }
 
-watch(() => props.imgUrl, () => {
-  console.log(props.imgUrl);
-  setImgSize();
+watch(() => props.imgUrl, (newValue, oldValue) => {
+  console.log(newValue);
+  setImgSize(newValue);
 });
 
 
-
 //拖拽参数
 let dragOption = reactive({
   x1: 0,
@@ -133,8 +132,6 @@ function dragMove(event) {
 }
 
 
-
-
 let statusList = [
   { label: "可售", backGround: "#0bc933", color: "#000000" },
   { label: "已售", backGround: "#fd0002", color: "#ffffff" },
@@ -156,9 +153,6 @@ function setMarkStyle(row) {
 }
 
 
-
-
-
 let size = 1;
 
 //缩小
@@ -210,6 +204,8 @@ function wheel(event) {
   top: 0;
   min-width: 100px;
   min-height: 100px;
+  //width: 100%;
+  //height: 100%;
 }
 
 :deep(.labelItem) {