放大检测区域坐标

src/pagesA/adDevice/adDevice.vue

@@ -413,18 +413,18 @@ export default {
                 });
                 return;
             }
-            // if (
-            //     -200 > this.xxStart ||
-            //     this.xxEnd > 200 ||
-            //     -200 > this.yyStart ||
-            //     this.yyEnd > 200
-            // ) {
-            //     uni.showModal({
-            //         content: "检测范围在-200~200之间",
-            //         showCancel: false,
-            //     });
-            //     return;
-            // }
+            if (
+                -200 > this.xxStart ||
+                this.xxEnd > 200 ||
+                -250 > this.yyStart ||
+                this.yyEnd > 250
+            ) {
+                uni.showModal({
+                    content: "检测范围在-200~250之间",
+                    showCancel: false,
+                });
+                return;
+            }
             // if (
             //     5 < this.zzStart ||
             //     this.zzStart < 0 ||

src/pagesA/deviceDetail/deviceDetail.vue

@@ -4,7 +4,14 @@
         <view class="name_box">
             <view class="name_content">{{ devInfo.devName }}</view>
         </view>
-        <view class="radar-box">
+        <view class="contentBg"> </view>
+        <view
+            class="radar-box"
+            :style="{
+                left: `${offsetLeft}rpx`,
+                top: `${offsetTop}rpx`,
+            }"
+        >
             <view
                 :style="{
                     width: `${rotatedRect.width}rpx`,
@@ -12,7 +19,8 @@
                     position: 'absolute',
                     top: `${rotatedRect.top - 8}rpx`,
                     left: `${rotatedRect.left - 8}rpx`,
-                    border: `4px solid #333333`,
+                    transform: `scale(${zoomTimes})`,
+                    border: `${9 / zoomTimes}rpx solid #333333`,
                 }"
                 class="tranStyle"
             >
@@ -27,12 +35,12 @@
                         :class="item.type"
                         :style="{
                             width: `${item.width}rpx`,
-                            height: `${item.length}rpx`,
+                            height: `${item.height}rpx`,
                             top: `${item.top}rpx`,
                             left: `${item.left}rpx`,
                             transform: `rotate(${item.rotate}deg)`,
                             'transform-origin': 'center center',
-                            zIndex: 444,
+                            zIndex: 44,
                         }"
                     >
                         <image
@@ -57,8 +65,8 @@
                         zIndex: 9999,
                         top: '0',
                         left: '0',
-                        width: '50rpx',
-                        height: '50rpx',
+                        width: '70rpx',
+                        height: '70rpx',
                     }"
                 />
             </template>
@@ -426,6 +434,8 @@ export default {
             // 重新计算雷达坐标位置
             x_radar: 250,
             y_radar: 250,
+            offsetLeft: 0,
+            offsetTop: 0,
             //检测区域计算
             rotatedRect: {},
         };
@@ -451,8 +461,13 @@ export default {
                             this.devInfo.xxEnd - this.devInfo.xxStart
                         );
                         this.statusLight = this.devInfo.statusLight;
