Browse Source

修改坐标点位置不对问题

wangming 2 days ago
parent
commit
7f63c5a0b2

+ 9 - 7
src/pagesA/adDevice/adDevice.vue

@@ -413,14 +413,16 @@ export default {
                 });
                 return;
             }
-            if (
-                -200 > this.xxStart ||
-                this.xxEnd > 200 ||
-                -250 > this.yyStart ||
-                this.yyEnd > 250
-            ) {
+            if (-200 > this.xxStart || this.xxEnd > 200) {
                 uni.showModal({
-                    content: "检测范围在-200~250之间",
+                    content: "X轴范围在-200~200之间",
+                    showCancel: false,
+                });
+                return;
+            }
+            if (-250 > this.yyStart || this.yyEnd > 250) {
+                uni.showModal({
+                    content: "Y轴范围在-250~250之间",
                     showCancel: false,
                 });
                 return;

+ 37 - 54
src/pagesA/deviceDetail/deviceDetail.vue

@@ -62,7 +62,7 @@
                         transform: `translate(-50%, -50%) translate3d(${item.displayX}rpx, ${item.displayY}rpx, 0)`,
                         transition: 'transform 1s linear',
                         willChange: 'transform',
-                        zIndex: 9999,
+                        zIndex: 444,
                         top: '0',
                         left: '0',
                         width: '70rpx',
@@ -70,7 +70,7 @@
                     }"
                 />
             </template>
-            <image class="redar-pic" src="../../static/rander.png" mode="" />
+            <!-- <image class="redar-pic" src="../../static/rander.png" mode="" /> -->
         </view>
 
         <view class="switchBox">
@@ -329,6 +329,7 @@ import {
     convert_region_r2c,
     rotateRect_cw,
     convert_furniture_r2c,
+    convert_point_r2c,
 } from "../../utils/changezb.js";
 
 export default {
@@ -428,7 +429,6 @@ export default {
             shareJudge: false,
             unsubscribeFn: null,
             fallingEventChange: null,
-            lnbActionJudean: false,
             setIntervalVal: null,
 
             // 重新计算雷达坐标位置
@@ -438,9 +438,20 @@ export default {
             offsetTop: 0,
             //检测区域计算
             rotatedRect: {},
+            // 处理点位
+            point: "",
         };
     },
-    computed: {},
+    computed: {
+        originX() {
+            // 雷达点相对于盒子的内部偏移(横坐标)
+            return this.x_radar - (this.rotatedRect.left - 8);
+        },
+        originY() {
+            // 雷达点相对于盒子的内部偏移(纵坐标)
+            return this.y_radar - (this.rotatedRect.top - 16);
+        },
+    },
 
     methods: {
         // 获取设备信息
@@ -463,11 +474,7 @@ export default {
                         this.statusLight = this.devInfo.statusLight;
                         this.calculate(this.width, this.length);
                         this.calculateRegion();
-
-                        //  this.offsetLeft = -(x_cm_start + x_cm_stop) / 2;
-                        //             this.offsetTop = (y_cm_start + y_cm_stop) / 2 + 80;
                         this.calculateOffset();
-
                         // 设备分享权限判断
                         this.shareJudge =
                             this.devInfo.userId == uni.getStorageSync("userId")
@@ -479,6 +486,7 @@ export default {
                 .catch((err) => {});
         },
         getdevRoomInfo(devId) {
+            let modules = [];
             this.$http
                 .get(`wap/room/readRoom`, {
                     devId: devId,
@@ -492,21 +500,19 @@ export default {
                     };
 
                     if (res.data.data) {
-                        this.modules = res.data.data.furnitures;
+                        modules = res.data.data.furnitures;
                     }
-
-                    console.log(this.modules, 88888);
-                    this.modules.forEach((item) => {
+                    modules.forEach((item) => {
                         // 1️⃣ 计算家具在参考系中的矩形
                         const rect = convert_furniture_r2c(item, pRadar);
-                        console.log(rect, "rect222222");
+
+                        console.log(rect, 777777);
                         const rotatedRect = rotateRect_cw(
                             rect,
                             pRadar,
                             pRadar.angle
                         );
-
-                        console.log(rotatedRect, "rotatedRect222222");
+                        console.log(rotatedRect, "9999999");
                         item.left = rotatedRect.left;
                         item.top = rotatedRect.top;
                         item.width = rotatedRect.width;
@@ -514,7 +520,8 @@ export default {
                         item.name = item.name;
                         item.type = item.type;
                     });
-                    console.log(this.modules, 99999);
+                    this.modules = JSON.parse(JSON.stringify(modules));
+                    console.log(this.modules, 88888);
                 });
         },
         // 处理设备状态灯
@@ -886,6 +893,13 @@ export default {
                     const [x, y, z, id] = item;
                     currentIds.add(id.toString());
 
+                    const pRadar = { x: this.x_radar, y: this.y_radar };
+                    this.point = convert_point_r2c(
+                        { x, y },
+                        pRadar,
+                        uni.getStorageSync("northAngle")
+                    );
+
                     // 处理新点或更新现有点
                     if (!this.targetPoints[id]) {
                         newTargetPoints[id] = this.createNewTargetPoint(
@@ -917,21 +931,6 @@ export default {
                     ...this.targetPoints,
                     ...newTargetPoints,
                 };
-                const northAngle = uni.getStorageSync("northAngle");
-                const radar = [this.x_radar, this.y_radar];
-                let points = [];
-                if (Array.isArray(this.targetPoints)) {
-                    points = this.targetPoints;
-                } else if (
-                    this.targetPoints &&
-                    typeof this.targetPoints === "object"
-                ) {
-                    points = Object.values(this.targetPoints);
-                }
-                this.targetPoints = points.map((p) => {
-                    return this.rotatePoint(p, radar, northAngle);
-                });
-                // console.log(this.targetPoints, "更新后的点位数据333");
             }
         },
         createNewTargetPoint(x, y, z, id) {
@@ -940,8 +939,8 @@ export default {
                 y,
                 z,
                 id,
-                displayX: x,
-                displayY: y,
+                displayX: this.point.x,
+                displayY: this.point.y - 12,
                 lastX: x,
                 lastY: y,
             };
@@ -959,36 +958,20 @@ export default {
                     z,
                     lastX: x,
                     lastY: y,
-                    displayX: x,
-                    displayY: y,
+                    displayX: this.point.x,
+                    displayY: this.point.y - 12,
                 };
             }
-
             return existingPoint;
         },
-        // 计算点位问题
-        rotatePoint(point, radar, angle) {
-            const cx = this.x_radar;
-            const cy = this.y_radar;
-            const rad = (angle * Math.PI) / 180;
-            const cosA = Math.cos(rad);
-            const sinA = Math.sin(rad);
-            const xRot = point.x * cosA + point.y * sinA;
-            const yRot = -point.x * sinA + point.y * cosA;
-
-            point.displayX = cx + xRot;
-            point.displayY = cy - yRot;
-            return point;
-        },
 
         // 计算缩放比例
         calculate(width, length) {
             let zoomTime = width > length ? width : length;
             let practical = zoomTime;
-            this.zoomTimes = 600 / practical;
+            this.zoomTimes = 680 / practical;
             this.zoomTimes = this.zoomTimes - 0.2;
             this.zoomTimes = Number(this.zoomTimes.toFixed(2));
-            console.log(this.xOffset, this.yOffset, this.zoomTimes, "偏移量");
             this.lnbActionJudean = true;
         },
         calculateRegion() {
@@ -1220,7 +1203,7 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin: 0 auto 60rpx 0;
+        margin: 0 auto 40rpx 0;
 
         .name_content {
             display: inline-flex;
@@ -1232,7 +1215,7 @@ export default {
     .contentBg {
         position: absolute;
         border-radius: 37.5rpx;
-        top: 31%;
+        top: 30%;
         left: 50%;
         width: 710rpx;
         height: 680rpx;

+ 49 - 46
src/pagesA/roomSetting/roomSetting.vue

@@ -16,6 +16,7 @@
                 </view>
 
                 <view
+                    catchtouchmove="true"
                     v-for="(item, index) in modules"
                     :key="index"
                     class="moduleContent"
@@ -54,8 +55,6 @@
                             transition: 'transform 1s linear',
                             willChange: 'transform',
                             zIndex: 9999,
-                            top: '0',
-                            left: '0',
                             width: '50rpx',
                             height: '50rpx',
                         }"
@@ -95,7 +94,7 @@
                                 <text>{{ item.name }}</text>
                                 <text
                                     >({{ item.width }}*{{
-                                        item.length
+                                        item.height
                                     }})cm</text
                                 >
                             </view>
@@ -257,6 +256,7 @@ import {
     convert_furniture_r2c,
     rotateRect_ccw,
     convert_region_c2r,
+    convert_point_r2c,
 } from "../../utils/changezb.js";
 
 export default {
@@ -414,15 +414,20 @@ export default {
             clientId: null,
 
             // 重新计算雷达坐标位置
-            x_radar: 250,
-            y_radar: 250,
+            x_radar: 300,
+            y_radar: 300,
             rotatedRect: {},
+
+            // 处理点位
+            point: "",
         };
     },
     computed: {},
     methods: {
         onTouchMove(index, event) {
             if (this.draggingIndex === null) return;
+            event.preventDefault && event.preventDefault();
+            event.stopPropagation && event.stopPropagation();
             const { modules, startX, startY } = this;
             const currentX = event.touches[0].clientX;
             const currentY = event.touches[0].clientY;
@@ -455,7 +460,7 @@ export default {
         onTouchStart(index, event) {
             const selectedItem = this.modules[index];
             const selectedItemWidth = selectedItem.width / 40;
-            const selectedItemHeight = selectedItem.length / 40;
+            const selectedItemHeight = selectedItem.height / 40;
             this.draggingIndex = index;
             this.selectedIndex = index;
             this.startX = event.touches[0].clientX;
@@ -465,7 +470,7 @@ export default {
             this.selectedItemHeight = selectedItemHeight;
             this.selectImg = this.modules[index].type;
             this.selectWidth = this.modules[index].width;
-            this.selectHeight = this.modules[index].length;
+            this.selectHeight = this.modules[index].height;
         },
         onTouchEnd(index, event) {
             // this.draggingIndex = null;
@@ -484,91 +489,109 @@ export default {
                 case "bed":
                     component.width = 80;
                     component.length = 120;
+                    component.height = 120;
                     component.name = "床";
                     break;
                 case "bed_cabinet":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "柜子";
                     break;
                 case "bed_dressing_chair":
                     component.width = 40;
                     component.length = 40;
+                    component.height = 40;
                     component.name = "化妆椅";
                     break;
                 case "bed_dressing_mirror":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "化妆镜";
                     break;
                 case "bed_table":
                     component.width = 40;
                     component.length = 40;
+                    component.height = 40;
                     component.name = "床头柜";
                     break;
                 case "bath_basin":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "脸盆";
                     break;
                 case "bath_door":
                     component.width = 40;
                     component.length = 40;
+                    component.height = 40;
                     component.name = "门";
                     break;
                 case "bath_shower":
                     component.width = 40;
                     component.length = 60;
+                    component.height = 60;
                     component.name = "淋浴";
                     break;
                 case "bath_toilet":
                     component.width = 40;
                     component.length = 40;
+                    component.height = 40;
                     component.name = "马桶";
                     break;
                 case "dining_table_rect":
                     component.width = 40;
                     component.length = 40;
+                    component.height = 40;
                     component.name = "餐桌(方形)";
                     break;
                 case "dining_table":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "餐桌";
                     break;
                 case "dining_chair":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "餐椅";
                     break;
                 case "dining_fridge":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "冰箱";
                     break;
                 case "living_bookcase":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "书柜";
                     break;
                 case "living_sofa":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "沙发";
                     break;
                 case "living_tea_table":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "茶几";
                     break;
                 case "living_tv_stand":
                     component.width = 40;
                     component.length = 80;
+                    component.height = 80;
                     component.name = "电视柜";
                     break;
                 case "living_sofa_single":
                     component.width = 40;
                     component.length = 40;
+                    component.height = 80;
                     component.name = "单人沙发";
                     break;
                 default:
@@ -587,6 +610,7 @@ export default {
                 return this.showModal("提示", "家具长宽不能小于0");
             }
             this.modules[this.draggingIndex].length = this.selectHeight;
+            this.modules[this.draggingIndex].height = this.selectHeight;
             this.modules[this.draggingIndex].width = this.selectWidth;
         },
 
@@ -624,7 +648,7 @@ export default {
             this.editfntShow = true;
             const selectedItem = this.modules[index];
             const selectedItemWidth = selectedItem.width / 40;
-            const selectedItemHeight = selectedItem.length / 40;
+            const selectedItemHeight = selectedItem.height / 40;
             this.draggingIndex = index;
             this.selectedIndex = index;
             this.selectedItem = selectedItem;
@@ -632,7 +656,7 @@ export default {
             this.selectedItemHeight = selectedItemHeight;
             this.selectImg = this.modules[index].type;
             this.selectWidth = this.modules[index].width;
-            this.selectHeight = this.modules[index].length;
+            this.selectHeight = this.modules[index].height;
         },
 
         // 提取公共的模态框方法
@@ -658,6 +682,7 @@ export default {
             console.log(this.modules, pRadar, "下发之前");
             let copyModule = JSON.parse(JSON.stringify(this.modules));
             copyModule.forEach((item) => {
+                item.length = item.height;
                 const rect = rotateRect_ccw(item, pRadar, pRadar.angle);
                 const rotatedRect = convert_region_c2r(rect, pRadar);
                 item.width = item.width;
@@ -672,8 +697,8 @@ export default {
                 if (
                     item.top < 0 ||
                     item.left < 0 ||
-                    item.top + (item.length - 0) > 500 ||
-                    item.left + (item.width - 0) > 500
+                    item.top + (item.length - 0) > 600 ||
+                    item.left + (item.width - 0) > 600
                 ) {
                     uni.showToast({
                         title: `${item.name}超出画布区域,请调整位置后再保存`,
@@ -853,6 +878,13 @@ export default {
                     const [x, y, z, id] = item;
                     currentIds.add(id.toString());
 
+                    const pRadar = { x: this.x_radar, y: this.y_radar };
+                    this.point = convert_point_r2c(
+                        { x, y },
+                        pRadar,
+                        uni.getStorageSync("northAngle")
+                    );
+
                     // 处理新点或更新现有点
                     if (!this.targetPoints[id]) {
                         newTargetPoints[id] = this.createNewTargetPoint(
@@ -884,46 +916,17 @@ export default {
                     ...this.targetPoints,
                     ...newTargetPoints,
                 };
-                // console.log(this.targetPoints, "更新后的点位数据2222");
-                const northAngle = uni.getStorageSync("northAngle");
-                const radar = [this.x_radar, this.y_radar];
-                let points = [];
-                if (Array.isArray(this.targetPoints)) {
-                    points = this.targetPoints;
-                } else if (
-                    this.targetPoints &&
-                    typeof this.targetPoints === "object"
-                ) {
-                    points = Object.values(this.targetPoints);
-                }
-                this.targetPoints = points.map((p) => {
-                    return this.rotatePoint(p, radar, northAngle);
-                });
-                // console.log(this.targetPoints, "更新后的点位数据333");
             }
         },
 
-        rotatePoint(point, radar, angle) {
-            const cx = this.x_radar;
-            const cy = this.y_radar;
-            const rad = (angle * Math.PI) / 180;
-            const cosA = Math.cos(rad);
-            const sinA = Math.sin(rad);
-            const xRot = point.x * cosA + point.y * sinA;
-            const yRot = -point.x * sinA + point.y * cosA;
-
-            point.displayX = cx + xRot;
-            point.displayY = cy - yRot;
-            return point;
-        },
         createNewTargetPoint(x, y, z, id) {
             return {
                 x,
                 y,
                 z,
                 id,
-                displayX: x,
-                displayY: y,
+                displayX: this.point.x,
+                displayY: this.point.y - 12,
                 lastX: x,
                 lastY: y,
             };
@@ -941,8 +944,8 @@ export default {
                     z,
                     lastX: x,
                     lastY: y,
-                    displayX: x,
-                    displayY: y,
+                    displayX: this.point.x,
+                    displayY: this.point.y - 12,
                 };
             }
 
@@ -1098,8 +1101,8 @@ export default {
         .radar-box {
             margin: 0 auto;
             position: relative;
-            width: 500rpx;
-            height: 500rpx;
+            width: 600rpx;
+            height: 600rpx;
             background: #ffffff;
             border-radius: 37.5rpx;
             box-sizing: border-box;