守护计划代码

src/pagesA/deviceDetail/deviceDetail.vue

@@ -365,9 +365,6 @@
 </template>
 <script>
 import * as echarts from "../../uni_modules/lime-echart/static/echarts.min";
-import mqtt from "../../utils/mqtt";
-// import { createMqttData } from "../../utils/globalMqtt";
-import { createMqttData } from "../../utils/globalMqtt";
 
 export default {
     data() {
@@ -975,14 +972,6 @@ export default {
 
             return existingPoint;
         },
-
-        closemqtTwo() {
-            this.mqttClienTwoFlag = false;
-            if (this.mqttClientOne) {
-                this.mqttClientOne.end();
-                this.mqttClientOne = null;
-            }
-        },
     },
     onShow() {
         this.showModle = true;
@@ -998,14 +987,10 @@ export default {
             this.autoSwipe();
         }, 3000);
         this.getCurrentDate();
-
         this.clientId = clientId;
         console.log(this.clientId, "clientIDetail");
-
         this.clientId = clientId;
-
         const bindMqtt = (mqttClientData) => {
-            // 订阅 topic
             mqttClientData.subscribe(
                 `/dev/${this.clientId}/tracker_targets`,
                 (err) => {
@@ -1016,8 +1001,6 @@ export default {
                         );
                 }
             );
-
-            // 只绑定一次 message 回调
             if (!this.mqttMessageBound) {
                 mqttClientData.on("message", (topic, message) => {
                     console.log("topicDeviceDetail", topic, message);
@@ -1038,11 +1021,9 @@ export default {
             }
         };
 
-        // 如果客户端已存在
         if (this.$mqttClientData) {
             bindMqtt(this.$mqttClientData);
         } else {
-            // 客户端未创建时等待 ready
             uni.$once("mqttClientData-ready", (mqttClientData) => {
                 bindMqtt(mqttClientData);
             });

src/pagesA/healthAlarm/healthAlarm.vue

@@ -38,7 +38,7 @@
                 @change="bindPickerChange"
                 :value="selectedIndex"
             >
-                <text>新增守护计划 </text>
+                <text>新增守护计划</text>
             </picker>
         </view>
 
@@ -223,7 +223,9 @@ export default {
             uni.navigateTo({
                 url:
                     "/pagesA/playSetting/playSetting?planInfo=" +
-                    JSON.stringify(item),
+                    JSON.stringify(item) +
+                    "&devInfo=" +
+                    JSON.stringify(this.devInfo),
             });
         },
     },

src/pagesA/playSetting/playSetting.vue

@@ -141,7 +141,75 @@
         </view>
         <!-- 区域选择 -->
         <view v-if="areaModle" class="areaModleClass">
-            <view class="areaModle"></view>
+            <view
+                class="airCantInfo"
+                :style="{
+                    width: `${length / 150}px`,
+                    height: `${width / 150}px`,
+                }"
+            >
+                <view
+                    v-for="(item, index) in modules"
+                    :key="index"
+                    class="module-content"
+                >
+                    <view
+                        :class="item.type"
+                        :style="{
+                            width: `${item.width / 2}px`,
+                            height: `${item.length / 2}px`,
+                            top: `${item.top / 2}px`,
+                            left: `${item.left / 2}px`,
+                            transform: `rotate(${item.rotate}deg)`,
+                            'transform-origin': 'center center',
+                        }"
+                    >
+                        <image
+                            style="width: 100%; height: 100%; display: block"
+                            :src="`../../static/furnitures/${item.type}.png`"
+                            mode=""
+                        />
+                    </view>
+                </view>
+                <view
+                    class="areaModleArea"
+                    :style="{
+                        width: `${areaModleWidth / 2}px`,
+                        height: `${areaModLength / 2}px`,
+                        top: `${areaModLeTop / 2}px`,
+                        left: `${areaModLeLeft / 2}px`,
+                        transform: `rotate(${item.rotate}deg)`,
+                        'transform-origin': 'center center',
+                    }"
+                    @touchmove.prevent="onTouchMove($event)"
+                    @touchstart="onTouchStart($event)"
+                    @touchend="onTouchEnd($event)"
+                ></view>
+            </view>
+
+            <view style="display: flex; margin: 20rpx auto"
+                ><input
+                    type="number"
+                    placeholder="请输入区域长"
+                    v-model="areaModLength" /><input
+                    type="number"
+                    placeholder="请输入区域宽"
+                    v-model="areaModleWidth"
+            /></view>
+            <view
+                style="
+                    margin: 20rpx auto;
+                    width: 200rpx;
+                    height: 100rpx;
+                    text-align: center;
+                    line-height: 100rpx;
+                    background: #f3e2dd;
+                    color: #000;
+                    border-radius: 20rpx;
+                "
+                @click="saveRegion()"
+                >确定区域</view
+            >
         </view>
     </view>
 </template>
@@ -169,9 +237,65 @@ export default {
             judgeFlage: "",
             remark: "",
             areaModle: false,
+            devInfo: "",
+            modules: [],
+            length: 0,
+            width: 0,
+            xOffset: 0,
+            yOffset: 0,
+            areaModleWidth: 100,
+            areaModLength: 100,
+            areaModLeTop: 0,
+            areaModLeLeft: 0,
+            areaModLeX: 0,
+            areaModLeY: 0,
+            initTop: 0,
+            initLeft: 0,
+            region: [],
+            judgeFlagFlag: false,
+            selectedPlan: {},
         };
     },
     methods: {
+        saveRegion() {
+            this.region[0] = this.areaModLeX;
+            this.region[1] = this.areaModLeY;
+            this.region[2] = this.areaModleWidth;
+            this.region[3] = this.areaModLength;
+            this.areaModle = false;
+            this.selectedPlan.region = JSON.stringify(this.region);
+            console.log(this.selectedPlan, 9999);
+            this.$http
+                .post(
+                    "wap/alarm/plan/save",
+                    { ...this.selectedPlan },
+                    {
+                        header: {
+                            "Content-Type": "application/json",
+                            token: uni.getStorageSync("tokenValue") || "",
+                        },
+                    }
+                )
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        uni.showToast({
+                            title: "修改成功",
+                            icon: "success",
+                        });
+                        setTimeout(() => {
+                            uni.navigateBack({
+                                delta: 1,
+                            });
+                        }, 1000);
+                    } else {
+                        uni.showToast({
+                            title: res.data.message,
+                            icon: "none",
+                            duration: 1500,
+                        });
+                    }
+                });
+        },
         saveTemplate() {
             // 1 2 3 9
             // 允许多个时间
@@ -180,14 +304,6 @@ export default {
             // 4 6 8
             // 不配生效时间
             // 1 2 6 9  需要配置区域
-            // if (
-            //     this.planInfo.eventVal == 5 ||
-            //     this.planInfo.eventVal == 4 ||
-            //     this.planInfo.eventVal == 8
-            // ) {
-            //     this.areaModle = true;
-            // }
-
             if (this.judgeFlage == "noneFlag") {
                 this.timeRange = [
                     {
@@ -223,6 +339,7 @@ export default {
                 mergeTime: this.mergeTime,
                 linkagePushWechatService: this.linkagePushWechatService,
                 enable: this.enable,
+                region: JSON.stringify(this.region),
                 alarmTimePlan: {
                     id: this.planInfo.alarmTimePlan.id,
                     startDate: this.startDate,
@@ -232,6 +349,19 @@ export default {
                     weekdays: this.planInfo.alarmTimePlan.weekdays,
                 },
             };
+            if (this.region.length > 0) {
+                planInfo.region = JSON.stringify(this.region);
+            }
+            if (
+                this.planInfo.eventVal == 1 ||
+                this.planInfo.eventVal == 2 ||
+                this.planInfo.eventVal == 6 ||
+                this.planInfo.eventVal == 9
+            ) {
+                this.selectedPlan = planInfo;
+                this.areaModle = true;
+                return;
+            }
             if (
                 this.planInfo.eventVal == 5 ||
                 this.planInfo.eventVal == 4 ||
@@ -241,7 +371,6 @@ export default {
             }
 
             console.log(planInfo, 9999);
-
             this.$http
                 .post(
                     "wap/alarm/plan/save",
@@ -271,23 +400,23 @@ export default {
                             duration: 1500,
                         });
                     }
-                    if (
-                        this.planInfo.eventVal == 1 ||
-                        this.planInfo.eventVal == 2 ||
-                        this.planInfo.eventVal == 3 ||
-                        this.planInfo.eventVal == 9
-                    ) {
-                        uni.showModal({
-                            title: "提示",
-                            content: "该计划需要到web端配置区域",
-                            success: (res) => {
-                                if (res.confirm) {
-                                }
-                                if (res.cancel) {
-                                }
-                            },
-                        });
-                    }
+                    // if (
+                    //     this.planInfo.eventVal == 1 ||
+                    //     this.planInfo.eventVal == 2 ||
+                    //     this.planInfo.eventVal == 3 ||
+                    //     this.planInfo.eventVal == 9
+                    // ) {
+                    //     uni.showModal({
+                    //         title: "提示",
+                    //         content: "该计划需要到web端配置区域",
+                    //         success: (res) => {
+                    //             if (res.confirm) {
+                    //             }
+                    //             if (res.cancel) {
+                    //             }
+                    //         },
+                    //     });
+                    // }
                 });
         },
         handlePlanInfo() {
@@ -334,11 +463,66 @@ export default {
             let newValue = e.detail.value == true ? 1 : 0;
             this.enable = newValue.toString();
         },
+        getdevRoomInfo(devId) {
+            this.$http
+                .get(`wap/room/readRoom`, {
+                    devId: devId,
+                })
+                .then((res) => {
+                    if (res.data.data) {
+                        this.modules = res.data.data.furnitures;
+                    }
+                });
+        },
+
+        onTouchMove(event) {
+            const currentX = event.touches[0].clientX;
+            const currentY = event.touches[0].clientY;
+            const deltaX = currentX - this.startX;
+            const deltaY = currentY - this.startY;
+            this.areaModLeLeft = this.initLeft + deltaX;
+            this.areaModLeTop = this.initTop + deltaY;
+            this.areaModLeX = Math.round(
+                (this.devInfo?.xxStart || 0) +
+                    event.currentTarget.offsetLeft * 2
+            );
+            this.areaModLeY = Math.round(
+                (this.devInfo?.yyEnd || 0) - event.currentTarget.offsetTop * 2
+            );
+            console.log(
+                "拖动中:",
+                "left:",
+                this.areaModLeLeft,
+                "top:",
+                this.areaModLeTop,
+                "X:",
+                this.areaModLeX,
+                "Y:",
+                this.areaModLeY
+            );
+        },
+        onTouchStart(event) {
+            this.startX = event.touches[0].clientX;
+            this.startY = event.touches[0].clientY;
+            this.initTop = this.areaModLeTop;
+            this.initLeft = this.areaModLeLeft;
+        },
+        onTouchEnd(index, event) {},
     },
     onLoad(options) {
         this.planInfo = JSON.parse(options.planInfo);
+        this.devInfo = JSON.parse(options.devInfo);
+
+        this.width = Math.abs(this.devInfo.yyEnd - this.devInfo.yyStart) * 100;
+        this.length = 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;
 
-        console.log(this.planInfo, 9999999);
+        console.log(this.xOffset, this.yOffset, 9999);
+        console.log(this.devInfo, 9999999);
+
+        this.getdevRoomInfo(this.devInfo.devId);
         this.startDate =
             this.planInfo?.alarmTimePlan.startDate?.slice(0, 10) || "";
         this.stopDate =
@@ -484,16 +668,28 @@ export default {
     /* font-weight: bold; */
 }
 .areaModleClass {
-    z-index: 999;
+    z-index: 111;
     position: absolute;
     width: 650rpx;
-    height: 650rpx;
+    padding: 20rpx 0;
+    /* height: 650rpx; */
     top: -8%;
     left: -37%;
+    background: #fff;
     transform: translate(50%, 50%);
-    background: #987060;
+    border-radius: 12px;
 }
-
-.breathClass {
+.airCantInfo {
+    margin: 0 auto 0 auto;
+    border: 18rpx solid #1f1f1f;
+    position: relative;
+}
+.airCantInfo .module-content > view {
+    position: absolute;
+}
+.airCantInfo .areaModleArea {
+    border: 2rpx solid #000;
+    background: #f8efe4;
+    position: absolute;
 }
 </style>