-                        // this.calculate(this.width, this.length);
+                        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")
@@ -484,15 +499,18 @@ export default {
                     this.modules.forEach((item) => {
                         // 1️⃣ 计算家具在参考系中的矩形
                         const rect = convert_furniture_r2c(item, pRadar);
+                        console.log(rect, "rect222222");
                         const rotatedRect = rotateRect_cw(
                             rect,
                             pRadar,
                             pRadar.angle
                         );
+
+                        console.log(rotatedRect, "rotatedRect222222");
                         item.left = rotatedRect.left;
                         item.top = rotatedRect.top;
                         item.width = rotatedRect.width;
-                        item.height = rotatedRect.length;
+                        item.height = rotatedRect.height;
                         item.name = item.name;
                         item.type = item.type;
                     });
@@ -966,8 +984,8 @@ export default {
         // 计算缩放比例
         calculate(width, length) {
             let zoomTime = width > length ? width : length;
-            let practical = zoomTime / 100;
-            this.zoomTimes = 710 / practical;
+            let practical = zoomTime;
+            this.zoomTimes = 600 / practical;
             this.zoomTimes = this.zoomTimes - 0.2;
             this.zoomTimes = Number(this.zoomTimes.toFixed(2));
             console.log(this.xOffset, this.yOffset, this.zoomTimes, "偏移量");
@@ -997,6 +1015,48 @@ export default {
             console.log(this.rotatedRect, "rotatedRect");
         },
 
+        calculateOffset() {
+            let x_cm_start = "";
+            let x_cm_stop = "";
+            let y_cm_start = "";
+            let y_cm_stop = "";
+
+            if (this.devInfo.northAngle == 0) {
+                x_cm_start = this.devInfo.xxStart;
+                x_cm_stop = this.devInfo.xxEnd;
+                y_cm_start = this.devInfo.yyStart;
+                y_cm_stop = this.devInfo.yyEnd;
+                this.offsetLeft = -(x_cm_start + x_cm_stop) / 2;
+                this.offsetTop = (y_cm_start + y_cm_stop) / 2 + 80;
+            }
+
+            if (this.devInfo.northAngle == 90) {
+                x_cm_start = this.devInfo.xxStart;
+                x_cm_stop = this.devInfo.xxEnd;
+                y_cm_start = -this.devInfo.yyEnd;
+                y_cm_stop = -this.devInfo.yyStart;
+                this.offsetLeft = -(x_cm_start + x_cm_stop) / 2;
+                this.offsetTop = (y_cm_start + y_cm_stop) / 2 + 80;
+            }
+
+            if (this.devInfo.northAngle == 180) {
+                x_cm_start = -this.devInfo.xxEnd;
+                x_cm_stop = -this.devInfo.xxStart;
+                y_cm_start = -this.devInfo.yyEnd;
+                y_cm_stop = -this.devInfo.yyStart;
+                this.offsetLeft = -(x_cm_start + x_cm_stop) / 2;
+                this.offsetTop = (y_cm_start + y_cm_stop) / 2 + 80;
+            }
+            if (this.devInfo.northAngle == 270) {
+                x_cm_start = -this.devInfo.xxEnd;
+                x_cm_stop = -this.devInfo.xxStart;
+                y_cm_start = this.devInfo.yyStart;
+                y_cm_stop = this.devInfo.yyEnd;
+                this.offsetLeft = -(x_cm_start + x_cm_stop) / 2;
+                this.offsetTop = (y_cm_start + y_cm_stop) / 2;
+            }
+        },
+
         formatTime(time) {
             return time ? time.slice(11, 19) : "暂无";
         },
@@ -1154,12 +1214,13 @@ export default {
     background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
     box-sizing: border-box;
     padding-top: 20rpx;
+    position: relative;
 
     .name_box {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin: 0 auto 37rpx 0;
+        margin: 0 auto 60rpx 0;
 
         .name_content {
             display: inline-flex;
@@ -1168,6 +1229,18 @@ export default {
             padding: 6rpx 18rpx;
         }
     }
+    .contentBg {
+        position: absolute;
+        border-radius: 37.5rpx;
+        top: 31%;
+        left: 50%;
+        width: 710rpx;
+        height: 680rpx;
+        background-color: #ffffff;
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+        z-index: 0;
+    }
 
     .radar-box {
         margin: 0 auto;
@@ -1177,25 +1250,26 @@ export default {
         // justify-content: center;
         width: 500rpx;
         height: 500rpx;
-        background: #ffffff;
+        // background: #ffffff;
         border-radius: 37.5rpx;
         box-sizing: border-box;
+
         .tranStyle {
             position: absolute;
-            background-color: #fff;
-            border: none;
             background-repeat: no-repeat;
             background-position: center;
-            &::before {
+            z-index: 1; // 父元素层级要高于伪元素容器
+            &::after {
                 content: "";
                 position: absolute;
                 inset: 0;
                 background: url("https://hflnxx.oss-cn-shanghai.aliyuncs.com/IMAGE/20250919/toilet_bg.png")
                     no-repeat center;
                 background-size: 150% 150%;
-                z-index: 0; // 在最底层
+                z-index: -1;
             }
         }
+
         .moduleContent {
             view {
                 position: absolute;
@@ -1236,7 +1310,7 @@ export default {
     .switchBox {
         width: 710rpx;
         height: 94rpx;
-        margin: 18rpx auto;
+        margin: 190rpx auto 20rpx auto;
         padding: 0 37rpx;
         display: flex;
         align-items: center;

src/pagesA/roomSetting/roomSetting.vue

@@ -24,7 +24,7 @@
                         :class="item.type"
                         :style="{
                             width: `${item.width}rpx`,
-                            height: `${item.length}rpx`,
+                            height: `${item.height}rpx`,
                             top: `${item.top}rpx`,
                             left: `${item.left}rpx`,
                             transform: `rotate(${item.rotate}deg)`,
@@ -655,6 +655,7 @@ export default {
                 angle: uni.getStorageSync("northAngle"),
                 mountPlain: "wall",
             };
+            console.log(this.modules, pRadar, "下发之前");
             let copyModule = JSON.parse(JSON.stringify(this.modules));
             copyModule.forEach((item) => {
                 const rect = rotateRect_ccw(item, pRadar, pRadar.angle);
@@ -665,14 +666,14 @@ export default {
                 item.type = item.type;
                 item.rotate = item.rotate || 0;
                 item.x = rotatedRect.x_cm_start;
-                item.y = rotatedRect.y_cm_start;
+                item.y = rotatedRect.y_cm_stop;
             });
             for (const item of copyModule) {
                 if (
                     item.top < 0 ||
                     item.left < 0 ||
-                    item.top + item.length > 500 ||
-                    item.left + item.width > 500
+                    item.top + (item.length - 0) > 500 ||
+                    item.left + (item.width - 0) > 500
                 ) {
                     uni.showToast({
                         title: `${item.name}超出画布区域，请调整位置后再保存`,
@@ -776,12 +777,6 @@ export default {
             console.log(this.rotatedRect, "rotatedRect");
         },
         getRoomInfo(devId) {
-            // const trackingRegion = {
-            //     x_cm_start,
-            //     y_cm_start,
-            //     x_cm_stop,
-            //     y_cm_stop,
-            // };
             const pRadar = {
                 x: this.x_radar,
                 y: this.y_radar,
@@ -805,14 +800,13 @@ export default {
                             pRadar,
                             pRadar.angle
                         );
-
-                        console.log(rotatedRect, "ooooooo");
                         item.left = rotatedRect.left;
                         item.top = rotatedRect.top;
                         item.width = rotatedRect.width;
                         item.height = rotatedRect.height;
                         item.name = item.name;
                         item.type = item.type;
+                        item.rotate = item.rotate;
                     });
                     console.log(this.modules, 99999);
                 });

src/utils/changezb.js

@@ -178,7 +178,6 @@ export function rotateRect_cw(src_rect, pRadar, angle) {
  */
 export function rotateRect_ccw(src_rect, pRadar, angle) {
     if (![0, 90, 180, 270].includes(angle)) angle = 0;
-
     const { left, top, width, height } = src_rect;
     const cx = left + width / 2;
     const cy = top + height / 2;