提交选择角度，显示雷达位置

src/pages.json

@@ -148,7 +148,7 @@
                     "path": "abnormalInfo/abnormalInfo",
                     "style": {
                         "enablePullDownRefresh": true,
-                        "navigationBarTitleText": "异常信息",
+                        "navigationBarTitleText": "统计信息",
                         "navigationBarBackgroundColor": "#faede2",
                         "navigationBarTextStyle": "black"
                     }

src/pages/home/home.vue

@@ -35,7 +35,7 @@
                     >
                 </view>
                 <view class="rightItem" @click="goAbnormalInfo()">
-                    <view class="rightTitle">异常信息</view>
+                    <view class="rightTitle">统计信息</view>
                     <view class="rightContent" v-if="warnNum == 0"
                         ><text>0</text>条</view
                     >

src/pagesA/deviceDetail/deviceDetail.vue

@@ -71,19 +71,16 @@
                 </template>
             </view>
 
-            <!-- <image
+            <image
                 class="redar-pic"
                 src="../../static/rander.png"
                 mode=""
                 :style="{
-                    transform:
-                        'translate(' +
-                        -xOffset / 100 +
-                        'rpx,' +
-                        -yOffset / 100 +
-                        'rpx)',
+                    transform: `translate(${-xOffset}rpx, ${-yOffset}rpx) rotate(${
+                        devInfo.northAngle
+                    }deg)`,
                 }"
-            /> -->
+            />
         </view>
 
         <view class="switchBox">
