Преглед изворни кода

feat 灯、窗帘按钮联动

anxiaoxia пре 2 месеци
родитељ
комит
652ecc4b17

+ 16 - 10
src/views/envmonitor/taiguv1/components/Curtain/CurtainMore.vue

@@ -32,17 +32,17 @@
                 <div class="control-box">
                     <div
                         class="control"
-                        :class="item.isActive ? 'active' : ''"
+                        :class="item.isActive && item.activeButton === 1 ? 'active' : ''"
                         @click="handle('child',1,'开启中',item)"
                     >上</div>
                     <div
                         class="control"
-                        :class="item.isActive ? 'active' : ''"
+                        :class="item.isActive && item.activeButton === 2 ? 'active' : ''"
                         @click="handle('child',2,'暂停中',item)"
                     >停</div>
                     <div
                         class="control"
-                        :class="item.isActive ? 'active' : ''"
+                        :class="item.isActive && item.activeButton === 0 ? 'active' : ''"
                         @click="handle('child',0,'关闭中',item)"
                     >下</div>
                 </div>
@@ -59,11 +59,13 @@ const childCurtains = ref([
     {
         name: "内侧窗帘",
         isActive: false,
+        activeButton: null,
         id: 1
     },
     {
         name: "外侧窗帘",
         isActive: false,
+        activeButton: null,
         id: 2
     },
 ])
@@ -96,21 +98,25 @@ const handle = (type, status, name, itemCurrent) => {
             downActive.value = false;
         }, 100);
         childCurtains.value.forEach((item) => {
-            // item = item.id;
+            item.isActive = false; // 重置所有子窗帘的状态
         })
     } else {
         childCurtains.value.forEach((item) => {
             if (item.id === itemCurrent.id) {
+                item.activeButton = status;
                 item.isActive = true;
-                btnTimer = setTimeout(() => {
-                    item.isActive = false;
-                    console.log('被惦记item');
-
-                }, 100);
+            } else {
+                item.isActive = false;
+                item.activeButton = null;
             }
         })
+        btnTimer = setTimeout(() => {
+            childCurtains.value.forEach(item => {
+                item.isActive = false;
+                item.activeButton = null;
+            });
+        }, 100);
     }
-
 };
 
 </script>

+ 42 - 8
src/views/envmonitor/taiguv1/components/Lamp/LightMore.vue

@@ -48,14 +48,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, toRefs, onBeforeUnmount, onMounted } from "vue";
 import lampCloseIcon from "@/assets/taiguv1/svg/lamp_close_icon.svg";
 import lampOpenIcon from "@/assets/taiguv1/svg/lamp_open_p_icon.svg";
-import { parseImgUrl } from "@/utils";
-import { Dialog, Loading,Switch } from "vant";
+import { Switch } from "vant";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import any = jasmine.any;
 
+const emit = defineEmits(['statusChange']);
 const LampsStatus = ref("全部关闭");
 const childLights = ref([
     {
@@ -75,12 +75,29 @@ const childLights = ref([
     },
 ]);
 
+// 接收父组件传递的初始状态
+const props = defineProps({
+    initialStatus: {
+        type: Boolean,
+        default: false
+    }
+});
+
 const checkLampsStatus = () => {
     const allOpen = childLights.value.every((item) => item.isOpen);
     const allClose = childLights.value.every((item) => !item.isOpen);
-    if (allOpen) return "全部开启";
-    if (allClose) return "全部关闭";
-    return "部分开启";
+    if (allOpen) {
+        LampsStatus.value = "全部开启";
+        emit('statusChange', true);
+        return;
+    }
+    if (allClose) {
+        LampsStatus.value = "全部关闭";
+        emit('statusChange', false);
+        return;
+    }
+    LampsStatus.value = "部分开启";
+    emit('statusChange', true);
 };
 
 const handleSwitch = (type) => {
@@ -93,7 +110,7 @@ const handleSwitch = (type) => {
             item.isOpen = false;
         });
     }
-    LampsStatus.value = checkLampsStatus();
+    checkLampsStatus();
 };
 
 const handleChildLight = (itemCurrent: any) => {
@@ -102,8 +119,25 @@ const handleChildLight = (itemCurrent: any) => {
             item.isOpen = itemCurrent.isOpen;
         }
     });
-    LampsStatus.value = checkLampsStatus();
+    checkLampsStatus();
 };
+
+// 修改 watch,添加 immediate 属性以确保初始状态同步
+watch(
+    () => props.initialStatus,
+    (newVal) => {
+        if ( LampsStatus.value === '部分开启' ) {
+            return;
+        }
+        if (newVal) {
+            handleSwitch('allOpen');
+        } else {
+            handleSwitch('allClose');
+        }
+    },
+    { immediate: true }
+);
+
 onBeforeUnmount(() => {});
 onMounted(() => {});
 </script>

+ 26 - 4
src/views/envmonitor/taiguv1/components/Lamp/index.vue

@@ -35,20 +35,42 @@ import { Switch } from "vant";
 import {
     onBeforeUnmount,
     onMounted,
-    ref
+    ref,
+    watch
 } from "vue";
+
 const isOpen = ref(false)
-const emit = defineEmits(['showMore'])
+const emit = defineEmits(['showMore', 'switchChange'])
+
 const searchMore = () => {
     emit("showMore", "lamp", true);
 }
+
 const handleSwitch = () => {
-    console.log('handleSwitch')
+    // 发送开关状态变化事件到父组件
+    emit("switchChange", isOpen.value);
 }
+
+// 接收父组件传递的开关状态
+const props = defineProps({
+    switchStatus: {
+        type: Boolean,
+        default: false
+    }
+})
+
+// 监听父组件传递的状态变化
+watch(
+    () => props.switchStatus,
+    (newVal) => {
+        isOpen.value = newVal;
+    },
+    { immediate: true }
+);
+
 onBeforeUnmount(() => { });
 onMounted(() => { });
 
-
 </script>
 <style lang="scss" scoped>
 .volumn-box {

Разлика између датотеке није приказан због своје велике величине
+ 483 - 475
src/views/envmonitor/taiguv1/index.vue