浏览代码

fix: 空调风量效果

anxiaoxia 2 月之前
父节点
当前提交
111ab05d7e
共有 1 个文件被更改,包括 29 次插入7 次删除
  1. 29 7
      src/views/envmonitor/taiguv1/components/Air/index.vue

+ 29 - 7
src/views/envmonitor/taiguv1/components/Air/index.vue

@@ -46,21 +46,21 @@
       <div class="air-volume" v-if="isOpen">
         <div class="volume-left">
           <div class="volume-top">
-            <span>1</span>
-            <span>2</span>
-            <span>3</span>
-            <span class="span-active">4</span>
+            <span :class="windNum === 1 ? 'span-active' : ''">1</span>
+            <span :class="windNum === 2 ? 'span-active' : ''">2</span>
+            <span :class="windNum === 3 ? 'span-active' : ''">3</span>
+            <span :class="windNum === 4 ? 'span-active' : ''">4</span>
           </div>
           <div class="text">风量调节</div>
         </div>
         <div class="volume-right">
-          <div class="control-item">
+          <div class="control-item" @click="handle('minus')">
             <img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'minus.svg')" />
           </div>
-          <div class="control-item">
+          <div class="control-item" @click="handle('plus')">
             <img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'plus.svg')" />
           </div>
-          <div class="control-item">A</div>
+          <div class="control-item" @click="handle('auto')">A</div>
         </div>
       </div>
     </div>
@@ -99,6 +99,24 @@ export default defineComponent({
       realTemp: 24,
       isWhite: false,
       barWidth: 30,
+      windNum: 1,
+
+      handle(type){
+        if(type === 'minus'){
+            proxyData.windNum -= 1;
+            if(proxyData.windNum < 1){
+                proxyData.windNum = 1;
+            }
+        }else if(type === 'plus'){
+            proxyData.windNum += 1;
+            if(proxyData.windNum > 4){
+                proxyData.windNum = 4;
+            }
+        }else if(type === 'auto'){
+            proxyData.windNum = 4;
+        }
+        console.log('type==',type)
+      },
       getAirStatus() {
         if (proxyData.isOpen) {
           nextTick(() => {
@@ -435,6 +453,7 @@ export default defineComponent({
     .control-item {
       width: 36px;
       height: 36px;
+      opacity: 0.6;
       background: rgba(255, 255, 255, 0.4);
       backdrop-filter: blur(60px);
       border-radius: 50%;
@@ -453,6 +472,9 @@ export default defineComponent({
         color: rgba(0, 20, 40, 1);
       }
     }
+    .control-item.active {
+      opacity: 1;
+    }
   }
 }
 </style>