@@ -463,10 +460,6 @@ export default {
                             Math.abs(
                                 this.devInfo.xxEnd - this.devInfo.xxStart
                             ) * 100;
-                        this.xOffset =
-                            (this.devInfo.xxStart + this.devInfo.xxEnd) * 50;
-                        this.yOffset =
-                            -(this.devInfo.yyStart + this.devInfo.yyEnd) * 50;
                         this.statusLight = this.devInfo.statusLight;
                         this.calculate(this.width, this.length);
                         // 设备分享权限判断
@@ -820,7 +813,7 @@ export default {
             clearTimeout(this.inactivityTimer);
             this.inactivityTimer = setTimeout(() => {
                 this.targetPoints = {};
-                console.log("长时间没有点位消除");
+                console.log("没有点位，消除点位数据");
             }, 1500);
             // 验证topic格式
             const match = topic.match(/^\/dev\/(.+)\/tracker_targets$/);
@@ -927,26 +920,31 @@ export default {
 
             return existingPoint;
         },
-
+        // 计算缩放比例
         calculate(width, length) {
             let zoomTime = width > length ? width : length;
             let practical = zoomTime / 100;
             this.zoomTimes = 710 / practical;
-            this.normalizeZoomTimes(this.zoomTimes);
+            // this.normalizeZoomTimes(this.zoomTimes);
             this.zoomTimes = this.zoomTimes - 0.2;
+            this.zoomTimes = Number(this.zoomTimes.toFixed(2));
+            this.xOffset = this.devInfo.xxStart + this.devInfo.xxEnd;
+            this.yOffset = -(this.devInfo.yyStart + this.devInfo.yyEnd);
+            console.log(this.xOffset, this.yOffset, this.zoomTimes, "偏移量");
             this.lnbActionJudean = true;
-            this.lnbAction = "action8";
         },
         normalizeZoomTimes(num) {
             const intPart = Math.floor(num);
             const decimalPart = num - intPart;
-
+            let result;
             if (decimalPart >= 0.1 && decimalPart < 0.5) {
-                return intPart;
+                result = intPart;
             } else if (decimalPart >= 0.5 && decimalPart < 0.9) {
-                return intPart + 0.5;
+                result = intPart + 0.5;
+            } else {
+                result = num;
             }
-            return num;
+            return Math.round(result * 100) / 100;
         },
 
         formatTime(time) {
@@ -1036,6 +1034,7 @@ export default {
         },
     },
     onLoad(options) {
+        this.lnbAction = "action8";
         const devItem = JSON.parse(options.devItem);
         const { devId, clientId } = devItem;
         // 缓存到页面实例
@@ -1056,6 +1055,7 @@ export default {
 
     onShow() {
         this.showModle = true;
+        this.lnbAction = "action8";
         // MQTT 初始化
         const userId = uni.getStorageSync("userId");
         if (!userId) return console.error("MQTT 初始化失败：缺少 userId");
@@ -1206,8 +1206,8 @@ export default {
         }
         .redar-pic {
             position: absolute;
-            left: 50%;
-            top: 50%;
+            // left: 50%;
+            // top: 50%;
             width: 40rpx;
             height: 40rpx;
             transform: translate(-50%, -50%); /* 先居中 */

src/pagesA/my/my.vue

@@ -38,15 +38,15 @@
                 </view>
             </view>
 
-            <!-- <view class="menu-item" @click="serverchange()">
+            <view class="menu-item" @click="goAbnormalInfo()">
                 <view class="meanLeft">
-                    <image src="../../static/setting.png" mode="" />
-                    <text>网络配置</text>
+                    <image src="../../static/list.png" mode="" />
+                    <text>统计信息</text>
                 </view>
                 <view class="meanRight">
                     <image src="../../static/arrTwo.png" mode="" />
                 </view>
-            </view> -->
+            </view>
             <!-- <view class="menu-item" @click="deaAccount()">
                 <view class="meanLeft">
                     <image src="../../static/logoff.png" mode="" />
@@ -147,6 +147,11 @@ export default {
                 url: "/pagesA/serChange/serChange",
             });
         },
+        goAbnormalInfo() {
+            uni.navigateTo({
+                url: "/pagesA/abnormalInfo/abnormalInfo",
+            });
+        },
     },
     onShow() {
         this.isIniTenMinutes = true;

旋转点.js

@@ -0,0 +1,50 @@
+/**
+ * point: [x, y]
+ * radar: [radarX, radarY]
+ * angle: 0, 90, 180, 270 顺时针旋转角度
+ * 返回旋转后的点 [x2, y2]
+ */
+function rotatePoint(point, radar, angle) {
+    const [x, y] = point;
+    const [cx, cy] = radar;
+    const dx = x - cx;
+    const dy = y - cy;
+    let nx, ny;
+
+    switch (angle) {
+        case 0:
+            nx = dx;
+            ny = dy;
+            break;
+        case 90:
+            nx = dy;
+            ny = -dx;
+            break;
+        case 180:
+            nx = -dx;
+            ny = -dy;
+            break;
+        case 270:
+            nx = -dy;
+            ny = dx;
+            break;
+        default:
+            throw new Error("angle must be 0, 90, 180, 270");
+    }
+
+    return [cx + nx, cy + ny];
+}
+
+// 测试
+const point = [3, 2];
+const radar = [2, 1];
+
+[0, 90, 180, 270].forEach(angle => {
+    const newPoint = rotatePoint(point, radar, angle);
+    console.log(`angle=${angle}:`, newPoint);
+});
+// 预期输出
+// angle=0: [3, 2]
+// angle=90: [2, 0]
+// angle=180: [1, 0]
+// angle=270: [2, 2]

旋转矩形.js

@@ -0,0 +1,75 @@
+/**
+ * rect: [left, top, w, h]
+ * radar: [radarX, radarY]
+ * angle: 0, 90, 180, 270
+ * 返回旋转后的矩形 [left, top, w, h]
+ */
+function rotateRect(rect, radar, angle) {
+    const [left, top, w, h] = rect;
+    const [cx, cy] = radar;
+
+    // 矩形四个角
+    const corners = [
+        [left, top],
+        [left + w, top],
+        [left + w, top + h],
+        [left, top + h]
+    ];
+
+    const newCorners = corners.map(([x, y]) => {
+        const dx = x - cx;
+        const dy = y - cy;
+        let nx, ny;
+        switch (angle) {
+            case 0:
+                nx = dx;
+                ny = dy;
+                break;
+            case 90:
+                nx = dy;
+                ny = -dx;
+                break;
+            case 180:
+                nx = -dx;
+                ny = -dy;
+                break;
+            case 270:
+                nx = -dy;
+                ny = dx;
+                break;
+            default:
+                throw new Error("angle must be 0, 90, 180, 270");
+        }
+        return [cx + nx, cy + ny];
+    });
+
+    const xs = newCorners.map(p => p[0]);
+    const ys = newCorners.map(p => p[1]);
+
+    const newLeft = Math.min(...xs);
+    const newTop = Math.min(...ys);
+    const newW = Math.max(...xs) - newLeft;
+    const newH = Math.max(...ys) - newTop;
+
+    return [newLeft, newTop, newW, newH];
+}
+
+// 测试
+const rect = [0, 0, 2, 1];
+const radar = [2, 1];
+
+[0, 90, 180, 270].forEach(angle => {
+    const newRect = rotateRect(rect, radar, angle);
+    console.log(`angle=${angle}:`, newRect);
+});
+
+// 预期输出
+// angle=0: [0, 0, 2, 1]
+// angle=90: [2, -1, 1, 2]
+// angle=180: [2, 1, 2, 1]
+// angle=270: [1, 1, 1, 2]
+
+
+
+
+