Bladeren bron

灯 窗帘点击效果

anxiaoxia 2 maanden geleden
bovenliggende
commit
b38ce4acce

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

@@ -12,10 +12,12 @@
             <div class="right">
                 <div
                     class="control_all"
+                    :class="topActive ? 'active' : ''"
                     @click="handle('all',1,'开启中')"
                 >全开</div>
                 <div
                     class="control_all"
+                    :class="downActive ? 'active' : ''"
                     @click="handle('all',0,'关闭中')"
                 >全关</div>
             </div>
@@ -28,9 +30,21 @@
             >
                 <div class="name">{{ item.name }}</div>
                 <div class="control-box">
-                    <div class="control"  @click="handle('child',1,'开启中')">上</div>
-                    <div class="control"  @click="handle('child',2,'暂停中')">停</div>
-                    <div class="control"  @click="handle('child',0,'关闭中')">下</div>
+                    <div
+                        class="control"
+                        :class="item.isActive ? 'active' : ''"
+                        @click="handle('child',1,'开启中',item)"
+                    >上</div>
+                    <div
+                        class="control"
+                        :class="item.isActive ? 'active' : ''"
+                        @click="handle('child',2,'暂停中',item)"
+                    >停</div>
+                    <div
+                        class="control"
+                        :class="item.isActive ? 'active' : ''"
+                        @click="handle('child',0,'关闭中',item)"
+                    >下</div>
                 </div>
             </div>
         </div>
@@ -44,34 +58,57 @@ import { ref } from "vue";
 const childCurtains = ref([
     {
         name: "内侧窗帘",
-        isOpen: false,
+        isActive: false,
         id: 1
     },
     {
         name: "外侧窗帘",
-        isOpen: false,
+        isActive: false,
         id: 2
     },
 ])
 const controlStatus = ref('')
+const topActive = ref(false)
+const downActive = ref(false)
 let timer = null // 添加timer变量
