Browse Source

feat:太古空调调整

珍珍 4 weeks ago
parent
commit
37a4d838af

+ 121 - 15
src/views/envmonitor/taiguv1/components/Air/index.vue

@@ -23,18 +23,22 @@
           <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
         </div>
         <div class="temp" v-if="isOpen">
-          26
+          {{ realTemp }}
           <sup>℃</sup>
         </div>
       </div>
       <!--温度⏭️-->
-      <div class="temp-box" v-if="isOpen">
+      <div class="temp-box" id="sliderAirId" v-if="isOpen">
         <div class="bar">
-          <div class="text text-left active-text">12</div>
-          <div class="active-bar">
-            <div class="line"></div>
+          <div class="text text-left active-text">{{ airData.minTempSet }}</div>
+          <div class="active-bar" :style="{ width: barWidth + 'px' }" id="barAirId">
+            <div class="hand-box" id="handAirId">
+              <div class="line"></div>
+            </div>
+          </div>
+          <div class="text text-right" :class="isWhite ? 'active-text' : ''">
+            {{ airData.maxTempSet }}
           </div>
-          <div class="text text-right">32</div>
         </div>
       </div>
 
@@ -63,22 +67,22 @@
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import {
   defineComponent,
   onMounted,
   reactive,
   toRefs,
   computed,
+  nextTick,
   watch,
   onUnmounted,
   onBeforeMount,
   onBeforeUnmount,
 } from "vue";
 import { Switch, Dialog, Loading, Toast } from "vant";
-import { parseImgUrl } from "@/utils";
-import { Item } from "../../../../../model/getRolesModel";
-import any = jasmine.any;
+import { parseImgUrl, fix } from "@/utils";
+import { swiper } from "@/utils/swiper";
 
 export default defineComponent({
   components: {
@@ -90,10 +94,103 @@ export default defineComponent({
     const proxyData = reactive({
       parseImgUrl: parseImgUrl,
       isOpen: false,
+      airData: {
+        minTempSet: 16,
+        maxTempSet: 32,
+        airTemp: 0,
+      },
+      part: 1,
+      realTemp: 24,
+      isWhite: false,
+      barWidth: 73,
       getAirStatus() {
-        console.log(proxyData.isOpen);
+        if (proxyData.isOpen) {
+          nextTick(() => {
+            proxyData.endBoxSwiper();
+          });
+        }
         contx.emit("getStatus", proxyData.isOpen);
       },
+      getEleWidth(ele) {
+        // debugger;
+        if (ele) {
+          return ele.getBoundingClientRect().width;
+        } else {
+          return 1;
+        }
+      },
+      endBoxSwiper() {
+        let sliderBox = document.querySelector("#sliderAirId");
+        let handBox = document.querySelector("#handAirId");
+        let barBox = document.querySelector("#barAirId");
+        let isMove = false;
+        let sliderWidth = proxyData.getEleWidth(sliderBox);
+        let startBarWidth = proxyData.getEleWidth(barBox);
+        if (sliderWidth > 1) {
+          sliderWidth = sliderWidth;
+        }
+        let tempPart =
+          (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) /
+          (sliderWidth - 30);
+        let part = tempPart;
+        proxyData.part = tempPart;
+        if (!handBox) {
+          return;
+        }
+
+        handBox.addEventListener("touchstart", function (e) {
+          let oldBarWidth = (barBox && barBox.style && barBox.style.width) || 0;
+          startBarWidth = isNaN(parseInt(oldBarWidth)) ? 0 : parseInt(oldBarWidth);
+          isMove = true;
+        });
+        handBox.addEventListener("touchend", function (e) {
+          isMove = false;
+        });
+        swiper(handBox, {
+          swipeLeft: function (e) {
+            if (isMove) {
+              let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
+              let barWidth = startBarWidth - moveRealX;
+              barWidth = barWidth < 30 ? 30 : barWidth;
+              if (barWidth >= sliderWidth) {
+                proxyData.isWhite = true;
+              } else {
+                proxyData.isWhite = false;
+              }
+
+              barBox.style.width = barWidth + "px";
+              let realTemp = proxyData.airData.minTempSet + barWidth * part;
+              if (realTemp > proxyData.airData.maxTempSet) {
+                realTemp = proxyData.airData.maxTempSet;
+              }
+              if (realTemp) {
+                proxyData.realTemp = fix(realTemp.toFixed(1));
+              }
+            }
+          },
+          swipeRight: function (e) {
+            if (isMove) {
+              let moveRealX = Math.abs(e.mation.moveX - e.mation.startX);
+              let barWidth = startBarWidth + moveRealX;
+              barWidth = barWidth > sliderWidth ? sliderWidth : barWidth;
+              if (barWidth >= sliderWidth) {
+                proxyData.isWhite = true;
+              } else {
+                proxyData.isWhite = false;
+              }
+              barBox.style.width = barWidth + "px";
+
+              let realTemp = barWidth * part + proxyData.airData.minTempSet;
+              if (realTemp > proxyData.airData.maxTempSet) {
+                realTemp = proxyData.airData.maxTempSet;
+              }
+              if (realTemp) {
+                proxyData.realTemp = fix(realTemp.toFixed(1));
+              }
+            }
+          },
+        });
+      },
     });
     onBeforeUnmount(() => {});
     onMounted(() => {});
@@ -114,7 +211,7 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   border-radius: 24px 24px 44px 24px;
-  background: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
   .top {
@@ -134,6 +231,8 @@ export default defineComponent({
       align-items: end;
       .temp {
         //styleName: En/H2;
+        width: 80px;
+        text-align: right;
         font-family: Jost;
         font-size: 20px;
         font-weight: 300;
@@ -207,14 +306,21 @@ export default defineComponent({
         top: 50%;
         transform: translateY(-50%);
         z-index: 1;
-        width: 73px;
+        // width: 73px;
+        // min-width: 18px;
         height: 30px;
         border-radius: 10px;
-        .line {
+        .hand-box {
+          padding-left: 6px;
+          padding-right: 6px;
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
-          right: 9px;
+          right: 0px;
+          height: 100%;
+        }
+        .line {
+          margin-top: 9px;
           height: 12px;
           width: 2px;
           background: rgba(255, 255, 255, 0.8);

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

@@ -73,7 +73,7 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   border-radius: 24px 24px 44px 24px;
-  background: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
   .top {

+ 1 - 1
src/views/envmonitor/taiguv1/components/Screen/index.vue

@@ -72,7 +72,7 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   border-radius: 24px 24px 44px 24px;
-  background: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
   .top {

+ 1 - 1
src/views/envmonitor/taiguv1/components/Volumn/index.vue

@@ -78,7 +78,7 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   border-radius: 24px 24px 44px 24px;
-  background: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(40px);
   box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
   .top {

+ 6 - 3
src/views/envmonitor/taiguv1/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="main" :style="{ 'background-image': 'url(' + roomInfo.bg + ')' }">
+    <!-- :style="{ 'background-image': 'url(' + roomInfo.bg + ')' }" -->
     <!-- <img :src="roomData[0].bg" class="video-image" /> -->
     <!-- <img class="video-image" src="roomInfo.bg"></div> -->
     <!-- <div class="video-image" :style="{ background: roomInfo.modeBg }"></div>
@@ -317,13 +318,15 @@ export default defineComponent({
   .video-image {
     position: absolute;
     left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    transform: translateX(-50%);
     // width: 1020px;
     // height: auto;
-    // height: 100%;
+    //height: 120%;
     width: 110%;
     height: auto;
+    // height: 120%;
+    // height: 100vh;
   }
   .video-model {
     position: absolute;