-
-const handle = (type, status, name) => {
+let btnTimer = null;
+const handle = (type, status, name, itemCurrent) => {
     controlStatus.value = name;
     // 清除之前的定时器
     if (timer) {
         clearTimeout(timer);
     }
+    if (btnTimer) {
+        clearTimeout(btnTimer);
+    }
     // 设置新的定时器并保存引用
     timer = setTimeout(() => {
         controlStatus.value = '';
     }, 3000);
     if (type === 'all') {
+        if (status === 1) {
+            topActive.value = true;
+        } else {
+            downActive.value = true;
+        }
+        btnTimer = setTimeout(() => {
+            topActive.value = false;
+            downActive.value = false;
+        }, 100);
         childCurtains.value.forEach((item) => {
             // item = item.id;
         })
     } else {
-        
+        childCurtains.value.forEach((item) => {
+            if (item.id === itemCurrent.id) {
+                item.isActive = true;
+                btnTimer = setTimeout(() => {
+                    item.isActive = false;
+                    console.log('被惦记item');
+
+                }, 100);
+            }
+        })
     }
 
 };
@@ -113,7 +150,7 @@ const handle = (type, status, name) => {
                 align-items: center;
                 gap: 12px;
                 border-radius: 50px;
-                background: #dedfde;
+                background: #dddddf;
                 box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
                 backdrop-filter: blur(10px);
                 color: #001428;
@@ -125,6 +162,10 @@ const handle = (type, status, name) => {
                 line-height: 18px; /* 128.571% */
                 letter-spacing: 0.56px;
             }
+            .control_all.active {
+                background: rgba(255, 255, 255, 1);
+                box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+            }
         }
     }
     .control_status {
@@ -153,7 +194,7 @@ const handle = (type, status, name) => {
             /* card shadow */
             box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.05);
             border-radius: 24px 24px 44px 24px;
-            background: var(--White-60, rgba(255, 255, 255, 0.6));
+            background: rgba(255, 255, 255, 0.2);
             margin-bottom: 12px;
             .name {
                 //styleName: Chi/Body Regular;
@@ -177,6 +218,7 @@ const handle = (type, status, name) => {
                     align-items: center;
                     margin-left: 10px;
                     border-radius: 60px;
+                    opacity: 0.6;
                     background: rgba(255, 255, 255, 0.4);
                     backdrop-filter: blur(30px);
                     color: #000;
@@ -186,6 +228,9 @@ const handle = (type, status, name) => {
                     font-weight: 300;
                     line-height: normal;
                 }
+                .control.active {
+                    opacity: 1;
+                }
             }
         }
         .light-box-active {

+ 54 - 79
src/views/envmonitor/taiguv1/components/Lamp/LightMore.vue

@@ -15,11 +15,11 @@
             <div class="right">
                 <div
                     class="control"
-                    @click="handle('allOpen')"
+                    @click="handleSwitch('allOpen')"
                 >全开</div>
                 <div
                     class="control"
-                    @click="handle('allClose')"
+                    @click="handleSwitch('allClose')"
                 >全关</div>
             </div>
         </div>
@@ -44,93 +44,68 @@
                 />
             </div>
         </div>
-    </div>    
+    </div>
 </template>
 
-<script lang="ts">
+<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 {
-    defineComponent,
-    onBeforeUnmount,
-    onMounted,
-    reactive,
-    toRefs,
-} from "vue";
+import { Dialog, Loading,Switch } from "vant";
+
 import any = jasmine.any;
-export default defineComponent({
-    components: {
-        Switch,
-        [Dialog.Component.name]: Dialog.Component,
-        Loading,
+
+const LampsStatus = ref("全部关闭");
+const childLights = ref([
+    {
+        name: "主灯",
+        id: "1",
+        isOpen: false,
+    },
+    {
+        name: "氛围灯",
+        id: "2",
+        isOpen: false,
     },
-    setup(props, contx) {
-        const proxyData = reactive({
-            parseImgUrl: parseImgUrl,
-            lampCloseIcon: lampCloseIcon,
-            lampOpenIcon: lampOpenIcon,
-            LampsStatus: "全部关闭",
-            childLights: [
-                {
-                    name: "主灯",
-                    id: "1",
-                    isOpen: false,
-                },
-                {
-                    name: "氛围灯",
-                    id: "2",
-                    isOpen: false,
-                },
-                {
-                    name: "吸顶灯",
-                    id: "3",
-                    isOpen: false,
-                },
-            ],
-            checkLampsStatus: () => {
-                const allOpen = proxyData.childLights.every(
-                    (item) => item.isOpen
-                );
-                const allClose = proxyData.childLights.every(
-                    (item) => !item.isOpen
-                );
+    {
+        name: "吸顶灯",
+        id: "3",
+        isOpen: false,
+    },
+]);
 
-                if (allOpen) return "全部开启";
-                if (allClose) return "全部关闭";
-                return "部分开启";
-            },
-            handle: (type: string) => {
-                if (type === "allOpen") {
-                    proxyData.childLights.forEach((item) => {
-                        item.isOpen = true;
-                    });
-                } else {
-                    proxyData.childLights.forEach((item) => {
-                        item.isOpen = false;
-                    });
-                }
-                proxyData.LampsStatus = proxyData.checkLampsStatus();
-            },
-            handleChildLight: (itemCurrent: any) => {
-                proxyData.childLights.forEach((item) => {
-                    if (item.id === itemCurrent.id) {
-                        item.isOpen = itemCurrent.isOpen;
-                    }
-                });
-                proxyData.LampsStatus = proxyData.checkLampsStatus();
-            },
-        });
+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 "部分开启";
+};
 
-        onBeforeUnmount(() => {});
-        onMounted(() => {});
+const handleSwitch = (type) => {
+    if (type === "allOpen") {
+        childLights.value.forEach((item) => {
+            item.isOpen = true;
+        });
+    } else {
+        childLights.value.forEach((item) => {
+            item.isOpen = false;
+        });
+    }
+    LampsStatus.value = checkLampsStatus();
+};
 
-        return {
-            ...toRefs(proxyData),
-        };
-    },
-});
+const handleChildLight = (itemCurrent: any) => {
+    childLights.value.forEach((item) => {
+        if (item.id === itemCurrent.id) {
+            item.isOpen = itemCurrent.isOpen;
+        }
+    });
+    LampsStatus.value = checkLampsStatus();
+};
+onBeforeUnmount(() => {});
+onMounted(() => {});
 </script>
 <style lang="scss" scoped>
 .more-box {